商品选择添加筛选项

components/Yl_Filtrate/index.js

@@ -21,7 +21,7 @@ Component({
         },
         show: Boolean,
         handle: Function, //按钮回调函数
-        dateRange: {//是否开启日期范围筛选
+        dateRange: { //是否开启日期范围筛选
             type: Boolean,
             value: true
         },
@@ -29,6 +29,7 @@ Component({
             type: String,
             value: 99999,
         },
+        interrupt: Function
     },
     data: {
         startdate: "", //开始时间
@@ -60,6 +61,12 @@ Component({
                     [`list[${index}].index`]: i
                 });
             }
+            if (this.data.list[index].interrupt) this.triggerEvent("interrupt", {
+                item,
+                index,
+                name: this.data.list[index].selectKey,
+                list: this.data.list
+            })
         },
         /* 点击按钮 */
         onClick(e) {
@@ -75,9 +82,11 @@ Component({
                     })
                 })
                 this.setData({
-                    startdate:'',
-                    enddate:''
+                    startdate: '',
+                    enddate: ''
                 })
+                let MultilevelClass = this.selectComponent("#MultilevelClass");
+                if (MultilevelClass) MultilevelClass.clearChild()
                 this.triggerEvent("handle", {})
             } else if (name == 'confirm') {
                 let obj = {};

components/Yl_Filtrate/index.json

@@ -1,4 +1,6 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {
+        "MultilevelClass": "./modules/multilevelClass"
+    }
 }

components/Yl_Filtrate/index.wxml

@@ -1,8 +1,10 @@
 <van-popup show="{{ show }}" position="right" custom-style="width: 660rpx; height:100vh;" z-index="{{zIndex}}" bind:close="onClose">
     <view class="head" />
     <Yl_ListBox height="{{listHeight}}" pullDown='{{false}}'>
+
         <block wx:for="{{list}}" wx:key="label">
-            <view class="groud" wx:if="{{item.list.length}}">
+            <MultilevelClass id="MultilevelClass" item='{{item}}' wx:if="{{item.type=='multilevelClass'}}" />
+            <view wx:elif="{{item.list.length}}" class="groud">
                 <view class="label">
                     {{item.label}}
                 </view>
@@ -11,6 +13,7 @@
                 </view>
             </view>
         </block>
+
         <view wx:if="{{dateRange}}" class="groud">
             <view class="label">
                 日期范围

components/Yl_Filtrate/modules/multilevelClass.js

@@ -0,0 +1,48 @@
+Component({
+    properties: {
+        item: Object
+    },
+    data: {
+        active: {}
+    },
+    methods: {
+        clearChild() {
+            this.setData({
+                "item.index": null,
+                childClass: null
+            });
+            let MultilevelClass = this.selectComponent("#MultilevelClass");
+            if (MultilevelClass) MultilevelClass.clearChild()
+            getApp().globalData.temporaryId = null;
+        },
+        onSelect(e) {
+            const {
+                i,
+                item
+            } = e.currentTarget.dataset;
+            if (this.data.item.index == i) {
+                getApp().globalData.temporaryId = this.data.item.id || "";
+                this.setData({
+                    "item.index": null,
+                    childClass: null
+                });
+            } else {
+                getApp().globalData.temporaryId = this.data.item.selectKey ? item[this.data.item.selectKey] : JSON.parse(JSON.stringify(item));
+                this.setData({
+                    "item.index": i,
+                    childClass: item.subdep.length ? {
+                        index: null,
+                        label: item.itemclassname + '的下级分类',
+                        list: item.subdep,
+                        selectKey: this.data.item.selectKey,
+                        showName: this.data.item.showName,
+                        type: this.data.item.type,
+                        value: "",
+                        valueKey: this.data.item.valueKey,
+                        id: getApp().globalData.temporaryId
+                    } : null
+                });
+            };
+        }
+    }
+})

components/Yl_Filtrate/modules/multilevelClass.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "MultilevelClass": "./multilevelClass"
+
+    }
+}

components/Yl_Filtrate/modules/multilevelClass.scss

@@ -0,0 +1 @@
+@import "../groud.scss"

components/Yl_Filtrate/modules/multilevelClass.wxml

@@ -0,0 +1,10 @@
+<view wx:if="{{item.list.length}}" class="groud">
+    <view class="label">
+        {{item.label}}
+    </view>
+    <view class="content">
+        <van-button custom-class='but {{item.index==i?"active":""}}' wx:for="{{item.list}}" wx:for-item="data" wx:for-index="i" wx:key="i" data-item="{{data}}" data-index="{{index}}" data-i="{{i}}" bindtap="onSelect">{{data[item.showName]}}</van-button>
+    </view>
+</view>
+
+<MultilevelClass id='MultilevelClass' wx:if="{{childClass}}" item='{{childClass}}' />

select/product/index.js

@@ -1,152 +1,297 @@
 const _Http = getApp().globalData.http,
-	file = require("../../utils/FormatTheAttachment");
+    file = require("../../utils/FormatTheAttachment");
 import currency from "../../utils/currency";
 Page({
-	data: {
-		loading: true,
-		params: {}, //请求体
-		result: [], //返回结果
-		radio: false, //是否为单选
-		idname: "itemid", //idkey
-		showName: "itemname"
-	},
-	onLoad(options) {
-		if (options.params) {
-			let params = JSON.parse(options.params);
-			if (!params.content.pageNumber || !params.content.pageTotal) {
-				params.content.pageNumber = 1;
-				params.content.pageTotal = 1;
-			}
-			this.setData({
-				params
-			});
-		};
-		this.setData({
-			radio: options.radio ? true : false,
-			idname: options.idname || this.data.idname,
-			showName: options.showName || this.data.showName,
-			newPrice: options.newprice || "marketprice", //红色价格
-			oldPrice: options.oldprice || "oldprice" //对比老价格
-		});
-		this.getList()
-	},
-	getList(init = false) {
-		//init 用于初始化分页
-		if (init.detail != undefined) init = init.detail;
-		let params = this.data.params;
-		if (init) params.content.pageNumber = 1
-		if (params.content.pageNumber > params.content.pageTotal) return;
+    data: {
+        loading: true,
+        params: {}, //请求体
+        result: [], //返回结果
+        radio: false, //是否为单选
+        idname: "itemid", //idkey
+        showName: "itemname",
+        filtrate: false,
+        filtratelist: [{
+            label: "领域",
+            index: null,
+            showName: "tradefield", //显示字段
+            valueKey: "tradefield", //返回Key
+            selectKey: "tradefield", //传参 代表选着字段 不传参返回整个选择对象
+            value: "", //选中值
+            list: null
+        }, {
+            label: "标准",
+            index: null,
+            showName: "value", //显示字段
+            valueKey: "standards", //返回Key
+            selectKey: "value", //传参 代表选着字段 不传参返回整个选择对象
+            value: "", //选中值
+            list: null
+        }, {
+            label: "材质",
+            index: null,
+            showName: "value", //显示字段
+            valueKey: "material", //返回Key
+            selectKey: "value", //传参 代表选着字段 不传参返回整个选择对象
+            value: "", //选中值
+            list: null
+        }, {
+            label: "品牌",
+            index: null,
+            showName: "brandname", //显示字段
+            valueKey: "sa_brandid", //返回Key
+            selectKey: "sa_brandid", //传参 代表选着字段 不传参返回整个选择对象
+            value: "", //选中值
+            interrupt: true,
+            list: null
+        }, ]
+    },
+    onLoad(options) {
+        if (options.params) {
+            let params = JSON.parse(options.params);
+            if (!params.content.pageNumber || !params.content.pageTotal) {
+                params.content.pageNumber = 1;
+                params.content.pageTotal = 1;
+            }
+            this.setData({
+                params
+            });
+        };
+        this.setData({
+            radio: options.radio ? true : false,
+            idname: options.idname || this.data.idname,
+            showName: options.showName || this.data.showName,
+            newPrice: options.newprice || "marketprice", //红色价格
+            oldPrice: options.oldprice || "oldprice" //对比老价格
+        });
+        this.getList()
+    },
+    getList(init = false) {
+        //init 用于初始化分页
+        if (init.detail != undefined) init = init.detail;
+        let params = this.data.params;
+        if (init) params.content.pageNumber = 1
+        if (params.content.pageNumber > params.content.pageTotal) return;
 
-		_Http.basic(params).then(res => {
-			console.log("选择产品列表", res)
-			this.selectComponent('#ListBox').RefreshToComplete();
-			if (res.msg != '成功') return wx.showToast({
-				title: res.msg,
-				icon: "none"
-			})
-			const CNY = num => currency(num, {
-				symbol: "￥",
-				precision: 2
-			}).format();
-			let newPrice = this.data.newPrice,
-				oldPrice = this.data.oldPrice;
-			res.data = res.data.map(value => {
-				if (value.attinfos.length != 0) {
-					value.attinfos = file.fileList(value.attinfos)
-					let image = value.attinfos.find(v => v.fileType == "image");
-					value.cover = image ? image.cover : "";
-				}
-				
-				if (newPrice) value.newPrice = CNY(value[newPrice] || 0);
-				if (oldPrice) value.oldPrice = CNY(value[oldPrice] || 0);
+        _Http.basic(params).then(res => {
+            console.log("选择产品列表", res)
+            this.selectComponent('#ListBox').RefreshToComplete();
+            if (res.msg != '成功') return wx.showToast({
+                title: res.msg,
+                icon: "none"
+            })
+            const CNY = num => currency(num, {
+                symbol: "￥",
+                precision: 2
+            }).format();
+            let newPrice = this.data.newPrice,
+                oldPrice = this.data.oldPrice;
+            res.data = res.data.map(value => {
+                if (value.attinfos.length != 0) {
+                    value.attinfos = file.fileList(value.attinfos)
+                    let image = value.attinfos.find(v => v.fileType == "image");
+                    value.cover = image ? image.cover : "";
+                }
 
-				value.brandName = value.brand.map(name => name.brandname)
-				value.tradefields = value.tradefield.map(name => name.tradefield)
-				return value;
-			})
-			this.setData({
-				'params.content.pageNumber': res.pageNumber + 1,
-				'params.content.pageTotal': res.pageTotal,
-				'params.content.total': res.total,
-				list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data),
-				loading: false
-			})
-		})
-	},
-	/* 选中 */
-	changeResult(e) {
-		let {
-			id
-		} = e.currentTarget.dataset, result = this.data.result;
-		if (this.data.radio) {
-			result = [id];
-		} else {
-			result.some(v => v == id) ? result = result.filter(v => v != id) : result.push(id)
-		}
-		this.setData({
-			result
-		});
-		if (this.data.radio) this.submit();
-	},
-	/* 提交 */
-	submit() {
-		let result = this.data.result,
-			obj = this.data.radio ? {
-				id: result,
-				item: this.data.list.find(value => value[this.data.idname] == result),
-				value: [this.data.list.find(value => value[this.data.idname] == result)[this.data.showName], result]
-			} : {
-				result,
-				list: result.map(v => this.data.list.find(value => value[this.data.idname] == v)),
-				value: [result.map(v => {
-					let data = this.data.list.find(value => value[this.data.idname] == v);
-					return data ? data[this.data.showName] : ""
-				}), result]
-			}
-		getApp().globalData.handleSelect && getApp().globalData.handleSelect(obj)
-	},
-	/* 预览图片 */
-	viewImage(e) {
-		const {
-			file
-		} = e.currentTarget.dataset;
-		if (file.length) wx.previewMedia({
-			sources: file.filter(value => ['image', 'vadio'].includes(value.fileType)).map(v => {
-				return {
-					url: v.url,
-					type: v.fileType
-				}
-			}),
-			current: 0,
-			showmenu: true
-		})
-	},
-	/* 开始搜索 */
-	startSearch({
-		detail
-	}) {
-		let condition = this.data.content ? this.data.content.where.condition : this.data.params.content.where.condition;
-		if (detail == condition) return;
-		this.setData({
-			'content.where.condition': detail,
-			'params.content.where.condition': detail
-		});
-		this.getList(true);
-	},
-	/* 取消搜索 */
-	onClear() {
-		this.setData({
-			'content.where.condition': "",
-			'params.content.where.condition': ""
-		});
-		this.getList(true);
-	},
-	onReady() {
-		this.selectComponent("#ListBox").setHeight(".total", this);
-	},
-	onUnload() {
-		//回收数据
-		getApp().globalData.handleSelect = null;
+                if (newPrice) value.newPrice = CNY(value[newPrice] || 0);
+                if (oldPrice) value.oldPrice = CNY(value[oldPrice] || 0);
 
-	}
+                value.brandName = value.brand.map(name => name.brandname)
+                value.tradefields = value.tradefield.map(name => name.tradefield)
+                return value;
+            })
+            this.setData({
+                'params.content.pageNumber': res.pageNumber + 1,
+                'params.content.pageTotal': res.pageTotal,
+                'params.content.total': res.total,
+                list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data),
+                loading: false
+            })
+        })
+    },
+    /* 选中 */
+    changeResult(e) {
+        let {
+            id
+        } = e.currentTarget.dataset, result = this.data.result;
+        if (this.data.radio) {
+            result = [id];
+        } else {
+            result.some(v => v == id) ? result = result.filter(v => v != id) : result.push(id)
+        }
+        this.setData({
+            result
+        });
+        if (this.data.radio) this.submit();
+    },
+    /* 提交 */
+    submit() {
+        let result = this.data.result,
+            obj = this.data.radio ? {
+                id: result,
+                item: this.data.list.find(value => value[this.data.idname] == result),
+                value: [this.data.list.find(value => value[this.data.idname] == result)[this.data.showName], result]
+            } : {
+                result,
+                list: result.map(v => this.data.list.find(value => value[this.data.idname] == v)),
+                value: [result.map(v => {
+                    let data = this.data.list.find(value => value[this.data.idname] == v);
+                    return data ? data[this.data.showName] : ""
+                }), result]
+            }
+        getApp().globalData.handleSelect && getApp().globalData.handleSelect(obj)
+    },
+    /* 预览图片 */
+    viewImage(e) {
+        const {
+            file
+        } = e.currentTarget.dataset;
+        if (file.length) wx.previewMedia({
+            sources: file.filter(value => ['image', 'vadio'].includes(value.fileType)).map(v => {
+                return {
+                    url: v.url,
+                    type: v.fileType
+                }
+            }),
+            current: 0,
+            showmenu: true
+        })
+    },
+    /* 开始搜索 */
+    startSearch({
+        detail
+    }) {
+        let condition = this.data.content ? this.data.content.where.condition : this.data.params.content.where.condition;
+        if (detail == condition) return;
+        this.setData({
+            'content.where.condition': detail,
+            'params.content.where.condition': detail
+        });
+        this.getList(true);
+    },
+    /* 取消搜索 */
+    onClear() {
+        this.setData({
+            'content.where.condition': "",
+            'params.content.where.condition': ""
+        });
+        this.getList(true);
+    },
+    onReady() {
+        this.selectComponent("#ListBox").setHeight(".total", this);
+    },
+    onUnload() {
+        //回收数据
+        getApp().globalData.handleSelect = null;
+    },
+    async openFiltrate() {
+        if (this.data.filtratelist[0].list == null) {
+            let res = await Promise.all([this.gettradefields(), this.getitemstandards(), this.getitemmaterial(), this.getBrand()]);
+            console.log(res)
+            res.forEach((v, i) => this.data.filtratelist[i].list = v.data);
+            this.setData({
+                filtratelist: this.data.filtratelist,
+                filtrate: true
+            })
+        } else {
+            this.setData({
+                filtrate: true
+            })
+        }
+    },
+    /* 处理筛选 */
+    handleFilter(e) {
+        this.data.params.content.where.itemclassid = e.detail.itemclassid || "";
+        this.data.params.content.where.sa_brandid = e.detail.sa_brandid || "";
+        this.data.params.content.where.tradefield = e.detail.tradefield || "";
+        this.data.params.content.where.standards = e.detail.standards || "";
+        this.data.params.content.where.material = e.detail.material || "";
+        this.getList(true)
+    },
+    /* 获取品牌列表 */
+    getBrand() {
+        return _Http.basic({
+            "id": "20220922085103",
+            "version": 1,
+            "content": {
+                "where": {
+                    "condition": ""
+                }
+            }
+        })
+    },
+    /* 获取领域列表 */
+    gettradefields() {
+        return _Http.basic({
+            "id": 20221223141802,
+            "content": {
+                "pageNumber": 1,
+                "pageSize": 99999,
+                "where": {
+                    "condition": ""
+                }
+            }
+        })
+    },
+    /* 标准 */
+    getitemstandards() {
+        return _Http.basic({
+            "classname": "sysmanage.develop.optiontype.optiontype",
+            "method": "optiontypeselect",
+            "content": {
+                "pageNumber": 1,
+                "pageSize": 1000,
+                "typename": "itemstandards",
+                "parameter": {}
+            },
+        })
+    },
+    /* 材质 */
+    getitemmaterial() {
+        return _Http.basic({
+            "classname": "sysmanage.develop.optiontype.optiontype",
+            "method": "optiontypeselect",
+            "content": {
+                "pageNumber": 1,
+                "pageSize": 1000,
+                "typename": "itemmaterial",
+                "parameter": {}
+            },
+        })
+    },
+    /* 打断 */
+    interrupt(e) {
+        let {
+            name,
+            index,
+            item,
+            list
+        } = e.detail;
+        if (name == "sa_brandid") _Http.basic({
+            "id": "20220922110403",
+            "content": {
+                nocache: true,
+                "sa_brandid": item.sa_brandid,
+            }
+        }).then(res => {
+            console.log("分类列表", res)
+            if (res.msg != '成功') return wx.showToast({
+                title: res.msg,
+                icon: "none"
+            })
+            if (!res.data[0].ttemclass) return;
+            list[4] = {
+                label: "分类",
+                index: null,
+                type: "multilevelClass",
+                showName: "itemclassname", //显示字段
+                valueKey: "itemclassid", //返回Key
+                selectKey: "itemclassid", //传参 代表选着字段 不传参返回整个选择对象
+                value: "", //选中值
+                list: res.data[0].ttemclass
+            }
+            this.setData({
+                filtratelist: list
+            })
+        })
+    },
 })

select/product/index.wxml

@@ -1,7 +1,11 @@
 <import src="index.skeleton.wxml" />
 <template is="skeleton" wx:if="{{loading}}" />
 
-<van-search class="search" value="{{ params.content.where.condition }}" shape="round" placeholder="请输入搜索关键词" bind:search='startSearch' bind:clear='onClear' />
+<van-search class="search" value="{{ params.content.where.condition }}" shape="round" placeholder="请输入搜索关键词" bind:search='startSearch' bind:clear='onClear' use-action-slot>
+    <navigator url="#" slot="action" class="iconfont icon-shaixuan" bindtap="openFiltrate">
+        筛选
+    </navigator>
+</van-search>
 <view class="total">共{{params.content.total}}个</view>
 
 <Yl_ListBox id='ListBox' bind:getlist='getList'>
@@ -40,6 +44,8 @@
     <Yl_Empty wx:if="{{list.length==0}}" />
 </Yl_ListBox>
 
+<Yl_Filtrate show='{{filtrate}}' list="{{filtratelist}}" dateRange='{{false}}' bindhandle="handleFilter" bindinterrupt='interrupt' />
+
 <block wx:if="{{!radio}}">
     <view class="footer">
         <view class="count">