wit-uniapp/pages/index/BillPending/BillPending.vue

<template>
	<view class="page">
		<u-tabs :list="tabs" @click="sectionChange" style="background-color: #fff;" :current=current
			:itemStyle="{'width':'375rpx','padding':'24rpx'}" lineHeight="2px" lineWidth="30px"></u-tabs>
		<!-- <view class="subsection">
			<u-subsection :list="list" fontSize="30rpx" :current="current" @change="sectionChange"></u-subsection>
		</view> -->
		<!-- 账单明细 -->
		<view class="contain" v-show="cdshow==0">
			<view class="topbilledit">
				<view class="changetime1">
					<picker mode="date" :value="myday" fields="month" @change="dateChange">
						<view class="selestDate">{{myday}}</view>
					</picker>
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
				</view>
			</view>
			<view style="padding:16rpx 0 16rpx 32rpx">
				共有 <span style="color: red">{{totalnumber}}</span>条记录
			</view>
			<view class="u-listdata">
				<u-list @scrolltolower="scrolltolower" :pagingEnabled='true'
					style="height:400px;flex:1;padding-bottom: 49px;">
					<u-list-item v-for="(item, index) in indexList1" :key="index">
						<view class="paisong">
							<u-icon name="arrow-up" @click="item.showMore=false" class="iconBtn" size="20px"
								v-if="item.showMore" color="#999"></u-icon>
							<u-icon name="arrow-down" @click="item.showMore=true" class="iconBtn" size="22px"
								color="#999" v-else></u-icon>
							<checkbox :checked="item.check" class="check" />
							<view class="title" @click="paybills(item)">
								物业费: <span>￥{{item.amount}}</span>
								<view class="status" v-if='item.status==1'>
									已支付
								</view>
								<view class="status" v-if='item.status==2'>
									待支付
								</view>
								<view class="status" v-if='item.status==3'>
									支付失败
								</view>
							</view>
							<template v-if="item.showMore">
								<view class="subtit" style="margin-top: 16rpx;">
									管理费:{{item.billLists[0].amount}}
								</view>
								<view class="subtit">
									中央空调使用费:{{item.billLists[1].amount}}
								</view>
								<view class="subtit">
									电梯费:{{item.billLists[2].amount}}
								</view>
							</template>
						</view>
					</u-list-item>
				</u-list>
			</view>
			<view class="zhifu">
				<view class="zhifuright" @click="Immediatepayment">
					<view class="heji">
						合计：<span>￥ {{heji}}</span>
					</view>
					<view class="likezhifu">
						<u-button type="primary" size='mini' shape='circle' text="立即支付"></u-button>
					</view>
				</view>
			</view>
		</view>
		<!--缴费记录 -->
		<view class="contain" v-show="cdshow==1">
			<!-- 	列表 -->
			<view class="u-listdata">
				<view class="topbilledit" @click="typechange">
					<view class="changetime1">
						{{mytype}}
					</view>
					<view class="changetime2">
						<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
					</view>
				</view>
				<view style="padding:20rpx 0 0 30rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>
				<u-list @scrolltolower="scrolltolower2" :pagingEnabled='true'
					style="height:400px;flex:1;padding-bottom: 49px;">
					<u-list-item v-for="(item, index) in indexList2" :key="index">
						<view class="paisong2">
							<view class="status" v-if="item.type=='Subsidy'">
								补助
							</view>
							<view class="status s2" v-if="item.type=='PreStorage'">
								预存
							</view>
							<div class="title">{{item.tenantInfo.name}}</div>
							<view class="subtit">
								扣缴金额:{{item.amount}}
							</view>
							<view class="subtit">
								账户金额:{{item.surplus}}
							</view>
							<view class="subtit">
								租户电话:{{item.tenantInfo.tel}}
							</view>
							<view class="subtit">
								操作人:{{item.createName}}
							</view>
							<view class="subtit">
								扣缴时间:{{item.createDate}}
							</view>
						</view>

					</u-list-item>
				</u-list>
				<view class="Predeposit" v-show="Predepositshow">
					<span @click="Predeposit">预存</span>
				</view>
			</view>
		</view>
		<u-picker :show="showtype" itemHeight="76" :columns="columnstype" keyName="dictLabel" @confirm="confirmtype"
			@cancel='canceltype'></u-picker>
		<u-popup :show="showpay" @close="closepay" @open="openpay" mode="bottom" :round="10" :closeable=true
			:closeOnClickOverlay=true>
			<view class="paytall">
				<!-- <text>请选择支付方式</text> -->
				<view class="hejitop">
					￥ {{heji}}
				</view>
				<view class="zhifufs">
					<u-radio-group @change="groupChange" v-model="radiovalue1" placement="column" iconPlacement="right">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.id">
						</u-radio>
					</u-radio-group>
				</view>
				<view style="margin: 0 30rpx;">
					<u-button type="primary" text="确认支付" @click="Confirmationpayment"></u-button>
				</view>
			</view>
		</u-popup>
		<u-modal :show="showjiaofei" title="提示" content='当前账户余额不足,请问是否充值？' @confirm="jiaofeiconfirm"
			@cancel='jiaofeicancel' :showCancelButton=true></u-modal>
		<view class="canys" v-if="zhifucanvas">
			<h4>请用微信扫码二维码</h4>
			<canvas class="zhifucanvas" canvas-id='canvas'></canvas>
			<view class="guanbi">
				<u-button type="primary" :plain="true" text="关闭" style="border:none" @click="guanbi"></u-button>
			</view>
		</view>
		<u-popup :show="showpayjine" @close="closepay1" @open="openpay1" mode="bottom" :round="10" :closeable=true
			:closeOnClickOverlay=true>
			<view class="paytall1">
				<view class="hejitop">
					预存
				</view>
				<view class="zhifufs">
					<u--form labelWidth="30" labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item label="¥" prop="userInfo.amount" ref="item1">
							<u--input v-model="model1.userInfo.amount" border="none" placeholder="点击输入金额"></u--input>
						</u-form-item>

					</u--form>
				</view>
				<view style="margin:0 32rpx">
					<u-button type="primary" text="确认支付" @click="Confirmationpaymentjine"></u-button>
				</view>
			</view>
		</u-popup>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
	var QRCode = require('@/utils/qrcode.js');
	const BaseApi = require("@/http/baseApi.js");
	//	import {isEmpty,getDictDataList} from "@/utils/index";
	export default {
		name: 'Workordertodone',
		data() {
			const currentDate = this.getDate({
				format: 'yyyy-mm'
			})
			return {
				tabs: [{
					name: '账单明细',
				}, {
					name: '扣缴记录'
				}],
				model1: {
					userInfo: {
						amount: '',
					},
				},
				rules: {
					'userInfo.amount': {
						type: 'string',
						required: true,
						message: '请填写预存金额',
						trigger: ['blur', 'change']
					},
				},
				showMore: false,
				Predepositshow: true,
				showpayjine: false,
				showcw: false,
				zhifucanvas: false,
				radiolist1: [],
				radiovalue1: '微信',
				showjiaofei: false,
				showpay: false,
				quanxuan: true,
				zhifumk: false,
				mytype: '扣缴类型',
				myday: currentDate,
				totalnumber: 0,
				jfnodata: false,
				showtype: false,
				cdshow: 0,
				fatherparameter: {},
				expensedata: '全部',
				list: ['账单明细', '缴费记录', ],
				current: 0,
				dataForm: {
					tenantId: '',
					costCycle: currentDate,
					type: '',
					page: 1,
					limit: 10,
				},
				zhanghuyue: 0,
				heji: 0,
				indexList1: [],
				indexList11: [],
				indexList2: [],
				payStatusList: [],
				nodata: true,
				pd: true,
				zhifufangshi: '',
				columnstype: [],
				repairTypeList: [],
				UrgencyTypelist: [],
				PayStatus: [],
				PropertyType: [],
				userInfotenantName: '',
			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad: function(options) { //option为object类型，会序列化上个页面传递的参数
			let userInfo = JSON.parse(decodeURIComponent(options.info));
			// console.log('userInfo', userInfo);
			this.userInfotenantName = userInfo.tenantName;
			this.dataForm.tenantId = userInfo.tenantId;

			let getDictDataList = uni.getStorageSync('getDictDataList');
			//  console.log('111111111111111111', userInfo)
			for (let i = 0; i < getDictDataList.length; i++) {
				if (getDictDataList[i].dictType == 'PayType') {
					this.columnstype = [getDictDataList[i].dataList]
				}
				if (getDictDataList[i].dictType == 'PayStatus') {
					this.PayStatus = [getDictDataList[i].dataList]
				}
				if (getDictDataList[i].dictType == 'PropertyType') {
					this.PropertyType = [getDictDataList[i].dataList]
				}
			}
			this.indexList11 = [{
				showMore: false,
				status: 2,
				amount: 300,
				billLists: [{
					amount: 100,

				}, {
					amount: 200,

				}, {
					amount: 130,

				}]
			}]

			//  console.log('111111111111111111', this.PayStatus)

			this.getpaisongdata();

		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},


		methods: {
			guanbi() {
				this.zhifucanvas = false;
				this.Predepositshow = true;
				this.queryOrder1();
				this.queryOrder2();
			},
			Confirmationpaymentjine() {
				this.zhifucanvas = true;
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					// console.log('111111111111111111', this.model1.userInfo.amount)
					this.showpayjine = false;
					this.Predepositshow = false;
					//  this.Immediatepayment();

					let postdata = {
						totalFee: this.model1.userInfo.amount,
						tenantId: this.dataForm.tenantId,
						tradeType: 'NATIVE',
						billIds: ''
					}
					uni.request({
						url: BaseApi.BaseApi + '/pay/createOrder',
						method: "POST",
						data: postdata,
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							"token": uni.getStorageSync('tokendata'),
						},
						success: (res) => {
							//	window.open(res.codeUrl, '_blank);
							let qrcode = new QRCode('canvas', {
								text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
								width: 213,
								height: 213,
								colorDark: "black",
								colorLight: "white",
								correctLevel: QRCode.CorrectLevel.H,
							});
							//   10秒之后调取查询订单
							// let that = this;
							// setTimeout(function () {
							//     that.queryOrder2();
							// }, 15000);

						}
					});


				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			groupChange(n) {
				console.log('groupChange', n);
				this.zhifufangshi = n;
			},
			Predeposit() {
				this.showpayjine = true;
			},
			queryOrder1() {
				this.Predepositshow = true;
				this.zhifucanvas = false;
				this.indexList1 = [];
				this.dataForm.page = 1;
				this.getpaisongdata();

			},

			queryOrder2() {
				this.Predepositshow = true;
				this.zhifucanvas = false;
				this.indexList2 = [];
				this.dataForm.page = 1;
				this.getpayrecord();
			},
			Confirmationpayment() {
				if (this.zhifufangshi == 'zhanghu') {
					if (this.zhanghuyue >= this.heji) {
						console.log('账户余额支付', )
						let billIdslist = [this.indexList1[0].billLists[0].id, this.indexList1[0].billLists[1].id,
							this.indexList1[0].billLists[2].id
						];
						let postdata = {
							amount: String(this.zhanghuyue - this.heji),
							tenantId: this.dataForm.tenantId,
							payType: 'Account',
							billIds: billIdslist
						}

						this.$api.post('/billinfo/billPay', postdata)
							.then(res => {
								//   console.log('111111111111111111', res)
								if (res.data.code == 0) {
									this.zhifucanvas = true;
									this.$refs.uNotify.success(res.data.msg)
									this.showpay = false;
									this.indexList1 = [];
									this.dataForm.page = 1;
									this.getpaisongdata();
								} else {
									this.$refs.uNotify.error(res.data.msg)
									this.showpay = false;
									this.indexList1 = [];
									this.dataForm.page = 1;
									this.getpaisongdata();
								}
							})

					} else if (this.zhanghuyue < this.heji) {
						this.showjiaofei = true;

					}

				} else if (this.zhifufangshi == 'weixin') {
					this.zhifucanvas = true;
					this.showpay = false;
					let billIdslist = this.indexList1[0].billLists[0].id + ',' +
						this.indexList1[0].billLists[1].id + ',' + this.indexList1[0].billLists[2].id;
					// let postdata = {
					// 	totalFee: String(this.heji),
					// 	tenantId:Math.floor(this.dataForm.tenantId),
					// 	tradeType: 'NATIVE',
					// 	billIds: billIdslist
					// }

					let postdata = {
						totalFee: '0.01',
						tenantId: this.dataForm.tenantId,
						tradeType: 'NATIVE',
						billIds: billIdslist
					}
					uni.request({
						url: BaseApi.BaseApi + '/pay/createOrder',
						method: "POST",
						data: postdata,
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							"token": uni.getStorageSync('tokendata'),
						},
						success: (res) => {
							//	window.open(res.codeUrl, '_blank);
							let qrcode = new QRCode('canvas', {
								text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
								width: 213,
								height: 213,
								colorDark: "black",
								colorLight: "white",
								correctLevel: QRCode.CorrectLevel.H,
							});
							//10秒之后调取查询订单
							// let that = this;
							// setTimeout(function () {
							//     that.queryOrder1();
							// }, 15000);

						}
					});


				}
			},
			jiaofeiconfirm() {
				this.showpay = false;
				let billIdslist = this.indexList1[0].billLists[0].id + ',' +
					this.indexList1[0].billLists[1].id + ',' + this.indexList1[0].billLists[2].id;
				let postdata = {
					totalFee: String(this.heji - this.zhanghuyue),
					tenantId: this.dataForm.tenantId,
					tradeType: 'NATIVE',
					billIds: billIdslist
				}
				uni.request({
					url: BaseApi.BaseApi + '/pay/createOrder',
					method: "POST",
					data: postdata,
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						"token": uni.getStorageSync('tokendata'),
					},
					success: (res) => {
						//	window.open(res.codeUrl, '_blank);
						let qrcode = new QRCode('canvas', {
							text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
							width: 213,
							height: 213,
							colorDark: "black",
							colorLight: "white",
							correctLevel: QRCode.CorrectLevel.H,
						});
						//10秒之后调取查询订单
						// let that = this;
						// setTimeout(function () {
						//     that.queryOrder1();
						// }, 15000);

					}
				});
			},
			jiaofeicancel() {
				this.showjiaofei = false;
			},

			Immediatepayment() {

				this.$api.get('/accountinfo/detail/' + this.dataForm.tenantId, {})
					.then(res => {
						this.zhanghuyue = res.data.data.amount;
						this.showpay = true;
						this.radiolist1 = [{
								name: '微信',
								disabled: false,
								id: 'weixin',
							},
							{
								name: '账户余额' + '(可用￥' + this.zhanghuyue + ')',
								disabled: false,
								id: 'zhanghu'
							},
						]
					})
			},
			openpay() {
				console.log('open');
			},
			closepay() {
				this.showpay = false
				// console.log('close');
			},
			openpay1() {
				console.log('open');
			},
			closepay1() {
				this.showpayjine = false
				// console.log('close');
			},

			paybills(e) {
				e.check = !e.check;
				if (e.check) {
					this.zhifumk = e.check
				} else {
					console.log('222222', e.check)
					this.zhifumk = e.check
				}
			},
			dateChange(e) {
				this.myday = e.target.value;
				this.dataForm.costCycle = e.target.value;
				this.dataForm.page = 1;
				this.indexList1 = [];
				this.getpaisongdata();
			},


			sectionChange(val) {
				this.current = val.index;
				if (val.index == 0) {
					this.cdshow = 0;
					this.indexList1 = [];
					this.dataForm.page = 1;
					this.getpaisongdata();
				} else if (val.index == 1) {
					this.cdshow = 1;
					this.indexList2 = [];
					this.dataForm.page = 1;
					this.getpayrecord();
				}

			},
			scrolltolower() {
				if (this.pd) {
					this.getpaisongdata();
				} else {
					return
				}
			},
			scrolltolower2() {
				if (this.pd) {
					this.getpayrecord();
				} else {
					return
				}
			},
			getpayrecord() {
				this.$api.get('/payrecord/page', this.dataForm)
					.then(res => {
						this.totalnumber = res.data.data.total;
						if (res.data.data.list.length != 0) {

							this.indexList2.push(...res.data.data.list);
							this.dataForm.page = this.dataForm.page + 1;
							this.pd = true;
							this.jfnodata = false;
						} else {
							uni.showToast({
								title: '暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd = false;
						}

					})
			},
			getpaisongdata() {
				this.$api.post('/billinfo/billDetail', this.dataForm)
					.then(res => {
						this.totalnumber = res.data.data.length;
						if (res.data.data.length != 0) {
							//check
							for (let i = 0; i < res.data.data.length; i++) {
								res.data.data[i].check = false;
							}
							this.heji = res.data.data[0].amount;
							this.indexList1.push(...res.data.data);

							this.dataForm.page = this.dataForm.page + 1;
							this.pd = true;
							this.jfnodata = false;
						} else {
							uni.showToast({
								title: '暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd = false;
							//this.jfnodata=true
						}

					})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				// day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			typechange() {
				this.showtype = true;
			},
			confirmtype(e) {
				this.indexList2 = [];
				//console.log('111111111111111111', e.value[0])
				this.showtype = false;
				if (e.value[0].dictValue == 'all') {
					this.mytype = e.value[0].dictLabel;
					this.dataForm.type = '';
					this.dataForm.page = 1;
					this.getpayrecord();
				} else {
					this.mytype = e.value[0].dictLabel;
					this.dataForm.type = e.value[0].dictValue;
					this.dataForm.page = 1;
					this.getpayrecord();
				}

			},
			canceltype() {
				this.showtype = false;
			},


		}
	}
</script>

<style lang="scss">
	.Predeposit {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 98rpx;
		line-height: 98rpx;
		width: 750rpx;
		background-color: #fff;
		text-align: center;
		color: #2E69EB;
		box-shadow: 0 -6px 12px 0 rgba(153, 153, 153, 0.10);
	}

	.nodata {
		text-align: center;
		padding-top: 400rpx;
	}

	.zhifucanvas {
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
	}

	.canys {
		width: 500rpx;
		height: 600rpx;
		position: fixed;
		top: 30%;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #e6e6e6;

		h4 {
			width: 500rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.guanbi {
		margin-top: 50rpx;
	}

	.zhifufs {
		padding: 10rpx 60rpx 30px;

		::v-deep .u-radio-label--right {
			margin-top: 30rpx;
		}

		::v-deep .uni-input-placeholder {
			text-align: left
		}

		::v-deep .u-radio__icon-wrap {
			width: 40rpx !important;
			height: 40rpx !important;
		}

		::v-deep .u-radio__text {
			font-size: 32rpx !important;
		}
	}

	.hejitop {
		text-align: center;
		border-bottom: 1px solid #eee;
		padding: 48rpx 0 24rpx;
		font-size: 32rpx;
	}

	.paytall {
		padding: 12px 0;
	}
	.heji span {
		color: #ED3A25;
	}
	.likezhifu {
		margin-left: 20rpx;
		margin-right: 30rpx;
	}
	.zhifu {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		height: 98rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.zhifuright {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
	.page {
		height: 100%;
		overflow: hidden;

		.contain {
			height: calc(100% - 44px);
			padding: 0;
			display: flex;
			flex-direction: column;

			.u-listdata {
				height: 400px;
				flex: 1;
				display: flex;
				flex-direction: column;

			}
		}
	}

	.paisong,
	.paisong2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		margin: 0 16px 24rpx;
		padding: 12px 16px 12px 34px;
		border-radius: 4px;
		position: relative;

		.iconBtn {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
			z-index: 1;
		}

		.title {
			font-size: 32rpx;
			color: #0C1935;
			margin-bottom: 16rpx;

			span {
				color: #FA5555;
				font-weight: 600;
			}

			.status {
				width: 100rpx;
				padding: 6rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				background-color: #09C700;
				border-radius: 22rpx;
				position: absolute;
				left: 40%;
				top: 20rpx;
				transform: scale(.85);
			}
		}

		.subtit {
			color: #9DA0AC;
			margin-bottom: 6rpx;
		}

		.check {
			position: absolute;
			left: 20rpx;
			top: 32rpx;
			z-index: 1;
			font-size: 0;
			transform: scale(.7)
		}
	}

	.paisong2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		margin: 0 16px 24rpx;
		padding: 12px 16px;
		border-radius: 4px;
		position: relative;

		.status {
			position: absolute;
			width: 96rpx;
			height: 48rpx;
			border-radius: 0 8rpx 0 20rpx;
			right: 0;
			line-height: 48rpx;
			text-align: center;
			top: 0;
			z-index: 1;
			font-size: 22rpx;
			background-color: #30D3A2;
			color: #fff;

			&.s2 {
				background-color: #09C700;
			}
		}
	}
	.topbilledit {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		height: 88rpx;
	}

	.changetime2 {
		padding-left: 10rpx;
	}
</style>