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

<template>
	<view>
		<u-navbar title="账户充值" title-color="#101010" :customBack="customBack">
			<view slot="right" class="slot"  @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="infos" >
					<view class="item">
						<view class="item-title">
							承租方
						</view>
				
						<view class="item-value">
							{{personInfo.name}}
						</view>
					</view>
				
					<view class="item" v-if="false">
						<view class="item-title">
							户号
						</view>
				
						<view class="item-value">
							00880088
						</view>
					</view>
					<view class="item"  v-if="false">
						<view class="item-title">
							联系人
						</view>
				
						<view class="item-value">
							{{personInfo.contacts}}
						</view>
					</view>
					<view class="item"  v-if="false">
						<view class="item-title">
							物业方
						</view>
				
						<view class="item-value">
							{{companyInfo.propertyManagement}}
						</view>
					</view>
				</view>
				
				<view class="balance">
					<!-- -->
					<view class="balance-img">
						
						
						
						
						<img src="@/assets/img/Group 911.png" class="Group911"></img>
						
					</view>
					 <view class="balanceMain">
						<view class="balanceFlex2" :style="'border-color:'+averageColor"></view>
						
						<svg width="282" height="282" :style="'transform: rotate('+averageLevel+'deg);'" 
						 class="Group909" 
						 viewBox="0 0 282 282" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M157 141C157 149.837 149.837 157 141 157C132.163 157 125 149.837 125 141C141 0 141 0 141 0C141 0 141 0 157 141Z" fill="#DFDAD4"/>
						<path d="M141 157C132.163 157 125 149.837 125 141C141 0 141 7.08465e-05 141 7.08465e-05C141 7.08465e-05 141 96.5001 141 157Z" fill="#CAC3BA"/>
						<g filter="url(#filter0_d_2522_561)">
						<circle cx="141" cy="142" r="7" fill="#ACABA8"/>
						</g>
						<defs>
						<filter id="filter0_d_2522_561" x="128" y="129" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
						<feFlood flood-opacity="0" result="BackgroundImageFix"/>
						<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
						<feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2522_561"/>
						<feOffset/>
						<feGaussianBlur stdDeviation="2"/>
						<feComposite in2="hardAlpha" operator="out"/>
						<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
						<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2522_561"/>
						<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2522_561" result="shape"/>
						</filter>
						</defs>
						</svg>
					 </view>
					 <view class="balanceMain">
						 <view class="balanceFlex">
							 <view class="balance-right balance">
								{{personInfo.balance}}
							 </view>
							 <view class="balance-left">
								可用余额(元)
							 </view>
						 </view>
					 </view>
					
					
				</view>
				
				<!-- 缴费金额 -->
				<view class="payment-amount">
					<view class="title">
						充值金额
						
						<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>
					<view class="amount-options">
						<view  v-for="(item,i) in amountList" :key="i"
						 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="img2" 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   class="img3"
										src="@/assets/img/riFill-exchange-cny-fill@1x.png" 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">{{submitType==2?'查看对公转账信息':'立即支付'}}</button>
			</view>
		</view>
		<u-divider  nonetext="没有找到相关内容"
			border-color="#CFD2D5">已经到底了</u-divider>
			
<img id="qrcode" style="display: none;">
		<u-modal v-model="showModel" :show-cancel-button="true"  @confirm="homePage"
			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 getOpenId from '@/apis/utils/init.js'
	
	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:{},
				averageLevel:0,
				averageColor:"#55bb81",
			}
		},
		onLoad() {
			
			//this.submitForm.companyId=this.carhelp.getPersonInfoPlus().companyInfo.id
			var openId=this.carhelp.getOpenId()
			//当前页面必须要OpenId
			if(openId){
				
			}else{
				getOpenId.getOpenId(true, this.carhelp.getUID())
			}
			this.submitForm.openId=openId
			this.submitForm.source="yjwg"
		},
		onReady() {
			this.homePage()
			this.availableDuration()
		},
		onShow(){
			this.homePage()
			this.availableDuration()
		},
		methods: {
			customBack(){
				 if ('prodv4'==process.car.NODE_ENV) {
					 if(process.env.NODE_ENV === "development"){
						  window.history.back()
					 }else{
						  window.location.href=process.car.BACK_URL
					 }
					
				 }else{
					 window.history.back()
				 }
				
			},
			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"
							})
						}
					});
					
				 
			},
			availableDuration(){
				API_index.availableDuration({
					
				}).then((response) => {
					var sz=['#C0331D','#e84325','#ef7830',
					'#4faf78', '#55bb81']
					
					var balance=response.data.balance;
					var averageAmount=response.data.averageAmount;
					if(averageAmount==0&&balance>0){
						
						this.averageLevel=130;
						
						this.averageColor=sz[sz.length-1]
					}else if(averageAmount==0){
						this.averageColor=sz[0]
						this.averageLevel=-130;
					} else if(balance==0){
						this.averageLevel=-130;
						this.averageColor=sz[0]
					}else{
						var day=balance/averageAmount
						console.log(day)
						
						if(day<1){
							this.averageLevel=-130;
							this.averageColor=sz[0]
						}else if(day==1){
							this.averageLevel=-90;
							this.averageColor=sz[1]
						}else if(day<7){
							this.averageColor=sz[2]
							var sday=day-1
							
							var kd=45-(sday)/6*45
							this.averageLevel=(-45-kd);
						}else if(day<=15){
							this.averageColor=sz[3]
							var sday=day-7
							
							var kd=45-(sday)/8*45
							this.averageLevel=(0-kd);
						}else{
							this.averageLevel=130;
							this.averageColor=sz[sz.length-1]
						}
					}
					console.log(this.averageLevel)
				}).catch(error => {
					//uni.hideLoading();
					uni.showToast({
						title: error,
						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();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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;
            border-radius: 8px;
			.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 {
				
				.balance-img{
					padding:0 40rpx;
					
					.Group911{
						width: 100%;
						
					}
					 
					
				}
				.balanceMain{
					display: flex;
					height: 0;
					justify-content: space-around;
					.Group909{
						//width: 40rpx;
						    width: 400rpx;
						    height: 400rpx;
						position: absolute;
						
						top: calc(50vw + 40rpx);
					
					
						z-index: 8;
					}
					.balanceFlex2{
						z-index: 7;
						content: ' ';
						 width: 200rpx; /* 宽度 */  
							height: 200rpx; /* 高度 */ 
						background-color: white;
						  border: 36rpx solid blue; /* 外圈颜色及宽度 */  
							border-radius: 50%; /* 圆形 */ 
							position: absolute;
							top: calc(50vw + 140rpx);
					}
				}
				.balanceMain{
					    display: flex;
					    height: 0;
					    justify-content: space-around;
						
					.balanceFlex{
						
						    display: inline-flex;
						    flex-direction: column;
						    /* width: 100%; */
						    align-items: center;
						    position: relative;
						    top: -140rpx;
					}
					.balance-left {
						color: rgb(48, 48, 48);
						font-size: 32rpx;
						//line-height: 40px;
					}
					
					.balance-right {
						color: rgb(48, 48, 48);
						font-size: 64rpx;
						font-weight: bold;
					}
				}
				
			}

			// 提示
			.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);
				
				padding-bottom: 24rpx;

				.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;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.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;
border-bottom: 1px solid rgba(242,242,242,1);
				.symbol {
					margin-right: 32rpx;
				}
               
				.input {
					height: 100rpx;
					font-size: 40rpx;
					 
					 
				}

				::v-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);
                            .text{
                            	 font-size: 36rpx;
                            }
							.img {
								width: 48rpx;
								height: 48rpx;
								vertical-align: middle;
								margin-right: 16rpx;
								margin-left: -3rpx;
							}
							.img2{
								width: 40rpx;
								height: 40rpx;
								vertical-align: middle;
								margin-right: 20rpx;
							}
							.img3{
								background-color: #1677FF;
								 width: 40rpx;
								 height: 40rpx;
								 vertical-align: middle;
								 margin-right: 20rpx;
								 border-radius: 999px;
							}
						}

						::v-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>