jp-charge/pagesFinance/user/applicationForWithdrawal.vue

<template>
	<view>
		<u-navbar title="提现申请单"></u-navbar>
		<u-tabs 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>

		<template v-if="current==0">
		<view class="withdraw">
			<view class="withdraw-head">
				<b class="asterisk"><text>*</text>申请站点</b>
				<span>
					<picker >
						<view class="uni-input">
							<view class="input-text">
								51充电联盟玉桥充电站
							</view>
						<view class="iconfont more">
								&#xe600;
							</view>
						</view>
						
					</picker>

				</span>
			</view>
			<view class="withdraw-head">
				<b class="asterisk"><text>*</text>提现事由</b>
				<span>
					<picker>
						<view class="uni-input">物业方结算<text class="iconfont more">
								&#xe600;
							</text></view>
					</picker>

				</span>
			</view>
			<view class="withdraw-head">
				<b class="asterisk"><text>*</text>提现月份</b>
				<span>
					<picker>
						<view class="uni-input">2022年7月<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" placeholder="请填写价格" input-align="left" type="digit">

					</u-input>


				</span>

			</view>
			<view class="withdraw-head">
				<b class="asterisk">预估电量</b>
				
				<span class="withdraw-input" style="width: 63%;">
					
			3000.000度
			
				</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="请填写度数" 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%;">
					<u-input height="20px" placeholder="自动计算出结果" input-align="left" type="digit">

					</u-input>


				</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" 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%;">
					<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>
				<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>
	export default {
		data() {
			return {
				isPt: false,
				info: {},

				stationList: [],
				stationObj: {},
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				
				list1: [{
					name: '收据',
					value: "1"
				}, {
					name: '普通发票',
					value: "2"
				}],
				list2: [{
					name: '是',
					value: "1"
				}, {
					name: '否  ',
					value: "0"
				}],
				tabList: [{
									name: '申请单主表'
								}, {
									name: '提现明细'
								}],


			}
		},


		methods: {
	
			change(index) {
							this.current = index;
						}



		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
		padding-bottom: 65px;
	}
</style>
<style lang="scss" scoped>
	.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 {
		margin: 16px;
		display: flex;
		font-size: 16px;
		line-height: 44px;
		height: 44px;
		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>