112 lines
3.1 KiB
Vue
112 lines
3.1 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 v-if="orderData.orderStatus === '4'" class="order-item">
|
||
<text class="label">退款单号</text>
|
||
<text class="value">{{ orderData.refundOrderNo }}</text>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="order-item amount">
|
||
<text class="label">实际支付金额</text>
|
||
<text class="value">{{ formattedAmount }}</text>
|
||
</view>
|
||
<!-- 根据订单状态动态显示按钮 -->
|
||
<button v-if="shouldShowButton" :class="buttonClass">
|
||
{{ buttonText }}
|
||
</button>
|
||
<view class="feedback">
|
||
<text @click="openFeedback">投诉反馈</text>
|
||
</view>
|
||
</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";
|
||
});
|
||
|
||
// 按钮文案逻辑
|
||
const buttonText = computed(() => {
|
||
const status = props.orderData.orderStatus;
|
||
switch (status) {
|
||
case "0": // 待支付状态
|
||
return "立即支付";
|
||
case "2": // 待使用状态
|
||
return "申请退款";
|
||
default: // 其他状态
|
||
return "再次预定";
|
||
}
|
||
});
|
||
|
||
// 是否显示按钮（退款中状态不显示）
|
||
const shouldShowButton = computed(() => {
|
||
return props.orderData.orderStatus !== "4"; // 4-退款中
|
||
});
|
||
|
||
// 按钮样式类逻辑
|
||
const buttonClass = computed(() => {
|
||
const status = props.orderData.orderStatus;
|
||
const baseClass = "reserve-button";
|
||
|
||
// 申请退款状态（待使用状态）保持原样式，其他状态添加pre-btn类
|
||
if (status === "2") {
|
||
return baseClass; // 申请退款状态，背景色不变
|
||
} else {
|
||
return `${baseClass} pre-btn`; // 其他状态，添加pre-btn样式
|
||
}
|
||
});
|
||
|
||
// 投诉电话
|
||
const openFeedback = () => {
|
||
const phoneNumber = props.orderData.complaintHotline;
|
||
uni.makePhoneCall({ phoneNumber });
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style>
|