FE-V2-XCX/pages/login.vue

<!-- 登录 -->
<template>
  <view id="login">
    <!-- <img class="login-max-big" src="@/images/img_bg_dl.png"> -->
    <img class="login-max-big" :src="loginBanner">
    <view class="login-box">
      <view class="input-max-box-one">
        <view class="input-box">
          <img src="@/images/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/img_log_in_password.png"/>
          <input type="password" v-model="password" placeholder="请输入密码" maxlength="20">
        </view>
      </view>
      <view class="check-box" @click="checkboxChange">
        <img v-if="checkedType" src="@/images/icon_13.png"/>
        <img v-if="!checkedType" src="@/images/icon_12.png"/>
        <view>记住我</view>
      </view>
      <view class="button-box" @click="login">登录</view>
      <view class="supplier" v-if="identityStatus==2">
        <view class="supplier_l" @click="handleClick('forget')">忘记密码</view>
        <view class="supplier_r" @click="handleClick('register')">没有账号，<text>立即注册</text></view>
      </view>
      <!-- 供应商 -->
      <view class="switch_btn" @click="switchClick()">{{identityStatus==2?'师生登录':'供应商登录'}}<img  src="@/images/Version3.0/icon_ssdl_qh.png"/></view>
    </view>
    <img class="top-back" src="@/images/img_sys_bg.png"/>
  </view>
</template>

<script>
import { config } from '@/api/request/config.js'
import { login,getLogoInfo,getDemoInfoList,getOpenId,getUrlConfig} from '@/api/index.js'
import { Encrypt,Decrypt} from '@/utils/secret.js'
export default {
  data() {
    return {
      identityStatus:1,
      username:"",
      password:"",
      checkedType:false,
      loginBanner:uni.getStorageSync('loginBanner'),
      infoList:[],//模板消息Id
    }
  },

  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.getLogoInfo();
    this.getUrlConfig();

  },
  methods: {
    //获取openID
    async getOpenId(){
      let _this=this;
      let code=uni.getStorageSync('code')
      const {data} = await getOpenId({code:code});
      if(data.code==200){

      }else if(data.code==500){
      }
    },
    switchClick(){

      if(this.identityStatus==1){
        this.identityStatus=2;
      }else{
        this.identityStatus=1;
      }
    },
    async getLogoInfo(){
      const {data} = await getLogoInfo();
      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)
        uni.setStorageSync('videoCover',config.base_url + data.data.videoCover)
      }
    },
	async getUrlConfig(){
	  const {data} = await getUrlConfig();
	  if(data.code == 200){
	      //文件预览地址
	      uni.setStorageSync('filePreviewUrl','https://'+data.data.fileExtranetUrl)
	      //摄像头代理访问地址
	      uni.setStorageSync('cameraExtranetAgent','https://'+data.data.cameraExtranetAgent)
	      //摄像头地址ip段
	      uni.setStorageSync('cameraIntranetAgent',data.data.cameraIntranetAgent)
	      //摄像头访问地址
	      uni.setStorageSync('cameraUrl','https://'+data.data.cameraExtranetUrl)
	      //MQTT地址
	      uni.setStorageSync('mqttUrl',Decrypt(data.data.mqttExtranetUrl))
	      //MQTT账号
	      uni.setStorageSync('mqttUser',Decrypt(data.data.mqttExtranetUser))
	      //MQTT密码
	      uni.setStorageSync('mqttPassword',Decrypt(data.data.mqttExtranetPassword))

	  }
	},
    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) {
            }
          }
        });
      }
    },
    async login() {
      let self = this;
      let obj = {
        username:this.username,
        password:this.password,
      }
      const {data} = await login(obj)
      if(data.code == 200){
        uni.setStorageSync('token','Bearer '+data.data.access_token);
        uni.setStorageSync('userId',data.data.user_id);
        this.getOpenId();//获取openid
        if(data.data.type == "00" ||data.data.type == "11"){//管理端
          uni.setStorageSync('userType',"1");
          this.getToken()//订阅消息

        }else if(data.data.type == 22){//学生端
          uni.setStorageSync('userType',"2");
          this.getToken()//订阅消息
        }else if(data.data.type == 33){//供应商端
          uni.setStorageSync('userType',"3");
          this.getToken2()//订阅消息
        }
        if(this.checkedType){
          uni.setStorageSync('userName',this.username)
          uni.setStorageSync('password',this.password)
        }else{
          uni.removeStorageSync('userName')
          uni.removeStorageSync('password')
        }
        if(uni.getStorageSync('saoCode')){
          uni.redirectTo({
            url: '/pages/saoCode/saoCode'
          });
        }else if(uni.getStorageSync('mid')){
          uni.redirectTo({
            url: '/pages_student/mine/codeSuccess'
          });
        }else if(uni.getStorageSync('saoCodeId')){
          uni.redirectTo({
            url: '/pages_manage/workbench/laboratory/laboratoryInfo'
          });
        }else{
          uni.redirectTo({
            url: '/pages/home',
          });
        }

      }
    },
    //订阅列表查询
    async getInfoListId(){
      let _this = this;
      const {data} = await getDemoInfoList(this.getData)
      if(data.code==200){
        let _this=this;
        let res =data.data
        //_this.getToken(res)

      }
    },
    //学生端和管理端订阅消息,出库确认通知,审核结果通知,待审核通知
    getToken() {
      let _this = this
      wx.requestSubscribeMessage({
        tmplIds:['Vg6iHUEg6hor7RvP37M7oFCoYGreCu11apJqRB2j37w','0gFoOByDYhCOthJW0tgUi3SHTkLMUK11EfIYlS_qJi4','6yzAPx_o9jn_2xhTt7blDcxjYD1x0vUV1JxUsKqpG4k'],//此处的id替换你要发送订阅的模板id,可在小程序后台新建模板中获取
        success(res) {
          if(res.errMsg=='requestSubscribeMessage:ok'){
            uni.showToast({
              title:'订阅成功!',
              icon:"none",
              mask:true,
              duration: 2000
            });
          }

        },
        fail: function(res) {
        }
      })
    },
    //供应商端订阅消息，待办事项通知
    getToken2() {
      let _this = this
      wx.requestSubscribeMessage({
        tmplIds:['2HtEIQ3_PmS0yMd3PHPIIawRqnSP0_He5wrhVKeuqaw'],//此处的id替换你要发送订阅的模板id,可在小程序后台新建模板中获取
        success(res) {
          if(res.errMsg=='requestSubscribeMessage:ok'){
            uni.showToast({
              title:'订阅成功!',
              icon:"none",
              mask:true,
              duration: 2000
            });
          }

        },
        fail: function(res) {
        }
      })
    }
  },

}
</script>

<style lang="stylus" scoped>
#login{
  height:100%;
  width:100%;
  background #f5f5f5
  position relative
  .login-max-big{
    width:750rpx;
    height:1177rpx;
    z-index:0;
  }
  .login-box{
    z-index:1;
    position: absolute
    top:446rpx;
    left:46rpx;
    width:658rpx;
    height:700rpx;
    // 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-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;
      }
    }
    .button-box{
      width: 600rpx;
      line-height: 80rpx;
      background: #0183FA;
      border-radius: 40rpx;
      font-size: 36rpx;
      color:#fff;
      text-align center
      margin:0 auto 0;
    }
    /* 供应商注册 */
    .supplier{
      display: flex;
      justify-content: space-between;
      margin:30rpx 40rpx 0;
      .supplier_l{
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 24rpx;
      }
      .supplier_r{
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 24rpx;
        >text{
          color: #0183FA;
        }
      }
    }
    /* 供应商切换 */
    .switch_btn{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #0183FA;
      line-height: 24rpx;
      margin-top: 60rpx;
      >img{
        width: 24rpx;
        height: 24rpx;
        margin-left: 12rpx;
      }
    }
  }
  .top-back{
    z-index:2;
    position: absolute
    top:261rpx;
    left:375rpx;
    height:296rpx;
    width:366rpx;
  }
}
</style>