veterans_H5/h5_web/pages/phoneLogin/phoneLogin.vue

<template>
	<view class="phonelogin">
		<u-navbar title-color="#FFFFFF" :custom-back="customBack" :bpay-bottom="false" back-icon-color="#FFFFFF"
			:background="{background: 'transparent' }" title="" class="phonelogin-unavbar" />
		<view class="phonelogin-title">
			<view>欢迎您！</view>
			<view>登录退役军人服务移动端</view>
		</view>
		<view class="phonelogin-content">
			<!-- <input class="u-border-bottom" type="number" maxlength="11" v-model="tel" placeholder="请输入手机号" /> -->
			<u-input class="u-border-bottom phonelogin-content-input" v-model="tel" type="number" maxlength="11"
				placeholder="请输入手机号" />
			<view class="u-text-center u-type-error u-m-t-20" v-if="telError">手机号输入错误</view>
			<button @tap="submit" :style="[inputStyle]" class="phonelogin-content-getcaptcha">获取验证码</button>
			<u-message-input v-if="show" :focus="true" :value="messageCode" @change="change" @finish="finish"
				mode="bottomLine" :maxlength="codelength" class="phonelogin-content-messageinput"></u-message-input>
		</view>
		<!-- <view class="u-text-center u-type-error" v-if="phoneError">手机号输入错误</view> -->
		<view class="phonelogin-captcha">
			<!-- <text v-if="show&&this.messageDisable==false" @tap="noCaptcha">收不到验证码点这里</text> -->
			<text v-if="messageShow">{{ second }}秒后可重新获取验证码</text>
		</view>
		<view class="phonelogin-pact" :class="messageShow?'phonelogin-msgpact':''">
			<view class="phonelogin-pact-hint u-text-center">
				进入即代表同意
				<text class="link" @tap="jumpToPage(1)">《用户协议》</text>及
				<text class="link" @tap="jumpToPage(2)">《隐私协议》</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "utils/getUrlParams.js";
	export default {
		data() {
			return {
				tel: '',
				messageCode: '',
				messageShow: false,
				messageDisable: false,
				codelength: 4,
				show: false,
				second: 60,
				toastMsg: '',
				toastUrl: '',
				toastType: '',
				accessToken: '',
				userId: '',
				telError: false,
			}
		},
		onShow() {
			// 判断是否登录 已登录直接跳转首页
			if (this.vuex_hasLogin) {
				uni.switchTab({
					url: '../index/index'
				})
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.tel.length == 11 && this.messageDisable == false && this.$u.test.mobile(this.tel)) {
					style.color = "#fff";
					style.backgroundColor = '#5295F5';
					this.telError = false;
				} else if (this.tel.length == 11 && !this.$u.test.mobile(this.tel)) {
					this.telError = true;
				}
				return style;
			}
		},
		methods: {
			showToast() {
				this.$refs.uToast.show({
					title: this.toastMsg,
					type: this.toastType,
					url: this.toastUrl
				})
			},
			submit() {
				if (this.$u.test.mobile(this.tel) && this.messageDisable == false) {
					let that = this;
					this.$u.api.getPhoneLoginCode({
							mobile: this.tel
						})
						.then(res => {
							if (res.code == 200) {
								this.messageDisable = true;
								this.messageShow = true;
								this.show = true;
								let interval = setInterval(() => {
									that.second--;
									if (that.second <= 0) {
										that.messageDisable = false
										that.messageShow = false;
										if (that.messageCode.lenth != 4) {
											// this.messageError = true;
										}
										clearInterval(interval);
										that.second = 60;
									}
								}, 1000);
								this.accessToken = res.data.accessToken;
								this.$u.vuex('vuex_token', res.data.accessToken);
								this.userId = res.data.userId;
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						})
				}
			},
			// change事件侦听
			change(value) {
				// console.log('change', value);
			},
			// 输入完验证码最后一位执行
			finish(value) {
				let params = {
					accessToken: this.accessToken,
					userId: this.userId,
					code: value
				};
				this.$u.api.phoneLoginAuth(params)
					.then(res => {
						if (res.code == '200') {
							console.log('登录信息:', res);
							this.$u.vuex('vuex_user', res.data);
							this.$u.vuex('vuex_hasLogin', true);
							this.veteEducCheck();
							// this.wechatLogin()
						} else {
							this.toastMsg = res.msg;
							this.showToast();
						}
					}).catch(err => {
						this.toastMsg = err.msg;
						this.showToast();
					});
			},
			veteEducCheck() {
				this.$u.api.getVeteEducCheck().then(res => {
					if (res.data != 9) {
						this.jumpIndex()
					} else {
						uni.navigateTo({
							url: '/pages/applyEducationCode/applyEducationCode'
						})
					}
				})
			},
			// 跳转到首页
			jumpIndex() {
				let ret = localStorage.getItem('backUrl')
				if (ret && ret.indexOf('phoneLogin') < 0) {
					// 截取url
					const pagesIndex = ret.indexOf('pages')
					let switchTabList = ['pages/index/index', 'pages/myCode/myCode', 'pages/mine/mine'];
					if (pagesIndex > (-1)) {
						const pageUrl = ret.slice(pagesIndex);
						if (switchTabList.includes(pageUrl)) {
							setTimeout(() => {
								uni.switchTab({
									url: '/' + pageUrl
								})
							}, 300)
						} else {
							setTimeout(() => {
								uni.navigateTo({
									url: '/' + pageUrl
								})
							}, 300)
						}
					} else {
						uni.switchTab({
							url: '../index/index'
						})
					}
				} else {
					uni.switchTab({
						url: '../index/index'
					})
				}
			},
			/**
			 * 跳转页面
			 * */
			jumpToPage(flag) {
				uni.navigateTo({
					url: "/pages/inbuild/inbuild",
				})
			},
			// tabbar 返回
			customBack() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/index/index'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.hide {
		display: none !important;
	}

	.phonelogin {
		width: 100%;
		height: 100vh;
		background-image: url(../../static/img/phonelogin-bg-png.png);
		background-repeat: no-repeat;
		background-size: cover;

		&-unavbar {
			::v-deep .u-border-bottom:after {
				border-bottom-width: 0 !important;
			}
		}

		&-title {
			padding: 10% 4% 6%;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 98rpx;
			letter-spacing: 2rpx;

			view:first-child {
				font-size: 70rpx;
			}

			view:last-child {
				font-size: 56rpx;
			}
		}

		&-content {
			padding: 0 4%;

			&-input {
				::v-deep {
					.uni-input-placeholder {
						text-align: center;
						font-size: 40rpx;
						font-family: PingFangSC-Heavy, PingFang SC;
						color: #FFFFFF !important;
						letter-spacing: 1px;
						line-height: 60rpx;
						opacity: 0.6;
					}

					.uni-input-input {
						text-align: center;
						font-size: 60rpx;
						font-family: PingFangSC-Heavy, PingFang SC;
						font-weight: 800;
						color: #FFFFFF;
						line-height: 83rpx;
						letter-spacing: 1px;
					}
				}

				&:after {
					top: 21rpx;
				}
			}

			&-getcaptcha {
				margin-top: 10%;
				color: $u-tips-color;
				border: none;
				padding: 14rpx 0;
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 55rpx;
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #6A5C52;
				line-height: 83rpx;

				&::after {
					border: none;
				}
			}

			&-messageinput {
				::v-deep .u-char-item {
					color: #FFFFFF !important;

					.u-bottom-line,
					.u-placeholder-line {
						background: #FFFFFF !important;
					}
				}
			}
		}

		&-captcha {
			color: $u-type-warning;
			font-size: 30rpx;
			margin-top: 40rpx;
			text-align: center;
		}

		&-pact {
			width: 100%;

			&-hint {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 83rpx;
				opacity: 0.7;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>