64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<view class="order-info">
|
|
<view class="order-item">
|
|
<text class="label">订单号</text>
|
|
<text class="value">{{ orderData.orderId }}</text>
|
|
</view>
|
|
<view class="order-item">
|
|
<text class="label">流水号</text>
|
|
<text class="value">{{ orderData.paySerialNumber }}</text>
|
|
</view>
|
|
<view class="order-item">
|
|
<text class="label">支付方式</text>
|
|
<text class="value">{{ payWayText }}</text>
|
|
</view>
|
|
<view class="order-item amount">
|
|
<text class="label">实际支付金额</text>
|
|
<text class="value">{{ formattedAmount }}</text>
|
|
</view>
|
|
<button class="reserve-button">再次预定</button>
|
|
<text class="feedback">投诉反馈</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from "vue";
|
|
|
|
// 支付方式映射常量
|
|
const PAY_WAY_MAP = {
|
|
0: "微信",
|
|
1: "支付宝",
|
|
2: "云闪付",
|
|
};
|
|
|
|
const props = defineProps({
|
|
orderData: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
orderId: "",
|
|
paySerialNumber: "",
|
|
payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
|
|
payAmt: "",
|
|
orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
|
|
orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
|
|
}),
|
|
},
|
|
});
|
|
|
|
// 使用计算属性缓存支付方式文本
|
|
const payWayText = computed(() => {
|
|
return PAY_WAY_MAP[props.orderData.payWay] || "未知支付方式";
|
|
});
|
|
|
|
// 格式化金额显示
|
|
const formattedAmount = computed(() => {
|
|
const amount = props.orderData.payAmt;
|
|
return amount ? `¥${parseFloat(amount).toFixed(2)}` : "¥0.00";
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "./styles/index.scss";
|
|
</style>
|