<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> 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: '暂无数据' } }, data() { return { datas: this.list } }, methods: { toPage(item,index){ if(item.url&&item.url!=''){ 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) } } } } } </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: 0; } .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; margin: 20upx 0; display: flex; align-items: center; flex-direction: column; justify-content: center; } </style>