shuju_ui/qs_zhaoshang/pages/login.vue

<template>
  <view class="normal-login-container" v-if="loginflag">
	  <image :src="bgimg" class="loginbg"></image>
	  <view  class="loginbox">
		  <view class="login_top">
			  <view class="title">登录</view>
			  <view class="txt">
				  <!-- <text>招商引资管理系统</text>
				  / -->
				  <text>潜山市政府投资重点项目管理系统</text>
				</view>
		  </view>
		<view class="login-form-content">
			<view class="input-item">
				<view class="login_tit">账号名称</view>
				<view class="login_box">
					 <input  v-model="loginForm.username" class="input" type="text" placeholder="请输入账号名称" maxlength="30" />
				</view>
			</view>
				<view class="input-item" >
					<view class="login_tit">登录密码</view>
					 <view class="login_box">
						 <input v-if="checkeye" v-model="loginForm.password" type="text"  class="input" placeholder="请输入密码" maxlength="20" />
						 <input v-else v-model="loginForm.password" type="password"  class="input" placeholder="请输入密码" maxlength="20" />
						 <view class="input_ye" v-if="loginForm.password" @click="checkeye=!checkeye">
						 	<image :src="yeimgs" v-if="checkeye"></image>
						 	<image :src="yeimg" v-else></image>
						 </view>
					 </view>
				</view>
				<view class="input-item flex align-center" style="width: 60%;margin: 0px;margin-bottom: 24rpx;" v-if="captchaEnabled">
				  <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
				  <view class="login-code"> 
				    <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
				  </view  >
				</view>
				<view class="flexc login_jz " :class="jzflag?'act':''"  @click="jzflag=!jzflag">
					<image :src="jzimg" v-if="jzflag"></image>
					<image :src="jnzimg" v-else></image>
					<view>保存账号及密码</view></view>
		  <view class="action-btn">
		    <button @click="handleLogin"  class="login-btn cu-btn block  lg  "  :class="loginForm.username&&loginForm.password?'btn2':'btn'">登录</button>
		  </view>
		</view>
		<view class="xieyi text-center" >
			<image :src="readimg" class="image"  v-if="readflag"  @click="readflag=!readflag"></image>
			<image :src="readimgs" class="image" v-else @click="readflag=!readflag"></image>
		  <text class="text-grey1">我已阅读并同意</text>
		  <text @click="handleUserAgrement" class="xieyifa">《用户协议》</text>
		  <text @click="handlePrivacy" class="xieyifa">《隐私协议》</text>
		</view>
		
	</view>
  </view>
</template>

<script>
const jpushModule = uni.requireNativePlugin('JG-JPush')
  import { getCodeImg,getCode,sendSmsOnly } from '@/api/login'
  import {getSMS} from '@/utils/common.js'
import { getToken } from '@/utils/auth'
 import {updateUserProfile} from "@/api/system/user.js"
  export default {
    data() {
      return {
		//极光推送
		connectStatus: '未连接',
		registrationID: '未获得',
		bgimg:require("@/static/images/mine/loginbg.jpg"),
		yeimg:require("@/static/images/mine/nyea.png"),
		yeimgs:require("@/static/images/mine/yea.png"),
		readimg:require("@/static/images/mine/check.png"),
		readimgs:require("@/static/images/mine/ncheck.png"),
		jzimg:require('@/static/images/mine/jicon.png'),
		jnzimg:require('@/static/images/mine/jnicon.png'),
		readflag:false,
		pwdtype:'password',
        codeUrl: "",
        captchaEnabled: true,
		checkeye:false,
        globalConfig: getApp().globalData.config,
		type:'',//1 账号密码  2短信
		typeflag:1,
		time:'',
		timefalg:'',
		loginflag:false,
        loginForm: {
          username: "",
          code: "",
		  password:'',
        },
		jzflag:false
      }
    },
    created() {
		// 账号密码登录需要
      this.getCode()
    },
	onLoad() {
		// userType:00   系统用户
			
		if (getToken()) {
			var userType=this.$store.state.user.userType;
			var newArr=userType.split(',')
			var num=0,b=0;
			for(var i=0;i<newArr.length;i++){
				if(newArr[i]=='发改委'){
					num=1
					break;
				}
				if(newArr[i]=='招商'){
					b=1
					break;
				}
			}
			if(num==1){
				if(b==1){
					this.$tab.reLaunch('/pages/index')
				}else{
					this.$tab.reLaunch('/pages/indexs')
				}
			}else{
				this.$tab.reLaunch('/pages/index')
			}
		  // uni.switchTab({
		  // 	url:'/pages/index'
		  // })
		} else {
		  this.loginflag=true;
		  if(uni.getStorageSync('account')){
		  	var newObj=JSON.parse(JSON.stringify(uni.getStorageSync('account')))
		  	this.loginForm.username=newObj.username;
		  	this.loginForm.password=newObj.password;
		  	this.jzflag=true;
			this.readflag=true;
			// 自动登录
			// this.handleLogin()
		  }
		  
		}
		
	},
	onUnload() {
		
	},
    methods: {
		//点击登录按钮
		login() {
		  //登录成功后
		     //设置别名
			// jpushModule.setAlias({
			// 		'alias': this.phone,
			// 		'sequence': 1
			// 		})
		},
		connect() {
			this.getRegistrationID()
			// uni.$on('connectStatusChange', (connectStatus) => {
			// 	console.log('进入连接')
			// 	var connectStr = ''
			// 	if (connectStatus == true) {
			// 		connectStr = '已连接'
			// 		this.getRegistrationID()
			// 	} else {
			// 		connectStr = '未连接'
			// 	}
			// 	console.log('监听到了连接状态变化 --- ', connectStr)
			// 	this.connectStatus = connectStr
			// })
		},
		//获取推送ID
		getRegistrationID() {
			jpushModule.getRegistrationID(result => {
				let registerID = result.registerID
				// console.log(result,7)
				var params={
					jgId:registerID,
				}
				updateUserProfile(params).then(res=>{
					if(rtes.code==200){
						console.log(res,9)
					}
				})
			})
		},
      // 隐私协议
      handlePrivacy() {
      this.$tab.navigateTo('/pages/agreement')
      },
      // 用户协议
      handleUserAgrement() {
         this.$tab.navigateTo('/pages/agreement')
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },


      // 登录方法
      async handleLogin() {
		  var that=this;
		  setTimeout(function(){
			if(!that.loginForm.username||!that.loginForm.password){
					return
			}
			if(that.readflag){
						  // 判断是否记住密码
						  if(that.jzflag){
							  var newObj={
								  username:that.loginForm.username,
								  password:that.loginForm.password,
								  captchaEnabled:that.captchaEnabled,
							  }
							  
							 uni.setStorageSync('account', JSON.parse(JSON.stringify(newObj)))
						  }else{
							  uni.removeStorageSync('account')
						  }
				that.$toast("登录中，请耐心等待...")
				that.pwdLogin()
			}else{
				that.$toast("请同意用户协议")
			}
		},200)
      },
      // 密码登录
      async pwdLogin() {
		  var that=this;
        this.$store.dispatch('Login', this.loginForm).then((res) => {
          this.$modal.closeLoading()
		  this.$toast('登录成功')
		  setTimeout(function(){
			  // #ifdef APP-PLUS
			   // that.getRegistrationID();
			  // #endif
			 
			  that.loginSuccess()
		  },1500)
          
        }).catch((error) => {
         setTimeout(function(){
			 if (that.captchaEnabled) {
			   that.getCode()
			 }
		 },1000)
        })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
		var that=this;
        this.$store.dispatch('GetInfo').then(res => {
			var userType=res.user.userType;
			var newArr=userType.split(',')
			var num=0,b=0;
			for(var i=0;i<newArr.length;i++){
				if(newArr[i]=='发改委'){
					num=1
					break;
				}
				if(newArr[i]=='招商'){
					b=1
					break;
				}
			}
			if(num==1){
				if(b==1){
					this.$tab.reLaunch('/pages/index')
				}else{
					this.$tab.reLaunch('/pages/indexs')
				}
			}else{
				this.$tab.reLaunch('/pages/index')
			}
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
	width: 100%;height: 100vh;
  }
.loginbg{width: 100%;height:100vh;display: block;}
.loginbox{padding: 0rpx 64rpx 52rpx;width: 100%;box-sizing: border-box;overflow: auto;top: -100rpx;position: fixed;left: 0;right: 0;top: 0;bottom: 0;padding-top: 200rpx;}

  .normal-login-container {
    width: 100%;
	height: 100vh;
	position: relative;
    .logo-content {
      width: 100%;
      font-size: 44rpx;
      text-align: center;
      image {
        border-radius: 4px;
      }

      .title {font-size: 52rpx;color: #343434;;font-weight: bold;}
    }

    .login-form-content {
      margin: 0 auto;
      margin-top: 80rpx;
      width: 100%;
		
      .input-item {
        // margin-bottom:48rpx;
        border-bottom: 2rpx solid #CDCDCD;
		padding: 40rpx 0 0rpx;
        .icon {
          font-size: 40rpx;
          margin-left: 10px;
          color: #999;
        }
		.login_tit{
			font-size: 34rpx;
			font-weight: bold;
			color: #343434;margin-bottom: 20rpx;
		}
		.login_box{display: flex;align-items: center;}
        .input {
          width: 100%;
          font-size: 32rpx;
		  height: 80rpx;
		  line-height: 80rpx;
        }

      }

      .login-btn {
        margin-top: 52rpx;
		width: 100%;
		height: 80rpx;
		border-radius: 6rpx;
		margin-bottom: 28rpx;
		&.btn{background: #9a9c9e;color: #ffffff;}
		&.btn1{border: 2rpx solid  #1678FF;color: #1678FF;background-color: #ffffff;margin-top: 0;}
		&.btn2{background: $uni-color-fa;color: #ffffff;}
      }
	  .login-code {
	    height: 38px;
	    float: right;
	  
	    .login-code-img {
	      height: 38px;
	      position: absolute;
	      margin-left: 10px;
	      width: 200rpx;
	    }
	  }
    }
  }

.login_jz{display: flex;align-items: center;justify-content: flex-end;margin-top: 32rpx;
	image{width: 32rpx;height: 32rpx;margin-right: 12rpx;}
	view{color: #666666;}
	&.act{
		view{color: #28C529;}
	}
}
.xieyi {
        color: #333;
        margin-top: 26px;
		font-size: 26rpx;
		display: flex;align-items: center;justify-content: center;
		.xieyifa{ color: $uni-color-fa;}
      }
.image{width: 32rpx;height: 32rpx;margin-right: 14rpx;}
.input_ye image{width: 36rpx;height: 20rpx;}
.codess{font-size: 34rpx;color: #1678FF;flex: 0 0 auto;min-width: 200rpx;text-align: center;border-left: 2rpx solid #CDCDCD;}
.codes{background: none;font-size: 28rpx;flex: 0 0 auto;width: 180rpx;text-align: center;border-left: 2rpx solid #CDCDCD;}
.login_box{display: flex;align-items: center;}
.login_boxl{width:130rpx;font-size: 34rpx;color: #343434;border-right: 2rpx solid #CDCDCD;}

.login_top{
	.title{font-size: 52rpx;color: #343434;;font-weight: bold;position: relative;
	&::after{content: '';width: 42rpx;height: 4rpx;background: $uni-color-fa;position: absolute;bottom: -23rpx;left: 0;}
	}
	.txt{font-size: 32rpx;font-weight: 500;color: #666666;margin-top: 50rpx;
		text{display: inline-block;padding: 0 10rpx}
	}
}
</style>