guosen-ldt-shop/pages/withdraw/withdraw.vue

<template>
	<view class="margin-30">
		<navigator v-if="$isEmpty(bank)" url="/pages/userBank/add" class="card_add" hover-class="none">
			<view class="margin-bottom-10">
				<u-icon name="plus-circle-fill" color="#F5A85B" size="70"></u-icon>
			</view>
			<view class="" style="color: #666666;">
				添加银行卡
			</view>
		</navigator>

		<navigator url="select-bank" class="bank" v-else hover-class="none">
			<view class="left center">
				<image :src="bank.bankCode?'/static/bank/'+bank.bankCode+'.png':''" mode=""></image>
				<view class="content">
					<text>{{bank.bankName}}</text>
					<text>{{dealAccountNo(bank.accountNo)}}</text>
				</view>
			</view>

			<view class="center">
				<text class="cuIcon-right" style="font-size: 36rpx;color: #888888;"></text>
			</view>
		</navigator>
		<view class="card">
			<text class="title" v-if="type==withdrawType.BALANCE_WITHDRAW">结算金额</text>
			<text class="title" v-else>提现金额</text>

			<view class="input">
				<text class="text-price center  text-bold" style="font-size: 60rpx;"></text>
				<view @click="show" class="margin-left-20 center"
					style="width: 60%;justify-content: flex-start;color: #ff9900;">
					<text class="text-xl" v-text="withdrawAmount"></text>
					<view class="cusor" v-if="type==withdrawType.POINT_WITHDRAW"></view>
				</view>
				<view  v-if="type==withdrawType.POINT_WITHDRAW" @click="allWithdraw" class="center margin-bottom-10 margin-left-20">
					<view class="cu-btn withdraw-btn sm round center">
						<text>全部提现</text>
					</view>
				</view>
			</view>
			<view class="canWithdraw">
				<text class="text-base text-sm " style="margin-bottom: 20rpx;">* 到账金额以实际为准</text>
				<view class="" style="font-weight: 300;">
					<text v-if="type==withdrawType.BALANCE_WITHDRAW">可结算金额</text>
					<text v-else >可提现金额</text>
					<text class="price margin-left-20" style="font-size: 32rpx;">{{canWithDraw}}</text>
				</view>
				
				<view class="margin-top-10" style="font-weight: 300;" v-if="type=='withdraw'">
					<text>费率</text>
					<text @click="rateShow=true" class="cuIcon-question margin-left-10 text-lg"></text>
				</view>
			</view>
	
		</view>

		<u-popup v-model="rateShow" :mask-close-able="false" mode="center" height="40%" width="76%" borderRadius="20"
			negative-top="100">
			<view class="popup-content" style="height: 98%;">
				<view class="">
					<text class="popup-title">费率说明</text>
					<view class="popup-desc">
						<text>累计营收0-1000元，费率为0.5%;</text>
						<text>1001-10000元，费率为0.38%;</text>
						<text>10000-100000元，费率0.3%;</text>
						<text>100000元起申请更低费率。</text>
					</view>
				</view>
				<view class="center">
					<view class="cu-btn btn-bg-color round" style="height: 80rpx;font-size: 30rpx;width: 80%;"
						@click="rateShow=false">
						确认
					</view>
				</view>

			</view>
		</u-popup>

		<amountInput :maxNumber="canWithDraw" ref="amountInput" :confirmText="type==withdrawType.BALANCE_WITHDRAW?'确认结算':'确认提现'" btnColor="#ff9900" @change="change"
			@confirm="debounceWithdraw"></amountInput>

		<u-modal :mask-close-able="true" confirm-text="确定提现" @confirm="doWithdraw" v-model="passwordShow" title="提示">
			<view class="slot-content" style="padding: 20rpx;">
				<u-input v-model="withdrawPassword" placeholder="请填写提现密码" type="password" />
			</view>
		</u-modal>
		<toast ref="toast"></toast>
		<loading ref="loading" type="3"/>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	import amountInput from '@/components/amountInput/amountInput.vue';
	export default {
		components: {
			amountInput
		},
		data() {
			return {
				//提现的id
				withdrawId:'',
				//默认积分提现
				withdrawType:this.$global.WITHDRAW_TYPE,
				type:this.$global.WITHDRAW_TYPE.POINT_WITHDRAW,
				rateShow: false,
				bank: {},
				//可提现
				canWithDraw: '',
				//提现金额
				withdrawAmount: 0,
				//提现密码
				withdrawPassword: '',
				passwordShow: false,
				count:0,
			};
		},
		onLoad(options) {
			this.fetchCardList()
			this.init(options)
			this.fetchBillsInfo()
		},
		onShow() {
			if (this.canReset) {
				this.bank = this.$util.getBackParams('bank')
				if (this.$isEmpty(this.bank)) {
					this.fetchCardList()
				}
			}
			this.canReset = true
		},
		computed: {
			dealAccountNo() {
				return data => {
					return this.$util.dealAccountNo(data)
				}
			},
			dealBankCodeType() {
				return data => {
					return this.$getBankCodeType(data)
				}
			}
		},
		methods: {
			async fetchBillsInfo() {
				let params = {
					shopId: this.vuex_shopId
				}
				let res=await this.$api.shop.shopBillsInfo(params)
				let dataInfo = res.data
				if (this.type==this.$global.WITHDRAW_TYPE.BALANCE_WITHDRAW) {
					this.canWithDraw=dataInfo.balance
					this.withdrawAmount=this.canWithDraw
					this.$refs.amountInput.initialMoney(this.withdrawAmount)
				}else if (this.type==this.$global.WITHDRAW_TYPE.POINT_WITHDRAW) {
					this.canWithDraw=dataInfo.point
				}
			},
			init(options){
				this.type=options.type
				
				if (this.type==this.$global.WITHDRAW_TYPE.BALANCE_WITHDRAW) {
					uni.setNavigationBarTitle({
						title:'余额结算'
					})
					return
				}
				if (this.type==this.$global.WITHDRAW_TYPE.POINT_WITHDRAW) {
					uni.setNavigationBarTitle({
						title:'积分提现'
					})
					return
				}
			},
			async fetchShopDetail() {
				let params = {
					id: this.vuex_shopId
				}
				let data = (await this.$api.shop.detail(params)).data
				this.canWithDraw = data.balance
			},
			fetchCardList() {
				let params = {
					merchantNo: this.vuex_merchantNo
				}
				this.$api.yeepay.withdrawCardQuery(params).then(res => {
					let result = JSON.parse(res.data.result)
					this.bank = result.bankCardAccountList[0]
				})
			},
			change(e) {
				if (!e) {
					this.withdrawAmount = 0
				} else {
					this.withdrawAmount = e
				}
			},
			show() {
				if (this.type==this.$global.WITHDRAW_TYPE.POINT_WITHDRAW) {
					this.$refs.amountInput.show()
				}else{
					this.$refs.toast.info('不可修改结算金额')
				}
			},
			//全部提现
			allWithdraw() {
				this.withdrawAmount = this.canWithDraw
				this.$refs.amountInput.initialMoney(this.withdrawAmount)
			},
			//防抖提现
			debounceWithdraw() {
				if (this.isFirst) {
					this.withdrawConfirm()
					this.isFirst = false
				} else {
					this.$u.debounce(this.withdrawConfirm, 500)
				}
			},
			async withdrawConfirm() {
				if (this.$isEmpty(this.bank)) {
					this.$u.toast('请选择银行')
					return
				}
				let params={
					ownerType:'商户',
					ownerId:this.vuex_shopId,
					price:this.withdrawAmount,
					bankAccountType:this.bank.bankCardType,
					bankCode:this.bank.bankCode,
					receiverAccountName:this.bank.accountName,
					receiverAccountNo:this.bank.accountNo,
					userBankId:this.bank.bindCardId,
					receiveType:'REAL_TIME'
				}
				let res={}
				if (this.type==this.$global.WITHDRAW_TYPE.POINT_WITHDRAW) {
					res=await this.$api.withdraw.userPointWithdraw(params)
				}
				
				if (this.type==this.$global.WITHDRAW_TYPE.BALANCE_WITHDRAW) {
					res=await this.$api.withdraw.userBalanceWithdraw(params)
				}
				if (this.$isEmpty(res.data)) {
					this.$refs.toast.error('操作失败')
				}
				let payOrderParams={
					orderId:res.data,
					orderType:'orderType'
				}
				let resp={}
				if (this.type==this.$global.WITHDRAW_TYPE.POINT_WITHDRAW) {
					resp=await this.$api.withdraw.pointPayOrder(payOrderParams)
				}
				if (this.type==this.$global.WITHDRAW_TYPE.BALANCE_WITHDRAW) {
					resp=await this.$api.withdraw.balancePayOrder(payOrderParams)
				}
				if (resp.success && this.$isNotEmpty(resp.data)) {
					this.withdrawId=resp.data
					this.$refs.toast.info('已提交申请，请耐心等待')
					// this.$refs.loading.showLoading('处理中')
					// this.check()
				}
			},
			doWithdraw() {
				if (this.$isEmpty(this.withdrawPassword)) {
					this.$u.toast('请输入提现密码')
					this.passwordShow = true
					return
				}
				console.log(md5Libs.md5(this.withdrawPassword));
			},
			check(){
				let _this=this
				let timer= setInterval(async ()=>{
					_this.count++
					let params={
						id:_this.withdrawId
					}
					let res=await _this.$api.withdraw.detail(params)
					if (res.data && res.data.withdrawStatus == 'DONE') {
						this.fetchBillsInfo()
						this.$refs.toast.info('操作成功')
						_this.$refs.loading.hide()
						clearInterval(timer)
					}
					if (_this.count == 5) {
						this.$refs.toast.info('已提交申请，请耐心等待')
						_this.$refs.loading.hide()
						clearInterval(timer)
					}
				},1000)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.bank {
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 44rpx;
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;

			image {
				width: 90rpx;
				height: 90rpx;
				margin-right: 20rpx;
			}

			.content {
				display: flex;
				flex-direction: column;

				text:first-child {
					color: #252525;
					font-weight: 800;
					font-size: 34rpx;
				}

				text:last-child {
					margin-top: 15rpx;
					color: #888888;
					font-size: 26rpx;
				}
			}
		}
	}

	.card_add {
		border-radius: 20rpx;
		padding: 40rpx 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.btn-withdraw {
		position: absolute;
		right: -30rpx;
		top: 26rpx;

		.btn {
			padding: 16rpx 38rpx;
			background-color: #FFE6CD;
			color: $base-color;
		}
	}

	.card {
		overflow: hidden;
		position: relative;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 40rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 36rpx;
			font-weight: 800;
			margin-bottom: 30rpx;
		}

		.input {
			display: flex;
			border-bottom: 1rpx solid #DFDFDF;

			.withdraw-btn {
				background-color: #FFFFFF;
				color: $base-color;
				border: 1rpx solid $base-color;
				height: 52rpx;
				width: 170rpx;
				font-size: 28rpx;
				line-height: 54rpx;
			}
		}

		.canWithdraw {
			flex-direction: column;
			display: flex;
			margin-top: 24rpx;
			color: #252525;
		}

		.rate {
			margin-top: 40rpx;

			.item {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				text:first-child {
					color: #252525;
				}

				text:last-child {
					color: #999999;
				}
			}
		}


	}

	.submit-btn {
		background-color: $base-color;
		color: #FFFFFF;
		border-radius: 10rpx;
	}

	.popup-content {
		height: 100%;
		padding: 50rpx 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;


		.popup-title {
			font-size: 38rpx;
			font-weight: 800;
		}

		.popup-desc {
			margin-top: 50rpx;
			color: #666666;
			display: flex;
			flex-direction: column;

			text {
				line-height: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.cusor {
		margin-left: 10rpx;
		width: 6rpx;
		border-radius: 20rpx;
		height: 60%;
		background-color: $base-color;
		animation: blink 1200ms infinite ease-in-out;
	}

	@keyframes blink {
		from {
			opacity: 0;
		}
	}
</style>