laboratory_maintenance_app/pages/login/login.vue

<template>
  <view class="page_css">
    <view class="container">
      <view class="title">科研医疗建筑运维平台</view>
      <view class="sp-login-form">
        <view style="margin-bottom: 32rpx">
          <u-input v-model="userInfo.username" :border="true" placeholder="请输入手机号" />
        </view>
        <view style="margin-bottom: 32rpx">
          <u-input v-model="userInfo.pwd" type="password" :border="true" :password-icon="true" placeholder="请输入密码" />
        </view>
        <u-checkbox-group>
          <u-checkbox @change="rememberPwdChange" v-model="rememberPwd" key="index" name="记住密码">记住密码</u-checkbox>
        </u-checkbox-group>
        <view class="item-bottom">
          <u-button type="primary" :disabled="disabled" @click="formSubmit()">
            登录
          </u-button>
        </view>
        <view class="footer">
          <span @click="linkRegister()">注册账号</span>
          <span @click="forgotPassword()">忘记密码</span>
        </view>
      </view>
    </view>
    <betone-loading ref="BetLoading" id="child-component"></betone-loading>
  </view>
</template>

<script>
import {  bjectToQueryString } from "@/utils/util";
import { sm2 } from 'miniprogram-sm-crypto';
import website from '@/utils/website'
export default {
  data() {
    return {
      clientid: "",
      userInfo: {
        tenantId: "",
        username: "",
        pwd: "",
      },
      rules: {},
      rememberPwd: false, //是否记住密码
    };
  },
  computed: {
    disabled() {
      return !this.userInfo.username || !this.userInfo.pwd;
    },
  },
  mounted() {
    // var info = plus.push.getClientInfo();
    // this.clientid = info.clientid

    this.getTenant();
    this.rememberFn()
  },

  methods: {
    rememberPwdChange() {
      this.rememberPwd = !this.rememberPwd;
      if (this.rememberPwd) {
        uni.setStorage({
          key: "loginInfo",
          data: { ...this.userInfo, 'rememberPwd': true },
        });
      }
    },
    rememberFn() {
      let rememberInfo = uni.getStorageSync('loginInfo')
      if (rememberInfo.rememberPwd) {
        this.userInfo.username = rememberInfo.username
        this.userInfo.pwd = rememberInfo.pwd
        this.rememberPwd = true
      }
    },
    formSubmit() {
      //获取当前手机的cid
      if (this.userInfo.username == "") {
        uni.showToast({ title: "请输入手机号", icon: "none" });
        return false;
      }
      if (this.userInfo.pwd == "") {
        uni.showToast({ title: "请输入密码", icon: "none" });
        return false;
      }
      this.$refs.BetLoading.show();
      // // 实例化smCrypto  child-component
      // const smCryptoInstance = new smCrypto.SM2Instance();
      // // 设置密钥
      // smCryptoInstance.setKey(website.publicKey);

      let formdata = {
        tenantId: this.userInfo.tenantId,
        username: this.userInfo.username,
        password: sm2.doEncrypt(this.userInfo.pwd, website.publicKey, 0),
        grant_type: "captcha",
        scope: "all",
        type: "account",
      };
      if (this.rememberPwd) {
        uni.setStorage({
          key: "loginInfo",
          data: { ...this.userInfo, 'rememberPwd': true },
        });
      } else {
        uni.setStorage({
          key: "loginInfo",
          data: { 'rememberPwd': false },
        });
      }
      // 登录成功之后处理
      this.$u.api
        .login(bjectToQueryString(formdata), formdata)
        .then((res) => {

          uni.setStorage({
            key: "userinfo",
            data: res,
          });
          uni.setStorage({
            key: "token",
            data: res.access_token,
          });
          this.$store.dispatch("changeTabbar", res);

          // this.BetLoading.hide();
        })
        .catch((err) => {
          if (err.error_code == 2004) {
            uni.redirectTo({
              url: "/pages/login/authInfo",
            });
            return false
          }
          // this.BetLoading.hide();
        });
    },

    getTenant() {
      // let domain = getTopUrl();
      let domain = "";
      // 临时指定域名，方便测试
      // domain = "https://bladex.vip";
      this.$u.api.getTenantInfo(domain).then((res) => {
        const data = res.data;
        if (data.success && data.data.tenantId) {
          this.tenantMode = false;
          this.userInfo.tenantId = data.data.tenantId;
          this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
        } else {
          this.userInfo.tenantId = "000000";
        }
      });
    },

    linkRegister() {
      uni.navigateTo({
        url: "/pages/register/index",
      });
    },
    forgotPassword() {
      uni.navigateTo({
        url: "/pages/forgot/forgotPassword",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page_css {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中，如需 */
  width: 100%;

  .container {
    width: 100%;
    border: 2rpx solid #ccc;
    border-radius: 6rpx;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.2);
    margin: 350rpx 64rpx 0;

    .title {
      font-size: 48rpx;
      text-align: center;
      line-height: 60rpx;
      color: rgb(16, 16, 16);
      padding-top: 60rpx;
      padding-bottom: 60rpx;
      font-weight: 550;
    }

    .u-form {
      padding: 0 72rpx;
    }

    .sp-login-form {
      padding: 0 72rpx;
    }

    .item-bottom {
      margin-bottom: 32rpx;
      margin-top: 32rpx;
    }

    .footer {
      margin-bottom: 32rpx;
      overflow: hidden;

      span {
        display: block;
        width: 50%;
        float: left;
        font-size: 28rpx;
        line-height: 40rpx;
        color: rgb(58, 98, 215);
        cursor: pointer;

        &:nth-child(1) {
          text-align: left;
          position: relative;

          &::before {
            content: "";
            width: 1px;
            height: 20rpx;
            position: absolute;
            top: 10rpx;
            right: 0;
            background: rgb(58, 98, 215);
          }
        }

        &:nth-child(2) {
          text-align: right;
        }
      }
    }
  }
}
</style>