wit-uniapp/pages/Workorder/Tenantbill/companybill/companybill.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="contain" v-show="cdshow==true">
			<!-- 日期选择器 -->
			<!-- 	<view class="topbilledit">
				<view class="changetime1">
					<picker mode="date" :value="dataForm.costCycle" fields="month" @change="dateChange">
						<view class="selestDate">{{dataForm.costCycle}}</view>
					</picker>
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
				</view>
			</view> -->
			<view class="nodata" v-if="nodata==true">
				暂无数据
			</view>
			<template v-if="nodata==false">
				<!-- <view style="padding:16rpx 0 16rpx 32rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view> -->
				<view class="paisong2" style="margin-top: 16rpx;">
					<view class="status s2">
						待支付
					</view>
					<view class="subtit">
						物业费: <span>￥{{zddata.amount}}</span>
					</view>
					<view class="subtit">
						管理费:￥ {{zddata.glf}}
					</view>
					<view class="subtit">
						中央空调使用费:￥ {{zddata.ktf}}
					</view>
					<view class="subtit">
						电梯费:￥ {{zddata.dtf}}
					</view>
				</view>
			</template>
		</view>
		<!-- 缴费记录 -->
		<view class="contain" v-show="cdshow==false">
			<view class="topbilledit" @click="typechange">
				<view class="changetime1">
					{{expensedata}}
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
				</view>
			</view>
			<!-- 	列表 -->
			<view class="nodata" v-if="jfnodata==true">
				暂无数据
			</view>
			<view class="u-listdata" v-if="jfnodata==false">
				<view style="padding:16rpx 0 16rpx 32rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>
				<u-list @scrolltolower="scrolltolower" :pagingEnabled='true' 
				style="height:400px;flex:1;padding-bottom: 49px;">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="paisong2">
							<view class="status" v-if="item.status==1">
								预存
							</view>
							<view class="title">{{item.tenantInfo.name}}</view>
							<view class="subtit">
								扣缴金额: <span>￥{{item.amount}}</span>
							</view>
							<view class="subtit">
								账户余额: {{item.surplus}}
							</view>
							<view class="subtit">
								租户电话:￥{{item.tenantInfo.tel}}
							</view>
							<view class="subtit">
								操作人: {{item.creator}}
							</view>
							<view class="subtit">
								扣缴时间: {{item.createDate}}
							</view>
						</view>
					</u-list-item>
				</u-list>
				<view class="Predeposit" v-show="dibucaidan">
					<span @click="prestore('预存')">预存</span>
					<span @click="prestore('补助')">补助</span>
				</view>
			</view>
		</view>
		<u-picker :show="showtype" :itemHeight="80" :columns="columnstype" keyName="dictLabel" @confirm="confirmtype"
			@cancel='canceltype'> </u-picker>
		<u-popup :show="showpayjine" @close="closepay1" @open="openpay1" mode="bottom" :round="10" :closeable=true
			:closeOnClickOverlay=true>
			<view class="paytall1" style="padding-bottom: 20rpx;">
				<view class="hejitop">
					{{prestorename}}
				</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>
			<!-- <view class="paytall">
				<view class="hejitop">
					{{prestorename}}
				</view>
				<view class="zhifufs">
					<u--form labelWidth="30" labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item label="¥" prop="userInfo.amount" borderBottom 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>

		<view class="canys" v-if="zhifucanvas">
			<h4>请用微信扫码二维码</h4>
			<canvas class="zhifucanvas" canvas-id='canvas'></canvas>
			<view class="guanbi">
				<u-button type="primary" :plain="true" style="border:none" text="关闭" @click="guanbi"></u-button>
			</view>
		</view>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
	import qs from 'qs'
	var QRCode = require('@/utils/qrcode.js');
	const BaseApi = require("@/http/baseApi.js");

	export default {
		data() {
			return {
				tabs: [{
					name: '账单明细',
				}, {
					name: '扣缴记录'
				}],
				zhifucanvas: false,
				dibucaidan: true,
				prestorename: '',
				model1: {
					userInfo: {
						amount: '',
					},
				},
				rules: {
					'userInfo.amount': {
						type: 'string',
						required: true,
						message: '请填写预存金额',
						trigger: ['blur', 'change']
					},
				},
				showpayjine: false,
				totalnumber: 0,
				jfnodata: false,
				showtype: false,
				cdshow: true,
				fatherparameter: {},
				expensedata: '全部',
				list: ['账单明细', '缴费记录', ],
				current: 0,
				dataForm: {
					tenantId: "",
					costCycle: "",
					type: "",
					page: 1,
					limit: 10,
				},
				indexList: [],
				payStatusList: [],
				zddata: {
					amount: '',
					dtf: '',
					ktf: '',
					glf: '',
				},
				nodata: true,
				pd: true,
				columnstype: [],
				jfpost: {
					tenantId: "",
					costCycle: "",
					type: "",
					page: 1,
					limit: 10,
				},

			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad: function(options) {

			//option为object类型，会序列化上个页面传递的参数
			this.fatherparameter = JSON.parse(decodeURIComponent(options.para));

			let getDictDataList = uni.getStorageSync('getDictDataList');
			for (let i = 0; i < getDictDataList.length; i++) {
				if (getDictDataList[i].dictType == 'PayType') {
					this.columnstype = [getDictDataList[i].dataList]
				}


				if (getDictDataList[i].dictType == 'PayStatus') {
					this.payStatusList = [getDictDataList[i].dataList]
				}
			}


			this.dataForm.tenantId = this.fatherparameter.id;
			this.dataForm.costCycle = this.fatherparameter.cycle;
			this.dataForm.page = 1;


			this.jfpost.tenantId = this.fatherparameter.id;
			this.jfpost.costCycle = this.fatherparameter.cycle;
			this.jfpost.page = 1;

			this.getalldata();
			//	this.getPayStatusList();
			//this.getPayTypeList();
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},

		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},


		methods: {
			prestore(e) {
				this.showpayjine = true;
				this.dibucaidan = false;
				this.prestorename = e;
			},
			Confirmationpaymentjine() {
				this.$refs.uForm.validate().then(res => {
					this.showpayjine = false;
					this.Predepositshow = false;
					this.dibucaidan = true;
					if (this.prestorename == '预存') {
						this.prestoredata(this.model1.userInfo.amount)
					} else if (this.prestorename == '补助') {
						this.subsidydata(this.model1.userInfo.amount)
					} else if (this.prestorename == '退费') {
						//  this.refunddata(this.model1.userInfo.amount)
					}
							  
				}).catch(errors => {
					uni.$u.toast('校验失败');
					
				})
			},
			//预存
			prestoredata(e) {
				this.zhifucanvas = true;
				let postdata = {
					totalFee: e,
					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) => {
						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.zhifucanvas = false;
							that.zddata = {};
							that.dataForm.page = 1;
							that.getalldata();
							this.jfpost.page = 1;
							this.indexList = [];
							this.getjfdata();
						}, 15000);

					}
				});

			},
			//补助
			subsidydata(e) {
				let postdata = {
					totalFee: e,
					tenantId: this.fatherparameter.id,
					tradeType: 'NATIVE',
					billIds: ''
				}
				this.$api.postJson('/pay/createOrder', postdata)
					.then(res => {
						this.$refs.uNotify.success('补助成功')
					})
			},
			closepay1() {
				this.showpayjine = false
				this.dibucaidan = true;
			},
			openpay1() {
				console.log('open');
			},
			guanbi() {
				this.zhifucanvas = false;
				this.Predepositshow = true;
				this.getalldata();
				this.getjfdata();
			},
			canceltype() {
				this.showtype = false;
			},
			confirmtype(e) {
				this.showtype = false;
				this.expensedata = e.value[0].dictLabel;
				if (e.value[0].dictLabel == '全部') {
					this.jfpost.type = '';
				} else {
					this.jfpost.type = e.value[0].dictValue;
				}
				this.indexList = [];
				this.jfpost.page = 1;
				this.getjfdata();
			},
			typechange() {
				this.showtype = true;
			},
			sectionChange(val) {
				this.current = val.index;
				console.log(val.index)
				if (val.index == 0) {
					this.cdshow = true;
				} else if (val.index == 1) {
					this.cdshow = false;
					this.indexList = [];
					this.jfpost.page = 1;
					this.getjfdata();
				}

			},
			scrolltolower() {
				if (this.pd) {
					this.getjfdata();
				} else {
					return
				}
			},
			getjfdata() {
				this.$api.get('/payrecord/page', this.jfpost)
					.then(res => {
						this.totalnumber = res.data.data.total;
						//  console.log('111111111111111111',res.data.data.list)
						if (res.data.data.list.length != 0) {
							this.indexList.push(...res.data.data.list);
							this.jfpost.page = this.jfpost.page + 1;
							this.pd = true;
							this.jfnodata = false;
						} else {
							uni.showToast({
								title: '暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd = false;
						}

					})
			},
			dateChange(e) {
				this.myday = e.target.value;
				this.dataForm.costCycle = e.target.value;
				this.jfpost.costCycle = e.target.value;

				this.zddata = {};
				this.dataForm.page = 1;
				this.getalldata();
			},
			getalldata() {
				this.$api.post('/billinfo/billDetail', this.dataForm)
					.then(res => {
						this.totalnumber = res.data.data.total;
						this.zddata = {};
						if (res.data.data.length == 0) {
							this.nodata = true;
						} else {
							this.nodata = false;
							this.zddata.amount = res.data.data[0].amount;
							this.zddata.glf = res.data.data[0].billLists[0].amount;
							this.zddata.ktf = res.data.data[0].billLists[1].amount;
							this.zddata.dtf = res.data.data[0].billLists[2].amount;

						}
					})
			},

		}
	}
</script>

<style lang="scss">
	.Predeposit {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 98rpx;
		z-index: 2;
		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);
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.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: #FA5555;
			}
		}
	}

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

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