This commit is contained in:
@@ -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
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user