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.bankType?'/static/bank/'+bank.bankType+'.png':''" mode=""></image>
				<view class="content">
					<text>{{bank.bankTypeLabel}}</text>
					<text>{{bank.cardNo}}</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">提现金额</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"></view>
				</view>
				<view @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-price margin-left-20" style="font-size: 34rpx;">{{canWithDraw}}</text>
			</view>
			<view class="rate">
				<view class="item">
					<text>服务费</text>
					<text class="text-price">0.10</text>
				</view>
				<view class="item">
					<view class="">
						<text>费率</text>
						<text @click="rateShow=true" class="cuIcon-question margin-left-10 text-lg"></text>
					</view>
					<text class="">0.05%</text>
				</view>
			</view>
			
			<view @click="$jump('/pages/withdraw/records')" class="btn-withdraw">
				<view class="cu-btn round sm btn" style="font-size: 26rpx;">
					提现记录
				</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="确认提现" btnColor="#ff9900" @change="change"
			@confirm="withdrawConfirm"></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>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	import amountInput from '@/components/amountInput/amountInput.vue';
	export default {
		components: {
			amountInput
		},
		data() {
			return {
				rateShow: false,
				bank: {},
				//可提现
				canWithDraw: '',
				//提现金额
				withdrawAmount: 0,
				//提现密码
				withdrawPassword:'',
				passwordShow:false,
			};
		},
		onLoad() {
			this.fetchCardList()
			this.fetchShopDetail()
		},
		onShow() {
			if (this.canReset) {
				this.bank = this.$util.getBackParams('bank')
				if (this.$isEmpty(this.bank)) {
					this.fetchCardList()
				}
			}
			this.canReset = true
		},
		methods: {
			async fetchShopDetail() {
				let params = {
					id: this.vuex_shopId
				}
				let data = (await this.$api.shop.detail(params)).data
				this.canWithDraw = data.balance
			},
			fetchCardList() {
				let params = {
					userId: this.vuex_shopId,
					size: 10
				}
				this.$api.userBank.appList(params).then(res => {
					this.bank = res.data.records[0]
				})
			},
			change(e) {
				if (!e) {
					this.withdrawAmount = 0
				} else {
					this.withdrawAmount = e
				}
			},
			show() {
				this.$refs.amountInput.show()
			},
			//全部提现
			allWithdraw(){
				this.withdrawAmount=this.canWithDraw
				this.$refs.amountInput.initialMoney(this.withdrawAmount)
			},
			withdrawConfirm(){
				if (this.$isEmpty(this.bank)) {
					this.$u.toast('请选择银行')
					return
				}
			},
			doWithdraw(){
				if (this.$isEmpty(this.withdrawPassword)) {
					this.$u.toast('请输入提现密码')
					this.passwordShow=true
					return
				}
				console.log(md5Libs.md5(this.withdrawPassword));
			}
		}
	};
</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: #EF9944;
		}
	}

	.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: #EE9230;
				border: 1rpx solid #EE9230;
				height: 54rpx;
				width: 180rpx;
				font-size: 28rpx;
				line-height: 54rpx;
			}
		}

		.canWithdraw {
			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: #EE9230;
		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: #ff9900;
		animation: blink 1200ms infinite ease-in-out;
	}

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