123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <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"></image> -->
- <u-icon :name="item.icon" custom-prefix="xd-icon" size="65" :color="item.auth?item.color:'#999'"></u-icon>
- <div class="icon-items-text">{{item.name.slice(0,14)}}</div>
- </div>
- <div class="nodata" v-if="list.length==0">{{noDataText}}</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
- })
- }
- }
- }
- }
- }
- </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: 60upx;
- height: 60upx;
- }
- .icon-items-text{
- font-size: 28upx;
- color: #666666;
- margin-top: 5upx;
- }
- }
- .icon-items-icons{
- text-align: center;
- margin: 20upx 0;
- }
- // 生意经
- .icon-items-list-knowledge{
- align-items: flex-start;
- .icon-items-imgse{
- width: 215upx;
- height: 140upx;
- border-radius: 10upx;
- }
- .icon-items-text{
- font-size: 28upx;
- color: #666666;
- padding: 0 10upx;
- min-height: 70upx;
- }
- }
- </style>
|