81 lines
3.6 KiB
Vue
81 lines
3.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view v-if="loading" class="state">加载中...</view>
|
||
<view v-else-if="!order" class="state">订单信息不存在</view>
|
||
<view v-else>
|
||
<view class="card">
|
||
<view class="card-title">订单信息</view>
|
||
<view class="info-row"><text>订单号</text><text>{{ order.order_no || '-' }}</text></view>
|
||
<view class="info-row"><text>购买角色</text><text>{{ order.purchase_role || '-' }}</text></view>
|
||
<view class="info-row"><text>资产标识</text><text>{{ order.asset_identifier || '-' }}</text></view>
|
||
<view class="info-row"><text>支付方式</text><text>{{ formatPaymentMethod(order.payment_method) }}</text></view>
|
||
<view class="info-row"><text>支付状态</text><text>{{ order.payment_status_name || getStatusText(order.payment_status) }}</text></view>
|
||
<view class="info-row"><text>订单金额</text><text class="amount">¥{{ formatMoney(order.total_amount) }}</text></view>
|
||
<view class="info-row"><text>创建时间</text><text>{{ formatDateTime(order.created_at) }}</text></view>
|
||
<view class="info-row"><text>支付时间</text><text>{{ formatDateTime(order.paid_at) }}</text></view>
|
||
<view class="info-row"><text>完成时间</text><text>{{ formatDateTime(order.completed_at) }}</text></view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="card-title">套餐明细</view>
|
||
<view v-if="!order.packages?.length" class="empty-detail">暂无套餐明细</view>
|
||
<view v-for="item in order.packages || []" :key="item.package_id" class="package-row">
|
||
<view>
|
||
<view class="package-name">{{ item.package_name || '-' }}</view>
|
||
<view class="package-type">{{ item.package_type === 'addon' ? '加油包' : '正式套餐' }} × {{ item.quantity || 1 }}</view>
|
||
</view>
|
||
<view class="amount">¥{{ formatMoney(item.price) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { orderApi } from '@/api/index.js';
|
||
import { formatDateTime, formatMoney } from '@/utils/display.js';
|
||
|
||
const order = ref(null);
|
||
const loading = ref(false);
|
||
|
||
const formatPaymentMethod = (method) => ({
|
||
wechat: '微信支付',
|
||
alipay: '支付宝支付',
|
||
wallet: '钱包支付'
|
||
}[method] || method || '-');
|
||
|
||
const getStatusText = (status) => ({
|
||
1: '待支付',
|
||
2: '已支付',
|
||
3: '已取消',
|
||
4: '已退款'
|
||
}[status] || '未知');
|
||
|
||
onLoad(async ({ id }) => {
|
||
if (!id) return;
|
||
loading.value = true;
|
||
try {
|
||
order.value = await orderApi.getDetail(id);
|
||
} catch (error) {
|
||
console.error('加载订单详情失败', error);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container { min-height: 100vh; padding: 24rpx; background: var(--bg-secondary); box-sizing: border-box; }
|
||
.card { margin-bottom: 24rpx; padding: 28rpx; background: #fff; border-radius: 20rpx; }
|
||
.card-title { margin-bottom: 20rpx; font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
|
||
.info-row, .package-row { display: flex; justify-content: space-between; gap: 24rpx; padding: 18rpx 0; border-bottom: 1rpx solid var(--gray-200); color: var(--text-secondary); font-size: 26rpx; }
|
||
.info-row:last-child, .package-row:last-child { border-bottom: 0; }
|
||
.info-row text:last-child { color: var(--text-primary); text-align: right; word-break: break-all; }
|
||
.amount { color: var(--danger) !important; font-weight: 600; }
|
||
.package-name { color: var(--text-primary); }
|
||
.package-type, .empty-detail, .state { color: var(--text-tertiary); }
|
||
.state { padding: 200rpx 0; text-align: center; }
|
||
</style>
|