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><span>{{info.endTime}}</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>10笔</span>
			</view>
			<view class="withdraw-head">
				<b>此期间把偶月卡分润金额</b><span class="whthdraw-price">102.00元</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
			}" @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 {
				info:{},
				code:"",
				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
					},
			}
		},
		onReady() {
		
			//this.getHomePage()
		},
		onShow(){
				this.nowTime=parseUnixTime(new Date())
			this.getHomePage()
		},
		methods: {
			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
				}
				if(!this.info.amount){
						uni.showToast({
							title: "可提现金额为0"
						})

					return
				}
				
				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="+this.info.amount
						})
					
				}).catch(error => {
					
					uni.showModal({
						title:"提示",
						content:error,
						showCancel:false
					})
				})
			},
			queryWithdrawInfo(id){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.queryWithdrawInfo({
					stationId:id
				}).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,8,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>
	.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>