weapp-v2/pages/boundPhone/boundPhone.vue

<template>
	<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>
</template>

<script>
	import { mapState } from "vuex";
	import { api_getYZM, api_submitTelYZM, api_changeTel, getLogin } from '../../api.js'
	export default {
		data() {
			return {
				showPsd: false,
				tel: '',  //手机号
				verify: '',  //验证码
				verify_key: '',  //验证码 key
				checked: false,
				noClick:true,
				account: '',
				password: '',
				countDown: 0,  //验证码已发送倒计时
				submiting: false,
				avatarUrl: ''
			}
		},
		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>