fix: pay
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 1m0s

This commit is contained in:
sexygoat
2026-05-22 15:16:22 +08:00
parent 874ff41ce3
commit 427b211295
11 changed files with 1458 additions and 738 deletions

View File

@@ -216,6 +216,21 @@
return dateStr.split('T')[0] || '-';
};
const resolveAssetRealName = (assetData) => {
const cards = Array.isArray(assetData?.cards) ? assetData.cards : [];
if (cards.length === 1) {
return !!cards[0]?.real_name_at;
}
if (cards.length > 1) {
const currentCard = cards.find(card => card.is_current);
return !!currentCard?.real_name_at;
}
return assetData?.real_name_status === 1;
};
const loadAssetInfo = async () => {
const identifier = userStore.state.identifier;
if (!identifier) return;
@@ -236,8 +251,8 @@
deviceInfo.expireDate = formatDate(data.current_package_expires_at);
deviceInfo.iccid = data.iccid || '-';
deviceInfo.walletBalance = data.wallet_balance ?? 0;
isRealName.value = data.real_name_status === 1;
realNameStatus.value = data.real_name_status === 1 ? '已实名' : '未实名';
isRealName.value = resolveAssetRealName(data);
realNameStatus.value = isRealName.value ? '已实名' : '未实名';
boundPhone.value = data.bound_phone || '';
alreadyBindPhone.value = !!data.bound_phone;

File diff suppressed because it is too large Load Diff

View File

@@ -1,73 +1,66 @@
<template>
<view class="container">
<view class="filter-tabs">
<view v-for="(item, index) in filterOptions" :key="index" class="tab-item"
:class="{ active: filterIndex === index }" @tap="onFilterChange(index)">
<view
v-for="(item, index) in filterOptions"
:key="index"
class="tab-item"
:class="{ active: filterIndex === index }"
@tap="onFilterChange(index)"
>
{{ item.label }}
<view v-if="filterIndex === index" class="tab-line"></view>
</view>
</view>
<scroll-view scroll-y class="scroll-container" @scrolltolower="loadMore">
<view v-if="orderList.length === 0 && !loading" class="empty-state">
<view class="empty-icon">📋</view>
<view class="empty-icon">ORD</view>
<view class="empty-title">暂无订单</view>
<view class="empty-desc">当前账号下暂无订单信息</view>
</view>
<view v-else class="order-list">
<view class="order-card" v-for="(item, index) in orderList" :key="index">
<view class="card-header">
<view class="header-left">
<view class="header-row">
<text class="field-tag">订单号</text>
<text class="order-no">{{ item.order_no }}</text>
<view class="order-card" v-for="item in orderList" :key="item.order_id">
<view class="card-header">
<view class="header-left">
<view class="header-row">
<text class="field-tag">订单号</text>
<text class="order-no">{{ item.order_no }}</text>
</view>
</view>
<view class="status-badge" :class="getStatusClass(item.payment_status)">
{{ item.payment_status_name }}
</view>
</view>
<view class="status-badge" :class="getStatusClass(item.payment_status)">
{{ item.payment_status_name }}
</view>
</view>
<view class="card-body">
<view class="info-grid">
<view class="info-item">
<view class="info-label">套餐名称</view>
<view class="info-value">
<view class="package-item" v-for="(pkgName, pIndex) in item.package_names" :key="pIndex">
<text class="package-name">{{ pkgName }}</text>
<view class="card-body">
<view class="info-grid">
<view class="info-item">
<view class="info-label">套餐名称</view>
<view class="info-value">
<view class="package-item" v-for="(pkgName, pkgIndex) in item.package_names" :key="pkgIndex">
<text class="package-name">{{ pkgName }}</text>
</view>
</view>
</view>
</view>
<view class="info-item">
<view class="info-label">订单金额</view>
<view class="info-value amount">¥{{ formatMoney(item.total_amount) }}</view>
</view>
<view class="info-item">
<view class="info-label">下单时间</view>
<view class="info-value">{{ item.created_at }}</view>
</view>
</view>
<!-- <view class="divider"></view>
<view class="package-section">
<view class="section-label">套餐名称</view>
<view class="package-list">
<view class="package-item" v-for="(pkgName, pIndex) in item.package_names" :key="pIndex">
<text class="package-name">{{ pkgName }}</text>
<view class="info-item">
<view class="info-label">订单金额</view>
<view class="info-value amount">¥{{ formatMoney(item.total_amount) }}</view>
</view>
<view class="info-item">
<view class="info-label">下单时间</view>
<view class="info-value">{{ item.created_at }}</view>
</view>
</view>
</view> -->
<view v-if="item.payment_status === 1" class="card-footer">
<button class="btn-pay" :disabled="orderPayingId !== null" @tap="handleOrderPayment(item)">
{{ isOrderPaying(item) ? '处理中...' : '立即支付' }}
</button>
<view v-if="item.payment_status === 1" class="card-footer">
<button class="btn-pay" :disabled="orderPayingId !== null" @tap="showOrderPaymentMethods(item)">
{{ isOrderPaying(item) ? '处理中...' : '立即支付' }}
</button>
</view>
</view>
</view>
</view>
<view class="load-more" v-if="orderList.length > 0">
<text v-if="loading">加载中...</text>
@@ -80,48 +73,40 @@
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { orderApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
import {
ref,
reactive,
onMounted
} from 'vue';
import {
orderApi
} from '@/api/index.js';
import {
useUserStore
} from '@/store/index.js';
import { wechatH5Pay, handlePaymentError, showPaymentToast } from '@/utils/payment.js';
consumePendingPaymentRefresh,
handlePaymentError,
isValidAlipayPaymentLink,
isValidWechatPayConfig,
openAlipayPayment,
PAYMENT_REFRESH_TARGETS,
showPaymentToast,
wechatH5Pay
} from '@/utils/payment.js';
const userStore = useUserStore();
let orderList = reactive([]);
let loading = ref(false);
let noMore = ref(false);
let page = ref(1);
let orderPayingId = ref(null);
const orderList = reactive([]);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const orderPayingId = ref(null);
const pageSize = 10;
let filterIndex = ref(0);
let filterOptions = [{
label: '全部',
value: null
},
{
label: '待支付',
value: 1
},
{
label: '已支付',
value: 2
},
{
label: '已取消',
value: 3
},
{
label: '已退款',
value: 4
}
const filterIndex = ref(0);
const paymentMethodOptions = [
{ label: '微信支付', value: 'wechat' },
{ label: '支付宝支付', value: 'alipay' }
];
const filterOptions = [
{ label: '全部', value: null },
{ label: '待支付', value: 1 },
{ label: '已支付', value: 2 },
{ label: '已取消', value: 3 },
{ label: '已退款', value: 4 }
];
const formatMoney = (amount) => {
@@ -139,17 +124,35 @@
return classMap[status] || '';
};
const onFilterChange = (index) => {
filterIndex.value = index;
const resetOrderListAndLoad = () => {
page.value = 1;
noMore.value = false;
loadOrderList();
};
const loadOrderList = async (append = false) => {
if (loading.value || noMore.value) return;
loading.value = true;
const scheduleOrderStatusRefresh = () => {
uni.showToast({
title: '正在同步支付状态',
icon: 'none'
});
resetOrderListAndLoad();
setTimeout(() => {
resetOrderListAndLoad();
}, 1500);
setTimeout(() => {
resetOrderListAndLoad();
}, 3000);
};
const onFilterChange = (index) => {
filterIndex.value = index;
resetOrderListAndLoad();
};
const loadOrderList = async (append = false) => {
if (loading.value || (append && noMore.value)) return;
loading.value = true;
const paymentStatus = filterOptions[filterIndex.value].value;
try {
@@ -160,11 +163,17 @@
paymentStatus
);
const newData = (data.items || []).map(item => ({
const newData = (data.items || []).map((item) => ({
...item,
payment_status_name: item.payment_status === 1 ? '待支付' : item.payment_status === 2 ?
'已支付' : item.payment_status === 3 ? '已取消' : item.payment_status === 4 ? '已退款' :
'未知',
payment_status_name: item.payment_status === 1
? '待支付'
: item.payment_status === 2
? '已支付'
: item.payment_status === 3
? '已取消'
: item.payment_status === 4
? '已退款'
: '未知',
created_at: item.created_at ? item.created_at.split('T').join(' ').slice(0, 19) : ''
}));
@@ -177,11 +186,12 @@
if (newData.length < pageSize) {
noMore.value = true;
} else {
page.value++;
page.value += 1;
}
} catch (e) {
console.error('加载订单列表失败', e);
} catch (error) {
console.error('加载订单列表失败', error);
}
loading.value = false;
};
@@ -193,49 +203,68 @@
const isOrderPaying = (order) => orderPayingId.value === order.order_id;
const handleOrderPayment = async (order) => {
const showOrderPaymentMethods = (order) => {
if (orderPayingId.value !== null || !order?.order_id) return;
orderPayingId.value = order.order_id;
uni.showActionSheet({
itemList: paymentMethodOptions.map((item) => item.label),
success: ({ tapIndex }) => {
const selectedMethod = paymentMethodOptions[tapIndex]?.value;
if (selectedMethod) {
handleOrderPayment(order, selectedMethod);
}
}
});
};
const handleOrderPayment = async (order, paymentMethod) => {
if (orderPayingId.value !== null || !order?.order_id) return;
orderPayingId.value = order.order_id;
uni.showLoading({
title: '处理中...',
mask: true
});
try {
const payData = await orderApi.pay(order.order_id, 'wechat');
const payData = await orderApi.pay(order.order_id, paymentMethod);
uni.hideLoading();
if (!payData.pay_config || !payData.pay_config.package) {
if (paymentMethod === 'wechat') {
if (!isValidWechatPayConfig(payData?.pay_config)) {
uni.showToast({
title: '支付参数获取失败',
icon: 'none'
});
return;
}
try {
await wechatH5Pay(payData.pay_config);
showPaymentToast(true, '支付成功');
setTimeout(() => {
resetOrderListAndLoad();
}, 1500);
} catch (error) {
handlePaymentError(error);
}
return;
}
if (!isValidAlipayPaymentLink(payData?.payment_link)) {
uni.showToast({
title: '支付参数获取失败',
title: '支付链接获取失败',
icon: 'none'
});
return;
}
// 调起微信支付
try {
await wechatH5Pay(payData.pay_config);
// 支付成功
showPaymentToast(true, '支付成功');
setTimeout(() => {
page.value = 1;
noMore.value = false;
loadOrderList();
}, 1500);
} catch (error) {
// 支付失败或取消
handlePaymentError(error);
}
} catch (e) {
await openAlipayPayment(payData.payment_link, PAYMENT_REFRESH_TARGETS.ORDER_LIST);
} catch (error) {
uni.hideLoading();
console.error('支付失败', e);
const errorMsg = e.msg || e.message || '支付失败,请稍后重试';
console.error('订单支付失败', error);
uni.showToast({
title: errorMsg,
title: error.msg || error.message || '支付失败,请稍后重试',
icon: 'none'
});
} finally {
@@ -243,6 +272,14 @@
}
};
onShow(() => {
if (!consumePendingPaymentRefresh(PAYMENT_REFRESH_TARGETS.ORDER_LIST)) {
return;
}
scheduleOrderStatusRefresh();
});
onMounted(() => {
loadOrderList();
});
@@ -315,9 +352,10 @@
padding: 200rpx 40rpx;
.empty-icon {
font-size: 120rpx;
font-size: 56rpx;
margin-bottom: 30rpx;
opacity: 0.6;
letter-spacing: 4rpx;
}
.empty-title {
@@ -374,12 +412,6 @@
color: #333;
font-family: monospace;
}
.order-id {
font-size: 24rpx;
color: #666;
font-family: monospace;
}
}
.card-body {
@@ -410,32 +442,15 @@
}
}
.divider {
height: 1rpx;
background: #f5f5f5;
margin: 24rpx 0;
.package-item {
display: flex;
align-items: center;
padding: 8rpx 0;
}
.package-section {
.section-label {
font-size: 22rpx;
color: #999;
margin-bottom: 16rpx;
}
.package-list {
.package-item {
display: flex;
align-items: center;
gap: 12rpx;
padding: 8rpx 0;
.package-name {
font-size: 26rpx;
color: #333;
}
}
}
.package-name {
font-size: 26rpx;
color: #333;
}
.card-footer {
@@ -453,7 +468,7 @@
padding: 16rpx 40rpx;
font-size: 26rpx;
font-weight: 500;
width:100%;
width: 100%;
&[disabled] {
opacity: 0.7;

View File

@@ -1,8 +1,8 @@
<template>
<view class="container">
<view v-if="packageList.length === 0 && !loading" class="empty-state">
<view class="empty-icon">📦</view>
<view class="empty-title">暂无可购套餐,请联系客服</view>
<view class="empty-icon">PKG</view>
<view class="empty-title">暂无可购套餐请联系客服</view>
<view class="empty-desc">当前资产暂无适用的套餐</view>
</view>
@@ -10,7 +10,7 @@
<view class="package-header flex-row-sb">
<view class="package-name">{{ item.package_name }}</view>
<view class="header-right">
<view class="validity-tag">有效期{{ item.validity_days }}</view>
<view class="validity-tag">有效期 {{ item.validity_days }} </view>
<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
{{ item.is_addon ? '加油包' : '正式套餐' }}
</view>
@@ -26,12 +26,11 @@
</view>
</view>
<!-- 支付方式选择弹窗 -->
<up-popup :show="showModal" mode="center" @close="showModal=false">
<up-popup :show="showModal" mode="center" @close="showModal = false">
<view class="payment-popup">
<view class="popup-header">
<view class="popup-title">选择支付方式</view>
<view class="popup-close" @tap="showModal=false">×</view>
<view class="popup-close" @tap="showModal = false">×</view>
</view>
<view class="package-summary">
@@ -45,7 +44,7 @@
<view class="detail-divider"></view>
<view class="detail-item">
<text class="detail-label">有效期</text>
<text class="detail-value">{{ currentPackage?.validity_days }}</text>
<text class="detail-value">{{ currentPackage?.validity_days }} </text>
</view>
</view>
</view>
@@ -59,6 +58,14 @@
<view class="method-radio" :class="{ checked: paymentMethod === 'wechat' }"></view>
</view>
<view class="method-item" :class="{ active: paymentMethod === 'alipay' }" @tap="selectPaymentMethod('alipay')">
<view class="method-left">
<view class="method-icon method-badge method-badge-alipay"></view>
<text class="method-name">支付宝支付</text>
</view>
<view class="method-radio" :class="{ checked: paymentMethod === 'alipay' }"></view>
</view>
<view class="method-item" :class="{ active: paymentMethod === 'wallet' }" @tap="selectPaymentMethod('wallet')">
<view class="method-left">
<image class="method-icon" src="/static/wallet.png" mode="aspectFit"></image>
@@ -69,7 +76,7 @@
</view>
<view class="popup-footer">
<button class="btn-apple btn-secondary" @tap="showModal=false">取消</button>
<button class="btn-apple btn-secondary" @tap="showModal = false">取消</button>
<button class="btn-apple btn-primary" :disabled="paySubmitting" @tap="confirmPay">
{{ paySubmitting ? '处理中...' : '确认支付' }}
</button>
@@ -81,19 +88,29 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { assetApi, orderApi, walletApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
import { wechatH5Pay, handlePaymentError, showPaymentToast } from '@/utils/payment.js';
import {
consumePendingPaymentRefresh,
handlePaymentError,
isValidAlipayPaymentLink,
isValidWechatPayConfig,
openAlipayPayment,
PAYMENT_REFRESH_TARGETS,
showPaymentToast,
wechatH5Pay
} from '@/utils/payment.js';
const userStore = useUserStore();
let showModal = ref(false);
let currentPackage = ref(null);
let packageList = reactive([]);
let loading = ref(false);
let paymentMethod = ref('wechat');
let walletBalance = ref(0);
let paySubmitting = ref(false);
const showModal = ref(false);
const currentPackage = ref(null);
const packageList = reactive([]);
const loading = ref(false);
const paymentMethod = ref('wechat');
const walletBalance = ref(0);
const paySubmitting = ref(false);
const formatMoney = (amount) => {
if (!amount && amount !== 0) return '0.00';
@@ -102,9 +119,9 @@
const formatData = (allowance, unit) => {
if (unit === 'MB') {
return allowance >= 1024 ? (allowance / 1024).toFixed(0) + ' GB' : allowance + ' MB';
return allowance >= 1024 ? `${(allowance / 1024).toFixed(0)} GB` : `${allowance} MB`;
}
return allowance + ' ' + unit;
return `${allowance} ${unit}`;
};
const loadPackages = async () => {
@@ -112,8 +129,8 @@
try {
const data = await assetApi.getPackages(userStore.state.identifier);
packageList.splice(0, packageList.length, ...(data.packages || []));
} catch (e) {
console.error('加载套餐列表失败', e);
} catch (error) {
console.error('加载套餐列表失败', error);
}
loading.value = false;
};
@@ -122,11 +139,16 @@
try {
const data = await walletApi.getDetail(userStore.state.identifier);
walletBalance.value = data.balance || 0;
} catch (e) {
console.error('加载钱包余额失败', e);
} catch (error) {
console.error('加载钱包余额失败', error);
}
};
const syncPackagePageState = () => {
loadPackages();
loadWalletBalance();
};
const buyPackage = (item) => {
currentPackage.value = item;
paymentMethod.value = 'wechat';
@@ -137,27 +159,66 @@
paymentMethod.value = method;
};
const hasPreparedPaymentData = (paymentData) => {
return isValidWechatPayConfig(paymentData?.pay_config) ||
isValidAlipayPaymentLink(paymentData?.payment_link);
};
const handleWechatPay = async (payConfig, isForceRecharge = false) => {
try {
await wechatH5Pay(payConfig);
showPaymentToast(true, isForceRecharge ? '充值成功,套餐将自动购买' : '支付成功');
setTimeout(() => {
loadWalletBalance();
}, 1500);
} catch (error) {
handlePaymentError(error);
}
};
const handlePreparedPayment = async (paymentData, isForceRecharge = false) => {
if (isValidWechatPayConfig(paymentData?.pay_config)) {
await handleWechatPay(paymentData.pay_config, isForceRecharge);
return;
}
if (isValidAlipayPaymentLink(paymentData?.payment_link)) {
await openAlipayPayment(paymentData.payment_link, PAYMENT_REFRESH_TARGETS.PACKAGE_ORDER);
return;
}
uni.showToast({
title: '支付参数获取失败',
icon: 'none'
});
};
const getCreateOrderPaymentMethod = () => {
return paymentMethod.value === 'alipay' ? 'alipay' : undefined;
};
const confirmPay = async () => {
if (paySubmitting.value || !currentPackage.value) return;
paySubmitting.value = true;
let releaseInModalCallback = false;
uni.showLoading({ title: '创建订单...', mask: true });
uni.showLoading({
title: '创建订单...',
mask: true
});
try {
// 第一步:创建订单
const orderResult = await orderApi.create(
userStore.state.identifier,
[currentPackage.value.package_id]
[currentPackage.value.package_id],
getCreateOrderPaymentMethod()
);
// 判断是否为强充订单
if (orderResult.order_type === 'recharge' && orderResult.recharge) {
const recharge = orderResult.recharge;
// 检查充值订单状态
if (recharge.status === 2 || recharge.status === 3) {
// 已关闭或已退款的订单
uni.hideLoading();
showModal.value = false;
uni.showToast({
@@ -168,9 +229,7 @@
return;
}
// 检查充值订单是否已存在(待支付状态但无支付配置)
if (recharge.status === 1 && (!orderResult.pay_config || !orderResult.pay_config.package)) {
// 待支付订单已存在,引导用户跳转到订单页面
if (recharge.status === 1 && !hasPreparedPaymentData(orderResult)) {
uni.hideLoading();
showModal.value = false;
uni.showModal({
@@ -187,36 +246,33 @@
return;
}
// 检查是否有支付配置(新订单应该有)
if (!orderResult.pay_config || !orderResult.pay_config.package) {
if (!hasPreparedPaymentData(orderResult)) {
uni.hideLoading();
showModal.value = false;
uni.showToast({ title: '支付参数获取失败', icon: 'none' });
uni.showToast({
title: '支付参数获取失败',
icon: 'none'
});
return;
}
// 获取强充信息
const forceRechargeAmount = orderResult.linked_package_info?.force_recharge_amount || recharge.amount;
const packageNames = orderResult.linked_package_info?.package_names || [];
const packageNameStr = packageNames.length > 0 ? packageNames.join('、') : '套餐';
uni.hideLoading();
showModal.value = false;
// 提示用户需要强充
const packageNameStr = packageNames.length > 0 ? packageNames.join('、') : '套餐';
const message = `购买${packageNameStr}需要先充值 ¥${formatMoney(forceRechargeAmount)},充值成功后将自动购买套餐`;
releaseInModalCallback = true;
uni.showModal({
title: '需要充值',
content: message,
content: `购买${packageNameStr}需要先充值 ¥${formatMoney(forceRechargeAmount)},充值成功后将自动购买套餐`,
confirmText: '去充值',
cancelText: '取消',
success: async (res) => {
try {
if (res.confirm) {
// 调起微信支付
await handleWechatPay(orderResult.pay_config, true);
await handlePreparedPayment(orderResult, true);
}
} finally {
paySubmitting.value = false;
@@ -229,47 +285,44 @@
return;
}
// 检查是否有订单信息(非强充订单)
if (!orderResult || !orderResult.order) {
if (!orderResult?.order?.order_id) {
uni.hideLoading();
showModal.value = false;
uni.showToast({ title: '订单创建失败', icon: 'none' });
uni.showToast({
title: '订单创建失败',
icon: 'none'
});
return;
}
const orderId = orderResult.order.order_id;
uni.showLoading({
title: '准备支付...',
mask: true
});
// 第二步:获取支付参数
uni.showLoading({ title: '准备支付...', mask: true });
const payResult = await orderApi.pay(orderId, paymentMethod.value);
const payResult = await orderApi.pay(orderResult.order.order_id, paymentMethod.value);
uni.hideLoading();
showModal.value = false;
// 处理不同支付方式
if (paymentMethod.value === 'wechat') {
// 微信支付
if (!payResult.pay_config || !payResult.pay_config.package) {
uni.showToast({ title: '支付参数获取失败', icon: 'none' });
return;
}
await handleWechatPay(payResult.pay_config);
} else if (paymentMethod.value === 'wallet') {
// 钱包支付成功
uni.showToast({ title: '支付成功', icon: 'success' });
if (paymentMethod.value === 'wallet') {
uni.showToast({
title: '支付成功',
icon: 'success'
});
setTimeout(() => {
loadWalletBalance();
}, 1500);
return;
}
} catch (e) {
await handlePreparedPayment(payResult);
} catch (error) {
uni.hideLoading();
showModal.value = false;
console.error('创建订单或支付失败', e);
console.error('创建订单或支付失败', error);
// 特殊错误处理:订单正在创建中
if (e.code === 1008) {
if (error.code === 1008) {
uni.showModal({
title: '提示',
content: '订单正在创建中,是否跳转到我的订单页面进行支付?',
@@ -283,9 +336,10 @@
return;
}
// 其他错误提示
const errorMsg = e.msg || e.message || '操作失败,请稍后重试';
uni.showToast({ title: errorMsg, icon: 'none' });
uni.showToast({
title: error.msg || error.message || '操作失败,请稍后重试',
icon: 'none'
});
} finally {
if (!releaseInModalCallback) {
paySubmitting.value = false;
@@ -293,24 +347,27 @@
}
};
const handleWechatPay = async (payConfig, isForceRecharge = false) => {
try {
await wechatH5Pay(payConfig);
// 支付成功
const successMsg = isForceRecharge ? '充值成功,套餐将自动购买' : '支付成功';
showPaymentToast(true, successMsg);
setTimeout(() => {
loadWalletBalance();
}, 1500);
} catch (error) {
// 支付失败或取消
handlePaymentError(error);
onShow(() => {
if (!consumePendingPaymentRefresh(PAYMENT_REFRESH_TARGETS.PACKAGE_ORDER)) {
return;
}
};
syncPackagePageState();
uni.showModal({
title: '支付状态确认',
content: '已返回页面,支付结果以订单状态为准。是否前往我的订单查看最新状态?',
confirmText: '查看订单',
cancelText: '稍后',
success: (res) => {
if (res.confirm) {
uni.navigateTo({ url: '/pages/order-list/order-list' });
}
}
});
});
onMounted(() => {
loadPackages();
loadWalletBalance();
syncPackagePageState();
});
</script>
@@ -323,20 +380,45 @@
justify-content: center;
padding: 120rpx 40rpx;
min-height: 400rpx;
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
.empty-icon {
font-size: 60rpx;
margin-bottom: 30rpx;
opacity: 0.6;
letter-spacing: 4rpx;
}
.empty-title {
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 16rpx;
}
.empty-desc {
font-size: 26rpx;
color: var(--text-tertiary);
text-align: center;
}
}
.package-card {
margin-bottom: var(--space-md);
.package-header {
margin-bottom: var(--space-sm);
.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
.package-name {
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
}
.header-right {
display: flex;
align-items: center;
gap: 12rpx;
.validity-tag {
font-size: 24rpx;
color: var(--text-secondary);
@@ -346,6 +428,7 @@
}
}
}
.package-data {
font-size: 48rpx;
font-weight: 700;
@@ -353,18 +436,22 @@
margin-bottom: var(--space-sm);
letter-spacing: -1rpx;
}
.package-desc {
font-size: 26rpx;
color: var(--text-secondary);
margin-bottom: var(--space-md);
}
.package-footer {
align-items: center;
.package-price {
font-size: 40rpx;
font-weight: 700;
color: var(--warning);
}
.btn {
flex-shrink: 0;
}
@@ -492,6 +579,21 @@
height: 64rpx;
}
.method-badge {
display: flex;
align-items: center;
justify-content: center;
border-radius: 18rpx;
font-size: 32rpx;
font-weight: 700;
color: #fff;
}
.method-badge-alipay {
background: linear-gradient(135deg, #1677ff 0%, #45a5ff 100%);
box-shadow: 0 8rpx 20rpx rgba(22, 119, 255, 0.2);
}
.method-name {
font-size: 28rpx;
font-weight: 500;
@@ -532,24 +634,24 @@
padding: 30rpx;
border-top: 1rpx solid var(--border-light);
.btn-apple {
flex: 1;
height: 88rpx;
display: flex;
.btn-apple {
flex: 1;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-medium);
font-size: 28rpx;
font-weight: 500;
border: none;
font-size: 28rpx;
font-weight: 500;
border: none;
&[disabled] {
opacity: 0.7;
}
&[disabled] {
opacity: 0.7;
}
&.btn-secondary {
background: var(--gray-200);
color: var(--text-primary);
&.btn-secondary {
background: var(--gray-200);
color: var(--text-primary);
}
&.btn-primary {