Files
frontend-app/pages/mine_package/mine_purse_recharge/mine_purse_recharge.vue
T

277 lines
8.3 KiB
Vue

<template>
<view class="purse_recharge_warp">
<Header :leftTitle="$t('purse.recharge.title')" left-path-type="navigateTo" :left-path="leftPath"
style="background-color: #FFFFFF;" />
<view class="purse_recharge_cntent">
<view class="recharge_balance">
<view class="recharge_balance_image">
<up-image src="https://static.tbmall.xin/static/mine/recharge.png" width="20" height="20" bgColor="#f1f6ff00" />
<view class="msg_">现金余额</view>
</view>
<view class="recharge_balance_">{{ proAmount }}</view>
</view>
<view class="form_item">
<view class="form_item_title">充值金额</view>
<up-input placeholder="输入需要充值的金额" border="surround" clearable v-model="form.amount" :customStyle="{
'margin-top': '20rpx',
'background': '#FFFFFF',
'box-shadow': '0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06)',
'border-radius': '8rpx',
'height': '80rpx',
}" type="number"></up-input>
</view>
<view class="form_item">
<view class="form_item_title">支付方式</view>
<view class="recharge_way_warp">
<up-radio-group v-model="form.payway" placement="column">
<view :class="index + 1 < wayOption.length ? 'way_item way_item_but' : 'way_item'"
v-for="(item, index) in wayOption" :key="item.id">
<view class="way_item_">
<view class="way_item_val">{{ item.name }}<text v-if="item.balance">&nbsp;&nbsp;({{ item.balance
}})</text>
</view>
</view>
<up-radio :name="item.type" activeColor="#03AD27">
</up-radio>
</view>
</up-radio-group>
</view>
</view>
<view class="add_but_" @click="rechargeOk">
立即充值
</view>
</view>
<up-toast ref="uToastRef"></up-toast>
</view>
</template>
<script>
import { appDypayFun, prepareDouyinPay, filterDouyinPayWays } from '@/utils/douyin-pay.js';
import Header from '@/components/header.vue';
import {
getRechargeSupportPay,
recharge
} from '@/api/finance.js';
import {
feedback
} from '@/api/payment.js';
import {
appWxpayFun,
zfbPayFun
} from '@/utils/payUtils.js'
export default {
components: {
Header
},
data() {
return {
form: {
category: null,
amount: null, //充值金额
payway: null, // 支付当时
},
wayOption: [],
proAmount: 0,
leftPath: '/pages/mine_package/mine_purse/mine_purse',
}
},
onLoad(option) {
const category = option.category;
if (category && category !== 'null') {
this.form.category = category;
}
const amount = option.amount;
if (amount && amount !== 'null') {
this.proAmount = amount;
}
const back = option.back;
if (back && back !== 'null') {
if (back === "submit") {
const id = option.id;
this.leftPath = "/pages/order_package/order_submit/order_submit?payOpen=true&ids=" + id;
}
if (back === "orderInfo") {
const id = option.id;
this.leftPath = "/pages/mine_package/mine_order_info/mine_order_info?payOpen=true&id=" + id;
}
}
},
mounted() {
this.getWayOption();
},
methods: {
async getWayOption() {
const result = await getRechargeSupportPay();
if (result && result.bizcode === 100) {
this.wayOption = filterDouyinPayWays(result.data);
}
},
// 立即充值
async rechargeOk() {
if (this._paySubmitting) return;
this._paySubmitting = true;
try {
console.log('aaaaa', this.form);
const params = this.form;
if (!params.amount) {
this.$refs.uToastRef.show({
type: 'error',
message: "请输入需要充值的金额",
});
return;
}
if (!params.payway) {
this.$refs.uToastRef.show({
type: 'error',
message: "请选择支付方式",
});
return;
}
if (params.payway == "wechat") {
// #ifdef MP-WEIXIN
params["payway"] = "wechatMiniProgram";
params["code"] = await new Promise((resolve) => {
uni.login({
provider: "weixin",
onlyAuthorize: true,
success: function(loginRes) {
resolve(loginRes.code);
},
fail: (err) => {
resolve(""); // 登录失败时返回空字符串,避免后续流程中断
},
});
});
// #endif
}
console.log("params---", params);
if (!await prepareDouyinPay(params.payway)) return;
const result = await recharge(params);
console.log("result", result);
if (result && result.bizcode === 100) {
const item = result.data;
console.log("item", item);
if (item.douyin) {
await appDypayFun(item);
} else if (item.wechat && Object.keys(item.wechat).length !== 0) {
this.appWxpay(item.wechat, item.orderId, item.orderNum);
} else if (item.alipay && Object.keys(item.alipay).length !== 0 && item.alipay) {
this.zfbPay(item.alipay, item.orderId, item.orderNum);
} else {
this.$refs.uToastRef.show({
type: 'error',
message: "充值失败",
});
}
}
} catch (error) {
uni.showToast({ title: error.message || error.msg || '充值请求失败,请查看订单后重试', icon: 'none' });
} finally { this._paySubmitting = false; }
},
// app 微信支付
async appWxpay(alipay, orderId, orderNum) {
try {
const result = await appWxpayFun(alipay, orderId, orderNum);
console.log('支付成功', result);
// 处理支付成功后的逻辑,如更新订单状态等
} catch (error) {
console.error('支付失败', error);
// 处理支付失败后的逻辑,如提示用户等
}
// const newThis = this;
// const orderInfo = {
// "appid": item.appId, // 微信开放平台 - 应用 - AppId,注意和微信小程序、公众号 AppId 可能不一致
// "noncestr": item.nonceStr, // 随机字符串
// "package": "Sign=WXPay", // 固定值
// "partnerid": item.partnerId, // 微信支付商户号
// "prepayid": item.prepayId, // 统一下单订单号
// "timestamp": item.timeStamp, // 时间戳(单位:秒)
// "sign": item.sign // 签名,这里用的 MD5/RSA 签名
// };
// uni.requestPayment({
// provider:"wxpay",
// orderInfo: orderInfo,
// success: function(res) {
// console.log('success:' + res);
// newThis.payFeedbackFun(orderId,orderNum,1);
// newThis.jumpWayOk();
// },
// fail: function(err) {
// console.log('fail:',err);
// newThis.$refs.uToastRef.show({
// type: 'error',
// message: "充值失败",
// });
// setTimeout(()=>{
// newThis.jumpWayError()
// },2000)
// }
// });
},
// 支付宝支付
async zfbPay(alipay, orderId, orderNum) {
try {
const result = await zfbPayFun(alipay, orderId, orderNum);
console.log('支付成功', result);
// 处理支付成功后的逻辑,如更新订单状态等
} catch (error) {
console.error('支付失败', error);
// 处理支付失败后的逻辑,如提示用户等
}
// const that = this;
// uni.requestPayment({
// provider: 'alipay',
// orderInfo: item,
// success(res) {
// that.payFeedbackFun(orderId,orderNum,1);
// that.jumpWayOk();
// },
// //调用失败的回调
// fail(err) {
// that.$refs.uToastRef.show({
// type: 'error',
// message: "充值失败",
// });
// setTimeout(()=>{
// that.jumpWayError()
// },2000)
// }
// })
},
// 跳转到支付成功页面
jumpWayOk() {
this.$refs.uToastRef.show({
type: 'success',
message: "充值成功",
});
setTimeout(() => {
uni.navigateTo({
url: '/pages/mine_package/mine_purse/mine_purse'
});
}, 1500)
},
// 支付结果回调
async payFeedbackFun(orderId, orderNum, status) {
const params = {
orderId,
orderNum,
status,
}
const response = await feedback(params);
console.log("response", response);
if (response && response.bizcode !== 100) {
console.error("反馈结果", response);
}
},
}
}
</script>
<style lang="scss" scoped></style>