修改数据与页面逻辑

tanghaolin

10 天以前 04a2d3e3c701a03981c4b66162ff9515f9d7dd12

 src/views/PaymentPage.vue

@@ -1,22 +1,28 @@
<template>
   <div class="container mx-auto px-4 py-8 bg-white">
      <!-- 面包屑导航 -->
      <div class="mb-6 text-gray-500">
      <!-- <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> -->

      <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 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">¥{{ orderInfo.totalAmount }}</span>
               应付金额：<span class="text-red-500" style="font-size: 24px; color: green">¥{{ orderInfo.totalAmount }}</span>
            </div>
            <div class="text-gray-600">
               <p>订单编号：{{ orderInfo.orderNo }}</p>
@@ -35,28 +41,29 @@
                  :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" />
                  <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 v-model="paymentMethod" label="wechat" />
                     </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
                  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>

            <!-- 二维码支付区域 -->
@@ -72,11 +79,11 @@

            <!-- 支付按钮 -->
            <div class="mt-8 text-center">
               <el-button type="primary" size="large" class="w-64" @click="handlePayment">
               <!-- <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>
               </el-button> -->
               <div class="mt-4 text-danger">
                  <el-button type="danger" @click="cancelPayment">取消支付</el-button>
               </div>
            </div>
         </div>
@@ -86,22 +93,48 @@

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { computed, ref } from 'vue';
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('');
const paymentMethod = ref('wechat');

// 模拟订单信息
const orderInfo = ref({
   orderNo: 'DD' + Date.now(),
   totalAmount: '询价',
   createTime: new Date().toLocaleString(),
// 倒计时相关状态
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' ? '/src/assets/qrcode/wechat-qr.svg' : '/src/assets/qrcode/alipay-qr.svg';
   return paymentMethod.value === 'wechat' ? wechartQrcode : alipayQrcode;
});

// 处理支付
@@ -118,8 +151,33 @@
// 取消支付
const cancelPayment = () => {
   ElMessage.info('取消支付');
   router.push('/');
   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>