zy-pda/pages/login/login.vue

<template>
  <view class="login">
    <view class="login_title"> 医疗服务中心转运系统 </view>
    <form @submit="login" class="form">
      <view class="form_item">
        <view class="form_title">用户名：</view>
        <input class="form_input" name="username" :value="username" placeholder="请输入用户名" />
      </view>
      <view class="form_item">
        <view class="form_title">密<text class="placeholder"></text>码：</view>
        <input class="form_input" name="password" :value="password" password placeholder="请输入密码" />
      </view>
      <view class="form_item">
        <view class="form_title">域<text class="placeholder"></text>名：</view>
        <input class="form_input" name="ip" :value="ip" placeholder="请输入域名或IP地址" />
      </view>
      <view class="form_item">
        <checkbox-group name="savePassword">
          <label>
            <checkbox value="true" :checked="savePassword" /><text>记住密码</text>
          </label>
        </checkbox-group>
      </view>
      <view class="form_submit">
        <button form-type="submit">登录</button>
      </view>
    </form>
    <view class="tips red">
      (此系统为护士人员使用，其他科室人员请勿进行操作)
    </view>
    <seiminModel ref="seiminModel"></seiminModel>
  </view>
</template>

<script>
  import {
    changeIP,
  } from "../../request/config.js";
  import {
    encryptByEnAES,
    encryptByDeAES
  } from "../../utils/index.js";
  import {
    mapActions,
    mapMutations
  } from "vuex";
  export default {
    data() {
      return {
        reFresh: '',
        username: "", //用户名
        password: "", //密码
        ip: "", //域名
        savePassword: false, //是否记住密码
      };
    },
    methods: {
      ...mapActions("login", ["vxLogin"]),
      ...mapMutations("other", ["changeSeiminModel", "resetVxOther"]),
      ...mapMutations("dictionary", ["resetVxDictionary"]),
      ...mapMutations("login", ["resetVxLogin"]),
      ...mapMutations("system", ["resetVxSystem"]),
      // 重置vuex数据
      resetVuex() {
        this.resetVxOther();
        this.resetVxDictionary();
        this.resetVxLogin();
        this.resetVxSystem();
      },
      // 登录
      login(e) {
        let {
          username, //账号
          password, //密码
          ip, //域名
          savePassword, //是否记住密码
        } = e.detail.value;

        savePassword = savePassword.length > 0;
        username = username.trim();
        password = password.trim();
        ip = ip.trim();

        // 用户名，密码不能为空
        if (username === "" || password === "") {
          uni.showToast({
            icon: "none",
            title: "账号或密码错误",
          });
          return;
        }

        // 域名ip正则验证
        let regUrl =
          /^https?:\/\/([\w-]+\.)+((com)|(net)|(org)|(gov\.cn)|(info)|(cc)|(com\.cn)|(net\.cn)|(org\.cn)|(name)|(biz)|(tv)|(cn)|(mobi)|(name)|(sh)|(ac)|   (io)|(tw)|(com\.tw)|(hk)|(com\.hk)|(ws)|(travel)|(us)|(tm)|(la)|(me\.uk)|(org\.uk)|(ltd\.uk)|(plc\.uk)|(in)|(eu)|(it)|(jp))(\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))?$/;
        let regIp =
          /^https?:\/\/((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)(\.((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)){3}(\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))?$/;
        if (!regUrl.test(ip) && !regIp.test(ip)) {
          uni.showToast({
            icon: "none",
            title: "请输入正确的域名或IP",
          });
          return;
        }

        uni.showLoading({
          title: "登录中",
          mask: true,
        });

        let postData = {
          username,
          password,
          type: "APP",
        };

        changeIP(ip);

        this.vxLogin(postData).then((res) => {
          uni.hideLoading();

          if (res.status == 200) {
            //获取角色信息
            res.user = res.user || {};
            res.user.user = res.user.user || {};
            let role = res.user.user.role || [];
            // 护士角色才能登录
            let nurseRole = role.some((item) => item.rolecode === "nurse");
            if (!nurseRole) {
              uni.showToast({
                icon: "none",
                title: "暂无护士角色权限！",
              });
              return;
            }

            // 如果记住密码,则缓存到本地
            if (savePassword) {
              //记住密码
              uni.setStorageSync("savePasswordObj", {
                username: encryptByEnAES(username), //用户名
                password: encryptByEnAES(password), //密码
                ip, //域名
                effectiveDuration: Date.now(), //当前时间戳
              });
            } else {
              uni.removeStorageSync("savePasswordObj");
            }
            // 跳转到首页(isShowSeiminModel,是否显示切换科室弹窗)
            this.changeSeiminModel(true);
            uni.reLaunch({
              url: "/pages/index/index",
            });
          } else {
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: res.remarks || "登录失败",
            });
            throw new Error(res.remarks || "登录失败");
          }
        });
      },
    },
    onLoad() {
      // 清除vuex
      this.resetVuex();
      // 是否记住密码
      let savePasswordObj = uni.getStorageSync("savePasswordObj");
      // 初始化数据
      this.username = '';
      this.password = '';
      this.ip = 'http://zzzx.tjh.com';
      this.savePassword = false;
      if (savePasswordObj) {
        let {
          username,
          password,
          ip,
          effectiveDuration
        } = savePasswordObj;
        if (Date.now() - effectiveDuration < 10 * 24 * 60 * 60 * 1000) {
          //记住密码,10天内有效
          this.username = encryptByDeAES(username);
          this.password = encryptByDeAES(password);
          this.ip = ip;
          this.savePassword = true;
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  .login {
    padding: 180rpx 32rpx 32rpx;
    height: 100vh;
    background: url("../../static/imgs/background.png") no-repeat center bottom;
    background-size: contain;

    .login_title {
      text-align: center;
      color: $defaultColor;
      font-weight: bold;
    }

    .form {
      .form_item {
        margin-top: 32rpx;
        @include flex;

        .form_title {
          @include flex(flex-start, center);
          width: 4em;

          .placeholder {
            display: inline-block;
            width: 1em;
          }
        }

        .form_input {
          box-sizing: content-box;
          flex: 1;
          padding: 16rpx;
          background-color: #fff;
        }
      }

      .form_submit {
        margin-top: 60rpx;
        border-radius: 16rpx;

        uni-button {
          @include btn_background;
          color: #fff;
          font-weight: bold;
        }
      }
    }

    .tips {
      font-size: 28rpx;
      margin-top: 16rpx;
    }
  }
</style>