yuezhilian-c/src/packages/user/fund/withdraw.vue

<template>
	<view class="apply-box">
		<Navbar title="提出" background-color="#fff" color="#333"></Navbar>
		<view class="container">
			<view class="withdraw">
				<!-- <view class="service-charge">
					{{charges || ""}}
				</view> -->
				<view class="title">请输入金额（元）每日可提1次，每次最低100。</view>
				<view class="num">
					<!-- <image :src="static ? static + 'diamonds.png' : ''" class="img" mode="widthFix"></image> -->
					<input type="number" class="input" placeholder="点击输入" v-model="num">
				</view>
				<view class="total">
					<view class="left">
						可提出金额：{{balance}}元
					</view>
					<view class="right" @click="handleAll">
						全部
					</view>
				</view>
			</view>
			<view class="type">
				<view class="left">收款账户</view>
				<view class="right" @click="handleSelect">
					{{currentType ? typeMap[currentType] : '未选择'}}
					<IconText :code="`\ue84a`" color="#999" class="icon" :size="12"></IconText>
				</view>
			</view>
			<!-- <view class="code" v-if="currentType === 1 || currentType === 2">
				<view class="top">
					收款人姓名<view class="text" @click="toCode">{{name || '未录入'}}
						<Icon :code="`\ue75d`" color="#999" class="icon" :size="12"></Icon>
					</view>
				</view>
				<image v-if="codePic" :src="codePic" class="img" mode="widthFix"></image>
				<view class="empty-img" v-else>

				</view>
			</view>
			<view class="card" v-if="currentType === 3">
				<view class="add" @click="toCard" v-if="!datumInfo.bank_card">
					<Icon :code="`\ue64e`" color="#333" class="icon" :size="40"></Icon>
					添加提现银行卡
				</view>
				<view class="card-info" v-else>
					<view class="top">
						<text>{{datumInfo.bank}}</text>
						<text>{{datumInfo.bank_card | cardFormat}}</text>
					</view>
					<view class="bottom">
						<view class="update" @click="updateCard">
							<Icon :code="`\ue6c3`" color="#333" class="icon" :size="40"></Icon>
							更换
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="record" @click="toRecord">
				寄售记录
			</view> -->
		</view>
		<view class="bottom-btn-box">
			<view class="bottom-btn" @click="handleWithdraw">确认提交</view>
		</view>
		<uni-popup ref="type" type="center">
			<view class="select-type">
				<view class="title">
					选择寄售方式
				</view>
				<view class="type-list">
					<view class="item" v-for="item in typeList" :key="item.value" @click="changeType(item.value)">
						{{item.label}}
						<!-- <view class="" v-if="item.value === type"> -->
						<Icon :code="`\ue754`" :color="item.value === type ? '#FFDE4C' : '#DEDEDE'" class="icon"
							:size="16"></Icon>
						<!-- </view> -->
					</view>
				</view>
				<view class="btn-box" @click="confirmSelect">
					确定
				</view>
			</view>
		</uni-popup>
		<Password ref="password" @finish="passwordFinish"></Password>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	import {
		OSS_STATIC
	} from '@/common/constants';
	import {
		namespace,
	} from 'vuex-class';
	import {
		types
	} from '@/common/store';
	const baseModule = namespace('base');
	@Component({
		filters: {
			cardFormat(val: any) {
				if (!+val) return '****';
				let format = val.substring(val.length - 4);
				return '****' + format;
			}
		}
	})
	export default class Apply extends Vue {
		@baseModule.Mutation(types.SET_USERINFO) setUserInfo: any;
		@baseModule.Getter('_userInfo') userInfo: any;
		static: string = OSS_STATIC;
		num: any = null;
		type: any = null;
		codePic: string = "";
		name: string = "";
		datumInfo: any = {};
		currentType: any = null;
		charges: any = 0;
		typeList: any = [{
				label: '微信收款',
				value: 1,
			},
			{
				label: '支付宝收款',
				value: 2,
			},
			{
				label: '银行卡收款',
				value: 3,
			}
		];
		typeMap: any = {
			1: '微信收款',
			2: '支付宝收款',
			3: '银行卡收款'
		};
		balance: any = null;
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#000000', //文字颜色
				backgroundColor: '#000000' //底部背景色
			});
		}
		onShow() {
			this.currentType = +uni.getStorageSync('currentType') || null;
			this.getUserInfo();
			this.getBalance();
		}
		getUserInfo() {
			uni.showLoading({
				title: '加载中',
			});
			this.$http.get({
				url: this.$api.getUserInfo,
				data: {}
			}).then((res: any) => {
				uni.hideLoading();
				this.setUserInfo({
					...res,
					...res.info
				});
			})
		}
		getBalance() {
			uni.showLoading({
				title: '加载中',
			});
			this.$http.get({
				url: this.$api.getBalance,
				data: {}
			}).then((res: any) => {
				this.balance = res.balance;
				this.setInfo(this.type);
				uni.hideLoading();
			})
		}
		handleAll() {
			this.num = this.balance;
		}
		changeType(type: any) {
			this.type = type;
		}
		setInfo(type: any) {
			if (type === 1) {
				this.name = this.datumInfo.wx_name;
				this.codePic = this.datumInfo.wx_pic;
			} else if (type === 2) {
				this.name = this.datumInfo.zfb_name;
				this.codePic = this.datumInfo.zfb_pic;
			} else {
				this.name = "";
				this.codePic = "";
			}
		}
		confirmSelect() {
			this.currentType = this.type;
			this.setInfo(this.currentType);
			(this.$refs.type as any).close();
		}
		handleSelect() {
			// this.type = this.currentType;
			// (this.$refs.type as any).open('bottom');
			this.$Router.push({
				path: '/packages/user/fund/withdraw-type',
			})
		}
		handleWithdraw() {
			if (!this.num) {
				uni.showToast({
					icon: 'none',
					title: '请填写金额'
				})
				return;
			}
			if (!this.currentType) {
				uni.showToast({
					icon: 'none',
					title: '请先选择方式'
				})
				return;
			}
			(this.$refs.password as any).open();
		}
		passwordFinish(val: any) {
			this.withDraw(val);
		}
		withDraw(safe: any) {
			uni.showLoading({
				title: '加载中',
			});
			this.$http.post({
				url: this.$api.withdraw,
				data: {
					balance: +this.num,
					way: this.currentType,
					safe: safe,
				}
			}).then(() => {
				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					title: '申请成功'
				});
			})
		}
		toRecord() {
			this.$Router.push({
				path: '/pages/withdraw/record',
			})
		}
		toCard() {
			this.$Router.push({
				path: '/pages/withdraw/card',
			})
		}
		updateCard() {
			this.$Router.push({
				path: '/pages/withdraw/card',
				query: {
					card: this.datumInfo.bank_card,
					bank: this.datumInfo.bank,
					name: this.datumInfo.bank_name
				}
			})
		}
		toCode() {
			this.$Router.push({
				path: '/pages/withdraw/code',
				query: {
					type: this.currentType,
					name: this.name,
					pic: this.codePic
				}
			})
		}
	}
</script>
<style lang="scss" scoped>
	.apply-box {
		background: #F8F8F8;
		min-height: 100vh;
		padding-bottom: vw(80);
		box-sizing: border-box;

		.container {
			width: 100%;
			padding: 0 vw(10);
			@include flex-y();
			box-sizing: border-box;
		}

		.withdraw {
			width: 100%;
			background: #fff;
			margin-top: vw(10);
			border-radius: vw(10);
			overflow: hidden;
			
			.service-charge{
				height: vw(24);
				@include flex-x(center);
				background: linear-gradient(115.71deg, rgba(219, 230, 252, 1) 0%, rgba(250, 237, 250, 1) 100%);
				@include word-vw(12, #F07F90);
			}

			.title {
				height: vw(40);
				line-height: vw(40);
				padding: 0 vw(14);
				@include word-vw(12, #333);
			}

			.num {
				height: vw(80);
				border-top: vw(1) solid #F8F8F8;
				border-bottom: vw(1) solid #F8F8F8;
				@include flex-x(flex-start, center);
				padding: 0 vw(8);

				.img {
					width: vw(32);
				}

				.input {
					font-size: vw(20);
					margin-left: vw(20);
				}
			}

			.total {
				height: vw(40);
				line-height: vw(40);
				padding: 0 vw(14);
				@include flex-x(space-between);

				.left {
					@include word-vw(13, #B0ACAC);
				}

				.right {
					@include word-vw(13, #FA6C28);
				}
			}
		}

		.type {
			height: vw(64);
			width: 100%;
			margin-top: vw(10);
			background: #fff;
			border-radius: vw(5);
			padding: 0 vw(14);
			box-sizing: border-box;
			@include flex-x(space-between);

			.left {
				@include word-vw(16, #333);
				font-weight: 600;
			}

			.right {
				@include word-vw(16, #999);
				@include flex-x();

				.icon {
					margin-left: vw(3);
				}
			}
		}

		.code {
			width: 100%;
			height: vw(280);
			background: #fff;
			@include flex-y(center);
			margin-top: vw(1);

			.top {
				@include word-vw(14, #333);
				@include flex-x();

				.text {
					@include word-vw(14, #999);
					margin-left: vw(8);
					@include flex-x();

					.icon {
						margin-left: vw(1);
					}
				}
			}

			.img {
				width: vw(148);
				height: vw(148);
				margin-top: vw(24);
			}

			.empty-img {
				width: vw(148);
				height: vw(148);
				margin-top: vw(24);
				background: #E8E8E8;
			}
		}

		.card {
			width: 100%;
			height: vw(180);
			background: linear-gradient(115.71deg, rgba(219, 230, 252, 1) 0%, rgba(250, 237, 250, 1) 100%);
			border-radius: vw(8);
			margin-top: vw(10);
			@include flex-x(center);

			.add {
				@include word-vw(14, #333);
				@include flex-y();

				.icon {
					margin-bottom: vw(8);
				}
			}

			.card-info {
				height: 100%;
				width: 100%;
				padding: vw(12) vw(24);
				box-sizing: border-box;
				@include flex-y(space-between);

				.top {
					width: 100%;
					@include flex-x(space-between);
				}

				.bottom {
					width: 100%;
					@include flex-x(flex-end);

					.update {
						@include flex-y(space-between);

						.icon {
							margin-bottom: vw(8);
						}
					}
				}
			}
		}

		.record {
			width: 100%;
			text-align: center;
			@include word-vw(12, #807E7E);
			margin-top: vw(20);
			text-decoration: underline;
		}

		.bottom-btn-box {
			height: vw(70);
			width: 100%;
			background: #fff;
			@include flex-x(center);
			position: fixed;
			bottom: 0;

			.bottom-btn {
				width: vw(335);
				height: vw(50);
				background: $btn-color;
				border-radius: vw(10);
				@include word-vw(16, #fff);
				@include flex-x(center);
			}
		}
	}

	.select-type {
		height: vw(280);
		background: #fff;
		border-top-left-radius: vw(10);
		border-top-right-radius: vw(10);
		@include flex-y();

		.title {
			height: vw(54);
			line-height: vw(54);
			text-align: center;
			@include word-vw(14, #999);
		}

		.type-list {
			flex: 1;
			width: 100%;
			@include flex-y(center);

			.item {
				height: vw(48);
				width: 100%;
				padding: 0 vw(24);
				box-sizing: border-box;
				@include flex-x(space-between);
			}
		}

		.btn-box {
			width: 100%;
			height: vw(56);
			@include flex-x(center);
			border-top: vw(1) solid #DEDEDE;
		}
	}
</style>