jp-charge/pagesFinance/user/applicationForWithdrawal.vue

<template>
	<view>
		<u-tabs 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>

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

		</u-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">{{applicationList[info.applicationType].name}}<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>2601.62元</span>
				</view>
				<view class="withdraw-head border-n">
					<b>分润提现明细表</b><span class="download">
						<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"
						placeholder="请填写价格" input-align="left" type="digit">

						</u-input>


					</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="请填写度数"
						 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 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>
						96.2%

					</span>
				</view>
				<view class="withdraw-head">
					<b>充电分成</b>
					<span>
						2502.72元

					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>充电服务收益</b>
					<span>
						286.59元
					</span>
				</view>

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

				<view class="withdraw-head">
					<b>包月卡分润笔数</b>
					<span>
						1笔

					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>包月卡收益</b>
					<span>
						57.62元

					</span>
				</view>

			</view>



			<view class="withdraw">

				<view class="withdraw-head">
					<b>合伙人总收入</b>
					<span>
						2560.35元

					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>合伙人总收益</b>
					<span>
						344.21元

					</span>
				</view>

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


				<view class="withdraw-head">
					<b>是否开票</b><span>
						<u-radio-group>

							<u-radio v-for="(item, index) in list2" style="margin-right: 16px;" :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">
					<b>发票类型</b><span>
						<u-radio-group>

							<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 class="asterisk"><text>*</text>发票税率</b>
					<text style="float: right;font-size: 16px;">%</text>
					<span class="withdraw-input" style="width: 58%;">
						<u-input height="20px" placeholder="请输入开票税率" input-align="left" 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"
						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 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" placeholder="请填写收款户名" height="96" cursor-spacing="8" />

				</view>
				<view class="withdraw-head ">
					<b class="asterisk"><text>*</text>提现人收款银行</b>
					<u-input class="textarea" type="textarea" placeholder="请填写收款银行全称" height="96" cursor-spacing="8" />

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

				</view>

			</view>

		</template>


		<template v-if="current==1">
			<view class="details">
				<view class="withdraw">
					<view class="withdraw-head">
						<b class="asterisk"><text>*</text>项目</b>
						<text class="unit" style="float: right;font-size: 16px;">
							<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" placeholder="请填写项目名称" input-align="left" type="digit">

							</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" placeholder="请填写价格" 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" placeholder="请填写备注信息" input-align="left" type="digit">

							</u-input>

						</span>

					</view>
				</view>

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

<script>
	import * as API from '@/apis/finance.js'
	
	import {
		beforeTimeStamp,
		parseUnixTime,
		substrMb,DX
	} from '@/utils'
	export default {
		data() {
			return {
				isPt: false,
				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: '提现明细'
				}],


			}
		},

		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:{
				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 ''
				}
			},
		methods: {
			showTime(name){
				if(!name){
					return ''
				}
				return name.replace('-','年')+'月';
			},
			
			queryWithdrawInfo(){
				return;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.queryWithdrawInfo({
					stationId:this.stationObj.id,
					endTime:this.endTime
				}).then((res) => {
					this.info=res.data;
					this.isPt=res.data.isPt;
					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];
						this.queryWithdrawInfo()
					}
					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=e.detail.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: #a1a1a1;
	}
	.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;

		}
	}

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