<template> <div class="icon-items-list" :class="'icon-items-list-'+type"> <div class="icon-items-icons" :style="{width:itemWidth,marginBottom:circle?'5px':'0px'}" v-for="(item,index) in list" :key="item.id" @click="toPage(item,index)"> <div class="icon-items-imgse" :class="circle?'icon-items-imgse-circle':''" > <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" :class="circle?'icon-items-text-circle':''">{{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' }, circle: { type: Boolean, default: false } }, 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-text{ font-size: 24upx; color: #333; } .icon-items-text-circle{ font-size: 28upx; color: #333; } } .icon-items-imgse{ position: relative; width: 60upx; height: 60upx; margin-bottom: 6upx; display:flex; align-items: center; justify-content: center; border-radius:10upx; overflow: hidden; .imgs{ width: 100%; height: 100%; } .tag{ position: absolute; top: -5upx; right: -5upx; } } .icon-items-imgse-circle{ border-radius:100rpx; overflow: hidden; width: 100upx; height: 100upx; background: linear-gradient(#fff,#eee); .imgs{ width: 80%; height: 80%; } } } .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>