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

<template>
	<view>
		<ujp-navbar title="提现申请详情"></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.shareProfitRoleName}}</view>
					</span>
				</view>
				<view class="withdraw-head">
					<b>提现事由</b>
					<span>
						<view class="uni-input">{{info.applicationTypeText}}</view>
					</span>
				</view>
				<view class="withdraw-head">
					<b>提现月份</b>
					<span>
						<view class="uni-input">{{info.applicationMonth}}</view>
					</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 class="withdraw-head">
					<b>审核进度</b>
					<span>
						<view class="uni-input"  :class="{
								 wsuccess:info.status=='1',
								  werror:info.status=='2',
								   werror2:info.status=='0'
							 }" >{{info.statusText}}</view>
					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>充电分成</b>
					<span>
						<view class="uni-input">{{info.chargingProfitAmount}}元</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>电费成本</b>
					<span>
						{{info.electricityCost}}元

					</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}}元</view>
					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>充电服务收益</b>
					<span>
						<view class="uni-input">{{info.chargingServiceProfitAmount}}元</view>
					</span>
				</view>


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

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

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


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

				<view class="withdraw-head">
					<b>合伙人总收入</b>
					<span>
						{{info.totalIncome}}元

					</span>
				</view>
				<view class="withdraw-head border-n">
					<b>合伙人总收益</b>
					<span>
						{{info.totalProfitAmount}}元

					</span>
				</view>

			</view>


			<view class="withdraw">
				<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">
				<view class="withdraw-head ">
					<b class="asterisk">申请提现金额</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">
				<view class="withdraw-head ">
					<b class="asterisk">提现人收款户名</b>
					<p class="infos">{{info.accountName}}</p>

				</view>
				<view class="withdraw-head ">
					<b class="asterisk">提现人收款银行</b>
					<p class="infos">{{info.bankName}}</p>

				</view>
				<view class="withdraw-head border-n">
					<b class="asterisk">提现人收款账号</b>
					<p class="infos">{{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 {
	
		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"
				}],
				tabList: [{
					name: '申请单主表'
				}, {
					name: '提现明细'
				}],


			}
		},

		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: {
			ckdownload(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.profitDetailsExcel({
					stationId:this.info.stationId,
					yearMonth:this.info.applicationMonth,
				
				}).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.getWithdrawInfo(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;
			}



		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
		padding-bottom: 65px;
	}
</style>
<style lang="scss" scoped>
	// .download {
	// 	color: #185AC6;
	// }

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

	.withdraw {
		margin-bottom: 8px;
		background-color: #fff;
		padding: 0px 16px 0 16px;
         
		.withdraw-head {
			padding: 14px 0;
			border-bottom: 1px solid #F2F2F2;

			align-items: center;
			position: relative;
			
			.wsuccess{color:#27b148 !important}
			.werror{color:#FF6200 !important;}
			.werror2{color:#1ba7f4 !important;}
			
			.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%;
			            }
			        }

			.uni-input {
				font-size: 16px;
				color: #333333;
				line-height: 18px;
			}
		}

		.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: 28px;
				}
			}
		}

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

			p {
				color: #999
			}

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

			}
		}
	}

	.more {
		float: right;
		color: #B3B3B3;
		font-size: 24px
	}

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

   .infos{
	   margin-top: 16px;
	   color: rgba(51, 51, 51, 100);
	   font-size: 16px;
   }
  .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>