添加柜台充值，修改扫码取水支付方式

Liuyi

2024-11-12 0ed8e370659ad4e0582301ae31cfa155da114590

 pages/scanWater/index.vue

@@ -1,63 +1,329 @@
<script setup>
   import{ ref ,onMounted} from 'vue'
   import { wxPayApi,buyWaterApi } 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
      // if(index1 == 5){
      //    disabled.value = false
      //    choosedMoney.value = ''
      // }else{
      //    choosedMoney.value = moneyList.value[index1].value
      //    otherMoney.value = ''
      //    disabled.value = true
      // }
   }
   //输入金额
   // const otherMoney = ref()
   //支付方式
   const userBalance = ref(JSON.parse(uni.getStorageSync('userInfo')).balance)
   const payMethod = ref(2)
   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: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
      console.log('index',index1,payMethod.value)
   }
   async function submit(){
      // let money = ''
      // if(disabled.value){
         // money = choosedMoney.value
      // }else{
      //    money = Number(otherMoney.value)
      // }
      if(payMethod.value == 1){
         let data = {
            payType:payMethod.value,
            card:JSON.parse(uni.getStorageSync('userInfo')).waterCardNumber,
            amount:choosedMoney.value,
            // sn:1060003979
            sn:facilityCode.value
            }
         await buyWaterApi(data).then((res) =>{
            console.log('余额',res,data)
            if(res.code == 200){
                  uni.navigateTo({
                     url:'/pages/scanSuccess/index'
                  })
               }else{
                  uni.showToast({
                     title:'支付失败！',
                     icon:'none'
                  })
               }
         })
      }else if(payMethod.value == 2){
         let data = {
            businessType:3,
            tradeAmount:choosedMoney.value,
            // facilityCode:'1066012684',
            facilityCode:facilityCode.value,
            }
				
            console.log('data',data)
         await wxPayApi(data).then((res) =>{
            console.log('微信',res,'data',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'
                  });
                }
               })
            }
         })
      }
   }
   const facilityCode = ref()
   onLoad((option) =>{
      facilityCode.value = option.facilityCode
   })
</script>
<template>
   <view class="container">
      <navbar title ='扫码成功'></navbar>
      <navbar title="扫码取水"></navbar>
      <view class="content">
         <view class="img-box">
            <image class="img" src="../../static/images/other/success.png" alt=""></image>
            <view class="text text1">操作成功~</view>
         <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="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 style="margin-left:10rpx;color:#5EA1FA;" v-if="item.value == 1">({{userBalance}})</view>
                        </view>
                        <radio :value="item.value" :checked="item.checked" @click="choosePay(index)"/>
                     </view>
                  </block>
               </view>
            </view>
         </view>
         <view class="text">请在设备上操作</view>
         <view class="back" @click="navBack()">返回首页</view>
         <view class="submit-btn" @click="submit()">确认支付</view>
      </view>
   </view>
</template>

<script setup>
   function navBack(){
      uni.navigateBack()
   }
</script>

<style lang="scss">
<style lang="scss" scoped>
   .container{
      width: 100%;
      height: 100vh;
      .content{
         width: 100%;
         height:calc(100vh - 176rpx);
         background:linear-gradient(to top,#FFFFFF,#E8EFFF);   
         box-sizing: border-box;  
         display: flex;
         padding:200rpx 0 600rpx;
         justify-content: space-between;
         flex-direction: column;
         align-items: center;
         .img-box{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
         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;
                  }
               }
            }
            // .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;
                        }
                     }
                  }
               }
            }
         }
          .img{
             width:580rpx;
             height: 385rpx;
          }
          .text{
             font-weight: 300;
             font-size: 32rpx;
             color: #548AFF;
          }
          .back{
             width: 300rpx;
             height: 80rpx;
             background: #FFFFFF;
             border:1rpx solid rgba(95, 117, 244, 0.6);
             color: #548AFF;
             border-radius:40rpx;
             line-height:80rpx;
             text-align: center;
          }
			 
      }
      .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>