From e3ab5c403cce86811f9bdf8ae5f0d00f1f776b1f Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期五, 18 四月 2025 15:40:55 +0800
Subject: [PATCH] 添加联系我们界面
---
src/views/PaymentPage.vue | 106 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 77 insertions(+), 29 deletions(-)
diff --git a/src/views/PaymentPage.vue b/src/views/PaymentPage.vue
index e721168..c1542b2 100644
--- a/src/views/PaymentPage.vue
+++ b/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">
+ <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" />
- </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">
+ </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 v-model="paymentMethod" label="alipay" />
+
+ </el-radio>
</div>
</div>
+
+
</div>
<!-- 浜岀淮鐮佹敮浠樺尯鍩� -->
@@ -76,7 +83,7 @@
绔嬪嵆鏀粯 楼{{ orderInfo.totalAmount }}
</el-button> -->
<div class="mt-4 text-danger">
- <el-button text type="danger" @click="cancelPayment">鍙栨秷鏀粯</el-button>
+ <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/qrcode-wechat.png' : '/src/assets/qrcode/qrcode-alipay.png';
+ return paymentMethod.value === 'wechat' ? wechartQrcode : alipayQrcode;
});
// 澶勭悊鏀粯
@@ -118,17 +151,32 @@
// 鍙栨秷鏀粯
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>
--
Gitblit v1.9.3