<template> <div class="icon-items-list" :class="'icon-items-list-'+type"> <div class="icon-items-icons" v-for="(item,index) in list" :key="item.id" :style="{width:itemWidth}" @click="toPage(item,index)"> <image class="icon-items-imgse" :class="item.auth?'':'uni-img-gray'" :fade-show='true' :src="item.icon+'?x-oss-process=image/resize,m_fixed,h_140,w_215,color_ffffff'"></image> <div class="icon-items-text">{{item.name.slice(0,14)}}</div> <u-badge type="error" :count="item.count" :offset="[-10,30]"></u-badge> </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%' }, type: { type: String, default: 'icon' }, noDataText: { type: String, default: '暂无数据' } }, data() { return { datas: this.list } }, methods: { toPage(item,index){ if(!item.auth){ uni.showToast({icon: 'none',title: '你无权限操作此功能'}) return } if(item.url&&item.url!=''){ if(item.target == 'page'){ // console.log(item.url) // 生意经 if(this.type=="knowledge"){ this.$store.state.vuex_knowledgePageNo = index } uni.navigateTo({ url: item.url }) } if(item.target == 'tabPage'){ uni.switchTab({ url: item.url }) } if(item.target == 'fun'){ item.url() } } } } } </script> <style lang="less"> .icon-items-list{ align-items: center; display: flex; flex-wrap: wrap; .nodata{ text-align: center; font-size: 24upx; width: 100%; color: #999999; } } .icon-items-list-icon{ .icon-items-imgse{ width: 64upx; height: 64upx; } .icon-items-text{ font-size: 28upx; color: #666666; } } .icon-items-icons{ text-align: center; margin: 20upx 0; position: relative; } // 生意经 .icon-items-list-knowledge{ align-items: flex-start; justify-content: space-between; .icon-items-imgse{ width: 100%; height: 140upx; border-radius: 10upx; } .icon-items-text{ font-size: 28upx; color: #666666; padding: 0 10upx; min-height: 70upx; } } </style>