feat:微信适配支付页面
This commit is contained in:
dzc committed
1 parent
5bc4660b93
commit
b7653d9d71
4 files changed
+127
-116
No files matched your search
@@ -6,11 +6,11 @@ SHOPRO_API_PATH=/app-api
|
||||
|
||||
# 后端接口 - 测试环境（通过 process.env.NODE_ENV == development）
|
||||
# SHOPRO_DEV_BASE_URL=http://127.0.0.1:48083
|
||||
# SHOPRO_DEV_BASE_URL = http://chatapi.zianxin.com
|
||||
SHOPRO_DEV_BASE_URL=https://rj4jv5rwqs.by.takin.cc
|
||||
SHOPRO_DEV_BASE_URL = https://chatapi.zianxin.com
|
||||
# SHOPRO_DEV_BASE_URL=https://rj4jv5rwqs.by.takin.cc
|
||||
|
||||
# 后端接口 - 正式环境（通过 process.env.NODE_ENV != development）
|
||||
SHOPRO_BASE_URL=http://chatapi.zianxin.com
|
||||
SHOPRO_BASE_URL=https://chatapi.zianxin.com
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
|
||||
SHOPRO_UPLOAD_TYPE=server
|
||||
|
||||
@@ -200,9 +200,8 @@ const handleOpenVip = () => {
|
||||
uni.showToast({ title: `不支持${payMethodItem.title}支付`, icon: 'none' });
|
||||
return
|
||||
}
|
||||
|
||||
jumpToWechatPage()
|
||||
return
|
||||
// jumpToWechatPage()
|
||||
// return
|
||||
messageBox
|
||||
.confirm({
|
||||
msg: '确认开通？',
|
||||
|
||||
+122
-110
@@ -2,10 +2,21 @@
|
||||
<wd-config-provider theme="dark">
|
||||
<wd-navbar title="充值" safeAreaInsetTop :bordered="false">
|
||||
<template #left>
|
||||
<navigator open-type="navigateBack" hover-class="navigator-hover">
|
||||
<uni-icons type="back" size="30" color="#D29E52"></uni-icons>
|
||||
</navigator>
|
||||
<view class="flex items-center">
|
||||
<navigator open-type="navigateBack" hover-class="navigator-hover">
|
||||
<uni-icons type="back" size="30" color="#D29E52"></uni-icons>
|
||||
</navigator>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<navigator url="/pages/profile/recharge-record" open-type="navigate" hover-class="navigator-hover">
|
||||
<view
|
||||
class="flex items-center rounded-full h-44rpx bg-color-theme py-1 px-2 text-black text-sm">
|
||||
历史记录
|
||||
</view>
|
||||
</navigator>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template #right>
|
||||
<navigator url="/pages/profile/recharge-record" open-type="navigate" hover-class="navigator-hover">
|
||||
<view class="flex items-center rounded-full h-44rpx bg-color-theme py-1 px-2 text-black text-sm">
|
||||
@@ -13,6 +24,7 @@
|
||||
</view>
|
||||
</navigator>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</wd-navbar>
|
||||
|
||||
<scroll-view style="height: calc(100dvh - 88px)" scroll-y>
|
||||
@@ -58,7 +70,7 @@
|
||||
<view class="flex justify-between items-center my-4">
|
||||
<view class="flex-row-center">
|
||||
<image class="size-60rpx mr-2" src="@/static/diamond.png" mode="scaleToFill" />
|
||||
<text>{{ fen2yuanSimple(item.bonusPrice) }}</text>
|
||||
<text>{{ fen2yuanSimple(item.bonusPrice + item.payPrice) }}</text>
|
||||
<text class="text-xs ml-2">({{ item.name }})</text>
|
||||
</view>
|
||||
<text class="px-2 py-1 rounded-2 bg-color-theme-dark active:bg-color-theme"
|
||||
@@ -74,116 +86,116 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
// @ts-ignore
|
||||
import { fen2yuanSimple } from '@/sheep/hooks/useGoods';
|
||||
import RecentApi from '@/sheep/api/member/recent';
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
// @ts-ignore
|
||||
import sheep from '@/sheep';
|
||||
// @ts-ignore
|
||||
import PayOrderApi from '@/sheep/api/pay/order';
|
||||
import { jumpToWechatMiniProgram } from '@/sheep/util/wechat-tool';
|
||||
import { computed, ref } from 'vue';
|
||||
// @ts-ignore
|
||||
import { fen2yuanSimple } from '@/sheep/hooks/useGoods';
|
||||
import RecentApi from '@/sheep/api/member/recent';
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
// @ts-ignore
|
||||
import sheep from '@/sheep';
|
||||
// @ts-ignore
|
||||
import PayOrderApi from '@/sheep/api/pay/order';
|
||||
import { jumpToWechatMiniProgram } from '@/sheep/util/wechat-tool';
|
||||
|
||||
const messageBox = useMessage();
|
||||
const messageBox = useMessage();
|
||||
|
||||
const payMethodMap = [
|
||||
{
|
||||
title: '支付宝',
|
||||
payment: '',
|
||||
key: 'alipay',
|
||||
},
|
||||
{
|
||||
title: '微信支付',
|
||||
payment: 'wx_lite',
|
||||
key: 'wechat',
|
||||
},
|
||||
];
|
||||
const payMethodMap = [
|
||||
{
|
||||
title: '支付宝',
|
||||
payment: '',
|
||||
key: 'alipay',
|
||||
},
|
||||
{
|
||||
title: '微信支付',
|
||||
payment: 'wx_lite',
|
||||
key: 'wechat',
|
||||
},
|
||||
];
|
||||
|
||||
const payMethod = ref<'alipay' | 'wechat'>('alipay'); // 支付方式：alipay / wechat
|
||||
// 充值套餐列表
|
||||
const rechargePackag = ref<{ id : number; name : string; payPrice : number; bonusPrice : number }[]>(
|
||||
[],
|
||||
);
|
||||
const userWallet = computed(() => sheep.$store('user').userWallet);
|
||||
const payMethod = ref<'alipay' | 'wechat'>('alipay'); // 支付方式：alipay / wechat
|
||||
// 充值套餐列表
|
||||
const rechargePackag = ref<{ id: number; name: string; payPrice: number; bonusPrice: number }[]>(
|
||||
[],
|
||||
);
|
||||
const userWallet = computed(() => sheep.$store('user').userWallet);
|
||||
|
||||
onLoad((params) => {
|
||||
console.log("onLoad:", params);
|
||||
if (params) {
|
||||
if (params.packageId && params.payMethod) {
|
||||
payMethod.value = params.payMethod;
|
||||
disposeWechatPay(params.packageId);
|
||||
}
|
||||
onLoad((params) => {
|
||||
console.log("onLoad:", params);
|
||||
if (params) {
|
||||
if (params.packageId && params.payMethod) {
|
||||
payMethod.value = params.payMethod;
|
||||
disposeWechatPay(params.packageId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onShow(async () => {
|
||||
const { data } = await RecentApi.getWalletRechargePackage();
|
||||
rechargePackag.value = data ?? [];
|
||||
});
|
||||
|
||||
const getWallet = () => {
|
||||
sheep.$store('user').getWallet();
|
||||
};
|
||||
|
||||
const handleRecharge = (item: any) => {
|
||||
if (!item.id) {
|
||||
uni.showToast({ title: '请选择会员类型', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
const payMethodItem = payMethodMap.find((item) => item.key === payMethod.value);
|
||||
if (!payMethodItem) {
|
||||
uni.showToast({ title: '请选择支付方式', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!payMethodItem.payment) {
|
||||
uni.showToast({ title: `不支持${payMethodItem.title}支付`, icon: 'none' });
|
||||
return;
|
||||
}
|
||||
messageBox
|
||||
.confirm({
|
||||
msg: `确认购买套餐 ${fen2yuanSimple(item.payPrice)} 元？`,
|
||||
title: '提示',
|
||||
})
|
||||
.then(async () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
disposeWechatPay(item.id);
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
jumpToWechatPage(item.id);
|
||||
// #endif
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
|
||||
// 处理微信支付
|
||||
const disposeWechatPay = async (packageId: any) => {
|
||||
uni.showLoading({ title: '支付中...', mask: true });
|
||||
try {
|
||||
const { code, data } = await RecentApi.walletRecharge({ packageId: packageId });
|
||||
console.log('发起订单id,data:', data);
|
||||
if (code !== 0) {
|
||||
uni.showToast({ title: '创建订单失败', icon: 'none' });
|
||||
throw new Error();
|
||||
}
|
||||
await sheep.$platform.pay(payMethod.value, 'recharge', data.payOrderId);
|
||||
// 更新用户钱包
|
||||
getWallet();
|
||||
uni.showToast({ title: '支付成功', icon: 'success' });
|
||||
} catch (error) {
|
||||
console.error('|处理微信支付|,意外的错误error:', error);
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转到微信小程序
|
||||
const jumpToWechatPage = async (packageId: any) => {
|
||||
console.log("跳转到微信小程序");
|
||||
jumpToWechatMiniProgram('recharge', {
|
||||
packageId,
|
||||
payMethod: payMethod.value,
|
||||
});
|
||||
|
||||
onShow(async () => {
|
||||
const { data } = await RecentApi.getWalletRechargePackage();
|
||||
rechargePackag.value = data ?? [];
|
||||
});
|
||||
|
||||
const getWallet = () => {
|
||||
sheep.$store('user').getWallet();
|
||||
};
|
||||
|
||||
const handleRecharge = (item : any) => {
|
||||
if (!item.id) {
|
||||
uni.showToast({ title: '请选择会员类型', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
const payMethodItem = payMethodMap.find((item) => item.key === payMethod.value);
|
||||
if (!payMethodItem) {
|
||||
uni.showToast({ title: '请选择支付方式', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!payMethodItem.payment) {
|
||||
uni.showToast({ title: `不支持${payMethodItem.title}支付`, icon: 'none' });
|
||||
return;
|
||||
}
|
||||
messageBox
|
||||
.confirm({
|
||||
msg: `确认购买套餐 ${fen2yuanSimple(item.payPrice)} 元？`,
|
||||
title: '提示',
|
||||
})
|
||||
.then(async () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
disposeWechatPay(item.id);
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
jumpToWechatPage(item.id);
|
||||
// #endif
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
|
||||
// 处理微信支付
|
||||
const disposeWechatPay = async (packageId : any) => {
|
||||
uni.showLoading({ title: '支付中...', mask: true });
|
||||
try {
|
||||
const { code, data } = await RecentApi.walletRecharge({ packageId: packageId });
|
||||
console.log('发起订单id,data:', data);
|
||||
if (code !== 0) {
|
||||
uni.showToast({ title: '创建订单失败', icon: 'none' });
|
||||
throw new Error();
|
||||
}
|
||||
sheep.$platform.pay(payMethod.value, 'recharge', data.payOrderId);
|
||||
// 更新用户钱包
|
||||
getWallet();
|
||||
uni.showToast({ title: '支付成功', icon: 'success' });
|
||||
} catch (error) {
|
||||
console.error('|处理微信支付|,意外的错误error:', error);
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转到微信小程序
|
||||
const jumpToWechatPage = async (packageId : any) => {
|
||||
console.log("跳转到微信小程序");
|
||||
jumpToWechatMiniProgram('recharge', {
|
||||
packageId,
|
||||
payMethod: payMethod.value,
|
||||
});
|
||||
};
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 16 KiB |
Reference in new issue
Block a user