<script setup>
|
import{ ref ,onMounted} from 'vue'
|
import { wxPayApi } from '../../api/index.js'
|
|
//输入金额
|
const payMoney = ref()
|
//支付方式
|
const payMethod = ref()
|
const payList = ref([
|
{text:"微信支付",value:0,checked:true,img:'../../static/images/recharge/wx.png'},
|
{text:"会员卡余额",value:1,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(){
|
//微信支付
|
if(payMethod.value == 0){
|
await wxPayApi({businessType:1,tradeAmount:payMoney}).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'
|
});
|
}
|
})
|
}
|
})
|
//会员卡支付
|
}else if(payMethod.value == 1){
|
// let data = {
|
// cardType:cardInfo.value.cardType,
|
// card:cardInfo.value.waterCardNumber,
|
// sn:res.result
|
// }
|
await buyWaterApi().then((res) =>{
|
if(res.code == 200){
|
uni.navigateTo({
|
url:'/pages/scanWater/index'
|
})
|
}else{
|
uni.showToast({
|
title:'扫码失败！',
|
icon:'none'
|
})
|
}
|
})
|
}
|
}
|
</script>
|
<template>
|
<view class="container">
|
<navbar title="支付"></navbar>
|
<view class="content">
|
<view class="main">
|
<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" @click="choosePay(index)"/>
|
</view>
|
</block>
|
</view>
|
</view>
|
<view class="pay-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="payMoney"/>
|
</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;
|
}
|
}
|
}
|
.pay-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>
|
