xiaoe_mp_npm 1.0.41-link.2 → 1.0.42

package/miniprogram_dist/ConfirmOrder/components/ConfirmOrderContent/index.js

@@ -107,6 +107,10 @@ Component({
       type: Number,
       value: 100
     },
+    refundTipsZIndex:{
+      type: Number,
+      value: 100
+    },
     zIndex:{
       type: Number,
       value: 100

package/miniprogram_dist/ConfirmOrder/components/ConfirmOrderContent/index.wxml

@@ -64,6 +64,7 @@
       bind:updataData="updataData"
       bind:dataChange="payInfoChange"
       isFullScreen="{{ popPosition == 'right' }}"
+      zIndex="{{refundTipsZIndex}}"
       bind:onCountChange="onCountChange"
       formData="{{ formData }}"
     ></GoodsInfo>

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/components/RefundTips/index.js

@@ -0,0 +1,56 @@
+// src/ConfirmOrder/components/GoodsInfo/componenets/RefundTips/index.js
+const computedBehavior = require('miniprogram-computed').behavior
+
+Component({
+  behaviors: [computedBehavior],
+
+  properties: {
+    showTips: {
+      type: Boolean,
+      value: false,
+    },
+    zIndex: {
+      type: Number,
+      value: 100,
+    },
+    isFullScreen: {
+      type: Boolean,
+      value: false,
+    },
+    refundMsg: {
+      type: String,
+      value: '称重退补差价',
+    }
+  },
+
+  computed: {
+    tipIndex(properties) {
+      return properties.isFullScreen ? `z-index:${properties.zIndex}` : ''
+    },
+    popPosition(properties) {
+      return properties.isFullScreen ? 'right' : 'bottom'
+    },
+    round(properties) {
+      return properties.isFullScreen ? false : true
+    },
+    customStyle(properties) {
+      return properties.isFullScreen
+        ? `height: 100%;width: 100vmin;z-index:${properties.zIndex};`
+        : 'height: 106.67vmin;'
+    },
+    refundText(properties) {
+      const text = `
+        针对该商品，取货时门店会核对实际称重，
+        如实际称重低于您下单重量，会根据重量差额退差价。
+        ${properties.refundMsg === '称重退补差价' ? '如实际称重高于您下单重量，需根据重量差额补差价。' : ''}
+      `
+      return text
+    }
+  },
+
+  methods: {
+    closeTips() {
+      this.triggerEvent('closeTips')
+    },
+  },
+})

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/components/RefundTips/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "@vant/weapp/popup/index"
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/components/RefundTips/index.wxml

@@ -0,0 +1,12 @@
+<!-- src/ConfirmOrder/components/GoodsInfo/components/RefundTips/index.wxml -->
+<van-popup show="{{ showTips }}" custom-class="invoice-select-bremind" position="{{popPosition}}" round="{{round}}" custom-style="{{customStyle}}">
+  <view class="text-container">
+    <view class="invoice-tip-title">{{ refundMsg }}</view>
+    <view class="text-main">
+        <text>{{ refundText }}</text>
+    </view>
+    <view class="invoice-tip-button">
+      <view class="button" bindtap="closeTips">我知道了</view>
+    </view>
+  </view>
+</van-popup>

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/components/RefundTips/index.wxss

@@ -0,0 +1,43 @@
+.text-container {
+  box-sizing: border-box;
+}
+.text-container .invoice-tip-title {
+  text-align: center;
+  font-weight: 500;
+  font-size: 4.27vmin;
+  top: 3.2vmin;
+  position: sticky;
+}
+.text-container .text-main {
+  margin: 9.6vmin 4.8vmin;
+  max-height: 78.94vmin;
+  overflow-y: scroll;
+  font-size: 3.73vmin;
+  color: #333;
+}
+.text-container .invoice-tip-button {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 2.13vmin 4.27vmin;
+}
+.text-container .invoice-tip-button .button {
+  width: 100%;
+  color: #fff;
+  border-radius: 5.33vmin;
+  width: calc(100% - 8.53vmin);
+  font-weight: 500;
+  border: 0;
+  padding: 2.67vmin 0;
+  text-align: center;
+  font-size: 3.73vmin;
+  background: linear-gradient(180.25deg, #fe6500 0%, #ff4102 100%);
+}
+.text-container .tips-title {
+  font-size: 4.8vmin;
+  color: #333;
+  font-weight: 500;
+  width: 100%;
+  text-align: center;
+}

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.css

@@ -103,6 +103,15 @@
   font-size: 3.73333vmin;
 }
 
+.goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-refund-tips {
+  display: inline-block;
+  padding: 0 1.06667vmin;
+  border-radius: 0.53333vmin;
+  border: 0.26667vmin solid #e0e0e0;
+  color: #666;
+  font-size: 3.2vmin;
+}
+
 .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-specification, .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-expire-desc {
   margin-top: 1.6vmin;
   height: 4.8vmin;
@@ -186,6 +195,14 @@
   background: none;
 }
 
+.goods-info-wrapper .goods-info .tips-icon {
+  width: 3.73333vmin;
+  height: 3.73333vmin;
+  margin-left: 1.06667vmin;
+  color: #999;
+  padding-top: 0.26667vmin;
+}
+
 @media screen and (min-width: 768px) and (orientation: portrait) {
   .goods-info-wrapper {
     margin-bottom: 1.17188vmin;
@@ -277,6 +294,14 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-title .goods-name {
     font-size: 1.82292vmin;
   }
+  .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-refund-tips {
+    display: inline-block;
+    padding: 0 0.52083vmin;
+    border-radius: 0.26042vmin;
+    border: 0.13021vmin solid #e0e0e0;
+    color: #666;
+    font-size: 1.5625vmin;
+  }
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-specification, .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-expire-desc {
     margin-top: 0.78125vmin;
     height: 2.34375vmin;
@@ -346,6 +371,13 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-plus, .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-minus {
     background: none;
   }
+  .goods-info-wrapper .goods-info .tips-icon {
+    width: 1.82292vmin;
+    height: 1.82292vmin;
+    margin-left: 0.52083vmin;
+    color: #999;
+    padding-top: 0.13021vmin;
+  }
 }
 
 @media screen and (min-height: 630px) and (orientation: landscape) {
@@ -439,6 +471,14 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-title .goods-name {
     font-size: 2.22222vmin;
   }
+  .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-refund-tips {
+    display: inline-block;
+    padding: 0 0.63492vmin;
+    border-radius: 0.31746vmin;
+    border: 0.15873vmin solid #e0e0e0;
+    color: #666;
+    font-size: 1.90476vmin;
+  }
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-specification, .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-expire-desc {
     margin-top: 0.95238vmin;
     height: 2.85714vmin;
@@ -508,6 +548,13 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-plus, .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-minus {
     background: none;
   }
+  .goods-info-wrapper .goods-info .tips-icon {
+    width: 2.22222vmin;
+    height: 2.22222vmin;
+    margin-left: 0.63492vmin;
+    color: #999;
+    padding-top: 0.15873vmin;
+  }
 }
 
 @media screen and (min-height: 768px) and (orientation: landscape) {
@@ -601,6 +648,14 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-title .goods-name {
     font-size: 1.82292vmin;
   }
+  .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-refund-tips {
+    display: inline-block;
+    padding: 0 0.52083vmin;
+    border-radius: 0.26042vmin;
+    border: 0.13021vmin solid #e0e0e0;
+    color: #666;
+    font-size: 1.5625vmin;
+  }
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-specification, .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-expire-desc {
     margin-top: 0.78125vmin;
     height: 2.34375vmin;
@@ -670,4 +725,11 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-plus, .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-minus {
     background: none;
   }
+  .goods-info-wrapper .goods-info .tips-icon {
+    width: 1.82292vmin;
+    height: 1.82292vmin;
+    margin-left: 0.52083vmin;
+    color: #999;
+    padding-top: 0.13021vmin;
+  }
 }

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.js

@@ -88,6 +88,10 @@ Component({
       type: Object,
       value: () => {},
     },
+    refundTipsZIndex: {
+      type: Number,
+      value: 100
+    }
   },
 
   /**
@@ -96,6 +100,7 @@ Component({
   data: {
     goodsCount: 1,
     first: true,
+    showRefundTips: false
   },
   computed: {
     isCop(data){
@@ -320,6 +325,19 @@ Component({
     },
     count(data) {
       return Math.max(data.baseInfo?.count, data.minCount, data.goodsCount, data.formData.count) || 1;
+    },
+    // 是否有退补提示（是计重商品才判断）
+    isRefundTips(data) {
+      const is_best = data?.goodsInfo?.is_best
+      const is_refund_tips = data?.goodsInfo?.nonstandard_param?.is_refund_tips
+      return is_best === 2 && is_refund_tips === 1
+    },
+    // 销售单位（是计重商品才展示）
+    saleUnit(data) {
+      const is_best = data?.goodsInfo?.is_best
+      const sale_unit = JSON.parse(data?.goodsInfo?.sku_info?.sales_unit || '{}')?.sale_unit
+      if (is_best === 2 && sale_unit) return `/${sale_unit}`;
+      return '';
     }
   },
   observers: {
@@ -452,5 +470,10 @@ Component({
     toPrice(value) {
       return `￥${((value || 0) / 100).toFixed(2)}`;
     },
+    openRefundTips() {
+      this.setData({
+        showRefundTips: !this.data.showRefundTips
+      })
+    },
   }
 })

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.json

@@ -5,6 +5,7 @@
     "van-tag": "@vant/weapp/tag/index",
     "van-stepper": "@vant/weapp/stepper/index",
     "GoodsCommerce": "./components/GoodsCommerce/index",
-    "CopGoodsList": "./components/CopGoodsList/index"
+    "CopGoodsList": "./components/CopGoodsList/index",
+    "RefundTips": "./components/RefundTips/index"
   }
 }

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.scss

@@ -105,6 +105,15 @@ $deviceWidth: 750;
               font-size: vmin(28);
             }
           }
+
+          .goods-refund-tips {
+            display: inline-block;
+            padding: 0 vmin(8);
+            border-radius: vmin(4);
+            border: vmin(2) solid #e0e0e0;
+            color: #666;
+            font-size: vmin(24);
+          }
   
           .goods-specification, .goods-expire-desc {
             margin-top: vmin(12);
@@ -190,6 +199,14 @@ $deviceWidth: 750;
           }
         }
       }
+
+      .tips-icon {
+        width: vmin(28);
+        height: vmin(28);
+        margin-left: vmin(8);
+        color: #999;
+        padding-top: vmin(2);
+      }
     }
 }
 

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.wxml

@@ -19,6 +19,8 @@
             <view class="goods-tag ET tag" wx:if="{{ goodsTitleTag }}">{{ goodsTitleTag }}</view>
             <view class="goods-name">{{ goodsInfo.goods_name }}</view>
           </view>
+          <view class="goods-refund-tips" wx:if="{{ isRefundTips }}">{{ goodsInfo.nonstandard_param.is_refund_msg || '称重退补差价' }}</view>
+          <image class="tips-icon" wx:if="{{ isRefundTips }}" src="../../../common/assets/images/tips.png"  catchtap="openRefundTips"></image>
           <view class="goods-specification font-12" wx:if="{{ specification }}">{{ specification }}</view>
           <view class="goods-expire-desc font-12" wx:if="{{ isExpireDisplay && expireDesc && expireDesc != '长期有效' }}">有效期：{{ expireDesc }}</view>
         </view>
@@ -30,7 +32,7 @@
             </view>
             <view>
               <view class="goods-price">
-                ￥{{ tools.toPrice(goodsPrice) }}
+                ￥{{ tools.toPrice(goodsPrice) }}{{ saleUnit }}
               </view>
               <view class="goods-tags">
                 <view class="goods-tag marketing-tag" wx:if="{{ marketingTag && !useSvipPrice }}">
@@ -81,4 +83,13 @@
     skuId="{{goodsInfo.sku_id}}"
   >
   </CopGoodsList>
+  <!-- 退补提示弹窗 -->
+  <RefundTips
+    wx:if="{{ isRefundTips }}"
+    showTips="{{ showRefundTips }}"
+    refundMsg ="{{ goodsInfo.nonstandard_param.is_refund_msg  }}"
+    bind:closeTips="openRefundTips"
+    zIndex="{{refundTipsZIndex}}"
+    isFullScreen="{{isFullScreen}}"
+  ></RefundTips>
 </view>

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.wxss

@@ -88,6 +88,14 @@
 .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-title .goods-name {
   font-size: 3.73333vmin;
 }
+.goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-refund-tips {
+  display: inline-block;
+  padding: 0 1.06667vmin;
+  border-radius: 0.53333vmin;
+  border: 0.26667vmin solid #e0e0e0;
+  color: #666;
+  font-size: 3.2vmin;
+}
 .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-specification,
 .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-expire-desc {
   margin-top: 1.6vmin;
@@ -159,6 +167,13 @@
 .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-minus {
   background: none;
 }
+.goods-info-wrapper .goods-info .tips-icon {
+  width: 3.73333vmin;
+  height: 3.73333vmin;
+  margin-left: 1.06667vmin;
+  color: #999;
+  padding-top: 0.26667vmin;
+}
 @media screen and (min-width: 768px) and (orientation: portrait) {
   .goods-info-wrapper {
     margin-bottom: 1.17188vmin;
@@ -250,6 +265,14 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-title .goods-name {
     font-size: 1.82292vmin;
   }
+  .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-refund-tips {
+    display: inline-block;
+    padding: 0 0.52083vmin;
+    border-radius: 0.26042vmin;
+    border: 0.13021vmin solid #e0e0e0;
+    color: #666;
+    font-size: 1.5625vmin;
+  }
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-specification,
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-expire-desc {
     margin-top: 0.78125vmin;
@@ -321,6 +344,13 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-minus {
     background: none;
   }
+  .goods-info-wrapper .goods-info .tips-icon {
+    width: 1.82292vmin;
+    height: 1.82292vmin;
+    margin-left: 0.52083vmin;
+    color: #999;
+    padding-top: 0.13021vmin;
+  }
 }
 @media screen and (min-height: 630px) and (orientation: landscape) {
   .goods-info-wrapper {
@@ -413,6 +443,14 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-title .goods-name {
     font-size: 2.22222vmin;
   }
+  .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-refund-tips {
+    display: inline-block;
+    padding: 0 0.63492vmin;
+    border-radius: 0.31746vmin;
+    border: 0.15873vmin solid #e0e0e0;
+    color: #666;
+    font-size: 1.90476vmin;
+  }
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-specification,
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-expire-desc {
     margin-top: 0.95238vmin;
@@ -484,6 +522,13 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-minus {
     background: none;
   }
+  .goods-info-wrapper .goods-info .tips-icon {
+    width: 2.22222vmin;
+    height: 2.22222vmin;
+    margin-left: 0.63492vmin;
+    color: #999;
+    padding-top: 0.15873vmin;
+  }
 }
 @media screen and (min-height: 768px) and (orientation: landscape) {
   .goods-info-wrapper {
@@ -576,6 +621,14 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-title .goods-name {
     font-size: 1.82292vmin;
   }
+  .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-refund-tips {
+    display: inline-block;
+    padding: 0 0.52083vmin;
+    border-radius: 0.26042vmin;
+    border: 0.13021vmin solid #e0e0e0;
+    color: #666;
+    font-size: 1.5625vmin;
+  }
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-specification,
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-expire-desc {
     margin-top: 0.78125vmin;
@@ -647,4 +700,11 @@
   .goods-info-wrapper .goods-info .goods-wrapper .goods-detail .goods-quantity .goods-counter .goods-minus {
     background: none;
   }
+  .goods-info-wrapper .goods-info .tips-icon {
+    width: 1.82292vmin;
+    height: 1.82292vmin;
+    margin-left: 0.52083vmin;
+    color: #999;
+    padding-top: 0.13021vmin;
+  }
 }

package/miniprogram_dist/ConfirmOrder/index.js

@@ -66,6 +66,10 @@ Component({
       type: Number,
       value: 100
     },
+    refundTipsZIndex:{
+      type: Number,
+      value: 100
+    },
   },
   data: {
     showHeader: true

package/miniprogram_dist/GoodsItem/index.js

@@ -428,6 +428,17 @@ Component({
     },
     distributionPattern(data) {
       return [-1,1,2].indexOf(data.goodsItem.distribution_pattern) !== -1
+    },
+    // 是否有退补提示（是计重商品才判断）
+    isRefundTips(data) {
+      const { is_best, is_refund_tips } = data.goodsItem;
+      return is_best === 2 && is_refund_tips === 1;
+    },
+    // 销售单位（是计重商品才展示）
+    saleUnit(data) {
+      const { is_best, sale_unit } = data.goodsItem;
+      if (is_best === 2 && sale_unit) return `/${sale_unit}`;
+      return '';
     }
   },
   /**

package/miniprogram_dist/GoodsItem/index.scss

@@ -231,6 +231,8 @@ $deviceWidth: 750;
         .order-left{
           display: flex;
           flex-direction: row;
+          flex-wrap: wrap;
+          gap: vmin(8);
 
           .distribution{
             background-color: #f5f5f5;
@@ -253,6 +255,8 @@ $deviceWidth: 750;
         .stock-and-order {
           display: flex;
           align-items: center;
+          flex-shrink: 0;
+          align-self: flex-start;
           .stock-line {
             background-color: #E5E5E5;
             width: 1px;
@@ -343,6 +347,10 @@ $deviceWidth: 750;
           .price-show {
             font-size: vmin(32);
           }
+          .sale-unit {
+            font-size: vmin(24);
+            color: #666;
+          }
           .price-line {
             font-size: vmin(20);
             text-decoration: line-through;

package/miniprogram_dist/GoodsItem/index.wxml

@@ -58,8 +58,11 @@
           <!-- 自提/快递 二期才有哈-->
           <view class="distribution" wx:if="{{distributionPattern}}">{{distributionWay}}</view>
 
+          <!-- 计重商品的退补提示 -->
+          <view class="distribution" wx:if="{{ isRefundTips }}">{{ goodsItem.is_refund_msg || '称重退补差价' }}</view>
+
           <!-- 券后价 -->
-          <view wx:if="{{showPreferentialPrice}}" class="preferential-price">{{ '券后¥' + goodsItem.preferentialShowInt }}</view>
+          <view wx:if="{{showPreferentialPrice}}" class="preferential-price">{{ '券后¥' + goodsItem.preferentialShowInt }}{{ saleUnit }}</view>
         </view>
 
         <view class="stock-and-order">
@@ -113,9 +116,11 @@
             <text class="price-flow">¥</text>
             <text class="price-show">{{ goodsItem.priceShowInt }}</text>
             <text class="price-show" wx:if="{{ goodsItem.priceShowFlow !== '00'}}">.{{ goodsItem.priceShowFlow }}</text>
+            <text class="sale-unit">{{ saleUnit }}</text>
             <text class="price-line" wx:if="{{ showPriceLine && !isManage }}">
               <text>¥{{ goodsItem.priceLineShowInt }}</text>
               <text wx:if="{{ goodsItem.priceLineShowFlow !== '00'}}">.{{ goodsItem.priceLineShowFlow }}</text>
+              <text>{{ saleUnit }}</text>
             </text>
           </view>
         </view>

package/miniprogram_dist/GoodsItem/index.wxss

@@ -245,6 +245,8 @@
 .goods-item .main-card .right .order .order-left {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1.06667vmin;
 }
 .goods-item .main-card .right .order .order-left .distribution {
   background-color: #f5f5f5;
@@ -266,6 +268,8 @@
 .goods-item .main-card .right .order .stock-and-order {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  align-self: flex-start;
 }
 .goods-item .main-card .right .order .stock-and-order .stock-line {
   background-color: #E5E5E5;
@@ -351,6 +355,10 @@
 .goods-item .main-card .right .line-three .price .price-show {
   font-size: 4.26667vmin;
 }
+.goods-item .main-card .right .line-three .price .sale-unit {
+  font-size: 3.2vmin;
+  color: #666;
+}
 .goods-item .main-card .right .line-three .price .price-line {
   font-size: 2.66667vmin;
   text-decoration: line-through;
@@ -733,6 +741,8 @@
   .goods-item .main-card .right .order .order-left {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.52083vmin;
   }
   .goods-item .main-card .right .order .order-left .distribution {
     background-color: #f5f5f5;
@@ -754,6 +764,8 @@
   .goods-item .main-card .right .order .stock-and-order {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
+    align-self: flex-start;
   }
   .goods-item .main-card .right .order .stock-and-order .stock-line {
     background-color: #E5E5E5;
@@ -839,6 +851,10 @@
   .goods-item .main-card .right .line-three .price .price-show {
     font-size: 2.08333vmin;
   }
+  .goods-item .main-card .right .line-three .price .sale-unit {
+    font-size: 1.5625vmin;
+    color: #666;
+  }
   .goods-item .main-card .right .line-three .price .price-line {
     font-size: 1.30208vmin;
     text-decoration: line-through;
@@ -1222,6 +1238,8 @@
   .goods-item .main-card .right .order .order-left {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.63492vmin;
   }
   .goods-item .main-card .right .order .order-left .distribution {
     background-color: #f5f5f5;
@@ -1243,6 +1261,8 @@
   .goods-item .main-card .right .order .stock-and-order {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
+    align-self: flex-start;
   }
   .goods-item .main-card .right .order .stock-and-order .stock-line {
     background-color: #E5E5E5;
@@ -1328,6 +1348,10 @@
   .goods-item .main-card .right .line-three .price .price-show {
     font-size: 2.53968vmin;
   }
+  .goods-item .main-card .right .line-three .price .sale-unit {
+    font-size: 1.90476vmin;
+    color: #666;
+  }
   .goods-item .main-card .right .line-three .price .price-line {
     font-size: 1.5873vmin;
     text-decoration: line-through;
@@ -1711,6 +1735,8 @@
   .goods-item .main-card .right .order .order-left {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.52083vmin;
   }
   .goods-item .main-card .right .order .order-left .distribution {
     background-color: #f5f5f5;
@@ -1732,6 +1758,8 @@
   .goods-item .main-card .right .order .stock-and-order {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
+    align-self: flex-start;
   }
   .goods-item .main-card .right .order .stock-and-order .stock-line {
     background-color: #E5E5E5;
@@ -1817,6 +1845,10 @@
   .goods-item .main-card .right .line-three .price .price-show {
     font-size: 2.08333vmin;
   }
+  .goods-item .main-card .right .line-three .price .sale-unit {
+    font-size: 1.5625vmin;
+    color: #666;
+  }
   .goods-item .main-card .right .line-three .price .price-line {
     font-size: 1.30208vmin;
     text-decoration: line-through;