V38 淘宝小程序分类模块案例DEMO

后台数据实现个数的增减，默认有演示数据，添加个数后，默认数据不展示，以添加的为准 index.axml

<view class="goods-list-box" >
  <view class="md-title" data-url="{{md_title_link}}" onTap="navigateToUrlTap"  a:if="{{md_title_type==1?true:false}}" 
   style="background:url({{diy_title_image.src}}) no-repeat;background-size:100%;">

    <view class="title-box">
      <view class="title1"  style="{{title_color?'color:'+title_color:''}}">{{md_title}}</view>
    </view>

  </view>
  <view class="goods" style="{{goods_color?'color:'+goods_color+';':''}}">

  <block a:for="{{text_array}}" a:for-index="i">

  <view class="list list{{i}}" data-url="{{item.text_link}}" onTap="navigateToUrlTap" >

    <view class="pic" style="background:url('{{item.text_pic.src}}') no-repeat; background-size:100%;">

    </view>
    <view class="title" style="{{zi_color?'color:'+zi_color:''}}">{{item.text_title}}</view>
  </view>
  
  </block>
  </view>

</view>

js

import { enhanceComponent } from 'tb-shop-enhance';

Component(enhanceComponent({
  data: {
 text_array:[
      {
        "text_title":"宠物食品",
        "text_link":"",
         "text_pic":{
            "src":"https://img.alicdn.com/imgextra/i3/899166132/O1CN01Iio3UA1vAVKwzbxLT_!!899166132.jpg"
          }
      
      },

      {
        "text_title":"宠物玩具",
        "text_link":"",
         "text_pic":{
            "src":"https://img.alicdn.com/imgextra/i1/899166132/O1CN01vFTPjq1vAVKwzbxLb_!!899166132.jpg"
          }
      
      },
            {
        "text_title":"宠物衣服",
        "text_link":"",
         "text_pic":{
            "src":"https://img.alicdn.com/imgextra/i1/899166132/O1CN01AVVkED1vAVKo74bNG_!!899166132.jpg"
          }
      
      },
            {
        "text_title":"宠物药品",
        "text_link":"",
         "text_pic":{
            "src":"https://img.alicdn.com/imgextra/i1/899166132/O1CN01AldvmN1vAVKuiuETm_!!899166132.jpg"
          }
      
      },
            {
        "text_title":"宠物用品",
        "text_link":"",
         "text_pic":{
            "src":"https://img.alicdn.com/imgextra/i1/899166132/O1CN01pTk7qo1vAVKuisgsM_!!899166132.jpg"
          }
      
      },
            {
        "text_title":"猫咪零食",
        "text_link":"",
         "text_pic":{
            "src":"https://img.alicdn.com/imgextra/i4/899166132/O1CN01rZvtsp1vAVL1rIxpM_!!899166132.jpg"
          }
      
      },
            {
        "text_title":"宠物出售",
        "text_link":"",
         "text_pic":{
            "src":"https://img.alicdn.com/imgextra/i1/899166132/O1CN01ibaeHZ1vAVKu8irrK_!!899166132.jpg"
          }
      
      },
            {
        "text_title":"宠物疫苗",
        "text_link":"",
         "text_pic":{
            "src":"https://img.alicdn.com/imgextra/i3/899166132/O1CN012mRYNC1vAVKxi5Igo_!!899166132.jpg"
          }
      
      }

      ]

  },

  
  onInit() {
    // mock数据需要修改client文件夹中的page文件
    // 正常运行过程中模块总是默认传入data参数
  },

  didMount() {


    // 加载成功后可以异步获取数据更新数据展示，例如请求接口等操作
    const { gdc = {}, mds = {}, modUtils } = this.props.data;

    let diy_title_image={
      src:"https://img.alicdn.com/imgextra/i1/899166132/O1CN0125Xdrb1vAVKo5RhDh_!!899166132.png",
      width:460,
      height:108
    };
    let alayer={
      src:"https://img.alicdn.com/imgextra/i2/899166132/O1CN01kHEzM91vAVKM7yxMy_!!899166132.png",
      width:150,
      height:150
    };
    this.setData({
      md_title_type:mds.moduleData.md_title_type,
      md_title:mds.moduleData.md_title?mds.moduleData.md_title:'人气热卖',
      md_title2:mds.moduleData.md_title2?mds.moduleData.md_title2:'提高学习效率好帮手',
      md_title_link:mds.moduleData.md_title_link,
      diy_title_image:mds.moduleData.diy_title_image?mds.moduleData.diy_title_image:diy_title_image,
      alayer:mds.moduleData.alayer?mds.moduleData.alayer:alayer,
      show_alayer:mds.moduleData.show_alayer,
      show_goods_price:mds.moduleData.show_goods_price,
      show_goods_desc:mds.moduleData.show_goods_desc,
      show_goods_subdesc:mds.moduleData.show_goods_subdesc,
      md_bg_color:mds.moduleData.md_bg_color,
      fl_bg_color:mds.moduleData.fl_bg_color,
      zi_color:mds.moduleData.zi_color,
      title_color:mds.moduleData.title_color,
      //text_array:mds.moduleData.text_array,
      goods_color:mds.moduleData.goods_color
    })
    console.log(mds.moduleData.text_array);
    console.log(this.data.text_array);
    if(mds.moduleData.text_array && mds.moduleData.text_array.length > 0){
		var text_array = this.data.text_array;
		for(var i = 0; i < mds.moduleData.text_array.length; i++){
			if(!mds.moduleData.text_array[i]['text_title']){
				mds.moduleData.text_array[i]['text_title'] = text_array[i]['text_title'];
			}
			if(!mds.moduleData.text_array[i]['text_pic']){
        mds.moduleData.text_array[i]['text_pic']={};
				mds.moduleData.text_array[i]['text_pic']['src'] = text_array[i]['text_pic']['src'];
			}else{
        if(!mds.moduleData.text_array[i]['text_pic']['src']){
        mds.moduleData.text_array[i]['text_pic']['src'] = text_array[i]['text_pic']['src'];
        }
      }

			if(!mds.moduleData.text_array[i]['text_link']){
				mds.moduleData.text_array[i]['text_link'] = text_array[i]['text_link'];
			}
		}
    console.log(mds.moduleData.text_array);
		this.setData({
			text_array: mds.moduleData.text_array
		})
	}


    if(mds.moduleData.show_image_type==2 && mds.moduleData.diy_image_height){
      this.setData({
        diy_image_height:mds.moduleData.diy_image_height
      });
    }
    
    let sellerId='';
    if(gdc.userId){
      sellerId=gdc.userId;
    }else if(gdc.sellerId){
      sellerId=gdc.sellerId;
    }else if(gdc.designerId){
      sellerId=gdc.designerId;
    }
    
    switch(mds.moduleData.goods_type){
      case "1":
          let startPrice="",endPrice="";
          if(mds.moduleData.price){
            startPrice=mds.moduleData.price.startPrice;
            endPrice=mds.moduleData.price.endPrice;
          }
          my.tb.shopGetItem({
            "sellerId":sellerId,
            "isAuto":true,
            "itemIds":"",
            "pageSize":mds.moduleData.goods_number,
            "catId":mds.moduleData.category,
            "sort":mds.moduleData.sort,
            "keyWord":mds.moduleData.keyword,
            "startPrice":startPrice,
            "endPrice":endPrice,
          }).then(resp => {
            let goods_array=[];
            goods_array=resp.data.list;
            if(mds.moduleData.show_goods_subdesc){
              for(let i=0;i<goods_array.length;i++){
                if(mds.moduleData.diy_goods_subdesc){
                  goods_array[i].subtitle=mds.moduleData.diy_goods_subdesc;
                }
              }
            }
            this.setData({
              goods_array: goods_array
            });
          }).catch(err => {
            console.warn("自动推荐调用异常");
          })
        break;
      case "2":
          my.tb.shopGetItem({
            "sellerId":sellerId,
            "isAuto":false,
            "itemIds":mds.moduleData.goods_itemIds,
            "pageSize":"",
            "catId":"",
            "sort":"",
            "keyWord":"",
            "startPrice":"",
            "endPrice":""
          }).then(resp => {
            let goods_array=[];
            goods_array=resp.data.list;
            let diy_goods=mds.moduleData.diy_goods_array?mds.moduleData.diy_goods_array:[];
            for(let i=0;i<goods_array.length;i++){
              if(mds.moduleData.diy_goods_subdesc){
                goods_array[i].subtitle=mds.moduleData.diy_goods_subdesc;
              }
              if(diy_goods[i] && mds.moduleData.diy_data_type==2){
                if(diy_goods[i].diy_goods_image){
                  goods_array[i].imgUrl=diy_goods[i].diy_goods_image.src;
                }
                if(diy_goods[i].diy_goods_link){
                  goods_array[i].h5Url=diy_goods[i].diy_goods_link;
                }
                if(diy_goods[i].diy_goods_title){
                  goods_array[i].title=diy_goods[i].diy_goods_title;
                }
                if(diy_goods[i].diy_goods_subtitle){
                  goods_array[i].subtitle=diy_goods[i].diy_goods_subtitle;
                }
              }
            }
            this.setData({
              goods_array: goods_array
            });
          }).catch(err => {
            console.warn("手动推荐调用异常");
          })
        break;
    }
  },

  methods: {
    navigateToUrlTap(e) {
      const { mds = {}, modUtils } = this.props.data;
      const { url } = e.target.dataset;
     
      if (url) {
        modUtils.router.navigateToUrl(url, mds);
      }
    }
  }
}));

schema.json

{
  "components": {
    "md_tab": {
      "type": "OfficialRadio",
      "dataName": "md_tab",
      "label": {
        "description": {
          "desc": ""
        },
        "title": ""
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "shape": "button",
        "defaultValue": "1",
        "dataSource": [
          {
            "label": "数据设置",
            "value": "1"
          },
          {
            "label": "样式设置",
            "value": "2"
          }
        ]
      },
      "validateProps": {
        "dataType": "",
        "required": false,
        "validate": false
      }
    },
    "md_title_con": {
      "type": "OfficialContainer",
      "dataName": "md_title_con",
      "label": {
        "description": {
          "desc": ""
        },
        "title": "模块头部数据设置"
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {},
      "validateProps": {
        "dataType": "",
        "required": false,
        "validate": false
      }
    },
    "md_title_type": {
      "type": "OfficialRadio",
      "dataName": "md_title_type",
      "label": {
        "description": {
          "desc": ""
        },
        "title": ""
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "shape": "radio",
        "defaultValue": "1",
        "dataSource": [
          {
            "label": "显示",
            "value": "1"
          },
          {
            "label": "不显示",
            "value": "2"
          }
        ]
      },
      "validateProps": {
        "dataType": "",
        "required": false,
        "validate": false
      }
    },
    "md_title": {
      "type": "OfficialInput",
      "dataName": "md_title",
      "label": {
        "description": {
          "desc": ""
        },
        "title": "请输入模块主标题"
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "clear": true,
        "multiple": false
      },
      "validateProps": {
        "dataType": "Default",
        "required": false,
        "validate": false
      }
    },

    "md_title_link": {
      "type": "OfficialLink",
      "dataName": "md_title_link",
      "label": {
        "description": {
          "desc": ""
        },
        "title": "超链接"
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "placeholder": "请输入链接",
        "url": "//wangpu.taobao.com/shopdecorate/tools/linkSelector.htm"
      },
      "validateProps": {
        "dataType": "",
        "required": false,
        "validate": false
      }
    },
    "diy_title_image": {
      "type": "OfficialImage",
      "dataName": "diy_title_image",
      "label": {
        "description": {
          "desc": "图片尺寸460*108"
        },
        "title": "标题背景图"
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "sendDataType": "url",
        "config": {
          "minHeight": 108,
          "maxHeight": 108,
          "needCrop": true,
          "mime": "jpg,png",
          "minWidth": 460,
          "type": "pic",
          "maxWidth": 460
        },
        "url": "//sucai.wangpu.taobao.com/select.htm"
      },
      "validateProps": {
        "dataType": "",
        "required": false,
        "validate": false
      }
    },

    "text_array": {
      "type": "OfficialArray",
      "dataName": "text_array",
      "label": {
        "description": {
          "desc": "文字4个字以内"
        },
        "title": "设置分类图文"
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "itemTitle": "分组标题",
        "text": "添加",
        "itemTitleIndex": true
      },
      "validateProps": {
        "min": 0,
        "max": 16,
        "dataType": "Array",
        "required": false,
        "validate": false
      },
      "components": {
        "e1140900-3acf-11eb-930c-011e46861db0": {
          "type": "OfficialMap",
          "dataName": "diy_text_map",
          "label": {
            "description": {
              "desc": ""
            },
            "title": ""
          },
          "wrapperStyle": {},
          "style": {},
          "invisible": false,
          "extension": {},
          "validateProps": {
            "dataType": "Map",
            "required": false,
            "validate": false
          },
          "components": {
            "text_pic": {
              "type": "OfficialImage",
              "dataName": "text_pic",
              "label": {
                "description": {
                  "desc": "分类图片尺寸150*150"
                },
                "title": ""
              },
              "wrapperStyle": {},
              "style": {},
              "invisible": false,
              "extension": {
                "sendDataType": "url",
                "config": {
                  "minHeight": 150,
                  "maxHeight": 150,
                  "needCrop": true,
                  "mime": "jpg,png",
                  "minWidth": 150,
                  "type": "pic",
                  "maxWidth": 150
                },
                "url": "//sucai.wangpu.taobao.com/select.htm"
              },
              "validateProps": {
                "dataType": "",
                "required": false,
                "validate": false
              }
            },
            "text_title": {
              "type": "OfficialInput",
              "dataName": "text_title",
              "label": {
                "description": {
                  "desc": ""
                },
                "title": "分类文字"
              },
              "wrapperStyle": {},
              "style": {},
              "invisible": false,
              "extension": {
                "clear": true,
                "multiple": false
              },
              "validateProps": {
                "dataType": "Default",
                "required": false,
                "validate": false
              }
            },
            "text_link": {
              "type": "OfficialLink",
              "dataName": "text_link",
              "label": {
                "description": {
                  "desc": ""
                },
                "title": "超链接"
              },
              "wrapperStyle": {},
              "style": {},
              "invisible": false,
              "extension": {
                "placeholder": "请输入链接",
                "url": "//wangpu.taobao.com/shopdecorate/tools/linkSelector.htm"
              },
              "validateProps": {
                "dataType": "",
                "required": false,
                "validate": false
              }
            }


          },
          "layout": [
            {
              "id": "text_pic",
              "root": true,
              "children": []
            },
            {
              "id": "text_title",
              "root": true,
              "children": []
            },
            {
              "id": "text_link",
              "root": true,
              "children": []
            }
          ]
        }
      },
      "layout": [
        {
          "id": "e1140900-3acf-11eb-930c-011e46861db0",
          "root": true,
          "children": []
        }
      ]
    },

    "diy_style_con": {
      "type": "OfficialContainer",
      "dataName": "diy_style_con",
      "label": {
        "description": {
          "desc": ""
        },
        "title": ""
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {},
      "validateProps": {
        "dataType": "",
        "required": false,
        "validate": false
      }
    },

    "zi_color": {
      "type": "OfficialInput",
      "dataName": "zi_color",
      "label": {
        "description": {
          "desc": ""
        },
        "title": "分类文字颜色"
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "clear": true,
        "multiple": false,
        "max": 7,
        "placeholder": "颜色值，如#ff0000"
      },
      "validateProps": {
        "dataType": "Default",
        "required": false,
        "validate": false
      }
    },
    "title_color": {
      "type": "OfficialInput",
      "dataName": "title_color",
      "label": {
        "description": {
          "desc": ""
        },
        "title": "模块标题颜色"
      },
      "wrapperStyle": {},
      "style": {},
      "invisible": false,
      "extension": {
        "clear": true,
        "multiple": false,
        "max": 7,
        "placeholder": "颜色值，如#ff0000"
      },
      "validateProps": {
        "dataType": "Default",
        "required": false,
        "validate": false
      }
    }
  },
  "layout": [
    {
      "id": "md_tab",
      "root": true,
      "children": []
    },
    {
      "id": "md_title_con",
      "root": true,
      "children": [
        "md_title_type",
        "md_title",
        "diy_title_image",
        "md_title_link"
      ]
    },
    {
      "id": "text_array",
      "root": true,
      "children": []
    },

    {
      "id": "diy_style_con",
      "root": true,
      "children": [
        
        "zi_color",
        "title_color"
      ]
    }
  ],
  "rules": [

    {
      "desc": "规则配置",
      "condition": "${moduleData.md_title_type} == 2",
      "components": {
        "md_title": {
          "invisible": true
        },
        "diy_title_image": {
          "invisible": true
        },
        "md_title_link": {
          "invisible": true
        }

      }
    },

    {
      "desc": "规则配置",
      "condition": "${moduleData.md_tab} == 1",
      "components": {
        "diy_style_con": {
          "invisible": true
        }
      }
    },

    {
      "desc": "规则配置",
      "condition": "${moduleData.md_tab} == 2",
      "components": {
        "md_title_con": {
          "invisible": true
        },
        "text_array": {
          "invisible": true
        }
      }
    }
  ],
  "moduleData": {}
}