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" : "充值" "navigationBarTitleText" : "充值"
} }
},
{
"path" : "payment/payment",
"style" :
{
"navigationBarTitleText" : "确认支付"
}
} }
] ]
} }

640
pages/mine/mine.vue
Unescape View File

@ -8,17 +8,32 @@
<!-- 用户信息卡片 --> <!-- 用户信息卡片 -->
<view class="user-card"> <view class="user-card">
<view class="user-info"> <view class="user-info">
<image class="avatar" src="/static/imgs/avatar.png" mode="aspectFill"></image> <image
class="avatar"
src="/static/imgs/avatar.png"
mode="aspectFill"
></image>
<view class="user-details"> <view class="user-details">
<view class="username"> <view class="username">
{{ userStore.userInfo.username }} {{ userStore.userInfo.username }}
<u-icon name="checkmark-circle-fill" color="#ffa500" size="16"></u-icon> <u-icon
name="checkmark-circle-fill"
color="#ffa500"
size="16"
></u-icon>
</view> </view>
<view class="user-id">用户ID: {{ userStore.userInfo.id }}</view> <view class="user-id">用户ID: {{ userStore.userInfo.id }}</view>
<view class="membership"> <view class="membership">
会员等级: <span v-if="memberInfo.is_vip">{{memberInfo.plan?.name}} (有效期至: 会员等级:
{{memberInfo.end_at ? dayjs(memberInfo.end_at * 1000).format('YYYY-MM-DD') : ''}})</span><span <span v-if="memberInfo.is_vip">
v-else>无</span> {{ memberInfo.plan?.name }} (有效期至:
{{
memberInfo.end_at
? dayjs(memberInfo.end_at * 1000).format("YYYY-MM-DD")
: ""
}})
</span>
<span v-else>无</span>
</view> </view>
</view> </view>
</view> </view>
@ -33,9 +48,17 @@
<view class="balance-header"> <view class="balance-header">
<view class="balance-label">账户余额</view> <view class="balance-label">账户余额</view>
</view> </view>
<view class="balance-amount">¥{{memberInfo.wallet_balance || 0}}</view> <view class="balance-amount">
¥{{ memberInfo.wallet_balance || 0 }}
</view>
</div> </div>
<uv-button type="primary" color="#fff" customStyle="color:#000;width:90px" shape="circle" @click="recharge"> <uv-button
type="primary"
color="#fff"
customStyle="color:#000;width:90px"
shape="circle"
@click="recharge"
>
充值 充值
</uv-button> </uv-button>
</view> </view>
@ -43,8 +66,13 @@
<!-- 会员套餐 --> <!-- 会员套餐 -->
<view class="membership-section"> <view class="membership-section">
<view class="membership-grid"> <view class="membership-grid">
<view class="membership-item" :class="{ active: selectedPlan === item.id }" v-for="item in planList" <view
:key="item.id" @click="selectPlan(item)"> class="membership-item"
:class="{ active: selectedPlan === item.id }"
v-for="item in planList"
:key="item.id"
@click="selectPlan(item)"
>
<view class="tag" v-if="item.tags">{{ item.tags }}</view> <view class="tag" v-if="item.tags">{{ item.tags }}</view>
<view class="plan-name">{{ item.name }}</view> <view class="plan-name">{{ item.name }}</view>
<view class="plan-price">¥{{ item.price }}</view> <view class="plan-price">¥{{ item.price }}</view>
@ -72,74 +100,73 @@
</view> </view>
</view> </view>
<!-- 支付方式 --> <!-- 底部按钮 -->
<view class="payment-section"> <view class="bottom-section">
<!-- 微信支付 --> <uv-button type="primary" @click="goToPayment">前往支付</uv-button>
<view class="payment-item" :class="{ active: selectedPayment === 'wallet' }" <!-- <view class="agreement">
@click="selectPayment('wallet')"> 购买前请仔细阅读
<view class="payment-info"> <text class="link" @click="showAgreement">《会员服务协议》</text>
<uv-icon name="empty-coupon" color="#07c160" size="24"></uv-icon> </view> -->
<text class="payment-name">钱包支付</text>
</view> </view>
<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wallet' ? '#ff3333' : '#ccc'"
size="20"></uv-icon> <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="payment-item" :class="{ active: selectedPayment === 'wxpay' }" @click="selectPayment('wxpay')"> </view> -->
<view class="payment-info">
<uv-icon name="weixin-fill" color="#07c160" size="24"></uv-icon> <!-- 用户协议 -->
<text class="payment-name">微信支付</text> <view class="profile-item" @click="viewUserAgreement">
<view class="item-label">用户协议</view>
<view class="item-content">
<uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wxpay' ? '#ff3333' : '#ccc'"
size="20"></uv-icon>
</view> </view>
<!-- 支付宝支付 - 仅在H5环境显示 --> <!-- 关于我们 -->
<view v-if="showAlipay" class="payment-item" :class="{ active: selectedPayment === 'alipay' }" <view class="profile-item" @click="viewAbout">
@click="selectPayment('alipay')"> <view class="item-label">关于我们</view>
<view class="payment-info"> <view class="item-content">
<uv-icon name="/static/imgs/alipay.png" color="#1677ff" size="24"></uv-icon> <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
<text class="payment-name">支付宝</text>
</view> </view>
<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
size="20"></uv-icon>
</view> </view>
<view class="profile-item" @click="logout">
<view class="item-label">退出登录</view>
<view class="item-content">
<uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
<!-- 底部按钮 -->
<view class="bottom-section">
<uv-button type="primary" size="large" @click="confirmPayment" :loading="paying">
确认支付
</uv-button>
<view class="agreement">
购买前请仔细阅读
<text class="link" @click="showAgreement">《会员服务协议》</text>
</view> </view>
</view> </view>
<!-- <view class="logout-section">
<uv-button
type="error"
@click="logout"
:loading="logoutLoading"
>
退出登录
</uv-button>
</view> -->
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { ref, onMounted } from "vue";
ref, import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
onMounted
} from "vue";
import {
onShow,
onPullDownRefresh
} from "@dcloudio/uni-app";
import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue"; import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
import { import { useAuthStore, useUserStore } from "@/store";
useAuthStore,
useUserStore
} from "@/store";
import RPC from "@/utils/request"; import RPC from "@/utils/request";
import dayjs from 'dayjs' import dayjs from "dayjs";
const modal = ref(null); const modal = ref(null);
const authStore = useAuthStore(); const authStore = useAuthStore();
const userStore = useUserStore(); const userStore = useUserStore();
const balance = ref(null) const balance = ref(null);
// const getBalance = () => { // const getBalance = () => {
// RPC.post('/wallet/balance', { // RPC.post('/wallet/balance', {
// user_id: userStore.userInfo.id // user_id: userStore.userInfo.id
@ -147,46 +174,42 @@
// balance.value = res.balance_cents || 0 // balance.value = res.balance_cents || 0
// }) // })
// } // }
const memberInfo = ref({}) const memberInfo = ref({});
const getMemberInfo = () => { const getMemberInfo = () => {
uni.showLoading(); uni.showLoading();
RPC.post('/membership/user/info', { RPC.post("/membership/user/info", {
user_id: userStore.userInfo.id user_id: userStore.userInfo.id,
}).then(res => {
memberInfo.value = res || {}
}).finally(() => {
uni.hideLoading();
}) })
} .then((res) => {
memberInfo.value = res || {};
})
.finally(() => {
uni.hideLoading();
});
};
// 响应式数据 // 响应式数据
const selectedPlan = ref(""); const selectedPlan = ref("");
const selectedPayment = ref("wxpay"); // 默认选中微信支付 const planList = ref([]);
const paying = ref(false);
const showAlipay = ref(true); // 控制是否显示支付宝选项
const planList = ref([])
const getPlanList = () => { const getPlanList = () => {
RPC.post('/membership_plan/list', { RPC.post("/membership_plan/list", {
page: 1, page: 1,
limit: -1, limit: -1,
orderby: [{ orderby: [
sort: 'asc' {
}] sort: "asc",
}).then(res => { },
planList.value = (res.rows || []).filter(item => item.enabled) ],
selectedPlan.value = planList.value[0] ? planList.value[0].id : '' }).then((res) => {
}) planList.value = (res.rows || []).filter((item) => item.enabled);
} selectedPlan.value = planList.value[0] ? planList.value[0].id : "";
});
};
// 选择会员套餐 // 选择会员套餐
const selectPlan = (plan) => { const selectPlan = (plan) => {
selectedPlan.value = plan.id; selectedPlan.value = plan.id;
}; };
// 选择支付方式
const selectPayment = (payment) => {
selectedPayment.value = payment;
};
// 编辑资料 // 编辑资料
const editProfile = () => { const editProfile = () => {
uni.navigateTo({ uni.navigateTo({
@ -201,77 +224,8 @@
}); });
}; };
// 跳转到支付页面
// 微信支付 const goToPayment = () => {
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
};
function showModalAsync(options) {
return new Promise((resolve, reject) => {
uni.showModal({
...options,
success: (res) => {
resolve(res); // 将用户操作结果传递给 await
},
fail: (err) => {
reject(err); // 处理失败情况
}
});
});
}
// 支付宝支付（仅H5环境）
const alipayPay = async (orderInfo) => {
// #ifdef H5
// H5支付宝支付
const payUrl = orderInfo.pay_url; // 后端返回的支付宝H5支付链接
window.location.href = payUrl;
return {
success: true,
redirect: true
};
// #endif
};
// 确认支付
const confirmPayment = async () => {
if (!selectedPlan.value) { if (!selectedPlan.value) {
uni.showToast({ uni.showToast({
title: "请选择会员套餐", title: "请选择会员套餐",
@ -280,163 +234,19 @@
return; return;
} }
if (!selectedPayment.value) { // 获取选中的套餐信息
uni.showToast({ const selectedPlanInfo = planList.value.find(
title: "请选择支付方式", (plan) => plan.id === selectedPlan.value
icon: "none", );
});
return;
}
paying.value = true; // 跳转到支付页面，传递套餐信息
try { uni.navigateTo({
// 1. 创建订单参数 url: `/pagesA/payment/payment?planId=${
const orderParams = { selectedPlan.value
user_id: userStore.userInfo?.id, }&planName=${encodeURIComponent(selectedPlanInfo?.name || "")}&planPrice=${
plan_id: selectedPlan.value, selectedPlanInfo?.price || 0
pay_channel: selectedPayment.value }`,
};
uni.showLoading({
title: "正在创建订单...",
});
// 2. 创建订单
const orderNum = await RPC.post('/membership/order/create', orderParams);
// 模拟创建订单返回的数据
// const orderResult = {
// orderId: "ORDER_" + Date.now(),
// amount: orderParams.amount,
// // 微信支付参数（实际应该由后端返回）
// wechatPayInfo: {
// appId: "wx1234567890",
// timeStamp: String(Date.now()),
// nonceStr: "random_string_" + Date.now(),
// package: "prepay_id=wx_prepay_id_123456",
// signType: "RSA",
// paySign: "mock_pay_sign_123456",
// // H5支付链接
// mwebUrl: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx_prepay_id_123456",
// },
// // 支付宝支付参数（实际应该由后端返回）
// alipayInfo: {
// orderString: "mock_alipay_order_string_123456",
// payUrl: "https://openapi.alipay.com/gateway.do?mock_pay_url",
// },
// };
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)
if(1==1) return
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('paymentResult111',paymentResult)
// 4. 处理支付结果
if (paymentResult?.success) {
if (paymentResult.redirect) {
// H5跳转支付，不需要额外处理
uni.showToast({
title: "正在跳转支付页面...",
icon: "loading",
duration: 2000,
});
} else {
// 支付成功
setTimeout(() => {
uni.showToast({
title: "支付成功",
icon: "success",
});
setTimeout(()=>{
getMemberInfo()
},500)
}, 1000)
// getMemberInfo()
// 延迟跳转到订单页面或刷新用户信息
// setTimeout(() => {
// 可以跳转到订单详情页面
// uni.navigateTo({
// url: `/pages/order-detail/order-detail?orderId=${orderResult.orderId}`,
// });
// 或者刷新当前页面的用户信息
// loadUserInfo();
// }, 1500);
}
}
} catch (error) {
uni.hideLoading();
console.error("支付失败:", error);
console.log('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;
}
}; };
// 显示协议 // 显示协议
@ -446,118 +256,66 @@
}); });
}; };
// 检查支付结果（用于H5支付回调） // 页面挂载时获取套餐列表
const checkPaymentResult = async (orderId) => { onMounted(() => {
try { // getPlanList();
// 调用后端接口检查支付结果
// const result = await RPC.get(`/api/order/check-payment/${orderId}`);
// 模拟检查结果
const result = {
success: true,
status: "paid", // paid, pending, failed
};
if (result.status === "paid") {
uni.showToast({
title: "支付成功",
icon: "success",
}); });
// 更新用户信息或跳转到成功页面 // 页面显示时获取会员信息
setTimeout(() => { onShow(() => {
uni.navigateTo({ getPlanList();
url: `/pages/order-detail/order-detail?orderId=${orderId}`, getMemberInfo();
});
}, 1500);
} else if (result.status === "failed") {
uni.showToast({
title: "支付失败",
icon: "none",
}); });
} else { onPullDownRefresh(() => {
uni.showToast({ getPlanList();
title: "支付处理中，请稍后查看订单状态", // getBalance()
icon: "none", getMemberInfo();
uni.stopPullDownRefresh();
}); });
}
} catch (error) {
console.error("检查支付结果失败:", error);
}
};
// 页面显示时检查是否有支付回调参数 const logoutLoading = ref(false)
const handlePaymentCallback = () => {
// #ifdef H5
const urlParams = new URLSearchParams(window.location.search);
const orderId = urlParams.get("orderId");
const payResult = urlParams.get("payResult");
if (orderId && payResult) {
// 清理URL参数
const url = new URL(window.location);
url.searchParams.delete("orderId");
url.searchParams.delete("payResult");
window.history.replaceState({}, document.title, url.pathname + url.search);
// 检查支付结果
if (payResult === "success") {
checkPaymentResult(orderId);
} else {
uni.showToast({
title: "支付失败或取消",
icon: "none",
});
}
}
// #endif
};
// 检查当前环境并设置支付选项 const logout = () => {
const checkEnvironment = () => { uni.showModal({
// #ifdef MP-WEIXIN title: "退出登录",
// 微信小程序环境，隐藏支付宝选项，默认选择微信支付 content: "确定要退出登录吗？",
showAlipay.value = false; success: (res) => {
// #endif if (res.confirm) {
logoutLoading.value = true;
// #ifdef H5
// H5环境，显示所有支付选项
showAlipay.value = true;
// 如果在微信浏览器内，默认选择微信支付
const ua = navigator.userAgent.toLowerCase();
const isWechat = ua.indexOf("micromessenger") !== -1;
// #endif
};
// 页面挂载时处理支付回调和环境检查 // 模拟退出登录
onMounted(() => { setTimeout(() => {
checkEnvironment(); authStore.signOut();
getPlanList() logoutLoading.value = false;
// handlePaymentCallback();
// 清除用户信息和token
// authStore.logout()
uni.showToast({
title: "已退出登录",
icon: "success",
}); });
// 页面显示时也检查支付回调（从其他页面返回时） // 跳转到登录页
onShow(() => { uni.reLaunch({
handlePaymentCallback(); url: "/pages/login/login",
// getBalance()
getMemberInfo()
}); });
onPullDownRefresh(() => { }, 1000);
getPlanList() }
// getBalance() },
getMemberInfo()
uni.stopPullDownRefresh();
}); });
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
font-size: 14px; font-size: 14px;
background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%); background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%);
padding-bottom: 120px; min-height: 100vh;
// padding-bottom: 120px;
/* #ifdef H5 */ /* #ifdef H5 */
padding-bottom: 170px; // padding-bottom: 170px;
/* H5环境下需要更多空间 (底部按钮高度 + tabBar高度 + 间距) */ /* H5环境下需要更多空间 (底部按钮高度 + tabBar高度 + 间距) */
/* #endif */ /* #endif */
} }
@ -719,43 +477,76 @@
} }
} }
.payment-section { .bottom-section {
margin: 0 16px 24px; // position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
background: white;
// padding: 16px;
margin: 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;
}
}
}
.app-section {
background: white;
border-radius: 12px;
margin: 16px;
overflow: hidden;
.payment-item { .profile-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: white;
border-radius: 12px;
padding: 16px; padding: 16px;
margin-bottom: 8px; border-bottom: 1px solid #f0f0f0;
border: 1px solid #e5e5e5;
transition: all 0.3s;
&.active { &:last-child {
border-color: #4285f4; border-bottom: none;
background-color: #f0f7ff;
} }
&:last-child { .item-label {
margin-bottom: 0; font-size: 16px;
color: #333;
font-weight: 500;
} }
.payment-info { .item-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 8px;
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.payment-name { .item-value {
font-size: 14px; font-size: 14px;
color: #333; color: #666;
} }
} }
} }
} }
.bottom-section { .logout-section {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -768,16 +559,5 @@
bottom: 50px; bottom: 50px;
/* H5环境下给tabBar留出空间 */ /* H5环境下给tabBar留出空间 */
/* #endif */ /* #endif */
.agreement {
text-align: center;
font-size: 12px;
color: #999;
margin-top: 12px;
.link {
color: #4285f4;
}
}
} }
</style> </style>

42
pages/order/order.vue
Unescape View File

@ -315,40 +315,12 @@
// #ifdef H5 // #ifdef H5
// 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支付链接 const payUrl = orderInfo.mwebUrl; // 后端返回的H5支付链接
window.location.href = payUrl; window.location.href = payUrl;
return { return {
success: true, success: true,
redirect: true redirect: true
}; };
}
// #endif // #endif
}; };
@ -390,13 +362,22 @@
let paymentResult; let paymentResult;
if (order.pay_channel === "wxpay") { if (order.pay_channel === "wxpay") {
// #ifdef MP-WEIXIN
const res = await uni.login({ const res = await uni.login({
provider: 'weixin' 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, 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({ uni.showLoading({
title: "正在跳转微信支付...", title: "正在跳转微信支付...",
}); });
@ -411,6 +392,7 @@
}); });
paymentResult = await alipayPay(orderResult); paymentResult = await alipayPay(orderResult);
} else if (order.pay_channel === 'wallet') { } else if (order.pay_channel === 'wallet') {
uni.hideLoading()
const res = await showModalAsync({ const res = await showModalAsync({
title: '确认支付', title: '确认支付',
content: '确认使用钱包余额支付？' content: '确认使用钱包余额支付？'

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

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