优化

mallApp/src/pages/goods/components/sel-popup.vue

@@ -3,47 +3,27 @@
     <bottom-popup class="popup-wrap" :show="show" @close="close">
       <app-close @close="close" />
       <div class="tui-popup-box">
-        <div class="tui-product-box">
-          <template v-if="info.goodsStyle == 1">
-              <img :src="info.goodsStyleList[selIndex].img" class="tui-popup-img" />
-          </template>
-          <template v-else>
-              <img :src="imgNormal" class="tui-popup-img" />
-          </template>
-          <div class="tui-popup-price" v-if="!$util.isEmpty(info.goodsStyleList)">
-            <div
-              class="goods-tit app-bold app-font-size-30"
-            >{{ info.goodsStyleList[selIndex].styleName }}</div>
-            <div class="tui-amount tui-bold">￥{{ info.goodsStyleList[selIndex].price }}</div>
-          </div>
-          <div class="tui-popup-price" v-else>
-            <div class="goods-tit app-bold app-font-size-30">{{ info.goodsName }}</div>
-            <div class="tui-amount tui-bold">￥{{ info.price }}</div>
-          </div>
-        </div>
         <scroll-view scroll-y class="tui-popup-scroll">
           <div class="tui-scrolldiv-box">
-            <template v-if="$util.isEmpty(info.goodsStyleList) == false">
-              <div class="tui-bold tui-attr-title">款式</div>
-              <div class="tui-attr-box">
-                <div
-                  class="tui-attr-item"
-                  :class="{'tui-attr-active': selIndex == index}"
-                  v-for="(item, index) in info.goodsStyleList"
-                  :key="index"
-                  @click="changeStyleFn(index)"
-                >{{ item.styleName }}</div>
-              </div>
-            </template>
-
             <div class="tui-number-box tui-bold tui-attr-title">
               <div class="tui-attr-title">数量</div>
-              <number-box :max="maxStock" :min="1" :value="buyNum" @change="change"></number-box>
+              <div class="number-box-wrapper">
+                <number-box 
+                  :max="maxStock" 
+                  :min="1" 
+                  :value="buyNum" 
+                  :iconSize="36" 
+                  :height="60" 
+                  :width="120" 
+                  :size="32"
+                  @change="change">
+                </number-box>
+              </div>
             </div>
           </div>
         </scroll-view>
         <div class="tui-popup-btn">
-          <button class="button-com red" @click="nextFn">下一步</button>
+          <button class="button-com red enhanced-btn" @click="nextFn">下一步</button>
         </div>
       </div>
     </bottom-popup>
@@ -90,13 +70,6 @@ export default {
     };
   },
   computed: {
-    imgNormal() {
-      if (!this.$util.isEmpty(this.info)) {
-        return this.info.smallImgList[0];
-      } else {
-        return "";
-      }
-    },
     maxStock() {
       return 9999
     }
@@ -108,9 +81,6 @@ export default {
     close() {
       this.$emit("close");
     },
-    changeStyleFn(index) {
-      this.selIndex = index;
-    },
     nextFn() {
       if(Number(this.info.price) <= 0){
         this.$msg('商品还没有价格哦')
@@ -134,7 +104,9 @@ export default {
 
   .tui-popup-box {
     position: relative;
-    padding: 30upx 30upx 100upx;
+    padding: 60upx 30upx 140upx;
+    background: #fff;
+    min-height: 300upx;
   }
 
   .tui-popup-btn {
@@ -142,109 +114,127 @@ export default {
     position: absolute;
     left: 0;
     bottom: 0;
-    padding: 14upx 0;
+    padding: 20upx 30upx;
     @include disFlex(center, center);
     border-top: 1upx solid $borderColor;
+    background: #fff;
+    
     .button-com {
-      width: 80%;
-      font-size: 32upx;
-      height: 88upx; // 增加按钮高度
-      line-height: 88upx; // 设置行高等于高度，实现垂直居中
-      display: flex; // 使用flex布局
-      align-items: center; // 垂直居中
-      justify-content: center; // 水平居中
-      padding: 0; // 移除默认内边距，使用flex布局控制
-    }
-  }
-
-  .tui-product-box {
-    display: flex;
-    align-items: center;
-    font-size: 24upx;
-    padding-bottom: 30upx;
-  }
-
-  .tui-popup-img {
-    height: 200upx;
-    width: 200upx;
-    border-radius: 24upx;
-    display: block;
-  }
-
-  .tui-popup-price {
-    padding-left: 20upx;
-    padding-bottom: 8upx;
-    .goods-tit {
-      margin-bottom: 75upx;
+      width: 100%;
+      font-size: 36upx;
+      height: 110upx;
+      border-radius: 55upx;
+      font-weight: 600;
+      letter-spacing: 2upx;
+      box-shadow: 0 8upx 24upx rgba(228, 31, 25, 0.3);
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      padding: 0;
+      
+      &.enhanced-btn {
+        background: linear-gradient(135deg, #ff4757 0%, #e41f19 100%);
+        border: none;
+        color: #fff;
+        
+        &:active {
+          transform: translateY(2upx);
+          box-shadow: 0 4upx 12upx rgba(228, 31, 25, 0.4);
+        }
+      }
     }
   }
 
-  .tui-amount {
-    color: #ff201f;
-    font-size: 36upx;
-  }
 
   .tui-popup-scroll {
-    max-height: 380upx;
-    font-size: 26upx;
+    max-height: 400upx;
+    font-size: 28upx;
   }
 
-  .tui-scrollview-box {
-    padding: 0 30upx 60upx 30upx;
-    box-sizing: border-box;
+  .tui-scrolldiv-box {
+    padding: 10upx 0;
   }
 
+
   .tui-attr-title {
-    padding: 10upx 0;
+    padding: 0 0 20upx 0;
     color: #333;
+    font-size: 32upx;
+    font-weight: 600;
+    text-align: left;
   }
 
-  .tui-attr-box {
-    font-size: 0;
-    padding: 20upx 0;
-  }
 
-  .tui-attr-item {
-    max-width: 100%;
-    min-width: 200upx;
-    height: 64upx;
-    display: -webkit-inline-flex;
-    display: inline-flex;
+  .tui-number-box {
+    display: flex;
     align-items: center;
-    justify-content: center;
-    background: #f7f7f7;
-    padding: 0 26upx;
+    justify-content: space-between;
+    padding: 30upx 0 40upx 0;
     box-sizing: border-box;
-    border-radius: 32upx;
-    margin-right: 20upx;
-    margin-bottom: 20upx;
-    font-size: 26upx;
-  }
-
-  .tui-attr-active {
-    background: #fcedea !important;
-    color: #e41f19;
-    font-weight: bold;
-    position: relative;
-  }
-
-  .tui-attr-active::after {
-    content: "";
-    position: absolute;
-    border: 1upx solid #e41f19;
-    width: 100%;
-    height: 100%;
-    border-radius: 40upx;
-    left: 0;
-    top: 0;
+    background: #fafafa;
+    border-radius: 16upx;
+    margin: 20upx 0;
+    padding: 40upx 30upx;
   }
 
-  .tui-number-box {
+  .number-box-wrapper {
     display: flex;
+    justify-content: center;
     align-items: center;
-    justify-content: space-between;
-    padding: 20upx 0 30upx 0;
-    box-sizing: border-box;
+  }
+
+  // 覆盖 number-box 组件的样式
+  ::v-deep .tui-numberbox {
+    .tui-numbox-icon {
+      width: 60upx;
+      height: 60upx;
+      border-radius: 50%;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
+      transition: all 0.2s ease;
+      padding: 0;
+      
+      &:before {
+        font-size: 36upx !important;
+        font-weight: bold;
+      }
+      
+      &:active {
+        transform: scale(0.95);
+        background: #f5f5f5;
+      }
+      
+      &.tui-disabled {
+        background: #f0f0f0;
+        box-shadow: none;
+        
+        &:before {
+          color: #ccc !important;
+        }
+      }
+    }
+    
+    .tui-num-input {
+      width: 120upx !important;
+      height: 60upx !important;
+      margin: 0 20upx !important;
+      background: #fff !important;
+      border-radius: 12upx !important;
+      border: 2upx solid #e8e8e8 !important;
+      font-size: 32upx !important;
+      font-weight: 600 !important;
+      box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.08);
+      transition: border-color 0.2s ease;
+      
+      &:focus {
+        border-color: #e41f19 !important;
+      }
+    }
   }
 }
 </style>

mallApp/src/pages/order/buy.vue

@@ -225,13 +225,13 @@ export default {
       let account = this.option.account?this.option.account:0
       createOrder({...form, ...this.form,hdId:hdId}).then(res => {
         uni.hideLoading()
-        uni.removeStorageSync("buyGoodsDetil")
-        let orderSn = res.data.orderSn?res.data.orderSn:''
-        let id = res.data.id?res.data.id:0
-        let totalPrice = res.data.totalPrice?res.data.totalPrice:0
-        this.$util.pageTo({url:"/pages/callback/pay?pageStatus=1&orderSn="+orderSn+'&hdId='+hdId+'&account='+account+'&id='+id+'&couponId=0&totalPrice='+totalPrice,type:2})
-      }).catch(()=>{
-        uni.hideLoading()
+        if(res.code == 1){
+          uni.removeStorageSync("buyGoodsDetil")
+          let orderSn = res.data.orderSn?res.data.orderSn:''
+          let id = res.data.id?res.data.id:0
+          let totalPrice = res.data.totalPrice?res.data.totalPrice:0
+          this.$util.pageTo({url:"/pages/callback/pay?pageStatus=1&orderSn="+orderSn+'&hdId='+hdId+'&account='+account+'&id='+id+'&couponId=0&totalPrice='+totalPrice,type:2})
+        }
       })
     }
   }