jp-charge/pagesFinance/user/withdrawal/cashoutInfo.vue

<template>
	<view>
		<view v-if="step==1">
			
			<ujp-navbar title="单据签名" :custom-back="customback" >
					
			</ujp-navbar>
			<signReceipt :obj="info" @signsubmit="submit" ></signReceipt>
		</view>
		<view  v-show="step==0">
			 
			<ujp-navbar title="提现申请单" >
		
			</ujp-navbar>
		
		
				<view class="withdraw">
					<view class="withdraw-head">
						<b class="asterisk">申请站点</b>
						<span v-if="stationList.length>1&&(info.status==-1||info.status==null)">
							<picker @change="bindPickerChange1" range-key="name" :range="stationList">
								<view class="uni-input">
									<view class="input-text">
										{{stationObj.name?stationObj.name:'无站点'}}
									</view>
									<view class="iconfont more">
										&#xe600;
									</view>
								</view>
		
							</picker>
		
						</span>
						<span v-else>
							<view class="uni-input">
								<view class="input-text">
							{{stationObj.name?stationObj.name:'无站点'}}
							</view>
							</view>
						</span>
					</view>
					
					
					<view >
						<!-- 个人桩 -->
						<view class="withdraw-head"  >
							<b class="asterisk">提现开始日期
							<view class="tooltip" v-if="(info.status==-1||info.status==null)">
								<u-icon name="info-circle"></u-icon>
								  <view class="tooltiptext">上次结算成功后的次日</view>
							
							</view>
							
							</b>
							<span>
								<view class="uni-input">{{showTime(info.startTime)}}</view>
							</span>
						</view>
						<view class="withdraw-head"  >
							<b class="asterisk">提现结束日期
							<view class="tooltip" v-if="(info.status==-1||info.status==null)">
								<u-icon name="info-circle"></u-icon>
								  <view class="tooltiptext">结算截止至今天前的第四日</view>

							</view>
							</b>
							<u-calendar  ref="ucalendar" v-model="showcalendar" mode="date" @change="bindPickerChange4"
							 :min-date="info.startTime" :max-date="nowTime"></u-calendar>
							
							<span v-if="(info.status==-1||info.status==null)">
								
							
							<!-- 	<picker @change="bindPickerChange4" mode="date"  :end="nowTime"
									:value="endTime"></picker> -->
									<view class="uni-input" @click="showcalendar=true">{{showTime(endTime)}}<text class="iconfont more">
											&#xe600;
										</text></view>
								
							</span>
							<span v-else>
								<view class="uni-input">{{showTime(info.endTime)}}</view>
							</span>
						</view>
					</view>
					
					
						<view class="withdraw-head"  >
							<b>充电订单汇总</b>
							
							<span class="withdraw-input " style="font-size: 16px;" >{{info.chargingIncome}}元
									<span class="download5"  @click="ckdownload" >
										<u-icon name="download"></u-icon> 下载详情
									</span>
							</span>
							
						</view>
						<view class="withdraw-head" >
							<b class="asterisk">桩主分配比例</b>
							<span>
									<view class="uni-input">{{info.chargingPercent}}%</view>
							
							</span>
						</view>
						
						<view class="withdraw-head" >
							<b class="asterisk">可提现金额</b>
							<span>
									<view class="uni-input">{{info.chargingProfitAmount?showNumJP(info.chargingProfitAmount):0}}元</view>
							
							</span>
						</view>
						<view class="withdraw-head" style="height: 60px;" >
							<b class="asterisk">大写金额</b>
							<span>
									<view class="uni-input">{{info.chargingProfitAmount?getDX(info.chargingProfitAmount)+'':'零元整'}}</view>
							
							</span>
						</view>
						
					
					
				
		   
				
				</view>
		
			
				<view class="withdraw">
					<view class="withdraw-head ">
						<b class="asterisk"><text>*</text>收款户名</b>
						<u-input class="textarea" type="textarea" 
						v-model="info.accountName"
						placeholder="请填写收款户名" height="96" cursor-spacing="8" />
		
					</view>
					<view class="withdraw-head ">
						<b class="asterisk"><text>*</text>收款银行</b>
						<u-input class="textarea" type="textarea"
						v-model="info.bankName"
						 placeholder="请填写收款银行全称" height="96" cursor-spacing="8" />
		
					</view>
					<view class="withdraw-head border-n">
						<b class="asterisk"><text>*</text>收款账号</b>
						<u-input class="textarea" v-model="info.accountNo"
						type="textarea" placeholder="请填写收款账号" height="96" cursor-spacing="8" />
		
					</view>
		
				</view>
		
			 
			<view class="applyBtn" v-if="info.status==-1||info.status==null" >
				<u-button class="save" @click="submit(-1)">保存草稿</u-button>
				<u-button class="submit" @click="submitCk()">提交申请单</u-button>
			</view>
		</view>
	</view>
	
</template>


<script>
	import * as API from '@/apis/finance.js'
	import * as API_common from '@/apis/common.js'
	import signReceipt from './signReceipt.vue'
	

	import {
		beforeTimeStamp,
		parseUnixTime,
		substrMb,
		DX
	} from '@/utils'
	export default {
		components: {
			signReceipt
		
		},
		data() {
			return {
				step:0,
				showcalendar:false,
				penColor: 'red',
				penSize: 5,
				url: '',
				openSmooth: true,
				
				id:'',
				uuid:'',
				isPt: false,
				detailList:[],
				info: {
					electricityPrice: '',
					electricQuantity: '',
					stationId: "",
					applicationType: '1',
					status:""
				},
				applicationList: [{
						name: '物业结算',
						value: "1"
					}, {
						name: '市场费用',
						value: "2"
					}, {
						name: '利润提现',
						value: "3"
					}

				],

				stationList: [],
				queryTime: '',
				nowTime: '',
				stationObj: {},
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: false,
				},
				list1: [{
					name: '普票',
					value: "1"
				}, {
					name: '专票',
					value: "2"
				}, {
					name: '收据',
					value: "3"
				}],
				list2: [{
					name: '是',
					value: "1"
				}, {
					name: '否  ',
					value: "0"
				}],
				tabList: [],
				startTime:'',
				endTime:'',
				userType:"3", //账户类型(1-平台，2-企业,3-个人,4-物业,5-市场)
			}
		},
		onLoad(op){
			
			if(this.userType=="3"){
				this.tabList.push({
					name: '申请单主表',
					value:"main"
				})
				// {
				// 	name: '申请单主表'
				// }, {
				// 	name: '提现明细'
				// }
			}
			if(op.id){
				this.id=op.id
			}
			this.uuid=op.uuid;
		},
		onShow() {


		},
		
		onReady() {
		
			
			// var nowTime = parseUnixTime(new Date(), "{y}-{m}-01")
			// this.queryTime = parseUnixTime(beforeTimeStamp(1, new Date(nowTime)), '{y}-{m}')
			// this.nowTime = parseUnixTime(beforeTimeStamp(1, new Date(nowTime)), '{y}-{m}')
			if(this.userType=="3"){
				this.nowTime = parseUnixTime(beforeTimeStamp(4), '{y}-{m}-{d}')
				try{
					this.init();
				}catch(e){
					//TODO handle the exception
					console.log("error"+e)
				}
				
			
				this.endTime= parseUnixTime(beforeTimeStamp(4), '{y}-{m}-{d}')
				this.getStationList()
			}
		},
		computed: {
			 
			itemApplicationAmountSum(){
				return ''
				
			},
			applicationAmountDX() {
				if (this.info.applicationAmount) {
					var c = DX(this.info.applicationAmount)
					return c
				} else {
					return '零元整'
				}
			},
			electricityPriceX() {
				if (this.info.electricityPrice != '' && this.info.electricQuantity != '') {
					return (this.info.electricityPrice * this.info.electricQuantity).toFixed(2)
				}
				return ''
			}
		},
		watch:{
			
			 
			
		},
		methods: {
			
			init() {
				var _this=this.$refs.ucalendar
				_this.init=()=>{
					let now = new Date(this.nowTime);
					_this.year = now.getFullYear();
					_this.month = now.getMonth() + 1;
					_this.day = now.getDate();
					_this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
					_this.activeDate = _this.today;
					_this.min = _this.initDate(_this.minDate);
					_this.max = _this.initDate(_this.maxDate || _this.today);
					_this.startDate = "";
					_this.startYear = 0;
					_this.startMonth = 0;
					_this.startDay = 0;
					_this.endYear = 0;
					_this.endMonth = 0;
					_this.endDay = 0;
					_this.endDate = "";
					_this.isStart = true;
					
					_this.changeData();
				};
				_this.init()
				
			},
			customback(){
				this.step=0
				
			},
			getDX(value) {
				if (value) {
					var c = DX(value)
					return c
				} else {
					return '零元整'
				}
			},
			onClick(type) {
				 if(type == 'openSmooth') {
					 this.openSmooth = !this.openSmooth
					 return
				 }
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							console.log(res)
							// 生成图片的临时路径
							// app | H5 | 微信小程序 生成的是base64
							this.url = res.tempFilePath
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			
			
			 submitCk(){
				 //this.value=this.info.amount
				 if(!this.stationObj.id){
				 		uni.showToast({
				 			title: "请选择站点"
				 		})
				 
				 	return
				 }
				 
				 	
				 	if(!this.info.accountName){
				 			uni.showToast({
				 				title: "请输入收款户名"
				 			})
				 		return
				 	}
				 	if(!this.info.bankName){
				 			uni.showToast({
				 				title: "请输入收款银行"
				 			})
				 		return
				 	}
				 	if(!this.info.accountNo){
				 			uni.showToast({
				 				title: "请输入收款账号"
				 			})
				 		return
				 	}
				 this.step=1
			 },
			submit(status,img){
				
				if(status==0){
					if(!img){
							uni.showToast({
								title: "请输入签字"
							})
						return
					}
					this.info.signUrl=img
				//this.value=this.info.amount
				if(!this.stationObj.id){
						uni.showToast({
							title: "请选择站点"
						})
				
					return
				}
				
					
				
					
					
					
					if(!this.info.accountName){
							uni.showToast({
								title: "请输入收款户名"
							})
						return
					}
					if(!this.info.bankName){
							uni.showToast({
								title: "请输入收款银行"
							})
						return
					}
					if(!this.info.accountNo){
							uni.showToast({
								title: "请输入收款账号"
							})
						return
					}
					
					
					
			}
			
			if(this.info.invoiceRequired!=''){
				this.info.invoiceRequired=this.info.invoiceRequired=='1'?true:false
			}
			this.info.applicationAmount=this.info.chargingProfitAmount;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if(this.id){
					this.info.id=this.id;
				}
				this.info.status=status;
				
				//var str=JSON.stringify();
				API.applyWithdrawByPersonal({
					
					record:this.info,
					detailList:[]
				
				}).then((res) => {
					
					this.carhelp.set("withdrawRecord",{
						uuid:this.uuid,
					})
					this.id=res.data;
					uni.hideLoading()
					if(status==-1){
						uni.showModal({
							title:"提示",
							content:"保存成功",
							showCancel:false
						})
					}else{
						uni.redirectTo({
							url:"/pagesFinance/user/applyResult?value="+this.info.applicationAmount
						})
					}
						
					
				}).catch(error => {
					this.info.status=null;
					uni.hideLoading()
					uni.showModal({
						title:"提示",
						content:error,
						showCancel:false
					})
				})
			},
			 
			ckdownload(){
				//this.value=this.info.amount
				if(!this.stationObj.id){
						uni.showToast({
							title: "请选择站点"
						})
				
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.profitDetailsExcelByPersonal({
					stationId:this.stationObj.id,
					endDate:this.endTime,
					startDate:this.info.startTime
				}).then((resDown) => {
						uni.hideLoading()
					if(resDown.data){
						window.location.href=resDown.data
						
					}else{
						uni.showToast({
							title:"无文件下载"
						})
					}
				}).catch(error => {
					
					uni.showToast({
						title:error
					})
				})
				
			},
			
			showTime(name) {
				if (!name) {
					return ''
				}
			
					return parseUnixTime(new Date(name), '{y}年{m}月{d}日');
				
				
			},

			queryWithdrawInfo() {
				 
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				
				
				var obj={
					stationId: this.stationObj.id,
					accountType:this.userType,
					endDate:this.endTime,
				}
				if(this.id){
					obj.recordId=this.id
				}
				
				API.queryWithdrawInfoByPersonal(obj).then((res) => {
					this.info = res.data.record;
					this.info.endTime=this.endTime
					this.info.stationName=this.stationObj.name
					var detailList = res.data.detailList;
					this.detailList=[];
					var nowTime=new Date(this.nowTime)
					var startTime=new Date(this.info.startTime)
					uni.hideLoading()
						
					if(startTime>nowTime){
						uni.showModal({
							title:"提示",
							content:"截止"+this.showTime(this.nowTime)+"订单已全部提交申请单",
							showCancel:false,
							confirmText:"返回列表",
							success: function (res) {
									uni.navigateBack()
								}
							
						})
					}
				
					
				

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.getWithdrawInfoByPersonal(this.id).then((res) => {
					
					this.info=res.data.record
					this.endTime=this.info.endTime;
					this.detailList=res.data.detailList
					uni.hideLoading()
				
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getStationList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.stationList().then((res) => {
					this.stationList = res.data.stationList;
					
						if (this.stationList.length) {
							this.stationObj = this.stationList[0];
							if(this.id){
									this.getInfo()
							}else{
									this.queryWithdrawInfo()
							}
						
						}
					
					
					uni.hideLoading()
				
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
				API_common.findByCatalogName2({
					catalogName:"提现类型"
				}).then((res) => {
					this.applicationList= res.data.dataDictionaryList;
					// this.applicationList =dataDictionaryList.map((item)=>{
					// 	return {
					// 		name:item.name,
					// 		value:item.value
					// 	}
					// })
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			bindPickerChange1(e) {

				if (this.stationList[e.detail.value]) {
					this.stationObj = this.stationList[e.detail.value];
					this.endTime=this.nowTime
					this.queryWithdrawInfo()
				}
			},
			bindPickerChange2(e) {
				this.info.applicationType = this.applicationList[e.detail.value].value;
				this.queryWithdrawInfo()
			},
			bindPickerChange4(e) {
				var nowTime=new Date(this.nowTime)
				var result=new Date(e.result)
				if(result<=nowTime){
					
					this.endTime =e.result;
					this.info.endTime= e.result;
					this.queryWithdrawInfo()
				}
			
			},
			bindPickerChange3(e) {
				this.queryTime = e.detail.value;
				this.queryWithdrawInfo()
			},
			change(index) {
				this.current = index;
			}



		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
		padding-bottom: 65px;
	}
</style>
<style lang="scss" scoped>
	.jputabs {
		//position: absolute;
		position: fixed;
		background-color: #FFF;
		width: 100%;
		top: 40px;
		z-index: 99;
	}

	.classFFF {
		color: #607d8b  !important;
	}

	.download {
		color: #185AC6 !important;
	}
	.download5 {
		width: 160rpx !important;
		float: right;
		
		color: #185AC6 !important;
	}

	/deep/.u-tab-bar {
		background-color: #0076FF !important;

	}

	/deep/.u-tabs-scorll-flex {
		width: 56%;
		margin: 0 auto;
	}

	.withdraw-tips {
		margin: 24px 16px;

		p {
			color: #999;
			margin-top: 4px;
		}
	}

	.uni-input {
		font-size: 16px;
		color: #333333;


	}
	
	.withdraw {
		margin-bottom: 8px;
		background-color: #fff;
		padding: 0px 16px 0 16px;
		
		.withdraw-head {
			padding: 24rpx 0;
			border-bottom: 1px solid #E5E7EA;

			align-items: center;
			position: relative;

			.unit {
				position: absolute;
				top: 34rpx;
				right: 0;

			}

			

			b {
				font-weight: normal;
				color: rgba(119, 119, 119, 100);
				font-size: 36rpx;
			}

			span {
				width: 60%;
				float: right;
				text-align: left;
				font-size: 32rpx;
				color: #333333;
			}

			@media screen and (max-width:320px) {
				span {
					width: 60%;
				}
			}

		}

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

			margin: 16px 0;
			padding: 16px 0;

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

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

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

			p {
				color: #999
			}

			span {
				color: #2979FF;
				margin-left: 16px;

			}
		}
	}

	.more {

		color: #B3B3B3;
		font-size: 24px
	}

	.applyBtn {
		padding: 0 16px;

		display: flex;
		background-color: #FFF;
		font-size: 16px;
		line-height: 44px;
		height: 60px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.save {
			width: 33.6%;
			border-radius: 8px 0px 0px 8px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
		}

		.submit {
			width: 66.4%;
			border-radius: 0px 8px 8px 0px;
			background-color: rgba(24, 90, 198, 100);
			color: rgba(255, 255, 255, 100);
		}
	}


	/deep/.uni-input-input {
		text-align: start !important;
	}

	.border-n {
		border: none !important;
	}

	.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;

		}

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

		}
	}
	.withdrawHead{
		padding: 15px;
		font-size: 14px;
		.red{
			color: red;
		}
	}
	.details {
		margin: 16px;
		border-radius: 8px;
		background-color: #fff;
		overflow: hidden;
	}

	.asterisk {
		position: relative;

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

	.add {
		text-align: center;
		font-size: 18px;
		color: #101010;
		display: flex;
		align-items: center;
		justify-content: center;

		.ri-add-circle-fill {
			font-size: 24px;
			color: #44B371;
			margin: auto 0;
			margin-right: 4rpx;
		}

	}

	/deep/.u-input__input {
		font-size: 16px !important
	}

	.uni-input {
		display: flex;
		justify-content: space-between;
	}

	.input-text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tooltip {
		position: relative;
	    display: inline-flex;
		width: 36rpx;
		height: 36rpx;
	}
	
	.tooltip .tooltiptext {
		 min-width: 180px;
		 min-height: 20px;
			
		position: absolute;
		 visibility: hidden;
		top: -30px;
		left: -10px;
		padding: 1px 20rpx;
		line-height: 20px;
		font-size: 24rpx;
		color: #fff;
		
		 background-color: #333333;
	
		border-radius: 10px;
		text-align: center;
		 z-index: 1;
	}
	.tooltip:hover .tooltiptext {
	    visibility: visible;
	}
	.tooltiptext:before {
		 z-index: 1;
		content: "";
		position: absolute;
		
		top: 20px;
		//right: 5px;
		left: 10px;
		border-top: 5px solid #333333;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
	}
</style>