Feat:体验订单样式优化

pkg_product/views/sojoumOrderDetails.vue

@@ -75,7 +75,6 @@
       </view>
     </view>
 
-    <!-- 商家电话弹窗 -->
     <u-popup :show="showPhonePopup" mode="center" round="10" :safe-area-inset-bottom="false">
       <view class="phone-popup">
         <view class="phone-title">{{ title }}</view>
@@ -98,6 +97,21 @@
       </view>
     </u-popup>
 
+    <u-popup :show="showExperienceCouponPopup" bgColor="transparent" mode="center" round="10" :safe-area-inset-bottom="false">
+      <image class="" :src="webUrl + '/tiyan.png'" mode="widthFix" lazy-load="false">
+        
+      </image>
+      <!-- <view class="experience-popup">
+        <view class="experience-title">体验券提醒</view>
+        <view class="experience-content">您有可领取的体验券，可前往体验券页面领取。</view>
+        
+      </view> -->
+      <view class="experience-actions v12-align-center">
+        <view class="v12-font-28 v12-dark-border v12-radius-100 v12-px-2 close-btn" @click="showExperienceCouponPopup = !showExperienceCouponPopup">暂不领取</view>
+        <view class="v12-font-28 v12-primary-text v12-primary-border v12-radius-100 v12-px-2 go-btn" @click="goExperienceCoupon">去领取体验券</view>
+      </view>
+    </u-popup>
+
     <!-- 联系人信息 -->
     <view class="contact-section" v-if="orderInfo.realName && orderInfo.userPhone">
       <view class="section-title v12-font-28 v12-font-bold">联系人信息</view>
@@ -204,6 +218,7 @@
 
 <script>
 import { fetchSojoumOrderDetail,sojoumOrderCheckInTime, sojoumOrderCalendar } from "@/api/sojoumOrder";
+import { checkExperienceCoupon } from '@/api/product'
 import DateRangePicker from '@/components/DateRangePicker/DateRangePicker.vue'
 export default {
   components: {
@@ -223,17 +238,22 @@ export default {
         merchantPhone: '' // 添加商家电话字段
       },
       showPhonePopup: false, // 控制电话弹窗显示
-      isView: 0
+      isView: 0,
+      showExperienceCouponPopup: false,
+      experienceCouponId: null,
+      experienceCouponTimer: null
     }
   },
   onLoad(otps) {
     this.key = otps.id;
     this.isView = otps.isView || 0;
-    this.getSojoumOrderDetail();
   },
   onShow() {
     this.getSojoumOrderDetail();
   },
+  onUnload() {
+    this.stopExperienceCouponPolling();
+  },
   methods: {
     handleDateRangeChange(dates) {
       // if (dates && dates.length === 2) {
@@ -316,9 +336,52 @@ export default {
       if (res.status === 200) {
         this.orderInfo = res.data;
         this.orderInfo.minBookingDays = this.getDaysCount();
+        this.startExperienceCouponPolling();
         uni.hideLoading();
       }
     },
+    startExperienceCouponPolling() {
+      this.stopExperienceCouponPolling();
+      const statusType = this.orderInfo && this.orderInfo._status && this.orderInfo._status._type;
+      // if (![1, 2].includes(Number(statusType))) {
+      //   return;
+      // }
+      this.checkExperienceCouponStatus();
+      this.experienceCouponTimer = setInterval(() => {
+        this.checkExperienceCouponStatus();
+      }, 5000);
+    },
+    stopExperienceCouponPolling() {
+      if (this.experienceCouponTimer) {
+        clearInterval(this.experienceCouponTimer);
+        this.experienceCouponTimer = null;
+      }
+    },
+    async checkExperienceCouponStatus() {
+      const orderId = this.orderInfo && this.orderInfo.orderId ? this.orderInfo.orderId : this.key;
+      if (!orderId) {
+        return;
+      }
+      try {
+        const res = await checkExperienceCoupon({ orderId });
+        if (!res || res.status !== 200) {
+          return;
+        }
+        const data = res.data || {};
+        const hasExperienceCoupon = Number(data.hasExperienceCoupon || 0);
+        const showPopup = Number(data.showPopup || 0);
+        if (!hasExperienceCoupon) {
+          return;
+        }
+        if (!showPopup) {
+          return;
+        }
+        this.stopExperienceCouponPolling();
+        this.experienceCouponId = data.couponId || null;
+        this.showExperienceCouponPopup = true;
+      } catch (e) {
+      }
+    },
     /**
      * 格式化日期
      * @param {string} dateStr - 格式为 yyyy-MM-dd 的日期字符串
@@ -408,6 +471,17 @@ export default {
         }
       })
     },
+    goExperienceCoupon() {
+      this.showExperienceCouponPopup = false;
+      const couponId = this.experienceCouponId;
+      let url = '/pkg_product/views/experienceCoupon';
+      if (couponId) {
+        url += `?couponId=${couponId}`;
+      }
+      uni.navigateTo({
+        url
+      })
+    },
     // 显示电话弹窗
     showPhoneDialog(type) {
       if (!this.orderInfo.merPhone && type === 'phone') {
@@ -451,6 +525,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.close-btn{
+  width: 274rpx;
+  margin-right: 30rpx;
+  height: 52rpx;
+  opacity: 0;
+}
+.go-btn{
+  height: 52rpx;
+  margin-right: 10rpx;
+  opacity: 0;
+
+}
 .status-section,.product-section,.verify-section {
   border-radius: 20rpx;
 }
@@ -549,6 +635,37 @@ export default {
     }
   }
 
+  .experience-popup {
+    padding: 40rpx 50rpx;
+    border-radius: 20rpx;
+    background-color: #fff;
+    width: 560rpx;
+    box-sizing: border-box;
+  }
+
+  .experience-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20rpx;
+    color: #333;
+  }
+
+  .experience-content {
+    font-size: 28rpx;
+    color: #666;
+    text-align: center;
+    margin-bottom: 40rpx;
+  }
+
+  .experience-actions {
+    position: absolute;
+    bottom: 60rpx;
+    width: 100%;
+    justify-content: center;
+    display: flex;
+  }
+
   .contact-section,
   .order-section {
     background-color: #fff;