Feat:体验订单样式优化

api/product.js

@@ -180,3 +180,7 @@ export function createExperienceCouponOrder(data) {
 export function getExperienceCouponOrderDetail(orderId) {
     return request.get(`/experienceCoupon/order/detail/${orderId}`, {}, {login: true})
 }
+
+export function checkExperienceCoupon(params) {
+    return request.get('/experienceCoupon/check', params, {login: true})
+}

pkg_product/views/experienceCoupon.vue

@@ -22,7 +22,9 @@ export default {
         { id: 'all', name: '全部体验' }
       ],
       activeCategoryId: 'all',
-      experienceList: []
+      experienceList: [],
+      userLatitude: null,
+      userLongitude: null
     }
   },
   computed: {
@@ -56,10 +58,51 @@ export default {
       return value
     },
     initPage() {
+      this.getUserLocation()
       this.fetchExperienceCoupon()
       this.fetchCouponList()
       this.fetchCategoryList()
     },
+    getUserLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          this.userLatitude = res.latitude
+          this.userLongitude = res.longitude
+          this.updateDistances()
+        },
+        fail: (err) => {
+          console.error('获取位置失败', err)
+        }
+      })
+    },
+    updateDistances() {
+      if (!this.experienceList.length || !this.userLatitude || !this.userLongitude) {
+        return
+      }
+      this.experienceList = this.experienceList.map(item => {
+        if (item.latitude && item.longitude) {
+          return {
+            ...item,
+            distance: this.calculateDistance(this.userLatitude, this.userLongitude, item.latitude, item.longitude)
+          }
+        }
+        return item
+      })
+    },
+    calculateDistance(lat1, lon1, lat2, lon2) {
+      if (!lat1 || !lon1 || !lat2 || !lon2) return ''
+      const R = 6371 // 地球半径 km
+      const dLat = (lat2 - lat1) * Math.PI / 180
+      const dLon = (lon2 - lon1) * Math.PI / 180
+      const a =
+        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+        Math.sin(dLon / 2) * Math.sin(dLon / 2)
+      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+      const d = R * c
+      return d.toFixed(1) + 'km'
+    },
     setActiveCoupon(coupon) {
       if (!coupon) {
         return
@@ -130,17 +173,28 @@ export default {
       }
       getExperienceCouponItems(params).then(({ data }) => {
         const list = data || []
-        this.experienceList = list.map(item => ({
+        this.experienceList = list.map(item => {
-          id: item.id != null ? item.id : (item.projectId != null ? item.projectId : item.merId),
+          const lat = Number(item.latitude || 0)
-          title: item.name || '',
+          const lon = Number(item.longitude || 0)
-          subTitle: item.projectName || item.intro || '',
+          let distance = ''
-          distance: item.cityName && item.areaName ? `${item.cityName}${item.areaName}` : '',
+          if (this.userLatitude && this.userLongitude && lat && lon) {
-          businessTime: item.serviceTime && item.serviceEndTime ? `${item.serviceTime}-${item.serviceEndTime}` : (item.serviceTime || ''),
+            distance = this.calculateDistance(this.userLatitude, this.userLongitude, lat, lon)
-          tags: item.intro || '',
+          }
-          categoryId: this.activeCategoryId === 'all' ? 'all' : this.activeCategoryId,
+
-          image: item.image || item.cover || '',
+          return {
-          selected: false
+            id: item.id != null ? item.id : (item.projectId != null ? item.projectId : item.merId),
-        }))
+            title: item.name || '',
+            subTitle: item.projectName || item.intro || '',
+            distance,
+            latitude: lat,
+            longitude: lon,
+            businessTime: item.serviceTime && item.serviceEndTime ? `${item.serviceTime}-${item.serviceEndTime}` : (item.serviceTime || ''),
+            tags: item.intro || '',
+            categoryId: this.activeCategoryId === 'all' ? 'all' : this.activeCategoryId,
+            image: item.image || item.cover || '',
+            selected: false
+          }
+        })
       }).catch(() => {
         this.experienceList = []
       })
@@ -236,21 +290,26 @@ export default {
         mode="aspectFill"
       />
       <view class="header-mask" />
+      <view class="header-blur-transition" />
       <view class="header-content">
-        <view
+        <scroll-view
           v-if="couponList.length > 1"
-          class="coupon-tabs"
+          scroll-x
+          class="coupon-tabs-scroll"
+          :show-scrollbar="false"
         >
-          <view
+          <view class="coupon-tabs">
-            v-for="(coupon, index) in couponList"
+            <view
-            :key="coupon.id"
+              v-for="(coupon, index) in couponList"
-            class="header-tag-main"
+              :key="coupon.id"
-            :class="{ active: activeCouponId === coupon.id }"
+              class="header-tag-main"
-            @click="changeCoupon(coupon)"
+              :class="{ active: activeCouponId === coupon.id }"
-          >
+              @click="changeCoupon(coupon)"
-            体验券{{ index + 1}}
+            >
+              体验券{{ index + 1}}
+            </view>
           </view>
-        </view>
+        </scroll-view>
         <view class="header-main">
           
           <view class="line-info flex ai-center">
@@ -258,7 +317,7 @@ export default {
           </view>
           <view class="line-status flex ai-center">
             <view class="status-pill flex ai-center">
-              <view class="icon-check" />
+              <u-icon name="checkmark-circle" color="#fff" size="14" style="margin-left: 6rpx;" />
               <text class="status-text">已选清单</text>
               <view class="count-badge">{{ selectedCount }}/{{ totalCount }}</view>
             </view>
@@ -320,14 +379,16 @@ export default {
             <view class="card-title">
               {{ item.title }}
             </view>
-            <view class="card-subtitle more-t">
+            <view class="info-row flex jc-between ai-center">
-              {{ item.subTitle }}
+              <view class="card-subtitle more-t">
-            </view>
+                {{ item.subTitle }}
-            <view class="card-meta">
+              </view>
-              <view class="meta-distance">
+              <view class="meta-distance" v-if="item.distance">
-                <view class="icon-location" />
+                <u-icon name="map" color="#999" size="14" style="margin-right: 4rpx;" />
                 <text>距该地{{ item.distance }}</text>
               </view>
+            </view>
+            <view class="card-meta">
               <text class="meta-time">营业时间：{{ item.businessTime }}</text>
             </view>
             <view class="card-footer flex jc-center ai-center">
@@ -336,15 +397,17 @@ export default {
                 :class="{ selected: item.selected }"
                 @click.stop="toggleSelect(item)"
               >
-                {{ item.selected ? '取消选择' : '立即选择' }}
+                {{ item.selected ? '取消选择' : '选择' }}
-                <view v-if="item.selected" class="icon-check-circle" />
+                <view v-if="item.selected" class="check-icon-wrapper">
+                  <u-icon name="checkmark" color="#C52733" size="14" bold />
+                </view>
               </view>
             </view>
           </view>
         </view>
       </view>
     </view>
-    <view class="bottom-bar">
+    <view class="bottom-bar" v-if="selectedCount > 0">
       <view
         v-if="remainCount > 0"
         class="bottom-group flex jc-between ai-center"
@@ -407,12 +470,10 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  height: 120rpx;
+  height: 200rpx; /* 增加过渡高度让渐变更平缓 */
-  background: linear-gradient(to bottom, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.8) 60%, #f5f5f5 100%);
+  background: linear-gradient(to bottom, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.4) 40%, rgba(245, 245, 245, 0.8) 70%, #f5f5f5 100%);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  z-index: 2;
   pointer-events: none;
+  z-index: 2;
 }
 .header-content {
   position: absolute;
@@ -421,6 +482,7 @@ export default {
   top: 0;
   bottom: 0;
   padding: 32rpx;
+  padding-bottom: 120rpx; /* 为下方内容上移留出空间 */
   box-sizing: border-box;
   color: #fff;
   display: flex;
@@ -436,6 +498,7 @@ export default {
   color: #333;
   font-size: 28rpx;
   border-radius: 40rpx;
+  flex-shrink: 0;
 }
 .header-tag-main.active {
   background: #C52733;
@@ -445,11 +508,16 @@ export default {
 .header-main {
   margin-bottom: 20rpx;
 }
+.coupon-tabs-scroll {
+  width: 100%;
+  white-space: nowrap;
+  margin-bottom: 20rpx;
+}
 .coupon-tabs {
   display: flex;
-  flex-wrap: wrap;
   gap: 16rpx;
-  margin-bottom: 20rpx;
+  padding-right: 24rpx;
+  flex-wrap: nowrap;
 }
 .coupon-tab-item {
   padding: 8rpx 24rpx;
@@ -547,7 +615,7 @@ export default {
 
 .content {
   padding: 0 24rpx;
-  margin-top: -20rpx;
+  margin-top: -120rpx; /* 将下方内容整体上移，覆盖在渐变区域上 */
   position: relative;
   z-index: 4;
 }
@@ -606,17 +674,23 @@ export default {
 .card-subtitle {
   font-size: 22rpx;
   color: #999;
+  flex: 1;
+  min-width: 0;
+  margin-right: 16rpx;
+}
+.info-row {
   margin-bottom: 8rpx;
 }
 .card-meta {
   font-size: 22rpx;
-  color: #666;
   margin-bottom: 16rpx;
 }
 .meta-distance {
   display: flex;
   align-items: center;
-  margin-bottom: 4rpx;
+  color: #999;
+  flex-shrink: 0;
+  font-size: 22rpx;
 }
 .icon-location {
   width: 20rpx;
@@ -639,6 +713,8 @@ export default {
 }
 .meta-time {
   display: block;
+  color: #333;
+  font-weight: 500;
 }
 .card-footer {
   margin-top: 12rpx;
@@ -648,36 +724,34 @@ export default {
   height: 64rpx;
   border-radius: 32rpx;
   font-size: 26rpx;
-  color: #C52733;
   border: 1rpx solid #C52733;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
-  &.selected {
+  position: relative;
-    background: #C52733;
+  background: #C52733;
-    color: #fff;
+  color: #fff;
-  }
 }
-.icon-check-circle {
+.check-icon-wrapper {
-  width: 24rpx;
+  position: absolute;
-  height: 24rpx;
+  right: -8rpx;
+  top: -8rpx;
   background: #fff;
   border-radius: 50%;
-  margin-left: 8rpx;
+  width: 28rpx;
-  position: relative;
+  height: 28rpx;
-}
+  display: flex;
-.icon-check-circle::after {
+  align-items: center;
-  content: '';
+  justify-content: center;
-  position: absolute;
+  z-index: 1;
-  left: 7rpx;
+  /* 缺口在图标的左下角方向 (225deg左右设为透明) */
-  top: 5rpx;
+  background: linear-gradient(#fff, #fff) padding-box,
-  width: 8rpx;
+              conic-gradient(from 225deg, transparent 0deg 90deg, #C52733 90deg 360deg) border-box;
-  height: 4rpx;
+  border: 2rpx solid transparent;
-  border-left: 2rpx solid #C52733;
+  box-shadow: 0 0 0 2rpx #fff; /* 外层白边 */
-  border-bottom: 2rpx solid #C52733;
-  transform: rotate(-45deg);
 }
+/* 移除之前的伪元素遮挡方案 */
 
 .bottom-bar {
   position: fixed;

pkg_product/views/experienceCouponOrderDetail.vue

@@ -2,8 +2,8 @@
   <view class="coupon-order-detail">
     <view class="status-banner" :class="{ 'completed': isCompleted || isExpired }">
       <view v-if="isCompleted">
-        <view class="status-text dark-text">已完成</view>
+        <view class="status-text v12-white-text">已完成</view>
-        <view class="status-subtext">期待再次光临</view>
+        <view class="status-subtext v12-white-text">期待再次光临</view>
       </view>
       <view v-else-if="isExpired">
         <view class="status-text dark-text">已过期</view>
@@ -39,10 +39,10 @@
       <view class="merchant-info">
         <view class="merchant-name-large">{{ orderInfo.experienceItemInfo && orderInfo.experienceItemInfo.themeName ? orderInfo.experienceItemInfo.themeName : '' }}</view>
         <view class="merchant-time one-t" v-if="formattedBusinessTime">营业时间：{{ formattedBusinessTime }}</view>
-        <view class="merchant-location-wrap">
+        <view class="merchant-location-wrap one-t">
           <image :src="webUrl + '/orderIcon/map.png'" class="location-icon" />
           <text class="distance-text" v-if="distanceText">距该地{{ distanceText }}km</text>
-          <text class="address-text one-t">{{ orderInfo.address }}</text>
+          <text class="address-text">{{ orderInfo.address }}</text>
         </view>
       </view>
       <view class="merchant-actions">
@@ -92,7 +92,7 @@
 
     <view class="bottom-bar" v-if="isCompleted || isExpired">
       <view class="home-btn" @click="goHome">
-        <image :src="webUrl + '/orderIcon/home.png'" class="home-icon" />
+        <u-icon name="home" color="#C52733" size="38rpx"  class="home-icon"></u-icon>
         <text>返回主页</text>
       </view>
     </view>
@@ -419,7 +419,6 @@ export default {
   align-items: center;
   font-size: 24rpx;
   color: #999;
-  padding-right: 160rpx;
 }
 
 .location-icon {

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;