uniapp【修复】：sku优化多层选择，默认，置灰等问题

CoreCms.Net.Uni-App/CoreShop/core/models/goods.ts

@@ -134,6 +134,7 @@ export interface GoodsSkuListType {
 	sku_name_arr ?: Array<string>;
 	stock ?: number;
 	_id ?: string
+    [key:string]:any;
 }
 
 export interface GoodsSpecListType {
@@ -141,6 +142,7 @@ export interface GoodsSpecListType {
 	name ?: string;
 	select ?: boolean;
 	show ?: boolean;
+    [key:string]:any;
 }
 
 export interface GoodsFootprintType {

CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.scss

@@ -56,11 +56,10 @@
 			.tag {
 				position: relative;
 				font-size: 27rpx; 
-				padding: 15rpx 20rpx; 
+				border: 1rpx solid #f4f4f4;
-				border: 1rpx solid #6e737d;
 				border-radius: 15rpx; 
-				text-align: center;  
+				margin: inherit;
-				height: max-content;
+                background-color: #fff;
 				.icon-select {
 					position: absolute;
 					right: 0;
@@ -68,6 +67,9 @@
 					width: 28rpx;
 					height: 30rpx;
 				}
+                &:after{
+                    content: none;
+                }
 			}
 			.active {
 				border: 1px solid #d33123;
@@ -75,9 +77,9 @@
 				background-color: rgba(211, 49, 35, 0.04);
 			}
 			.gray {
-				border: 1px solid #eee;
+                color: #c3c3c3;
-				background-color: #eee;
+                border-color: #f6f6f6;
-				color: #6e737d;
+                background-color: #f6f6f6;
 			} 
 		}
 	}

CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue

@@ -14,13 +14,13 @@
                 <view class="item-box" v-for="item, index in state?.spec_list" :key="index">
                     <view class="title">{{ item.name }}</view>
                     <view class="tag-box">
-						<view v-for="itemChild, indexChild in item?.list" :key="indexChild"
+                        <button v-for="itemChild, indexChild in item?.list" :key="indexChild"
-							:class="['tag', { 'active': itemChild.select }, { 'gray': !itemChild.show && state.skuLength == 1 }]"
+                            :class="['tag',{'active':getSkuSelected(itemChild.name)},{'gray':getSkuDisabled(itemChild.name)}]"
-							@click="handleChooseSku(index, itemChild)">
+                            @click="handleChooseSku(itemChild.name)" :disabled="getSkuDisabled(itemChild.name)">
                             {{ itemChild.name }}
-							<image v-if="itemChild.select" class="icon-select"
+                            <image v-if="getSkuSelected(itemChild.name)" class="icon-select"
                                 :src="handleStaticResources('/static/images/tag-select.png')"> </image>
-						</view>
+                        </button>
                     </view>
                 </view>
             </view>
@@ -32,13 +32,14 @@
             <view class="btn-box">
                 <!-- 	<view v-if="props.isShowAddCartBtn" class="btn add-cart" @click="handleAddCart">加入购物车</view> -->
                 <view v-if="props.isShowAddCartBtn" class="core-button-confirm add-cart">
-					<coreshop-button :loading="props.addCartloading" class="core-button-confirm_" :radius="0" title="加入购物车"
+                    <coreshop-button :loading="props.addCartloading" class="core-button-confirm_" :radius="0"
-						:customStyle="addCartCustomStyle" @onClick="handleAddCart()"></coreshop-button>
+                        title="加入购物车" :customStyle="addCartCustomStyle" @onClick="handleAddCart()"></coreshop-button>
                 </view>
                 <!-- <view class="btn buy-now" @click="handleBuyNow">{{ props.btnBuyTitlt }}</view> -->
                 <view class="core-button-confirm">
                     <coreshop-button :loading="props.buyNowNowloading" class="core-button-confirm_" :radius="0"
-						:title="props.btnBuyTitlt" :customStyle="buyNowCustomStyle" @onClick="handleBuyNow()"></coreshop-button>
+                        :title="props.btnBuyTitlt" :customStyle="buyNowCustomStyle"
+                        @onClick="handleBuyNow()"></coreshop-button>
                 </view>
             </view>
         </view>
@@ -46,11 +47,22 @@
 </template>
 
 <script setup lang="ts">
-	import { watch, reactive, ref } from 'vue';
+    import { watch, reactive, ref, computed } from 'vue';
     import type { GoodsSkuListType, GoodsSpecListType } from '@/core/models';
     import { handleStaticResources, handleShowToast } from '@/core/utils';
     import { deepClone } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
 
+    type SpecWeight = Record<string, {
+        weight : number;
+        sort : number;
+    }>
+
+    type SelectedSpec = {
+        name : string;
+        weight : number;
+        sort : number;
+    }
+
     const buyNowCustomStyle = {
         'border': 'none',
         'background-color': '#d33123',
@@ -74,7 +86,7 @@
         isShowAddCartBtn : boolean,
         btnBuyTitlt : string,
         safeAreaInsetBottom : boolean;
-		buyNowCustomStyle : { [key : string] : any },
+        buyNowCustomStyle : any,
         buyNowNowloading : boolean,
         addCartloading : boolean
     }>(), {
@@ -105,39 +117,53 @@
         numberVal : number;
         spec_list : Array<GoodsSpecListType>;
         chooseSku : GoodsSkuListType;
-		skuLength : number;
+        specCombinationList : Array<GoodsSkuListType>;
+        specMap : SpecWeight;
+        selectedSpecs : Array<SelectedSpec>
     }>({
         numberVal: 1,
         spec_list: [],
         chooseSku: {},
-		skuLength: 1,
+        specCombinationList: [],
+        specMap: {},
+        selectedSpecs: [],
     });
 
     watch(() => props.goodsDetailData, (newVal : any) => {
         if (newVal) {
-			/** 获取sku有几层 */
+            // 构造规格权重
-			state.skuLength = newVal?.skuList?.spec_list.length;
+            let i = 0, j = 0;
-			/** 默认选择第一个sku */
-			state.chooseSku = newVal?.skuList?.sku_list.find((item : any) => item.stock != 0);
-
             state.spec_list = deepClone(newVal?.skuList?.spec_list.map((item : GoodsSpecListType) => {
-				item.list.forEach((itemChild : GoodsSpecListType, indexChild : number) => {
+                item.list.forEach((itemChild : GoodsSpecListType) => {
-					let findSku = newVal?.skuList?.sku_list.find((item : any) => item.sku_name_arr.includes(itemChild.name))
+                    state.specMap[itemChild.name] = {
-					if (findSku && state.skuLength == 1) {
+                        sort: i,
-						itemChild['show'] = true;
+                        weight: 1 << j
-					} else {
-						itemChild['show'] = false;
                     }
+                    j++;
+                })
+                i++;
+                return item;
+            }));
 
-					let findChooseSku = state.chooseSku.sku_name_arr.includes(itemChild.name);
+            state.specCombinationList = (props.goodsDetailData?.skuList?.sku_list.filter((item : GoodsSkuListType) => item.stock > 0)).map((item : GoodsSkuListType) => {
-					if (findChooseSku) {
+                return {
-						itemChild['select'] = true;
+                    ...item,
-					} else {
+                    weight: item.sku_name_arr.reduce((prev, current) => prev + state.specMap[current]?.weight, 0),
-						itemChild['select'] = false;
                 }
             })
-				return item;
+            
-			}))
+            /** 获取数据返回的默认sku,如果有就用没有就找第一个库存不为0的sku */
+            let systemDefaultSku:Array<string> = (props.goodsDetailData?.product?.spesDesc?.split(',')).map((item:string)=> item.split(':')[1]);
+            let skuDefaultSku:GoodsSkuListType = state.specCombinationList.find((item:GoodsSkuListType)=> item.sku_name_arr.every((name:string)=> systemDefaultSku.includes(name)));
+            if(!systemDefaultSku || !skuDefaultSku){
+                state.specCombinationList[0].sku_name_arr.forEach((item:string)=>{
+                    handleChooseSku(item);
+                }); 
+                return ;
+            }
+            skuDefaultSku.sku_name_arr.forEach((item:string)=>{
+                handleChooseSku(item);
+            });
         }
     }, {
         deep: true
@@ -152,6 +178,39 @@
         }
     })
 
+    const getSkuDisabled = computed(() => {
+        return (item : string) => {
+            // 每次选中之后要判断其他规格是否能够被选中
+            const weights = state.selectedSpecs.reduce((prev, current) => prev + current.weight, 0);
+            // 所有是初始状态，则所有属性均可选，因此disabled为false.
+            if (weights === 0) return false;
+            const current = state.specMap[item];
+            const weight = current.weight;
+            // 假如选择该属性，这是选中后的“权重之和”
+            let sum = weight + weights;
+            // 找到是否存在同一维度的规格已被选中的规格
+            const existEle = state.selectedSpecs.find(o => o.sort === current.sort);
+            if (existEle) {
+                // 如果存在，则减去即前选中的规格权重，即替换为当前权重。
+                sum -= existEle.weight;
+            }
+            for (let i = 0; i < state.specCombinationList.length; i++) {
+                const sWeight = state.specCombinationList[i].weight!;
+                // 与“权重之和”按位与运算后与其进行比较，如果相等，说明该属性是可选的
+                if ((sWeight & sum) === sum) {
+                    return false;
+                }
+            }
+            return state.selectedSpecs.findIndex(o => o.name === item) == -1;
+        };
+    })
+
+    const getSkuSelected = computed(() => {
+        return (item : string) => {
+            return state.selectedSpecs.findIndex(o => o.name === item) > -1;
+        };
+    })
+
     /** 商品数量加减变化 */
     const handleChangeNumberVal = (e : any) => {
         state.numberVal = e.value;
@@ -163,33 +222,27 @@
     }
 
     /** sku选择 */
-	const handleChooseSku = (index : number, sku : GoodsSpecListType) => {
+    const handleChooseSku = (name : string) => {
-		let chooseSku : GoodsSkuListType = {}; // 选中的sku
+        const spec = state.specMap[name];
-
+        const eleIndex = state.selectedSpecs.findIndex(item => item.name === name);
-		if (state.skuLength === 1) {  /** 当sku只有一层的时候 */
+        const sortIndex = state.selectedSpecs.findIndex(item => item.sort === spec.sort);
-			chooseSku = props.goodsDetailData?.skuList?.sku_list.find((item : GoodsSkuListType) => item.sku_name_arr.includes(sku.name));
+        // 如果当前元素已经存在，则从列表中删除
-		} else {  /** 当sku多层的时候 */
+        if (eleIndex > -1) {
-			let nameArr : Array<string> = [sku.name];
+            state.selectedSpecs.splice(eleIndex, 1);
-			let noClickSpecList = state.spec_list.filter((item : any, idx : number) => idx !== index);
+            return;
-			noClickSpecList.forEach((item : GoodsSpecListType) => {
-				item.list.forEach((itemChild : GoodsSpecListType) => {
-					if (itemChild.select) {
-						nameArr.push(itemChild.name)
         }
-				})
+        // 如果列表中的元素存在和当前元素的维度相同，则从列表中把那个元素删除，保证同一纬度只有一个元素。
-			})
+        if (sortIndex > -1) {
-			chooseSku = props.goodsDetailData.skuList?.sku_list.find((item : GoodsSkuListType) => item.sku_name_arr.every((itemChild : string) => nameArr.includes(itemChild)));
+            state.selectedSpecs.splice(sortIndex, 1);
         }
+        state.selectedSpecs.push({ name: name, weight: spec.weight, sort: spec.sort });
         
-		if (!chooseSku || chooseSku.stock <= 0) {
+        /** 判断sku是否选择完毕 */
-			handleShowToast('没有库存了，请选择其它规格');
+        if(state.selectedSpecs.length === state.spec_list.length){
-			return false;
+            let skuName:Array<string> = state.selectedSpecs.map(item => item.name);
-		}
+            state.chooseSku = state.specCombinationList.find((item:GoodsSkuListType)=> item.sku_name_arr.every((name:string)=> skuName.includes(name))); 
-
-		state.spec_list[index].list.forEach((item : any) => item.select = false);
-		sku.select = !sku.select;
-		state.chooseSku = chooseSku;
             emits('handleChangeGoodSku', state.chooseSku);
+        }
     };
 
     /** 加入购物车 */
@@ -217,8 +270,8 @@
 
     /** 判断库存 */
     const handleHaveStock = () => {
-		if (state.chooseSku.stock === 0) {
+        if (state.selectedSpecs.length !== state.spec_list.length) {
-			handleShowToast('没有库存了，请选择其它规格');
+            handleShowToast('请选择sku');
             return false;
         }
         return true;