first
This commit is contained in:
sexygoat
301
pages/package-order/package-order.vue
Normal file
301
pages/package-order/package-order.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="packageList.length > 0" class="card flex-col-g20" v-for="item in packageList">
|
||||
<view class="title">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="price">
|
||||
￥{{item.accountMoney}}
|
||||
</view>
|
||||
<view class="desc">
|
||||
请在套餐有效期内使用,有效期内流量用完可充值加餐包即可继续使用
|
||||
</view>
|
||||
<view class="btn">
|
||||
<up-button type="primary" @tap="showBuy=true">立即订购</up-button>
|
||||
</view>
|
||||
<up-modal :title="`您确定要订购${item.name}套餐吗？`" :show="showBuy" showCancelButton @confirm="SubscribeNow(item)"
|
||||
@cancel="showBuy=false" />
|
||||
</view>
|
||||
|
||||
<view v-else class="card">
|
||||
<view class="title" style="text-align: center;">
|
||||
该设备暂无套餐, 请联系客服购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
userStore
|
||||
} from '@/store/index.js';
|
||||
|
||||
let showBuy = ref(false)
|
||||
|
||||
// 套餐列表
|
||||
let packageList = reactive([]);
|
||||
|
||||
// 支付列表
|
||||
let payList = reactive([]);
|
||||
|
||||
// 获取套餐列表
|
||||
const getPackageList = async () => {
|
||||
const result = await userStore.actions.getPackageList()
|
||||
if (result.smList.length > 0) {
|
||||
packageList.push(...result.smList)
|
||||
}
|
||||
}
|
||||
|
||||
// 立即订购
|
||||
const SubscribeNow = async (item) => {
|
||||
// 1. 判断当前用户是否已经绑定了微信公众号的 OpenId
|
||||
await checkHasGzhOpenId()
|
||||
|
||||
// 2. checkYgosWxInfo 检查当前用户是否具有与微信支付相关的特定信息
|
||||
await userStore.actions.checkYgosWxInfo()
|
||||
|
||||
// 3. checkXwzfWxInfo 检查当前用户是否具有与微信支付相关的特定信息
|
||||
await userStore.actions.checkXwzfWxInfo()
|
||||
|
||||
// 4. 获取支付列表
|
||||
await getPayList(item.id)
|
||||
|
||||
let id = "";
|
||||
|
||||
if (payList.length === 2) {
|
||||
id = payList[1].id
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "未找到微信支付",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
|
||||
const params = {
|
||||
mealId: item.id,
|
||||
cardID: "",
|
||||
money: item.money,
|
||||
mealType: item.type,
|
||||
cardCount: item.cardCount,
|
||||
mealName: item.name,
|
||||
strEffectType: "-1",
|
||||
__pay_method: "1",
|
||||
__merchant_cfg_id: id,
|
||||
payPwd: ""
|
||||
}
|
||||
|
||||
// 5. 创建订单, 获取支付参数
|
||||
await createOrder(params)
|
||||
}
|
||||
|
||||
// 1. 判断当前用户是否已经绑定了微信公众号的 OpenId
|
||||
const checkHasGzhOpenId = async () => {
|
||||
const result = await userStore.actions.checkHasGzhOpenId()
|
||||
if (result.wxAuthUrl) {
|
||||
// 再次进行授权
|
||||
uni.showToast({
|
||||
title: "该用户需要再次授权",
|
||||
icon: "none"
|
||||
})
|
||||
toAuth()
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 获取支付列表
|
||||
const getPayList = async (mealId) => {
|
||||
const result = await userStore.actions.getPayList(mealId)
|
||||
if (result.payMethodList.length > 0) {
|
||||
Object.assign(payList, result.payMethodList)
|
||||
} else {
|
||||
toAuth()
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 创建订单, 获取支付参数, 并拉起微信支付
|
||||
const createOrder = async (params) => {
|
||||
showBuy.value = false;
|
||||
|
||||
try {
|
||||
// 调用后端接口，获取支付参数
|
||||
const data = await userStore.actions.createOrder(params);
|
||||
|
||||
// 如果有错误信息，显示错误提示
|
||||
if (data?.errorMsg) {
|
||||
uni.showToast({
|
||||
title: data?.errorMsg,
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 调起微信支付
|
||||
if (data?.wp) {
|
||||
await invokeWechatPay(data?.wp);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取支付参数失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: "拉起微信支付失败",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
// 调起微信支付
|
||||
const invokeWechatPay = (payParam) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log('[PackageOrder] 调起微信支付...', payParam)
|
||||
|
||||
const onBridgeReady = () => {
|
||||
window.WeixinJSBridge.invoke(
|
||||
'getBrandWCPayRequest', {
|
||||
appId: payParam.appId,
|
||||
timeStamp: payParam.timeStamp,
|
||||
nonceStr: payParam.nonceStr,
|
||||
package: payParam.prepayId,
|
||||
signType: payParam.signType || 'MD5',
|
||||
paySign: payParam.paySign
|
||||
},
|
||||
(res) => {
|
||||
console.log('[PackageOrder] 微信支付结果:', res)
|
||||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||||
resolve(res)
|
||||
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
|
||||
reject(new Error('用户取消支付'))
|
||||
} else {
|
||||
reject(new Error('支付失败: ' + res.err_msg))
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (typeof window.WeixinJSBridge === 'undefined') {
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
|
||||
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
|
||||
}
|
||||
} else {
|
||||
onBridgeReady()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转到微信授权页面
|
||||
const toAuth = async () => {
|
||||
try {
|
||||
const result = await userStore.actions.getWxUrl();
|
||||
|
||||
if (result.wxAuthUrl) {
|
||||
// 获取当前页面的URL
|
||||
const currentUrl = window.location.href;
|
||||
|
||||
// 检查当前URL是否已经包含 code 参数
|
||||
if (!currentUrl.includes("code=")) {
|
||||
// 如果没有code参数，跳转到微信授权页面
|
||||
let originalUrl = result.wxAuthUrl;
|
||||
|
||||
// 目标替换的 redirect_uri
|
||||
const newRedirectUri = "https://m1.whjhft.com/pages/index/index";
|
||||
|
||||
// 替换 "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxea8c599fe100ce8a&redirect_uri=https://m1.whjhft.com/my/my&response_type=code&scope=snsapi_userinfo&state=cardlogin#wechat_redirect"
|
||||
// 使用正则表达式替换 redirect_uri 的值
|
||||
const updatedUrl = originalUrl.replace(/(redirect_uri=)[^&]*/,
|
||||
`$1${encodeURIComponent(newRedirectUri)}`);
|
||||
|
||||
if (updatedUrl) {
|
||||
window.location.href = updatedUrl;
|
||||
}
|
||||
} else {
|
||||
// 如果已经包含code参数, 就进行授权
|
||||
authoration()
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '该用户已授权',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: e,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 授权
|
||||
const authoration = async () => {
|
||||
try {
|
||||
// 获取当前页面的完整 URL https://m1.whjhft.com/pages/index/index?code=081KSnml23G2Ug4XViml2VFHyJ0KSnmF&state=cardlogin
|
||||
// const url = window.location.href;
|
||||
|
||||
const code = (location.search.match(/[?&]code=([^&]*)/) || [])[1];
|
||||
|
||||
if (code) {
|
||||
// 如果 code 存在，则调用获取授权的动作
|
||||
await userStore.actions.getAuthorize(code);
|
||||
removeCodeFromUrl()
|
||||
} else {
|
||||
// 如果 code 不存在
|
||||
uni.showToast({
|
||||
title: "微信授权失败!",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
// 错误处理
|
||||
console.error('授权失败:', error);
|
||||
uni.showToast({
|
||||
title: "授权失败，请重试",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getPackageList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.card {
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #aa5500;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.pay-title {
|
||||
font-size: 35rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user