feat(order,ticket): 新增订单取消状态，优化订单查看与票务日期标签展示

zjk

2026-08-28 f8fc8b5d55d714edad5c59f226cc288ebf248647

feat(order,ticket): 新增订单取消状态，优化订单查看与票务日期标签展示

- 为后台订单管理页面添加已取消订单的状态映射配置
- 调整小程序订单页的查看权限逻辑，隐藏未支付和已取消订单的查看按钮
- 优化票务页面的日期标签计算与展示逻辑，确保预售期内展示充足的日期选项

 management/src/pages/order/orderList/components/OrderDetailModal.jsx

@@ -15,6 +15,7 @@
    3: { text: '退款中', color: '#13c2c2' },
    4: { text: '退款完成', color: '#722ed1' },
    5: { text: '退款驳回', color: '#fa541c' },
    6: { text: '已取消', color: '#ff4d4f' },
  };

  const ticketStatusMap = {

 management/src/pages/order/orderList/index.jsx

@@ -22,6 +22,7 @@
    3: { text: '退款中', color: '#13c2c2' },
    4: { text: '退款完成', color: '#722ed1' },
    5: { text: '退款驳回', color: '#fa541c' },
    6: { text: '已取消', color: '#ff4d4f' },
  };

  // 删除订单
@@ -131,6 +132,7 @@
        3: { text: statusMap[3].text },
        4: { text: statusMap[4].text },
        5: { text: statusMap[5].text },
        6: { text: statusMap[6].text },
      },
      render: (_, record) => {
        // 直接基于记录里的状态值渲染，避免受 ProTable 内部展示值影响

 miniprogram/pages/order/order.vue

@@ -45,7 +45,7 @@
                        {{item.orderPrice || '0.00'}}
                    </view>
                    <view class="btn flex a-center">
                        <view class="view-order" v-if="item.status !== 0" @click.stop="toDetail(item)">查看订单</view>
                        <view class="view-order" v-if="canViewOrderDetail(item)" @click.stop="toDetail(item)">查看订单</view>
                        <view class="pay" v-if="item.status === 0" @click.stop="continuePay(item)">继续支付</view>
                    </view>
                </view>
@@ -285,8 +285,13 @@
        })
    }

    const canViewOrderDetail = (item) => {
        const status = Number(item?.status)
        return status !== 0 && status !== 6
    }

    const handleOrderClick = (item) => {
        if (item?.status === 0) {
        if (!canViewOrderDetail(item)) {
            return
        }
        toDetail(item)

 miniprogram/pages/ticket/ticket.vue

@@ -71,6 +71,7 @@

    const DAY_MS = 24 * 60 * 60 * 1000
    const PRESALE_DAYS = 15
    const DATE_TAB_COUNT = 5

    const getDayStartTimestamp = (timestamp: number): number => {
        const date = new Date(timestamp)
@@ -86,6 +87,7 @@

    const todayStartTimestamp = getDayStartTimestamp(Date.now())
    const presaleMaxTimestamp = getDayEndTimestamp(todayStartTimestamp + (PRESALE_DAYS - 1) * DAY_MS)
    const latestDateListStartTimestamp = Math.max(todayStartTimestamp, presaleMaxTimestamp - (DATE_TAB_COUNT - 1) * DAY_MS)
    
    // 格式化日期为 MM-DD
    const formatDate = (timestamp: number): string => {
@@ -117,11 +119,20 @@
        }
    }
    
    // 计算顶部日期条的起始日期，靠近预售尾部时自动向前补齐，避免只剩 1-2 天
    const getDateListStartTimestamp = (selectedTimestamp: number) => {
        const normalizedSelectedTimestamp = getDayStartTimestamp(selectedTimestamp)
        if (normalizedSelectedTimestamp > latestDateListStartTimestamp) {
            return latestDateListStartTimestamp
        }
        return normalizedSelectedTimestamp
    }

    // 根据时间戳生成日期列表，只展示 15 天预售范围内的日期
    const generateDateList = (startTimestamp: number): Array<{ date: string; week: string; timestamp: number; disabled: boolean }> => {
        const list: Array<{ date: string; week: string; timestamp: number; disabled: boolean }> = [];
        const normalizedStartTimestamp = getDayStartTimestamp(startTimestamp);
        for (let i = 0; i < 5; i++) {
        const normalizedStartTimestamp = getDateListStartTimestamp(startTimestamp);
        for (let i = 0; i < DATE_TAB_COUNT; i++) {
            const timestamp = normalizedStartTimestamp + i * DAY_MS;
            if (timestamp > presaleMaxTimestamp) {
                break;
@@ -302,8 +313,9 @@
        }
        
        // 设置选择日期为选中状态
        activeDate.value = dateList.value[0].date;
        activeDateTimestamp.value = dateList.value[0].timestamp;
        activeDate.value = formatDate(timestamp);
        activeDateTimestamp.value = getDayStartTimestamp(timestamp);
        value.value = getDayStartTimestamp(timestamp)
        filterTicketsByDate();
    }
    const toDetail = (item: any) => {