浏览代码

```
feat(film): 添加电影模块功能并优化订单系统

- 在选择电影页面添加时间参数传递
- 引入时间格式化工具函数
- 修复电影列表点击事件处理
- 更新电影详情展示,包括上映时间和想看人数
- 重构想看按钮逻辑,跳转到电影详情页
- 优化时间选择页面的时间参数处理

- 在订单系统中添加电影订单类型支持
- 修复订单列表组件的props引用问题
- 统一CSS类名格式,将rpx单位规范化
- 修正逻辑运算符使用(|| 改为 &&)
- 添加页面滚动到顶部功能
- 清理调试用console.log语句

- 调整UI组件样式类名,统一使用负边距语法
- 修复订单详情页的状态判断逻辑
- 更新订单跟踪界面布局
```

wenjie 1 周之前
父节点
当前提交
7275e9146b

+ 1 - 0
src/subPack-film/choose-film/index.vue

@@ -87,6 +87,7 @@ function handleFilm(title: string = '保利万和学府影城', cinemaId: string
       cinemaId,
       movieId: query.value.movieId,
       title,
+      time: query.value.showDates,
     },
   })
 }

+ 21 - 15
src/subPack-film/movie/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Tabbar from '../components/tabbar.vue'
+import { filterDay, timeFormat } from '../utils'
 import { StaticUrl } from '@/config'
 
 const route = useRoute()
@@ -74,6 +75,11 @@ function loadData() {
   else if (active.value === 2) {
     reload2()
   }
+
+  uni.pageScrollTo({
+    scrollTop: 0, // 滚动目标位置(0 = 页面最顶部,核心参数)
+    duration: 0, // 滚动动画时长,单位ms(可选,默认300,设0为无动画瞬间滚动)
+  })
 }
 
 function refreshData() {
@@ -117,10 +123,9 @@ onReachBottom(() => {
 })
 
 function handleItem(index: number) {
-  console.log('handle')
-
   active.value = index
   loadData()
+  console.log('handle', state.value)
 }
 
 function handleFilm(title: string, movieId: string, cinemaId: string) {
@@ -136,12 +141,13 @@ function handleFilm(title: string, movieId: string, cinemaId: string) {
 }
 
 function handleBuy(item: Api.filmMovieList) {
-  console.log('goumai')
   router.push({ name: 'film-movie-detail', params: { id: item.id as string, movieId: item.movieId as string } })
 }
 
-function handleWant() {
-  useGlobalToast().show('敬请期待')
+function handleWant(item: Api.filmMovieList) {
+  router.push({ name: 'film-movie-detail', params: { id: item.id as string, movieId: item.movieId as string } })
+
+  // useGlobalToast().show('敬请期待')
 }
 
 onMounted(() => {
@@ -225,7 +231,10 @@ onMounted(() => {
 
     <!-- 影院 列表 -->
     <view v-else-if="active == 1" class="film-list">
-      <view v-for="(item, index) in filmList" :key="index" class="film-item" @click="handleFilm(item.name, '', item.cinemaId)">
+      <view
+        v-for="(item, index) in filmList" :key="index" class="film-item"
+        @click="handleFilm(item.name, '', item.cinemaId)"
+      >
         <view class="name-box">
           <view class="name w-450rpx overflow-hidden text-ellipsis whitespace-nowrap">
             {{ item.name }}
@@ -272,22 +281,19 @@ onMounted(() => {
           <view class="num-box">
             <view class="score-box">
               <view class="label">
-                评分
+                想看:
               </view>
               <view class="score">
-                {{ item.score }}
+                {{ item.wish }}人
               </view>
             </view>
-            <view class="num">
+            <!-- <view class="num">
               {{ item.wish }}人想看
-            </view>
+            </view> -->
           </view>
           <view class="type-box">
             <view class="type">
-              {{ item.category }} |
-            </view>
-            <view class="time">
-              {{ item.duration }}分钟
+              上映时间: {{ `${timeFormat(item.releaseTime, 'MM-dd')} (${filterDay(timeFormat(item.releaseTime, 'yyyy-MM-dd'))})` }}
             </view>
           </view>
           <view class="director">
@@ -299,7 +305,7 @@ onMounted(() => {
         </view>
         <view class="btn-box">
           <image class="img" :src="`${StaticUrl}/film-movie-icon.png`" mode="scaleToFill" />
-          <view class="btn" @click="handleWant()">
+          <view class="btn" @click="handleWant(item)">
             想看
           </view>
         </view>

+ 1 - 0
src/subPack-film/select-time/index.vue

@@ -103,6 +103,7 @@ onLoad((options) => {
   uni.setNavigationBarTitle({ title: options?.title })
   query.value.movieId = options?.movieId
   query.value.cinemaId = options?.cinemaId
+  currentTime.value = options?.time || timeFormat(new Date().getTime(), 'yyyy-MM-dd')
   getData().then(() => {
     getDate(options?.movieId || filmInfo.value.movieShows?.[0].movieId)
   })

+ 4 - 1
src/subPack-smqjh/components/film-orderList/film-orderList.vue

@@ -54,11 +54,14 @@ function handleOrder(orderNo: string) {
     },
   })
 }
+onMounted(() => {
+  console.log('mounted', props.orderList)
+})
 </script>
 
 <template>
   <view
-    v-for="(item, index) in orderList" :key="index" class="order-item block"
+    v-for="(item, index) in props.orderList" :key="index" class="order-item block"
     @click.self="handleOrder(item.orderNumber as string)"
   >
     <view class="top-box">

+ 19 - 19
src/subPack-smqjh/components/xsb-orderList/xsb-orderList.vue

@@ -64,15 +64,15 @@ function handleClick(no: string) {
 </script>
 
 <template>
-  <view v-for="item in orderList" :key="item.orderNumber" class="mt20rpx rounded-16rpx bg-white p24rpx">
+  <view v-for="item in orderList" :key="item.orderNumber" class="mt-20rpx rounded-16rpx bg-white p-24rpx">
     <view class="flex items-center justify-between">
       <view class="flex items-center">
-        <image :src="`${StaticUrl}/order-icon.png`" class="h36rpx w36rpx" />
-        <view class="ml20rpx text-32rpx font-semibold">
+        <image :src="`${StaticUrl}/order-icon.png`" class="h-36rpx w-36rpx" />
+        <view class="ml-20rpx text-32rpx font-semibold">
           {{ item.shopName }}
         </view>
       </view>
-      <view class="text-24rpx text-#FF4D3A">
+      <view class="text-24rpx text-[#FF4D3A]">
         <template v-if="item.hbOrderStatus !== props.subPackOrder?.OrderStatus.PaddingPay">
           {{ props.subPackOrder?.handleCommonOrderStatusText(item) }}
         </template>
@@ -83,7 +83,7 @@ function handleClick(no: string) {
         </template>
       </view>
     </view>
-    <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
+    <view class="my-24rpx h-2rpx w-full bg-[#F0F0F0]" />
     <view>
       <!-- <view class="mb20rpx box-border rounded-16rpx bg-#F9F9F9 p24rpx">
             <view class="flex items-center">
@@ -100,57 +100,57 @@ function handleClick(no: string) {
             </view>
           </view> -->
       <view
-        class="box-border h176rpx w-full flex items-center justify-between rounded-16rpx bg-#F9F9F9"
+        class="box-border h-176rpx w-full flex items-center justify-between rounded-16rpx bg-[#F9F9F9]"
         @click="handleClick(item.orderNumber as string)"
       >
-        <view class="box-border h-full w480rpx py28rpx pl20rpx">
+        <view class="box-border h-full w-480rpx py-28rpx pl-20rpx">
           <scroll-view scroll-x class="h-full w-full whitespace-nowrap">
             <view class="flex items-center">
-              <view v-for="goods in item.orderItemList" :key="goods.skuId" class="mr50rpx">
-                <image :src="goods.pic" class="h120rpx w120rpx" />
+              <view v-for="goods in item.orderItemList" :key="goods.skuId" class="mr-50rpx">
+                <image :src="goods.pic" class="h-120rpx w-120rpx" />
               </view>
             </view>
           </scroll-view>
         </view>
-        <view class="box-shadow box-border h-full flex-1 flex-shrink-0 px14rpx py40rpx">
-          <view class="text-center text-32rpx text-#FF4D3A font-semibold">
+        <view class="box-shadow box-border h-full flex-1 flex-shrink-0 px-14rpx py-40rpx">
+          <view class="text-center text-32rpx text-[#FF4D3A] font-semibold">
             ¥{{ item.actualTotal }}
           </view>
-          <view class="text-center text-28rpx text-#AAAAAA">
+          <view class="text-center text-28rpx text-[#AAAAAA]">
             共{{ item.goodsTotal }}件
           </view>
         </view>
       </view>
     </view>
-    <view class="my24rpx flex items-center justify-end">
+    <view class="my-24rpx flex items-center justify-end">
       <template v-if="item.hbOrderStatus === resolveModule(props.subPackOrder)?.OrderStatus.PaddingPay">
-        <view class="mr20rpx">
+        <view class="mr-20rpx">
           <wd-button size="small" plain type="info" @click.stop="handleCancel(item)">
             取消订单
           </wd-button>
         </view>
-        <view class="mr20rpx">
+        <view class="mr-20rpx">
           <wd-button size="small" plain type="error" @click.stop="handlePay(item.orderNumber as string)">
             付款
           </wd-button>
         </view>
       </template>
       <template v-if="[resolveModule(props.subPackOrder)?.OrderStatus.OrderCancel, resolveModule(props.subPackOrder)?.OrderStatus.OrderCompleted].includes(item.hbOrderStatus) ">
-        <view class="mr20rpx">
+        <view class="mr-20rpx">
           <wd-button size="small" plain type="info" @click.stop="handleDel(item)">
             删除订单
           </wd-button>
         </view>
       </template>
       <template v-if="item.hbOrderStatus === resolveModule(props.subPackOrder)?.OrderStatus.OrderArrived">
-        <view class="mr20rpx">
+        <view class="mr-20rpx">
           <wd-button size="small" plain type="info" @click.stop="handleSubmit(item)">
             确认收货
           </wd-button>
         </view>
       </template>
-      <template v-if="item.refundStatus != 2 || [resolveModule(props.subPackOrder)?.OrderStatus.OrderCompleted, resolveModule(props.subPackOrder)?.OrderStatus.OrderWaitDelivery, resolveModule(props.subPackOrder)?.OrderStatus.OrderAccepted].includes(item.hbOrderStatus) ">
-        <view class="mr20rpx">
+      <template v-if="item.refundStatus != 2 && [resolveModule(props.subPackOrder)?.OrderStatus.OrderCompleted, resolveModule(props.subPackOrder)?.OrderStatus.OrderWaitDelivery, resolveModule(props.subPackOrder)?.OrderStatus.OrderAccepted].includes(item.hbOrderStatus) ">
+        <view class="mr-20rpx">
           <wd-button size="small" plain type="info" @click.stop="() => _emit('after-sale', item)">
             申请售后
           </wd-button>

+ 4 - 0
src/subPack-smqjh/order/index.vue

@@ -48,6 +48,7 @@ function createFilteredList(businessType: string) {
 
 const xsbOrderList = createFilteredList('XSB')
 const chargeOrderList = createFilteredList('CD')
+const filmOrderList = createFilteredList('DYY')
 
 const currentOrderList = computed(() => {
   if (navActiveTab.value === 'all') {
@@ -59,6 +60,9 @@ const currentOrderList = computed(() => {
   else if (navActiveTab.value === 'CD') {
     return chargeOrderList.value
   }
+  else if (navActiveTab.value === 'DYY') {
+    return filmOrderList.value
+  }
   return []
 })
 

+ 1 - 1
src/subPack-xsb/order/index.vue

@@ -199,7 +199,7 @@ async function handleAfterSale(item: Api.xsbOrderList) {
               </wd-button>
             </view>
           </template>
-          <template v-if="item.refundStatus != 2 || [OrderStatus.OrderCompleted, OrderStatus.OrderWaitDelivery, OrderStatus.OrderAccepted].includes(item.hbOrderStatus) ">
+          <template v-if="item.refundStatus != 2 && [OrderStatus.OrderCompleted, OrderStatus.OrderWaitDelivery, OrderStatus.OrderAccepted].includes(item.hbOrderStatus) ">
             <view class="mr-20rpx">
               <wd-button size="small" plain type="info" @click.stop="handleAfterSale(item)">
                 申请售后

+ 68 - 68
src/subPack-xsb/orderDetaile/index.vue

@@ -287,8 +287,8 @@ async function handleReceive() {
       />
     </view>
 
-    <view class="relative z-90 box-border bg-#f6f6f6 px24rpx">
-      <view class="pt20rpx">
+    <view class="relative z-90 box-border bg-[#f6f6f6] px-24rpx">
+      <view class="pt-20rpx">
         <view class="text-36rpx font-semibold">
           <view v-if="orderInfo.hbOrderStatus === OrderStatus.PaddingPay">
             <view class="flex items-center">
@@ -303,16 +303,16 @@ async function handleReceive() {
               </wd-count-down>
               内支付
             </view>
-            <view class="mt20rpx text-28rpx text-#AAAAAA">
+            <view class="mt-20rpx text-28rpx text-[#AAAAAA]">
               现在支付:预计10:40-10:55送达
             </view>
-            <view class="btn mt20rpx flex items-center justify-between">
-              <view class="info-btn mr20rpx w226rpx">
+            <view class="btn mt-20rpx flex items-center justify-between">
+              <view class="info-btn mr-20rpx w-226rpx">
                 <wd-button type="info" @click="handleCancel">
                   取消订单
                 </wd-button>
               </view>
-              <view class="ml20rpx flex-1">
+              <view class="ml-20rpx flex-1">
                 <wd-button @click="handlePay">
                   立即支付¥{{ orderInfo.actualTotal }}
                 </wd-button>
@@ -323,52 +323,52 @@ async function handleReceive() {
             v-if="orderInfo.hbOrderStatus !== OrderStatus.PaddingPay" class="flex items-center"
             @click="handleCollapse"
           >
-            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderAccepted" class="mr10rpx">
+            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderAccepted" class="mr-10rpx">
               商家拣货中
             </view>
-            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderWaitDelivery" class="mr10rpx">
+            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderWaitDelivery" class="mr-10rpx">
               订单待配送
             </view>
-            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderDelivering" class="mr10rpx">
+            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderDelivering" class="mr-10rpx">
               订单配送中
             </view>
-            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancelAudit" class="mr10rpx">
+            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancelAudit" class="mr-10rpx">
               订单取消审核
             </view>
-            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancel" class="mr10rpx">
+            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancel" class="mr-10rpx">
               订单取消
             </view>
-            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderArrived" class="mr10rpx">
+            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderArrived" class="mr-10rpx">
               订单已送达
             </view>
-            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCompleted" class="mr10rpx">
+            <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCompleted" class="mr-10rpx">
               订单已完成
             </view>
             <view :class="[collapse ? 'rotate-90' : '']">
               <wd-icon name="arrow-right" size="22px" />
             </view>
           </view>
-          <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancel" class="mt20rpx text-28rpx text-#AAAAAA">
+          <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancel" class="mt-20rpx text-28rpx text-[#AAAAAA]">
             取消原因:{{ orderInfo.cancelReason }}
           </view>
         </view>
       </view>
-      <view class="mt20rpx rounded-16rpx bg-white p24rpx">
-        <view v-if="orderInfo.dvyFlowId" class="mb24rpx text-24rpx">
-          <view class="mb20rpx">
+      <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
+        <view v-if="orderInfo.dvyFlowId" class="mb-24rpx text-24rpx">
+          <view class="mb-20rpx">
             {{ orderInfo.dvyName }}
           </view>
           <view class="text-48rpx font-semibold">
             {{ orderInfo.dvyFlowId }}
           </view>
         </view>
-        <view class="grid grid-cols-5 text-28rpx text-#222">
+        <view class="grid grid-cols-5 text-28rpx text-[#222]">
           <view
             v-if="orderInfo.hbOrderStatus === OrderStatus.OrderArrived" class="flex flex-col items-center"
             @click="handleReceive"
           >
-            <image :src="`${StaticUrl}/orderDetaile-submit-order.png`" class="h40rpx w40rpx" />
-            <view class="mt40rpx">
+            <image :src="`${StaticUrl}/orderDetaile-submit-order.png`" class="h-40rpx w-40rpx" />
+            <view class="mt-40rpx">
               确认收货
             </view>
           </view>
@@ -376,25 +376,25 @@ async function handleReceive() {
             v-if="[OrderStatus.OrderCancel, OrderStatus.OrderCompleted].includes(Number(orderInfo.hbOrderStatus))"
             class="flex flex-col items-center" @click="handelDel"
           >
-            <image :src="`${StaticUrl}/orderDetaile-del.png`" class="h40rpx w40rpx" />
-            <view class="mt40rpx">
+            <image :src="`${StaticUrl}/orderDetaile-del.png`" class="h-40rpx w-40rpx" />
+            <view class="mt-40rpx">
               删除订单
             </view>
           </view>
           <view class="contact relative flex flex-col items-center">
-            <image :src="`${StaticUrl}/orderDetaile-wx.png`" class="h40rpx w40rpx" />
+            <image :src="`${StaticUrl}/orderDetaile-wx.png`" class="h-40rpx w-40rpx" />
             <Zcontact>
-              <view class="mt40rpx text-28rpx">
+              <view class="mt-40rpx text-28rpx">
                 联系商家
               </view>
             </Zcontact>
           </view>
           <view
-            v-if="orderInfo.refundStatus != 2 || [OrderStatus.OrderCompleted, OrderStatus.OrderWaitDelivery, OrderStatus.OrderAccepted].includes(orderInfo.hbOrderStatus)"
+            v-if="orderInfo.refundStatus != 2 && [OrderStatus.OrderCompleted, OrderStatus.OrderWaitDelivery, OrderStatus.OrderAccepted].includes(orderInfo.hbOrderStatus)"
             class="flex flex-col items-center" @click="handleAfterSale"
           >
-            <image :src="`${StaticUrl}/orderDetaile-shou.png`" class="h40rpx w40rpx" />
-            <view class="mt40rpx">
+            <image :src="`${StaticUrl}/orderDetaile-shou.png`" class="h-40rpx w-40rpx" />
+            <view class="mt-40rpx">
               申请售后
             </view>
           </view>
@@ -419,137 +419,137 @@ async function handleReceive() {
         </view> -->
         </view>
       </view>
-      <view class="mt20rpx rounded-16rpx bg-white p24rpx">
+      <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
         <view class="flex items-center">
-          <image :src="`${StaticUrl}/orderDetaile-user.png`" class="mr20rpx h40rpx w40rpx" />
-          <view class="text-32rpx text-#222 font-semibold">
+          <image :src="`${StaticUrl}/orderDetaile-user.png`" class="mr-20rpx h-40rpx w-40rpx" />
+          <view class="text-32rpx text-[#222] font-semibold">
             {{ orderInfo?.consigneeName }} {{ orderInfo?.consigneeMobile }}
           </view>
         </view>
-        <view class="mt20rpx text-28rpx text-#AAAAAA">
+        <view class="mt-20rpx text-28rpx text-[#AAAAAA]">
           {{ orderInfo?.consigneeAddress }}
         </view>
       </view>
-      <view class="mt20rpx rounded-16rpx bg-white p24rpx">
+      <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
         <view class="flex items-center">
-          <image :src="`${StaticUrl}/order-icon.png`" class="h36rpx w36rpx" />
-          <view class="ml20rpx text-32rpx font-semibold">
+          <image :src="`${StaticUrl}/order-icon.png`" class="h-36rpx w-36rpx" />
+          <view class="ml-20rpx text-32rpx font-semibold">
             {{ orderInfo?.shopName }}
           </view>
         </view>
-        <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
+        <view class="my-24rpx h-2rpx w-full bg-[#F0F0F0]" />
         <CollapsePanel :line-height="150">
-          <view v-for="item in orderInfo?.orderItemList" :key="item.skuId" class="mb20rpx w-full flex items-center">
-            <view class="mr20rpx w120rpx flex-shrink-0">
-              <image :src="item.pic" class="h120rpx w120rpx" />
+          <view v-for="item in orderInfo?.orderItemList" :key="item.skuId" class="mb-20rpx w-full flex items-center">
+            <view class="mr-20rpx w-120rpx flex-shrink-0">
+              <image :src="item.pic" class="h-120rpx w-120rpx" />
             </view>
             <view class="flex-1">
               <view class="w-full flex items-center justify-between font-semibold">
                 <view class="text-28rpx">
                   {{ item.skuName }}
                 </view>
-                <view class="text-32rpx text-#FF4D3A">
+                <view class="text-32rpx text-[#FF4D3A]">
                   ¥{{ item.price }}
                 </view>
               </view>
-              <view class="text-24rpx text-#AAAAAA">
+              <view class="text-24rpx text-[#AAAAAA]">
                 规格:{{ item.spec }}
               </view>
-              <view class="text-24rpx text-#AAAAAA">
+              <view class="text-24rpx text-[#AAAAAA]">
                 ×{{ item.prodCount }}
               </view>
             </view>
           </view>
         </CollapsePanel>
 
-        <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
-        <view class="mt24rpx flex items-center justify-between">
+        <view class="mt-24rpx h-2rpx w-full bg-[#F0F0F0]" />
+        <view class="mt-24rpx flex items-center justify-between">
           <view class="text-28rpx">
             商品金额
           </view>
-          <view class="text-#FF4A39 font-semibold">
+          <view class="text-[#FF4A39] font-semibold">
             ¥{{ orderInfo?.total }}
           </view>
         </view>
-        <view class="mt24rpx flex items-center justify-between">
+        <view class="mt-24rpx flex items-center justify-between">
           <view v-if="orderInfo.dvyType == 3">
             配送费(即时配送)
           </view>
           <view v-if="orderInfo.dvyType == 1">
             快递
           </view>
-          <view class="text-#FF4A39 font-semibold">
+          <view class="text-[#FF4A39] font-semibold">
             ¥{{ orderInfo?.freightAmount }}
           </view>
         </view>
-        <view class="mt24rpx flex items-center justify-between">
+        <view class="mt-24rpx flex items-center justify-between">
           <view class="text-28rpx">
             积分
           </view>
-          <view class="text-#FF4A39 font-semibold">
+          <view class="text-[#FF4A39] font-semibold">
             -¥{{ Number(orderInfo?.offsetPoints) / 100 }}
           </view>
         </view>
-        <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
+        <view class="my-24rpx h-2rpx w-full bg-[#F0F0F0]" />
         <view class="flex items-center justify-end">
           <view class="text-28rpx">
             总计{{ orderInfo.orderMoney }} 共减 {{ Number(orderInfo.offsetPoints) / 100 }}
           </view>
-          <view class="ml20rpx text-28rpx text-#FF4D3A font-semibold">
+          <view class="ml-20rpx text-28rpx text-[#FF4D3A] font-semibold">
             {{ [OrderStatus.PaddingPay, OrderStatus.OrderCancel].includes(Number(orderInfo.hbOrderStatus)) ? '需' : '实'
             }}付款¥{{
               orderInfo.actualTotal }}
           </view>
         </view>
       </view>
-      <view class="mt20rpx rounded-16rpx bg-white p24rpx">
-        <view class="mb24rpx text-28rpx font-semibold">
+      <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
+        <view class="mb-24rpx text-28rpx font-semibold">
           订单信息
         </view>
-        <view class="pb20rpx">
-          <view class="mb28rpx flex items-center justify-between">
-            <view class="text-28rpx text-#AAAAAA">
+        <view class="pb-20rpx">
+          <view class="mb-28rpx flex items-center justify-between">
+            <view class="text-28rpx text-[#AAAAAA]">
               订单编号
             </view>
             <view class="flex items-center">
-              <text class="text-#222">
+              <text class="text-[#222]">
                 {{ orderInfo?.orderNumber }}
               </text>
-              <view class="ml10rpx" @click="handleCopy">
+              <view class="ml-10rpx" @click="handleCopy">
                 <wd-icon name="file-copy" size="22px" />
               </view>
             </view>
           </view>
-          <view class="mb28rpx flex items-center justify-between">
-            <view class="text-28rpx text-#AAAAAA">
+          <view class="mb-28rpx flex items-center justify-between">
+            <view class="text-28rpx text-[#AAAAAA]">
               支付方式
             </view>
-            <view class="text-#222">
+            <view class="text-[#222]">
               微信支付
             </view>
           </view>
-          <view class="mb28rpx flex items-center justify-between">
-            <view class="text-28rpx text-#AAAAAA">
+          <view class="mb-28rpx flex items-center justify-between">
+            <view class="text-28rpx text-[#AAAAAA]">
               下单时间
             </view>
-            <view class="text-#222">
+            <view class="text-[#222]">
               {{ orderInfo?.createTime }}
             </view>
           </view>
-          <view class="mb28rpx flex items-center justify-between">
-            <view class="text-28rpx text-#AAAAAA">
+          <view class="mb-28rpx flex items-center justify-between">
+            <view class="text-28rpx text-[#AAAAAA]">
               备注信息
             </view>
-            <view class="text-#222">
+            <view class="text-[#222]">
               {{ orderInfo?.remarks || '无' }}
             </view>
           </view>
         </view>
       </view>
-      <view class="h80rpx" />
+      <view class="h-80rpx" />
     </view>
     <Zpopup v-model="showNode" :showfooter="false">
-      <view class="p24rpx">
+      <view class="p-24rpx">
         <view class="text-center text-32rpx font-semibold">
           订单追踪
         </view>