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

<template>
	<view>
		<u-tabs
		 ref="jputabs"
		 class="jputabs" name="cate_name" gutter="200" bar-width="100" active-color="#101010"
			inactive-color="#A1A1A1" :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>

		<ujp-navbar title="提现申请单" style="margin-bottom: 40px;">

		</ujp-navbar>

		<template v-if="current==0">
			<view class="withdraw">
				<view class="withdraw-head">
					<b class="asterisk"><text>*</text>申请站点</b>
					<span>
						<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>
				</view>
				<view class="withdraw-head">
					<b class="asterisk"><text>*</text>提现事由</b>
					<span>
						<picker @change="bindPickerChange2" range-key="name" :range="applicationList">
							<view class="uni-input">{{info.applicationTypeText}}<text
									class="iconfont more">
									&#xe600;
								</text></view>
						</picker>

					</span>
				</view>
				<view class="withdraw-head">
					<b class="asterisk"><text>*</text>提现月份</b>
					<span>
						<picker @change="bindPickerChange3" mode="date" fields="month" :end="nowTime"
							:value="queryTime">
							<view class="uni-input">{{showTime(queryTime)}}<text class="iconfont more">
									&#xe600;
								</text></view>
						</picker>

					</span>
				</view>
				<view class="withdraw-head ">
					<b>充电收入</b><span class="classFFF">{{info.chargingIncome}}元</span>
				</view>
				<view class="withdraw-head border-n">
					<b>分润提现明细表</b><span class="download"  @click="ckdownload" >
						<u-icon name="download"></u-icon> 下载
					</span>
				</view>
			</view>

			<view class="withdraw">
				<view class="withdraw-head">
					<b class="asterisk"><text>*</text>成本电价</b>
					<text class="unit" style="float: right;font-size: 16px;">元/度</text>
					<span class="withdraw-input" style="width: 63%;">
						<u-input height="20px" v-model="info.electricityPrice" 
						maxlength="10"
						placeholder="请填写电单价" input-align="left"
							type="digit">

						</u-input>


					</span>

				</view>
				<view class="withdraw-head">
					<b class="asterisk">预估电量</b>

					<span class="withdraw-input classFFF" style="width: 63%;">

						{{info.estimateElectricQuantity}}度

					</span>

				</view>
				<view class="withdraw-head">
					<b class="asterisk"><text>*</text>实际电量</b>
					<text class="unit" style="float: right;font-size: 16px;">度</text>
					<span class="withdraw-input" style="width: 63%;">
						<u-input height="20px" placeholder="请填写实际电量"
						 maxlength="10"
						 v-model="info.electricQuantity" input-align="left"
							type="digit">

						</u-input>


					</span>

				</view>
				<view class="withdraw-head border-n">
					<b>电费成本</b>
					<text class="unit" style="float: right;font-size: 16px;">元</text>
					<span class="withdraw-input" style="width: 63%;">
						<view class="classFFF" v-show="electricityPriceX">{{electricityPriceX}}</view>
						<view class="classFFF" v-show="!electricityPriceX">自动计算出结果</view>



					</span>

				</view>

			</view>
			<view class="withdraw">

				<view class="withdraw-head">
					<b>充电分成比例</b>
					<span  class="classFFF" >
						{{info.chargingPercent}}%

					</span>
				</view>
				<view class="withdraw-head">
					<b>充电分成</b>
					<span  class="classFFF" >
						{{info.chargingProfitAmount?info.chargingProfitAmount.toFixed(2):0}}元

					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>充电服务收益</b>
					<span>
						
						<view class="classFFF" v-show="electricityPriceX">{{(info.chargingProfitAmount-electricityPriceX).toFixed(2)}}元</view>
						<view class="classFFF" v-show="!electricityPriceX">自动计算出结果</view>
						
					</span>
				</view>

			</view>
			<view class="withdraw">

				<view class="withdraw-head">
					<b>月卡分润笔数</b>
					<span  class="classFFF"  >
						{{info.monthlyCardTotal}}笔

					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>月卡收益</b>
					<span  class="classFFF" >
						{{info.monthlyCardIncome?info.monthlyCardIncome.toFixed(2):0}}元

					</span>
				</view>

			</view>



			<view class="withdraw">

				<view class="withdraw-head">
					<b>合伙人总收入</b>
					<span  class="classFFF" >
						{{info.totalIncome?info.totalIncome.toFixed(2):0}}元

					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>合伙人总收益</b>
					<span   >
						<view class="classFFF" v-show="electricityPriceX">{{(info.chargingProfitAmount+info.monthlyCardIncome-electricityPriceX).toFixed(2)}}元</view>
						<view class="classFFF" v-show="!electricityPriceX">自动计算出结果</view>
						
						

					</span>
				</view>

			</view>
			<view class="withdraw">


				<view class="withdraw-head">
					<b>是否开票</b><span>
						<u-radio-group  v-model="info.invoiceRequired">

							<u-radio v-for="(item, index) in list2" style="margin-right: 16px;" :key="index+'a'"
								:name="item.value"  active-color="blue">

								{{item.name}}

							</u-radio>

						</u-radio-group>
					</span>
				</view>
				<view class="withdraw-head">
					<b v-if="info.invoiceRequired!='1'">发票类型</b>
					<b v-else class="asterisk"><text>*</text>发票类型</b>
					<span>
						<u-radio-group  v-model="info.invoiceType" >

							<u-radio v-for="(item, index) in list1" :key="index+'a'" :name="item.value"
								:disabled="item.disabled" active-color="blue">

								{{item.name}}

							</u-radio>

						</u-radio-group>
					</span>
				</view>
				<view class="withdraw-head border-n">
					<b v-if="info.invoiceRequired!='1'">发票税率</b>
					<b v-else class="asterisk"><text>*</text>发票税率</b>
					
				
					<text style="float: right;font-size: 16px;">%</text>
					<span class="withdraw-input" style="width: 58%;">
						<u-input height="20px"  v-model="info.taxRate"
						placeholder="请输入开票税率" input-align="left"
						 maxlength="10"
						 type="digit">
						</u-input>
					</span>

				</view>

			</view>
			<view class="withdraw">
				<view class="withdraw-head ">
					<b class="asterisk"><text>*</text>申请提现金额</b>
					<text class="unit" style="float: right;font-size: 16px;">元</text>
					<span class="withdraw-input" style="width: 63%;">
						<u-input height="20px" v-model="info.applicationAmount" maxlength="10" placeholder="请填写金额" input-align="left"
							type="digit">

						</u-input>


					</span>

				</view>
				<view class="withdraw-head border-n">
					<b>大写金额</b>

					<span class="withdraw-input" style="width: 63%;">

						<view  class="classFFF" v-show="applicationAmountDX">{{applicationAmountDX}}</view>
						<view class="classFFF" v-show="!applicationAmountDX">自动转换</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>

		</template>


		<template v-if="current==1">
			<view class="details withdrawHead" v-if="detailList.length&&info.applicationAmount">
				申请提现金额：{{info.applicationAmount}}元<br/>
				明细金额合计：<span :class="{
					red:itemApplicationAmountSum>parseFloat(info.applicationAmount)
				}">{{itemApplicationAmountSum}}元</span>
			</view>
			<view class="details" v-for="(item,i) in detailList" :key="i" >
				<view class="withdraw">
					<view class="withdraw-head">
						<b class="asterisk"><text>*</text>项目</b>
						<text class="unit" style="float: right;font-size: 16px;z-index: 99;"  @click="delItem(i)">
							<i class="ri-indeterminate-circle-fill" style="color: red;font-size: 24px;"></i>
						</text>
						<span class="withdraw-input" style="width: 80%;">
							<u-input height="20px" 
							v-model="item.itemName"
							placeholder="请填写项目名称" input-align="left" >

							</u-input>


						</span>

					</view>
					<view class="withdraw-head border-n">
						<b class="asterisk"><text>*</text>金额</b>
						<text class="unit" style="float: right;font-size: 16px;">元</text>
						<span class="withdraw-input" style="width: 80%;">
							<u-input height="20px"
							 v-model="item.itemAmount"
							 placeholder="请填写价格"
							  maxlength="10"
							  input-align="left" type="digit">

							</u-input>


						</span>

					</view>
					<view class="withdraw-head border-n">
						<b>备注</b>

						<span class="withdraw-input" style="width: 80%;">
							<u-input height="20px"
							 v-model="item.itemRemark"
							 placeholder="请填写备注信息" input-align="left">

							</u-input>


						</span>

					</view>
				</view>

			</view>
			<view class="add" @click="addItem" ><i class="ri-add-circle-fill"></i><text>增加项目</text></view>
		</template>
		<view class="applyBtn">
			<u-button class="save" @click="submit(-1)">保存草稿</u-button>
			<u-button class="submit" @click="submit(0)">提交申请单</u-button>
		</view>
	</view>
</template>


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

	import {
		beforeTimeStamp,
		parseUnixTime,
		substrMb,
		DX
	} from '@/utils'
	export default {
		data() {
			return {
				id:'',
				uuid:'',
				isPt: false,
				detailList:[],
				info: {
					electricityPrice: '',
					electricQuantity: '',
					stationId: "",
					applicationType: '1'
				},
				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: [{
					name: '申请单主表'
				}, {
					name: '提现明细'
				}],
				startTime:'',
				endTime:'',
			}
		},
		onLoad(op){
			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}')

			this.getStationList()
		},
		computed: {
			 
			itemApplicationAmountSum(){
				if (this.info.applicationAmount&&this.detailList&&this.detailList.length) {
					var applicationAmount=0;
					for(var i in this.detailList){
						var obj=this.detailList[i]
						var itemAmount=obj.itemAmount?obj.itemAmount:0
						applicationAmount+=parseFloat(itemAmount)
					}
					 
 					if(applicationAmount){
						return parseFloat(applicationAmount).toFixed(2)
					}else {
						return '0'
					}
					
					
				}else{
					return '0'
				}
				
			},
			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:{
			
			detailList(nVal, oVal) {
				
				var obj=[
					{
						name: '申请单主表'
					}, {
						name: '提现明细'
					}
				]
			
				if(nVal&&nVal.length){
					obj[1].count=nVal.length
				}
			 
				this.tabList=obj
			
			
			
			}
			
		},
		methods: {
			addItem(){
				this.detailList.push({})
			},
			delItem(i){
				
				this.detailList.splice(i,1)
			},
			submit(status){
				if(status==0){
					
				//this.value=this.info.amount
				if(!this.stationObj.id){
						uni.showToast({
							title: "请选择站点"
						})
				
					return
				}
				if(!this.info.electricityPrice){
						uni.showToast({
							title: "请输入成本电价"
						})
				
					return
				}
					
					if(!this.info.electricQuantity){
							uni.showToast({
								title: "请输入实际电量"
							})
					
						return
					}
					
					if(this.info.invoiceRequired=="1"){
						if(!this.info.invoiceType){
								uni.showToast({
									title: "请选择发票类型"
								})
						
							return
						}
						if(!this.info.taxRate){
								uni.showToast({
									title: "请选择发票税率"
								})
						
							return
						}
					}
					
					if(!this.info.applicationAmount){
							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
					}
					for(var i in this.detailList){
						var obj=this.detailList[i]
						
						if(!obj.itemName){
							uni.showToast({
								title: `请填写提现明细中第${parseInt(i)+1}项的项目名称`
							})
							return
						}
						if(!obj.itemAmount){
							uni.showToast({
								title: `请填写提现明细[${obj.itemName}]项目的金额`
							})
							return
						}
					}
					if(this.detailList&&this.detailList.length){
						
						
						if(!(this.itemApplicationAmountSum==parseFloat(this.info.applicationAmount))){
							uni.showToast({
								title: `[申请提现金额]与[明细金额合计]不相等`
							})
							return
						}
					}
					
			}
			if(this.info.invoiceRequired!=''){
				this.info.invoiceRequired=this.info.invoiceRequired=='1'?true:false
			}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if(this.id){
					this.info.id=this.id;
				}
				this.info.status=status;
				
				//var str=JSON.stringify();
				API.applyWithdraw({
					
					record:this.info,
					detailList:this.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/withdrawal/applyResult?value="+this.info.applicationAmount
						})
					}
						
					
				}).catch(error => {
					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.profitDetailsExcel({
					stationId:this.stationObj.id,
					yearMonth:this.queryTime,
				
				}).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 name.replace('-', '年') + '月';
			},

			queryWithdrawInfo() {
				 
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.queryWithdrawInfo({
					stationId: this.stationObj.id,
					yearMonth: this.queryTime,
					applicationType: this.info.applicationType
				}).then((res) => {
					this.info = res.data.record;
					var detailList = res.data.detailList;
					this.detailList=[];
					
					if(detailList==null){
						detailList=[];
					}
					for(var i in detailList){
						if(this.id){
							this.detailList.push(detailList[i])
						}else{
							this.detailList.push({
								itemName:detailList[i].itemName,
								itemRemark:detailList[i].itemRemark,
								itemAmount:'',
							})
						}
					}
					
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.getWithdrawInfo(this.id).then((res) => {
					
					this.info=res.data.record
					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.queryWithdrawInfo()
				}
			},
			bindPickerChange2(e) {
				this.info.applicationType = this.applicationList[e.detail.value].value;
				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;
	}

	/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: 16px 0;
			border-bottom: 1px solid #E5E7EA;

			align-items: center;
			position: relative;

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

			}

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

			b {
				color: rgba(119, 119, 119, 100);
				font-size: 16px;
			}

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

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

		}

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

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

			.withdraw-input {
				margin-top: 32px;
				display: flex;
				align-items: center;
				font-size: 28px;

				/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;
	}
</style>