<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-500 font-medium">23小时59分</span> 内完成支付</div>
|
</div>
|
<div class="text-2xl font-bold mb-4">
|
应付金额：<span class="text-red-500">¥{{ 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 justify-between items-center">
|
<div class="flex items-center gap-3">
|
<img src="@/assets/icons/wechat-pay.svg" alt="微信支付" class="w-8 h-8" />
|
<span class="font-medium">微信支付</span>
|
</div>
|
<el-radio v-model="paymentMethod" label="wechat" />
|
</div>
|
</div>
|
|
<div
|
class="border rounded-lg p-4"
|
:class="{ 'border-blue-500 bg-blue-50': paymentMethod === 'alipay' }"
|
@click="paymentMethod = 'alipay'"
|
>
|
<div class="flex justify-between items-center">
|
<div class="flex items-center gap-3">
|
<img src="@/assets/icons/alipay.svg" alt="支付宝" class="w-8 h-8" />
|
<span class="font-medium">支付宝</span>
|
</div>
|
<el-radio v-model="paymentMethod" label="alipay" />
|
</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">
|
<el-button text @click="cancelPayment">取消支付</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage } from 'element-plus';
|
import { computed, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
const paymentMethod = ref('');
|
|
// 模拟订单信息
|
const orderInfo = ref({
|
orderNo: 'DD' + Date.now(),
|
totalAmount: '询价',
|
createTime: new Date().toLocaleString(),
|
});
|
|
// 根据支付方式获取对应的二维码图片
|
const getQRCodeImage = computed(() => {
|
return paymentMethod.value === 'wechat' ? '/src/assets/qrcode/wechat-qr.svg' : '/src/assets/qrcode/alipay-qr.svg';
|
});
|
|
// 处理支付
|
const handlePayment = () => {
|
if (!paymentMethod.value) {
|
ElMessage.warning('请选择支付方式');
|
return;
|
}
|
ElMessage.success('支付成功');
|
// 支付成功后跳转到订单详情页
|
router.push('/order/detail');
|
};
|
|
// 取消支付
|
const cancelPayment = () => {
|
ElMessage.info('取消支付');
|
router.push('/');
|
};
|
</script>
|
|
<style scoped>
|
.payment-method-item {
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.payment-method-item:hover {
|
border-color: #409eff;
|
background-color: #f5f7fa;
|
}
|
</style>
|
