epmet-oper-gov/src/views/pages/login.vue

<template>
  <div class="g-app">
    <div class="g-bd"
         v-if="isShowLogin || true">
      <div class="m-fm">
        <div class="wrap">
          <h2 class="title">{{ $t('brand.work') }}</h2>
          <div class="fm">
            <el-form :model="dataForm"
                     :rules="dataRule"
                     ref="dataForm"
                     @keyup.enter.native="dataFormSubmitHandle()"
                     status-icon>
              <div class="fm-item">
                <div class="ico">
                  <img src="@/assets/img/login/zhanghao.png"
                       alt="" />
                </div>
                <div class="input">
                  <input type="text"
                         v-model="dataForm.phone"
                         placeholder="账号" />
                </div>
              </div>
              <div class="fm-item">
                <div class="ico">
                  <img src="@/assets/img/login/mima.png"
                       alt="" />
                </div>
                <div class="input">
                  <input type="password"
                         v-model="dataForm.password"
                         :placeholder="$t('login.password')" />
                </div>
              </div>
              <div class="fm-captcha">
                <div class="fm-item">
                  <div class="input">
                    <input type="text"
                           v-model="dataForm.captcha"
                           placeholder="验证码" />
                  </div>
                </div>
                <div class="captcha">
                  <img :src="captchaPath"
                       @click="getCaptcha()" />
                </div>
              </div>

              <div class="fm-btn"
                   @click="dataFormSubmitHandle()">
                {{ $t('login.title') }}
              </div>
              <div class="hint">请使用小程序端的账号密码登录</div>
            </el-form>
          </div>
        </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 v-for="(item, index) in tableData"
           :key="index"
           class="div_row">
        <span @click="selectCustomer(item)"
              class="span_name">{{
          item.customerName
        }}</span>
      </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 } from '@/utils'
import { Loading } from 'element-ui' // 引入Loading服务
import JSEncrypt from 'jsencrypt' //引入加密

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: {
    // 获取公钥
    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) => {
        if (!valid) {
          app.util.validateRule(messageObj)
        }
        this.startLoading()
        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/customerstaff/customerlist'
        const url = '/epmetuser/customerstaff/customerlist'
        const params = {
          phone: 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')
          Cookies.set('token', res.data.token)
          this.$router.replace({ name: 'home' })
        })
        .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.password = this.encryptedData(this.pubKey, this.dataForm.password)
      this.$http
        .post(url, param)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.getCaptcha()
            return this.$message.error(res.msg)
          }
          this.diaVisible = false

          localStorage.setItem('userType', 'work')

          Cookies.set('token', res.data.token)
          this.$router.replace({ name: 'indexWork' }).catch(() => { })
        })
        .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()
      }
    },
    // 加密
    encryptedData (key, data) {
      // 新建JSEncrypt对象
      let encryptor = new JSEncrypt()
      // 设置公钥
      encryptor.setPublicKey(key)
      // 加密数据
      return encryptor.encrypt(data)
    }
  }
}
</script>

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