huazhiyu/pages/login/login.vue

<template>
  <view class="page">
    <view class="logo">
      <image src="../../static/image/logo254.png" mode=""></image>
    </view>
    <!-- 填写区 -->
    <view class="input-info">
      <view class="info">
        <input type="tel" maxlength="11" v-model="form.phone" placeholder="手机号">
        <view class="more"></view>
      </view>
      <view class="info" :style="isLoginWay?'':'display: none'">
        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
        <view class="more">
          <text class="mo">获取验证码</text>
          <text class="mo" style="display: none">59秒后重试</text>
        </view>
      </view>
      <view class="info" :style="isLoginWay?'display: none':''">
        <input :password='!isPassword' v-model="form.password" maxlength="26" placeholder="请输入密码">
        <view class="more">
          <text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'" @click="isPassword = !isPassword"></text>
          <text class="mo" @click="forgetPassword">忘记密码</text>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn-info">
      <view class="btn" :style="isLogin?'opacity:1':'opacity:0.4'" @click="isLogin?onLogin():''">
        <text>登录</text>
      </view>
    </view>
    <!-- 操作 -->
    <view class="operation">
      <!-- <text @click="onLoginCut">{{isLoginWay?'手机号密码登录':'短信验证码登录'}}</text> -->
      <text @click="onRegister">立即注册</text>
    </view>
	<view class="agreeContent">
		<u-checkbox-group v-model="checked">
			<u-checkbox
                :name="1" shape="circle" activeColor="#4d9a5e"></u-checkbox>
		</u-checkbox-group>
		<view class="infoText">
			我已阅读并遵守<text @click="goText(1)">《用户协议》</text>和<text @click="goText(2)">《隐私政策》</text>
		</view>
	</view>
	<u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import {loginApi} from '@/common/api.js'
import {setToken,setUserInfo,setAgentInfo ,getToken,getUserInfo} from '@/common/auth.js'
	
export default {
  data() {
    return {
      isLogin: false,
      isLoginWay: false,
      isPassword: false,
      // 表单
      form:{
        phone: '',
        code: '',
        password: '',
      },
	  checked:[],
    };
  },
  onShow() {
    this.H5Login()
  },
  methods:{
	  H5Login(){
	  	let pageUrl = window.location.href;
	  	
	  	let code =this.getQueryString('code');
	  	let appid="wx15043fd052209ad4"
	  	
	  	let redirect_uri = encodeURIComponent(pageUrl);
	  	// let redirect_uri = pageUrl;
	  	console.log(redirect_uri)
	  	let authUrl =
	  		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`;
	  	if (code) {
	  		uni.setStorageSync("code",code)
	  	} else {
	  		window.location.href = authUrl;
	  		console.log("没有code")
	  		// return await Promise.reject("跳转授权");
	  	}
	  },
    onRegister(){
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
	goText(id){
		uni.navigateTo({
			url:`/pages/my/richText?id=${id}`
		})
	},
	forgetPassword(){
		uni.navigateTo({
		  url: '/pages/register/findPsw'
		})
	},
    /**
     * 登录切换
     */
    // onLoginCut(){
    //   this.isLoginWay = !this.isLoginWay;
    //   // 验证码
    //   if(this.isLoginWay){
    //     this.isLogin = this.form.code && this.form.phone ? true : false;
    //   }
    //   // 账号密码
    //   if(!this.isLoginWay){
    //     this.isLogin = this.form.password && this.form.phone ? true : false;
    //   }
    // },
	
	
    /**
     * 登录点击
     */
    onLogin(){
		if(this.checked.length==0){
			this.$refs.uToast.show({
				message:'请阅读并同意用户协议和隐私政策'
			})
			return;
		}
		loginApi({account:this.form.phone,password:this.form.password,code:uni.getStorageSync("code")}).then(res=>{
			if(res.code==1){
				setUserInfo(res.data.userinfo)
				setToken(res.data.userinfo.token);
				uni.switchTab({
					url:  '/pages/my/my'   
				});
				
			}else{
				let pageUrl = window.location.href;
				
				let code =this.getQueryString('code');
				console.log(code,"lldd");
				let appid="wx15043fd052209ad4"
				
				let redirect_uri = encodeURIComponent(pageUrl);
				// let redirect_uri = pageUrl;
				console.log(redirect_uri)
				let authUrl =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`;
				window.location.href = authUrl;
			}
		})
    },
	getQueryString(name) {
		let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		let r = window.location.search.substr(1).match(reg);
		if (r !== null) return unescape(r[2]);
		return null;
	},
  },
  watch:{
    form:{
      handler(newValue, oldValue) {
        // 验证码
        if(this.isLoginWay){
          this.isLogin = newValue.code && newValue.phone ? true : false;
        }
        // 账号密码
        if(!this.isLoginWay){
          this.isLogin = newValue.password && newValue.phone ? true : false;
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
@import 'login.scss';
.agreeContent{
	position: absolute;
	bottom:131rpx;
	width:100%;
	justify-content: center;
	display: flex;
	align-items: center;
	.infoText{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text{
			color:#4d9a5e
		}
	}
}
</style>