v3-lab-xcx/pages/login/login.vue

<!-- 登录 -->
<template>
  <view id="login">
    <img class="login-max-big" :src="loginBanner">
    <view class="login-box">
      <view class="input-max-box-one">
        <view class="input-box">
          <img src="@/images/basicsModules/img_log_in_account.png">
          <input type="text" v-model="username" placeholder="请输入账号" maxlength="20">
        </view>
      </view>
      <view class="input-max-box-two">
        <view class="input-box">
          <img src="@/images/basicsModules/img_log_in_password.png">
          <input type="password" v-model="password" placeholder="请输入密码" maxlength="20">
        </view>
      </view>
      <view class="check-max-box">
        <view class="check-box" @click="checkboxChange">
          <img v-if="checkedType" src="@/images/basicsModules/icon_13.png">
          <img v-if="!checkedType" src="@/images/basicsModules/icon_12.png">
          <view>记住我</view>
        </view>
        <view class="check-right-box" @click="nullPasswrod">
          忘记密码
        </view>
      </view>
      <view class="button-box" @click="login">登录</view>
    </view>
  </view>
</template>

<script>
import md5 from '@/utils/md5.js'
import { config } from '@/api/request/config.js'
import { login,configInfo,getConfigByType,getGentleIdentifier,systemAppletRolePermission} from '@/api/basicsModules/index.js'
import { Encrypt,Decrypt} from '@/utils/secret.js'
export default {
  data() {
    return {
      identityStatus:1,
      username:"superadmin",
      password:"zd123456",
      checkedType:false,
      loginBanner:uni.getStorageSync('loginBanner'),
      infoList:[],//模板消息Id
      tabText:['师生登录','供应商登录'],
      curTab:0,
      pageType:0,
    }
  },

  onLoad(option) {
    //供应商注册成功后返回到供应商注册页面
    if(option.status){
      this.identityStatus=2
    }
    if(uni.getStorageSync('userName') && uni.getStorageSync('password')){
      this.username = uni.getStorageSync('userName');
      this.password = uni.getStorageSync('password');
      this.checkedType = true;
    }


  },
  onShow(){
    this.getConfigInfo();
  },
  methods: {
    //顶部tab点击
    tabClick(index) {
      this.curTab = index;
    },
	//登录
	async login() {
	  let self = this;
	  let obj = {
	    account:this.username,
	    password:md5.hex_md5(this.password),
	  }
	  const {data} = await login(obj)
	  if(data.code == 200){
	    uni.setStorageSync('token',data.data.token);
	    uni.setStorageSync('userId',data.data.userId);
	    uni.setStorageSync('userType',data.data.userType==0||data.data.userType==1?'1':
		(data.data.userType==2?'2':(data.data.userType==3?'3':'none')));
	    if(this.checkedType){
	      uni.setStorageSync('userName',this.username)
	      uni.setStorageSync('password',this.password)
	    }else{
	      uni.removeStorageSync('userName')
	      uni.removeStorageSync('password')
	    }
		//获取开发配置
		this.getConfigByType();
		//获取权限字段
		this.systemAppletRolePermission();
	    //获取身份标识
	    // this.getGentleIdentifier();
	  }
	},
	//获取权限字段
	async systemAppletRolePermission(){
		let self = this;
		const {data} = await systemAppletRolePermission();
		if(data.code==200){
			uni.setStorageSync('permissions',data.data.data)
		}
	},
    //获取用户身份标识"adminGentle": false,   
	//管理员身份 "rectifyGentle": false,   
	//整改身份"applyGentle": false    检查者身份
    async getGentleIdentifier(){
      let self = this;
      const {data} = await getGentleIdentifier();
      if(data.code==200){
        uni.setStorageSync('gentleIdentifierData',data.data)
        let list=[];
        if(data.data.adminGentle || data.data.collegeGentle){//校级管理员
          list.push({name:'管理员',pageType:1})
        }
        if(data.data.applyGentle ||data.data.myApplyGentle){
          list.push({name:'检查者',pageType:2})
        }
        if(data.data.rectifyGentle){
          list.push({name:'整改者',pageType:3})
        }
        if(!data.data.adminGentle && !data.data.applyGentle && !data.data.myApplyGentle  && !data.data.applyGentle && !data.data.collegeGentle){
          self.pageType='mine'
          list.push({name:'暂无权限',pageType:'mine'})
        }
        uni.setStorageSync('gentleIdentifier',list)
        if(uni.getStorageSync('saoCode')){
          uni.redirectTo({
            url: '/pages/saoCode/saoCode'
          });
        }else if(self.pageType=='mine'){
          uni.redirectTo({
            url: '/pages/mine/mine',
          });
        }else{
          uni.redirectTo({
            url: '/pages/home/home',
          });
        }
      }
    },
    switchClick(){
      if(this.identityStatus==1){
        this.identityStatus=2;
      }else{
        this.identityStatus=1;
      }
    },
	//查询公共配置
	getConfigInfo(){
		this.getCircularLogo();
		this.getVideoCover();
		this.getBanner();
	},
    async getCircularLogo(){
      const {data} = await configInfo({ type: 1 });
      if(data.code == 200){
        uni.setStorageSync('circularLogo',config.base_url + data.data.circularLogo)
      }
    },
    async getVideoCover(){
      const {data} = await configInfo({ type: 2 });
      if(data.code == 200){
        uni.setStorageSync('videoCover',config.base_url + data.data.videoCover)
      }
    },
    async getBanner(){
      const {data} = await configInfo({ type: 4 });
      if(data.code == 200){
        this.loginBanner = config.base_url + data.data.loginBanner;
        uni.setStorageSync('loginBanner',config.base_url + data.data.loginBanner)
        uni.setStorageSync('homepageBanner',config.base_url + data.data.homepageBanner)
      }
    },
    //获取开发配置
	async getConfigByType(){
      const {data} = await getConfigByType({ category: 2, configType: 5 });
      if(data.code == 200){
        let obj = JSON.parse(data.data.configValue)
        //文件预览地址
        uni.setStorageSync('filePreviewUrl','https://'+obj.fileExtranetUrl)
        //摄像头代理访问地址
        uni.setStorageSync('cameraExtranetAgent','https://'+obj.cameraExtranetAgent)
        //摄像头地址ip段
        uni.setStorageSync('cameraIntranetAgent',obj.cameraIntranetAgent)
        //摄像头访问地址
        uni.setStorageSync('cameraUrl','https://'+obj.cameraExtranetUrl)
        //MQTT地址
        uni.setStorageSync('mqttUrl',Decrypt(obj.mqttExtranetUrl))
        //MQTT账号
        uni.setStorageSync('mqttUser',Decrypt(obj.mqttExtranetUser))
        //MQTT密码
        uni.setStorageSync('mqttPassword',Decrypt(obj.mqttExtranetPassword))
		uni.redirectTo({
			url: '/pages/home/home',
		});
      }
    },
    checkboxChange() {
      this.checkedType = !this.checkedType;
    },
    //点击事件
    handleClick(doType) {
      if(doType=='register'){//供应商注册
        uni.redirectTo({
          url: '/pages_supplier/register/register?pageStatus=0'
        });
      }else if(doType=='forget'){//忘记密码
        uni.showModal({
          showCancel:false,
          confirmColor:'#0183FA',
          content: '请您联系学校相关管理人员申请重置密码',
          success: function (res) {
            if (res.confirm) {
            }
          }
        });
      }
    },
  },

}
</script>


<style lang="stylus" scoped>
#login{
  height:100%;
  width:100%;
  background #f5f5f5
  position relative
  .login-max-big{
    width:750rpx;
    height:1102rpx;
    z-index:0;
  }
  .login-box{
    z-index:1;
    position: absolute
    top:446rpx;
    left:46rpx;
    width:658rpx;
    height:655rpx;
    // background #fff
    border-radius:20rpx;
    .input-max-box-one{
      .input-box{
        display flex
        width:600rpx;
        height:80rpx;
        border:1rpx solid #e0e0e0;
        border-radius:40rpx;
        margin:147rpx auto 0;
        img{
          width:28rpx;
          height:32rpx;
          margin:24rpx 31rpx;
        }
        input{
          flex:1;
          font-size:24rpx;
          height:80rpx;
          line-height:80rpx;
          margin-right:31rpx;
        }
      }
      .text-box{
        height:59rpx;
        line-height:59rpx;
        color:#DC1616;
        font-size:24rpx;
        margin-left:102rpx;
      }
    }
    .input-max-box-two{
      margin-top:40rpx;
      .input-box{
        display flex
        width:600rpx;
        height:80rpx;
        border:1rpx solid #e0e0e0;
        border-radius:40rpx;
        margin:0 auto 0;
        img{
          width:30rpx;
          height:32rpx;
          margin:24rpx 30rpx;
        }
        input{
          flex:1;
          font-size:24rpx;
          height:80rpx;
          line-height:80rpx;
          margin-right:31rpx;
        }
      }
      .text-box{
        height:59rpx;
        line-height:59rpx;
        color:#DC1616;
        font-size:24rpx;
        margin-left:102rpx;
      }
    }
    .check-max-box{
      display flex;
      .check-box{
        margin:30rpx 0 30rpx 104rpx;
        width:300rpx;
        height:50rpx;
        display:flex;
        img{
          margin-top:10rpx;
          width:32rpx;
          height:32rpx;
          margin-right:10rpx;
        }
        view{
          font-size:24rpx;
          line-height:50rpx;
        }
      }
      .check-right-box{
        font-size:24rpx;
        line-height:50rpx;
        margin:30rpx 0 30rpx 30rpx;
      }
    }
    .button-box{
      width: 600rpx;
      line-height: 80rpx;
      background: #0183FA;
      border-radius: 40rpx;
      font-size: 36rpx;
      color:#fff;
      text-align center
      margin:0 auto 0;
    }
  }
  .top-back{
    z-index:2;
    position: absolute
    top:261rpx;
    left:375rpx;
    height:296rpx;
    width:366rpx;
  }
}
</style>