chore: stabilize lint and verify builds
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { orderApi } from "../../api/order";
|
||||
import { tenantPath } from "../../utils/tenant";
|
||||
@@ -13,8 +13,8 @@ const amount = ref("0.00");
|
||||
const productName = ref("");
|
||||
const orderStatus = ref("");
|
||||
|
||||
const paymentMethod = ref("alipay");
|
||||
const timeLeft = ref(900); // 15 minutes
|
||||
const paymentMethod = ref("balance");
|
||||
const timeLeft = ref(900);
|
||||
const isScanning = ref(false);
|
||||
const isSuccess = ref(false);
|
||||
let timer = null;
|
||||
@@ -23,10 +23,6 @@ let pollRetries = 0;
|
||||
const MAX_POLL_RETRIES = 20;
|
||||
const errorMessage = ref("");
|
||||
|
||||
const paymentMethodName = computed(() => {
|
||||
return paymentMethod.value === "alipay" ? "支付宝" : "余额";
|
||||
});
|
||||
|
||||
const formatTime = (seconds) => {
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = seconds % 60;
|
||||
@@ -151,112 +147,46 @@ onUnmounted(() => {
|
||||
|
||||
<div class="p-8 md:p-12">
|
||||
<!-- Amount -->
|
||||
<div class="text-center mb-10">
|
||||
<p class="text-slate-500 mb-2">订单提交成功,请尽快支付</p>
|
||||
<div class="text-4xl font-bold text-slate-900">¥ {{ amount }}</div>
|
||||
<div class="text-sm text-slate-500 mt-2">
|
||||
商品:{{ productName || "加载中..." }}
|
||||
</div>
|
||||
<div class="text-xs text-slate-400 mt-1">
|
||||
状态:{{ orderStatus || "pending" }}
|
||||
</div>
|
||||
<div v-if="errorMessage" class="text-xs text-red-500 mt-2">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<div class="text-center mb-10">
|
||||
<p class="text-slate-500 mb-2">订单提交成功,请尽快支付</p>
|
||||
<div class="text-4xl font-bold text-slate-900">¥ {{ amount }}</div>
|
||||
<div class="text-sm text-slate-500 mt-2">
|
||||
商品:{{ productName || "加载中..." }}
|
||||
</div>
|
||||
<div class="text-xs text-slate-400 mt-1">
|
||||
状态:{{ orderStatus || "pending" }}
|
||||
</div>
|
||||
<div v-if="errorMessage" class="text-xs text-red-500 mt-2">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<!-- Payment Methods -->
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-bold text-slate-900 mb-4">选择支付方式</h3>
|
||||
|
||||
<label
|
||||
class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer transition-all"
|
||||
:class="
|
||||
paymentMethod === 'alipay'
|
||||
? 'border-blue-500 bg-blue-50/30 ring-1 ring-blue-500'
|
||||
: 'border-slate-200 hover:border-slate-300'
|
||||
"
|
||||
<h3 class="font-bold text-slate-900 mb-4">余额支付</h3>
|
||||
<div
|
||||
class="flex items-center gap-4 p-4 border border-slate-200 rounded-xl bg-slate-50"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
v-model="paymentMethod"
|
||||
value="alipay"
|
||||
class="hidden"
|
||||
/>
|
||||
<i class="pi pi-alipay text-3xl text-blue-500"></i>
|
||||
<i class="pi pi-wallet text-3xl text-primary-600"></i>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold text-slate-900">支付宝</div>
|
||||
<div class="font-bold text-slate-900">使用账户余额支付</div>
|
||||
<div class="text-xs text-slate-500">
|
||||
若余额不足,请先使用充值码充值
|
||||
</div>
|
||||
</div>
|
||||
<i
|
||||
v-if="paymentMethod === 'alipay'"
|
||||
class="pi pi-check-circle text-blue-500 text-xl"
|
||||
></i>
|
||||
</label>
|
||||
|
||||
<label
|
||||
class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer transition-all opacity-50 bg-slate-50"
|
||||
>
|
||||
<input type="radio" value="balance" disabled class="hidden" />
|
||||
<i class="pi pi-wallet text-3xl text-slate-400"></i>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold text-slate-400">余额支付</div>
|
||||
<div class="text-xs text-slate-400">余额不足 (¥ 0.00)</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Area -->
|
||||
<div
|
||||
class="flex flex-col items-center justify-center border-t md:border-t-0 md:border-l border-slate-100 pt-8 md:pt-0 md:pl-8"
|
||||
>
|
||||
<div
|
||||
class="bg-white p-4 border border-slate-200 rounded-xl shadow-sm mb-4"
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<button
|
||||
@click="payOrder"
|
||||
class="px-6 py-3 rounded-lg bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-60"
|
||||
:disabled="isScanning || isSuccess"
|
||||
>
|
||||
<!-- Mock QR -->
|
||||
<div
|
||||
class="w-48 h-48 bg-slate-100 flex items-center justify-center relative overflow-hidden"
|
||||
>
|
||||
<i class="pi pi-qrcode text-6xl text-slate-300"></i>
|
||||
<!-- Loading Overlay -->
|
||||
<div
|
||||
v-if="isScanning"
|
||||
class="absolute inset-0 bg-white/90 flex flex-col items-center justify-center"
|
||||
>
|
||||
<i
|
||||
class="pi pi-spin pi-spinner text-3xl text-primary-600 mb-2"
|
||||
></i>
|
||||
<span class="text-xs text-slate-500"
|
||||
>正在获取支付结果...</span
|
||||
>
|
||||
</div>
|
||||
<!-- Success Overlay -->
|
||||
<div
|
||||
v-if="isSuccess"
|
||||
class="absolute inset-0 bg-green-500 flex flex-col items-center justify-center text-white animate-in zoom-in"
|
||||
>
|
||||
<i class="pi pi-check-circle text-5xl mb-2"></i>
|
||||
<span class="font-bold">支付成功</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="text-sm font-bold text-slate-700 mb-1">
|
||||
使用 {{ paymentMethodName }} 扫一扫
|
||||
</p>
|
||||
<p class="text-xs text-slate-400">二维码有效时间 2小时</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center gap-3 mt-6">
|
||||
<button
|
||||
@click="payOrder"
|
||||
class="px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 disabled:opacity-60"
|
||||
:disabled="isScanning || isSuccess"
|
||||
>
|
||||
{{ isScanning ? "支付中..." : "立即支付" }}
|
||||
</button>
|
||||
{{ isScanning ? "支付中..." : "确认余额支付" }}
|
||||
</button>
|
||||
<div v-if="isSuccess" class="text-sm text-green-600">
|
||||
支付成功,正在跳转...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import Toast from "primevue/toast";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import { userApi } from "../../api/user";
|
||||
@@ -7,18 +7,10 @@ import dayjs from "dayjs";
|
||||
|
||||
const toast = useToast();
|
||||
const showRecharge = ref(false);
|
||||
const selectedAmount = ref(50);
|
||||
const customAmount = ref("");
|
||||
const balance = ref(0);
|
||||
const transactions = ref([]);
|
||||
const loading = ref(false);
|
||||
const paymentMethod = ref("alipay");
|
||||
|
||||
const displayAmount = computed(() => {
|
||||
return customAmount.value
|
||||
? Number(customAmount.value).toFixed(2)
|
||||
: selectedAmount.value.toFixed(2);
|
||||
});
|
||||
const rechargeCode = ref("");
|
||||
|
||||
const formatDate = (date) => {
|
||||
return dayjs(date).format("YYYY-MM-DD HH:mm");
|
||||
@@ -41,12 +33,12 @@ const fetchWallet = async () => {
|
||||
};
|
||||
|
||||
const handleRecharge = async () => {
|
||||
const amount = Number(displayAmount.value);
|
||||
if (!amount || amount <= 0) {
|
||||
const code = rechargeCode.value.trim();
|
||||
if (!code) {
|
||||
toast.add({
|
||||
severity: "warn",
|
||||
summary: "提示",
|
||||
detail: "请输入有效的充值金额",
|
||||
detail: "请输入充值码",
|
||||
life: 3000,
|
||||
});
|
||||
return;
|
||||
@@ -54,15 +46,16 @@ const handleRecharge = async () => {
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
await userApi.recharge({ amount: amount, method: paymentMethod.value });
|
||||
await userApi.recharge({ code });
|
||||
toast.add({
|
||||
severity: "success",
|
||||
summary: "成功",
|
||||
detail: "充值成功",
|
||||
life: 3000,
|
||||
});
|
||||
rechargeCode.value = "";
|
||||
showRecharge.value = false;
|
||||
fetchWallet(); // Refresh balance
|
||||
fetchWallet();
|
||||
} catch (error) {
|
||||
console.error("Recharge failed:", error);
|
||||
toast.add({
|
||||
@@ -121,57 +114,26 @@ onMounted(() => {
|
||||
v-if="showRecharge"
|
||||
class="mb-10 p-6 bg-slate-50 rounded-xl border border-slate-200 animate-in fade-in slide-in-from-top-4 duration-300"
|
||||
>
|
||||
<h3 class="font-bold text-slate-900 mb-4">充值金额</h3>
|
||||
<div class="grid grid-cols-3 sm:grid-cols-4 gap-4 mb-6">
|
||||
<button
|
||||
v-for="amount in [10, 30, 50, 100, 200, 500]"
|
||||
:key="amount"
|
||||
@click="
|
||||
selectedAmount = amount;
|
||||
customAmount = '';
|
||||
"
|
||||
class="h-14 rounded-lg border-2 font-bold text-lg transition-all cursor-pointer active:scale-95"
|
||||
:class="
|
||||
selectedAmount === amount
|
||||
? 'border-blue-600 bg-blue-50 text-blue-600'
|
||||
: 'border-slate-200 bg-white text-slate-600 hover:border-blue-300'
|
||||
"
|
||||
>
|
||||
{{ amount }}元
|
||||
</button>
|
||||
<div class="col-span-2 sm:col-span-2 relative">
|
||||
<input
|
||||
v-model="customAmount"
|
||||
@focus="selectedAmount = null"
|
||||
type="number"
|
||||
placeholder="自定义金额"
|
||||
class="w-full h-14 pl-4 pr-4 rounded-lg border-2 border-slate-200 focus:border-blue-600 focus:outline-none text-lg font-bold transition-colors"
|
||||
/>
|
||||
<h3 class="font-bold text-slate-900 mb-4">充值码</h3>
|
||||
<div class="flex flex-col gap-4 mb-6">
|
||||
<input
|
||||
v-model="rechargeCode"
|
||||
type="text"
|
||||
placeholder="请输入充值码"
|
||||
class="w-full h-14 px-4 rounded-lg border-2 border-slate-200 focus:border-blue-600 focus:outline-none text-lg font-semibold"
|
||||
/>
|
||||
<div class="text-xs text-slate-500">
|
||||
充值码由平台发放,成功后余额立即到账。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="font-bold text-slate-900 mb-4">支付方式</h3>
|
||||
<div class="flex gap-4 mb-8">
|
||||
<button
|
||||
@click="paymentMethod = 'alipay'"
|
||||
class="flex items-center gap-2 px-6 py-3 border-2 rounded-lg font-medium cursor-pointer active:scale-95 transition-transform"
|
||||
:class="
|
||||
paymentMethod === 'alipay'
|
||||
? 'border-blue-600 bg-blue-50 text-blue-700'
|
||||
: 'border-slate-200 text-slate-600 hover:bg-white hover:border-slate-300'
|
||||
"
|
||||
>
|
||||
<i class="pi pi-alipay text-xl text-blue-500"></i> 支付宝
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="handleRecharge"
|
||||
:disabled="loading"
|
||||
class="w-full py-4 bg-blue-600 text-white rounded-xl font-bold text-lg hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 cursor-pointer active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<i v-if="loading" class="pi pi-spin pi-spinner mr-2"></i>
|
||||
确认支付 ¥ {{ displayAmount }}
|
||||
确认充值
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user