feat(attractions): 实现景区订单详情及取消退款功能

- 新增景区订单详情相关接口定义与类型声明
- 实现订单详情页面展示，支持订单状态显示及凭证码浏览
- 支持订单取消和退款申请操作及相关弹窗交互
- 增加支付页面跳转时带入订单详情参数并支持区分已支付状态
- 优化订单状态组件，增加去支付按钮及查看订单列表功能
- 调整订单列表状态映射，支持多状态分类展示
- 更新配置和页面样式，适配自定义导航栏及样式透明度调整
- 修复备注信息和游客信息展示逻辑，动态渲染多个游客数据

src/api/api.type.d.ts

@@ -3692,4 +3692,347 @@ namespace Api {
     hbOrderStatus?: number
     [property: string]: any
   }
+  export interface ScenicOrderDetailVo {
+    /**
+     * 实际总值（用户实付）
+     */
+    actualTotal?: number
+    /**
+     * 业务类型
+     */
+    businessType?: string
+    /**
+     * 取消原因
+     */
+    cancelReason?: string
+    /**
+     * 取消退款记录列表
+     */
+    cancelRecords?: OmsScenicOrderCancel[]
+    /**
+     * 取消时间
+     */
+    cancelTime?: string
+    /**
+     * 创建时间
+     */
+    createTime?: string
+    /**
+     * 海博订单状态：0-待支付,20-已接单,30-待配送,40-配送中,50-取消待审核,60-已取消,70-已送达,80-已完成
+     */
+    hbOrderStatus?: number
+    /**
+     * 是否已支付 1:已支付 0:未支付
+     */
+    isPayed?: number
+    /**
+     * 积分抵扣
+     */
+    offsetPoints?: number
+    /**
+     * 订单总额
+     */
+    orderMoney?: number
+    /**
+     * 系统订单号
+     */
+    orderNumber?: string
+    /**
+     * 付款时间
+     */
+    payTime?: string
+    /**
+     * 支付方式 0-微信 1-积分 2-混合
+     */
+    payType?: number
+    /**
+     * 游玩人列表
+     */
+    peoples?: OmsOrderScenicPeople[]
+    /**
+     * 景区子订单
+     */
+    scenicOrder?: OmsOrderScenic
+    [property: string]: any
+  }
+
+  /**
+   * 景区订单取消退款记录
+   *
+   * OmsScenicOrderCancel
+   */
+  export interface OmsScenicOrderCancel {
+    /**
+     * 回调通知时间
+     */
+    callbackTime?: string
+    /**
+     * 第三方取消审核ID（回调匹配用）
+     */
+    cancelId?: string
+    /**
+     * 取消原因
+     */
+    cancelMemo?: string
+    /**
+     * 取消退款金额
+     */
+    cancelMoney?: number
+    /**
+     * 申请取消数量
+     */
+    cancelNum?: number
+    /**
+     * 取消状态 0申请中 1取消成功 2取消被拒绝
+     */
+    cancelState?: number
+    /**
+     * 创建时间
+     */
+    createTime?: string
+    /**
+     * 逻辑删除 0正常 1已删除
+     */
+    deleted?: number
+    /**
+     * 主键ID
+     */
+    id?: number
+    /**
+     * 申请人（会员ID）
+     */
+    memberId?: number
+    /**
+     * 自我游订单号（第三方）
+     */
+    orderId?: number
+    /**
+     * 系统订单号
+     */
+    orderNumber?: string
+    /**
+     * 拒绝原因
+     */
+    rejectReason?: string
+    /**
+     * 更新时间
+     */
+    updateTime?: string
+    [property: string]: any
+  }
+
+  /**
+   * 景区订单游玩人信息表
+   *
+   * OmsOrderScenicPeople
+   */
+  export interface OmsOrderScenicPeople {
+    /**
+     * 是否成人
+     */
+    adult?: number
+    /**
+     * 游玩人年龄，儿童必须要传
+     */
+    age?: number
+    /**
+     * 创建时间
+     */
+    createTime?: string
+    /**
+     * 主键ID
+     */
+    id?: number
+    /**
+     * 游玩人快递地址
+     */
+    linkAddress?: string
+    /**
+     * 游玩人证件号码
+     */
+    linkCreditNo?: string
+    /**
+     * 游玩人证件类型
+     */
+    linkCreditType?: number
+    /**
+     * 游玩人姓名
+     */
+    linkMan?: string
+    /**
+     * 游玩人手机号
+     */
+    linkPhone?: string
+    /**
+     * 性别 1未知 2男 3女
+     */
+    linkSex?: number
+    /**
+     * 自我游订单号
+     */
+    orderId?: number
+    /**
+     * 系统订单号
+     */
+    orderSourceId?: string
+    /**
+     * 核销时间
+     */
+    verifyTime?: string
+    /**
+     * 凭证码（主码）
+     */
+    voucherCode?: string
+    /**
+     * pdf链接
+     */
+    voucherPdfUrl?: string
+    /**
+     * 二维码链接
+     */
+    voucherQrcodeUrl?: string
+    /**
+     * 凭证状态 0正常 1已核销 2已取消 3申请取消中 4取消处理中
+     */
+    voucherStatus?: number
+    /**
+     * 凭证类型 0凭证码 1二维码链接 2pdf 3链接
+     */
+    voucherType?: number
+    /**
+     * 凭证链接
+     */
+    voucherUrl?: string
+    [property: string]: any
+  }
+
+  /**
+   * 景区子订单
+   *
+   * OmsOrderScenic
+   */
+  export interface OmsOrderScenic {
+    /**
+     * 取消订单日期
+     */
+    cancelDate?: string
+    /**
+     * 创建时间
+     */
+    createTime?: string
+    /**
+     * 结束游玩日期
+     */
+    endTravelDate?: string
+    /**
+     * 总验证数量
+     */
+    finishNum?: number
+    /**
+     * 免费取票说明
+     */
+    freeMemo?: string
+    /**
+     * 快递费用
+     */
+    getPrice?: number
+    /**
+     * 快递方式 0免费 1需要配送 3无须配送
+     */
+    getType?: number
+    /**
+     * 主键ID
+     */
+    id?: number
+    /**
+     * 产品标志图
+     */
+    img?: string
+    /**
+     * 联系人地址
+     */
+    linkAddress?: string
+    /**
+     * 联系人证件号码
+     */
+    linkCreditNo?: string
+    /**
+     * 联系人证件类型
+     */
+    linkCreditType?: number
+    /**
+     * 联系人email
+     */
+    linkEmail?: string
+    /**
+     * 联系人姓名
+     */
+    linkMan?: string
+    /**
+     * 联系人电话
+     */
+    linkPhone?: string
+    /**
+     * 零售总价
+     */
+    memOrderMoney?: number
+    /**
+     * 产品预定数量
+     */
+    num?: number
+    /**
+     * 下单日期
+     */
+    orderDate?: string
+    /**
+     * 自我游订单号
+     */
+    orderId?: number
+    /**
+     * 订单备注
+     */
+    orderMemo?: string
+    /**
+     * 结算总价
+     */
+    orderMoney?: number
+    /**
+     * 系统订单号
+     */
+    orderSourceId?: string
+    /**
+     * 订单状态，0新订单（下单成功未确认状态） 1已确认（下单成功已确认状态，已确认状态才能调用支付接口） 2已成功（已支付成功状态） 3已取消 4已完成（已消费状态）
+     */
+    orderState?: number
+    /**
+     * 订单状态2，可能为空；1已通知（已支付未出票状态） 2已快递（产品需要配送时才有的状态） 3已出票
+     */
+    orderState2?: string
+    /**
+     * 产品标题
+     */
+    productName?: string
+    /**
+     * 产品id
+     */
+    productNo?: number
+    /**
+     * 游玩日期
+     */
+    travelDate?: string
+    /**
+     * 更新时间
+     */
+    updateTime?: string
+    /**
+     * 景点名称
+     */
+    viewName?: string
+    /**
+     * 退改申请类型 0不支持 1支持
+     */
+    isChangeask?: number
+    [property: string]: any
+  }
+
 }

src/api/apiDefinitions.ts

@@ -138,4 +138,6 @@ export default {
   'attractions.createOrder':['POST','/smqjh-oms/app-api/v1/order/scenic/add'],
   'attractions.payPreview':['GET','/smqjh-oms/app-api/v1/order/scenic/pay-preview'],
   'attractions.orderList':['GET','/smqjh-oms/app-api/v1/order/scenic/list'],
+  'attractions.orderDetail':['GET','/smqjh-oms/app-api/v1/order/scenic/detail'],
+  'attractions.cancelOrder':['POST','/smqjh-oms/app-api/v1/order/scenic/cancel'],
 };

src/api/globals.d.ts

@@ -1383,6 +1383,26 @@ declare global {
       >(
         config: Config
       ): Alova2Method<apiResData<Api.DataScenicOrderListVo>, 'attractions.orderList', Config>;
+      orderDetail<
+        Config extends Alova2MethodConfig<apiResData<Api.ScenicOrderDetailVo>> & {
+          data: {
+            orderNumber: string;
+          }
+        }
+      >(
+        config: Config
+      ): Alova2Method<apiResData<Api.ScenicOrderDetailVo>, 'attractions.orderDetail', Config>;
+      cancelOrder<
+        Config extends Alova2MethodConfig<apiResData<void>> & {
+          data: {
+            cancelMemo?: string;
+            cancelNum?: number;
+            orderNumber: string;
+          }
+        }
+      >(
+        config: Config
+      ): Alova2Method<apiResData<void>, 'attractions.cancelOrder', Config>;
     }
   }
 }

src/config/index.ts

@@ -6,10 +6,10 @@ const mapEnvVersion = {
   // develop: 'http://192.168.1.101:8080',
   // develop: 'http://192.168.0.157:8080',
   // develop: 'http://192.168.1.253:8080',
-  develop: 'http://192.168.0.19:8080', // 邓
+  // develop: 'http://192.168.0.19:8080', // 邓
   // develop: 'http://192.168.0.217:8080', // 黄
   // develop: 'http://192.168.0.11:8080', // 王
-  // develop: 'http://192.168.1.89:8080', // 田
+  develop: 'http://192.168.1.89:8080', // 田
   // develop: 'http://74949mkfh190.vicp.fun', // 付
   // develop: 'http://47.109.84.152:8081',
   // develop: 'https://5ed0f7cc.r9.vip.cpolar.cn',

src/pages.json

@@ -666,7 +666,8 @@
           "name": "attractions-order-detail",
           "islogin": false,
           "style": {
-            "navigationBarTitleText": "订单详情"
+            "navigationBarTitleText": "订单详情",
+            "navigationStyle": "custom"
           }
         },
         {

src/subPack-attractions/attractionsOrderDetail/attractionsOrderDetail.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import OrderDetailStatus from '../components/orderDetailStatus.vue'
+import { columns as creditTypeColumns } from '../attractionsReservation/reservation-data'
+import { orderStatus } from './orderDetail-data'
 import { StaticUrl } from '@/config'
 import router from '@/router'
 
@@ -8,44 +10,168 @@ definePage({
   islogin: false,
   style: {
     navigationBarTitleText: '订单详情',
+    navigationStyle: 'custom',
   },
 })
+const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
+const orderNumber = ref('')
+const orderInfo = ref<Api.ScenicOrderDetailVo>()
 const orderPopup = ref(false)
+const refundNum = ref(1)
+const refundReason = ref('')
+const ispay = ref('')
+
+const statusValue = computed(() => orderInfo.value?.hbOrderStatus ?? 0)
+
+/** 当前状态配置 */
+const currentStatus = computed(() => {
+  return orderStatus.find(item => item.value === statusValue.value) || orderStatus[0]
+})
+
+/** 有凭证码的游客列表 */
+const voucherPeoples = computed(() => {
+  return orderInfo.value?.peoples?.filter(p => p.voucherCode) ?? []
+})
+
+/** 是否展示凭证区域 */
+const hasVoucher = computed(() => voucherPeoples.value.length > 0)
+
+const swiperCurrent = ref(0)
+function onSwiperChange(e: any) {
+  swiperCurrent.value = e.detail.current
+}
+
+/** 证件类型文本 */
+function creditTypeText(type?: number) {
+  return creditTypeColumns.value.find(item => item.value === type)?.label ?? '身份证'
+}
+
+async function getData(orderNo: string) {
+  const res = await Apis.attractions.orderDetail({ data: { orderNumber: orderNo } })
+  orderInfo.value = res.data
+}
+
+function handleRefundMinus() {
+  if (refundNum.value > 1)
+    refundNum.value--
+}
+
+function handleRefundPlus() {
+  const maxNum = orderInfo.value?.scenicOrder?.num ?? 1
+  if (refundNum.value < maxNum)
+    refundNum.value++
+}
+
+function handleGoPay() {
+  router.push({
+    name: 'attractions-order-pay',
+    params: {
+      productName: orderInfo.value?.scenicOrder?.productName || '',
+      num: String(orderInfo.value?.scenicOrder?.num) || '',
+      orderNo: orderInfo.value?.orderNumber || '',
+    },
+  })
+}
+
+/** 取消订单 */
+async function handleCancelOrder() {
+  orderPopup.value = false
+  useGlobalMessage().confirm({
+    title: '提示',
+    msg: `确定要${statusValue.value === 0 ? '取消订单' : '退款'}吗？`,
+    success: async () => {
+      const res: any = await Apis.attractions.cancelOrder({
+        data: {
+          orderNumber: orderInfo.value?.orderNumber || '',
+          cancelNum: refundNum.value,
+          cancelMemo: refundReason.value || undefined,
+        },
+      })
+      refundNum.value = 1
+      refundReason.value = ''
+      useGlobalToast().show({ msg: res.data || '操作成功' })
+      await getData(orderNumber.value)
+    },
+  })
+}
+
+onLoad((options: any) => {
+  orderNumber.value = options.orderNo
+  ispay.value = options.ispay
+  getData(options.orderNo)
+})
+onMounted(() => {
+  opcity.value = 0
+})
+
+onPageScroll((e) => {
+  const calculatedOpacity = e.scrollTop / 100
+  opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
+})
+
+function orderDetailBack() {
+  if (ispay.value === 'true') {
+    router.replace({ name: 'attractions-tabbar' })
+  }
+  else {
+    router.back()
+  }
+}
 </script>
 
 <template>
   <view class="order-detail-page">
-    <view class="px-24rpx">
-      <view class="h-20rpx" />
+    <wd-navbar
+      title="景区门票"
+      :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`"
+      :bordered="false"
+      :z-index="9999"
+      safe-area-inset-top
+      left-arrow
+      fixed
+      @click-left="orderDetailBack"
+    />
+    <view :style="{ height: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 30}px` }" />
+    <view v-if="orderInfo" class="px-24rpx">
       <view class="rounded-16rpx bg-#FFF p-24rpx">
-        <OrderDetailStatus :status="3" />
+        <OrderDetailStatus v-if="!hasVoucher" :status="statusValue" @pay="handleGoPay" />
         <view class="flex items-center justify-between gap-50rpx text-32rpx font-bold">
-          <view>日场门票+观光车+飞越黄果树观影票+吉祥物+冰箱贴 经典必打卡</view>
-          <view class="w-100rpx text-24rpx text-#9ED605">
+          <view>{{ orderInfo.scenicOrder?.productName }}</view>
+          <view class="w-100rpx text-24rpx text-#9ED605" @click="router.push({ name: 'attractions-detail', params: { productNo: String(orderInfo.scenicOrder?.productNo) } })">
             详情
           </view>
         </view>
-        <view v-if="orderPopup" class="text-center">
+        <view v-if="hasVoucher" class="text-center">
           <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
           <view class="mt-24rpx flex items-center justify-center gap-10rpx">
-            <wd-icon name="check-circle-filled" size="20px" color="#52C41A" />
-            <text class="text-32rpx text-#52C41A font-bold">
-              已支付
+            <wd-icon :name="currentStatus.icon" size="20px" :color="currentStatus.color" />
+            <text class="text-32rpx font-bold" :style="{ color: currentStatus.color }">
+              {{ currentStatus.label }}
             </text>
           </view>
-          <view class="flex items-center justify-center">
-            <QCode class="my-20rpx rounded-16rpx" text="1" :qwidth="80" qr-key="1" />
-          </view>
-          <view class="text-28rpx font-bold">
-            12115115144
-          </view>
-          <view class="mt-8rpx text-24rpx text-#AAAAAA">
-            (未核销)
-          </view>
+          <swiper
+            class="mt-20rpx"
+            :style="{ height: '340rpx' }"
+            :current="swiperCurrent"
+            :indicator-dots="voucherPeoples.length > 1"
+            @change="onSwiperChange"
+          >
+            <swiper-item v-for="(people, idx) in voucherPeoples" :key="idx" class="flex flex-col items-center justify-center">
+              <view class="flex items-center justify-center">
+                <QCode class="my-20rpx rounded-16rpx" :text="people.voucherCode || ''" :qwidth="80" :qr-key="`qr-${idx}`" />
+              </view>
+              <view class="text-28rpx font-bold">
+                {{ people.voucherCode }}
+              </view>
+              <view class="mt-8rpx text-24rpx text-#AAAAAA">
+                ({{ people.voucherStatus === 1 ? '已核销' : '未核销' }})
+              </view>
+            </swiper-item>
+          </swiper>
           <view class="mt-20rpx text-24rpx text-#AAAAAA">
-            您的二订单已付款，您可以查看或者预定更多产品
+            {{ currentStatus.desc }}
           </view>
-          <view class="mt-24rpx flex items-center justify-center gap-10rpx">
+          <view class="mt-24rpx flex items-center justify-center gap-10rpx" @click="router.push({ name: 'attractions-tabbar', params: { tabbar: '1' } })">
             <text class="text-28rpx">
               查看订单列表
             </text>
@@ -59,7 +185,7 @@ const orderPopup = ref(false)
             订单编号
           </view>
           <view class="text-28rpx font-bold">
-            1867402054587256856
+            {{ orderInfo.orderNumber }}
           </view>
         </view>
         <view class="mt-28rpx flex items-center justify-between">
@@ -67,7 +193,7 @@ const orderPopup = ref(false)
             下单时间
           </view>
           <view class="text-28rpx font-bold">
-            2024-12-13 11：12：30
+            {{ orderInfo.createTime }}
           </view>
         </view>
         <view class="mt-28rpx flex items-center justify-between">
@@ -75,11 +201,11 @@ const orderPopup = ref(false)
             游玩时间
           </view>
           <view class="text-28rpx font-bold">
-            2024-12-13 11：12：30 当天
+            {{ orderInfo.scenicOrder?.travelDate }} 当天
           </view>
         </view>
-        <view class="mt-28rpx rounded-16rpx bg-#F1F1F1 p-24rpx text-28rpx text-#AAAAAA">
-          备注：速度发货速度
+        <view v-if="orderInfo.scenicOrder?.orderMemo" class="mt-28rpx rounded-16rpx bg-#F1F1F1 p-24rpx text-28rpx text-#AAAAAA">
+          备注：{{ orderInfo.scenicOrder?.orderMemo }}
         </view>
       </view>
       <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
@@ -91,19 +217,19 @@ const orderPopup = ref(false)
             <text class="text-24rpx">
               ￥
             </text>
-            290
+            {{ orderInfo.orderMoney }}
           </view>
         </view>
-        <view class="mt-20rpx flex items-center justify-between text-24rpx">
+        <view v-if="orderInfo.offsetPoints" class="mt-20rpx flex items-center justify-between text-24rpx">
           <view>积分扣减</view>
           <view class="text-#FF4A39">
-            ￥10
+            ￥{{ orderInfo.offsetPoints }}
           </view>
         </view>
         <view class="mt-20rpx flex items-center justify-between text-24rpx">
           <view>微信支付</view>
           <view class="text-#FF4A39">
-            ￥280
+            ￥{{ orderInfo.actualTotal }}
           </view>
         </view>
       </view>
@@ -116,7 +242,7 @@ const orderPopup = ref(false)
             联系人
           </view>
           <view class="text-bold text-24rpx">
-            张三
+            {{ orderInfo.scenicOrder?.linkMan }}
           </view>
         </view>
         <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
@@ -125,20 +251,21 @@ const orderPopup = ref(false)
             手机号码
           </view>
           <view class="text-bold text-24rpx">
-            13856491258
+            {{ orderInfo.scenicOrder?.linkPhone }}
           </view>
         </view>
       </view>
-      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+      <!-- 游客信息 -->
+      <view v-for="(people, idx) in orderInfo.peoples" :key="idx" class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
         <view class="text-28rpx font-bold">
-          游客信息
+          游客信息{{ (orderInfo.peoples?.length ?? 0) > 1 ? ` ${idx + 1}` : '' }}
         </view>
         <view class="mt-24rpx flex items-center gap-92rpx">
           <view class="text-24rpx">
             游客姓名
           </view>
           <view class="text-bold text-24rpx">
-            张三
+            {{ people.linkMan }}
           </view>
         </view>
         <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
@@ -147,7 +274,7 @@ const orderPopup = ref(false)
             证件类型
           </view>
           <view class="text-bold text-24rpx">
-            身份证
+            {{ creditTypeText(people.linkCreditType) }}
           </view>
         </view>
         <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
@@ -156,14 +283,52 @@ const orderPopup = ref(false)
             证件号码
           </view>
           <view class="text-bold text-24rpx">
-            510789456125964189
+            {{ people.linkCreditNo }}
+          </view>
+        </view>
+      </view>
+      <view v-if="orderInfo.cancelTime" class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view class="text-28rpx font-bold">
+          退款申请
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx text-#AAAAAA">
+            申请时间
+          </view>
+          <view class="text-28rpx font-bold">
+            {{ orderInfo.cancelTime }}
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx text-#AAAAAA">
+            申请说明
+          </view>
+          <view class="text-28rpx font-bold">
+            {{ orderInfo.cancelReason }}
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx text-#AAAAAA">
+            处理状态
+          </view>
+          <view v-if="orderInfo.cancelRecords" class="text-28rpx font-bold">
+            <text v-if="orderInfo.cancelRecords[0]?.cancelState === 0">
+              申请中
+            </text>
+            <text v-if="orderInfo.cancelRecords[0]?.cancelState === 1">
+              通过
+            </text>
+            <text v-if="orderInfo.cancelRecords[0]?.cancelState === 2">
+              拒绝
+            </text>
           </view>
         </view>
       </view>
     </view>
     <view class="h-220rpx" />
     <view
-      class="fixed bottom-0 left-0 z-100 box-border h-174rpx w-full flex items-center gap-28rpx border-t-[2rpx_solid_#EEEEEE] bg-#FFF px-24rpx"
+      class="fixed bottom-0 left-0 z-100 box-border h-174rpx w-full flex items-center gap-28rpx bg-#FFF px-24rpx"
+      style="border-top: 2rpx solid #EEEEEE;"
     >
       <view class="flex items-center gap-40rpx">
         <view @click="router.replace({ name: 'attractions-tabbar' })">
@@ -187,14 +352,14 @@ const orderPopup = ref(false)
           </Zcontact>
         </view>
       </view>
-      <wd-button custom-class="w-546rpx" block size="large" @click="orderPopup = true">
-        退款申请
+      <wd-button v-if="(statusValue === 0 || statusValue != 60) && orderInfo?.scenicOrder?.isChangeask === 1" custom-class="w-546rpx" block size="large" @click="orderPopup = true">
+        {{ statusValue === 0 ? '取消订单' : '退款申请' }}
       </wd-button>
     </view>
-    <Zpopup v-model="orderPopup" :zindex="9999" bg="#fff">
+    <Zpopup v-model="orderPopup" :showfooter="false" :zindex="9999" bg="#fff">
       <view>
         <view class="mt-28rpx text-center text-32rpx font-bold">
-          退款申请
+          {{ statusValue === 0 ? '取消订单' : '退款申请' }}
         </view>
         <view class="px-24rpx">
           <view class="mt-30rpx flex items-center justify-between">
@@ -204,14 +369,16 @@ const orderPopup = ref(false)
             <view class="flex items-center gap-24rpx">
               <view
                 class="h-36rpx w-36rpx rounded-50% bg-#F0F0F0 text-center text-28rpx text-#AAAAAA font-600 line-height-[36rpx]"
+                @click="handleRefundMinus"
               >
                 -
               </view>
               <view class="text-24rpx font-400">
-                10
+                {{ refundNum }}
               </view>
               <view
                 class="h-36rpx w-36rpx rounded-50% bg-#E8FFA7 text-center text-28rpx text-#9ED605 font-600 line-height-[36rpx]"
+                @click="handleRefundPlus"
               >
                 +
               </view>
@@ -223,6 +390,7 @@ const orderPopup = ref(false)
             </view>
             <view class="mt-20rpx rounded-16rpx bg-#F1F1F1">
               <textarea
+                v-model="refundReason"
                 class="h-120rpx w-full rounded-16rpx p-24rpx"
                 placeholder-style="color: #AAAAAA; font-size: 24rpx;"
                 placeholder="请仔细填写，提交后进入审核期，不可重复提交"
@@ -232,10 +400,11 @@ const orderPopup = ref(false)
         </view>
         <view class="mt-26rpx h-2rpx w-full bg-#EEEEEE" />
         <view class="flex items-center justify-center">
-          <wd-button custom-class="w-702rpx mt-10rpx" block size="large">
-            立即支付
+          <wd-button custom-class="w-702rpx mt-10rpx" block size="large" @click="handleCancelOrder">
+            确认提交
           </wd-button>
         </view>
+        <view class="h-60rpx" />
       </view>
     </Zpopup>
   </view>

src/subPack-attractions/attractionsOrderDetail/orderDetail-data.ts

@@ -7,31 +7,24 @@ export const orderStatus = [
     color: '#FFC130',
   },
   {
-    value: 1,
+    value: 70,
     label: '已支付',
     desc: '您的订单已付款，您可以查看或者预定更多产品',
     icon: 'check-circle-filled',
     color: '#52C41A',
   },
   {
-    value: 2,
+    value: 80,
     label: '已完成',
     desc: '您的订单已完成，您可以查看或者预定更多产品',
     icon: 'check-circle-filled',
     color: '#52C41A',
   },
   {
-    value: 3,
+    value: 60,
     label: '已取消',
     desc: '您的订单已取消，如需帮助请联系客服',
     icon: 'close-circle-filled',
     color: '#AAAAAA',
   },
-  {
-    value: 4,
-    label: '已退款',
-    desc: '订单已退款，支持重订',
-    icon: 'check-circle-filled',
-    color: '#FF4A39',
-  },
 ]

src/subPack-attractions/attractionsOrderPay/attractionsOrderPay.vue

@@ -33,14 +33,14 @@ async function submitPay() {
   if (res.payType !== 1) {
     try {
       await useUserStore().getWxCommonPayment(res)
-      router.push({ name: 'attractions-order-detail' })
+      router.replace({ name: 'attractions-order-detail', params: { orderNo: String(payPreviewInfo.value?.orderNumber), ispay: 'true' } })
     }
     catch {
       await useUserStore().payError('xsb-order', 'subPack-xsb/commonTab/index')
     }
   }
   else {
-    router.push({ name: 'attractions-order-detail' })
+    router.replace({ name: 'attractions-order-detail', params: { orderNo: String(payPreviewInfo.value?.orderNumber), ispay: 'true' } })
   }
 }
 </script>

src/subPack-attractions/commonTab/components/orderList.vue

@@ -7,12 +7,12 @@ const tab = ref<number>(0)
 const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
 
 // 状态映射：tab索引 -> 接口status
-const statusMap: Record<number, number> = {
-  0: 0, // 全部
-  1: 1, // 待支付
-  2: 2, // 已支付
-  3: 3, // 已取消
-  4: 4, // 已完成
+const statusMap: Record<number, string> = {
+  0: 'all', // 全部
+  1: 'paddingPay', // 待支付
+  2: 'ing', // 已支付
+  3: 'cancel', // 已取消
+  4: 'completed', // 已完成
 }
 
 const { data: orderList, isLastPage, page, error, refresh, reload } = usePagination((pageNum, pageSize) => Apis.xsb.orderList({ data: {
@@ -30,7 +30,6 @@ const { data: orderList, isLastPage, page, error, refresh, reload } = usePaginat
   middleware: createGlobalLoadingMiddleware(),
 })
 
-// tab切换
 function handleClick(e: { index: number }) {
   tab.value = e.index
   orderList.value = []

src/subPack-attractions/components/orderDetailStatus.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import { orderStatus } from '../attractionsOrderDetail/orderDetail-data'
+import router from '@/router'
 
 const props = defineProps<{
   status: number
 }>()
 
+const emit = defineEmits<{
+  (e: 'pay'): void
+}>()
+
 const currentStatus = computed(() => {
   return orderStatus.find(item => item.value === props.status) || orderStatus[0]
 })
@@ -21,7 +26,12 @@ const currentStatus = computed(() => {
     <view class="mt-20rpx text-24rpx text-#AAA">
       {{ currentStatus.desc }}
     </view>
-    <view class="mt-24rpx flex items-center justify-center gap-10rpx">
+    <view v-if="props.status === 0" class="mt-20rpx">
+      <wd-button class="w-456rpx" type="primary" @click="emit('pay')">
+        去支付
+      </wd-button>
+    </view>
+    <view class="mt-24rpx flex items-center justify-center gap-10rpx" @click="router.push({ name: 'attractions-tabbar', params: { tabbar: '1' } })">
       <text class="text-28rpx">
         查看订单列表
       </text>