商城详情定制项

packageA/market/customMade/index.js

@@ -0,0 +1,89 @@
+import {
+  getCustomItems
+} from "../../../utils/customItemType";
+
+Component({
+  properties: {
+    topHei: {
+      type: String,
+      value: "20rpx"
+    },
+    onChange: {
+      type: Function
+    }
+  },
+  options: {
+    multipleSlots: true
+  },
+  externalClasses: ["external-custom-box", "external-custom-label"],
+  data: {
+    list: []
+  },
+  methods: {
+    init(data) {
+      getCustomItems(data).then(list => {
+        this.setData({
+          list
+        })
+        this.getResult();
+        console.log(this.data.list)
+      })
+    },
+    onOption(e) {
+      const {
+        index,
+        value
+      } = e.currentTarget.dataset;
+      if (this.data.list[index].value == value) return;
+      this.setData({
+        [`list[${index}].value`]: value
+      });
+      this.getResult();
+    },
+    getResult(isSubmit) {
+      let obj = {};
+      let breakOff = false;
+
+      this.data.list.filter(v => {
+        if (breakOff) return;
+        if (v.type == '自定义') {
+          if (!v.value) v.value = 0;
+          if (v.value < v.min) v.value = v.min;
+        }
+        obj[v.key] = v.value || '';
+        if (isSubmit && !obj[v.key]) {
+          wx.showToast({
+            title: `请完成定制"${v.label}"选项`,
+            icon: "none"
+          })
+          breakOff = true;
+        }
+      })
+      console.log("result", obj)
+      this.triggerEvent("onChange", breakOff ? false : obj)
+      return breakOff ? false : obj
+    },
+    /* 定制步进器 */
+    changeStepper(e) {
+      const {
+        index,
+        item
+      } = e.currentTarget.dataset;
+      if (!item.value) item.value = 0;
+      if (e.type == 'plus') {
+        item.value += 1
+      } else if (e.type == 'minus') {
+        item.value -= 1
+      } else {
+        item.value = (e.detail.value - 0).toFixed(item.decimalplaces);
+      }
+      item.value = item.value - 0;
+      if (item.value > item.max) item.value = item.max;
+      if (item.value < item.min) item.value = item.min;
+      this.setData({
+        [`list[${index}]`]: item
+      })
+      this.getResult();
+    },
+  }
+})

packageA/market/customMade/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-stepper": "@vant/weapp/stepper/index"
+  }
+}

packageA/market/customMade/index.scss

@@ -0,0 +1,34 @@
+.custom {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 6rpx;
+
+	&-label {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-top: 4rpx;
+	}
+
+	&-option {
+		background-color: #F4F5F7;
+		padding: 8rpx 20rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+		margin-right: 12rpx;
+		margin-bottom: 14rpx;
+	}
+
+	&-option:last-child {
+		margin-right: 0;
+	}
+
+	.active {
+		background: #E7EEFF !important;
+	}
+
+	.explain {
+		font-size: 22rpx;
+		color: #333;
+	}
+}

packageA/market/customMade/index.wxml

@@ -0,0 +1,21 @@
+<view hidden="{{!list.length}}">
+	<slot name='head' />
+	<view style="height: {{topHei}};" />
+</view>
+<view class="custom external-custom-box" wx:for="{{list}}" wx:key="sa_sizecustomizedschemeid">
+	<view class="custom-label external-custom-label">
+		{{item.label}}：
+	</view>
+	<!-- 可选项 -->
+	<block wx:if="{{item.type=='可选'}}">
+		<navigator url="#" class="custom-option {{it.num == item.value?'active':''}}" data-value="{{it.num}}" data-index="{{index}}" wx:for="{{item.rowsdetail}}" wx:for-item="it" wx:for-index="i" wx:key="sa_sizeschemedetailid" bindtap="onOption">
+			{{it.num}}
+		</navigator>
+	</block>
+
+	<view style="display: flex; align-items: center;" wx:elif="{{item.type=='自定义'}}">
+		<van-stepper value="{{item.value||0}}" data-item="{{item}}" data-index="{{index}}" input-width="60px" min="{{item.min}}" max="{{item.max}}" decimal-length="{{ item.decimalplaces }}" bind:plus='changeStepper' bind:blur='changeStepper' bind:minus='changeStepper' />
+		<view class="explain">{{item.min+'mm ~ '+ item.max}}mm,<text wx:if="{{item.decimalplaces}}">保留{{item.decimalplaces}}位小数</text><text wx:else>不保留小数</text></view>
+	</view>
+
+</view>

packageA/market/detail.js

@@ -1,6 +1,11 @@
 const _Http = getApp().globalData.http;
 let sa_brandid = null,
 	sys_enterpriseid = null;
+
+import {
+	getLabelList
+} from "../../utils/customItemType";
+
 import {
 	fileList
 } from "../../utils/FormatTheAttachment";
@@ -8,6 +13,7 @@ import currency from "../../utils/currency";
 
 Page({
 	data: {
+		labelList: getLabelList(),
 		hidePrice: wx.getStorageSync('hidePrice'),
 		badge: getApp().globalData.collectCount,
 		loading: true,
@@ -16,15 +22,11 @@ Page({
 			spec: "", //规格
 			color: "", //颜色
 			material: "", //材质
-			cheek: "", //边框
-			dwidth: 0,
-			dlength: 0,
+			cheek: "" //边框
 		},
 		detail: {
 			spec: ""
 		},
-		cWidth: null, //宽定制方案
-		cLength: null, //长定制方案
 	},
 	onLoad(options) {
 		let data = JSON.parse(options.params);
@@ -73,47 +75,7 @@ Page({
 				loading: false
 			});
 			//是否定制
-			if (init) {
-				if (item.iscustomsize == 1) {
-					let cWidth = null,
-						cLength = null;
-					Promise.all([{
-						"id": "20230707091603",
-						"version": 1,
-						"content": {
-							"sa_sizecustomizedschemeid": item.lengthschemeid,
-							date: Date.now() + 1
-						}
-					}, {
-						"id": "20230707091603",
-						"version": 1,
-						"content": {
-							"sa_sizecustomizedschemeid": item.widthschemeid,
-							date: Date.now() + 2
-						}
-					}].map(v => _Http.basic(v))).then(s => {
-						if (s.some(c => c.msg != '成功')) return wx.showToast({
-							title: '定制方案获取失败',
-							icon: "none"
-						})
-						if (item.lengthschemeid) cLength = s[0].data;
-						if (item.widthschemeid) cWidth = s[1].data;
-						this.setData({
-							cWidth,
-							cLength,
-							"content.dwidth": cWidth.min || 0,
-							"content.dlength": cLength.min || 0,
-						});
-					})
-				} else {
-					this.setData({
-						cWidth: null,
-						cLength: null,
-						"content.dwidth": 0,
-						"content.dlength": 0,
-					});
-				}
-			}
+			if (init && item.iscustomsize == 1) this.selectComponent("#customMade").init(item);
 		})
 	},
 	/* 预览媒体 */
@@ -178,37 +140,7 @@ Page({
 		content[valuename] = (content[valuename] == value.parm) ? "" : value.parm;
 		this.getDetail(valuename == "spec")
 	},
-	/* 定制选项 */
-	customParameter(e) {
-		let {
-			value,
-			valuename
-		} = e.currentTarget.dataset;
-		this.data.content[valuename] = value;
-		this.setData({
-			content: this.data.content
-		})
-	},
-	/* 定制步进器 */
-	cahngeStepper(e) {
-		const name = e.currentTarget.dataset.name,
-			name2 = name == 'cWidth' ? "dwidth" : "dlength",
-			content = this.data.content;
-		if (e.type == 'plus') {
-			content[name2] += 1
-		} else if (e.type == 'minus') {
-			content[name2] -= 1
-		} else {
-			const data = this.data[name];
-			content[name2] = (e.detail.value - 0).toFixed(data.decimalplaces);
-		}
-		let item = this.data[name];
-		if (content[name2] > item.max) content[name2] = item.max;
-		if (content[name2] < item.min) content[name2] = item.min;
-		this.setData({
-			content
-		})
-	},
+
 	clickBut() {
 		this.data.detail.tradefield.length >= 2 ? wx.showToast({
 			title: '请选择加入产品领域',
@@ -264,28 +196,22 @@ Page({
 	},
 	handleStorage(index) {
 		let detail = this.data.detail,
-			content = this.data.content;
-		if (detail.iscustomsize == 1) {
-			if (detail.widthschemeid != 0 && content.dwidth == 0) return wx.showToast({
-				title: '请完成定制宽选项',
-				icon: "none"
-			})
-			if (detail.lengthschemeid != 0 && content.dlength == 0) return wx.showToast({
-				title: '请完成定制长选项',
-				icon: "none"
-			})
-		}
+			custom = {};
+		//是否为定制项
+		if (detail.iscustomsize == 1) custom = this.selectComponent("#customMade").getResult(true);
+		if (typeof custom == boolean) return;
+		
+		let content = Object.assign(this.data.content, {
+			sa_brandid,
+			itemid: detail.itemid, //货品id
+			qty: detail.orderminqty, //数量
+			itemno: detail.itemno, //货品编号
+			tradefield: detail.tradefield[index].tradefield,
+		}, custom);
+
 		_Http.basic({
 			"id": 20220924095102,
-			"content": {
-				sa_brandid,
-				"itemid": detail.itemid, //货品id
-				"qty": detail.orderminqty, //数量
-				itemno: detail.itemno, //货品编号
-				tradefield: detail.tradefield[index].tradefield,
-				width: content.dwidth,
-				length: content.dlength
-			},
+			content,
 		}).then(res => {
 			console.log("加入购物车", res)
 			wx.showToast({

packageA/market/detail.json

@@ -1,6 +1,6 @@
 {
   "usingComponents": {
     "van-tag": "@vant/weapp/tag/index",
-    "van-stepper": "@vant/weapp/stepper/index"
+    "customMade": "./customMade/index"
   }
 }

packageA/market/detail.scss

@@ -97,6 +97,7 @@ swiper {
   padding-left: 30rpx;
   box-sizing: border-box;
   margin-top: 20rpx;
+  padding-bottom: 20rpx;
 
   .label {
     padding: 20rpx 0;

packageA/market/detail.wxml

@@ -36,7 +36,7 @@
 <view class="model">
     <block wx:if="{{materialRows.length}}">
         <view class="label">
-            基材
+            {{labelList.material}}
         </view>
         <view class="product-box">
             <navigator url="#" class="product {{content.material===item.parm?'active':''}} {{item.flag?'':'disabled'}}" wx:for="{{materialRows}}" wx:key="index" bindtap="changeItemno" data-valuename="material" data-value="{{item}}">{{item.parm}}</navigator>
@@ -45,7 +45,7 @@
 
     <block wx:if="{{colorRows.length}}">
         <view class="label">
-            颜色
+            {{labelList.color}}
         </view>
         <view class="product-box">
             <navigator url="#" class="product {{content.color===item.parm?'active':''}} {{item.flag?'':'disabled'}}" wx:for="{{colorRows}}" wx:key="index" bindtap="changeItemno" data-valuename="color" data-value="{{item}}">{{item.parm}}</navigator>
@@ -54,7 +54,7 @@
 
     <block wx:if="{{cheekRows.length}}">
         <view class="label">
-            边框
+            {{labelList.cheek}}
         </view>
         <view class="product-box">
             <navigator url="#" class="product {{content.cheek===item.parm?'active':''}}  {{item.flag?'':'disabled'}}" wx:for="{{cheekRows}}" wx:key="index" bindtap="changeItemno" data-valuename="cheek" data-value="{{item}}">{{item.parm}}</navigator>
@@ -63,55 +63,18 @@
 
     <block wx:if="{{specRows.length}}">
         <view class="label">
-            尺寸
+            {{labelList.spec}}
         </view>
         <view class="product-box">
             <navigator url="#" class="product {{content.spec===item.parm?'active':''}} {{item.flag?'':'disabled'}}" wx:for="{{specRows}}" wx:key="index" bindtap="changeItemno" data-valuename="spec" data-value="{{item}}">{{item.parm=='custom'?'自定义':item.parm}}</navigator>
         </view>
     </block>
 
-
-
-    <!-- 定制项 -->
-    <view wx:if="{{detail.iscustomsize==1}}" style="padding-bottom: 20rpx;">
-        <view class="label">
-            定制
+    <customMade id="customMade">
+        <view slot='head' class="label">
+            {{labelList.custom}}
         </view>
-        <block wx:if="{{cWidth}}">
-            <view class="label custom" wx:if="{{cWidth.type == '自定义'}}">
-                <view style="display: flex; align-items: center;">
-                    <view style="margin-right: 10rpx;">宽:</view>
-                    <van-stepper plus-class='plus-class' value="{{ content.dwidth }}" input-width="60px" min="{{cWidth.min}}" max="{{cWidth.max}}" decimal-length="{{ cWidth.decimalplaces }}" data-name="cWidth" bind:plus='cahngeStepper' bind:blur='cahngeStepper' bind:minus='cahngeStepper' />
-                    <view class="explain">{{cWidth.min+'mm ~ '+ cWidth.max}}mm,<text wx:if="{{cWidth.decimalplaces}}">保留{{cWidth.decimalplaces}}位小数</text><text wx:else>不保留小数</text></view>
-                </view>
-            </view>
-            <view class="label custom" wx:else>
-                <view style="display: flex;">
-                    <view style="margin-right: 20rpx;margin-top: 30rpx;">宽:</view>
-                    <view class="product-box">
-                        <navigator url="#" class="product {{content.dwidth===item.num?'active':''}}" wx:for="{{cWidth.rowsdetail}}" wx:key="rowindex" bindtap="customParameter" data-valuename="dwidth" data-value="{{item.num}}">{{item.num}}</navigator>
-                    </view>
-                </view>
-            </view>
-        </block>
-        <block wx:if="{{cLength}}">
-            <view class="label custom" wx:if="{{cLength.type == '自定义'}}">
-                <view style="display: flex; align-items: center;">
-                    <view style="margin-right: 10rpx;">长:</view>
-                    <van-stepper plus-class='plus-class' value="{{ content.dlength  }}" input-width="60px" min="{{cLength.min}}" max="{{cLength.max}}" decimal-length="{{ cLength.decimalplaces }}" data-name="cLength" bind:plus='cahngeStepper' bind:blur='cahngeStepper' bind:minus='cahngeStepper' />
-                    <view class="explain">{{cLength.min+'mm ~ '+ cLength.max}}mm,<text wx:if="{{cLength.decimalplaces}}">保留{{cLength.decimalplaces}}位小数</text><text wx:else>不保留小数</text></view>
-                </view>
-            </view>
-            <view class="label custom" wx:else>
-                <view style="display: flex;">
-                    <view style="margin-right: 20rpx;margin-top: 30rpx;">长:</view>
-                    <view class="product-box">
-                        <navigator url="#" class="product {{content.dlength===item.num?'active':''}}" wx:for="{{cLength.rowsdetail}}" wx:key="rowindex" bindtap="customParameter" data-valuename="dlength" data-value="{{item.num}}">{{item.num}}</navigator>
-                    </view>
-                </view>
-            </view>
-        </block>
-    </view>
+    </customMade>
 </view>
 <van-tabs custom-class='tabs' title-active-color='var(--assist)' color='var(--assist)'>
     <van-tab title="商品简介">

utils/customItemType.js

@@ -0,0 +1,57 @@
+const _Http = getApp().globalData.http;
+
+function getLabelList() {
+	let siteCustomLabel = {
+		"default": {
+			width: "宽",
+			length: "长",
+			cheek: "边框",
+			color: "颜色",
+			material: "基材",
+			spec: "尺寸",
+			custom: "定制"
+		},
+		"DLB": {
+			width: "宽",
+			length: "长",
+			cheek: "工艺",
+			color: "颜色",
+			material: "选项",
+			spec: "尺寸",
+			custom: "定制"
+		}
+	};
+	return siteCustomLabel[wx.getStorageSync('siteP').siteid] || siteCustomLabel.default
+}
+
+function getCustomItems(data) {
+	let labelList = getLabelList(),
+		httpList = [];
+	for (const key in labelList) {
+		const name = key + 'schemeid';
+		if (data[name]) httpList.push({
+			sa_sizecustomizedschemeid: data[name],
+			date: Date.now() + 1,
+			label: labelList[key],
+			key: key,
+			name
+		})
+	};
+
+	return new Promise((resolve, reject) => {
+		if (!httpList.length) return resolve([]);
+		Promise.all(httpList.map(v => _Http.basic({
+			"id": "20230707091603",
+			"version": 1,
+			content: v
+		}))).then(res => resolve(res.map((v, i) => {
+			v.data = Object.assign(v.data, httpList[i])
+			return v
+		}).filter(v => v.msg == '成功').map(v => v.data)))
+	})
+}
+
+module.exports = {
+	getLabelList,
+	getCustomItems
+}