liedou_uniapp/pages/subPackages/my/alipayWithdr...

<template>
	<view>
		<u-navbar class="navbar-wrap" :is-back="true" title="支付宝提现" :background="background" title-color="#ffffff" back-icon-color="#ffffff" />
		<!-- 支付宝账号信息 -->
		<!-- <view class="alipayInfo" @click="goBindAlipayPage()">
			<view class="info">
				<image class="alipayImg" src="https://ld.726p.com/ldyx_static/imgs/alipay_icon.png" mode="widthFix"></image>
				<view>
					<view class="alipayInfoItem">
						<view class="label">真实姓名</view>
						<view class="value">{{alipayGetMoney.real_name || '-'}}</view>
					</view>
					<view class="alipayInfoItem">
						<view class="label">支付宝账号</view>
						<view class="value">{{alipayGetMoney.alipay_account || '-'}}</view>
					</view>
				</view>
			</view>
			<image class="rightArrow" src="https://ld.726p.com/ldyx_static/imgs/rightArrow.png" mode="widthFix"></image>
		</view> -->
		<!-- 提现 -->
		<view class="alipayBlock">
			<view class="title">提现金额</view>
			<view class="alipayInput">
				<text>¥</text>
				<input class="input" v-model="money" type="digit" focus placeholder="请输入金额" placeholder-style="font-size:32rpx"/>
			</view>
			<view class="alipayOperation">
				<text class="balance">可提现余额：{{alipayGetMoney.can_use_money || '-'}}</text>
				<view class="allWithdrawButton" @click="onClickWithdraw()">全部提现</view>
			</view>
		</view>
		<view class="hint"><text>*48小时内办理入账</text><text>*用户提现个税自理</text></view>
		<button class="withdrawButton" type="default" @click="onClickWithdrawButton()">申请提现</button>
		<view class="txButton">每月25日可提现上个月已结算佣金</view>
		<!-- 服务商 -->
		<serviceProvider :show="showService" @close="showService=false" hint="关于支付宝问题，请联系服务商！"></serviceProvider>
	</view>
</template>

<script>
	const app = getApp()
	import serviceProvider from '@/components/serviceProvider.vue'
	export default {
		components:{
			serviceProvider
		},
		data() {
			return {
				background: app.globalData.navbarBackground,
				alipayGetMoney: {},
				money: '',
				showService: false
			}
		},
		onShow() {
		  this.getAlipayGetMoney()
		},
		methods: {
			// 获取已绑定支付宝信息
			async getAlipayGetMoney(){
				try {
				  const url = this.$api.users_alipayGetMoneyPage
				  const params = {}
				  uni.showLoading({ title: '加载中...', mask: true })
				  const { data: res } = await this.$postJSON(url, params)
				  if (res && res.errno == 0) {
					  this.alipayGetMoney = res.rst.data
					  this.alipayGetMoney.real_name = this.alipayGetMoney.real_name && this.formatName(this.alipayGetMoney.real_name)
					  let alipay_account = this.alipayGetMoney.alipay_account;
					  this.alipayGetMoney.alipay_account = alipay_account && alipay_account.replace(alipay_account.substring(3,7), "****");
				  } else {
				    uni.showToast({ title: res.err || '操作失败', icon: 'none' })
				  }
				} catch (error) {
					uni.showToast({ title: '服务器错误', icon: 'none' })
				} finally {
				  uni.hideLoading()
				}
			},
			// 点击全部提现
			onClickWithdraw(){
				this.money = this.alipayGetMoney.can_use_money;
			},
			// 点击申请提现
			async onClickWithdrawButton(){
				const _this = this;
				if(!this.alipayGetMoney.alipay_account || this.alipayGetMoney.alipay_account == ''){
					uni.showToast({ title: '您还未绑定支付宝', icon: 'none' })
					setTimeout(()=>{
						this.showService = true
					},1000)
					return
				}
				if(this.money <= 0 ){
					uni.showToast({ title: '请正确输入金额', icon: 'none' })
					return
				}
				uni.showModal({
					title: '提示',
					content:`请确认您的支付宝账号：${this.alipayGetMoney.alipay_account}`,
					cancelText: '修改账号',
					confirmText: '确认',
					success: function (res) {
						if (res.confirm) {
							_this.alipayGetMoneyEvent()
						} else if (res.cancel) {
							_this.showService = true
						}
					}
				});

			},
			// 提现接口
			async alipayGetMoneyEvent(){
				try {
				  const url = this.$api.users_alipayGetMoney
				  const params = {
					  money: this.money
				  }
				  uni.showLoading({ title: '加载中...', mask: true })
				  const { data: res } = await this.$postJSON(url, params)
				  uni.hideLoading()
				  if (res && res.errno == 0) {
					  if(res.rst.flag == 1) {//提现成功
						this.money = ''
						this.getAlipayGetMoney()
					  }
					  uni.showToast({ title: res.rst.msg, icon: 'none' })
				  } else {
				    uni.showToast({ title: res.err || '操作失败', icon: 'none' })
				  }
				} catch (error) {
					uni.showToast({ title: '服务器错误', icon: 'none' })
				}
			},
			// 去绑定支付宝账号页面
			goBindAlipayPage(){
				this.showService = true;
			},
			// 名字改为带*的
			formatName(name) {
			    var newStr;
			    if (name.length === 2) {
			        newStr = name.substr(0, 1) + '*';
			    } else if (name.length > 2) {
			        var char = '';
			        for (var i = 0, len = name.length - 2; i < len; i++) {
			            char += '*';
			        }
			        newStr = name.substr(0, 1) + char + name.substr(-1, 1);
			    } else {
			        newStr = name;
			    }
			    return newStr;
			}
		}
	}
</script>

<style scoped lang="scss">
.alipayInfo{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	padding: 20rpx;
	margin: 20rpx 0;
	.info{
		display: flex;
		align-items: center;
		.alipayImg{
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
		}
		.alipayInfoItem{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			line-height: 50rpx;
			.label{
				width: 180rpx;
			}
		}
	}
	.rightArrow{
		width: 30rpx;
		height: 30rpx;
	}
}
.alipayBlock{
	background-color: #FFFFFF;
	padding: 20rpx;
	margin-top: 20rpx;
	.title{
		color: #666;
		font-size: 32rpx;
		line-height: 40rpx;
	}
	.alipayInput{
		display: flex;
		align-items: center;
		font-size: 50rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid #f4f4f4;
		padding: 10rpx 0;
		margin-top: 10rpx;
		.input{
			padding-left: 8rpx;
		}
	}
	.alipayOperation{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		line-height: 50rpx;
		margin-top: 20rpx;
		.allWithdrawButton{
			color: #ef0f2a;
		}
	}
}
.hint{
	font-size: 22rpx;
	line-height: 40rpx;
	text-align: right;
	color: #888;
	padding: 10rpx 20rpx;
	text{
		margin-left: 40rpx;
	}
}
.withdrawButton{
	width: 550rpx;
	line-height: 70rpx;
	background-color: #F52B18;
	font-size: 32rpx;
	color: #FFFFFF;
	text-align: center;
	margin: auto;
	margin-top: 200rpx;
	border-radius: 6rpx;
}
.txButton{
	color: #888;
	font-size: 24rpx;
	text-align: center;
	line-height: 40rpx;
	margin-top: 10rpx;
}
</style>