123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- <template>
- <div class="icon-items-list" :class="'icon-items-list-'+type">
- <div class="icon-items-icons" :style="{width:itemWidth}" v-for="(item,index) in list" :key="item.id" @click="toPage(item,index)">
- <div class="icon-items-imgse" >
- <image class="imgs" v-if="type=='img'" :class="item.auth?'':'uni-img-gray'" :fade-show='true' :src="item.icon||'/static/def_imgs.png'"></image>
- <u-icon class="icons" v-if="type=='icon'" :color="item.color" :size="iconSize" :name="item.icon" custom-prefix="custom-icon"></u-icon>
- <u-badge class="tag" :absolute="false" type="error" v-if="item.nums" :count="item.nums"></u-badge>
- </div>
- <div class="icon-items-text">{{item.name}}</div>
- </div>
- <div class="nodata" v-if="list.length==0">
- <u-empty :text="noDataText" mode="list"></u-empty>
- </div>
- </div>
- </template>
- <script>
- import { toAuthStore } from "@/utils/index.js"
- export default {
- name: "iconItemsList",
- props:{
- // 套餐服务项 或配件id
- list:{
- type: Array,
- default: function(){
- return []
- }
- },
- itemWidth: {
- type: String,
- default: '25%'
- },
- iconSize: {
- type: Number,
- default: 60
- },
- type: {
- type: String,
- default: 'icon'
- },
- noDataText: {
- type: String,
- default: '暂无数据'
- },
- isLogin: {
- type: Boolean,
- default: false
- },
- sysUserFlag: {
- type: String,
- default: '1'
- }
- },
- data() {
- return {
- datas: this.list
- }
- },
- methods: {
- toPage(item,index){
- if(this.isLogin){
- if(item.url&&item.url!=''){
- if(!item.ignoreAuth){
- // 游客去认证
- if(this.sysUserFlag == '0'){
- toAuthStore()
- return true
- }
- }
- if(item.target == 'page'){
- uni.navigateTo({
- url: item.url
- })
- }
- if(item.target == 'tabPage'){
- uni.switchTab({
- url: item.url
- })
- }
- if(item.target == 'fun'){
- this.$emit('callback',item)
- }
- }
- }else{
- uni.navigateTo({
- url: '/pages/login/login'
- })
- }
- }
- }
- }
- </script>
- <style lang="less">
- .icon-items-list{
- align-items: flex-start;
- display: flex;
- flex-wrap: wrap;
- .nodata{
- text-align: center;
- font-size: 24upx;
- width: 100%;
- color: #999999;
- }
- }
- .icon-items-list-img{
- .icon-items-icons{
- margin-bottom: 5px;
- }
- .icon-items-imgse{
- position: relative;
- width: 100upx;
- height: 100upx;
- margin-bottom: 6upx;
- display:flex;
- align-items: center;
- justify-content: center;
- .imgs{
- width: 90upx;
- height: 90upx;
- }
- .tag{
- position: absolute;
- top: -5upx;
- right: -5upx;
- }
- }
- }
- .icon-items-list-icon{
- .icon-items-imgse{
- position: relative;
- width: 100upx;
- margin-bottom: 6upx;
- display:flex;
- align-items: center;
- justify-content: center;
- .tag{
- position: absolute;
- top: -5upx;
- right: -5upx;
- }
- }
- .icon-items-text{
- font-size: 24upx;
- color: #333;
- }
- }
- .icon-items-icons{
- text-align: center;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- }
- </style>
|