From b92e043c772c21d83eac5586a43394e5e7ef6df7 Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Wed, 6 Mar 2024 17:55:33 +0800
Subject: [PATCH] =?UTF-8?q?Feat(=E5=95=86=E5=93=81):1=E3=80=81=E5=BA=93?=
 =?UTF-8?q?=E5=AD=98=E4=B8=BA0=E6=97=B6=EF=BC=8C=E5=8A=A0=E5=85=A5?=
 =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=E5=8F=8A=E7=AB=8B=E5=8D=B3=E8=B4=AD?=
 =?UTF-8?q?=E4=B9=B0=E5=8F=98=E6=88=90=E7=81=B0=E8=89=B2=EF=BC=9B2?=
 =?UTF-8?q?=E3=80=81=E5=BA=93=E5=AD=98=E4=B8=BA0=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E7=9B=B8=E5=BA=94=E8=A7=84=E6=A0=BC=E5=8F=B3=E4=B8=8A=E8=A7=92?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E7=BC=BA=E8=B4=A7=E6=A0=87=E7=AD=BE=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=94=E8=AF=A5=E7=BC=BA=E8=B4=A7=E8=A7=84=E6=A0=BC?=
 =?UTF-8?q?=E4=B8=BA=E7=81=B0=E8=89=B2=E4=B8=8D=E5=8F=AF=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/goods.less         | 11 +++++++-
 assets/css/style.less         | 18 +++++++++++++
 components/ProductWindow.vue  | 26 ++++++++++++++----
 pages/shop/GoodsCon/index.vue | 50 +++++++++++++++++++++++++----------
 4 files changed, 85 insertions(+), 20 deletions(-)

diff --git a/assets/css/goods.less b/assets/css/goods.less
index 8c575ba..ed2ccdf 100644
--- a/assets/css/goods.less
+++ b/assets/css/goods.less
@@ -25,7 +25,7 @@
 }
 
 .goods-section {
-  margin: 24rpx;
+  margin: 0 24upx 24upx 24upx;
   padding: 30rpx 24rpx;
   border-radius: 20rpx;
   background: #fff;
@@ -103,6 +103,15 @@
     color: #333;
     font-size: 30rpx;
   }
+  .store-btn {
+    display: flex;
+    padding: 12upx;
+    border-radius: 6upx;
+    color: #fff;
+    line-height: 20upx;
+    font-size: 24rpx;
+    background-color: #FF564A;
+  }
 
   .value {
     color: #666;
diff --git a/assets/css/style.less b/assets/css/style.less
index ac3e47d..49368cf 100644
--- a/assets/css/style.less
+++ b/assets/css/style.less
@@ -646,6 +646,7 @@ page {
 }
 
 .product-window .productWinList .item .listn .itemn {
+  position: relative;
   border: 1px solid #bbb;
   font-size: 0.26*100rpx;
   color: #282828;
@@ -659,6 +660,23 @@ page {
   background-color: #eb3729;
   border-color: #eb3729;
 }
+.product-window .productWinList .item .listn .itemn.disabled {
+  color: #333;
+  background-color: #F1F1F1;
+  border-color: #F1F1F1;
+}
+.product-window .productWinList .item .listn .itemn.disabled .tag {
+  position: absolute;
+  top: -18upx;
+  right: -18upx;
+  height: 28upx;
+  padding: 0 6upx;
+  border-radius: 6upx;
+  color: #fff;
+  line-height: 28upx;
+  font-size: 10px;
+  background-color: #FD5749;
+}
 
 .product-window .cart {
   margin-top: 0.36*100rpx;
diff --git a/components/ProductWindow.vue b/components/ProductWindow.vue
index a0b1065..4d7f731 100644
--- a/components/ProductWindow.vue
+++ b/components/ProductWindow.vue
@@ -20,12 +20,21 @@
           <view class="title">{{ item.attrName }}</view>
           <view class="listn acea-row row-middle">
             <view
-              class="itemn"
-              :class="item.index == indexn ? 'on' : ''"
               v-for="(itemn, indexn) in item.attrValue"
-              @click="tapAttr(indexw, indexn)"
               :key="indexn"
-            >{{ itemn.attr }}</view>
+              :class="{
+                'on': item.index == indexn,
+                'disabled': productValue[itemn.attr].stock === 0
+              }"
+              class="itemn"
+              @click="tapAttr(indexw, indexn, itemn)"
+            >
+              {{ itemn.attr }}
+              <text
+                v-if="productValue[itemn.attr].stock === 0"
+                class="tag"
+              >缺货</text>
+            </view>
           </view>
         </view>
       </view>
@@ -57,6 +66,10 @@ export default {
       type: Object,
       default: () => {}
     },
+    productValue: {
+      type: Object,
+      default: () => {}
+    },
     cartNum: {
       type: Number,
       default: () => 1
@@ -80,7 +93,10 @@ export default {
     CartNumAdd: function() {
       this.$emit("changeFun", { action: "ChangeCartNum", value: 1 });
     },
-    tapAttr: function(indexw, indexn) {
+    tapAttr: function(indexw, indexn, itemn) {
+      if (this.productValue[itemn.attr].stock === 0) {
+        return
+      }
       // 修改商品规格不生效的原因：
       // H5端下面写法，attr更新，但是除H5外其他端不支持，
       // 尽量避免下面的骚写法，不要在子组件内更新props
diff --git a/pages/shop/GoodsCon/index.vue b/pages/shop/GoodsCon/index.vue
index 635ee0a..ea02c39 100644
--- a/pages/shop/GoodsCon/index.vue
+++ b/pages/shop/GoodsCon/index.vue
@@ -292,8 +292,11 @@
               <image class="logo" :src="systemStore.image" mode="scaleToFill"/>
               {{ systemStore.name }}
             </view>
-            <view class="value flex ai-center" style="color:#DA0000" @click="goStore">进店逛逛
-              <uni-icons type="right" size="12" color="#DA0000"></uni-icons>
+            <view
+              class="flex ai-center store-btn"
+              @click="goStore"
+            >
+              进店逛逛
             </view>
           </view>
 
@@ -437,17 +440,36 @@
           </view>
 
 
-          <view class="bnt acea-row row-middle row-right"
-                style="background: transparent !important;border-radius: 0 !important;">
-            <view class="btn-car" :class="{'btn-car-disabled':isOpen === true && attr.productSelect.stock === 0}"
-                  @click="joinCart">加入购物车
+          <view
+            class="bnt acea-row row-middle row-right"
+            style="background: transparent !important;border-radius: 0 !important;"
+          >
+            <view
+              class="btn-car"
+              :class="{
+                'btn-car-disabled': attr.productSelect.stock === 0
+              }"
+              @click="joinCart"
+            >
+              加入购物车
             </view>
-            <view class="btn-buy" :class="{'btn-buy-disabled':isOpen === true && attr.productSelect.stock === 0}"
-                  @click="tapBuy">立即购买
+            <view
+              class="btn-buy"
+              :class="{
+                'btn-buy-disabled': attr.productSelect.stock === 0
+              }"
+              @click="tapBuy"
+            >
+              立即购买
             </view>
           </view>
         </view>
-        <ProductWindow v-on:changeFun="changeFun" :attr="attr" :cartNum="cart_num"/>
+        <ProductWindow
+          v-on:changeFun="changeFun"
+          :attr="attr"
+          :product-value="productValue"
+          :cartNum="cart_num"
+        />
         <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
                      :posterData="posterData" :goodId="id"></StorePoster>
         <ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>
@@ -1175,13 +1197,13 @@ export default {
     },
     //  点击加入购物车按钮
     joinCart: function () {
-      if (this.isOpen === true && this.attr.productSelect.stock === 0) return;
+      if (this.attr.productSelect.stock === 0) return;
       //0=加入购物车
       this.goCat(0);
     },
     //立即购买；
     tapBuy: function () {
-      if (this.isOpen === true && this.attr.productSelect.stock === 0) return;
+      if (this.attr.productSelect.stock === 0) return;
       //  1=直接购买
       this.goCat(1);
     },
@@ -1580,8 +1602,8 @@ export default {
   }
 
   .btn-car-disabled {
-    border: 2rpx solid #D0D0D0;
-    color: #D0D0D0;
+    border: 2rpx solid #707070;
+    color: #707070;
   }
 
   .btn-buy {
@@ -1594,7 +1616,7 @@ export default {
   }
 
   .btn-buy-disabled {
-    background: #D0D0D0;
+    background: #9D9D9D;
   }
 }