jp-housekeep-manage/pages/withdrawal/info.vue

<template>
	<view>
		<u-navbar title="提现申请" v-if="step!=2" title-color="#101010"></u-navbar>
		<u-navbar title="提现申请" v-else :custom-back="step0Fn" title-color="#101010"></u-navbar>
		<u-tabs :list="list" v-if="step!=2" class="jputabs" style="border-bottom: 1px solid #E5E7EA;" :is-scroll="false"
			:current="current" @change="change"></u-tabs>
		<view class="step step0" v-show="step==0">

			<view class="withdraw">
				<view class="withdraw-head ">
					<view class="bclass">申请方</view>
					<view class="spanclass" >{{info.application.sharingCompanyName}}</view>
				</view>
				<view class="withdraw-head border-n">
					<view class="bclass">申请园区
					</view>
					<view class="spanclass" >{{info.application.ownerCompanyName}}</view>
				</view>
				<view class="withdraw-head ">
					<view class="bclass">提现状态</view>
					<view class="spanclass"  :class="' statusN status'+info.application.status">
						{{info.application.statusText}}</view>
				</view>
				<view class="withdraw-head border-n">
					<view class="bclass">提现月份
					</view>
					<view class="spanclass" >{{info.application.applicationMonth}}</view>
				</view>
				<view class="withdraw-head ">
					<view class="bclass">抄表开始日期
					</view>
					<view class="spanclass" >{{info.application.startTime}}</view>
				</view>
				<view class="withdraw-head ">
					<view class="bclass">抄表截止日期

					</view>
					<view class="spanclass" >{{info.application.endTime}}</view>
				</view>
			</view>


			<view class="withdraw">
				<view class="withdraw-head ">

					<view class="bclass">本期代收费金额<br/>
					<b style="font-size: 24rpx;">（房租、物业、保洁）</b>
					</view>
					<view class="spanclass" >{{info.application.proxyFee}}元</view>
					
				</view>

				<view class="withdraw-head border-n">
					<view class="bclass">本期水电金额

					</view>
					<view class="spanclass" >{{info.application.electricityWaterFee}}元</view>
				</view>
				<view class="withdraw-head border-n">
					<view class="bclass">本期节能金额

					</view>
					<view class="spanclass" >{{info.application.energySavingFee}}元</view>
				</view>
				<view class="withdraw-head border-n">
					<view class="bclass">总金额

					</view>
					<view class="spanclass" >{{info.application.totalAmount}}元</view>
				</view>
				<view class="withdraw-head ">
					<view class="bclass">平台手续费率

					</view>
					<view class="spanclass" >{{info.application. transactionRatio*100}}%</view>
				</view>
				<view class="withdraw-head ">
					<view class="bclass">平台手续费


					</view>
					<view class="spanclass" >{{info.application. transactionFee}}元</view>
				</view>
				<view class="withdraw-head ">
					<view class="bclass">平台代收费分润比率


					</view>
					<view class="spanclass" >{{info.application. proxyFeeSharingRatio * 100}}%</view>
				</view>
				<view class="withdraw-head ">
					<view class="bclass">平台水电分润比率


					</view>
					<view class="spanclass" >{{info.application.electricityWaterFeeSharingRatio * 100}}%
					</view>
				</view>
				<view class="withdraw-head ">
					<view class="bclass">节能分润比率


					</view>
					<view class="spanclass" >{{info.application.energySavingFeeSharingRatio* 100}}%
					</view>
				</view>
			</view>


			<view class="withdraw">
				<view class="withdraw-head ">
					<view class="bclass">代收费分润金额 </view>
					<view class="spanclass" >{{info.application.proxyFeeSharingAmount}}元</view>
				</view>
				<view class="withdraw-head border-n">
					<view class="bclass">水电分润金额 </view>
					<view class="spanclass" >{{info.application. electricityWaterFeeSharingAmount}}元
					</view>
				</view>
				<view class="withdraw-head border-n">
					<view class="bclass">节能分润金额 </view>
					<view class="spanclass" >{{info.application.energySavingFeeSharingAmount}}元</view>
				</view>
				<view class="withdraw-head border-n">
					<view class="bclass">总分润金额 </view>
					<view class="spanclass" >{{info.application. platformSharingAmount}}元</view>
				</view>

			</view>

			<view class="withdraw">
				<view class="withdraw-head ">
					<view class="bclass">申请提现金额 </view>
					<view class="spanclass" >{{info.application.withdrawalAmount}}元</view>
				</view>
				<view class="withdraw-head border-n">
					<view class="bclass">大写 </view>
					<view class="spanclass" >{{applicationAmountDX()}}元</view>
				</view>

			</view>

			<view class="withdraw">
				<view class="withdraw-head withdraw-head2 ">
					<b class="asterisk"><text>*</text>收款户名
				</b>
				<u-input class="textarea" type="textarea" v-model="data.accountName" placeholder="请填写收款户名" height="96"
					cursor-spacing="8" />

			</view>
			<view class=" withdraw-head withdraw-head2 ">
				<view class="asterisk"><text>*</text>收款银行
			</view>
			<u-input class="textarea" type="textarea" v-model="data.bankName" placeholder="请填写收款银行全称" height="96"
				cursor-spacing="8" />

		</view>
		<view class="withdraw-head withdraw-head2 border-n">
			<view class="asterisk"><text>*</text>收款账号
		</view>
		<u-input class="textarea" v-model="data.accountNo" type="textarea" placeholder="提现人收款账号" height="96"
			cursor-spacing="8" />

	</view>

	</view>
	<view class="applyBtn" v-if="info.application.status==0">
		<u-button class="save" type="primary" @click="submit0()">申请提现</u-button>
	</view>
	</view>
	<view class="step step1" v-show="step==1">

		<scroll-view :scroll-x="true" :scroll-y="true" style="width: 750rpx;">
			<view class="applyBtn">
				<u-button class="save" type="success" @click="down()">下载对账单</u-button>
			</view>
			<table class="border-table " style="width: 1800px;" id="my-table-id">
				<tr>
					<td colspan=""></td>
					<td colspan="12">e家能源月度账单明细表</td>
				</tr>
				<tr>
					<td colspan=""></td>
					<td colspan="3">园区：{{info.parkName}}</td>
					<td colspan="9">抄表时间：{{info.startTime}}至{{info.endTime}}</td>
				</tr>
				<tr>
					<td width="50px">序号</td>
					<td width="250px">单位名称</td>
					<td width="220px">本期代收费金额<br />
						（房租、物业、保洁）</td>
						
						
					<td width="150px">本期使用电量（度）</td>
					<td width="150px">分摊线损（度）</td>
					<td width="150px">分摊公摊（度）</td>
					<td width="150px">电单价/度</td>	
					<td width="150px">电费</td>
						
					<td width="150px">水单价/吨</td>	
					<td width="150px">本期使用水量（吨）</td>
					<!-- <td width="150px">电单价/度</td> -->
					<td width="150px">水费</td>
				<!-- 	<td width="150px">分摊线损（度）</td>
					<td width="150px">分摊公摊（度）</td> -->
					<td width="150px">节能收益</td>
					<td width="150px">总收入</td>

				</tr>
				<tr v-for="(item,i) in info.monthList" :key="i">
					<td>{{item.index}}</td>
					<td>{{item.name}}</td>
					<td>{{item.proxyFee?item.proxyFee:'/'}}</td>
					
					<td>{{item.electricityConsumption?item.electricityConsumption:'/'}}</td>
					<td>{{item.lineLoss?item.lineLoss:'/'}}</td>
					<td>{{item.shareElectricityConsumption?item.shareElectricityConsumption:'/'}}</td>
					<td>{{item.electricityPrice?item.electricityPrice:'/'}}</td>
					<td>{{item.electricityFee?item.electricityFee:'/'}}</td>
					
					
					<td>{{item.waterPrice?item.waterPrice:'/'}}</td>
					<td>{{item.waterConsumption?item.waterConsumption:'/'}}</td>
					<td>{{item.waterFee?item.waterFee:'/'}}</td>
					
					
				
				
					<td>{{item.saveEnergyIncome?item.saveEnergyIncome:'/'}}</td>
					<td>{{item.totalAmount?item.totalAmount:'/'}}</td>

				</tr>
				<tr>
					<td></td>
					<td>合计</td>
					<td>{{sumKey('proxyFee')}}</td>
					
					<td>{{sumKey('electricityConsumption')}}</td>
					<td></td>
					<td></td>
					<td></td>
					<td>{{sumKey('electricityFee')}}</td>
					
					<td></td>
					<td>{{sumKey('waterConsumption')}}</td>
					<td>{{sumKey('waterFee')}}</td>
					
					<td>{{sumKey('saveEnergyIncome')}}</td>
					<td>{{sumKey('totalAmount')}}</td>

				</tr>
			</table>
		</scroll-view>
	</view>
	<view class="step step2" v-show="step==2">
		<view class="sign">

			<p>请在下方空白区域使用正楷字体进行电子签名</p>

			<view class="signature">
				<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
					:openSmooth="openSmooth"></l-signature>
			</view>
			<view class="clean-save">
				<view class="clean" @click="onClick('clear')">
					<img src="@/assets/img/riLine-eraser-line.svg" alt="">
					<view class="">
						清除
					</view>
				</view>
				<view class="save" @click="onClick('save')">
					<img src="@/assets/img/riLine-eraser-line.svg" alt="">
					<view class="">
						保存并提交
					</view>
				</view>

			</view>
			<view v-if="info&&info.application&&info.application.signUrl" style="margin-top: 20px;">使用上一次签字</view>
			<img :src="data.signUrl" v-if="info&&info.application&&info.application.signUrl" style="width: 100%;border: 1px solid;"> 

			<button v-if="info.application.signUrl" class="submit" @click="submit()">提交确认单</button>
		</view>
	</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/withdrawal.js'
	import LSignature from '@/components/l-signature/l-signature.vue'


	//import * as API_Common from '@/apis/common.js'

	// import XLSX from 'xlsx';
	//import * as XLSX from 'xlsx/xlsx.mjs';
	// var XLSX = require("xlsx");


	import {
		DX
	} from '@/apis/utils'
	export default {
		data() {
			return {
				step: 0,
				list: [{
					name: '提现申请单'
				}, {
					name: '收入明细'
				}],
				id: "",
				current: 0,
				info: {
					application: {},
					endTime: "",
					monthList: [],
					parkName: "",
					startTime: ""
				},
				data: {},

				penColor: '',
				penSize: 5,
				openSmooth: true,
				url: '',
				suburl: '',

				nowTime: "",
				serverUrl: "",
				token: "",
			};
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id
				this.getInfo()
			}
		},
		methods: {
			down() {
				uni.showLoading({
					title: "提交中...",
					mask: true,
				})
				this.data.recordId = this.id
				API.exportMonthReport(this.data).then((res) => {
					var url=res.data
					window.location.href = url
				
					uni.hideLoading()
				
					
				
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title: "提示",
						content: error,
						showCancel: false
					})
				})
			},
			submit() {
				if (this.data.signUrl) {
					this.data.status = 0;
					this.submitFrom()
				} else {
					uni.showToast({
						title: "请签字后提交"
					})
				}
			},
			submitFrom() {

				uni.showLoading({
					title: "提交中...",
					mask: true,
				})

				//this.info.status=5;
				//var str=JSON.stringify();
				this.data.recordId = this.id
				API.apply(this.data).then((res) => {

					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('refreshData');

					uni.hideLoading()

					uni.showModal({
						title: '提示',
						content: '提交成功，等待财务审核！',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {

								uni.navigateBack()
							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});

				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title: "提示",
						content: error,
						showCancel: false
					})
				})
			},

			uploadpic() {
				uni.showLoading({
					title: '上传中'
				});
				this.token = this.carhelp.getToken();
				this.serverUrl = process.car.BASE_URL;
				var time = ""; //parseUnixTime(new Date(), '{y}{m}{d}-{h}-{i}');


				uni.request({
					url: this.serverUrl + "/uploadBase64Json",
					method: "POST",
					header: {
						Authorization: this.token
					},
					data: {
						"photoName": "signature" + time + ".png",
						"photoBase64Data": this.url
					},
					success: (res) => {
						uni.hideLoading();

						console.log(res)

						if (res.data.result) {
							uni.showToast({
								title: '签名保存成功!',
								duration: 2000
							});

							//this.info.status=0;
							this.data.signUrl = res.data.data;
							//this.$emit("signsubmit",0,this.suburl)
							this.submitFrom()
						} else {
							uni.showToast({
								title: '签名保存失败!' + JSON.stringify(res),
								duration: 2000
							});
						}
					}
				})
			},
			onClick(type) {
				this.url = ""
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							if (res.isEmpty) {
								this.url = "";
							} else {
								this.url = res.tempFilePath

								console.log(this.url)
								// 生成图片的临时路径
								// app | H5 | 微信小程序 生成的是base64
								this.uploadpic()
								//this.data.signUrl=this.url
								// this.submitFrom()

							}
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			applicationAmountDX() {
				if (this.info.application.withdrawalAmount) {
					var c = DX(this.info.application.withdrawalAmount)
					return c
				} else {
					return ''
				}
			},
			sumKey(key) {
				var num = 0
				this.info.monthList.forEach(item => {
					var n = item[key]
					if (n) {
						num += n
					}

				})
				return num.toFixed(2)
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.recordDetails({
					recordId: this.id
				}).then((res) => {
					uni.hideLoading();
					this.info = res.data
					this.data.accountName = this.info.application.accountName
					this.data.bankName = this.info.application.bankName
					this.data.accountNo = this.info.application.accountNo
					this.data.signUrl = this.info.application.signUrl
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
				this.step = index
			},
			submit0() {
				if (!this.data.accountName) {
					uni.showToast({
						title: "请输入收款户名"
					})
					return
				}
				if (!this.data.bankName) {
					uni.showToast({
						title: "请输入收款银行"
					})
					return
				}
				if (!this.data.accountNo) {
					uni.showToast({
						title: "请输入收款账号"
					})
					return
				}

				this.step = 2
				this.$forceUpdate()
				console.log(this.step)
			},
			step0Fn() {
				this.step = 0
			}


		}
	}
</script>

<style lang="scss" scoped>
	.sign {
		margin: 32rpx 16rpx;
		font-weight: bold;
		line-height: 20px;

		p {
			color: rgba(16, 16, 16, 1);
		}

		.signature {
			background-color: #fff;
			margin-top: 8px;
			height: 160px;
			border: #c2c2c2 1px solid;
		}

		.clean-save {
			background-color: #fff;
			display: flex;

			.clean,
			.save {
				width: 50%;
				text-align: center;
				color: #252525;
				line-height: 40px;
			}

			.clean,
			.save {
				border: #c2c2c2 1px solid;
				display: flex;
				justify-content: center;

				img {
					margin-right: 4px;
				}
			}
		}
	}

	.submit {
		border-radius: 8px;
		background-color: rgba(24, 90, 198, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		line-height: 44px;
		margin: 0 16px;
		position: fixed;
		bottom: 12px;
		left: 0;
		right: 0;
	}

	.submitNo {
		border-radius: 8px;
		background-color: #185ac6a8;
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		line-height: 44px;
		margin: 0 16px;
		position: fixed;
		bottom: 12px;
		left: 0;
		right: 0;
	}

	.jputabs {
		//position: absolute;
		position: fixed;
		background-color: #FFF;
		width: 100%;
		top: 40px;
		z-index: 99;
	}

	.withdraw {
		margin-bottom: 16rpx;
		background-color: #fff;
		padding: 0px 32rpx 0 32rpx;

		.withdraw-head {
			padding: 24rpx 0;
			border-bottom: 1px solid #E5E7EA;

			align-items: center;
			position: relative;
			    display: flex;
			.unit {
				position: absolute;
				top: 34rpx;
				right: 0;

			}

			.whthdraw-price {
				font-size: 36px;
				color: #101010;
				font-weight: 600;
			}

			.bclass {
				color: rgba(119, 119, 119, 100);
				font-size: 32rpx;
				width: 320rpx;
				min-width: 320rpx;
			}

			.spanclass {
				
				text-align: left;
				font-size: 32rpx;
				color: #333333;
			}

			.status0 {
				color: #FF9800;
			}

			.status1 {
				color: #4CAF50;
			}

			.statusN {}

		}
		.withdraw-head2{
			display: inline;
		}

		.withdraw-main {
			border-top: 1px solid #f7f7f7;
			border-bottom: 1px solid #f7f7f7;

			margin: 32rpx 0;
			padding: 32rpx 0;

			.withdraw-input {
				margin-top: 64rpx;
				display: flex;
				align-items: center;
				font-size: 56rpx;

				::v-deep.uni-input-input {
					font-size: 28rpx;
				}
			}
		}

		.withdraw-foot {
			display: flex;
			align-items: center;

			p {
				color: #999
			}

			span {
				color: #2979FF;
				margin-left: 32rpx;

			}
		}
	}

	.asterisk {
		position: relative;

		text {
			position: absolute;
			top: 0px;
			left: -14rpx;
			color: #EE3138;
		}
	}

	.textarea {
		background-color: rgba(242, 242, 242, 100);
		margin-top: 12px;
		line-height: 20px;
		border-radius: 4px;
		color: rgba(136, 136, 136, 100);

		.uni-textarea-placeholder {
			padding: 0 16rpx;

		}

		::v-deep.uni-textarea-textarea {
			width: 90%;
			padding: 0 16rpx;

		}
	}

	.applyBtn {
		padding: 0 48rpx;

		font-size: 32rpx;
		line-height: 88rpx;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

	}

	.step {
		padding-bottom: 120rpx;
	}

	.step0,
	.step1 {
		padding-top: 90rpx;

	}


	.step1 {

		width: 300%;
	}

	.table1,
	.border-table {
		margin: 8rpx 0;
		width: 100%;
		border-collapse: collapse;

		td {
			border: 1px solid #e7e7e7;


			padding: 16rpx 16rpx;
		}

		tr {
			background-color: #f5f5f6
		}

		tr {
			td:first-child {

				//text-align: center;

			}

			td:last-child {
				white-space: pre;
			}
		}

		.tr1 {
			text-align: end;
			font-weight: bold;
		}

		tr:nth-child(even) {
			background-color: #fff;
		}
	}
</style>