jp-housekeep-hall/pages/deductionRecord/billPush.vue

<template>
	<view>
		<u-navbar title="账单提醒"
		 class="navbar-box"
		 :isBack="isBack"  title-color="#101010" ></u-navbar>
		<view class="background ">
			<view class="recharge-details">
				<view  class="details flew-items">
					<image class="img"  src="@/assets/img/Copy PEokWS2 Copy 1@1x.png" mode=""></image>
					
					{{detail.name}}
				</view>
				<view class="details ">
					
					<view class="item">
						<view class="item-title">
							承租方
						</view>
						<view class="item-value">
							{{detail.tenantName}}
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="item-title">
							推送用户
						</view>
						<view class="item-value">
							{{detail.employeeName}}
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							本期账单总金额
						</view>
						<view class="item-value billAmount">
							￥{{detail.billAmount}}元
						</view>
					</view>
					
				<!-- 	<view class="item" v->
						<view class="item-title">
							账户余额
						</view>
						<view class="item-value " :class="{
							'billAmount':personInfo.balance<0,
							'billAmount1':personInfo.balance>0
						}">
							￥{{personInfo.balance}}元
						</view>
					</view> -->
					<!-- <view class="item"  v-if="detail.accountInfo&&detail.accountInfo.bankName" >
						<view class="item-title">
							开户名称
						</view>
						<view class="item-value">
							{{detail.accountInfo.bankName}}
						</view>
					</view>
					<view class="item"  v-if="detail.accountInfo&&detail.accountInfo.bank" >
						<view class="item-title">
							开户银行
						</view>
						<view class="item-value">
							{{detail.accountInfo.bank}}
						</view>
					</view>
					<view class="item"  v-if="detail.accountInfo&&detail.accountInfo.account" >
						<view class="item-title">
							银行账号
						</view>
						<view class="item-value">
							{{detail.accountInfo.account}}
						</view>
					</view> -->
					<view class="item" v-if="false" >
						<view class="item-title">
							开票方式
						</view>
						<view class="item-value">
							{{detail.invoiced?detail.invoiceTypeName:'不开票'}}
						</view>
					</view>
				
					
				</view>
				<view class="details-title">
					<span class="name">账单明细</span>
					
					
				</view>
				<view class="details-list" v-for="(item,i) in detail.itemList" :key="i">
					<view class="item-list">
						<view class="item-title">
							<view class="item-title-name">{{item.contractItemName}}
							
							<span class="item-title-remark" v-if="item.num&&item.unit=='月'">({{item.num}}个{{item.unit}})</span>
							<span class="item-title-remark" v-if="item.remark">({{item.remark}})</span>
							</view>
							
							
							<view class="item-title-span">收费标准：{{item.price}}<span >{{item.unit}}</span></view>
							
							
						</view>
						<view class="item-value">
							{{item.total}}元
						</view>
					</view>
					<view class="item-remark" v-if="item.timeRanges&&item.timeRanges.length==2&&item.timeRanges[0]&&item.timeRanges[1]">
						起止日期{{item.timeRanges[0]}}至{{item.timeRanges[1]}}
					</view>
					<!-- <view class="item-remark" v-if="item.remark">
						备注：{{item.remark}}
					</view> -->
				</view>
				
				
			</view>
		
			<view class="details " v-if="detail.remark">
				<view class="item">
					<view class="item-title">
						账单备注
					</view>
					<view class="item-value">
						{{detail.remark}}
					</view>
				</view>
			</view>
			<view class="details-title">
				
				<span class="remark">请在收到账单5日内缴纳上述费用。</span>
				
			</view>
			<!--  -->
			<view  class="main" v-if="!detail.payTime" >
				
				<!-- 缴费金额 -->
						<view class="payment-amount" v-show="detail.billAmount<=5000">
							<view class="title">
								缴费金额
							</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="payment-way">
							<view class="title">
								支付方式  <span style="float: right;font-size: 32rpx;    color: #8b898c;">支付成功后等待财务确认</span>
							</view>
							<view class="way">
								<radio-group  @change="radioChange">
								<view class="way-item" v-if="companyInfo.paymentMethod.indexOf('2')>-1"  v-show="detail.billAmount<=5000" >
									<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"  v-show="detail.billAmount<=5000" >
									<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"   >
									<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"   :checked="submitType === '2'"  /><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>
				
				<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>
			
			
			<u-divider   nonetext="没有找到相关内容" style="margin-top: 20rpx;"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		<view class="cashier-btn-row">
			<view class="cashier-btn-amount">合计
				<span  class="cashier-btn-span">￥{{detail.billAmount}}元</span>
			</view>
			<view class="cashier-btn-go" @click="submit" v-if="!detail.payTime" >{{submitType==2?'对公转账':'立即支付'}}</view>
			 
			<!-- <view class="cashier-btn-go1"  
			   v-if="!detail.payTime&&detail.payStatus==0"
			   >线下支付</view> -->
			   <view class="cashier-btn-go1"
			     v-if="detail.payTime"
			     >已支付</view>
		</view>
		
		
		
	</view> 
</template>

<script>
	import * as API_index from '@/apis/pagejs/index.js'
	import * as API from '@/apis/pagejs/wxPay.js'
	
	import * as API_message from '@/apis/pagejs/message.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 {
				id:"",
				detail:{
					accountInfo:{},
					itemList:[]
				},
				transferAccountsInfo:{},
				isBack:false,
				accountInfoShow:false,
				
				amountList:[
					
				],
				show: false,
				showModel: false,
				qrCodeImg: "",
				submitType:"0",
				submitForm:{
					companyId: '',
					amount: '',
				},
				personInfo:{
					balance:0,
				},
				companyInfo:{
					paymentMethod:''
				},
				selectNum:'100',
				otherNum:'',
				
			}
		},
		onLoad(op) {
			if(op.site){
				this.isBack=true
			}
			if(op.id){
				this.id=op.id
				this.getDetail()
			}
		},
		onShow(){
			this.homePage()
		},
		methods: {
			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.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			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"
							})
						}
					});
					
				 
			},
			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.hideLoading();
					uni.showToast({
						icon: "none",
						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.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
			
				})
			},
			getDetail(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API_message.billDetails({
					id:this.id
				}).then((response) => {
					uni.hideLoading();
					this.detail=response.data;
					// this.detail.billAmount=800
					// this.detail.payTime=null;
					//this.detail.payStatus=1
					if(this.detail.billAmount>5000){
						this.submitType="2";
						//this.$forceUpdate()
					}else{
						this.amountList.push(this.detail.billAmount)
						this.selectNum=this.detail.billAmount;
						var amountList=[1000,2000,3000,4000,5000]
						for(var i =0 ;i<amountList.length;i++){
							var num=amountList[i]
							if(num>this.detail.billAmount){
								this.amountList.push(num)
								
							}
						}
					}
					
					//this.transferAccountsInfo=this.detail.accountInfo;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-navbar{
		    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
	}
	.background{
		padding-bottom: 160rpx;
	}
	.cashier-btn-row{
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0px;
		width: 100%;
		background: white;
		z-index: 999;
		    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.15);
		 font-size: 44rpx;
		 .cashier-btn-amount{
			  padding:32rpx ;
			  
		 }
		 .cashier-btn-span{
			color: red;
			margin-left: 20rpx;
		 }
		 .cashier-btn-go{
			  padding:32rpx ;
			background: #4586f7; 
			color: white;
		 }
		 .cashier-btn-go1{
		 			  padding:32rpx ;
		 			// background: #4586f7; 
		 			// color: white;
		 }
		
	}
	
	
	.flew-items{
		display: flex;
		align-items: center;
		 padding:24rpx;
		font-size: 32rpx;
		 border-bottom:  1px solid #f2f2f2;
		.img{
			width: 60rpx;
			height: 60rpx;
		}
	}
	
	.navbar-box{
		box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
	}
	.details-title{
		display: flex;
		 justify-content: space-between;
		  padding:24rpx;
		   font-size: 32rpx;
		  //  border-bottom:  1px solid #d5d5d5;
		.name{
			color: #8b898c;
		}
		.remark{
			color: #F44336;
		}
	}
	.details,.details-list{
		background-color: white;
		
		.billAmount{
			 font-size: 44rpx;
			 color: red;
		}
		.billAmount1{
			 font-size: 44rpx;
			 color: #2196f3;
		}
		.item{
			display: flex;
			 justify-content: space-between;
			 padding:24rpx;
			 font-size: 32rpx;
			 border-bottom:  1px solid #f2f2f2;
			 .item-title{
				 width: 240rpx;
				 min-width: 240rpx;
			 }
			 .item-value{
				 .item-value-btn1{
					 margin:  0 20px;
					     color: #4586f7;
				 }
				 .item-value-btn2{
					     color: #4586f7;
				 }
			 }
		}
	}
	.details-list{
		
		.item-list,.item-remark{
			display: flex;
			    align-items: center;
			 justify-content: space-between;
			 padding:24rpx;
			 font-size: 36rpx;
			 border-bottom:  1px solid #f2f2f2;
			 // .item-title{
				//  width: 400rpx;
			 // }
		}
		.item-title{
			 font-size: 36rpx;
			 .item-title-name{
				 color: #31b3ff;
			 }
			 .item-title-remark{
				 color: #303133;
				 margin-left: 8px;
			 }
		}
		
		.item-remark,.item-title-span{
			 font-size: 28rpx;
			 color: #8b898c;
		}
		
	}
 
 
 

 
 	.main {
 		margin: 24rpx 0;
		padding: 24rpx;
 		overflow: hidden;
		background: white;
 
 			// 缴费金额
 			.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;
 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>