<script setup>
|
import{ ref ,onMounted} from 'vue'
|
import { wxPayApi,buyWaterApi,getPriceBySnApi,getVipInfoApi } from '../../api/index.js'
|
import { onLoad } from "@dcloudio/uni-app"
|
//选中金额
|
const choosedMoney = ref(1)
|
//金额列表
|
const moneyList = ref([
|
{value:1,volume:2.5,active:true},
|
{value:2,volume:5,active:false},
|
{value:3,volume:7.5,active:false},
|
])
|
//选择金额样式
|
const activeStyle = ref({
|
backgroundColor:'rgba(148,201,243)',
|
color:'#fff'
|
})
|
//选中事件
|
function chooseMoney(index1){
|
moneyList.value.forEach((item,index) =>{
|
if(item.active == true){
|
item.active = false
|
}
|
})
|
moneyList.value[index1].active = true
|
choosedMoney.value = moneyList.value[index1].value
|
}
|
//支付方式--------------------------------------------
|
//1：余额，2：微信
|
const payMethod = ref(2)
|
const payList = ref([
|
{text:"微信支付",value:2,checked:true,img:'../../static/images/recharge/wx.png'},
|
{text:"余额支付",value:1,checked:false,img:'../../static/images/recharge/balance.png'},
|
])
|
//设置支付选项
|
const cardInfo = ref({
|
cardNumber:'',
|
cardBalance:'',
|
})
|
async function setPayMethod(){
|
await getVipInfoApi().then((res) =>{
|
console.log('获取会员卡返回响应-微信扫码取水页',res)
|
if(res.code == 200 && res.data.id){
|
cardInfo.value.cardNumber = res.data.cardNumber
|
cardInfo.value.cardBalance = res.data.balance
|
}else{
|
console.log('未绑定会员卡')
|
payList.value.splice(1,1)
|
}
|
})
|
}
|
//选中支付方式事件
|
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
|
console.log('index',index1,payMethod.value)
|
}
|
async function submit(){
|
if(payMethod.value == 1){
|
//余额支付，比较金额大小
|
if(choosedMoney.value > Number(cardInfo.value.cardBalance)){
|
uni.showToast({
|
title:'水卡余额不足',
|
icon:'none'
|
})
|
}else{
|
let data = {
|
payType:payMethod.value,
|
card:cardInfo.value.cardNumber,
|
amount:choosedMoney.value,
|
sn:facilityCode.value
|
}
|
//余额支付
|
await buyWaterApi(data).then((res) =>{
|
console.log('余额支付响应',res,'传参',data)
|
if(res.code == 200){
|
uni.navigateTo({
|
url:'/pages/scanSuccess/index'
|
})
|
}else if(res.code == 300){
|
uni.showToast({
|
title:res.msg,
|
icon:'none'
|
})
|
}else{
|
uni.showToast({
|
title:'微信支付失败',
|
icon:'none'
|
})
|
}
|
})
|
}
|
}else if(payMethod.value == 2){
|
let data = {
|
businessType:3,
|
tradeAmount:choosedMoney.value,
|
facilityCode:facilityCode.value,
|
}
|
|
console.log('data',data)
|
await wxPayApi(data).then((res) =>{
|
console.log('微信支付响应',res,'传参',data)
|
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.navigateTo({
|
url:'/pages/scanSuccess/index'
|
})
|
}else{
|
uni.showToast({
|
title: '支付失败',
|
duration: 2000,
|
icon:'none'
|
});
|
}
|
},
|
fail (res) {
|
uni.showToast({
|
title: '微信支付失败',
|
duration: 2000,
|
icon:'none'
|
});
|
}
|
})
|
}else if(res.code == 300){
|
uni.showToast({
|
title:res.msg,
|
duration: 2000,
|
icon:'none'
|
});
|
}else{
|
uni.showToast({
|
title:'微信支付失败',
|
duration: 2000,
|
icon:'none'
|
});
|
}
|
})
|
}
|
}
|
const facilityCode = ref()
|
onLoad((query) =>{
|
let url = decodeURIComponent(query.q)
|
facilityCode.value = url.split('=')[1]
|
console.log('微信扫码取水','url',url,'facilityCode',facilityCode.value)
|
})
|
//设置水价
|
async function getWaterPrice(){
|
await getPriceBySnApi(facilityCode.value).then((res) =>{
|
moneyList.value.forEach((item,index) =>{
|
item.value = ((index + 1) * res.data.price).toFixed(1)
|
item.volume = ((index + 1) * res.data.yield).toFixed(1)
|
})
|
choosedMoney.value = res.data.price
|
console.log('水价设置回调',res,'传参',facilityCode.value)
|
})
|
}
|
function navTo(){
|
uni.redirectTo({
|
url:'/pages/index/index'
|
})
|
}
|
onMounted(async() =>{
|
await getWaterPrice()
|
await setPayMethod()
|
})
|
|
</script>
|
<template>
|
<view class="container">
|
<!-- <navbar title="扫码取水"></navbar> -->
|
<view class="navbar">
|
<image src="../../static/images/other/home.svg" @click="navTo"></image>
|
<text>扫码取水</text>
|
</view>
|
<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)">
|
<view>{{item.value}}<span>元</span></view>
|
<view>{{item.volume}}<span>L</span></view>
|
</view>
|
</block>
|
</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 style="margin-left:10rpx;color:#5EA1FA;" v-if="item.value == 1">({{cardInfo.cardBalance}})</view>
|
</view>
|
<radio :value="item.value" :checked="item.checked" @click="choosePay(index)"/>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
<view class="submit-btn" @click="submit()">确认支付</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.navbar{
|
width:100%;
|
height:176rpx;
|
background: linear-gradient(to bottom,#5EA1FA,#8BC1FC);
|
display: flex;
|
align-items: flex-end;
|
box-sizing: border-box;
|
position: relative;
|
padding:0 32rpx 24rpx;
|
image{
|
width:40rpx;
|
height:40rpx;
|
}
|
text{
|
font-weight: 400;
|
font-size: 36rpx;
|
color: #000000;
|
position:absolute;
|
width:200rpx;
|
left:calc(50% - 100rpx);
|
text-align: center;
|
color: #e4ecf9;
|
letter-spacing:1rpx;
|
}
|
}
|
.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:420rpx;
|
padding-top: 58rpx;
|
// background: #65ffb2;
|
box-sizing: border-box;
|
.money-list{
|
margin-top:30rpx;
|
width:100%;
|
height: 290rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
.money-box{
|
width:94%;
|
height:86rpx;
|
border:2rpx solid #75C8EB;
|
border:2rpx solid rgba(148,201,243);
|
border-radius: 8rpx;
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #4EB6E3;
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
box-sizing: border-box;
|
justify-content:space-between;
|
font-weight:600;
|
letter-spacing:5rpx;
|
font-size:32rpx;
|
}
|
}
|
}
|
.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>
|
