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

<!-- 登录 -->
<template>
  <view id="login">
    <img class="login-max-big" :src="loginBanner">
    <view class="login-box">
      <view class="tabTitle">
        <view class="tabTitle_li" @tap="tabClick(index)" :key="index" v-for="(item,index) in tabText">
          <view :class="{on:curTab==index}" class="tabTitle_text">{{item}}</view>
          <view :class="{on:curTab==index}" class="tabTitle_across"></view>
        </view>
      </view>
      <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-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="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",
      username: "sudiyu",
      password: "zd123456",
      checkedType: false,
      loginBanner: uni.getStorageSync('loginBanner'),
      infoList: [], //模板消息Id
      tabText: ['师生登录'],
      curTab: 0,
      pageType: 0,
      supplierType: false,
    }
  },

  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);
        // userType 0-系统 1-教职工 2-学生 3-大屏
        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')
        }
        //等待配置与字段获取到后跳转
        Promise.all([
          //获取开发配置
          this.getConfigByType(),
          //获取权限字段
          this.systemAppletRolePermission()
        ]).then((result) => {
          if(uni.getStorageSync('codeData')){
            uni.redirectTo({
              url: '/pages/saoCode/saoCode',
            });
          }else{
            uni.redirectTo({
              url: '/pages/mine/mine',
            });
          }
        }).catch((error) => {
          wx.showToast({
            title: '数据异常,请稍候再试!',
            icon: "none",
            duration: 3000
          });
        })



        //获取身份标识
        // this.getGentleIdentifier();
      }
    },
    //获取权限字段
    async systemAppletRolePermission() {
      let self = this;
      const {
        data
      } = await systemAppletRolePermission();
      if (data.code == 200) {
        uni.setStorageSync('permissions', data.data.data)
      }
    },
    switchClick() {
      if (this.identityStatus == 1) {
        this.identityStatus = 2;
      } else {
        this.identityStatus = 1;
      }
    },
    //查询公共配置
    async getConfigInfo() {
      const {
        data
      } = await configInfo({
        type: '1,2,4'
      });
      if (data.code == 200) {
        let list = JSON.parse(data.data)
        let newData = {};
        list.forEach((item) => {
          let obj = JSON.parse(item.configValue)
          newData = {
            ...newData,
            ...obj
          }
        })
        uni.setStorageSync('circularLogo', config.base_url + newData.circularLogo)
        uni.setStorageSync('videoCover', config.base_url + newData.videoCover)
        this.$set(this, 'loginBanner', config.base_url + newData.loginBanner);
        uni.setStorageSync('loginBanner', config.base_url + newData.loginBanner)
        this.$set(this, 'supplierType', newData.supplier);
        uni.setStorageSync('supplierType', newData.supplier)
        uni.setStorageSync('homepageBanner', config.base_url + newData.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))
      }
    },
    checkboxChange() {
      this.checkedType = !this.checkedType;
    },
    
  },

}
</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: 3;
    position: absolute;
    top:446rpx;
    left: 46rpx;
    width: 658rpx;
    height: 700rpx;

    // background #fff
    /* 切换按钮 */
    .tabTitle {
      display flex;
      width: 100%;
      height: 100rpx;
      position: absolute;
      top: 50rpx;
      justify-content: center;

      .tabTitle_li {
        width: 168rpx;
        text-align center;

        .tabTitle_text {
          display: inline-block;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 90rpx;

          &.on {
            color: #0183FA;
          }
        }

        .tabTitle_across {
          width: 100rpx;
          height: 4rpx;
          background: #0183FA;
          border-radius: 2rpx;
          margin-left 30rpx;
          display none;

          &.on {
            display block;
          }
        }

      }
    }

    border-radius:20rpx;

    .input-max-box-one {
      overflow: hidden;
      margin-top: 68rpx;

      .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>