lufaneng
/
lift-drawing-wechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

支付位置修改

Browse Source
main
Lufaneng 10 months ago
parent 26be228f0a
commit 2a0fa0836d
5 changed files with 1212 additions and 943 deletions
Show Stats Download Patch File Download Diff File

7
pages.json
Unescape View File

@ -100,6 +100,13 @@
{
"navigationBarTitleText" : "充值"
}
},
{
"path" : "payment/payment",
"style" :
{
"navigationBarTitleText" : "确认支付"
}
}
]
}

1290
pages/mine/mine.vue
View File

File diff suppressed because it is too large Load Diff

54
pages/order/order.vue
Unescape View File

@ -315,40 +315,12 @@
// #ifdef H5
// H5微信支付
if (typeof WeixinJSBridge !== "undefined") {
return new Promise((resolve, reject) => {
WeixinJSBridge.invoke(
"getBrandWCPayRequest", {
appId: 'wxc504638e03981812',
timeStamp: orderInfo.timeStamp,
nonceStr: orderInfo.nonceStr,
package: orderInfo.package,
signType: orderInfo.signType,
paySign: orderInfo.paySign,
},
(res) => {
if (res.err_msg === "get_brand_wcpay_request:ok") {
resolve({
success: true,
data: res
});
} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
reject(new Error("用户取消支付"));
} else {
reject(new Error("微信支付失败"));
}
}
);
});
} else {
// 不在微信环境，跳转到支付页面
const payUrl = orderInfo.mwebUrl; // 后端返回的H5支付链接
window.location.href = payUrl;
return {
success: true,
redirect: true
};
}
const payUrl = orderInfo.mwebUrl; // 后端返回的H5支付链接
window.location.href = payUrl;
return {
success: true,
redirect: true
};
// #endif
};
@ -390,13 +362,22 @@
let paymentResult;
if (order.pay_channel === "wxpay") {
// #ifdef MP-WEIXIN
const res = await uni.login({
provider: 'weixin'
})
const orderResult = await RPC.post('/membership/order/pay_by_wechat_mini', {
orderResult = await RPC.post('/membership/order/pay_by_wechat_mini', {
code: res.code,
"order_no": order.order_no
"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: "正在跳转微信支付...",
});
@ -411,6 +392,7 @@
});
paymentResult = await alipayPay(orderResult);
} else if (order.pay_channel === 'wallet') {
uni.hideLoading()
const res = await showModalAsync({
title: '确认支付',
content: '确认使用钱包余额支付？'

18
pagesA/edit-profile/edit-profile.vue
Unescape View File

@ -45,17 +45,8 @@
<!-- 应用设置 -->
<view class="app-section">
<!-- 缓存 -->
<!-- <view class="profile-item" @click="clearCache">
<view class="item-label">缓存</view>
<view class="item-content">
<text class="item-value">{{ cacheSize }}</text>
<uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view>
</view> -->
<!-- <view class="app-section">
<!-- 用户协议 -->
<view class="profile-item" @click="viewUserAgreement">
<view class="item-label">用户协议</view>
<view class="item-content">
@ -63,21 +54,20 @@
</view>
</view>
<!-- 关于我们 -->
<view class="profile-item" @click="viewAbout">
<view class="item-label">关于我们</view>
<view class="item-content">
<uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view>
</view>
</view>
</view> -->
<!-- 退出登录按钮 -->
<view class="logout-section">
<!-- <view class="logout-section">
<uv-button type="primary" size="large" @click="logout" :loading="logoutLoading">
退出登录
</uv-button>
</view>
</view> -->
<!-- 编辑弹窗 -->
<uv-popup ref="editPopup" mode="center" @close="closeEditModal" :round="10">

510
pagesA/payment/payment.vue
Unescape View File

@ -0,0 +1,510 @@
<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>
Write Preview
Loading…
Cancel
Save