241 lines
6.7 KiB
Vue
241 lines
6.7 KiB
Vue
<template>
|
|
<view class="purse_recharge_warp">
|
|
<Header
|
|
:leftTitle="$t('purse.recharge.title')"
|
|
left-path-type="navigateTo"
|
|
left-path="/pages/mine_purse/mine_purse"
|
|
style="background-color: #FFFFFF;"
|
|
/>
|
|
<view class="purse_recharge_cntent">
|
|
<view class="recharge_balance">
|
|
<view class="recharge_balance_image">
|
|
<up-image src="/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 style="margin-top: 2rpx;"><up-image :src="item.path" width="20" height="20" bgColor="#f1f6ff00"></up-image></view> -->
|
|
<view class="way_item_val">{{item.name}}<text v-if="item.balance"> ({{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 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,
|
|
}
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getWayOption();
|
|
},
|
|
methods: {
|
|
async getWayOption(){
|
|
const result = await getRechargeSupportPay();
|
|
if(result && result.bizcode === 100){
|
|
this.wayOption = result.data;
|
|
}
|
|
},
|
|
// 立即充值
|
|
async rechargeOk(){
|
|
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;
|
|
}
|
|
console.log("params",params);
|
|
const result = await recharge(params);
|
|
console.log("result",result);
|
|
if(result && result.bizcode === 100){
|
|
const item = result.data;
|
|
console.log("item",item);
|
|
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: "充值失败",
|
|
});
|
|
|
|
}
|
|
}
|
|
},
|
|
// 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_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>
|