luo/device-voice-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
luo
2026-07-30 15:41:11 +08:00
parent d0f032aa1c
commit 5f8ff768e6
4 changed files with 332 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
pages/my-wallet/my-wallet.vue
View File

@@ -55,10 +55,6 @@
<view class="info-label">充值金额</view>
<view class="info-value text-danger">+¥{{ formatMoney(item.amount) }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">支付方式</view>
<view class="info-value">{{ formatPaymentMethod(item.payment_method) }}</view>
</view>
<view v-if="hasAutoPurchaseStatus(item)" class="info-row flex-row-sb">
<view class="info-label">自动购包</view>
<view class="info-value">{{ getAutoPurchaseStatusText(item.auto_purchase_status) }}</view>
@@ -173,6 +169,53 @@
<button class="btn-apple btn-primary" :disabled="rechargeSubmitting" @tap="confirmRecharge">
{{ rechargeSubmitting ? '处理中...' : '确认充值' }}
</button>
</view>
</view>
</up-popup>
<up-popup :show="showRechargeOrderPaymentModal" mode="center" @close="closeRechargeOrderPaymentModal">
<view class="recharge-popup recharge-order-payment-popup">
<view class="popup-header">
<view class="popup-title">选择支付方式</view>
<view class="popup-close" @tap="closeRechargeOrderPaymentModal">×</view>
</view>
<view class="package-summary">
<view class="summary-label">充值订单</view>
<view class="summary-name">{{ selectedRechargeOrder?.recharge_order_no || selectedRechargeOrder?.recharge_no || '充值订单' }}</view>
<view class="summary-price">¥{{ formatMoney(selectedRechargeOrder?.amount) }}</view>
<view class="summary-details">
<view class="detail-item">
<text class="detail-label">充值金额</text>
<text class="detail-value">¥{{ formatMoney(selectedRechargeOrder?.amount) }}</text>
</view>
</view>
</view>
<view class="payment-methods">
<view
v-for="method in paymentMethodOptions"
:key="method.value"
class="method-item"
:class="{ active: rechargePaymentMethod === method.value }"
@tap="selectRechargePaymentMethod(method.value)"
>
<view class="method-left">
<image v-if="method.value === 'alipay'" class="method-icon" src="/static/支付宝支付.png" mode="aspectFit"></image>
<image v-else-if="method.value === 'wechat'" class="method-icon" src="/static/微信支付.png" mode="aspectFit"></image>
<image v-else class="method-icon" src="/static/wallet.png" mode="aspectFit"></image>
<text class="method-name">{{ method.label }}</text>
</view>
<view class="method-radio" :class="{ checked: rechargePaymentMethod === method.value }"></view>
</view>
<view v-if="paymentMethodOptions.length === 0" class="method-empty">暂无可用支付方式</view>
</view>
<view class="popup-footer">
<button class="btn-apple btn-secondary" @tap="closeRechargeOrderPaymentModal">取消</button>
<button class="btn-apple btn-primary" :disabled="rechargeOrderSubmittingKey !== null" @tap="confirmRechargeOrderPayment">
{{ rechargeOrderSubmittingKey !== null ? '处理中...' : '确认支付' }}
</button>
</view>
</view>
</up-popup>
@@ -221,6 +264,8 @@
const transactionPageSize = 5;
const showRechargeModal = ref(false);
const showRechargeOrderPaymentModal = ref(false);
const selectedRechargeOrder = ref(null);
const selectedAmount = ref(null);
const isCustomAmount = ref(false);
const customAmount = ref('');
@@ -251,15 +296,6 @@
return parseFloat(amount).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
const formatPaymentMethod = (method) => {
const labelMap = {
wechat: '微信支付',
alipay: '支付宝支付',
wallet: '钱包支付'
};
return labelMap[method] || method || '-';
};
const getRechargeStatusClass = (status) => {
const classMap = {
0: 'tag-warning',
@@ -377,6 +413,12 @@
rechargePaymentMethod.value = method;
};
const closeRechargeOrderPaymentModal = () => {
if (rechargeOrderSubmittingKey.value !== null) return;
showRechargeOrderPaymentModal.value = false;
selectedRechargeOrder.value = null;
};
const loadWalletDetail = async () => {
try {
const data = await walletApi.getDetail(userStore.state.identifier);
@@ -642,18 +684,27 @@
applyRechargeCheck(await walletApi.rechargeCheck(userStore.state.identifier));
} catch (error) {
console.error('加载充值支付方式失败', error);
uni.showToast({ title: error.msg || error.message || '加载支付方式失败', icon: 'none' });
return;
}
const options = paymentMethodOptions.value;
if (!paymentMethodOptions.value.length) {
uni.showToast({ title: '暂无可用支付方式', icon: 'none' });
return;
}
rechargePaymentMethod.value = getDefaultPaymentMethod(rechargeAllowedPaymentMethods.value);
selectedRechargeOrder.value = rechargeOrder;
showRechargeOrderPaymentModal.value = true;
};
uni.showActionSheet({
itemList: options.map((item) => item.label),
success: ({ tapIndex }) => {
const selectedMethod = options[tapIndex]?.value;
if (selectedMethod) {
handleRechargePayment(rechargeOrder, selectedMethod);
}
}
});
const confirmRechargeOrderPayment = async () => {
if (!selectedRechargeOrder.value || rechargeOrderSubmittingKey.value !== null) return;
const rechargeOrder = selectedRechargeOrder.value;
const paymentMethod = rechargePaymentMethod.value;
showRechargeOrderPaymentModal.value = false;
await handleRechargePayment(rechargeOrder, paymentMethod);
if (rechargeOrderSubmittingKey.value === null) {
selectedRechargeOrder.value = null;
}
};
const handleRechargePayment = async (rechargeOrder, paymentMethod) => {
@@ -1149,4 +1200,64 @@
}
}
}
.recharge-order-payment-popup {
.package-summary {
padding: 40rpx 30rpx 30rpx;
background: linear-gradient(135deg, rgba(85, 171, 92, 0.05) 0%, rgba(85, 171, 92, 0.02) 100%);
border-bottom: 1rpx solid var(--border-light);
text-align: center;
.summary-label {
font-size: 22rpx;
color: var(--text-tertiary);
}
.summary-name {
margin: 20rpx 0 0;
font-size: 32rpx;
font-weight: 700;
line-height: 1.4;
color: var(--text-primary);
}
.summary-price {
margin: 20rpx 0 24rpx;
font-size: 56rpx;
font-weight: 700;
letter-spacing: -1rpx;
color: var(--primary);
}
.summary-details {
display: flex;
align-items: center;
justify-content: center;
padding-top: 20rpx;
border-top: 1rpx solid rgba(85, 171, 92, 0.1);
.detail-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
.detail-label {
font-size: 22rpx;
color: var(--text-tertiary);
}
.detail-value {
font-size: 26rpx;
font-weight: 600;
color: var(--text-primary);
}
}
}
}
.payment-methods {
padding: 30rpx;
}
}
</style>