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

<template>
	<view>
		<ujp-navbar title="申请单详情" v-if="!onReadyId"></ujp-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>申请站点</b>
					<span>
						<view class="uni-input">{{info.stationName}}</view>
					</span>
				</view>
				<!-- <view class="withdraw-head">
					<b>申请时间</b>
					<span>
						<view class="uni-input">{{info.updateTime}}</view>
					</span>
				</view> -->

				<view class="withdraw-head">
					<b>提现事由</b>
					<span>
						<view class="uni-input">{{info.applicationTypeText}}</view>
					</span>
				</view>

				<view class="withdraw-head " v-if="info.applicationType!=3">
					<b>提现账户</b><span>
						<view class="uni-input">{{info.merchantAccountName}}</view>
					</span>
				</view>

				<view class="withdraw-head">
					<b>提现月份</b>
					<span>
						<view class="uni-input">{{showTime(info.applicationMonth)}}</view>
					</span>
				</view>
				<view class="withdraw-head">
					<b>抄表开始日期</b>
					<span>
						<view class="uni-input">{{showTime2(info.startTime2)}}</view>
					</span>
				</view>
				<view class="withdraw-head">
					<b>抄表结束日期</b>
					<span>
						<view class="uni-input">{{showTime2(info.endTime2)}}</view>
					</span>
				</view>

			<!--	 <view class="withdraw-head border-n" v-if="info.applicationType==2" >
					<b>桩主/站主收益</b>
					
					<span class="download" @click="ckdownload">
						<view class="uni-input">{{info.totalProfitAmount?info.totalProfitAmount.toFixed(2):0}}元<span class="download" style="width: 220rpx;" ><u-icon  name="download"></u-icon> 下载收益明细</span> </view>
					</span>
				</view> -->
				<view class="withdraw-head border-n" >
					<b>分润提现明细表</b><span class="download" 
					@click="ckdownload">
						<u-icon name="download"></u-icon> 下载
					</span>
				</view>
				
				<view class="withdraw-head border-n" v-if="info.applicationType==2">
					<b>市场奖励比例
					
					</b>
					<span>
						<view class="uni-input">{{info.rewardProportion}}%</view>
				
					</span>
				</view>
				<view class="withdraw-head border-n"   v-if="info.applicationType==2" >
					<b>奖励金额
					<view class="tooltip">
						<u-icon name="info-circle"></u-icon>
						  <view class="tooltiptext" style="width: 220px;">奖励金额=总收益*市场奖励比例</view>
					
					</view>
					</b>
					<span>
						<view class="uni-input">
							{{info.applicationAmount}}元
						</view>
				
					</span>
				</view>
				<view class="withdraw-head border-n"  v-if="info.applicationType==2" >
					<b>大写金额</b>
				
					<span>
						<view class="uni-input">{{applicationAmountDX}}</view>
					</span>
				
				</view>
				
			</view>

			<view class="withdraw"     >
				<view class="withdraw-head">
					<b>电单价</b>
					<span>
						<view class="uni-input">{{info.electricityPrice}}元/度</view>
					</span>
				</view>

				<view class="withdraw-head ">
					<b>实际电量</b>
					<span>
						<view class="uni-input">{{info.electricQuantity}}度</view>
					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>电费成本
					<view class="tooltip">
						<u-icon name="info-circle"></u-icon>
						  <view class="tooltiptext">电费成本=电单价*实际电量</view>
					
					</view>
					</b>
					<span>
						<view class="uni-input">{{info.electricityCost}}元</view>
					</span>
				</view>
			</view>
			<view class="withdraw"    >
				<view class="withdraw-head ">
					<b>充电分成比例</b>
					<span>
						<view class="uni-input">{{info.chargingPercent}}%</view>
					</span>
				</view>
				<view class="withdraw-head ">
					<b>充电分成</b>
					<span>
						<view class="uni-input">{{info.chargingProfitAmount?info.chargingProfitAmount.toFixed(2):0}}元</view>
					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>充电服务收益
					<view class="tooltip tooltiplong">
						<u-icon name="info-circle"></u-icon>
						  <view class="tooltiptext"  style="width: 220px;" >充电服务收益=充电分成-电费成本</view>
					
					</view>
					</b>
					<span>
						<view class="uni-input">
						{{info.chargingServiceProfitAmount?info.chargingServiceProfitAmount.toFixed(2):0}}元
						</view>
					</span>
				</view>


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

				<view class="withdraw-head">
					<b>月卡分润笔数</b>
					<span>
						<view class="uni-input">{{info.monthlyCardTotal}}笔</view>
					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>月卡收益</b>
					<span>
						<view class="uni-input">{{info.monthlyCardIncome?info.monthlyCardIncome.toFixed(2):0}}元</view>



					</span>
				</view>


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

				<view class="withdraw-head">
					<b>桩主/站主总收入
					<view class="tooltip tooltiplong">
						<u-icon name="info-circle"></u-icon>
						  <view class="tooltiptext"  >总收入=充电分成+月卡收益</view>
					
					</view>
					</b>
					<span>
						<view class="uni-input">{{info.totalIncome?info.totalIncome.toFixed(2):0}}元</view>
					
					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>桩主/站主收益
					<view class="tooltip tooltiplong ">
						<u-icon name="info-circle"></u-icon>
						  <view class="tooltiptext">收益=总收入-电费成本</view>
					
					</view>
					</b>
					<span>
						<view class="uni-input">{{info.totalProfitAmount?info.totalProfitAmount.toFixed(2):0}}元</view>
						
					</span>
				</view>
			
			</view>
			<view class="withdraw" v-if="info.applicationType==3&&(info.applyAmount1||info.applyAmount2)" >
			
				<view class="withdraw-head" v-if="info.applyAmount1">
					<b>物业可提现金额</b>
					<span>
						<view class="uni-input">{{info.applyAmount1}}元</view>
			
					</span>
				</view>
				<view class="withdraw-head border-n" v-if="info.applyAmount2">
					<b>市场可提现金额</b>
					<span>
						<view class="uni-input">{{info.applyAmount2}}元</view>
			
			
					</span>
				</view>
				</view>
			<view class="withdraw" v-if="info.applicationType==1">

				<view class="withdraw-head">
					<b>提现类型</b>
					<span>
						<view class="uni-input">{{info.withdrawalType?list3[info.withdrawalType].name:''}}</view>

					</span>
				</view>
				<view class="withdraw-head border-n" v-if="info.withdrawalType==0">
					<b>提成比例</b>
					<span>

						<view class="uni-input">{{info.rewardProportion}}%</view>

					</span>
				</view>
				<view class="withdraw-head border-n" v-if="info.withdrawalType==0">
					<b>服务费</b>
					<span>
						<view class="uni-input">{{(info.totalProfitAmount*info.rewardProportion/100).toFixed(2)}}元</view>



					</span>
				</view>
				<view class="withdraw-head border-n" v-if="info.withdrawalType==1">
					<b>停车费</b>
					<span>
						<view class="uni-input">{{info.parkingFee}}元</view>


					</span>
				</view>
			</view>

			<view class="withdraw" v-if="info.applicationType==3">
				<view class="withdraw-head ">
					<b>是否开票</b>
					<span>
						<view class="uni-input">{{info.invoiceRequired?'是':'否'}}</view>
					</span>
				</view>
				<view class="withdraw-head ">
					<b>发票类型</b>
					<span>
						<view class="uni-input" v-if="!info.invoiceType">无</view>

						<view class="uni-input" v-else>{{invoiceTypeName}}</view>
					</span>
				</view>
				<view class="withdraw-head border-n ">
					<b>发票税率</b>
					<span>
						<view class="uni-input">{{info.taxRate?info.taxRate+'%':''}}</view>
					</span>
				</view>

			</view>
			<view class="withdraw"  v-if="info.applicationType!=2" >
				<view class="withdraw-head ">
					<b class="asterisk" >{{!onReadyId?'申请提现金额':'可提现金额'}}</b>
					<span>
						<view class="uni-input">{{info.applicationAmount}}元</view>
					</span>

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

					<span>
						<view class="uni-input">{{applicationAmountDX}}</view>
					</span>

				</view>
			</view>
			<view class="withdraw" v-if="info.applicationType==3">
				<view class="withdraw-head ">
					<b class="asterisk">收款户名</b>
					<p class="uni-input">{{info.accountName}}</p>

				</view>
				<view class="withdraw-head ">
					<b class="asterisk">收款银行</b>
					<p class="uni-input">{{info.bankName}}</p>

				</view>
				<view class="withdraw-head border-n">
					<b class="asterisk">收款账号</b>
					<p class="uni-input">{{info.accountNo}}</p>
				</view>

			</view>

		</template>


		<template v-if="current==1">
			<view class="margin">
				<view style="text-align: center;margin-top: 100px" v-if="!detailList.length">
					<img src="@/assets/img/blankpage.png">
					<view>未填写提现明细</view>
				</view>

				<view class="details " v-for="(item,i) in detailList" :key="i">

					<p>{{item.itemName}}</p>

					<view class="withdraw">
						<view class="withdraw-head ">
							<b class="asterisk">金额</b>
							<span>
								<view class="uni-input">{{item.itemAmount}}元</view>
							</span>

						</view>
						<view class="withdraw-head ">
							<b class="asterisk">备注</b>
							<span>
								<view class="uni-input">{{item.itemRemark?item.itemRemark:'无'}}</view>
							</span>

						</view>

					</view>

				</view>
			</view>



		</template>

	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	import {
		parseUnixTime,
		DX
	} from '@/utils'
	export default {

		data() {
			return {
				isPt: false,
				id: '',
				detailList: [],
				info: {
					electricityPrice: '',
					electricQuantity: '',
					stationId: "",
					applicationType: '1'
				},
				stationList: [],
				stationObj: {},
				current: 0, // tabs组件的current值，表示当前活动的tab选项

				list1: [{
					name: '普票',
					value: "1"
				}, {
					name: '专票',
					value: "2"
				}, {
					name: '收据',
					value: "3"
				}],
				list2: [{
					name: '是',
					value: "1"
				}, {
					name: '否  ',
					value: "0"
				}],
				list3: [{
					name: '服务费提成',
					value: "0"
				}, {
					name: '停车费',
					value: "1"
				}],
				tabList: [{
					name: '申请单主表'
				}, {
					name: '提现明细'
				}],


			}
		},
		props: {
			onReadyId: '',
		},
		created() {
		
			if (this.onReadyId) {
				this.id = this.onReadyId;
				this.getInfo()
			}
			//this.getInfo()
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id
				this.getInfo()
			}
		},
		computed: {
			invoiceTypeName() {

				var info = this.list1.find(item => {
					console.log(item.value == this.info.invoiceType)
					return item.value == this.info.invoiceType
				})

				if (info) {
					return info.name
				}
				return ''
			},


			applicationAmountDX() {
				if (this.info.applicationAmount) {
					var c = DX(this.info.applicationAmount)
					return c
				} else {
					return ''
				}
			},
		},
		watch: {

			detailList(nVal, oVal) {
				console.log(nVal)
				var obj = [{
					name: '申请单主表'
				}, {
					name: '提现明细'
				}]

				if (nVal && nVal.length) {
					obj[1].count = nVal.length
				}

				this.tabList = obj

			}

		},
		methods: {
			showTime2(name) {
				if (!name) {
					return ''
				}
			
					return parseUnixTime(new Date(name), '{y}年{m}月{d}日{h}:{i}');
				
				
			},
			showTime(name) {
				if (!name) {
					return ''
				}
				return name.replace('-', '年') + '月';
			},
			ckdownload() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.profitDetailsExcelByAccounting({
					recordId:this.info.id,
					stationId:this.info.stationId,
					startDate:this.info.startTime2+":00",
					endDate:this.info.endTime2+":00",
				}).then((resDown) => {
					uni.hideLoading()
					if (resDown.data) {
						window.location.href = resDown.data

					} else {
						uni.showToast({
							title: "无文件下载"
						})
					}
				}).catch(error => {

					uni.showToast({
						title: error
					})
				})

			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.getWithdrawInfoByAccounting(this.id).then((res) => {

					this.info = res.data.record
					this.detailList = res.data.detailList
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			change(index) {
				this.current = index;
				this.$emit("changetabs_app",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: 45px;
		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;

	}
	@media screen and (max-width:320px) {
		.uni-input {
			font-size: 36rpx;
		}
	}

	.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;
				min-width: 40%;
			}

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

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

		}

		.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-time {
		font-size: 32rpx;
	}

	.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;
	}
	.margin{
		  margin-top: 12px !important;
	}
		.details {
			margin: 0 16px;
			margin-bottom: 8px ;
			border-radius: 8px;
			background-color: #fff;
			padding:0 12px 0px 12px;
			p{
				font-size: 16px;
				color: #333333;
				line-height: 50px;
				border-bottom: solid 1px #E5E7EA;
				padding-left: 16px;
			}
			span{
				width: 75% !important;
			}
		}
</style>