<script setup>
|
import{ ref ,onMounted} from 'vue'
|
import { wxPayApi,rechargeApi } from '../../api/index.js'
|
|
const choosedMoney = ref(50)
|
const disabled = ref(true)
|
const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
//选择金额
|
const moneyList = ref([
|
{value:50,active:true},
|
{value:100,active:false},
|
{value:200,active:false},
|
{value:500,active:false},
|
{value:1000,active:false},
|
{value:'其他金额',active:false},
|
])
|
const activeStyle = ref({
|
backgroundColor:'#5EADFF',
|
color:'#fff'
|
})
|
function chooseMoney(index1){
|
moneyList.value.forEach((item,index) =>{
|
if(item.active == true){
|
item.active = false
|
}
|
})
|
moneyList.value[index1].active = true
|
if(index1 == 5){
|
disabled.value = false
|
choosedMoney.value = ''
|
}else{
|
choosedMoney.value = moneyList.value[index1].value
|
otherMoney.value = ''
|
disabled.value = true
|
}
|
}
|
//输入金额
|
const otherMoney = ref()
|
//支付方式
|
const payMethod = ref()
|
const payList = ref([
|
// {text:"支付宝支付",value:1,checked:true,img:'../../static/images/recharge/pay.png'},
|
{text:"微信支付",value:2,checked:true,img:'../../static/images/recharge/wx.png'},
|
// {text:"余额",value:3,checked:false,img:'../../static/images/recharge/balance.png'},
|
])
|
// function choosePay(index1){
|
// payList.value.forEach((item,index) =>{
|
// if(item.checked == true){
|
// item.checked = false
|
// }
|
// })
|
// payList.value[index1].checked = true
|
// payMethod.value = payList.value[index1].value
|
// }
|
async function submit(){
|
let money = ''
|
if(disabled.value){
|
money = choosedMoney.value
|
}else{
|
money = Number(otherMoney.value)
|
}
|
let data = {
|
cardNumber:userInfo.waterCardNumber,
|
paymentMethod:1,
|
rechargeAmount:money
|
}
|
//生成订单
|
await rechargeApi(data).then(async(res) =>{
|
if(res.code == 200){
|
let data = {
|
businessType:1,
|
businessNo:res.data
|
}
|
//发起支付
|
await wxPay(data)
|
}
|
})
|
}
|
//微信支付
|
async function wxPay(data){
|
|
await wxPayApi(data).then((res) =>{
|
if(res.code == 200){
|
//调用微信官方支付接口弹出付款界面,输入密码扣款
|
wx.requestPayment({
|
//预支付订单信息
|
// appId: res.data.appId,
|
timeStamp: res.data.timeStamp, //时间戳
|
nonceStr: res.data.nonceStr, //随机串
|
package: res.data.package, //prepay_id
|
signType: res.data.signType, //签名算法MD5
|
paySign: res.data.paySign ,//微信签名
|
success (res) {
|
if (res.errMsg == "requestPayment:ok"){
|
console.log('支付成功', res)
|
uni.showToast({
|
title: '支付成功',
|
duration: 2000,
|
});
|
uni.navigateBack()
|
}else{
|
uni.showToast({
|
title: '支付失败',
|
duration: 2000,
|
icon:'none'
|
});
|
}
|
|
},
|
fail (res) {
|
uni.showToast({
|
title: '微信支付失败',
|
duration: 2000,
|
icon:'none'
|
});
|
}
|
})
|
}
|
})
|
}
|
</script>
|
<template>
|
<view class="container">
|
<navbar title="账户充值"></navbar>
|
<view class="content">
|
<view class="main">
|
<view class="money">
|
<view class="money-title">
|
<view class="title-icon"></view>
|
<view class="title-text">充值金额</view>
|
</view>
|
<view class="money-list">
|
<block v-for="(item,index) in moneyList" :key="index">
|
<view class="money-box" :style="item.active ? activeStyle : ''" @click="chooseMoney(index)">￥{{item.value}}</view>
|
</block>
|
</view>
|
</view>
|
<view class="other-money">
|
<view class="money-title">
|
<view class="title-icon"></view>
|
<view class="title-text">其他金额</view>
|
</view>
|
<view class="money-input">
|
<input :disabled = 'disabled' :focus = '!disabled' placeholder="请输入其他金额" v-model="otherMoney"/>
|
</view>
|
</view>
|
<view class="pay-methods">
|
<!-- <view class="money-title">
|
<view class="title-icon"></view>
|
<view class="title-text">请选择支付方式</view>
|
</view> -->
|
<view class="methods-list">
|
<block v-for="(item,index) in payList">
|
<view class="pay-item">
|
<view class="pay-item-right">
|
<image :src="item.img" alt=""></image>
|
<view>{{item.text}}</view>
|
</view>
|
<radio :value="item.value" :checked="item.checked"/>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
<view class="submit-btn" @click="submit()">立即充值</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
width: 100%;
|
height: 100vh;
|
.content{
|
width: 100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
overflow-y: scroll;
|
.main{
|
width: 686rpx;
|
height:1262rpx;
|
background: #FFFFFF;
|
border-top-right-radius: 24rpx;
|
border-top-left-radius: 24rpx;
|
margin: 20rpx auto 0;
|
padding:0 25rpx;
|
box-sizing: border-box;
|
.money{
|
width: 100%;
|
height:378rpx;
|
padding-top: 58rpx;
|
// background: #65ffb2;
|
box-sizing: border-box;
|
.money-list{
|
margin-top:40rpx;
|
width:100%;
|
height: 240rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
.money-box{
|
width:160rpx;
|
height: 100rpx;
|
border:2rpx solid #75C8EB;
|
border-radius: 8rpx;
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #4EB6E3;
|
text-align: center;
|
line-height: 100rpx;
|
}
|
}
|
}
|
.other-money{
|
width: 100%;
|
height:164rpx;
|
margin-top:58rpx;
|
.money-input{
|
margin:40rpx auto 0;
|
width:calc(100% - 40rpx);
|
height: 80rpx;
|
box-sizing: border-box;
|
border-radius:8rpx;
|
border: 2rpx solid #75C8EB;
|
input{
|
width:94%;
|
height: 80rpx;
|
margin-left:6%;
|
}
|
}
|
}
|
.pay-methods{
|
width: 100%;
|
margin-top:58rpx;
|
.methods-list{
|
margin-top:40rpx;
|
width: 100%;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
// background: #49B4E3;
|
height:130rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-start;
|
.pay-item{
|
width:100%;
|
display: flex;
|
justify-content:space-between;
|
align-items: center;
|
.pay-item-right{
|
display: flex;
|
image{
|
width: 42rpx;
|
height: 42rpx;
|
margin-right:34rpx;
|
}
|
view{
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.submit-btn{
|
width: 686rpx;
|
height: 98rpx;
|
background:#5EA1FA;
|
border-radius:50rpx;
|
text-align: center;
|
line-height: 98rpx;
|
letter-spacing:3rpx;
|
margin:0 auto;
|
font-weight: 300;
|
font-size: 36rpx;
|
color: #FFFFFF;
|
}
|
}
|
.money-title{
|
display: flex;
|
align-items: center;
|
.title-icon{
|
width:8rpx;
|
height:36rpx;
|
background:#49B4E3;
|
margin-right:12rpx;
|
}
|
.title-text{
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #000000;
|
}
|
}
|
</style>
|
