store-new/pagesA/pages/del-withdrawal/del-withdrawal.vue

<template>
	<view class="widthdraw flexCC">
		<view class="bank_box flexB" @click="editAccount">
			<view class="flexS">
				<image src="../../../static/imgs/shop/bank.png" class="bank_icon"></image>
				<view class="bank_info" v-if="bank.account_bank">
					<view>{{ bank.account_bank }}</view>
					<text>{{ bank.account_number }}</text>
				</view>
				<view v-else style="font-size:32rpx;color:#999">添加银行卡</view>
			</view>
			<view class="change_box">
				<text v-if="bank.account_bank">可修改</text>
				<text class="iconfont iconiconfontjiantou2"></text>
			</view>
		</view>
		<view class="money_box">
			<view class="title">提现金额</view>
			<view class="inp flexS">
				<text>¥</text>
				<input type="digit" placeholder="请输入提现金额" v-model="amount" />
			</view>
			<view class="bottom">
				<text>可提现{{ this.blanceFmt(limit)}}元</text>
				<text class="all" @click="allWithdrawal">全部提现</text>
			</view>
			<view class="widthdraw_box">
				<view class="sub_btn" @click="withdraw">立即提现</view>
				<view class="widthdraw_hint">提现金额一般在第二天到账（遇节假日可能顺延）</view>
			</view>
		</view>
		<view class="pop flexCC" v-if="showPop">
			<view class="pop_con">
				<image src="../../../static/imgs/shop/hint_icon.png" class="hint_icon"></image>
				<view class="title">特别提醒</view>
				<view class="con">
					您还有订单未处理完，请先完成订单。然后，尽快进行提现。
				</view>
				<view class="sub_btn" @click="skipOrder">查看订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		withdraw,
		getBankInfo,
		getAccount,
		getNoFinishOrder
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				amount: '', //提现金额
				limit: '', //可提现金额
				isAll: false, //是否全部提现
				bank: '', //银行卡信息
				isOpare: true,
				showPop: false, //显示未处理完订单弹窗
				orderNum: 0, //未处理订单数量
			};
		},
		onShow() {
			uni.hideHomeButton();
			this.getOrder();
		},
		methods: {
			//获取未处理的订单
			getOrder() {
				getNoFinishOrder({
					page_index: 1,
					page_size: 6
				}).then(res => {
					if (res.code == 200) {
						this.orderNum = res.data.total
						//如果还有存在订单
						this.getAccount()
						this.getBank();
						if (res.data.total > 0) {
							this.showPop = true
							return false
						}
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						})
					}
				})
			},
			//跳转到待处理订单页面
			skipOrder() {
				this.showPop = false
				uni.navigateTo({
					url: '../order-pending/order-pending'
				})
			},
			/*获取账户信息*/
			getAccount() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				getAccount().then(res => {
					if (res.code == 200) {
						const {
							available_amount,
							pending_amount
						} = res.data
						this.limit = available_amount;
						//如果没有存在订单
						if (this.orderNum === 0 && available_amount === 0 && pending_amount === 0) {
							uni.reLaunch({
								url: '../login-fail/login-fail?hint=' + '你已被系统删除'
							})
						}
					} else {
						uni.showModal({
							content: res.data || '获取信息失败',
							showCancel: false
						});
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			blanceFmt(val) {
				//分转化为元
				var num = Number(val);
				if (!num) {
					//等于0
					return num + '.00';
				} else {
					//不等于0
					num = Math.round(num * 100) / 10000;
					num = num.toFixed(2);
					num += ''; //转成字符串
					var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g; //千分符的正则
					return num.replace(reg, '$1,'); //千分位格式化
				}
			},
			/*获取银行卡信息*/
			getBank() {
				getBankInfo().then(res => {
					if (res.code == 200) {
						this.bank = res.data;
					} else {
						uni.showModal({
							content: res.data || '获取银行卡信息失败',
							showCancel: false
						});
					}
				});
			},
			/*选择银行卡*/
			changeBank() {
				uni.navigateTo({
					url: '../card-manage/card-manage'
				});
			},
			/*全部提现*/
			allWithdrawal() {
				this.amount = this.blanceFmt(this.limit);
			},
			//提现按钮
			withdraw() {
				//提现之前先确定下是否有未处理订单
				getNoFinishOrder({
					page_index: 1,
					page_size: 6
				}).then(res => {
					if (res.code == 200) {
						this.orderNum = res.data.total
						//如果还有存在订单
						if (res.data.total > 0) {
							this.showPop = true
						}
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						})
					}
				})
				if (!this.bank.account_bank) {
					uni.showModal({
						content: '请先添加银行卡',
						showCancel: false
					});
					return false;
				}
				if (!this.isOpare) {
					uni.showModal({
						content: '操作频繁，稍后再试~',
						showCancel: false
					});
					return false;
				}
				if (!this.amount || this.amount == 0) {
					uni.showModal({
						content: '请先输入提现金额',
						showCancel: false
					});
					return false;
				}
				if (this.amount > Number(this.limit)) {
					uni.showModal({
						content: '超出可提现金额',
						showCancel: false
					});
					return false;
				}
				this.isOpare = false;
				uni.showLoading({
					title: '提现中...'
				});
				withdraw({
						amount: this.amount
					})
					.then(res => {
						if (res.code == 200) {
							uni.showModal({
								content: '提交成功！',
								showCancel: false,
								success: res => {
									if (res.confirm) {
										this.amount = ''
										this.getOrder()
									}
								}
							});
						} else {
							uni.showModal({
								content: res.data || '提现失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						this.isOpare = true;
						uni.hideLoading();
					})
					.finally(() => {
						uni.hideLoading();
						setTimeout(() => {
							this.isOpare = true;
						}, 2000);
					});
			},
			/*修改银行账户信息*/
			editAccount() {
				let type = this.bank.account_number ? 1 : 0;
				uni.navigateTo({
					url: '../edit-card/edit-card?type=' + type
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.widthdraw {
		width: 100%;
		min-height: 100%;
		background: #f9f9fb;
		padding-top: 30rpx;

		.bank_box {
			width: 100%;
			height: 152rpx;
			background: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;

			.bank_icon {
				width: 84rpx;
				height: 84rpx;
				margin-right: 20rpx;
			}

			.bank_info {
				view {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 28rpx;
					color: #999;
				}
			}

			.change_box {
				text {
					font-size: 32rpx;
					color: #999;
				}

				.iconfont {
					vertical-align: -2rpx;
				}
			}
		}

		.money_box {
			width: 100%;
			flex: 1;
			margin-top: 20rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding: 20rpx 0 40rpx;
			}

			.inp {
				background: #f8f8f8;
				height: 86rpx;
				border-radius: 8rpx;

				text {
					font-size: 50rpx;
					font-weight: bold;
					margin: 0 20rpx;
				}

				input {
					width: 90%;
					height: 100%;
				}
			}

			.bottom {
				margin-top: 30rpx;

				text {
					font-size: 32rpx;
					color: #999;
				}

				.all {
					margin-left: 30rpx;
					color: $base-color;
					font-weight: bold;
				}
			}

			.widthdraw_box {
				margin-top: 120rpx;

				.widthdraw_hint {
					text-align: center;
					margin-top: 20rpx;
					color: #2675ff;
					font-weight: bold;
				}
			}
		}
	}

	.pop {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;

		.hint_icon {
			width: 183rpx;
			height: 135rpx;
			position: relative;
			margin-top: -85rpx;
		}

		.pop_con {
			width: 648rpx;
			height: 442rpx;
			background: #fff;
			border-radius: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 22rpx;
			}

			.con {
				min-height: 150rpx;
				margin: 20rpx 0 20rpx;
				font-size: 34rpx;
				color: $base-color;
			}

		}
	}

	// .width {
	// 	width: 690rpx;
	// 	margin: 0 auto;
	// 	.bg {
	// 		margin: 5vh auto 0;
	// 		position: relative;
	// 		image {
	// 			width: 690rpx;
	// 			height: 390rpx;
	// 		}
	// 		.bg_con {
	// 			position: absolute;
	// 			top: 20rpx;
	// 			left: 30rpx;
	// 			width: 94%;
	// 			text,
	// 			view {
	// 				color: #fff;
	// 			}
	// 			.hint {
	// 				font-size: 28rpx;
	// 			}
	// 			.price {
	// 				padding: 20rpx 0 30rpx;
	// 				text:first-child {
	// 					font-size: 56rpx;
	// 				}
	// 				text:last-child {
	// 					font-size: 80rpx;
	// 				}
	// 			}
	// 			.edit_btn {
	// 				width: 260rpx;
	// 				text-align: center;
	// 				height: 68rpx;
	// 				font-size: 30rpx;
	// 				line-height: 68rpx;
	// 				background: #ffec8e;
	// 				color: $base-color;
	// 				border-radius: 38rpx;
	// 			}
	// 		}
	// 	}
	// 	.widthdrawal {
	// 		.title {
	// 			font-size: 32rpx;
	// 			font-weight: bold;
	// 			margin: 0 0 30rpx;
	// 		}
	// 		.inp {
	// 			background: #f8f8f8;
	// 			height: 86rpx;
	// 			border-radius: 8rpx;
	// 			text {
	// 				font-size: 36rpx;
	// 				margin: 0 20rpx;
	// 			}
	// 			input {
	// 				width: 90%;
	// 				height: 100%;
	// 			}
	// 		}
	// 		.bank_info {
	// 			view {
	// 				font-size: 28rpx;
	// 				margin-top: 15rpx;
	// 			}
	// 		}
	// 		.all {
	// 			margin: 30rpx 0;
	// 		}
	// 		.way {
	// 			.iconfont,
	// 			image {
	// 				vertical-align: middle;
	// 			}
	// 			image {
	// 				margin: 0 10rpx;
	// 			}
	// 		}
	// 	}
	// 	.opera {
	// 		margin-top: 165rpx;
	// 		text-align: center;
	// 		.gray {
	// 			margin-top: 30rpx;
	// 		}
	// 	}
	// }
</style>