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,
			// messageError:false
		}
	},
	onLoad(page) {
		//  如果存在code 则认为是微信登录完成后跳转过来的,直接获取信息跳转首页或者指定页面
		let locationLocaturl = window.location.search;
		this.code = getUrlParams(locationLocaturl, "code"); // 截取code
		if (this.code) {
			this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
		}
		console.log('backUrl',localStorage.getItem('backUrl'))
	},
	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;
				// style.backgroundColor = this.$u.color['warning'];
			}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
						});
					}
					
				}).catch(err=>{
					this.toastMsg = err.code + ":" + err.msg;
					this.showToast();
				});
			}
		},
		// 收不到验证码选择时的选择
		// noCaptcha() {
		// 	uni.showActionSheet({
		// 		itemList: ['重新获取验证码', '接听语音验证码'],
		// 		success: function(res) {
					
		// 		},
		// 		fail: function(res) {
					
		// 		}
		// 	});
		// },
		// 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('finish res',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();
			});
		},
		// 微信登录
		wechatLogin() {
			this.jumpIndex()
			// const openId = this.$store.state.vuex_wxinfo?.openId
			// if (openId) {
			// 	this.jumpIndex()
			// } else {
			// 	this.getCode()
			// }
		},
		veteEducCheck(){
			this.$u.api.getVeteEducCheck().then(res=>{
				console.log('res',res);
				if(res.data!=9){
					this.jumpIndex();
				}else{
					uni.navigateTo({
						url: '/pages/authentication/authentication'
					})
				}
			})
		},
		// 微信已登录则跳转到首页
		jumpIndex() {
			let ret = localStorage.getItem('backUrl')
			if (ret && ret.indexOf('phoneLogin') < 0) {
				// 截取url
				const pagesIndex = ret.indexOf('pages')
				let switchTabList = ['/pages/index/index','pages/center/center','pages/mine/mine'];
				if (pagesIndex > (-1)) {
					const pageUrl = ret.slice(pagesIndex)
					if(switchTabList.includes(pageUrl)){
						setTimeout(() => {
							uni.switchTab({
								url: '/' + pageUrl
							})
						}, 100)
					}else{
						setTimeout(() => {
							uni.navigateTo({
								url: '/' + pageUrl
							})
						}, 100)
					}
					
				} else {
					uni.switchTab({
						url: '../index/index'
					})
				}
			} else {
				uni.switchTab({
					url: '../index/index'
				})
			}
		},
		// 获取code
		getCode () {
			const local = window.location.href // 获取页面url
			let locationLocaturl = window.location.search;
			this.code = getUrlParams(locationLocaturl, "code"); // 截取code
			if (this.code) { // 如果没有code，则去请求
				this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
			} else {
				window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
			}
		},
		// 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
		handleGetWXInfo (code) {
			uni.showLoading({
			    title: '加载中'
			})
			this.$u.api.getWXInfo(code).then((res) => {
				if (res.code === 200 ) {
					this.$u.vuex('vuex_wxinfo', res.data);
					this.jumpIndex()
				} else {
					this.$refs.uToast.show({
						title: '获取用户信息失败!',
						type: 'error',
					});
				}
				uni.hideLoading()
			}).catch((err) => {
				this.$refs.uToast.show({
					title: '获取用户信息失败!',
					type: 'error',
				});
			})
		},
		/**
		 * 跳转页面
		 * */
		jumpToPage(flag){
			uni.navigateTo({
				url: "/pages/inbuild/inbuild",
				// url: "/pages/privacyPolicy/privacyPolicy?termsType=" + flag,
			})
		}
	}
};
</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>