Feat：体验项目订单流程对接

api/product.js

@@ -164,3 +164,19 @@ export function getShareImg(id) {
 export function getLatestExperienceCoupon() {
     return request.get('/experienceCoupon/latest', {}, {login: true})
 }
+
+export function getExperienceCouponList() {
+    return request.get('/experienceCoupon/list', {}, {login: true})
+}
+
+export function getExperienceCouponItems(params) {
+    return request.get('/experienceCoupon/items', params, {login: true})
+}
+
+export function createExperienceCouponOrder(data) {
+    return request.post('/experienceCoupon/order/create', data, {login: true})
+}
+
+export function getExperienceCouponOrderDetail(orderId) {
+    return request.get(`/experienceCoupon/order/detail/${orderId}`, {}, {login: true})
+}

assets/css/base.less

@@ -296,3 +296,7 @@ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
   font-size: 28rpx;
   color: #C2C5CC;
 }
+
+.bg-color-hui {
+  background-color: #999 !important;
+}

pages.json

@@ -744,6 +744,13 @@
             "navigationBarBackgroundColor": "#FFFFFF"
           }
         },
+        {
+          "path": "views/experienceCouponOrderDetail",
+          "style": {
+            "navigationBarTitleText": "订单核销",
+            "navigationBarBackgroundColor": "#FFFFFF"
+          }
+        },
         {
           "path": "views/experienceProjectDetail",
           

pages/order/MyOrder/index.vue

@@ -51,7 +51,24 @@
         class="item"
       >
         <view
-          v-if="order.merName"
+          v-if="order.experienceOrderInfo"
+          class="shop-info flex jc-between ai-center"
+          @click.stop="goStore(order)"
+        >
+          <view class="flex ai-center">
+            <image
+              :src="webUrl+'/orderIcon/shop.png'"
+              style="width: 32rpx;height: 32rpx"
+            />
+            <text class="name v12-font-weight-400 v12-dark-text v12-font-24">{{ order.merName || order.storeName }}</text>
+            <image
+              :src="webUrl+'/orderIcon/arrow.png'"
+              style="width: 24rpx;height: 24rpx; margin-top: 5rpx"
+            />
+          </view>
+        </view>
+        <view
+          v-if="order.merName && !order.experienceOrderInfo"
           class="shop-info flex jc-between ai-center"
           @click="goStore(order)"
         >
@@ -74,7 +91,16 @@
             <text class="address v12-dark-text v12-font-bold v12-font-24">{{ order.merCityName }}</text>
           </view>
         </view>
-        <view class="title acea-row row-between-wrapper" style="padding: 0 0 0 30rpx !important;">
+        <view v-if="order.experienceOrderInfo" class="title acea-row row-between-wrapper" style="padding: 0 0 0 30rpx !important;">
+          <view class="acea-row row-middle">
+            订单号:{{ order.orderId }}
+          </view>
+          <view
+            class="font-color-white statusTag"
+            :class="{'v12-primary': order.experienceOrderStatus === 0, 'v12-primary': order.experienceOrderStatus === 1, 'bg-color-hui': order.experienceOrderStatus === 2}"
+          >{{ ['待使用', '已完成', '已过期'][order.experienceOrderStatus] }}</view>
+        </view>
+        <view v-if="!order.experienceOrderInfo" class="title acea-row row-between-wrapper" style="padding: 0 0 0 30rpx !important;">
           <view class="acea-row row-middle">
             <text
               v-if="order.combinationId || order.seckillId || order.bargainId || order.storeId"
@@ -132,6 +158,25 @@
               </view>
             </view>
           </view>
+          <view v-else-if="order.experienceOrderInfo">
+            <view class="item-info acea-row row-between row-top">
+              <view class="pictrue">
+                <image :src="order.experienceOrderInfo.themeImage" />
+              </view>
+              <view class="text">
+                <view class="acea-row name-wrap">
+                  <view class="name more-t v12-font-bold">{{ order.experienceOrderInfo.themeName }}</view>
+                </view>
+                <view class="v12-secondary-dark-text v12-font-24" style="margin-top: 30rpx;">
+                  有效期至{{ order.experienceOrderInfo.endTime }}
+                </view>
+                <view class="v12-secondary-dark-text v12-font-24 flex ai-center" style="margin-top: 10rpx;" v-if="order.distance || order.experienceOrderInfo.distance">
+                  <image :src="webUrl+'/orderIcon/map.png'" style="width: 24rpx;height: 24rpx;margin-right: 6rpx;" />
+                  <text>距该地{{ order.distance || order.experienceOrderInfo.distance }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
           <view v-else> 
             <view
               v-for="(cart,cartInfoIndex) in order.cartInfo"
@@ -183,7 +228,7 @@
             </view>
           </view>
         </view>
-        <view class="totalPrice acea-row row-between row-middle" :style="{'padding-bottom': order.isTravelGroup === 1 ? '0rpx !important' : '30rpx'}">
+        <view v-if="!order.experienceOrderInfo" class="totalPrice acea-row row-between row-middle" :style="{'padding-bottom': order.isTravelGroup === 1 ? '0rpx !important' : '30rpx'}">
           <view v-if="order.createTime">
             <span class="orderTime v12-font-24 v12-dark1-text">{{ order.createTime }}</span>
           </view>
@@ -208,7 +253,7 @@
             入住时间: {{ order.travelGroupOrderInfo.orderStartDate }}
           </text>
         </view>
-        <view v-if="order._status && ['1'].includes(order._status._type) && order.confirmTimeout" class="v12-ml-4 v12-mb-2" >
+        <view v-if="!order.experienceOrderInfo && order._status && ['1'].includes(order._status._type) && order.confirmTimeout" class="v12-ml-4 v12-mb-2" >
           <view class="v12-primary-text v12-font-24 v12-align-center">
               等待商家确认时间，剩余
               <u-count-down format="HH:mm:ss" autoStart :time="$global.diffSSS(order.confirmTimeout)" />
@@ -216,7 +261,27 @@
             </view>
         </view>
         <view
-          v-if="!order.isGiftCardSend"
+          v-if="order.experienceOrderInfo"
+          class="bottom flex jc-end ai-center"
+        >
+          <view
+            v-if="order.experienceOrderStatus === 0 || order.experienceOrderStatus === 1"
+            class="bnt service"
+            @click.stop="goRoom(order)"
+          >联系商家</view>
+          <view
+            v-if="order.experienceOrderStatus === 0"
+            class="bnt v12-primary v12-white-text v12-primary-border v12-radius-40"
+            @click.stop="goOrderDetails(order)"
+          >去使用</view>
+          <view
+            v-if="order.experienceOrderStatus === 1 || order.experienceOrderStatus === 2"
+            class="bnt service"
+            @click.stop="delOrder(order)"
+          >删除订单</view>
+        </view>
+        <view
+          v-if="!order.isGiftCardSend && !order.experienceOrderInfo"
           class="bottom flex jc-between ai-center"
         >
           <view
@@ -352,7 +417,7 @@
             </template>
           </view>
         </view>
-        <view class="bottom" v-else>
+        <view class="bottom" v-else-if="order.isGiftCardSend">
           <view class="v12-font-24 v12-grey tips-text" >
             {{ Number(order.status) === 0 ? '待支付'  : getGiftTips(order.giftCardInfo) }}
           </view>
@@ -366,6 +431,7 @@
             <view class="v12-align-center">
               <button
                 v-if="Number(order.status) !== 0 &&
+                  order.giftCardInfo &&
                   order.giftCardInfo.giftCardStatus !== 9 &&
                   getGiftTips(order.giftCardInfo) &&
                   order.giftCardInfo.giftCardStatus !== 2 &&
@@ -674,7 +740,7 @@ export default {
       })
     },
     goStore(order) {
-      if(order.isTravelGroup === 1) {
+      if(order.isTravelGroup === 1 || order.experienceOrderInfo) {
         // uni.showToast({
         //   title: '该订单为团体订单，无法查看店铺信息！'
         // })
@@ -733,6 +799,22 @@ export default {
     },
     goRoom(order) {
       console.log(order);
+      if (order.experienceOrderInfo) {
+        const params = {
+          goodsId: order.experienceOrderInfo.id,
+          goodsName: order.experienceOrderInfo.themeName,
+          skuStr: '',
+          price: 0,
+          seckillId: 0,
+          cover: order.experienceOrderInfo.themeImage,
+          goodsData: '',
+          seckillData: ''
+        }
+        uni.navigateTo({
+          url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName || order.storeName}&params=${JSON.stringify(params)}`
+        })
+        return
+      }
       if(order.isTravelGroup === 1) {
         // 拨打商家电话
         uni.makePhoneCall({
@@ -785,6 +867,15 @@ export default {
       });
     },
     goOrderDetails(order) {
+      if (order.experienceOrderInfo) {
+        this.$yrouter.push({
+          path: "/pkg_product/views/experienceCouponOrderDetail",
+          query: {
+            orderId: order.orderId
+          }
+        });
+        return
+      }
       if(order.isTravelGroup === 1) {
         this.$yrouter.push({
           path: "/pkg_product/views/sojoumOrderDetails",

pkg_product/views/experienceCoupon.vue

@@ -1,5 +1,6 @@
 <script>
-import { getLatestExperienceCoupon } from '@/api/product'
+import dayjs from 'dayjs'
+import { getLatestExperienceCoupon, getExperienceCouponList, getExperienceCouponItems, createExperienceCouponOrder } from '@/api/product'
 import { getExperienceStoreCategoryList } from '@/api/join'
 
 export default {
@@ -10,60 +11,18 @@ export default {
       headerImage: webUrl + '/experienceCoupon/header.png',
       totalCount: 0,
       selectedCount: 0,
+      initialUsedCount: 0,
       remainNum: 0,
       startTime: '',
       endTime: '',
       expireDate: '',
+      couponList: [],
+      activeCouponId: null,
       categoryList: [
         { id: 'all', name: '全部体验' }
       ],
       activeCategoryId: 'all',
-      experienceList: [
+      experienceList: []
-        {
-          id: 1,
-          title: 'Wave Restaurant',
-          subTitle: '一种咖啡 两种体验',
-          distance: '距选地点1.8km',
-          businessTime: '09:30-02:00',
-          tags: '两种体验咖啡',
-          categoryId: 'all',
-          image: webUrl + '/experienceCoupon/experience-1.png',
-          selected: true
-        },
-        {
-          id: 2,
-          title: '老信食堂',
-          subTitle: '云南特色卤菜',
-          distance: '距选地点1.8km',
-          businessTime: '09:30-02:00',
-          tags: '云南特色美食',
-          categoryId: 'all',
-          image: webUrl + '/experienceCoupon/experience-2.png',
-          selected: true
-        },
-        {
-          id: 3,
-          title: '桃矢小馆·缘味小融合',
-          subTitle: '会员可享受氛围小店',
-          distance: '距选地点1.8km',
-          businessTime: '09:30-02:00',
-          tags: '氛围小店美食',
-          categoryId: 'all',
-          image: webUrl + '/experienceCoupon/experience-3.png',
-          selected: false
-        },
-        {
-          id: 4,
-          title: '哇猫博物馆',
-          subTitle: '非遗猫文化体验',
-          distance: '距选地点1.8km',
-          businessTime: '09:30-02:00',
-          tags: '非遗手作体验',
-          categoryId: 'all',
-          image: webUrl + '/experienceCoupon/experience-4.png',
-          selected: false
-        }
-      ]
     }
   },
   computed: {
@@ -74,33 +33,76 @@ export default {
       return this.experienceList.filter(item => item.categoryId === this.activeCategoryId)
     },
     remainCount() {
-      if (this.remainNum != null) {
+      return Math.max(this.totalCount - this.selectedCount, 0)
-        return this.remainNum
-      }
-      return this.totalCount - this.selectedCount
     }
   },
   onLoad() {
     this.initPage()
   },
   methods: {
+    formatDateByTimestamp(value) {
+      if (value == null || value === '') {
+        return ''
+      }
+      if (typeof value === 'number') {
+        const ts = value > 1000000000000 ? value : value * 1000
+        return dayjs(ts).format('YYYY-MM-DD')
+      }
+      const num = Number(value)
+      if (!Number.isNaN(num)) {
+        const ts = num > 1000000000000 ? num : num * 1000
+        return dayjs(ts).format('YYYY-MM-DD')
+      }
+      return value
+    },
     initPage() {
       this.fetchExperienceCoupon()
+      this.fetchCouponList()
       this.fetchCategoryList()
     },
+    setActiveCoupon(coupon) {
+      if (!coupon) {
+        return
+      }
+      this.activeCouponId = coupon.id
+      this.totalCount = coupon.totalNum || 0
+      const remain = coupon.remainNum != null ? coupon.remainNum : 0
+      this.remainNum = remain
+      this.initialUsedCount = Math.max(this.totalCount - remain, 0)
+      this.selectedCount = this.initialUsedCount
+      this.startTime = coupon.startTime || ''
+      this.endTime = coupon.endTime || ''
+      this.expireDate = this.endTime || this.expireDate
+      this.headerImage = coupon.experienceCouponImage || (this.webUrl + '/experienceCoupon/header.png')
+      this.fetchExperienceItems()
+    },
     fetchExperienceCoupon() {
       getLatestExperienceCoupon().then(({ data }) => {
         if (!data) {
           return
         }
-        this.totalCount = data.totalNum || 0
+        const latest = {
-        const remain = data.remainNum != null ? data.remainNum : 0
+          ...data,
-        this.remainNum = remain
+          startTime: this.formatDateByTimestamp(data.startTime),
-        this.selectedCount = Math.max(this.totalCount - remain, 0)
+          endTime: this.formatDateByTimestamp(data.endTime)
-        this.startTime = data.startTime || ''
+        }
-        this.endTime = data.endTime || ''
+        this.setActiveCoupon(latest)
-        this.expireDate = this.endTime || this.expireDate
+        if (!this.couponList.length) {
-        this.headerImage = data.experienceCouponImage || this.headerImage
+          this.couponList = [latest]
+        }
+      }).catch(() => {})
+    },
+    fetchCouponList() {
+      getExperienceCouponList().then(({ data }) => {
+        const list = (data || []).map(item => ({
+          ...item,
+          startTime: this.formatDateByTimestamp(item.startTime),
+          endTime: this.formatDateByTimestamp(item.endTime)
+        }))
+        this.couponList = list
+        if (!this.activeCouponId && list.length > 0) {
+          this.setActiveCoupon(list[0])
+        }
       }).catch(() => {})
     },
     fetchCategoryList() {
@@ -113,25 +115,42 @@ export default {
             name: item.name
           }))
         ]
-        if (list.length > 0) {
-          const ids = list.map(item => item.id)
-          if (this.experienceList[0]) {
-            this.experienceList[0].categoryId = ids[0]
-          }
-          if (this.experienceList[1]) {
-            this.experienceList[1].categoryId = ids[Math.min(1, ids.length - 1)]
-          }
-          if (this.experienceList[2]) {
-            this.experienceList[2].categoryId = ids[Math.min(2, ids.length - 1)]
-          }
-          if (this.experienceList[3]) {
-            this.experienceList[3].categoryId = ids[Math.min(3, ids.length - 1)]
-          }
-        }
       }).catch(() => {})
     },
+    fetchExperienceItems() {
+      if (!this.activeCouponId) {
+        this.experienceList = []
+        return
+      }
+      const params = {
+        couponId: this.activeCouponId
+      }
+      if (this.activeCategoryId && this.activeCategoryId !== 'all') {
+        params.experienceStoreCategoryId = this.activeCategoryId
+      }
+      getExperienceCouponItems(params).then(({ data }) => {
+        const list = data || []
+        this.experienceList = list.map(item => ({
+          id: item.id != null ? item.id : (item.projectId != null ? item.projectId : item.merId),
+          title: item.name || '',
+          subTitle: item.projectName || item.intro || '',
+          distance: item.cityName && item.areaName ? `${item.cityName}${item.areaName}` : '',
+          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 = []
+      })
+    },
+    changeCoupon(coupon) {
+      this.setActiveCoupon(coupon)
+    },
     changeCategory(id) {
       this.activeCategoryId = id
+      this.fetchExperienceItems()
     },
     toggleSelect(item) {
       if (!item.selected && this.remainCount === 0) {
@@ -142,25 +161,67 @@ export default {
         return
       }
       item.selected = !item.selected
-      this.selectedCount = this.experienceList.filter(it => it.selected).length
+      const currentSelected = this.experienceList.filter(it => it.selected).length
+      this.selectedCount = this.initialUsedCount + currentSelected
+    },
+    submitOrder() {
+      if (!this.activeCouponId) {
+        uni.showToast({
+          title: '当前无可用体验券',
+          icon: 'none'
+        })
+        return
+      }
+      const selected = this.experienceList.filter(it => it.selected)
+      if (!selected.length) {
+        uni.showToast({
+          title: '请先选择体验项目',
+          icon: 'none'
+        })
+        return
+      }
+      const projectIds = selected.map(it => it.id)
+      const data = {
+        couponId: this.activeCouponId,
+        projectIds
+      }
+      createExperienceCouponOrder(data).then((res) => {
+        if (res.success || (res.data && res.data.status === 'SUCCESS')) {
+          uni.showToast({
+            title: '下单成功',
+            icon: 'success'
+          })
+          setTimeout(() => {
+            const orderId = res.data && res.data.orderId ? res.data.orderId : (res.orderId || '')
+            if (orderId) {
+              uni.navigateTo({
+                url: `/pkg_product/views/experienceCouponOrderDetail?orderId=${orderId}`
+              })
+            } else {
+              this.initPage()
+            }
+          }, 1500)
+        } else {
+          uni.showToast({
+            title: res.msg || '下单失败，请稍后重试',
+            icon: 'none'
+          })
+        }
+      }).catch(() => {
+        uni.showToast({
+          title: '下单失败，请稍后重试',
+          icon: 'none'
+        })
+      })
     },
     handleContinueSelect() {
-      uni.showToast({
+      this.submitOrder()
-        title: '请继续选择体验券',
-        icon: 'none'
-      })
     },
     handleGoExperience() {
-      uni.showToast({
+      this.submitOrder()
-        title: '请前往体验门店使用',
-        icon: 'none'
-      })
     },
     handleConfirm() {
-      uni.showToast({
+      this.submitOrder()
-        title: '已确认体验券选择',
-        icon: 'none'
-      })
     }
   }
 }
@@ -176,47 +237,75 @@ export default {
       />
       <view class="header-mask" />
       <view class="header-content">
-        <view class="header-tag">
+        <view
-          选择您的免费体验券
+          v-if="couponList.length > 1"
+          class="coupon-tabs"
+        >
+          <view
+            v-for="(coupon, index) in couponList"
+            :key="coupon.id"
+            class="header-tag-main"
+            :class="{ active: activeCouponId === coupon.id }"
+            @click="changeCoupon(coupon)"
+          >
+            体验券{{ index + 1}}
+          </view>
         </view>
         <view class="header-main">
-          <view class="line">
+          
-            根据您的套票，您有
+          <view class="line-info flex ai-center">
-            <text class="strong">{{ totalCount }}</text>
+            根据您的套餐，您有 <view class="num-badge">{{ totalCount }}</view> 张体验券可以选择
-            张体验券可以选择
           </view>
-          <view class="line flex jc-between ai-center">
+          <view class="line-status flex ai-center">
-            <view>
+            <view class="status-pill flex ai-center">
-              已选清单
+              <view class="icon-check" />
-              <text class="strong">{{ selectedCount }}/{{ totalCount }}</text>
+              <text class="status-text">已选清单</text>
+              <view class="count-badge">{{ selectedCount }}/{{ totalCount }}</view>
+            </view>
+            <view class="date-info flex ai-center">
+              <text>请在</text>
+              <view class="date-badge">{{ expireDate }}</view>
+              <text>内选择使用</text>
             </view>
           </view>
-          <view class="line">
+          <view class="line-library flex ai-center">
-            请在
+             <image src="https://img.js.design/assets/img/6784c04289050d2f0997e096.png" class="icon-shop" mode="widthFix" />
-            <text class="strong">{{ expireDate }}</text>
+            <text class="v12-font-32">可用体验券库</text>
-            内选择使用
           </view>
         </view>
       </view>
     </view>
     <view class="content">
-      <view class="section-header flex jc-between ai-center">
+      <scroll-view scroll-x class="tabs-scroll" :show-scrollbar="false">
-        <view class="title">
+        <view class="tabs flex">
-          可用体验券库
+          <view
+            v-for="item in categoryList"
+            :key="item.id"
+            class="tab-item"
+            :class="{ active: activeCategoryId === item.id }"
+            @click="changeCategory(item.id)"
+          >
+            {{ item.name }}
+          </view>
+        </view>
+      </scroll-view>
+      <view
+        v-if="filteredList.length === 0"
+        class="empty-state"
+      >
+        <image
+          :src="webUrl + '/orderIcon/nodata.png'"
+          class="empty-image"
+          mode="widthFix"
+        />
+        <view class="empty-text">
+          暂无数据
         </view>
       </view>
-      <view class="tabs flex">
+      <view
-        <view
+        v-else
-          v-for="item in categoryList"
+        class="card-list"
-          :key="item.id"
+      >
-          class="tab-item"
-          :class="{ active: activeCategoryId === item.id }"
-          @click="changeCategory(item.id)"
-        >
-          {{ item.name }}
-        </view>
-      </view>
-      <view class="card-list">
         <view
           v-for="item in filteredList"
           :key="item.id"
@@ -225,7 +314,7 @@ export default {
           <image
             :src="item.image"
             class="card-image"
-            mode="aspectFill"
+            mode="widthFix"
           />
           <view class="card-body">
             <view class="card-title">
@@ -234,20 +323,21 @@ export default {
             <view class="card-subtitle more-t">
               {{ item.subTitle }}
             </view>
-            <view class="card-meta flex jc-between">
+            <view class="card-meta">
-              <text class="meta-distance">{{ item.distance }}</text>
+              <view class="meta-distance">
+                <view class="icon-location" />
+                <text>距该地{{ item.distance }}</text>
+              </view>
               <text class="meta-time">营业时间：{{ item.businessTime }}</text>
             </view>
-            <view class="card-footer flex jc-between ai-center">
+            <view class="card-footer flex jc-center ai-center">
-              <view class="card-tags more-t">
-                {{ item.tags }}
-              </view>
               <view
                 class="card-btn"
                 :class="{ selected: item.selected }"
                 @click.stop="toggleSelect(item)"
               >
                 {{ item.selected ? '取消选择' : '立即选择' }}
+                <view v-if="item.selected" class="icon-check-circle" />
               </view>
             </view>
           </view>
@@ -296,7 +386,7 @@ export default {
 }
 .header {
   position: relative;
-  height: 360rpx;
+  height: 500rpx;
   overflow: hidden;
 }
 .header-bg {
@@ -307,148 +397,344 @@ export default {
   position: absolute;
   left: 0;
   right: 0;
+  top: 0;
   bottom: 0;
-  height: 220rpx;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+  z-index: 1;
+}
+.header-blur-transition {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 120rpx;
+  background: linear-gradient(to bottom, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.8) 60%, #f5f5f5 100%);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  z-index: 2;
+  pointer-events: none;
 }
 .header-content {
   position: absolute;
   left: 0;
   right: 0;
+  top: 0;
   bottom: 0;
-  padding: 32rpx 32rpx 40rpx;
+  padding: 32rpx;
   box-sizing: border-box;
   color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  z-index: 3;
 }
-.header-tag {
+.header-tag-main {
-  display: inline-block;
+  align-self: flex-start;
-  padding: 6rpx 24rpx;
+  padding: 12rpx 32rpx 12rpx 24rpx;
-  margin-bottom: 16rpx;
+  background: #fff;
-  border-radius: 40rpx;
+  font-weight: bold;
-  background: #C52733;
+  color: #333;
-  font-size: 22rpx;
-}
-.header-main .line {
-  margin-top: 8rpx;
-  font-size: 24rpx;
-}
-.header-main .strong {
-  margin: 0 4rpx;
   font-size: 28rpx;
-  font-weight: 600;
-}
-.content {
-  padding: 24rpx 24rpx 0;
-}
-.section-header .title {
-  font-size: 30rpx;
-  font-weight: 600;
-}
-.tabs {
-  margin-top: 24rpx;
-  padding: 4rpx;
   border-radius: 40rpx;
-  background: #f0f0f0;
 }
-.tab-item {
+.header-tag-main.active {
-  flex: 1;
-  padding: 16rpx 0;
-  text-align: center;
-  font-size: 24rpx;
-  color: #666;
-  border-radius: 32rpx;
-}
-.tab-item.active {
   background: #C52733;
   color: #fff;
 }
+
+.header-main {
+  margin-bottom: 20rpx;
+}
+.coupon-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  margin-bottom: 20rpx;
+}
+.coupon-tab-item {
+  padding: 8rpx 24rpx;
+  border-radius: 32rpx;
+  background: rgba(255, 255, 255, 0.2);
+  border: 1rpx solid rgba(255, 255, 255, 0.4);
+  font-size: 24rpx;
+  color: #fff;
+  &.active {
+    background: #fff;
+    color: #C52733;
+    border-color: #fff;
+  }
+}
+.line-info {
+  font-size: 26rpx;
+  margin-bottom: 24rpx;
+  justify-content: flex-end;
+}
+.num-badge {
+  background: #C52733;
+  color: #fff;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  margin: 0 8rpx;
+  font-weight: bold;
+}
+.line-status {
+  justify-content: flex-end;
+  gap: 16rpx;
+  margin-bottom: 24rpx;
+}
+.status-pill {
+  background: #C52733;
+  padding: 6rpx 6rpx 6rpx 20rpx;
+  border-radius: 32rpx;
+  color: #fff;
+  font-size: 26rpx;
+}
+.status-text {
+  margin-right: 12rpx;
+}
+.icon-check {
+  width: 24rpx;
+  height: 24rpx;
+  border-radius: 50%;
+  border: 2rpx solid #fff;
+  margin-right: 8rpx;
+  position: relative;
+}
+.icon-check::after {
+  content: '';
+  position: absolute;
+  left: 6rpx;
+  top: 4rpx;
+  width: 8rpx;
+  height: 4rpx;
+  border-left: 2rpx solid #fff;
+  border-bottom: 2rpx solid #fff;
+  transform: rotate(-45deg);
+}
+.count-badge {
+  background: #fff;
+  color: #333;
+  padding: 4rpx 16rpx;
+  border-radius: 24rpx;
+  font-size: 24rpx;
+}
+.date-info {
+  font-size: 26rpx;
+  color: #fff;
+}
+.date-badge {
+  background: #C52733;
+  padding: 6rpx 16rpx;
+  border-radius: 100rpx;
+  margin: 0 8rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.line-library {
+  font-size: 28rpx;
+  font-weight: 500;
+  .icon-shop {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 8rpx;
+  }
+}
+
+.content {
+  padding: 0 24rpx;
+  margin-top: -20rpx;
+  position: relative;
+  z-index: 4;
+}
+
+.tabs-scroll {
+  width: 100%;
+  white-space: nowrap;
+  margin-bottom: 24rpx;
+}
+.tabs {
+  display: flex;
+  gap: 16rpx;
+  padding-right: 24rpx;
+}
+.tab-item {
+  padding: 12rpx 32rpx;
+  border-radius: 32rpx;
+  background: #fff;
+  color: #666;
+  font-size: 26rpx;
+  flex-shrink: 0;
+  font-style: italic;
+  font-weight: bold;
+  &.active {
+    background: #C52733;
+    color: #fff;
+  }
+}
+
 .card-list {
-  margin-top: 24rpx;
+  padding-bottom: 24rpx;
+  column-count: 2;
+  column-gap: 20rpx;
 }
 .card {
   margin-bottom: 24rpx;
   border-radius: 20rpx;
   overflow: hidden;
   background: #fff;
+  break-inside: avoid;
 }
 .card-image {
   width: 100%;
-  height: 260rpx;
+  height: auto;
+  display: block;
 }
 .card-body {
-  padding: 20rpx 24rpx 24rpx;
+  padding: 16rpx;
 }
 .card-title {
-  font-size: 30rpx;
+  font-size: 28rpx;
-  font-weight: 600;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
 }
 .card-subtitle {
-  margin-top: 8rpx;
+  font-size: 22rpx;
-  font-size: 24rpx;
+  color: #999;
-  color: #666;
+  margin-bottom: 8rpx;
 }
 .card-meta {
-  margin-top: 12rpx;
   font-size: 22rpx;
-  color: #999;
+  color: #666;
+  margin-bottom: 16rpx;
+}
+.meta-distance {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4rpx;
+}
+.icon-location {
+  width: 20rpx;
+  height: 20rpx;
+  border: 2rpx solid #666;
+  border-radius: 50%;
+  margin-right: 4rpx;
+  position: relative;
+}
+.icon-location::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 6rpx;
+  height: 6rpx;
+  background: #666;
+  border-radius: 50%;
+}
+.meta-time {
+  display: block;
 }
 .card-footer {
-  margin-top: 16rpx;
+  margin-top: 12rpx;
-}
-.card-tags {
-  flex: 1;
-  margin-right: 16rpx;
-  font-size: 22rpx;
-  color: #999;
 }
 .card-btn {
-  min-width: 160rpx;
+  width: 100%;
-  padding: 12rpx 24rpx;
+  height: 64rpx;
-  border-radius: 40rpx;
+  border-radius: 32rpx;
-  text-align: center;
+  font-size: 26rpx;
-  font-size: 24rpx;
   color: #C52733;
   border: 1rpx solid #C52733;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  &.selected {
+    background: #C52733;
+    color: #fff;
+  }
 }
-.card-btn.selected {
+.icon-check-circle {
-  background: #C52733;
+  width: 24rpx;
-  color: #fff;
+  height: 24rpx;
+  background: #fff;
+  border-radius: 50%;
+  margin-left: 8rpx;
+  position: relative;
 }
+.icon-check-circle::after {
+  content: '';
+  position: absolute;
+  left: 7rpx;
+  top: 5rpx;
+  width: 8rpx;
+  height: 4rpx;
+  border-left: 2rpx solid #C52733;
+  border-bottom: 2rpx solid #C52733;
+  transform: rotate(-45deg);
+}
+
 .bottom-bar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 16rpx 24rpx 32rpx;
+  padding: 24rpx 32rpx 48rpx;
-  box-sizing: border-box;
   background: #fff;
-  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
+  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
+  z-index: 10;
 }
 .bottom-group {
-  column-gap: 16rpx;
+  gap: 24rpx;
 }
 .btn-outline {
-  flex: 1;
+  flex: 1.2;
-  height: 80rpx;
+  height: 88rpx;
-  border-radius: 40rpx;
+  border-radius: 44rpx;
-  border: 1rpx solid #C52733;
+  border: 2rpx solid #333;
   text-align: center;
-  font-size: 26rpx;
+  font-size: 28rpx;
-  line-height: 80rpx;
+  line-height: 84rpx;
-  color: #C52733;
+  color: #333;
   background: #fff;
+  font-weight: bold;
+  font-style: italic;
 }
 .btn-primary {
   flex: 1;
-  height: 80rpx;
+  height: 88rpx;
-  border-radius: 40rpx;
+  border-radius: 44rpx;
   text-align: center;
-  font-size: 28rpx;
+  font-size: 30rpx;
-  line-height: 80rpx;
+  line-height: 88rpx;
   color: #fff;
   background: #C52733;
+  font-weight: bold;
+  font-style: italic;
 }
 .bottom-single .btn-primary {
   width: 100%;
 }
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 0;
+}
+.empty-image {
+  width: 320rpx;
+  height: 320rpx;
+}
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+  margin-top: 20rpx;
+}
 </style>

pkg_product/views/experienceCouponOrderDetail.vue

@@ -0,0 +1,558 @@
+<template>
+  <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-subtext">期待再次光临</view>
+      </view>
+      <view v-else-if="isExpired">
+        <view class="status-text dark-text">已过期</view>
+        <view class="status-subtext">很遗憾，你的体验券已过期</view>
+      </view>
+      <text v-else class="status-text">{{ statusText }}</text>
+    </view>
+
+    <view class="qrcode-card" v-if="!isCompleted && !isExpired">
+      <view class="merchant-header" v-if="orderInfo.merchantName">
+        <image :src="webUrl + '/orderIcon/shop.png'" class="shop-icon" />
+        <text class="merchant-name">{{ orderInfo.merchantName }}</text>
+        <image :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon" />
+      </view>
+      <view class="project-name v12-font-34">
+        {{ orderInfo.merchantName || '' }}
+      </view>
+      <view class="qrcode-wrap" v-if="orderInfo.code">
+        <image :src="orderInfo.code" class="qrcode-image" mode="aspectFit" />
+      </view>
+      <view class="verify-code">
+        <text class="label">核销码：</text>
+        <text class="value">{{ orderInfo.verifyCode || '-' }}</text>
+        <image :src="webUrl + '/orderIcon/copy.png'" class="copy-icon" @click="copyVerifyCode" v-if="orderInfo.verifyCode" />
+      </view>
+      <view v-if="orderInfo.startTime && orderInfo.endTime" class="valid-time">
+        有效期至{{ orderInfo.startTime }}至{{ orderInfo.endTime }}
+      </view>
+    </view>
+
+    <view class="merchant-card">
+      <image :src="orderInfo.merchantAvatar || webUrl + '/experienceCoupon/store-placeholder.png'" class="merchant-avatar" mode="aspectFill" />
+      <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">
+          <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>
+        </view>
+      </view>
+      <view class="merchant-actions">
+        <image :src="webUrl + '/orderIcon/nav.png'" class="action-icon" @click="openLocation" />
+        <image :src="webUrl + '/orderIcon/phone.png'" class="action-icon" @click="callMerchant" v-if="orderInfo.merchantPhone" />
+      </view>
+    </view>
+
+    <view class="detail-section">
+      <view class="section-title">订单详情</view>
+      <view class="info-row" v-if="isCompleted || isExpired">
+        <text class="label">名 称：</text>
+        <text class="value">{{ orderInfo.experienceItemInfo && orderInfo.experienceItemInfo.themeName ? orderInfo.experienceItemInfo.themeName : '' }}</text>
+      </view>
+      <view class="info-row">
+        <text class="label">订单号：</text>
+        <text class="value">{{ orderInfo.orderId || '' }}</text>
+      </view>
+      <view class="info-row">
+        <text class="label">订单类型：</text>
+        <text class="value">{{ orderInfo.orderTypeDesc || '免费体验券' }}</text>
+      </view>
+      <view class="info-row" v-if="isCompleted">
+        <text class="label">核销时间：</text>
+        <text class="value">{{ formatTime(orderInfo.verifyTime) || '-' }}</text>
+      </view>
+      <view class="info-row" v-if="isCompleted">
+        <text class="label">订单状态：</text>
+        <text class="value">核销完成</text>
+      </view>
+      <view class="info-row" v-if="isExpired">
+        <text class="label">到期时间：</text>
+        <text class="value">{{ orderInfo.endTime || '-' }}</text>
+      </view>
+      <view class="info-row" v-if="isExpired">
+        <text class="label">订单状态：</text>
+        <text class="value">已过期</text>
+      </view>
+    </view>
+
+    <view class="notice-section" v-if="!isCompleted && !isExpired">
+      <view class="section-title">使用须知</view>
+      <view class="rich-text-content">
+        <u-parse :content="orderInfo.experienceItemInfo && orderInfo.experienceItemInfo.useNotice ? orderInfo.experienceItemInfo.useNotice : ''"></u-parse>
+      </view>
+    </view>
+
+    <view class="bottom-bar" v-if="isCompleted || isExpired">
+      <view class="home-btn" @click="goHome">
+        <image :src="webUrl + '/orderIcon/home.png'" class="home-icon" />
+        <text>返回主页</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getExperienceCouponOrderDetail } from '@/api/product'
+
+export default {
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      orderId: '',
+      orderInfo: {},
+      userLatitude: null,
+      userLongitude: null,
+      distanceText: ''
+    }
+  },
+  computed: {
+    statusText() {
+      const status = this.orderInfo.experienceOrderStatus
+      if (status === 0) {
+        return '待使用'
+      }
+      if (status === 1) {
+        return '已完成'
+      }
+      if (status === 2) {
+        return '已过期'
+      }
+      return ''
+    },
+    isCompleted() {
+      return this.orderInfo.experienceOrderStatus === 1
+    },
+    isExpired() {
+      return this.orderInfo.experienceOrderStatus === 2
+    },
+    formattedBusinessTime() {
+      if (this.orderInfo && this.orderInfo.experienceItemInfo) {
+        const { validityStartTime, validityEndTime } = this.orderInfo.experienceItemInfo
+        if (validityStartTime && validityEndTime) {
+          return `${this.formatTimestamp(validityStartTime)}~${this.formatTimestamp(validityEndTime)}`
+        }
+      }
+      return this.orderInfo.businessTime || ''
+    }
+  },
+  onLoad(options) {
+    if (options && options.orderId) {
+      this.orderId = options.orderId
+      this.fetchDetail()
+    }
+    this.getUserLocation()
+  },
+  methods: {
+    fetchDetail() {
+      if (!this.orderId) {
+        return
+      }
+      getExperienceCouponOrderDetail(this.orderId).then(({ data }) => {
+        this.orderInfo = data || {}
+        this.updateDistance()
+      }).catch(() => {})
+    },
+    getUserLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: res => {
+          this.userLatitude = res.latitude
+          this.userLongitude = res.longitude
+          this.updateDistance()
+        }
+      })
+    },
+    formatTimestamp(timestamp) {
+      if (!timestamp) return ''
+      const date = new Date(Number(timestamp))
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+    formatTime(timestamp) {
+      if (!timestamp) return ''
+      const date = new Date(Number(timestamp))
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      return `${year}年${month}月${day}日`
+    },
+    goHome() {
+      uni.switchTab({
+        url: '/pages/tabBar/home/index'
+      })
+    },
+    updateDistance() {
+      if (
+        this.userLatitude == null ||
+        this.userLongitude == null ||
+        this.orderInfo.latitude == null ||
+        this.orderInfo.longitude == null
+      ) {
+        return
+      }
+      const lat1 = Number(this.userLatitude)
+      const lon1 = Number(this.userLongitude)
+      const lat2 = Number(this.orderInfo.latitude)
+      const lon2 = Number(this.orderInfo.longitude)
+
+      const R = 6371
+      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
+      this.distanceText = d.toFixed(1)
+    },
+    openLocation() {
+      if (this.orderInfo.latitude && this.orderInfo.longitude) {
+        uni.openLocation({
+          latitude: Number(this.orderInfo.latitude),
+          longitude: Number(this.orderInfo.longitude),
+          name: this.orderInfo.merchantName,
+          address: this.orderInfo.address
+        })
+      }
+    },
+    callMerchant() {
+      if (this.orderInfo.merchantPhone) {
+        uni.makePhoneCall({
+          phoneNumber: this.orderInfo.merchantPhone
+        })
+      }
+    },
+    copyVerifyCode() {
+      if (!this.orderInfo.verifyCode) {
+        return
+      }
+      uni.setClipboardData({
+        data: this.orderInfo.verifyCode,
+        success: () => {
+          uni.showToast({
+            title: '已复制核销码',
+            icon: 'none'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.coupon-order-detail {
+  min-height: 100vh;
+  padding: 24rpx;
+  box-sizing: border-box;
+  background: #f5f5f5;
+  padding-bottom: 120rpx;
+}
+
+.status-banner {
+  background: #C52733;
+  border-radius: 16rpx;
+  padding: 24rpx 32rpx;
+  margin-bottom: 24rpx;
+}
+
+.status-banner.completed {
+  // background: #E6EAF3;
+  padding: 32rpx;
+}
+
+.status-text {
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.status-text.dark-text {
+  color: #333;
+  font-size: 36rpx;
+  margin-bottom: 8rpx;
+}
+
+.status-subtext {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.qrcode-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 32rpx;
+  margin-bottom: 24rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.merchant-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+  align-self: flex-start;
+}
+
+.shop-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 12rpx;
+}
+
+.merchant-name {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.arrow-icon {
+  width: 24rpx;
+  height: 24rpx;
+  margin-left: 8rpx;
+}
+
+.project-name {
+  font-size: 36rpx;
+  color: #333;
+  font-weight: bold;
+  margin-bottom: 24rpx;
+  text-align: center;
+}
+
+.qrcode-wrap {
+  width: 336rpx;
+  height: 336rpx;
+  margin-bottom: 24rpx;
+  border-radius: 20px;
+  border: 1px solid #B8B8B8;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+
+.qrcode-image {
+  width: 100%;
+  height: 100%;
+}
+
+.verify-code {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.verify-code .label {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.verify-code .value {
+  font-size: 40rpx;
+  color: #333;
+  font-weight: bold;
+  margin: 0 16rpx;
+}
+
+.copy-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.valid-time {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.merchant-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 24rpx;
+  display: flex;
+  position: relative;
+}
+
+.merchant-avatar {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 12rpx;
+  margin-right: 24rpx;
+  flex-shrink: 0;
+}
+
+.merchant-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.merchant-name-large {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: bold;
+  margin-bottom: 8rpx;
+}
+
+.merchant-time {
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 8rpx;
+}
+
+.merchant-location-wrap {
+  display: flex;
+  align-items: center;
+  font-size: 24rpx;
+  color: #999;
+  padding-right: 160rpx;
+}
+
+.location-icon {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 4rpx;
+  flex-shrink: 0;
+}
+
+.distance-text {
+  margin-right: 12rpx;
+  flex-shrink: 0;
+}
+
+.address-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.merchant-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  position: absolute;
+  right: 24rpx;
+  bottom: 24rpx;
+}
+
+.action-icon {
+  width: 64rpx;
+  height: 64rpx;
+  margin-left: 16rpx;
+}
+
+.detail-section {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 24rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: bold;
+  margin-bottom: 24rpx;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 16rpx;
+}
+
+.info-row:last-child {
+  margin-bottom: 0;
+}
+
+.info-row .label {
+  font-size: 28rpx;
+  color: #666;
+  width: 160rpx;
+}
+
+.info-row .value {
+  font-size: 28rpx;
+  color: #333;
+  flex: 1;
+}
+
+.notice-section {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+}
+
+.notice-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12rpx;
+}
+
+.notice-item:last-child {
+  margin-bottom: 0;
+}
+
+.notice-item .dot {
+  color: #666;
+  margin-right: 8rpx;
+  font-size: 24rpx;
+}
+
+.notice-item .text {
+  color: #666;
+  font-size: 26rpx;
+  line-height: 1.5;
+}
+
+.rich-text-content {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.bottom-bar {
+  position: fixed;
+  bottom: 40rpx;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.home-btn {
+  width: 686rpx;
+  height: 88rpx;
+  // background: #E8EBF0;
+  border: 2rpx solid #C52733;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: #C52733;
+  font-weight: bold;
+}
+
+.home-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 12rpx;
+}
+</style>