weapp-v1/pages/boundPhone/boundPhone.vue

<template>
	<view>
		<view class="index">
			<view class="index-top">
				登录
			</view>
			<!-- <view class="index-title">
					为了保护账号安全，需要绑定手机号
				</view> -->
			<view class="index-input index-phone">
				<input type="text" class="tel-input" v-model="tel" placeholder="请输入手机号">
			</view>
			<view v-if="showPsd" class="index-input index-yanzheng">
				<input type="text" password class="tel-input" v-model="password" placeholder="请输入密码">
			</view>
			<view v-else class="index-input index-yanzheng">
				<input type="text" class="yzm-input" v-model="verify" maxlength="6" placeholder="输入6位验证码">
				<view class="shu" />
				<text @tap="getYZM">{{countDown ? `${countDown}s` : '获取'}}</text>
			</view>
			<view class="index-tip">
				<text @click="changeType">{{ `${showPsd ? '验证码' : '密码'}登录` }}</text>
			</view>
			<view class="index-deal">
				<checkbox :checked="checked" @click="checked = !checked" color="#FF232C" style="transform:scale(0.6)" />
				<text>我已阅读并同意</text>
				<text class="red" @click="agreement">《大卫博士争霸赛许可及服务协议》</text>
			</view>
			<view class="index-btn" @click="$noMultipleClicks(submit)">
				立即登录
			</view>
			<!-- <view class="index-bottom">
					若绑定失败请联系你的客服
				</view> -->
		</view>
	</view>


</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		api_getYZM,
		api_submitTelYZM,
		api_changeTel,
		getLogin
	} from '../../api.js'
	import privacyPopup from '../../components/privacyPopup.vue'
	export default {
		data() {
			return {
				showPsd: false,
				tel: '', //手机号
				verify: '', //验证码
				verify_key: '', //验证码 key
				checked: false,
				noClick: true,
				account: '',
				password: '',
				countDown: 0, //验证码已发送倒计时
				submiting: false,
				avatarUrl: '',
				// showPrivacy: getApp().globalData.showPrivacy,
				showPrivacy: true,
			}
		},
		components: {
			privacyPopup
		},
		computed: {
			...mapState(['userServerInfo']),
			userWeixinInfo() { //用户微信信息
				return this.$store.state.userWeixinInfo
			}
		},
		onShow() {
			this.avatarUrl = this.userServerInfouni && this.userServerInfouni.avatar
		},
		watch: {
			verify(n) { //监听验证码输入，输入结束后且通过验证，收起手机软键盘
				if (n.match(/^\d{6}$/) && this.tel.match(/^1\d{10}$/)) {
					uni.hideKeyboard()
				}
			}
		},
		methods: {
			changeType() {
				this.showPsd = !this.showPsd
				this.tel = ''
				this.verify = ''
				this.verify_key = ''

				this.account = ''
				this.password = ''
			},
			getuserinfo() { //获取用户信息
				uni.getUserInfo().then(([getUserWeixinInfoErr, userWeixinInfo]) => { //获取完成后
					if (getUserWeixinInfoErr) {
						return
					}
					// this.$store.commit('HIDEGETUSERINFOBUTTON')  //隐藏透明按钮
					// let _this = this
					// this.$store.dispatch('onLaunch').then(()=> {
					// 	_this.init()
					// })  //触发初始化方法
				})
			},
			agreement() {
				uni.navigateTo({
					url: '../boundPhone/agreement'
				})
			},
			getYZM() { //点击发送验证码
				if (this.countDown) {
					return
				}
				if (this.tel.match(/^1\d{10}$/)) { //手机号校验
					if (this.countDown) { //如果正在倒计时，表示验证码已发送
						uni.showModal({
							content: "验证码已发送,请稍后重试",
							showCancel: false
						})
					} else { //发送网络请求
						if (!this.requesting) {
							this.requesting = true
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							this.$ajax.get(`${api_getYZM}?phone=${this.tel}`).then(([, {
								data: res
							}]) => {
								this.requesting = false
								this.$hideLoading()
								if (res.code === 200) { //验证码发送成功，开始倒计时
									this.verify_key = res.data.verify_key
									uni.showModal({
										content: "验证码发送成功",
										showCancel: false
									})
									this.countDown = 90
									this.timer = setInterval(() => {
										this.countDown--
										if (!this.countDown) {
											this.countDown = 0
											clearInterval(this.timer)
										}
									}, 1111)
								} else if (res.code === 400) { //手机号不存在
									uni.showModal({
										title: '手机号不存在',
										content: '请确认手机号或联系上级进行信息确认',
										showCancel: false,
										confirmText: '确定',
										success: res => {
											if (res.confirm) {
												this.tel = ''
											}
										}
									})
								} else if (res.code === 600) { //手机号已注册
									uni.showModal({
										title: '手机号已注册',
										content: '请确认手机号是否输入正确',
										showCancel: false,
										confirmText: '确定',
										success: res => {
											if (res.confirm) {
												this.tel = ''
											}
										}
									})
								} else {
									uni.showModal({
										title: '提示',
										content: res.message,
										showCancel: false
									})
								}
							})
						}
					}
				} else { //手机号校验不通过，出现红色抖动文字提示用户
					uni.showModal({
						content: "请输入正确的手机号",
						showCancel: false
					})
				}
			},
			async pswSubmit() {
				this.account = this.tel
				if (this.account == '') {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return false
				}
				if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}
				if (this.checked === false) {
					uni.showToast({
						title: '请勾选服务协议',
						icon: 'none'
					})
					return false
				}
				const [, {
					code
				}] = await uni.login() //获取 code
				this.$ajax.post(getLogin, { //提交手机号 验证码 用户头像
					account: this.account,
					password: this.password,
					code
				}).then(([, {
					data: res
				}]) => {
					// setTimeout(() => {
					// 	this.$hideLoading()
					// 	this.submiting = false
					// }, 345)
					if (res.code === 200) {
						this.$store.commit('HIDEPHONE')
						uni.showToast({
							title: '登录成功'
						})
						uni.navigateBack({
							delta: 1
						});
					} else {
						// uni.showModal({
						// 	content: res.msg,
						// 	showCancel:false
						// })
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			async verifySubmit() {
				if (this.tel.match(/^1\d{10}$/) && this.verify.match(/^\d{6}$/)) { //是校验输入是否合法
					if (!this.submiting) {
						if (this.checked === false) {
							uni.showModal({
								content: "请勾选服务协议",
								showCancel: false
							})
							return false
						}
						this.submiting = true
						uni.showLoading({
							title: '',
							mask: true
						}) //显示loading
						const [, {
							code
						}] = await uni.login() //获取 code
						this.$ajax.post(this.changeTel ? api_changeTel : api_submitTelYZM, { //提交手机号 验证码 用户头像
							phone: this.tel,
							verify_code: this.verify,
							verify_key: this.verify_key,
							avatar: this.avatarUrl,
							code
						}).then(([, {
							data: res
						}]) => {
							setTimeout(() => {
								this.$hideLoading()
								this.submiting = false
							}, 345)
							if (res.code === 200) {
								uni.showToast({
									title: '登录成功'
								})
								this.$store.commit('HIDEPHONE')
								// this.$store.dispatch('onLaunch')  //触发初始化方法
								uni.navigateBack({
									delta: 1
								});
							} else if (res.code === 300) {
								this.verify = ''
								uni.showModal({
									content: "验证码错误，请重新获取",
									showCancel: false
								})
							} else if (res.code === 400) {
								this.verify = ''
								uni.showModal({
									content: "验证码已超时，请重新输入",
									showCancel: false
								})
							} else if (res.code === 600) { // 表示用户已经绑定过手机号
								this.$store.commit('HIDEPHONE')
								uni.navigateBack({
									delta: 1
								});
								// this.$store.dispatch('onLaunch')  //触发初始化方法
							} else {
								this.tel = ''
								this.verify = ''
								uni.showModal({
									content: "验证码或手机号无效，请重新输入",
									showCancel: false
								})
							}
						})
					}
				} else {
					uni.showModal({
						content: "请输入正确的手机号和验证码",
						showCancel: false
					})
				}
			},
			submit() { //点击提交
				this.showPsd ? this.pswSubmit() : this.verifySubmit()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		padding: 74rpx 68rpx;

		&-top {
			color: #333333;
			font-size: 60rpx;
			font-weight: bold;
		}

		&-title {
			font-size: 32rpx;
			color: #333333;
			margin-top: 15rpx;
		}

		&-input {
			width: 606rpx;
			height: 104rpx;
			padding: 30rpx 40rpx;
			background: #F8F8F8;
			border-radius: 8px;
		}

		&-phone {
			margin-top: 112rpx;
		}

		&-yanzheng {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.shu {
				width: 0rpx;
				height: 40rpx;
				border: 2rpx solid #CCCCCC;
			}

			text {
				width: 116rpx;
				line-height: 60rpx;
				text-align: center;
				border: 2rpx solid #FB231F;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #FB231F;
			}
		}

		&-tip {
			text-align: end;
			margin-top: 40rpx;
		}

		// &-yanzheng {
		// 	// display: flex;
		// 	// justify-content: space-between;
		// 	// align-items: center;
		// 	margin-top: 30rpx;
		// 	// .shu {
		// 	// 	width: 0rpx;
		// 	// 	height: 40rpx;
		// 	// 	border: 2rpx solid #CCCCCC;
		// 	// }
		// 	// text {
		// 	// 	font-size: 28rpx;
		// 	// 	font-weight: bold;
		// 	// 	color: #333333;
		// 	// }
		// }
		&-deal {
			margin: 160rpx 0 60rpx 0;
			font-size: 24rpx;

			.red {
				color: #FF232C;
			}
		}

		&-btn {
			color: #fff;
			font-size: 32rpx;
			width: 590rpx;
			line-height: 104rpx;
			text-align: center;
			background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%);
			border-radius: 52rpx;
			margin: 0 auto;
		}

		&-bottom {
			margin-top: 160rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>