<template>
|
<div class="container mx-auto px-4 py-8 bg-white">
|
<!-- 面包屑导航 -->
|
<!-- <div class="mb-6 text-gray-500">
|
<el-breadcrumb separator="/">
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>订单支付</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div> -->
|
|
<div class="max-w-4xl mx-auto">
|
<!-- 订单信息 -->
|
<div class="bg-gray-50 p-6 rounded-lg mb-6">
|
<div class="flex justify-between items-center mb-4">
|
<h2 class="text-xl font-medium">订单提交成功</h2>
|
<div class="text-gray-500">
|
请在
|
<span class="text-red text-red-500 font-medium" style="color: red; font-weight: 500; font-size: 16px">{{
|
formattedTime
|
}}</span>
|
内完成支付
|
</div>
|
</div>
|
<div class="text-2xl font-bold mb-4">
|
应付金额：<span class="text-red-500" style="font-size: 24px; color: green">¥{{ orderInfo.totalAmount }}</span>
|
</div>
|
<div class="text-gray-600">
|
<p>订单编号：{{ orderInfo.orderNo }}</p>
|
<p class="mt-1">创建时间：{{ orderInfo.createTime }}</p>
|
</div>
|
</div>
|
|
<!-- 支付方式 -->
|
<div class="bg-white border rounded-lg p-6">
|
<h3 class="text-lg font-medium mb-6">选择支付方式</h3>
|
|
<!-- 支付方式选择 -->
|
<div class="space-y-4">
|
<div
|
class="border rounded-lg p-4"
|
:class="{ 'border-blue-500 bg-blue-50': paymentMethod === 'wechat' }"
|
@click="paymentMethod = 'wechat'"
|
>
|
<div class="flex items-center">
|
<!-- <div class="flex items-center gap-3">
|
<img src="@/assets/icons/PAY-WEIXIN.png" alt="微信支付" class="w-8 h-8" />
|
<span class="font-medium">微信支付</span>
|
</div> -->
|
<!-- <el-radio v-model="paymentMethod" label="wechat" /> -->
|
<el-radio v-model="paymentMethod" value="wechat" size="large" border>
|
<div class="flex items-center gap-3">
|
<img src="@/assets/icons/PAY-WEIXIN.png" alt="微信支付" class="w-8 h-8" />
|
<span class="font-medium">微信支付</span>
|
</div>
|
</el-radio>
|
<el-radio v-model="paymentMethod" value="alipay" size="large" border>
|
<div class="flex items-center gap-3">
|
<img src="@/assets/icons/PAY-ALI.png" alt="支付宝" class="w-8 h-8" />
|
<span class="font-medium">支付宝</span>
|
</div>
|
|
</el-radio>
|
</div>
|
</div>
|
|
|
</div>
|
|
<!-- 二维码支付区域 -->
|
<div v-if="paymentMethod" class="mt-8 flex justify-center">
|
<div class="text-center">
|
<div class="bg-white p-4 inline-block border rounded-lg">
|
<img :src="getQRCodeImage" alt="支付二维码" class="w-48 h-48" />
|
</div>
|
<p class="mt-4 text-gray-600">请使用{{ paymentMethod === 'wechat' ? '微信' : '支付宝' }}扫码支付</p>
|
<p class="text-sm text-gray-500 mt-2">扫码后请在手机上确认支付</p>
|
</div>
|
</div>
|
|
<!-- 支付按钮 -->
|
<div class="mt-8 text-center">
|
<!-- <el-button type="primary" size="large" class="w-64" @click="handlePayment">
|
立即支付 ¥{{ orderInfo.totalAmount }}
|
</el-button> -->
|
<div class="mt-4 text-danger">
|
<el-button type="danger" @click="cancelPayment">取消支付</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage } from 'element-plus';
|
import { computed, ref, onMounted, onUnmounted } from 'vue';
|
import { useRouter } from 'vue-router';
|
import wechartQrcode from '@/assets/qrcode/qrcode-wechat.png';
|
import alipayQrcode from '@/assets/qrcode/qrcode-alipay.png';
|
|
const router = useRouter();
|
const paymentMethod = ref('wechat');
|
|
// 倒计时相关状态
|
const remainingMinutes = ref(15);
|
const remainingSeconds = ref(0);
|
let countdownTimer: number | null = null;
|
|
// 格式化时间显示
|
const formattedTime = computed(() => {
|
return `${remainingMinutes.value}分${remainingSeconds.value.toString().padStart(2, '0')}秒`;
|
});
|
|
// 开始倒计时
|
const startCountdown = () => {
|
const endTime = Date.now() + 15 * 60 * 1000; // 15分钟的毫秒数
|
|
countdownTimer = window.setInterval(() => {
|
const now = Date.now();
|
const diff = endTime - now;
|
|
if (diff <= 0) {
|
// 时间到，清除定时器并跳转
|
clearInterval(countdownTimer!);
|
ElMessage.warning('支付超时，订单已取消');
|
router.replace('/home');
|
return;
|
}
|
|
remainingMinutes.value = Math.floor(diff / (1000 * 60));
|
remainingSeconds.value = Math.floor((diff % (1000 * 60)) / 1000);
|
}, 1000);
|
};
|
|
// 根据支付方式获取对应的二维码图片
|
const getQRCodeImage = computed(() => {
|
return paymentMethod.value === 'wechat' ? wechartQrcode : alipayQrcode;
|
});
|
|
// 处理支付
|
const handlePayment = () => {
|
if (!paymentMethod.value) {
|
ElMessage.warning('请选择支付方式');
|
return;
|
}
|
ElMessage.success('支付成功');
|
// 支付成功后跳转到订单详情页
|
router.push('/order/detail');
|
};
|
|
// 取消支付
|
const cancelPayment = () => {
|
ElMessage.info('取消支付');
|
router.replace('/home');
|
};
|
|
// 模拟订单信息
|
const orderInfo = ref({
|
orderNo: 'DD' + Date.now(),
|
totalAmount: '询价',
|
createTime: new Date().toLocaleString(),
|
});
|
|
onMounted(() => {
|
const savedProduct = localStorage.getItem('currentProduct');
|
if (savedProduct) {
|
const productData = JSON.parse(savedProduct);
|
const price = productData.Price;
|
orderInfo.value.totalAmount = price;
|
}
|
// 启动倒计时
|
startCountdown();
|
});
|
|
// 组件卸载时清除定时器
|
onUnmounted(() => {
|
if (countdownTimer) {
|
clearInterval(countdownTimer);
|
}
|
});
|
</script>
|
|
<style scoped>
|
.payment-method-item {
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.payment-method-item:hover {
|
border-color: #409eff;
|
background-color: #f5f7fa;
|
}
|
</style>
|
