提交

MrShi

2026-05-22 fbc074229fd4736f1ae2793c9daebf04726188b2

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

@@ -1,5 +1,15 @@
<template>
   <view class="luggage-page">
      <view class="nav-bar" :style="{ paddingTop: statusbarHeight + 'px' }">
         <view class="nav-content" :style="{ height: navHeight + 'px' }">
            <view class="nav-left" @click="goBack">
               <u-icon name="arrow-left" :size="26" color="#333333"></u-icon>
            </view>
            <text class="nav-title">行李寄存</text>
            <view class="nav-right"></view>
         </view>
      </view>
      <!-- <view class="top-placeholder" :style="{ height: statusbarHeight + navHeight + 'px' }"></view> -->
      <view class="top-gradient-bg"></view>
      <view class="mode-tabs">
         <view
@@ -7,7 +17,7 @@
            :key="item.value"
            class="mode-tab"
            :class="{ active: activeMode === item.value }"
            @tap="switchMode(item.value)"
            @click="switchMode(item.value)"
         >
            <text>{{ item.label }}</text>
            <view v-if="activeMode === item.value" class="mode-line"></view>
@@ -238,6 +248,8 @@
            </view>

         </view>
         <view style="width: 100%; height: 104rpx;" v-if="amountData"></view>
         <view style="width: 100%; height: calc(112rpx + env(safe-area-inset-bottom));"></view>
      </scroll-view>

      <!-- 优惠券选择弹窗 -->
@@ -250,42 +262,45 @@
               </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>
               <template v-if="couponList.length > 0">
                  <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" v-if="coupon.couponType === 0">平台满减券</text>
                           <text class="coupon-validity">有效期{{ formatDate(coupon.startDate) }}~{{ formatDate(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-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 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>
						
                  <!-- 虚线分隔 -->
                  <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>
               </template>
               <view class="coupon-list-scroll-wu" v-else>暂无优惠券</view>
            </scroll-view>
            <view class="coupon-confirm-btn-wrap">
               <view class="coupon-confirm-btn active-submit-btn" @click="confirmCoupon">确定选择</view>
@@ -424,8 +439,8 @@
            <view class="bottom-action-row popup-action-row">
               <view class="total-wrap">
                  <text class="total-label">总费用</text>
                  <text class="total-price">{{ amountData ? '￥' + amountData.totalPrice : '￥--' }}</text>
                  <view style="display: flex; align-items: center;" @click="showAmountPopup = false">
                  <text class="total-price">{{ amountData ? '￥' + (amountData.totalPrice - (selectedCoupon ? selectedCoupon.value || selectedCoupon.amount || 0 : 0)).toFixed(2) : '￥--' }}</text>
                  <view style="width: 100rpx; height: 40rpx; display: flex; align-items: center;" @click="showAmountPopup = false">
                     <text class="detail-text">明细</text>
                     <u-icon name="arrow-up" size="13" color="#7B7F86"></u-icon>
                  </view>
@@ -444,11 +459,11 @@
            <text class="agreement-link" @click="goRichText(1)">《隐私政策》</text>
         </view>
         <view class="bottom-action-row">
            <view class="total-wrap">
            <view class="total-wrap" @click.stop="openAmountPopup">
               <text class="total-label">总费用</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>
                  <text class="detail-text detail-click">明细</text>
                  <u-icon name="arrow-down" size="18" color="#999999"></u-icon>
               </template>
            </view>
@@ -550,7 +565,7 @@
         }
      },
      computed: {
         ...mapState(['latitude', 'longitude', 'cityId']),
         ...mapState(['latitude', 'longitude', 'cityId', 'statusbarHeight', 'navHeight', 'userInfo']),
         servicePointPlaceholder() {
            return this.activeMode === 'city' ? '选择寄送服务点' : '选择寄存服务点'
         },
@@ -581,11 +596,14 @@
         this.getContactInfo()
         
         if (uni.getStorageSync('selectedStore')) {
            this.selectedStore = uni.getStorageSync('selectedStore')
            const store = uni.getStorageSync('selectedStore')
            this.selectedStore = store
            this.sendStore = store
            uni.removeStorageSync('selectedStore')
         }

         uni.$on('updateAddress', (data) => {
            this.receiveStore = null
            this.form.receiver = data.name
            this.form.mobile = data.phone
            this.receiveAddr = data
@@ -606,6 +624,46 @@
         uni.$off('selectCoupon')
      },
      methods: {
         formatDate(dateStr) {
            if (!dateStr) return ''
            const date = new Date(dateStr)
            const year = String(date.getFullYear()).slice(2)
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            return `${year}.${month}.${day} ${hours}:${minutes}`
         },
         hasFormData() {
            if (this.form.receiver || this.form.mobile || this.form.arriveTime || 
               this.form.pickupTime || this.form.goodType || this.form.insurance || 
               this.form.remark || this.form.goodsImages.length > 0 ||
               this.selectedStore || this.sendStore || this.receiveStore || 
               this.receiveAddr || this.amountData) {
               return true
            }
            if (this.luggageTypes.some(item => item.count > 0)) {
               return true
            }
            return false
         },
         goBack() {
            if (this.hasFormData()) {
               uni.showModal({
                  title: '提示',
                  content: '离开后当前页面内容失效，是否确认离开？',
                  confirmText: '确认离开',
                  cancelText: '取消',
                  success: (res) => {
                     if (res.confirm) {
                        uni.navigateBack()
                     }
                  }
               })
            } else {
               uni.navigateBack()
            }
         },
         getCouponId() {
            if (this.selectedCoupon && this.selectedCoupon.id && this.selectedCoupon.id > 0) {
               return this.selectedCoupon.id
@@ -661,8 +719,6 @@
         },
         caozuo(e) {
            var that = this;
            this.receiveStore = null
            this.receiveAddr = null
            if (e.name === '选择服务点') {
               that.storePopupType = 'receive'
               that.showStorePopup = true
@@ -765,12 +821,8 @@
         },
         switchMode(mode) {
            this.activeMode = mode
            this.selectedStore = null
            this.sendStore = null
            this.receiveStore = null
            this.receiveAddr = null
            this.form.receiver = ''
            this.form.mobile = ''
            this.form.arriveTime = ''
            this.form.pickupTime = ''
            this.form.goodType = ''
@@ -894,12 +946,11 @@
         async getContactInfo() {
            const res = await this.$u.api.getContactInfo({})
            if (res.code === 200 && res.data) {
               if (res.data.name) {
                  this.form.receiver = res.data.name
               }
               if (res.data.phone) {
                  this.form.mobile = res.data.phone
               }
               this.form.receiver = res.data.name || this.userInfo.name || ''
               this.form.mobile = res.data.phone || this.userInfo.telephone || ''
            } else {
               this.form.receiver = this.userInfo.name || ''
               this.form.mobile = this.userInfo.telephone || ''
            }
         },
         async getNearbyShopList() {
@@ -1224,10 +1275,40 @@
      background: #f5f6f8;
   }

   .nav-bar {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      z-index: 100;
      .nav-content {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 30rpx;
         .nav-left {
            width: 40rpx;
            height: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         .nav-title {
            font-size: 34rpx;
            font-weight: 600;
            color: #333333;
         }
         .nav-right {
            width: 40rpx;
         }
      }
   }

   .top-gradient-bg {
      position: absolute;
      left: 0;
      top: 88rpx;
      top: 0;
      width: 100%;
      height: 480rpx;
      background: linear-gradient(180deg, #15b9f7 0%, #f7f7f7 100%);
@@ -1271,7 +1352,6 @@

   .page-scroll {
      position: relative;
      z-index: 1;
      height: calc(100vh - 88rpx - 186rpx - env(safe-area-inset-bottom));
   }

@@ -1342,7 +1422,7 @@
   }

   .store-list-scroll {
      max-height: 70vh;
      max-height: 60vh;
      min-height: 50vh;
      margin-top: 30rpx;
   }
@@ -2210,6 +2290,7 @@
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      padding: 0 0 env(safe-area-inset-bottom);
      background: #ffffff;
      box-sizing: border-box;
@@ -2301,7 +2382,18 @@

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

   .coupon-list-scroll-wu {
      width: 100%;
      height: 20vh;
      line-height: 20vh;
      text-align: center;
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
   }

   .coupon-item {
@@ -2416,7 +2508,7 @@
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      border-radius: 12rpx;
      border-radius: 44rpx;
   }

   .coupon-value-red {