提交

MrShi

2026-05-19 ce06ca62a0dd65d4a8fb57126948449c804ad77e

 small-program/pages/luggage-storage/luggage-storage.vue

@@ -219,6 +219,18 @@
            </view>

            <view class="section-card simple-card">
               <view class="form-row" @click="selectCoupon">
                  <text class="form-label">平台优惠券</text>
                  <view class="form-value-wrap">
                     <view style="display: flex; flex-direction: column; align-items: flex-end;">
                        <text :class="selectedCoupon && selectedCoupon.value > 0 ? 'coupon-value-red' : 'form-value-placeholder'">{{ selectedCoupon && selectedCoupon.value > 0 ? '-￥' + selectedCoupon.value.toFixed(2) : '选择优惠券' }}</text>
                     </view>
                     <u-icon name="arrow-right" size="14" color="#999999"></u-icon>
                  </view>
               </view>
            </view>

            <view class="section-card simple-card">
               <view class="form-row no-border">
                  <text class="form-label">备注</text>
                  <input v-model="form.remark" class="form-input" :class="{ 'filled-input': form.remark }" type="text" placeholder="请输入" placeholder-style="color: #B2B2B2;" placeholder-class="input-placeholder" />
@@ -227,6 +239,59 @@

         </view>
      </scroll-view>

      <!-- 优惠券选择弹窗 -->
      <u-popup :show="showCouponPopup" mode="bottom" round="24" :closeOnClickOverlay="true" @close="showCouponPopup = false">
         <view class="coupon-popup-wrap">
            <view class="coupon-popup-head">
               <text class="coupon-popup-title">选择优惠券</text>
               <view class="coupon-popup-close" @tap="showCouponPopup = false">
                  <u-icon name="close" size="28" color="#999999"></u-icon>
               </view>
            </view>
            <scroll-view scroll-y class="coupon-list-scroll">
               <view
                  v-for="(coupon, index) in couponList"
                  :key="index"
                  class="coupon-item"
                  :class="{ active: selectedCouponIndex === index }"
                  @click="toggleCoupon(index)"
               >
                  <!-- 上半部分 -->
                  <view class="coupon-item-top">
                     <view class="coupon-item-left">
                        <text class="coupon-name">{{ coupon.name }}</text>
                        <text class="coupon-validity">有效期{{ coupon.startDate }}~{{ coupon.endDate }}</text>
                     </view>
                     <view class="coupon-item-right">
                        <text class="coupon-amount">￥{{ ((coupon.price || 0) / 100).toFixed(2) }}</text>
                        <text class="coupon-desc">满{{((coupon.limitPrice || 0) / 100).toFixed(2)}}可用</text>
                     </view>
                  </view>
						
                  <!-- 虚线分隔 -->
                  <view class="coupon-divider"></view>
						
                  <!-- 下半部分 -->
                  <view class="coupon-item-bottom">
                     <view class="coupon-usage" @click.stop="toggleUsage(index)">
                        <text class="coupon-usage-label">使用说明</text>
                        <u-icon :name="showUsageIndex === index ? 'arrow-up' : 'arrow-down'" size="14" color="#999999"></u-icon>
                     </view>
                     <u-icon v-if="selectedCouponIndex === index" name="checkmark-circle-fill" size="24" color="#1890FF"></u-icon>
                  </view>
						
                  <!-- 使用说明内容 -->
                  <view v-if="showUsageIndex === index" class="coupon-usage-content">
                     <text class="coupon-usage-text">{{ coupon.info }}</text>
                  </view>
               </view>
            </scroll-view>
            <view class="coupon-confirm-btn-wrap">
               <view class="coupon-confirm-btn active-submit-btn" @click="confirmCoupon">确定选择</view>
            </view>
         </view>
      </u-popup>

      <u-popup :show="showStorePopup" mode="bottom" round="24" :closeOnClickOverlay="true" @close="showStorePopup = false">
         <view class="store-popup-wrap">
@@ -342,6 +407,12 @@
                  </view>
                  <text class="amount-row-value">{{ '￥' + amountData.insuranceFee }}</text>
               </view>
               <view v-if="selectedCoupon" class="amount-row amount-row-extra">
                  <view class="amount-row-left">
                     <text class="amount-row-label">平台优惠券</text>
                  </view>
                  <text class="amount-row-discount">-￥{{ selectedCoupon.value || selectedCoupon.amount || 0 }}</text>
               </view>
            </view>
            <view class="agreement-bar popup-agreement-bar" @click="toggleAgreement">
               <image class="agreement-icon" :src="agreementChecked ? '/static/icon/ic_accept_sel@2x.png' : '/static/icon/ic_accept@2x.png'" mode="widthFix" />
@@ -375,7 +446,7 @@
         <view class="bottom-action-row">
            <view class="total-wrap">
               <text class="total-label">总费用</text>
               <text class="total-price">{{ amountData ? '￥' + amountData.totalPrice : '￥--' }}</text>
               <text class="total-price">{{ amountData ? '￥' + (amountData.totalPrice - (selectedCoupon ? selectedCoupon.value || 0 : 0)).toFixed(2) : '￥--' }}</text>
               <template v-if="amountData">
                  <text class="detail-text detail-click" @tap.stop="openAmountPopup">明细</text>
                  <u-icon name="arrow-down" size="18" color="#999999"></u-icon>
@@ -456,7 +527,12 @@
            actions: [
               { name: '选择服务点' },
               { name: '选择地址簿' }
            ]
            ],
            selectedCoupon: null,
         showCouponPopup: false,
         couponList: [],
         selectedCouponIndex: -1,
         showUsageIndex: -1,
         }
      },
      watch: {
@@ -515,8 +591,74 @@
            this.receiveAddr = data
            this.receiveAddr.addr = data.provinceName + data.cityName + data.districtName + data.addr
         })

         uni.$on('selectCoupon', (data) => {
            this.selectedCoupon = data
            if (this.activeMode === 'city') {
               this.calculateRemotePrice()
            } else {
               this.calculateLocalPrice()
            }
         })
      },
      onUnload() {
         uni.$off('updateAddress')
         uni.$off('selectCoupon')
      },
      methods: {
         getCouponId() {
            if (this.selectedCoupon && this.selectedCoupon.id && this.selectedCoupon.id > 0) {
               return this.selectedCoupon.id
            } else if (this.selectedCoupon && this.selectedCoupon.id === 0) {
               return null
            }
            return -1
         },
         selectCoupon() {
            this.showCouponPopup = true
         },
         toggleUsage(index) {
            if (this.showUsageIndex === index) {
               this.showUsageIndex = -1
            } else {
               this.showUsageIndex = index
            }
         },
         toggleCoupon(index) {
            if (this.selectedCouponIndex === index) {
               // 重复点击，取消选择
               this.selectedCouponIndex = -1
            } else {
               // 选择优惠券
               this.selectedCouponIndex = index
            }
         },
         confirmCoupon() {
            if (this.selectedCouponIndex >= 0 && this.selectedCouponIndex < this.couponList.length) {
               const coupon = this.couponList[this.selectedCouponIndex]
               this.selectedCoupon = {
                  id: coupon.id,
                  name: coupon.name,
                  value: coupon.value || coupon.amount / 100,
                  price: coupon.amount
               }
               this.showCouponPopup = false
               if (this.activeMode === 'city') {
                  this.calculateRemotePrice()
               } else {
                  this.calculateLocalPrice()
               }
            } else if (this.selectedCouponIndex === -1) {
               // 取消选择优惠券
               this.selectedCoupon = { id: 0, name: '不使用优惠券', value: 0 }
               this.showCouponPopup = false
               if (this.activeMode === 'city') {
                  this.calculateRemotePrice()
               } else {
                  this.calculateLocalPrice()
               }
            }
         },
         caozuo(e) {
            var that = this;
            this.receiveStore = null
@@ -819,7 +961,8 @@
               depositStartTime: this.form.arriveTime + ':00',
               depositEndTime: this.form.pickupTime + ':00',
               items: luggageList,
               declaredAmount: this.form.insurance || 0
               declaredAmount: this.form.insurance || 0,
               couponId: this.getCouponId()
            })
            if (res.code === 200) {
               res.data.itemList.forEach(item => {
@@ -827,7 +970,26 @@
               })
               res.data.totalPrice = res.data.totalPrice / 100
               res.data.insuranceFee = res.data.insuranceFee / 100
               if (res.data.selectedCoupon) {
                  res.data.selectedCoupon.value = res.data.selectedCoupon.price / 100
               }
               if (res.data.availableCoupons) {
                  res.data.availableCoupons.forEach(coupon => {
                     coupon.value = coupon.price / 100
                  })
                  this.couponList = res.data.availableCoupons
               }
               this.amountData = res.data
               if (res.data.selectedCoupon) {
                  this.selectedCoupon = res.data.selectedCoupon
                  // 找到对应的优惠券索引
                  if (res.data.availableCoupons) {
                     const index = res.data.availableCoupons.findIndex(coupon => coupon.id === res.data.selectedCoupon.id)
                     if (index !== -1) {
                        this.selectedCouponIndex = index
                     }
                  }
               }
            }
         },
         async calculateRemotePrice() {
@@ -872,7 +1034,8 @@
               toLgt: toLgt,
               urgent: this.isUrgent,
               items: luggageList,
               declaredAmount: this.form.insurance || 0
               declaredAmount: this.form.insurance || 0,
               couponId: this.getCouponId()
            })
            if (res.code === 200) {
               res.data.itemList.forEach(item => {
@@ -880,11 +1043,30 @@
               })
               res.data.totalPrice = res.data.totalPrice / 100
               res.data.insuranceFee = res.data.insuranceFee / 100
               if (res.data.selectedCoupon) {
                  res.data.selectedCoupon.value = res.data.selectedCoupon.price / 100
               }
               if (res.data.availableCoupons) {
                  res.data.availableCoupons.forEach(coupon => {
                     coupon.value = coupon.price / 100
                  })
                  this.couponList = res.data.availableCoupons
               }
               this.serviceTimes = [
                  { id: 0, name: '标准达', serviceTime: res.data.standardHours, price: res.data.itemPrice / 100 },
                  { id: 1, name: '急速达', serviceTime: res.data.urgentHours, price: (res.data.urgentFee + res.data.itemPrice) / 100 }
               ]
               this.amountData = res.data
               if (res.data.selectedCoupon) {
                  this.selectedCoupon = res.data.selectedCoupon
                  // 找到对应的优惠券索引
                  if (res.data.availableCoupons) {
                     const index = res.data.availableCoupons.findIndex(coupon => coupon.id === res.data.selectedCoupon.id)
                     if (index !== -1) {
                        this.selectedCouponIndex = index
                     }
                  }
               }
            }
         },
         async createOrder() {
@@ -975,7 +1157,8 @@
               takePhone: this.form.mobile,
               takeUser: this.form.receiver,
               type: this.activeMode === 'local' ? 0 : 1,
               isUrgent: this.isUrgent
               isUrgent: this.isUrgent,
               couponId: this.getCouponId()
            }
            if (this.activeMode === 'local') {
               orderParams.depositShopId = this.selectedStore.id
@@ -1504,6 +1687,26 @@
      color: #222222;
   }

   .form-value-wrap {
      display: flex;
      align-items: center;
      gap: 8rpx;
      flex: 1;
      justify-content: flex-end;
   }

   .form-value-text {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
   }

   .form-value-placeholder {
      font-weight: 400;
      font-size: 28rpx;
      color: #B2B2B2;
   }

   .form-input {
      flex: 1;
      height: 88rpx;
@@ -1914,6 +2117,24 @@
      color: #222222;
   }

   .amount-row-right {
      display: flex;
      align-items: center;
      gap: 8rpx;
   }

   .amount-row-placeholder {
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
   }

   .amount-row-discount {
      font-weight: 400;
      font-size: 30rpx;
      color: #FF4D4F;
   }

   .popup-agreement-bar {
      margin-top: 12rpx;
   }
@@ -2043,4 +2264,164 @@
   .active-submit-btn {
      background: #10B2FA;
   }

   /* 优惠券弹窗样式 */
   .coupon-popup-wrap {
      background: #ffffff;
      border-radius: 24rpx 24rpx 0 0;
      padding: 0 30rpx 16rpx 30rpx;
      box-sizing: border-box;
   }

   .coupon-popup-head {
      position: relative;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .coupon-popup-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #222222;
   }

   .coupon-popup-close {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 56rpx;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .coupon-list-scroll {
      max-height: 60vh;
      padding-bottom: 20rpx;
   }

   .coupon-item {
      background: #F7F8FA;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      border: 2rpx solid transparent;
      transition: all 0.3s;
   }

   .coupon-item-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
   }

   .coupon-item-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .coupon-divider {
      height: 1rpx;
      background: repeating-linear-gradient(to right, #CCCCCC 0, #CCCCCC 8rpx, transparent 8rpx, transparent 16rpx);
      margin: 12rpx 0;
   }

   .coupon-item.active {
      background: #E6F7FF;
      border-color: #1890FF;
   }

   .coupon-item-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12rpx;
   }

   .coupon-name {
      font-weight: 500;
      font-size: 30rpx;
      color: #222222;
   }

   .coupon-validity {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
   }

   .coupon-usage {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
   }

   .coupon-usage-label {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
   }

   .coupon-usage-content {
		
   }

   .coupon-usage-text {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      line-height: 1.5;
   }

   .coupon-item-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12rpx;
   }

   .coupon-amount {
      font-weight: 600;
      font-size: 32rpx;
      color: #FF4D4F;
   }

   .coupon-desc {
      font-weight: 400;
      font-size: 22rpx;
      color: #FF4D4F;
      border-radius: 12rpx;
   }

   .coupon-confirm-btn-wrap {
      padding: 24rpx 0;
   }

   .coupon-confirm-btn {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      border-radius: 12rpx;
   }

   .coupon-value-red {
      font-weight: 400;
      font-size: 30rpx;
      color: #FF4D4F;
   }
</style>