From c8fdda0bb013b6ac8eeea033836285b12c7435fb Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 6 Jun 2023 22:47:43 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E3=80=91=201.=20=E6=8E=A5=E5=85=A5=20sku=20=E7=9A=84=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/productWindow/index.vue |  70 ++++++++--------
 pages/goods_details/index.vue      | 127 ++++++++++++-----------------
 2 files changed, 86 insertions(+), 111 deletions(-)

diff --git a/components/productWindow/index.vue b/components/productWindow/index.vue
index 2beaa8d5..014c93c0 100644
--- a/components/productWindow/index.vue
+++ b/components/productWindow/index.vue
@@ -1,32 +1,33 @@
 <template>
 	<view>
 		<view class="product-window"
-			:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt?'join':'') + ' ' + (iScart?'joinCart':'')">
+			:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt ? 'join':'') + ' ' + (iScart ? 'joinCart':'')">
 			<view class="textpic acea-row row-between-wrapper">
 				<view class="pictrue">
-					<image :src="attr.productSelect.image"></image>
+					<image :src="attr.productSelect.picUrl"></image>
 				</view>
 				<view class="text">
 					<view class="line1">
-						{{ attr.productSelect.storeName }}
+						{{ attr.productSelect.spuName }}
 					</view>
 					<view class="money font-color">
 						￥<text class="num">{{ attr.productSelect.price }}</text>
 						<text class="stock" v-if='isShow'>库存: {{ attr.productSelect.stock }}</text>
-						<text class='stock' v-if="limitNum">限量: {{attr.productSelect.quota}}</text>
+						<text class='stock' v-if="limitNum">限量: {{ attr.productSelect.quota }}</text>
 					</view>
 				</view>
 				<view class="iconfont icon-guanbi" @click="closeAttr"></view>
 			</view>
 			<view class="rollTop">
+        <!-- 属性 key + value 列表 -->
 				<view class="productWinList">
-					<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
-						<view class="title">{{ item.attrName }}</view>
+					<view class="item" v-for="(property, indexw) in attr.properties" :key="indexw">
+						<view class="title">{{ property.name }}</view>
 						<view class="listn acea-row row-middle">
-							<view class="itemn" :class="item.index === itemn ? 'on' : ''"
-								v-for="(itemn, indexn) in item.attrValues" @click="tapAttr(indexw, indexn)"
+							<view class="itemn" :class="property.index === value.name ? 'on' : ''"
+								v-for="(value, indexn) in property.values" @click="clickProperty(indexw, indexn)"
 								:key="indexn">
-								{{ itemn }}
+								{{ value.name }}
 							</view>
 						</view>
 					</view>
@@ -70,17 +71,16 @@
 
 <script>
 	export default {
-
 		props: {
 			attr: {
 				type: Object,
 				default: () => {}
 			},
-			limitNum: {
+			limitNum: { // TODO 芋艿：是否限流
 				type: Number,
 				value: 0
 			},
-			isShow: {
+			isShow: { // 是否展示库存
 				type: Number,
 				value: 0
 			},
@@ -107,7 +107,6 @@
 			},
 			/**
 			 * 购物车手动输入数量
-			 * 
 			 */
 			bindCode: function(e) {
 				this.$emit('iptCartNum', this.attr.productSelect.cart_num);
@@ -121,32 +120,33 @@
 			CartNumAdd: function() {
 				this.$emit('ChangeCartNum', true);
 			},
-			tapAttr: function(indexw, indexn) {
-				let that = this;
-				that.$emit("attrVal", {
-					indexw: indexw,
-					indexn: indexn
-				});
-				this.$set(this.attr.productAttr[indexw], 'index', this.attr.productAttr[indexw].attrValues[indexn]);
-				let value = that
-					.getCheckedValue()
-					// .sort()
-					.join(",");
-				that.$emit("ChangeAttr", value);
-
+      /**
+       * 选中某个规格属性
+       *
+       * @param indexw properties 的下标
+       * @param indexn properties 的下标
+       */
+			clickProperty: function(indexw, indexn) {
+        this.$set(this.attr.properties[indexw], 'index', this.attr.properties[indexw].values[indexn].name);
+				let newSkuKey = this.getCheckedValueNames().join(",");
+        this.$emit("ChangeAttr", newSkuKey);
 			},
-			//获取被选中属性；
-			getCheckedValue: function() {
-				let productAttr = this.attr.productAttr;
-				let value = [];
-				for (let i = 0; i < productAttr.length; i++) {
-					for (let j = 0; j < productAttr[i].attrValues.length; j++) {
-						if (productAttr[i].index === productAttr[i].attrValues[j]) {
-							value.push(productAttr[i].attrValues[j]);
+      /**
+       * 获取被选中属性值的数组
+       *
+       * @returns {*[]} 例如说，['红色', '大']
+       */
+			getCheckedValueNames: function() {
+				let properties = this.attr.properties;
+				let valueNames = [];
+				for (let i = 0; i < properties.length; i++) {
+					for (let j = 0; j < properties[i].values.length; j++) {
+						if (properties[i].index === properties[i].values[j].name) {
+							valueNames.push(properties[i].values[j].name);
 						}
 					}
 				}
-				return value;
+				return valueNames;
 			}
 		}
 	}
diff --git a/pages/goods_details/index.vue b/pages/goods_details/index.vue
index 8fa0f517..0c14920f 100644
--- a/pages/goods_details/index.vue
+++ b/pages/goods_details/index.vue
@@ -299,6 +299,7 @@
 	import parser from "@/components/jyf-parser/jyf-parser";
   import * as ProductSpuApi from '@/api/product/spu.js';
   import * as Util from '@/utils/util.js';
+  import * as ProductUtil from '@/utils/product.js';
   // #ifdef MP
 	import {
 		base64src
@@ -307,6 +308,7 @@
 	import {
 		getQrcode
 	} from '@/api/api.js';
+  import {convertProductPropertyList, convertProductSkuMap} from "../../utils/product";
 	// #endif
 	let app = getApp();
 	export default {
@@ -368,7 +370,7 @@
 				attr: { // productWindow 组件，使用该属性
 					cartAttr: false, // TODO 芋艿，还没搞懂
           // ↓↓↓ 属性数组，结构为：id = 属性编号；name = 属性编号的名字；values[].id = 属性值的编号，values[].name = 属性值的名字；index = 选中的属性值的名字
-					productAttr: [],
+					properties: [],
           productSelect: {} // 选中的 SKU
 				},
 				navActive: 0,
@@ -492,9 +494,6 @@
 				// });
 				// #endif
 			});
-		},
-		show() {
-
 		},
 		/**
 		 * 用户点击右上角分享
@@ -640,14 +639,13 @@
 			},
 			/**
 			 * 购物车数量加和数量减
-			 *
 			 */
 			ChangeCartNum: function(changeValue) {
 				//changeValue:是否 加|减
 				//获取当前变动属性
 				let productSelect = this.skuMap[this.attrValue];
 				//如果没有属性,赋值给商品默认库存
-				if (productSelect === undefined && !this.attr.productAttr.length)
+				if (productSelect === undefined && !this.attr.properties.length)
 					productSelect = this.attr.productSelect;
 				//无属性值即库存为0；不存在加减；
 				if (productSelect === undefined) return;
@@ -667,29 +665,25 @@
 					}
 				}
 			},
-			attrVal(val) {
-				this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val
-					.indexn]);
-			},
 			/**
 			 * 属性变动赋值
-			 *
+       *
+       * @param newSkuKey 新的 skuKey
 			 */
-			ChangeAttr: function(res) {
-				let productSelect = this.skuMap[res];
+			ChangeAttr: function(newSkuKey) {
+				let productSelect = this.skuMap[newSkuKey];
 				if (productSelect) {
-					this.$set(this.attr.productSelect, "image", productSelect.image);
+          this.$set(this.attr.productSelect, "id", productSelect.id);
+          this.$set(this.attr.productSelect, "picUrl", productSelect.picUrl);
 					this.$set(this.attr.productSelect, "price", productSelect.price);
 					this.$set(this.attr.productSelect, "stock", productSelect.stock);
-					this.$set(this.attr.productSelect, "unique", productSelect.id);
 					this.$set(this.attr.productSelect, "cart_num", 1);
-					this.$set(this, "attrValue", res);
+					this.$set(this, "attrValue", newSkuKey);
 					this.$set(this, "attrTxt", "已选择");
 				} else {
-					this.$set(this.attr.productSelect, "image", this.productInfo.image);
-					this.$set(this.attr.productSelect, "price", this.productInfo.price);
+					this.$set(this.attr.productSelect, "image", this.spu.image);
+					this.$set(this.attr.productSelect, "price", this.spu.price);
 					this.$set(this.attr.productSelect, "stock", 0);
-					this.$set(this.attr.productSelect, "unique", this.productInfo.id);
 					this.$set(this.attr.productSelect, "cart_num", 1);
 					this.$set(this, "attrValue", "");
 					this.$set(this, "attrTxt", "请选择");
@@ -717,7 +711,6 @@
 			},
 			/**
 			 * 优品推荐
-			 *
 			 */
 			getGoods() {
 				getProductGood().then(res => {
@@ -752,31 +745,19 @@
         ProductSpuApi.getSpuDetail(that.id).then(res => {
 					let productInfo = res.data;
           let spu = res.data;
+          let skus = res.data.skus;
 					that.$set(that, 'productInfo', productInfo);
           that.$set(that, 'spu', spu);
 					that.$set(that, 'userCollect', res.data.userCollect); // TODO 芋艿：需要改造下，异步加载收藏状态
-          if (true) {
-            return;
-          }
-					that.$set(that.attr, 'productAttr', res.data.productAttr);
-					that.$set(that, 'skuMap', res.data.skuMap);
+					that.$set(that.attr, 'properties', ProductUtil.convertProductPropertyList(skus));
+					that.$set(that, 'skuMap', ProductUtil.convertProductSkuMap(skus));
 					that.$set(that.sharePacket, 'priceName', res.data.priceName);
 					that.$set(that.sharePacket, 'isState', Math.floor(res.data.priceName) === 0);
 					that.$set(that, 'activityH5', res.data.activityAllH5 ? res.data.activityAllH5 : []);
-					uni.setNavigationBarTitle({
-						title: productInfo.storeName.substring(0, 7) + "..."
+					// 设置标题
+          uni.setNavigationBarTitle({
+						title: productInfo.name.substring(0, 7) + "..."
 					})
-					let productAttr = this.attr.productAttr.map(item => {
-					return {
-						attrName : item.attrName,
-						attrValues: item.attrValues.split(','),
-						id:item.id,
-						isDel:item.isDel,
-						productId:item.productId,
-						type:item.type
-					 }
-					});
-					this.$set(this.attr,'productAttr',productAttr);
 					if (that.isLogin) {
 						that.getCartCount();
 						//#ifdef H5
@@ -799,6 +780,7 @@
 					// #endif
 					that.DefaultSelect();
 				}).catch(err => {
+          console.error(err)
           if (true) {
             return;
           }
@@ -870,56 +852,50 @@
 					success: function() {},
 				});
 			},
+
 			/**
-			 * 默认选中属性
-			 *
+			 * 查找默认选中的 sku，设置到 attr.productSelect 中
 			 */
 			DefaultSelect: function() {
-				let productAttr = this.attr.productAttr;
-				let value = [];
-				for (let key in this.skuMap) {
+				let properties = this.attr.properties;
+        // 获得选中的属性值的名字，例如说 "黑色,大"，则 skuKey = ["黑色", "大"]
+        let skuKey = [];
+        for (let key in this.skuMap) {
 					if (this.skuMap[key].stock > 0) {
-						value = this.attr.productAttr.length ? key.split(",") : [];
+						skuKey = this.attr.properties.length ? key.split(",") : [];
 						break;
 					}
 				}
-				for (let i = 0; i < productAttr.length; i++) {
-					this.$set(productAttr[i], "index", value[i]);
+        // 使用 index 属性表示当前选中的，值为属性值的名字
+        for (let i = 0; i < properties.length; i++) {
+					this.$set(properties[i], "index", skuKey[i]);
 				}
-				//sort();排序函数:数字-英文-汉字；
-				let productSelect = this.skuMap[value.join(",")];
-				if (productSelect && productAttr.length) {
-					this.$set(
-						this.attr.productSelect,
-						"storeName",
-						this.productInfo.storeName
-					);
-					this.$set(this.attr.productSelect, "image", productSelect.image);
+
+				// sort();排序函数:数字-英文-汉字；
+				let productSelect = this.skuMap[skuKey.join(",")];
+        // 情况一：选中 SKU，并且有规格
+				if (productSelect && properties.length) {
+					this.$set(this.attr.productSelect, "spuName", this.spu.name);
+          this.$set(this.attr.productSelect, "id", productSelect.id);
+          this.$set(this.attr.productSelect, "picUrl", productSelect.picUrl);
 					this.$set(this.attr.productSelect, "price", productSelect.price);
 					this.$set(this.attr.productSelect, "stock", productSelect.stock);
-					this.$set(this.attr.productSelect, "unique", productSelect.id);
 					this.$set(this.attr.productSelect, "cart_num", 1);
-					this.$set(this, "attrValue", value.join(","));
+					this.$set(this, "attrValue", skuKey.join(","));
 					this.$set(this, "attrTxt", "已选择");
-				} else if (!productSelect && productAttr.length) {
-					this.$set(
-						this.attr.productSelect,
-						"storeName",
-						this.productInfo.storeName
-					);
-					this.$set(this.attr.productSelect, "image", this.productInfo.image);
-					this.$set(this.attr.productSelect, "price", this.productInfo.price);
-					this.$set(this.attr.productSelect, "stock", 0);
-					this.$set(this.attr.productSelect, "unique", this.productInfo.id);
+        // 情况二：未选中 SKU，并且有规格
+				} else if (!productSelect && properties.length) {
+          this.$set(this.attr.productSelect, "spuName", this.spu.name);
+          this.$set(this.attr.productSelect, "id", productSelect.id);
+          this.$set(this.attr.productSelect, "picUrl", productSelect.picUrl);
+          this.$set(this.attr.productSelect, "price", productSelect.price);
+          this.$set(this.attr.productSelect, "stock", 0);
 					this.$set(this.attr.productSelect, "cart_num", 1);
 					this.$set(this, "attrValue", "");
 					this.$set(this, "attrTxt", "请选择");
-				} else if (!productSelect && !productAttr.length) {
-					this.$set(
-						this.attr.productSelect,
-						"storeName",
-						this.productInfo.storeName
-					);
+        // TODO 芋艿：啥情况会出现呢？
+				} else if (!productSelect && !properties.length) {
+					this.$set(this.attr.productSelect, "storeName", this.productInfo.storeName);
 					this.$set(this.attr.productSelect, "image", this.productInfo.image);
 					this.$set(this.attr.productSelect, "price", this.productInfo.price);
 					this.$set(this.attr.productSelect, "stock", this.productInfo.stock);
@@ -935,7 +911,6 @@
 			},
 			/**
 			 * 获取优惠券
-			 *
 			 */
 			getCouponList(type) {
 				let that = this,
@@ -1040,7 +1015,7 @@
 					return (that.isOpen = true);
 				//如果有属性,没有选择,提示用户选择
 				if (
-					that.attr.productAttr.length &&
+					that.attr.properties.length &&
 					productSelect.stock === 0 &&
 					that.isOpen === true
 				)
@@ -1052,7 +1027,7 @@
 						productId: parseFloat(that.id),
 						cartNum: parseFloat(that.attr.productSelect.cart_num),
 						isNew: false,
-						productAttrUnique: that.attr.productSelect !== undefined ?
+						propertiesUnique: that.attr.productSelect !== undefined ?
 							that.attr.productSelect.unique : that.productInfo.id
 					};
 					postCartAdd(q).then(function(res) {