|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- 顶部导航 -->
|
|
|
<!-- <view class="header">
|
|
|
<view class="header-title">确认支付</view>
|
|
|
</view> -->
|
|
|
|
|
|
<!-- 订单信息 -->
|
|
|
<view class="order-info">
|
|
|
<view class="order-title">订单详情</view>
|
|
|
<view class="order-item">
|
|
|
<view class="item-name">{{ planName }}</view>
|
|
|
<view class="item-price">¥{{ planPrice }}</view>
|
|
|
</view>
|
|
|
<!-- <view class="order-total">
|
|
|
<text class="total-label">合计：</text>
|
|
|
<text class="total-price">¥{{ planPrice }}</text>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
|
|
|
<!-- 支付方式 -->
|
|
|
<view class="payment-section">
|
|
|
<view class="section-title">选择支付方式</view>
|
|
|
|
|
|
<!-- 钱包支付 -->
|
|
|
<view class="payment-item" :class="{ active: selectedPayment === 'wallet' }"
|
|
|
@click="selectPayment('wallet')">
|
|
|
<view class="payment-info">
|
|
|
<uv-icon name="empty-coupon" color="#07c160" size="24"></uv-icon>
|
|
|
<view class="payment-details">
|
|
|
<text class="payment-name">钱包支付</text>
|
|
|
<text class="payment-desc">余额：¥{{ walletBalance }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wallet' ? '#ff3333' : '#ccc'"
|
|
|
size="20"></uv-icon>
|
|
|
</view>
|
|
|
|
|
|
<!-- 微信支付 -->
|
|
|
<view class="payment-item" :class="{ active: selectedPayment === 'wxpay' }" @click="selectPayment('wxpay')">
|
|
|
<view class="payment-info">
|
|
|
<uv-icon name="weixin-fill" color="#07c160" size="24"></uv-icon>
|
|
|
<view class="payment-details">
|
|
|
<text class="payment-name">微信支付</text>
|
|
|
<text class="payment-desc">推荐使用微信支付</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wxpay' ? '#ff3333' : '#ccc'"
|
|
|
size="20"></uv-icon>
|
|
|
</view>
|
|
|
|
|
|
<!-- 支付宝支付 - 仅在H5环境显示 -->
|
|
|
<view v-if="showAlipay" class="payment-item" :class="{ active: selectedPayment === 'alipay' }"
|
|
|
@click="selectPayment('alipay')">
|
|
|
<view class="payment-info">
|
|
|
<uv-icon name="/static/imgs/alipay.png" color="#1677ff" size="24"></uv-icon>
|
|
|
<view class="payment-details">
|
|
|
<text class="payment-name">支付宝</text>
|
|
|
<text class="payment-desc">安全便捷的支付方式</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
|
|
|
size="20"></uv-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部支付按钮 -->
|
|
|
<view class="bottom-section">
|
|
|
<uv-button type="primary" size="large" @click="confirmPayment" :loading="paying">
|
|
|
立即支付 ¥{{ planPrice }}
|
|
|
</uv-button>
|
|
|
<view class="agreement">
|
|
|
支付即表示同意
|
|
|
<text class="link" @click="showAgreement">《会员服务协议》</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
ref,
|
|
|
onMounted
|
|
|
} from "vue";
|
|
|
import {
|
|
|
onLoad,
|
|
|
onShow
|
|
|
} from "@dcloudio/uni-app";
|
|
|
import {
|
|
|
useAuthStore,
|
|
|
useUserStore
|
|
|
} from "@/store";
|
|
|
import RPC from "@/utils/request";
|
|
|
|
|
|
const authStore = useAuthStore();
|
|
|
const userStore = useUserStore();
|
|
|
|
|
|
// 页面参数
|
|
|
const planId = ref('');
|
|
|
const planName = ref('');
|
|
|
const planPrice = ref(0);
|
|
|
|
|
|
// 响应式数据
|
|
|
const selectedPayment = ref("wxpay"); // 默认选中微信支付
|
|
|
const paying = ref(false);
|
|
|
const showAlipay = ref(true); // 控制是否显示支付宝选项
|
|
|
const walletBalance = ref(0);
|
|
|
|
|
|
// 获取钱包余额
|
|
|
const getWalletBalance = async () => {
|
|
|
try {
|
|
|
const res = await RPC.post('/membership/user/info', {
|
|
|
user_id: userStore.userInfo.id
|
|
|
});
|
|
|
walletBalance.value = res.wallet_balance || 0;
|
|
|
} catch (error) {
|
|
|
console.error('获取钱包余额失败:', error);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 选择支付方式
|
|
|
const selectPayment = (payment) => {
|
|
|
selectedPayment.value = payment;
|
|
|
};
|
|
|
|
|
|
// 页面加载时获取参数
|
|
|
onLoad((options) => {
|
|
|
planId.value = Number(options.planId) || '';
|
|
|
planName.value = decodeURIComponent(options.planName || '');
|
|
|
planPrice.value = parseFloat(options.planPrice || 0);
|
|
|
});
|
|
|
|
|
|
onShow(() => {
|
|
|
getWalletBalance();
|
|
|
});
|
|
|
|
|
|
// 检查当前环境并设置支付选项
|
|
|
const checkEnvironment = () => {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
// 微信小程序环境，隐藏支付宝选项
|
|
|
showAlipay.value = false;
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef H5
|
|
|
// H5环境，显示所有支付选项
|
|
|
showAlipay.value = true;
|
|
|
// #endif
|
|
|
};
|
|
|
|
|
|
// 微信支付
|
|
|
const wechatPay = async (orderInfo) => {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
// 微信小程序支付
|
|
|
try {
|
|
|
const paymentResult = await uni.requestPayment({
|
|
|
provider: "wxpay",
|
|
|
timeStamp: orderInfo.timeStamp,
|
|
|
nonceStr: orderInfo.nonceStr,
|
|
|
package: orderInfo.package,
|
|
|
signType: orderInfo.signType,
|
|
|
paySign: orderInfo.paySign,
|
|
|
});
|
|
|
|
|
|
console.log("微信支付成功:", paymentResult);
|
|
|
return {
|
|
|
success: true,
|
|
|
data: paymentResult
|
|
|
};
|
|
|
} catch (error) {
|
|
|
console.error("微信支付失败:", error);
|
|
|
if (error.errMsg === "requestPayment:fail cancel") {
|
|
|
throw new Error("用户取消支付");
|
|
|
}
|
|
|
throw new Error("微信支付失败");
|
|
|
}
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef H5
|
|
|
// H5微信支付
|
|
|
const payUrl = orderInfo.mwebUrl; // 后端返回的H5支付链接
|
|
|
window.location.href = payUrl;
|
|
|
return {
|
|
|
success: true,
|
|
|
redirect: true
|
|
|
};
|
|
|
// #endif
|
|
|
};
|
|
|
|
|
|
// 支付宝支付（仅H5环境）
|
|
|
const alipayPay = async (orderInfo) => {
|
|
|
// #ifdef H5
|
|
|
// H5支付宝支付
|
|
|
const payUrl = orderInfo.pay_url; // 后端返回的支付宝H5支付链接
|
|
|
window.location.href = payUrl;
|
|
|
return {
|
|
|
success: true,
|
|
|
redirect: true
|
|
|
};
|
|
|
// #endif
|
|
|
};
|
|
|
|
|
|
function showModalAsync(options) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
uni.showModal({
|
|
|
...options,
|
|
|
success: (res) => {
|
|
|
resolve(res);
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
reject(err);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 确认支付
|
|
|
const confirmPayment = async () => {
|
|
|
if (!selectedPayment.value) {
|
|
|
uni.showToast({
|
|
|
title: "请选择支付方式",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
paying.value = true;
|
|
|
try {
|
|
|
// 1. 创建订单参数
|
|
|
const orderParams = {
|
|
|
user_id: userStore.userInfo?.id,
|
|
|
plan_id: planId.value,
|
|
|
pay_channel: selectedPayment.value
|
|
|
};
|
|
|
|
|
|
uni.showLoading({
|
|
|
title: "正在创建订单...",
|
|
|
});
|
|
|
|
|
|
// 2. 创建订单
|
|
|
const orderNum = await RPC.post('/membership/order/create', orderParams);
|
|
|
|
|
|
uni.hideLoading();
|
|
|
let orderResult = {}
|
|
|
|
|
|
// 3. 根据支付方式调用对应的支付方法
|
|
|
let paymentResult;
|
|
|
if (selectedPayment.value === "wxpay") {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
const res = await uni.login({
|
|
|
provider: 'weixin'
|
|
|
})
|
|
|
orderResult = await RPC.post('/membership/order/pay_by_wechat_mini', {
|
|
|
code: res.code,
|
|
|
"order_no": orderNum.order_no
|
|
|
})
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef H5
|
|
|
orderResult = await RPC.post('/membership/order/pay_by_wechat_h5', {
|
|
|
"order_no": orderNum.order_no
|
|
|
})
|
|
|
// #endif
|
|
|
|
|
|
uni.showLoading({
|
|
|
title: "正在跳转微信支付...",
|
|
|
});
|
|
|
console.log('orderResult', orderResult)
|
|
|
paymentResult = await wechatPay(orderResult);
|
|
|
} else if (selectedPayment.value === "alipay") {
|
|
|
orderResult = await RPC.post('/membership/order/pay_by_alipay', {
|
|
|
"order_no": orderNum.order_no
|
|
|
})
|
|
|
uni.showLoading({
|
|
|
title: "正在跳转支付宝...",
|
|
|
});
|
|
|
console.log('orderResult', orderResult)
|
|
|
paymentResult = await alipayPay(orderResult);
|
|
|
} else if (selectedPayment.value === 'wallet') {
|
|
|
const res = await showModalAsync({
|
|
|
title: '确认支付',
|
|
|
content: '确认使用钱包余额支付？'
|
|
|
});
|
|
|
|
|
|
if (res.confirm) {
|
|
|
paymentResult = await RPC.post('/membership/order/pay_by_wallet', {
|
|
|
order_no: orderNum.order_no
|
|
|
})
|
|
|
console.log('paymentResult', paymentResult)
|
|
|
} else if (res.cancel) {
|
|
|
console.log('用户点击了取消');
|
|
|
paymentResult = { success: false }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
uni.hideLoading();
|
|
|
console.log('paymentResult', paymentResult)
|
|
|
|
|
|
// 4. 处理支付结果
|
|
|
if (paymentResult?.success) {
|
|
|
if (paymentResult.redirect) {
|
|
|
// H5跳转支付，不需要额外处理
|
|
|
uni.showToast({
|
|
|
title: "正在跳转支付页面...",
|
|
|
icon: "loading",
|
|
|
duration: 2000,
|
|
|
});
|
|
|
} else {
|
|
|
// 支付成功
|
|
|
setTimeout(() => {
|
|
|
uni.showToast({
|
|
|
title: "支付成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
// 延迟跳转回上一页或首页
|
|
|
setTimeout(() => {
|
|
|
uni.navigateBack({
|
|
|
delta: 2 // 返回到会员页面
|
|
|
});
|
|
|
}, 1500);
|
|
|
}, 1000)
|
|
|
}
|
|
|
}
|
|
|
} catch (error) {
|
|
|
uni.hideLoading();
|
|
|
console.error("支付失败:", error);
|
|
|
let errorMessage = "支付失败，请重试";
|
|
|
if (error.message === "用户取消支付") {
|
|
|
errorMessage = "支付已取消";
|
|
|
} else if (error.message) {
|
|
|
errorMessage = error.message;
|
|
|
} else if (error) {
|
|
|
errorMessage = error
|
|
|
}
|
|
|
|
|
|
uni.showToast({
|
|
|
title: errorMessage,
|
|
|
icon: "none",
|
|
|
});
|
|
|
} finally {
|
|
|
paying.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 显示协议
|
|
|
const showAgreement = () => {
|
|
|
uni.navigateTo({
|
|
|
url: "/pagesA/user-agreement/user-agreement",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
checkEnvironment();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
font-size: 14px;
|
|
|
background-color: #f8f8f8;
|
|
|
min-height: 100vh;
|
|
|
padding-bottom: 120px;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
background: white;
|
|
|
padding: 20px 16px;
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
.header-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.order-info {
|
|
|
background: white;
|
|
|
margin: 16px;
|
|
|
border-radius: 12px;
|
|
|
padding: 16px;
|
|
|
|
|
|
.order-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.order-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 12px 0;
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
.item-name {
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.item-price {
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
color: #ff3333;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.order-total {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
padding: 12px 0 0;
|
|
|
|
|
|
.total-label {
|
|
|
font-size: 14px;
|
|
|
color: #666;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
.total-price {
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: #ff3333;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.payment-section {
|
|
|
background: white;
|
|
|
margin: 0 16px 16px;
|
|
|
border-radius: 12px;
|
|
|
padding: 16px;
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.payment-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 16px;
|
|
|
margin-bottom: 8px;
|
|
|
border: 1px solid #e5e5e5;
|
|
|
border-radius: 8px;
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
&.active {
|
|
|
border-color: #4285f4;
|
|
|
background-color: #f0f7ff;
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.payment-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
|
|
|
.payment-details {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
|
|
|
.payment-name {
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
margin-bottom: 2px;
|
|
|
}
|
|
|
|
|
|
.payment-desc {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom-section {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
background: white;
|
|
|
padding: 16px;
|
|
|
border-top: 1px solid #e5e5e5;
|
|
|
|
|
|
/* #ifdef H5 */
|
|
|
bottom: 50px;
|
|
|
/* H5环境下给tabBar留出空间 */
|
|
|
/* #endif */
|
|
|
|
|
|
.agreement {
|
|
|
text-align: center;
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
margin-top: 12px;
|
|
|
|
|
|
.link {
|
|
|
color: #4285f4;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
