代码提交

components/good-attr-select/good-attr-select.vue

@@ -44,12 +44,13 @@
           >
             <view
                 class="button"
+                :class="storeNum <= 1 && 'disabled'"
                 @click="handleCartNumberChange(curAttr,'minus')"
             >
               <uv-icon
                   name="minus"
                   color="#333"
-                  size="12"
+                  size="24rpx"
               ></uv-icon>
             </view>
             <view class="input">
@@ -62,12 +63,13 @@
             </view>
             <view
                 class="button"
+                :class="storeNum >= curAttr.stock && 'disabled'"
                 @click="handleCartNumberChange(curAttr,'plus')"
             >
               <uv-icon
                   name="plus"
                   color="#333"
-                  size="12"
+                  size="24rpx"
               ></uv-icon>
             </view>
           </view>
@@ -89,7 +91,7 @@
           {{ item.attrName }}
         </view>
         <view class="goodAttrSelect-attr-content">
-          <space wrap="warp">
+          <space wrap="warp" gap>
             <view
                 :class="{ attr: true, check: selectedAttr[index] === attr }"
                 v-for="(attr, attrIndex) in item.attrValueArr"
@@ -102,6 +104,8 @@
       </view>
       <view class="goodAttrSelect-action">
         <uv-button
+            v-if="curAttr"
+            :disabled="curAttr.stock===0 || storeNum===0"
             round
             block
             type="primary"
@@ -134,8 +138,13 @@ const productValue = ref(null)
 const storeNum = ref(1)
 const curAttr = ref(null)
 const defaultSelectAttrStr = ref(undefined)
-
 const selectAttrPanel = ref(false)
+const customStyle = {
+  width: '40rpx',
+  height: '40rpx',
+  padding: '0px',
+  border: '1rpx solid #cccccc',
+}
 
 const handleGetDetail = async (id) => {
   const detail = await getProductDetail(id)
@@ -157,6 +166,9 @@ const handleGetDetail = async (id) => {
       selectedAttr.value = unref(defaultSelectAttrStr).split(',')
       curAttr.value = productValue.value[defaultSelectAttrStr.value]
     }
+    if(storeNum.value>curAttr.value.stock){
+      storeNum.value = curAttr.value.stock
+    }
   }
 }
 
@@ -164,6 +176,12 @@ const handleSelectAttr = (index, attr) => {
   selectedAttr.value[index] = attr
   let selectedAttrStr = selectedAttr.value.join(',')
   curAttr.value = productValue.value[selectedAttrStr]
+  if(storeNum.value === 0 && curAttr.value.stock >0){
+    storeNum.value = 1
+  }
+  if(storeNum.value>curAttr.value.stock){
+    storeNum.value = curAttr.value.stock
+  }
 }
 
 const handleSubmit = () => {
@@ -180,20 +198,21 @@ const handleSubmit = () => {
   //   })
   //   return
   // }
-  let selectedAttrStr = selectedAttr.value.join(',')
-  emit('submit', {
-    store: productValue.value[selectedAttrStr],
-    num: storeNum.value
-  })
-  emit('select', {
-    store: productValue.value[selectedAttrStr],
-    num: storeNum.value
-  })
-  emit('onSelect', {
-    store: productValue.value[selectedAttrStr],
-    num: storeNum.value
-  })
-
+  if(curAttr.value.stock!==0 && storeNum.value!==0){
+    let selectedAttrStr = selectedAttr.value.join(',')
+    emit('submit', {
+      store: productValue.value[selectedAttrStr],
+      num: storeNum.value
+    })
+    emit('select', {
+      store: productValue.value[selectedAttrStr],
+      num: storeNum.value
+    })
+    emit('onSelect', {
+      store: productValue.value[selectedAttrStr],
+      num: storeNum.value
+    })
+  }
 }
 
 const {toast} = useInterface()
@@ -208,13 +227,11 @@ function handleCartNumberInputChange(e, item) {
   const value = Number(e.detail.value)
   if (value <= 0) {
     storeNum.value = 1
-    toast({title: '至少选一件哦~'})
-  }
-  if (value > item.stock) {
+  } else if (value > item.stock) {
     storeNum.value = item.stock
-    toast({title: '超出库存啦~'})
+  } else {
+    storeNum.value = value
   }
-  storeNum.value = value
 }
 
 /**
@@ -225,13 +242,18 @@ function handleCartNumberInputChange(e, item) {
  */
 function handleCartNumberChange(item, type = 'plus') {
   if (type === 'plus') {
-    // +
-    if (storeNum.value + 1 > item.stock) return toast({title: '超出库存啦~'})
-    storeNum.value += 1
+    if (storeNum.value + 1 > item.stock){
+      storeNum.value =item.stock
+    } else{
+      storeNum.value += 1
+    }
+
   } else {
-    // -
-    if (storeNum.value - 1 <= 0) return toast({title: '至少选一件哦~'})
-    storeNum.value -= 1
+    if (storeNum.value - 1 <= 0){
+      storeNum.value = 1
+    } else {
+      storeNum.value -= 1
+    }
   }
 }
 
@@ -268,8 +290,9 @@ defineExpose({
     }
 
     .attr-info {
-      flex: 1;
+      max-width: calc(100% - 150rpx - 30rpx);
       display: flex;
+      flex: 1;
       flex-direction: column;
       justify-content: space-between;
       margin-left: 30rpx;
@@ -277,6 +300,11 @@ defineExpose({
         font-size: 28rpx;
         line-height: 40rpx;
         color: #333333;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
       }
 
       &-bottom {
@@ -304,12 +332,13 @@ defineExpose({
   }
 
   &-attr {
-    padding: 40rpx 30rpx;
+    padding: 40rpx 30rpx 10rpx 0;
 
     &.row {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding-bottom: 40rpx;
 
       .goodAttrSelect-attr-title {
         margin-bottom: 0;
@@ -317,7 +346,7 @@ defineExpose({
     }
 
     &-title {
-      margin-bottom: 30rpx;
+      margin:0 0 30rpx 30rpx;
     }
 
     &-content {
@@ -341,7 +370,7 @@ defineExpose({
   display: flex;
   justify-content: center;
   align-items: center;
-
+  margin: 0 0 30rpx 30rpx;
   &.check {
     background: #333333;
     color: #fff;
@@ -363,20 +392,33 @@ defineExpose({
 
   .button {
     font-size: 32rpx;
-    width: 34rpx;
+    width: 40rpx;
     aspect-ratio: 1/1;
     border-radius: 5rpx;
-    border: 2rpx solid #cccccc;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .3s;
+    border: 1px solid #999999;
 
     &:active {
       scale: 1.2;
     }
+    &.disabled{
+      border-color: #dddddd;
+      :deep(.uv-icon__icon){
+        color: #dddddd !important;
+      }
+      &:active {
+        scale: 1;
+      }
+    }
   }
 }
 
+.gap{
+  gap: 20rpx;
+}
+
 </style>