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">
        <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>
  </view>
</template>

<script>
  import {
    encryptByEnAES,
    encryptByDeAES
  } from '../../utils/index.js'
  import {
    mapActions
  } from "vuex";
  export default {
    data() {
      return {
        username: '', //用户名
        password: '', //密码
        savePassword: false, //是否记住密码
      };
    },
    methods: {
      ...mapActions("user", ["vxLogin"]),
      // 登录
      login(e) {
        let {
          username, //账号
          password, //密码
          savePassword //是否记住密码
        } = e.detail.value;

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

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

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

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

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

          if (res.status == 200) {
            //获取角色信息
            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), //密码
                effectiveDuration: Date.now(), //当前时间戳
              })
            } else {
              uni.removeStorageSync('savePasswordObj');
            }
            // 跳转到首页
            uni.navigateTo({
              url: '../index/index'
            })

          } else {
            uni.showToast({
              icon: "none",
              title: res.remarks || "登录失败",
            });
          }
        });
      },
    },
    onLoad() {
      // 是否记住密码
      let savePasswordObj = uni.getStorageSync("savePasswordObj");
      if (savePasswordObj) {
        console.log(savePasswordObj);
        let {
          username,
          password,
          effectiveDuration
        } = savePasswordObj;
        if (Date.now() - effectiveDuration < 10 * 24 * 60 * 60 * 1000) {
          //记住密码,10天内有效
          this.username = encryptByDeAES(username);
          this.password = encryptByDeAES(password);
          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: 140rpx;

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