uniapp【修复】:商品分类sku弹框取消默认选中的问题

CoreCms.Net.Uni-App/CoreShop/pages/classify/classify-page/classify-five/classify-five.vue

@@ -169,6 +169,7 @@
         cartMoney : number,
         showSku : boolean;
         goodsDetailData : any;
+        selectGoodsId : number;
     }>({
         classifyData: [],
         topTabId: 0,
@@ -186,14 +187,15 @@
         cartMoney: 0,
         showSku: false,
         goodsDetailData: {},
+        selectGoodsId: 0,
     });
 
     const buyNowLoading = ref(false);
     const addCartLoading = ref(false);
 
     const handleBuyNow = useLoadingFn(onBuyNow, buyNowLoading);
-    const handleAddCart = useLoadingFn(onAddCart, addCartLoading) 
+    const handleAddCart = useLoadingFn(onAddCart, addCartLoading)
-    
+
     const emit = defineEmits(['getCartNumAndMoney'])
 
     watch(() => props.data, (newVal : Array<CategoriesType>) => {
@@ -253,6 +255,10 @@
 
     /** 选择sku */
     const handleSelectSku = (id : number) => {
+        if (state.selectGoodsId == id) {
+            state.showSku = true;
+            return;
+        }
         _useLoginStore.checkLogin(async () => {
             let goodsDetail : any = null;
             if (uni.getStorageSync(UserToken)) {

CoreCms.Net.Uni-App/CoreShop/pages/classify/classify-page/classify-four/classify-four.vue

@@ -110,6 +110,7 @@
         cartMoney : number,
         showSku : boolean;
         goodsDetailData : any;
+        selectGoodsId:number;
     }>({
         classifyData: [],
         leftTabId: 0,
@@ -122,6 +123,7 @@
         cartMoney: 0,
         showSku: false,
         goodsDetailData: {},
+        selectGoodsId:0,
     });
 
     const buyNowLoading = ref(false);
@@ -178,6 +180,11 @@
 
     /** 选择sku */
     const handleSelectSku = (id : number) => {
+        if(state.selectGoodsId == id){
+            state.showSku = true;
+            return ;
+        }
+        
         _useLoginStore.checkLogin(async () => {
             let goodsDetail : any = null;
             if (uni.getStorageSync(UserToken)) {
@@ -191,6 +198,7 @@
                     data: true,
                 })
             }
+            state.selectGoodsId = id;
             state.goodsDetailData = goodsDetail.data;
             state.showSku = true;
         })

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

@@ -49,8 +49,7 @@
 		}
 		.tag-box {
 			display: flex;
-			flex-wrap: wrap;
+			flex-wrap: wrap; 
-			gap: 25rpx;
 			max-height: 500rpx;
 			overflow-y: scroll;
 			.tag {
@@ -60,6 +59,8 @@
 				border-radius: 15rpx; 
 				margin: inherit;
                 background-color: #fff;
+                margin-right: 15rpx;
+                margin-bottom: 15rpx;
 				.icon-select {
 					position: absolute;
 					right: 0;

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

@@ -26,16 +26,13 @@
             </view>
             <view class="number-box">
                 <view class="tit">数量：</view>
-                <uv-number-box v-model="state.numberVal"
+                <uv-number-box v-model="state.numberVal" @change="handleChangeNumberVal"></uv-number-box>
-                    @change="handleChangeNumberVal"></uv-number-box>
             </view>
             <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="加入购物车" :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"
@@ -131,6 +128,9 @@
 
     watch(() => props.goodsDetailData, (newVal : any) => {
         if (newVal) {
+            state.specMap = {};
+            state.specCombinationList = [];
+            state.selectedSpecs = [];
             // 构造规格权重
             let i = 0, j = 0;
             state.spec_list = deepClone(newVal?.skuList?.spec_list.map((item : GoodsSpecListType) => {
@@ -151,17 +151,17 @@
                     weight: item.sku_name_arr.reduce((prev, current) => prev + state.specMap[current]?.weight, 0),
                 }
             })
-            
+
             /** 获取数据返回的默认sku,如果有就用没有就找第一个库存不为0的sku */
-            let systemDefaultSku:Array<string> = (props.goodsDetailData?.product?.spesDesc?.split(',')).map((item:string)=> item.split(':')[1]);
+            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)));
+            let skuDefaultSku : GoodsSkuListType = state.specCombinationList.find((item : GoodsSkuListType) => item.sku_name_arr.every((name : string) => systemDefaultSku.includes(name)));
-            if(!systemDefaultSku || !skuDefaultSku){
+            if (!systemDefaultSku || !skuDefaultSku) {
-                state.specCombinationList[0].sku_name_arr.forEach((item:string)=>{
+                state.specCombinationList[0].sku_name_arr.forEach((item : string) => {
                     handleChooseSku(item);
-                }); 
+                });
-                return ;
+                return;
             }
-            skuDefaultSku.sku_name_arr.forEach((item:string)=>{
+            skuDefaultSku.sku_name_arr.forEach((item : string) => {
                 handleChooseSku(item);
             });
         }
@@ -223,6 +223,10 @@
 
     /** sku选择 */
     const handleChooseSku = (name : string) => {
+        /** 只有一层的时候，当自己选中时，不能点击自己取消选择 */
+        if (state.spec_list.length === 1 && state.selectedSpecs.find((item)=> item.name == name)) {
+            return;
+        }
         const spec = state.specMap[name];
         const eleIndex = state.selectedSpecs.findIndex(item => item.name === name);
         const sortIndex = state.selectedSpecs.findIndex(item => item.sort === spec.sort);
@@ -238,9 +242,9 @@
         state.selectedSpecs.push({ name: name, weight: spec.weight, sort: spec.sort });
         
         /** 判断sku是否选择完毕 */
-        if(state.selectedSpecs.length === state.spec_list.length){
+        if (state.selectedSpecs.length === state.spec_list.length) {
-            let skuName:Array<string> = state.selectedSpecs.map(item => item.name);
+            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.chooseSku = state.specCombinationList.find((item : GoodsSkuListType) => item.sku_name_arr.every((name : string) => skuName.includes(name)));
             emits('handleChangeGoodSku', state.chooseSku);
         }
     };
@@ -270,9 +274,9 @@
 
     /** 判断库存 */
     const handleHaveStock = () => {
-        let skuName:Array<string> = state.selectedSpecs.map(item => item.name) || [];
+        let skuName : Array<string> = state.selectedSpecs.map(item => item.name) || [];
-        let sku = state.spec_list.find((item:any)=> !item.list.some((itemChild:any)=> skuName.includes(itemChild.name))); 
+        let sku = state.spec_list.find((item : any) => !item.list.some((itemChild : any) => skuName.includes(itemChild.name)));
-        if (sku) { 
+        if (sku) {
             handleShowToast(`请选择 ${sku.name} 规格`);
             return false;
         }