WorkloadApp/pages/login/login.vue

<template>
  <view class="page">
    <view class="logo">
      <image
        src="~@/static/logo.png"
        mode="aspectFit"
        class="img"
        @click="toogle"
      ></image>
    </view>
    <view class="form">
      <input
        class="input"
        v-model="username"
        placeholder="请输入用户名"
        @blur="queryDep"
      />
      <ld-select
        :list="depList"
        placeholder="请选择部门"
        class="input select"
        v-model="depId"
        @change="selectDep"
      />
      <input
        class="input"
        :password="true"
        v-model="password"
        placeholder="请输入密码"
      />
      <button class="btn" @tap="calllogin">立即登录</button>
      <view class="label" @tap="forget">忘记密码？</view>
    </view>
  </view>
</template>

<script>
import { queryDep, LoginFunc } from "@/services/login";

export default {
  data() {
    return {
      loading: false,
      username: "",
      password: "",
      depId: "",
      count: 0,
      count2: 0,
      depList: [],
    };
  },
  methods: {
    async calllogin() {
      this.loading = true;
      if (this.username == "") {
        uni.showToast({
          icon: "none",
          title: "请输入手机号或邮箱",
        });
        this.loading = false;
        return;
      }
      if (!this.depId) {
        uni.showToast({
          icon: "none",
          title: "请选择部门",
        });
        this.loading = false;
        return;
      }
      if (this.password == "") {
        uni.showToast({
          icon: "none",
          title: "请输入密码",
        });
        this.loading = false;
        return;
      }
      const { data } = await LoginFunc({
        UserName: this.username,
        Password: this.password,
        DepId: this.depId,
      });
      uni.setStorageSync("token", data.token);
      uni.setStorageSync("user", data.user);
      uni.reLaunch({
        url: "../WorkingHours/index",
      });
    },
    toogle() {
      this.count++;
      if (this.count == 8) {
        const env = uni.getStorageSync("ENV");
        if (env == "dev") {
          uni.setStorageSync("ENV", "deploy");
          uni.showToast({
            icon: "none",
            title: "已切换成正式环境",
          });
        } else {
          uni.setStorageSync("ENV", "dev");
          uni.showToast({
            icon: "none",
            title: "已切换成测试环境",
          });
        }
        setTimeout(() => {
			location.reload();
        }, 1500);
      }
    },
    forget() {
      this.count2++;
      if (this.count2 >= 5) {
        uni.showToast({
          icon: "none",
          title: `当前环境为${uni.getStorageSync("ENV")}`,
        });
      } else {
        uni.showToast({
          duration: 1500,
          icon: "none",
          title: "请联系系统管理员",
        });
      }
    },
    selectDep(value) {
      this.depId = value + "";
    },
    async queryDep() {
      const res = await queryDep({
        userName: this.username,
      });
      this.depId = null;
      this.depList = res.data.map((item) => ({
        label: item.Name,
        value: item.ID,
      }));
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
  // padding-bottom: 50px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: url("~@/static/bg.png") no-repeat center;
  background-size: 100% 100%;
}
.logo {
  height: 220rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  .img {
    height: 138rpx;
  }
}
.form {
  width: 530rpx;
  margin: 0 auto;
  flex-direction: column;
  display: flex;
  padding: 74rpx 56rpx;
  border: 1px solid #fff;
  .input {
    width: 100%;
    margin-bottom: 25rpx;
    background: #fff;
    height: 70rpx;
    color: #777777;
    padding-left: 20rpx;
    font-size: 24rpx;
    border-radius: 0px;
  }
  .select {
    padding: 0;
  }
  .btn {
    background: #5b78bf;
    font-size: 30rpx;
    color: #ffffff;
    width: 100%;
    height: 72rpx;
    margin-top: 100rpx;
  }
  .label {
    font-size: 26rpx;
    margin-top: 50rpx;
    text-align: center;
    color: #ffffff;
  }
}
</style>