后台数据实现个数的增减，默认有演示数据，添加个数后，默认数据不展示，以添加的为准
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": {}
}
