liedou_uniapp/pages/subPackages/my/bindAlipay.vue

<template>
	<!-- 绑定支付宝 -->
	<view class="page-con">
		<u-navbar class="navbar-wrap" :is-back="true" title="绑定支付宝" :background="background" title-color="#ffffff" back-icon-color="#ffffff" />
		<view class="info">
			<text class="info-title">真实姓名</text>
			<input class="info-input" type="text" v-model="modifyAlipayAccount.real_name" placeholder="请填写姓名" />
		</view>
		<view class="info">
			<text class="info-title">支付宝账号</text>
			<input class="info-input" type="text" v-model="modifyAlipayAccount.alipay_account" placeholder="请填写支付宝账号" />
		</view>
		<view class="info">
			<text class="info-title">手机号码</text>
			<input class="info-input" type="text" v-model="modifyAlipayAccount.phone" placeholder="请填写手机号码" />
		</view>
		<view class="info">
			<text class="info-title">验证码</text>
			<input class="info-input" type="number" v-model="code" placeholder="请填写验证码" />
			<view :class="['yzm', codeTips != '获取验证码' ? 'yzm_active' : '']" @click="getCode()">{{codeTips != '获取验证码' ? codeTips + 's' : codeTips}}</view>
		</view>
		<view class="hint"><u-icon name="volume-up-fill"></u-icon> 若需要佣金提现服务，可录入支付宝账号信息，已录入的账号信息仅用于支付宝打款。</view>
		<button type="default" class="button" @click="modifyNow">{{isBind?'立即修改':'立即绑定'}}</button>
	</view>
</template>

<script>
	const md5 = require('../../../utils/md5')
	const app = getApp()
	export default {
		data() {
			return {
				background: app.globalData.navbarBackground,
				modifyAlipayAccount:{
					real_name:'',
					phone:'',
					alipay_account:''
				},
				codeTips: '获取验证码',
				code:'',
				isBind:true,//默认已经绑定
			}
		},
		onLoad() {
			this.getModifyAlipayAccount({toast:true})
		},
		methods: {
			// 点击立即修改
			async modifyNow () {
				if(!this.modifyAlipayAccount.real_name || this.modifyAlipayAccount.real_name == '') {
					uni.showToast({ title: '请输入真实姓名', icon: 'none' })
					return;
				}
				if(!this.modifyAlipayAccount.alipay_account || this.modifyAlipayAccount.alipay_account == '') {
					uni.showToast({ title: '请输入支付宝账号', icon: 'none' })
					return;
				}
				const regex = /^1[3456789]\d{9}$/;
				if (!regex.test(this.modifyAlipayAccount.phone)){
					uni.showToast({ title: '请输入正确手机号', icon: 'none' })
					return;
				}
				if(!this.code || this.code == '') {
					uni.showToast({ title: '请输入验证码', icon: 'none' })
					return;
				}
				try {
					let url = this.$api.users_modifyAlipayAccountCode;
					if(!this.isBind){// 从未绑定过支付宝，更换接口
						url = this.$api.users_bindAlipayCheckCode;
					}
				  const params = {
					  phone: this.modifyAlipayAccount.phone,
					  code: this.code,
					  alipay_account: this.modifyAlipayAccount.alipay_account,
					  real_name: this.modifyAlipayAccount.real_name
				  }
				  uni.showLoading({ title: '加载中...', mask: true })
				  const { data: res } = await this.$postJSON(url, params)
				  uni.hideLoading()
				  if (res && res.errno == 0) {
					  uni.showToast({ title: res.rst.msg, icon: 'none' })
					  if( res.rst.flag == 1){
						  this.getModifyAlipayAccount({toast:false})
						  this.code = '';
						  this.codeTips = '获取验证码';
						  setTimeout(function(){
							  uni.navigateBack()
						  },2000)
					  }
				  } else {
				    uni.showToast({ title: res.err || '操作失败', icon: 'none' })
				  }
				} catch (error) {
					uni.showToast({ title: '服务器错误', icon: 'none' })
				} 
			},
			// 点击获取验证码
			getCode(){
				if(this.codeTips != '获取验证码') return;// 倒计时不可点击
				this.getSendCode()
			},
			// 获取验证码
			async getSendCode(){
				try {
					const ttl = parseInt((new Date().getTime()) / 1000)
					const secret_key = 'cNHWj7pqBSXTi2DS4uvxqMTzuXOk5xvL'
					const sign = md5.hex_md5(`phone=${this.modifyAlipayAccount.phone}&ttl=${ttl}${secret_key}`)
				  const url = this.$api.users_bindAlipaySendCode
				  const params = {
					  phone: this.modifyAlipayAccount.phone,
					  ttl,
					  sign
				  }
				  uni.showLoading({ title: '加载中...', mask: true })
				  const { data: res } = await this.$postJSON(url, params)
				  if (res && res.errno == 0) {
					  this.codeTips = res.rst.wait_time;
					  this.dTimeout()
				  } else {
				    uni.showToast({ title: res.err || '操作失败', icon: 'none' })
				  }
				} catch (error) {
					uni.showToast({ title: '服务器错误', icon: 'none' })
				} finally {
				  uni.hideLoading()
				}
			},
			// 倒计时
			dTimeout () {
				let djs = setTimeout(()=>{
					if (this.codeTips > 0) {
						this.codeTips = this.codeTips - 1;
						this.dTimeout()
					}else{
						this.codeTips = '获取验证码'
						clearTimeout(djs)
					}
				},1000)
			},
			// 获取绑定支付宝
			async getModifyAlipayAccount({toast}){
				try {
				  const url = this.$api.users_modifyAlipayAccountPage
				  const params = {}
				  toast && uni.showLoading({ title: '加载中...', mask: true })
				  const { data: res } = await this.$postJSON(url, params)
				  if (res && res.errno == 0) {
					  this.modifyAlipayAccount = res.rst.data
					  if(!res.rst.data.alipay_account || res.rst.data.alipay_account == ''){ //判断是否绑定过支付宝
						  this.isBind = false
					  }
				  } else {
				    toast && uni.showToast({ title: res.err || '操作失败', icon: 'none' })
				  }
				} catch (error) {
					toast && uni.showToast({ title: '服务器错误', icon: 'none' })
				} finally {
				  toast && uni.hideLoading()
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.page-con{
		background-color: #FFFFFF;
		height: 100vh;
	}
.info{
	padding: 20rpx 40rpx;
	border-bottom: 2rpx solid #f4f4f4;
	display: flex;
	align-items: center;
	.info-title{
		font-size: 32rpx;
		line-height: 60rpx;
		color: #999999;
		display: block;
		width: 200rpx;
	}
	.info-input{
		flex: 1;
		font-size: 32rpx;
	}
	.yzm{
		font-size: 24rpx;
		line-height: 40rpx;
		border: 2rpx solid #F51400;
		color: #F51400;
		padding: 4rpx 0rpx;
		border-radius: 40rpx;
		width: 160rpx;
		text-align: center;
	}
	.yzm_active{
		background: #dddddd;
		color: #FFFFFF;
		border-color: #dddddd;
	}
}
.button{
	width: 600rpx;
	font-size: 32rpx;
	background: #F51400;
	color: #FFFFFF;
	margin-top: 200rpx;
	&::after{
		border: none;
	}
}
.hint{
	font-size: 22rpx;
	line-height: 30rpx;
	padding: 40rpx;
	color: #999;
}
</style>