From 440b4ab9d4278d3f9c13b004d2c2289f45254cbc Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期二, 19 十一月 2024 17:29:06 +0800
Subject: [PATCH] 添加积分记录，修改位置获取
---
pages/scanWater/index.vue | 328 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 319 insertions(+), 9 deletions(-)
diff --git a/pages/scanWater/index.vue b/pages/scanWater/index.vue
index 383a3fe..ab6ba91 100644
--- a/pages/scanWater/index.vue
+++ b/pages/scanWater/index.vue
@@ -1,14 +1,324 @@
+<script setup>
+ import{ ref ,onMounted} from 'vue'
+ import { wxPayApi,buyWaterApi,getPriceBySnApi } 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
+ }
+ //支付方式
+ 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(){
+ //余额支付
+ if(payMethod.value == 1){
+ if(choosedMoney.value > Number(userBalance.value)){
+ uni.showToast({
+ title:'水卡余额不足',
+ icon:'none'
+ })
+ }else{
+ let data = {
+ payType:payMethod.value,
+ card:JSON.parse(uni.getStorageSync('userInfo')).waterCardNumber,
+ 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,
+ }
+ 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.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((option) =>{
+ facilityCode.value = option.facilityCode
+ console.log('小程序扫码取水','option.facilityCode',option.facilityCode,'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)
+ })
+ let waterCardNumber = JSON.parse(uni.getStorageSync('userInfo')).waterCardNumber
+ if(!waterCardNumber){
+ payList.value.splice(1,1)
+ }
+ }
+ onMounted(async() =>{
+ await getWaterPrice()
+ })
+
+</script>
<template>
- <view>
- <navbar title ='设备详情'></navbar>
- 扫码后跳转的页面
+ <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)">
+ <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">({{userBalance}})</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>
-<script setup>
-
-</script>
-
-<style>
-
+<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: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>
--
Gitblit v1.9.3