数量联动

src/components/FormUI/su-number-box/su-number-box.vue

@@ -48,7 +48,7 @@
       :disabled="inputValue >= max || disabled" 
       @click="_calcValue('plus')"
     ></v-btn>
-    <div class="ml-3" style="color: #b7b7b7; font-size: 14px;">库存：{{ stock }}</div>
+    <div class="ml-3" style="color: #b7b7b7; font-size: 14px;">库存：{{ totalStock }}</div>
   </view>
 </template>
 <script>
@@ -88,6 +88,10 @@
         type: Number,
         default: 100,
       },
+      totalStock: {
+        type: Number,
+        default: 0,
+      },
       step: {
         type: Number,
         default: 1,
@@ -122,13 +126,9 @@
       modelValue(val) {
         this.inputValue = +val;
       },
-			// stock: {
-			// 	handler(val) {
-			// 		this.stock = +val
-			// 	},
-			// 	immediate: true,
-			// 	deep: true
-			// },
+      max(val) {
+        this.inputValue = this.inputValue-0 > + val ? + val : this.inputValue;
+      },
     },
     created() {
       if (this.value === 1) {
@@ -182,12 +182,13 @@
         return scale;
       },
       _onBlur(event) {
-        this.$emit('blur', event);
-        let value = event.detail.value;
-        if (!value) {
-          // this.inputValue = 0;
-          return;
-        }
+        // let value = event.detail.value;
+        // if (!value) {
+        //   // this.inputValue = 0;
+        //   return;
+        // }
+        let value = this.inputValue;
+        this.$emit('blur', value);
         value = +value;
         if (value > this.max) {
           value = this.max;

src/views/mall/components/details.vue

@@ -60,7 +60,7 @@
           </v-tabs>
         </div>
         <describe v-if="describeTab === 0 && state.goodsInfo?.description" :content="state.goodsInfo.description"></describe>
-        <comment v-if="describeTab === 0 && state.goodsId" class="detail-comment-selector" :goodsId="state.goodsId" />
+        <!-- <comment v-if="describeTab === 1 && state.goodsId" class="detail-comment-selector" :goodsId="state.goodsId" /> -->
       </div>
     </v-card>
   </div>
@@ -71,7 +71,7 @@ defineOptions({name: 'goods-details'})
 import { getProductDetail } from '@/api/mall'
 import selectSku from './details/s-select-sku.vue'
 import describe from './details/describe.vue'
-import comment from './details/comment.vue'
+// import comment from './details/detail-comment-card.vue'
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import Snackbar from '@/plugins/snackbar'

src/views/mall/components/details/s-select-sku.vue

@@ -85,6 +85,7 @@
           <su-number-box
             :min="1"
             :max="state.selectedSku.stock"
+            :totalStock="totalStock"
             :step="1"
             ref="selectSkuRef"
             v-model="state.selectedSku.goods_num"
@@ -104,7 +105,7 @@
 defineOptions({name: 'wares-s-select-sku'})
 import Snackbar from '@/plugins/snackbar'
 import suNumberBox from '@/components/FormUI/su-number-box/su-number-box.vue'
-import { computed, reactive, watch, ref, onMounted } from 'vue'
+import { computed, reactive, watch, ref } from 'vue'
 import { convertProductPropertyList } from '@/views/mall/utils'
 
 const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
@@ -116,13 +117,6 @@ const props = defineProps({
 });
 
   const totalStock = ref(props.goodsInfo?.stock-0 || 0)
-  function setTotalStock() {
-    if (selectSkuRef.value) selectSkuRef.value.stock = totalStock.value
-  }
-  onMounted(() => {
-    setTotalStock()
-  })
-  const selectSkuRef = ref()
   const state = reactive({
     selectedSku: {}, // 选中的 SKU
     currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
@@ -141,8 +135,7 @@ const props = defineProps({
   watch(
     () => state.selectedSku,
     (newVal) => {
-      if (newVal?.stock) selectSkuRef.value.stock = newVal.stock
-      else setTotalStock()
+      if (newVal?.stock) totalStock.value = newVal.stock
       emits('change', newVal);
     },
     {