city-gather/src/subPack-smqjh/components/attractions-orderList/attractions-orderList.vue

<script setup lang="ts">
import router from '@/router'

const props = defineProps<{
  order: Api.xsbOrderList
}>()

// 订单状态映射（hbOrderStatus）
const statusMap: Record<number, { text: string, color: string }> = {
  0: { text: '待支付', color: '#FF9500' },
  60: { text: '已取消', color: '#999999' },
  70: { text: '已支付', color: '#52C41A' },
  80: { text: '已完成', color: '#52C41A' },
}

// 订单项点击
function handleOrderClick(order: Api.ScenicOrderListVo | Api.xsbOrderList) {
  router.push({ name: 'attractions-order-detail', params: { orderNo: String(order.orderNumber) } })
}
const statusInfo = computed(() => {
  const status = props.order?.hbOrderStatus as number
  return statusMap[status] ?? { text: '', color: '#999999' }
})
</script>

<template>
  <view class="mb-20rpx box-border w-full overflow-hidden rounded-16rpx bg-#FFF p-24rpx" @click="handleOrderClick(order)">
    <view class="w-full flex items-center justify-between">
      <view class="text-32rpx font-bold">
        {{ order?.orderScenic.viewName }}
      </view>
      <view class="text-28rpx" :style="{ color: statusInfo.color }">
        {{ statusInfo.text }}
      </view>
    </view>
    <view class="mt-20rpx w-full flex items-center gap-20rpx">
      <image v-if="order?.orderScenic.img" :src="order?.orderScenic.img" class="h-160rpx w-160rpx flex-shrink-0 rounded-8rpx" mode="aspectFill" />
      <view v-else class="h-160rpx w-160rpx flex flex-shrink-0 items-center justify-center rounded-8rpx bg-#f5f5f5 text-#999">
        暂无图片
      </view>
      <view class="min-w-0 flex-1">
        <view class="line-clamp-2 text-28rpx font-bold">
          {{ order?.orderScenic.productName }}
        </view>
        <view class="mt-20rpx text-24rpx text-#666">
          游玩日期：{{ order?.orderScenic.travelDate }}
        </view>
      </view>
    </view>
    <view class="mt-24rpx flex items-center justify-between text-24rpx text-#999">
      <view>订单编号:{{ order?.orderNumber }}</view>
      <view>共{{ order?.orderScenic.num }}件商品</view>
    </view>
    <view class="mt-20rpx flex items-center justify-between">
      <view class="text-24rpx text-#999">
        下单时间:{{ order?.createTime }}
      </view>
      <view>
        <text class="text-24rpx">
          合计:
        </text>
        <text class="text-26rpx text-#FF4A39 font-bold">
          ￥
        </text>
        <text class="text-bold text-32rpx text-#FF4A39">
          {{ order?.total }}
        </text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>