jp-charge/pagesFinance/user/withdraw.vue

<template>
	<view>
		<u-navbar title="提现"></u-navbar>
		<view class="withdraw">
			<view class="withdraw-head">
				<b>提现至</b><span>{{code}}</span>
			</view>
			<view class="withdraw-head">
				<b>选择提现站点</b>
				<span  >
					<picker @change="bindPickerChange" range-key="name" :range="stationList">
							<view class="uni-input">{{stationObj.name?stationObj.name:'无站点'}}<text class="iconfont more">
					&#xe600;
				</text></view>
					</picker>
									
				</span>
			</view>
			<view class="withdraw-head">
				<b>上次提现时间</b><span>{{info.startTime}}</span>
			</view>
			<view class="withdraw-head">
				<b>本次提现时间</b>
					
					<u-picker mode="time" v-model="showEndTime" :default-time="endTime" :params="params" @confirm="bindDateChange0"></u-picker>
				<span @click="showEndTime=true">
				
				<view class="uni-input">{{info.endTime}} <text class="iconfont more">
					&#xe600;
				</text></view>
			 
				</span>
			</view>
			<view class="withdraw-head">
				<b>此期间累计产生订单数</b><span>{{info.total}}笔</span>
			</view>
			<view class="withdraw-head">
				<b>此期间总分润金额</b><span class="whthdraw-price">{{info.amount?info.amount:0}}元</span>
			</view>
			<view class="withdraw-head">
				<b>此期间累计产生包月卡分润数</b><span>{{info.cardTotal}}笔</span>
			</view>
			<view class="withdraw-head">
				<b>此期间累计月卡分润金额</b><span class="whthdraw-price">{{info.cardAmount}}元</span>
			</view>
			<view class="withdraw-head">
				<b>分润提现明细表</b><span class="download" @click="ckdownload"><u-icon name="download"></u-icon> 下载</span>
			</view>
			
			
			
			<view class="withdraw-main" v-if="false">
				<p>申请提现金额(元)</p>
				<view class="withdraw-input">
					<span>￥</span>
					<u-input v-model="value" :type="type" placeholder-style="font-size:28px;height:40px;line-height:40px;color:#ccc;" />
				</view>
			</view>
			<view class="withdraw-head">
				<b>是否开票</b><span  >
				<u-radio-group v-model="invoiceRequired" >
				
					<u-radio  v-for="(item, index) in list2"
					 
					 style="margin-right: 16px;"
					 
					 :key="index+'a'" :name="item.value"
						:disabled="item.disabled" active-color="#00b962">
				
						{{item.name}}
				
					</u-radio>
				
				</u-radio-group>
				</span>
			</view>
			<view class="withdraw-head">
				<b>发票类型</b><span  >
				<u-radio-group v-model="invoiceType" >
				
					<u-radio  v-for="(item, index) in list1" :key="index+'a'" :name="item.value"
						:disabled="item.disabled" active-color="#00b962">
				
						{{item.name}}
				
					</u-radio>
				
				</u-radio-group>
				</span>
			</view>
			
			<view class="withdraw-head" >
				<b>开票税率（%）</b>
					
					<span class="withdraw-input">
					<u-input
					 height="20px"
					  placeholder="请输入内容"
										input-align="right"
											type="digit"
					  v-model="taxRate"
									 
					></u-input>
				</span>
			</view>
		</view>
		
		<view class="applyBtn">
			<u-button :class="{
				'applyBtn-btn':!info.amount&&!info.cardAmount
			}" @click="submit()" type="primary">申请提现，等待财务转账</u-button>
		</view>
		<view class="withdraw-tips">
			<h4>提现说明：</h4>
			<p>由于银行清算，提现申请将于次日内到账。如遇高峰期，可能延时到账，请耐心等待。</p>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	import {
		parseUnixTime,
		substrMb
	} from '@/utils'
	export default {
		data() {
			return {
				
				params: {
						year: true,
						month: true,
						day: true,
						hour: true,
						minute: true,
						second: true,
						timestamp: true, 
				},
								
				info:{},
				code:"",
				showEndTime:false,
				value: '',
				type: 'number',
				nowTime:"",
				taxRate:"",
				invo:"",
				invoiceRequired:"1",
				invoiceType:"1",
				stationList:[],
				stationObj:{},
				list1: [{
					name: '普票',
					value:"1"
				}, {
					name: '专票',
					value:"2"
				}],
				list2: [{
					name: '是',
					value:"1"
				}, {
					name: '否  ',
					value:"0"
				}],
				
					home:{
						accountBalance:0
					},
					endTime:null
			}
		},
		onReady() {
			this.endTime=parseUnixTime(new Date(),"{y}-{m}-{d} 00:00:00")
		
			//this.getHomePage()
		},
		onShow(){
				this.nowTime=parseUnixTime(new Date())
			this.getHomePage()
		},
		methods: {
			bindDateChange0(e){
				console.log(e)
				var key=e.year+"/"+e.month+"/"+e.day+" "+e.hour+":"+e.minute+":"+e.second;
				var endTime=parseUnixTime(new Date(key))
				
				if(endTime<this.nowTime){
					this.endTime=parseUnixTime(new Date(key))
					
					this.info.endTime=this.endTime
					this.queryWithdrawInfo(this.stationObj.id)
				}else{
					uni.showToast({
						title:"结束时间不能大于当前时间"
					})
				}
				
			},
			
			ckdownload(){
				//this.value=this.info.amount
				if(!this.stationObj.id){
						uni.showToast({
							title: "请选择站点"
						})
				
					return
				}
				
				API.profitDetailsExcel({
					stationId:this.stationObj.id,
					startTime:this.info.startTime,
					endTime:this.info.endTime
				}).then((resDown) => {
					// uni.downloadFile({
					// 	url: resDown.data, //仅为示例，并非真实的资源
					// 	success: (res) => {
					// 		if (res.statusCode === 200) {
					// 			console.log('下载成功');
					// 		}
					// 	}
					// });
					if(resDown.data){
						window.location.href=resDown.data
						
					}else{
						uni.showToast({
							title:"无文件下载"
						})
					}
				}).catch(error => {
					
					uni.showToast({
						title:error
					})
				})
				
			},
			bindPickerChange(e){
				console.log(e)
				if(this.stationList[e.detail.value]){
					this.stationObj=this.stationList[e.detail.value];
					this.queryWithdrawInfo(this.stationObj.id)
				}
			},
			selectStation(){},
			submit(){
				
			 
				//this.value=this.info.amount
				if(!this.stationObj.id){
						uni.showToast({
							title: "请选择站点"
						})
				
					return
				}
				var amount=0
				if(!this.info.amount&&!this.info.cardAmount){
						uni.showToast({
							title: "可提现金额为0"
						})
					return
				}
				amount=(this.info.amount*100+this.info.cardAmount*100)/100;
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.info.invoiceRequired=this.invoiceRequired
				this.info.invoiceType=this.invoiceType
				this.info.taxRate=this.taxRate
				this.info.stationId=this.stationObj.id;
				
				
				API.applyWithdraw(this.info).then((res) => {
					
						uni.redirectTo({
							url:"/pagesFinance/user/applyResult?value="+amount
						})
					
				}).catch(error => {
					
					uni.showModal({
						title:"提示",
						content:error,
						showCancel:false
					})
				})
			},
			queryWithdrawInfo(id){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.queryWithdrawInfo({
					stationId:id,
					endTime:this.endTime
				}).then((res) => {
					this.info=res.data;
					
					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(this.stationList[0].id)
					}
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getHomePage(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.homePage().then((res) => {
					this.home = res.data
					var bankCard="";
				
					if(this.home.bankCard){
						
						bankCard=substrMb(this.home.bankCard,0,4)+"****"+substrMb(this.home.bankCard,this.home.bankCard.length-4,4)
					}
					this.code=this.home.bank+":"+bankCard;
					if(this.home.bank==null&&this.home.bankCard==null){
						this.code="未绑定"
					}
					
					uni.hideLoading()
					this.getStationList()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.download{
		color: #185AC6 ;
	}
	.withdraw-tips{
		margin:24px 16px;
		p{
			color:#999;
			margin-top: 4px;
		}
	}
	.withdraw{
		margin: 16px;
		background-color: #fff;
		padding: 16px 16px 0 16px;
		.withdraw-head{
			// margin: 16px 0;
			padding: 16px 0;
		
			border-bottom: 1px solid #f7f7f7;
			line-height: 20px;
			align-items: center;
			.whthdraw-price{
				font-size: 18px;
				color: #101010;
				font-weight: 600;
			}
			b{
				color:#999;
			}
			span{
				margin-left: 12px;
				float: right;
			}
		}
		.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;
			
			}
		}
	}
	.applyBtn{
		margin: 16px;
	}
	.applyBtn-btn{
		background-color: #185AC6;
		opacity: 0.5;
		border-color:#185AC6 ;
		border-radius: 8px;
	}
</style>