jp-housekeep-hall/pages/recharge/accountRecharge.vue

<template>
	<view>
		<u-navbar title="账户充值" title-color="#101010">
			<view slot="right" class="slot" v-if="false" @click="gotoUrl('/pages/returnBalance/returnBalance')" >
				退余额
			</view>
		</u-navbar>
		<view class="main">
			<view class="headline">
				<view class="title-left">
					<view class="icon">
						<image class="icon1" src="@/assets/img/PEokWS2@1x.png" mode=""></image>
					</view>
					<view class="text">
						账户充值

					</view>
				</view>
				<view class="title-right" @click="gotoUrl('/pages/recharge/rechargeRecord')" >
					<view class="icon">
						<image class="icon2" src="@/assets/img/riLine-time-line.svg" mode=""></image>
					</view>
					<view class="text">
						充值记录
					</view>
				</view>
			</view>
			<view class="content">
				<!-- 可用余额 -->
				<view class="balance">
					<view class="balance-left">
						可用余额(元)
					</view>
					<view class="balance-right">
						{{personInfo.balance}}
					</view>
				</view>
				<!-- 提示 有余额-->

				<view class="hint" v-if="personInfo.balance>0">
					有余额，可提前充值
				</view>
				<!-- 提示 无余额 已欠费 -->
				<view class="hint hint2"  v-if="personInfo.balance==0" >
					已扣完，请尽快缴费
				
				</view>
				<view class="hint hint2"  v-if="personInfo.balance<0" >
					有欠费，请尽快充值				
				</view>
				<!-- 租户信息 -->
				<view class="infos" >
					<view class="item">
						<view class="item-title">
							承租方
						</view>

						<view class="item-value">
							{{personInfo.fullName}}
						</view>
					</view>

					<view class="item" v-if="false">
						<view class="item-title">
							户号
						</view>

						<view class="item-value">
							00880088
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							联系人
						</view>

						<view class="item-value">
							{{personInfo.contacts}}
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							业主方
						</view>

						<view class="item-value">
							{{companyInfo.fullName}}
						</view>
					</view>
				</view>
				<!-- 缴费金额 -->
				<view class="payment-amount">
					<view class="title">
						缴费金额
					</view>
					<view class="amount-options">
						<view  v-for="(item,i) in amountList"
						 class="options-item " :class="{
							 chosen:selectNum==item
						 }" @click="otherNum=item,selectNum=item"   >
							{{item}}元
						</view>
					</view>
				</view>
				<!-- 输入金额 -->
				<view class="input-amount">
					<view class="symbol">
						￥
					</view>
					<input class="input"  @input="ckInput" @focus="focus" type="text" v-model="otherNum" placeholder="点击输入缴费金额">
				</view>
				<!-- 支付方式 -->
				<view class="payment-way">
					<view class="title">
						支付方式
					</view>
					<view class="way">
						<radio-group  @change="radioChange">
						<view class="way-item" v-if="companyInfo.paymentMethod.indexOf('2')>-1" >
							<view class="way-name">
								<view class="icon">
									<image class="img" src="@/assets/img/riFill-wechat-pay-fill fTAsMwS.svg" mode="">
									</image>
								</view>
								<view class="text">
									微信支付
								</view>
							</view>
							<view class="way-radio">
								<label class="radio">
									<radio value="0" name="selectType"  :checked="submitType === '0'"  /><text></text>
									
								</label>
							</view>
						</view>

						<view class="way-item"  v-if="companyInfo.paymentMethod.indexOf('1')>-1" >
							<view class="way-name">
								<view class="icon">
									<image class="img" src="@/assets/img/antOutline-alipay-circle bQiHn7m.svg" mode="">
									</image>
								</view>
								<view class="text">
									支付宝
								</view>
							</view>
							<view class="way-radio">
								<label class="radio">
									<radio value="1"  name="selectType"  :checked="submitType === '1'"  /><text></text>
								</label>
							</view>
						</view>

						<view class="way-item"  v-if="companyInfo.paymentMethod.indexOf('3')>-1"  >
							<view class="way-name">
								<view class="icon">
									<image style="width: 40rpx;height: 40rpx; border-radius: 999px;" class="img"
										src="@/assets/img/modalIcon.svg" mode=""></image>
								</view>
								<view class="text">
									对公转账
								</view>
							</view>
							<view class="way-radio" >
								<label class="radio">
									<radio value="2"  name="selectType"  /><text></text>
								</label>
							</view>
						</view>
						</radio-group>
						<!-- 对公转账弹窗 -->
						<u-modal v-model="show" :show-cancel-button="true"
						 @confirm="copyUrl()"
						 :show-title="false" confirm-text="复制"
							cancel-text="关闭">
							<view class="modal-content">
								<view class="title-icon">
									<image class="img" src="@/assets/img/modalIcon.svg" mode=""></image>
								</view>
								<view class="title">
									对公转账信息
								</view>
								<view class="infos-group">
									<view class="item" >
										<view class="item-title">
											收款户名
										</view>
										<view class="item-value">
											{{transferAccountsInfo.accountName}}
										</view>
									</view>
									<view class="item" >
										<view class="item-title">
											开户银行
										</view>
										<view class="item-value">
											{{transferAccountsInfo.bankName}}
										</view>
									</view>
									<view class="item" >
										<view class="item-title">
											收款账户
										</view>
										<view class="item-value">
											{{transferAccountsInfo.accountNo}}
										</view>
									</view>
									<view class="item" >
										<view class="item-title">
											联系电话
										</view>
										<view class="item-value">
											{{transferAccountsInfo.telephone}}
										</view>
									</view>
									
								</view>
							</view>

						</u-modal>

					</view>
				</view>
				<!-- 按钮 -->
				<button class="btn" @click="submit">立即支付</button>
			</view>
		</view>

		<u-modal v-model="showModel" :show-cancel-button="true" @cancel="getUserInfo()" @confirm="confirm"
			confirm-text="支付成功？" title="扫码支付">
			<view style="
								text-align: center;
							">
				<img id="qrcode2" :src="qrCodeImg">
			</view>
			<view style="
								text-align: center;
							">请使用支付宝扫码</view>

		</u-modal>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/wxPay.js'
	import * as API_index from '@/apis/pagejs/index.js'

	import * as API_weixin from '@/apis/weixin.js'
	import * as Pay from '@/apis/weixin.js'
	import QRCode from 'qrcodejs2'
	import {
		newDate,
		convertCanvasToImage,
	} from '@/apis/utils'
	import {
		wxPayJs
	} from '@/apis/utils/wxpay'
	export default {
		data() {
			return{
				amountList:[
					100,200,500,1000,2000,5000
				],
				show: false,
				showModel: false,
				qrCodeImg: "",
				submitType:"0",
				submitForm:{
					companyId: '',
					amount: '',
				},
				personInfo:{
					balance:0,
				},
				companyInfo:{
					paymentMethod:''
				},
				selectNum:'100',
				otherNum:'',
				transferAccountsInfo:{},
			}
		},
		onLoad() {
			
			//this.submitForm.companyId=this.carhelp.getPersonInfoPlus().companyInfo.id
		},
		onShow(){
			this.homePage()
		},
		methods: {
			copyUrl(){
				var transferAccountsInfo=this.transferAccountsInfo
				  var textToCopy = `收款户名${transferAccountsInfo.accountName}\n开户银行${transferAccountsInfo.bankName}\n收款账户${transferAccountsInfo.accountNo}\n联系电话${transferAccountsInfo.telephone}`;  
					uni.setClipboardData({
						data: textToCopy,
						success: function () {
							uni.showToast({
								title: "复制成功！",
								icon: "none"
							})
						}
					});
					
				 
			},
			homePage(){
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				
				API_index.homePage({
					
				}).then((response) => {
					//uni.hideLoading();
					this.submitForm.companyId=response.data.companyInfo.id;
					//this.carhelp.getPersonInfoPlus().companyInfo.id
					this.personInfo=response.data.tenantInfo;
					this.companyInfo=response.data.companyInfo;
					if(this.companyInfo.transferAccountsInfo){
						this.transferAccountsInfo=JSON.parse(this.companyInfo.transferAccountsInfo)
					}
					
					var sz=this.companyInfo.paymentMethod.split(',');
					if(sz.length==1){
						this.submitType=sz[0]
					}
				}).catch(error => {
					//uni.hideLoading();
					
				})
			},
			radioChange: function(evt) {
				 
				this.submitType=evt.detail.value
			    
			},
			ckInput(e){
				
				var text=e.detail.value
				if(text.indexOf('.')>0){
					var k =text.split(".")[1]
					if(k.length>=3){
						this.$nextTick(()=>{
							text=parseFloat(text).toFixed(2);
							this.otherNum= text
						})
					}
					
				}
				var t	=Number(text);
				if(t<1){
					this.$nextTick(()=>{
						this.otherNum='';
					})
						
				}
				if(t>5000){
					this.$nextTick(()=>{
						this.otherNum=5000;
					})	
				}
				
			},
			focus(){
				console.log(0)
				uni.pageScrollTo({
					scrollTop:999999,
					duration:0
				})
			},
			open() {
				this.show = true;
			},
			submit() {
				if (this.submitType == 2) {
					this.show = true;
				}else{
					
					if(!this.otherNum){
						this.otherNum=this.selectNum;
					}
					this.submitForm.amount=this.otherNum
					
					if(!this.otherNum){
						uni.showToast({
									
							title: "请输入缴费金额"
						})
						return
					}
					if (this.submitType == 0) {
						this.wxpy()
					}
					if (this.submitType == 1) {
						this.alpy()
					}
				}
				

			},
			alpy() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var listcanvas = document.getElementsByTagName('canvas')

				if (listcanvas.length > 0) {
					document.getElementById("qrcode").removeChild(document.getElementsByTagName('canvas')[0]);
				}
				Pay.alpay(this.submitForm).then((response) => {

					let qrcode = new QRCode('qrcode', {
						width: 200,
						height: 200,
						text: response.data.qr_code,
						correctLevel: QRCode.CorrectLevel.M,

					})
					this.outOrderNo = response.data.outOrderNo;
					var canvas = document.getElementsByTagName('canvas')[0];
					this.qrCodeImg = convertCanvasToImage(canvas);
					uni.hideLoading()
					this.showModel = true

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			wxpy() {

				Pay.wxpay(this.submitForm).then((response) => {

					if (!response.result) {
						uni.showToast({
							title: response.message
						})
						return
					}
					var data = response.data
					uni.hideLoading()
					//("Pay+"+new Date().getTime())		
					wxPayJs(data);

				}).catch(error => {
					uni.showToast({

						title: error
					})

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 50px;
	}

	.slot {
		margin-right: 24rpx;
		color: rgba(16, 16, 16, 1);
	}

	.main {
		margin: 24rpx;
		overflow: hidden;

		.headline {
			background: linear-gradient(90deg, rgba(120, 175, 247, 1) 0%, rgba(39, 116, 226, 1) 100%);
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;

			.title-left {
				display: flex;
				align-items: center;
				font-size: 36rpx;

				.icon1 {
					width: 56rpx;
					height: 56rpx;
					margin-right: 8rpx;
					vertical-align: middle;
				}
			}

			.title-right {
				display: flex;
				font-size: 32rpx;
				line-height: 32rpx;

				.icon2 {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;

				}
			}

		}

		.content {
			border-radius: 8px 8px 0 0;
			margin-top: -8rpx;
			z-index: 999;
			background-color: #fff;
			padding: 40rpx 32rpx;

			// 可用余额
			.balance {
				display: flex;
				justify-content: space-between;

				.balance-left {
					color: rgb(48, 48, 48);
					font-size: 36rpx;
					line-height: 40px;
				}

				.balance-right {
					color: rgb(48, 48, 48);
					font-size: 80rpx;
				}
			}

			// 提示
			.hint {
				font-size: 24rpx;
				color: #1677FF;
				margin-top: 16rpx;
				text-align: right;
				padding-bottom: 32rpx;
				border-bottom: 1px solid rgba(244, 244, 244, 1);
			}

			.hint2 {
				color: #E60012;
			}

			// 租户信息
			.infos {
				border-bottom: 1px solid rgba(244, 244, 244, 1);
				margin-top: 32rpx;
				padding-bottom: 32rpx;

				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.item-title {
						color: rgb(119, 119, 119);
						    white-space: pre;
					}

					.item-value {
						color: rgb(48, 48, 48);
					}
				}
			}

			// 缴费金额
			.payment-amount {
				margin-top: 32rpx;

				.title {
					color: rgb(48, 48, 48);
					font-size: 36rpx;
				}

				.amount-options {
					margin-top: 32rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.options-item {
						width: 200rpx;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 4px;
						text-align: center;
						background-color: rgba(242, 242, 242, 1);
						color: rgba(16, 16, 16, 1);
						font-size: 32rpx;
						margin-bottom: 20rpx;
					}

					.chosen {
						background-color: rgba(22, 119, 255, 1);
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			// 输入金额
			.input-amount {
				margin-top: 24rpx;
				display: flex;
				font-size: 48rpx;
				height: 100rpx;
				line-height: 100rpx;

				.symbol {
					margin-right: 32rpx;
				}

				.input {
					height: 100rpx;
					font-size: 48rpx;
					    border-bottom: 1px solid;
					//color: rgba(204, 204, 204, 1);
				}

				/deep/.uni-input-placeholder {
					color: rgba(204, 204, 204, 1);
				}
			}


			// 支付方式
			.payment-way {
				margin-top: 24rpx;

				.title {
					color: rgb(48, 48, 48);
					font-size: 36rpx;
				}

				.way {
					margin-top: 24rpx;

					.way-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;

						.way-name {
							display: flex;
							align-items: center;
							color: rgb(51, 51, 51);

							.img {
								width: 48rpx;
								height: 48rpx;
								vertical-align: middle;
								margin-right: 16rpx;
							}
						}

						/deep/.uni-radio-input {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			// 按钮
			.btn {
				height: 96rpx;
				border-radius: 50px;
				background-color: rgba(51, 133, 255, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 36rpx;
				margin-top: 48rpx;
			}

		}
	}


	// 对公转账弹窗
	.modal-content {

		padding: 40rpx 0;

		.title-icon {
			text-align: center;
		}

		.img {
			width: 96rpx;
			height: 96rpx;

		}

		.title {
			text-align: center;
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 8rpx;
		}

		.infos-group {
			margin: 40rpx 32rpx 0;

			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;

				.item-title {
					color: rgba(119, 119, 119, 1);
					font-size: 32rpx;
					 white-space: pre;
				}

				.item-value {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					margin-left: 16rpx;
				}
			}
		}
	}
</style>