epmet-work-pc/src/views/pages/login.vue

<template>
  <div class="g-app">
    <div class="g-bd" v-if="isShowLogin || true">
      <div class="m-fm">
      <div class="loginLeftBox">
        <img src="@/assets/img/login/loginLeft.png" width="720px" height="586px" class="i-left">
      </div>
        <div class="fm">
          <img src="@/assets/images/index/logo.png" width="50px" height="50px" class="i-logo">
          <h2 class="title">{{ $t("brand.work") }}</h2>
          <el-form
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            @keyup.enter.native="dataFormSubmitHandle()"
          >
            <div class="fm-item">
              <el-form-item prop="phone" class="input">
                <el-input
                  type="text"
                  v-model="dataForm.phone"
                  placeholder="账号"
                >
                <template slot='suffix'>
                  <div  class="suffix"><img width="16px" src="@/assets/images/index/i-people.png" alt="">
                  </div>
                 </template>
                 </el-input>
              </el-form-item>
            </div>
            <div class="fm-item">
              <el-form-item prop="password" class="input">
                <el-input
                  type="password"
                  v-model="dataForm.password"
                  :placeholder="$t('login.password')"
               >
               <template slot='suffix'>
                 <div class="suffix">
                  <img width="16px" src="@/assets/images/index/i-lock.png" alt=""/>
                 </div>
                 </template>
               </el-input>
              </el-form-item>
            </div>
            <div class="fm-captcha">
              <div class="fm-item">
                <el-form-item prop="captcha" class="input">
                  <el-input
                    type="text"
                    v-model="dataForm.captcha"
                    placeholder="验证码"
                  > 
                  <template slot='suffix'>
                    <div  class="suffix">
                    <img width="16px" src="@/assets/images/index/i-code.png" alt=""/>
                  </div>
                 </template>
                </el-input>
                </el-form-item>
              </div>
              <div class="captcha">
                <img :src="captchaPath" @click="getCaptcha()" />
              </div>
            </div>

            <div class="fm-btn" @click="dataFormSubmitHandle()">
              {{ $t("login.title") }}
            </div>
          </el-form>
        </div>
      </div>

      <!-- <div class="m-footer">
        <div class="login-footer">
          <p>
            <a href="" target="_blank">{{ $t("login.copyright") }}</a>
          </p>
        </div>
      </div> -->
    </div>

    <c-dialog
      :showFooter="false"
      :title="'选择客户'"
      :isNest="false"
      :visible="diaVisible"
      :dialogHeight="0.8"
      :width="30"
      :top="'120px'"
      @cancel="diaCancel"
    >
      <div class="m-pop">
        <div v-for="(item, index) in tableData" :key="index" class="div_row">
          <span @click="selectCustomer(item)" class="span_name">{{
            item.customerName
          }}</span>
        </div>
      </div>
    </c-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import CDialog from "@c/CDialog";
import debounce from "lodash/debounce";
import { messages } from "@/i18n";
import { getUUID, encryptedData } from "@/utils";
import { Loading } from "element-ui"; // 引入Loading服务

let loading; // 加载动画
export default {
  data() {
    return {
      pubKey: null, // 获取到公钥
      isShowLogin: true,
      i18nMessages: messages,
      captchaPath: "",
      dataForm: {
        customerId: "",
        app: "gov",
        client: "web",
        username: "",
        phone: "",
        password: "",
        uuid: "",
        captcha: "",
      },
      // 客户列表相关
      diaVisible: false,
      tableLoading: false,
      tableData: [],
    };
  },
  components: {
    CDialog,
  },
  computed: {
    dataRule() {
      return {
        phone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      };
    },
  },
  created() {
    //平阴联动平台 登陆
    if (this.$route.query.platformToken) {
      this.isShowLogin = false;
      this.getAutoLogin(this.$route.query.platformToken);
    } else {
      this.getCaptcha();
      //获取公钥
      this.getPubKey();
    }
  },
  mounted() {
    localStorage.removeItem("showHeader");
  },

  methods: {
    // 登陆后跳转逻辑
    skipAfterLogin() {
      let href = localStorage.getItem("thePageAtExit");
      if (href && href.indexOf("login") == -1) {
        localStorage.removeItem("thePageAtExit");
        location.href = href;
      } else {
        localStorage.removeItem("thePageAtExit");
        this.$router.replace({ name: "main" });
      }
    },
    // 获取公钥
    getPubKey() {
      this.$http
        .post("/auth/govweb/getKey")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.pubKey = res.data; // 获取到公钥;
        })
        .catch(() => {});
    },
    // 获取验证码
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/auth/login/captcha?uuid=${this.dataForm.uuid}`;
    },
    // 表单提交
    dataFormSubmitHandle() {
      this.$refs["dataForm"].validate((valid, messageObj) => {
        console.log(valid, messageObj);
        if (!valid) {
          app.util.validateRule(messageObj);
          return;
        }
        this.startLoading();
        const url = "/epmetuser/customerstaff/customerlist";
        const params = {
          phone: encryptedData(this.pubKey, this.dataForm.phone),
        };
        window.app.ajax.post(
          url,
          params,
          (data, rspMsg) => {
            if (data.length === 0) {
              //没有客户，提示无法登录
              this.$message.error("账号不存在");
              this.endLoading();
            } else if (data.length === 1) {
              this.selectCustomer(data[0]);
            } else {
              this.endLoading();
              this.diaVisible = true;
              this.$nextTick(() => {
                this.tableData = data;
              });
            }
          },
          (rspMsg, data) => {
            this.endLoading();
            this.$message.error(rspMsg);
          }
        );
      });
    },
    // 平阴联动 自动登录接口
    getAutoLogin(platformToken) {
      this.dataForm.thirdToken = platformToken;
      this.dataForm.platform = "pyld";
      this.$http
        .post(`/auth/sso/oper/third/login`, this.dataForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            if (res.code == 8302) {
              return this.$message.error(res.msg);
            }
            return this.$message.error(res.msg);
          }
          localStorage.setItem("customerId", res.data.customerId);
          localStorage.setItem("userType", "work");
          localStorage.setItem("showHeader", "0");
          localStorage.setItem("token", res.data.token);
          this.skipAfterLogin();
        })
        .catch(() => {});
      // epmet-ext9.elinkservice.cn/platform-admin
    },
    //选择客户
    selectCustomer(row) {
      localStorage.setItem("customerId", row.customerId);
      localStorage.setItem("customerName", row.customerName);
      this.startLoading();
      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/auth/govweb/login'
      const url = "/auth/govweb/login";
      this.dataForm.customerId = row.customerId;
      let param = {};
      Object.assign(param, this.dataForm);
      param.phone = encryptedData(this.pubKey, this.dataForm.phone);
      param.password = encryptedData(this.pubKey, this.dataForm.password);
      this.$http
        .post(url, param)
        .then(({ data: res }) => {
          this.endLoading();
          if (res.code !== 0) {
            this.getCaptcha();
            return this.$message.error(res.msg);
          }
          this.diaVisible = false;

          localStorage.setItem("userType", "work");
          localStorage.setItem("token", res.data.token);
          this.skipAfterLogin();
        })
        .catch(() => {
          this.endLoading();
        });
    },
    // 取消
    diaCancel() {
      this.diaVisible = false;
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/pages/login.scss" scoped></style>