lunhan/water/water-drinking-uniapp.git

			@@ -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>