首先看页面效果：
<template>
<view class="page">
<view class="page-bd">
<view class="page-container">
<view class="xzje">
<view class="bt">请选择充值金额</view>
<view class="lb">
<view class="mx" v-for="(item, index) in moneyList" :key="index"
@click="selectList(item, index)">
<view class="one">模拟成本{{ item.capitalValue }}</view>
<view class="two">￥{{ item.moneyValue }}</view>
<view class="three">{{ item.desc }}</view>
<image v-if="currentList == index" src="/static/images/pay_select.png" class="select">
</image>
</view>
</view>
</view>
</view>
<view class="db">
<view class="lf">还需支付:￥{{ payVal }}</view>
<view class="lr" @click="gopay">立即支付</view>
</view>
</view>
</view>
</template>
<script>
import { // session数据缓存
getSession
} from "@/util/storage";
import { // 后端接口
queryVeinverStmoreMoney,
sendPayApp,
queryPayStatus
} from "@/api/practice.js";
export default {
data() {
return {
moneyList: [], // 金额列表
discount: "", // 支付金额
currentList: 0,
payVal: "", // 优惠后的支付金额
capitalValue: "",
userInfo: {}
};
},
onShow() {
this.getMoneyList();
this.userInfo = getSession("userInfo");
},
onLoad(option) {
this.capitalDate.totalCapital = option.userTotalCapital
this.capitalDate.capital.availableCapital = option.availableCapital
this.capitalDate.todayProfitLoss = option.todayProfitLoss
},
methods: {
// 获取优惠票列表
async getMoneyList() {
let res = await queryVeinverStmoreMoney();
if (res.result) {
this.moneyList = res.result[0].datas;
this.discount = res.result[0].discount / 10;
let moneyValue = this.moneyList[this.currentList].moneyValue;
this.payVal = moneyValue * this.discount;
this.capitalValue = this.moneyList[this.currentList].capitalValue;
}
},
// 选择票
selectList(item, index) {
this.currentList = index;
this.payVal = item.moneyValue * this.discount;
this.capitalValue = item.capitalValue;
},
// 支付
gopay() {
const extendParam = {
MatchID: getSession("raceInfo").matchID, // 接口所需参数
Amount: this.capitalValue, // 接口所需参数
};
const payParams = {
total_fee: this.payVal,
body: "模拟资金充值",
openId: this.userInfo.userID,
product: 22,
extendParam: JSON.stringify(extendParam),
};
sendPayApp(payParams).then((res) => { // 发起支付
uni.hideLoading(); //下单中提示关闭
if (res.isSuccess) {
let info = {
signType: "MD5",
};
info = Object.assign(info, res.info);
this.callApp(res.info, payParams);
this.getPayStatus(res.info)
} else {
uni.showToast({
title: "发起支付失败！",
icon: "error",
duration: 2000,
});
}
console.log(res);
});
},
// 获取支付状态
getPayStatus(data1){
//显示加载框
uni.showLoading({
title: '支付中...',
mask: true
});
// 循环查询订单状态
let payStatus = 0
let count = 0
let sint = setInterval(() => {
this.getPayStatus_(data1).then((status)=>{
let payStatus = status
count++
if(status==1){
clearInterval(sint);
uni.hideLoading();
uni.navigateBack()
}
if(count==10){//设置10秒后取消循环查询订单状态
clearInterval(sint);
uni.hideLoading();
uni.showToast({
title: "未支付成功！",
icon: "none",
duration: 2000,
});
}
})
}, 1000);
},
// 查询支付状态（支付状态 0：未支付，1：已支付，2：支付失败，9：已退款）
getPayStatus_(data1) {
return new Promise((resolve, reject) => {
let params1 = {
TradeNo: data1.out_trade_no
}
queryPayStatus(params1).then(res => {
if (res[0].payStatus == 1) {
resolve(res[0].payStatus);
}else{
resolve(0);
}
})
})
},
// 支付所需参数（后端接口返回）
callApp(data, payParams) {
let params = {
package: "Sign=WXPay", // 固定值
partnerId: "1557237511", // 微信支付商户号
orderId: payParams.tradeNo,
nonceStr: data.nonceStr,
timeStamp: data.timeStamp,
out_trade_no: data.out_trade_no, // 支付订单号
paySign: data.paySign,
code_url: data.code_url,
appid: data.appid,
signType: data.signType,
prepayid: data.prepayid,
};
params = JSON.stringify(params);
let sysInfo = uni.getSystemInfoSync();
if (sysInfo["platform"].indexOf("ios") > -1) {
window.webkit.messageHandlers.goBuyWx.postMessage(params);
} else {
if (window.ytyJsApi) {
window.ytyJsApi.goBuyWx(params);
} else {
uni.showToast({
title: "window.ytyJsApi.goBuyWx() is null",
icon: "none",
});
}
}
},
},
};
</script>
<style lang="scss" scoped>
.xzje {
width: 706rpx;
margin: 0 auto 0;
.bt {
font-weight: 600;
color: #23292e;
font-size: 34rpx;
padding: 30rpx 0;
padding-bottom: 20rpx;
}
.lb {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.mx {
width: 48%;
text-align: center;
border-radius: 10rpx;
border: 1px solid rgba(221, 233, 255, 1);
padding-top: 20rpx;
margin-bottom: 30rpx;
background-color: rgba(221, 233, 255, 1);
position: relative;
.one {
color: #2f569e;
font-size: 30rpx;
font-weight: 600;
}
.two {
color: #fa452d;
font-weight: 600;
padding: 15rpx 0;
}
.three {
color: #2f569e;
font-size: 28rpx;
background-color: rgba(47, 86, 158, 0.25);
padding: 10rpx 0;
}
.select {
width: 44rpx;
height: 44rpx;
position: absolute;
bottom: 0;
right: 0;
}
}
}
}
.db {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f1f2f4;
box-sizing: border-box;
.lf {
font-size: 36rpx;
font-family: Microsoft YaHei;
// font-weight: 600;
color: #fa452d;
padding-left: 20rpx;
}
.lr {
background-color: #f40;
color: #fff;
padding: 0 50rpx;
height: 100rpx;
font-size: 30rpx;
line-height: 100rpx;
}
}
</style>
