shop_h5/pages/vip/distribution/withdraw.vue

<template>
	<view class="whole">
		<view class="oneBox">
			<view class="tit">可提现金额（元）</view>
			<view class="ac"><text>¥</text>{{can_amount}}</view>
		</view>
		<view class="twoBox">
			<view class="cont">
				<view class="tit">提现金额</view>
				<view class="acBox flex1">
					<view class="flex">
						<view class="prefix">¥</view>
						<input type="text" v-model="amount" placeholder="满1.01可提现" placeholder-style="font-size: 28rpx;" class="inpt"/>
					</view>
					<view class="red" @click="allIn">全部提现</view>
				</view>
				<view class="text flex1">
					<view>提现至</view>
					<view class="flex">{{bank_name}}({{card_id}})</view>
				</view>
				<view class="tips">提现固定收取1元手续费</view>
				<view class="btn flex" :class="is_can ? '' : 'dis'" @click="toTixian">{{is_can ? '申请提现' : '提现中...'}}</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast } from '@/components/common.js'
	
	export default {
		setup() {
			const data = reactive({
				can_amount: '',
				Color: uni.getStorageSync('theme_color'),
				amount: '',
				loading: false,
				bank_name: '',
				card_id: '',
				is_can: true,
				Status: {
					'0': '提现中',
					'1': '提现成功',
					'2': '提现失败',
					'3': '待发起提现'
				}
			})
			
			function toTixian() {
				if(data.is_can) {
					if(data.can_amount * 100 == 0) {
						showToast('没有可提现的金额')
						return
					} else if(data.amount * 100 == 0) {
						showToast('提现金额不正确')
						return
					}
					if(data.loading) {
						return
					}
					uni.showLoading({
						title: '正在提交...',
						mask: true
					})
					data.loading = true
					post(`/api/v1/sales/distributor/withdraw`, {amount: data.amount}).then((res) => {
						uni.hideLoading()
						showToast('申请提交成功', 'success')
						data.loading = false
						setTimeout(() => {
							uni.navigateBack({delta: 1})
						}, 500)
					}).catch((err) => {
						console.log(err)
						showToast(JSON.stringify(err))
						uni.hideLoading()
						data.loading = false
					})
				}
			}
			
			function allIn() {
				if(data.can_amount * 100 == 0) {
					showToast('没有可提现的金额')
					return
				}
				data.amount = data.can_amount
			}
			
			function getInfo() {
				get(`/api/v1/sales/distributor/show`).then((res) => {
					data.can_amount = res.data.amount
					data.bank_name = res.data.bank_name
					data.card_id = res.data.card_id.slice(-4)
					data.is_can = res.data.account && res.data.account.withdraw_status != 1
				})
			}
			
			return {
				...toRefs(data),
				toTixian,
				getInfo,
				allIn
			}
		},
		async onLoad(options) {
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.oneBox{
		padding: 80rpx 30rpx 160rpx;
		background-color: v-bind('Color');
		.tit{
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}
		.ac{
			font-weight: 600;
			font-size: 60rpx;
			color: #fff;
			margin-top: 30rpx;
			line-height: 1;
			text{
				font-size: 30rpx;
			}
		}
	}
	.twoBox{
		position: relative;
		z-index: 2;
		margin-top: -100rpx;
		padding: 0 30rpx;
		.cont{
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 24rpx 24rpx 50rpx;
			box-sizing: border-box;
			color: #333;
			font-size: 28rpx;
			.tit{
				font-size: 30rpx;
			}
			.acBox{
				border-bottom: 1rpx solid #e8e8e8;
				margin: 40rpx 0;
				padding-bottom: 10rpx;
				.prefix{
					font-size: 50rpx;
				}
				.inpt{
					padding-left: 20rpx;
					font-size: 50rpx;
					width: 300rpx;
				}
				.red{
					color: #F56C6C;
				}
			}
			.tips{
				color: #F56C6C;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
			.btn{
				margin-top: 80rpx;
				width: 100%;
				height: 80rpx;
				border-radius: 80rpx;
				font-size: 30rpx;
				color: #fff;
				background-color: v-bind('Color');
				&.dis{
					opacity: 0.7;
				}
			}
		}
	}
	.threeBox{
		padding: 24rpx;
		.item{
			border-radius: 8rpx;
			background-color: #fff;
			font-size: 28rpx;
			margin-bottom: 24rpx;
			.sn{
				border-bottom: 1rpx solid #f5f5f5;
				padding: 24rpx;
			}
			.box{
				padding: 24rpx;
				.ac{
					font-size: 30rpx;
					text{
						font-weight: 600;
						color: v-bind('Color');
					}
				}
			}
			.time{
				font-size: 24rpx;
				color: #666;
				margin-top: 20rpx;
			}
			.text0{
				color: #f90;
			}
			.text1{
				color: #07c160;
			}
			.text2{
				color: #f00;
			}
			.text3{
				color: #999;
			}
		}
	}
</style>