jje_uniapp/loginPages/bindAccount/index.vue

<template>
	<view class="container">
		<view class="login-wrap">
			<view class="login-form">
				<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="form1">
					<u-form-item label="手机号" prop="phonenumber" labelWidth="auto" labelAlign="right">
						<u--input v-model="userInfo.phonenumber" placeholder="请输入手机号" border="bottom" type="number"
							maxlength="11"></u--input>
					</u-form-item>
					<u-form-item labelWidth="auto" labelAlign="right" label="验证码" prop="smsCode" width="120">
						<u--input v-model="userInfo.smsCode" disabledColor="#ffffff" placeholder="请输入验证码"
							border="bottom" maxlength="6"></u--input>
						<template #right>
							<view class="identifying-code">
								<u-code ref="uCode2" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
								<text @tap="getCode2" :text="tips2" class="u-page__code-text">{{tips2}}</text>
							</view>
						</template>

					</u-form-item>
				</u--form>
			</view>
		</view>
		<view @click="gotoBindAccountPassword()" class="op-btn-wrap">
			<view class="h-btn">
				<text>下一步</text>
			</view>
		</view>

		<!-- 密码正确 -->
		<u-popup :show="errShow" :round="10" mode="center">
			<view class="h-popo-content">
				<view class="h-img">
					<!-- <u-icon name="close" color="red" size="40"></u-icon> -->
					<u-icon name="/static/login/u01.png" color="red" size="50"></u-icon>
				</view>
				<view class="h-text">
					<text>系统已检测到该手机号已绑定过账号</text>
				</view>
				<view class="h-text">
					<text>请选择</text>
				</view>
				<view class="h-btn-wrap">
					<view @click="createNewAccount()" class="h-left-btn">
						<text>创建新账号</text>
					</view>
					<view @click="loginOldAccount()" class="h-right-btn">
						<text>登录老账号</text>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>
<script>


	export default {
		data() {
			return {
				errShow: false,
				userInfo: {
					phonenumber: '',
					phone: '',
					smsCode: '',
					openId: '',
					password: "",
					transactionPassword: "",
					reference: "",
					type: '' // 实名认证创建新账号
				},
				tips2: '',
				rules: {
					phonenumber: [{
							required: true,
							min: 10,
							max: 12,
							message: '请输入11位电话号码',
							trigger: ['blur', 'change'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return !this.$isDataEmpty(value);
							},
							message: "请认真填写电话号码",
							trigger: ['blur', 'change'],
						}
					],
					smsCode: {
						required: true,
						min: 4,
						max: 6,
						message: '请输入4位验证码',
						trigger: ['blur', 'change'],
					},
				},
			}
		},
		onLoad(option) {
			// 判断Openid是否为空
			if (!this.$isDataEmpty(option.openId)) {
				this.userInfo.openId = option.openId;
				console.log(option)
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			// 创建新账号
			createNewAccount() {
				this.errShow = false;
				this.userInfo.type = "2";
				uni.$u.route({
					url: '/pages/login/login-real-name-auth',
					params: {
						data: JSON.stringify(this.userInfo)
					}
				})
			},
			// 登录老账号
			loginOldAccount() {
				this.errShow = false;
				uni.$u.route({
					url: '/pages/login/login-old-account',
					params: {
						phone: this.userInfo.phonenumber
					}
				})
			},
			// 验证电话号码是否存在
			phoneIsExist() {
				let that = this;
				// 验证电话号码是否存在
				this.$api.phoneIsExist({
					data: this.userInfo
				}).then((res) => {
					console.log(res)
					if (res.phoneIsExist) { // 存在
						that.errShow = true;
					} else {
						that.userInfo.phone = that.userInfo.phonenumber;
						that.userInfo.type = "1";


						uni.$u.route({
							url: '/pages/login/bind-transaction-password',
							params: {
								data: JSON.stringify(that.userInfo)
							}
						})

						/* uni.$u.route({
							url: '/pages/login/bind-account-password',
							params: {
								data: JSON.stringify(that.userInfo)
							}
						}) */

					}
				}).catch(() => {
					uni.showToast({
						title: "操作失败"
					})
				});
			},
			// 去绑定账号密码页面
			gotoBindAccountPassword() {
				this.$refs.form1.validate().then(res => {
					this.phoneIsExist();
				}).catch(errors => {
					uni.$u.toast('校验失败,请认真填写')
				})
			},
			codeChange2(text) {
				this.tips2 = text;
			},
			getCode2() {
				let that = this;
				if (this.$refs.uCode2.canGetCode) {
					that.getSmsCode();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 获取手机验证码
			getSmsCode() {
				let that = this;
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				getSmsCode({
					data: {
						phonenumber: this.userInfo.phonenumber,
						auth: true
					}
				}).then((res) => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					that.$refs.uCode2.start();
				}).catch(() => {
					uni.showToast({
						title: "操作失败"
					})
				});
			},
		}
	}
</script>
<style lang="scss">
	page,
	body {
		background: #fff;
	}

	.h-popo-content {
		height: 380rpx;
		padding: 24rpx;
		width: 600rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;

		.h-img {
			display: flex;
			justify-content: center;
		}

		.h-text {
			margin-top: 24rpx;
			font-weight: 400;
			color: #666666;
		}

		.text {
			margin-top: 12rpx;
			font-weight: 400;
			color: #666666;
		}

		.h-btn-wrap {
			display: flex;
			justify-content: space-between;
			color: #333333;
			text-align: center;
			margin-top: 28rpx;

			.h-left-btn {
				height: 64rpx;
				line-height: 60rpx;
				background: #EEEEEE;
				width: 200rpx;
				text-align: center;
				border-radius: 32rpx;
				margin: 0 auto;
			}

			.h-right-btn {
				height: 64rpx;
				line-height: 60rpx;
				background: #FFE05C;
				width: 200rpx;
				border-radius: 32rpx;
				margin: 0 auto;

			}
		}
	}

	.container {
		background: #fff;
		height: 600rpx;

		.login-wrap {
			display: flex;
			justify-content: center;

			.login-form {
				width: 90%;
			}

			.account {
				display: flex;
			}

			.identifying-code {}
		}

		.op-btn-wrap {
			margin-top: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.h-btn {
				text-align: center;
				width: 686rpx;
				height: 84rpx;
				background: #FFE05C;
				border-radius: 54rpx;
				line-height: 84rpx;
			}
		}
	}
</style>