eoss-ui 0.3.97

package/packages/login/src/main.vue

@@ -0,0 +1,1193 @@
+<template>
+  <div
+    v-if="!code"
+    class="es-login-screen"
+    :style="{
+      'background-image': getImgUrl(loginBackgroundUrl)
+    }"
+  >
+    <img v-if="loginLogoUrl" class="es-login-logo" :src="loginLogoUrl" />
+    <slot></slot>
+    <div
+      class="es-login"
+      v-loading.fullscreen.lock="submit"
+      element-loading-text="登录中..."
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.65)"
+      :style="transform"
+    >
+      <img v-if="loginNameUrl" class="es-login-name" :src="loginNameUrl" />
+      <div
+        class="es-login-main"
+        :style="{
+          'background-image': getImgUrl(loginImageUrl)
+        }"
+      >
+        <div
+          v-if="switchs > 1"
+          :class="{
+            'es-login-switch': switchs == 2,
+            'es-login-switchs': switchs > 2
+          }"
+        >
+          <i
+            v-for="(item, index) in icons"
+            v-show="switchs > 2 || active != item.type"
+            @click="switchLogin(item.type)"
+            :title="switchs > 2 ? item.name : ''"
+            :key="index"
+            :class="[
+              item.icon,
+              'es-icon',
+              { 'es-icon-active': active == item.type }
+            ]"
+          ></i>
+        </div>
+        <div class="es-login-form-box">
+          <template v-if="isShow(active) && active == 0">
+            <el-form ref="login" class="es-login-form" :model="formData">
+              <div class="es-login-title">
+                <span class="es-login-title-content">{{ title }}</span>
+              </div>
+              <el-form-item
+                size="large"
+                prop="username"
+                :rules="username.rules"
+              >
+                <el-input
+                  v-model="formData.username"
+                  size="large"
+                  type="text"
+                  name="username"
+                  :placeholder="username.placeholder"
+                  @blur="handleBlur"
+                  autocomplete="off"
+                >
+                  <template slot="prefix">
+                    <i class="es-icon-zhanghao es-label-user"></i>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item
+                size="large"
+                prop="password"
+                :rules="password.rules"
+              >
+                <el-input
+                  v-model="formData.password"
+                  size="large"
+                  name="password"
+                  type="password"
+                  :placeholder="password.placeholder"
+                  autocomplete="off"
+                  show-password
+                >
+                  <template slot="prefix">
+                    <i class="es-icon-mima es-label-password"></i>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item
+                size="large"
+                prop="identifyingCode"
+                :rules="[{ required: true, message: '验证码不能为空' }]"
+                v-if="imgCode"
+              >
+                <el-input
+                  size="large"
+                  name="identifyingCode"
+                  type="text"
+                  v-model="formData.identifyingCode"
+                  placeholder="请输入验证码"
+                  autocomplete="off"
+                  class="es-label-image-code"
+                >
+                  <template slot="prefix">
+                    <i class="es-icon-yanzheng es-label-code-image"></i>
+                  </template>
+                  <template slot="suffix">
+                    <img
+                      class="es-img-code"
+                      :src="imageCode"
+                      @click.stop="getImgCode"
+                    />
+                  </template>
+                </el-input>
+              </el-form-item>
+              <div class="es-password-handle" v-show="remember && forget">
+                <el-checkbox
+                  v-show="remember && active == '0'"
+                  v-model="checked"
+                  >记住密码</el-checkbox
+                >
+                <div v-show="forget" class="es-password-forget">
+                  <span @click="handleForget">忘记密码？</span>
+                </div>
+              </div>
+              <el-button
+                class="es-button-submit"
+                type="primary"
+                @click="handleLogin"
+                >登录</el-button
+              >
+            </el-form>
+          </template>
+          <template
+            v-if="isShow(active) && (active == 3 || active == 7 || active == 9)"
+          >
+            <div class="es-login-qrcode">
+              <div class="es-login-title">
+                <div class="es-login-title-content">
+                  {{ iconfonts[active].name }}
+                </div>
+              </div>
+              <div class="es-login-down-app">
+                打开
+                <template v-if="active == 3">
+                  <a class="es-login-app-name es-pointer" v-if="downloadApp"
+                    >{{ app }}app</a
+                  >
+                  <span
+                    class="es-login-app-name es-pointer"
+                    v-else
+                    @click="handleDownLoadApp"
+                    >{{ app }}app
+                  </span>
+                </template>
+                <span class="es-login-app-name" v-else
+                  >{{ active == 7 ? '钉钉' : '微信' }}app </span
+                >，扫描二维码
+              </div>
+              <es-qr-code
+                :content="identifyingId"
+                v-if="active == 3"
+              ></es-qr-code>
+              <div class="es-wx-qrcode-box" v-if="active == 9">
+                <es-wxlogin
+                  href="data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgICB3aWR0aDogMTAwJSAhaW1wb3J0YW50OwogICAgYm94LXNpemluZzogYm9yZGVyLWJveCAhaW1wb3J0YW50OwogICAgbWFyZ2luOiAwICFpbXBvcnRhbnQ7Cn0KCi5pbXBvd2VyQm94IC5pbmZvLAouaW1wb3dlckJveCAudGl0bGUgewogICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Owp9"
+                  height="300px"
+                  :appid="wechatAppid"
+                  :scope="wechatScope"
+                  :redirect_uri="redirectUri"
+                ></es-wxlogin>
+              </div>
+            </div>
+          </template>
+          <template v-if="isShow(active) && (active == 6 || active == 11)">
+            <el-form
+              ref="login"
+              class="es-login-form es-login-verify"
+              :model="formData"
+            >
+              <div class="es-login-title">
+                <span class="es-login-title-content">{{
+                  iconfonts[active].name
+                }}</span>
+              </div>
+              <el-form-item
+                size="large"
+                prop="target"
+                :rules="active == 6 ? phone.rules : email.rules"
+              >
+                <el-input
+                  v-model="formData.target"
+                  size="large"
+                  type="text"
+                  name="target"
+                  :placeholder="
+                    active == 6 ? phone.placeholder : email.placeholder
+                  "
+                  @blur="handleBlur"
+                  autocomplete="off"
+                >
+                  <template slot="prefix">
+                    <i class="es-icon-zhanghao es-label-user"></i>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item
+                size="large"
+                prop="verificationCode"
+                :rules="[{ required: true, message: '验证码不能为空' }]"
+              >
+                <el-input
+                  size="large"
+                  name="verificationCode"
+                  type="text"
+                  v-model="formData.verificationCode"
+                  placeholder="请输入验证码"
+                  autocomplete="off"
+                  class="es-label-image-code"
+                >
+                  <template slot="prefix">
+                    <i class="es-icon-yanzheng es-label-code-image"></i>
+                  </template>
+                  <template slot="suffix">
+                    <el-button
+                      class="es-get-code"
+                      type="primary"
+                      :disabled="disabled"
+                      @click.stop="getCode"
+                      >{{ btnText }}</el-button
+                    >
+                  </template>
+                </el-input>
+              </el-form-item>
+              <div class="es-password-handle" v-show="remember || forget">
+                <el-checkbox
+                  v-show="remember && active == '0'"
+                  v-model="checked"
+                  >记住密码</el-checkbox
+                >
+                <div
+                  v-show="forget"
+                  class="es-password-forget"
+                  @click="handleForget"
+                >
+                  忘记密码？
+                </div>
+              </div>
+              <el-button
+                class="es-button-submit"
+                type="primary"
+                @click="handleLogin"
+                >登录</el-button
+              >
+            </el-form>
+          </template>
+          <div class="es-downloadSetup" v-if="downloadSetup">
+            <slot name="button"></slot>
+            <span @click="downloadExe">初次使用请下载一键安装包</span>
+          </div>
+          <div class="es-warning" v-if="warning">
+            {{ warnInfo }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="icp && icpInfo" class="es-login-icp">
+      <span class="es-login-icp-item" :style="icpStyle">{{
+        icpInfo.copyright_unit
+      }}</span>
+      <a
+        class="es-login-icp-item"
+        target="_blank"
+        :style="icpStyle"
+        :href="icpInfo.copyright_icp_url"
+        >{{ icpInfo.copyright_icp }}</a
+      >
+    </div>
+    <es-dialog
+      v-if="showResetPassword"
+      title="修改密码"
+      width="680px"
+      height="auto"
+      :visible.sync="showResetPassword"
+    >
+      <slot name="user" :secret="secret" :is-encrypt="isEncrypt">
+        <reset-password
+          :secret="secret"
+          :is-encrypt="isEncrypt"
+          :type="passModifyModel"
+          @success="handleSuccess"
+        ></reset-password
+      ></slot>
+    </es-dialog>
+    <es-dialog
+      title="客户端下载"
+      width="80%"
+      height="80%"
+      custom-class="es-clients-dialog"
+      :visible.sync="showDownLoadApp"
+      ><es-clients v-bind="download"></es-clients>
+    </es-dialog>
+  </div>
+</template>
+<script>
+import resetPassword from './resetPassword.vue';
+import store from 'eoss-ui/src/utils/store';
+import util from 'eoss-ui/src/utils/util';
+import rules from 'eoss-ui/src/utils/rules.js';
+import {
+  initLogin,
+  changeImg,
+  doUserLogin,
+  doQrLogin,
+  getLoginCode,
+  doCodeLogin,
+  doWechatQrLogin
+} from 'eoss-ui/src/config/api.js';
+export default {
+  name: 'EsLogin',
+  inheritAttrs: false,
+  components: {
+    resetPassword
+  },
+  props: {
+    //初始登录配置接口地址
+    initLogin: {
+      type: String,
+      default: initLogin
+    },
+    title: {
+      type: String,
+      default: '账号登录'
+    },
+    loginBackground: [String, Array],
+    loginImage: [String, Array],
+    loginLogo: String,
+    loginName: String,
+    type: String,
+    //是否加密传输
+    isEncrypt: {
+      type: Boolean,
+      default: true
+    },
+    model: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    username: {
+      type: Object,
+      default: () => {
+        return {
+          placeholder: '请输入账号',
+          rules: [{ required: true, message: '账号不能为空', trigger: 'blur' }]
+        };
+      }
+    },
+    phone: {
+      type: Object,
+      default: () => {
+        return {
+          placeholder: '请输入手机号',
+          rules: [
+            { required: true, message: '手机号不能为空', trigger: 'blur' },
+            {
+              ...rules.phone,
+              trigger: 'blur'
+            }
+          ]
+        };
+      }
+    },
+    email: {
+      type: Object,
+      default: () => {
+        return {
+          placeholder: '请输入邮箱地址',
+          rules: [
+            {
+              required: true,
+              message: '请输入邮箱地址',
+              trigger: 'blur'
+            },
+            {
+              type: 'email',
+              message: '请输入正确的邮箱地址',
+              trigger: 'blur'
+            }
+          ]
+        };
+      }
+    },
+    password: {
+      type: Object,
+      default: () => {
+        return {
+          placeholder: '请输入密码',
+          rules: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
+        };
+      }
+    },
+    toUrl: String,
+    //账号登录接口地址
+    action: {
+      type: String,
+      default: doUserLogin
+    },
+    //扫码登录接口地址
+    scanAction: {
+      type: String,
+      default: doQrLogin
+    },
+    //图片验证码接口地址
+    codeAction: {
+      type: String,
+      default: changeImg
+    },
+    getLoginCode: {
+      type: String,
+      default: getLoginCode
+    },
+    doCodeLogin: {
+      type: String,
+      default: doCodeLogin
+    },
+    doWechatQrLogin: {
+      type: String,
+      default: doWechatQrLogin
+    },
+    imgCode: {
+      type: [Boolean, Object],
+      default: true
+    },
+    onLogin: Function,
+    onSuccess: Function,
+    onError: {
+      type: Function,
+      default: () => {}
+    },
+    doorIndex: {
+      type: Boolean,
+      default: true
+    },
+    storage: String,
+    warning: {
+      type: [Boolean, String],
+      default: false
+    },
+    icp: {
+      type: Boolean,
+      default: true
+    },
+    icpStyle: {
+      type: Object,
+      default() {
+        return { color: '#ffffff' };
+      }
+    },
+    appName: String,
+    qrImage: String,
+    forget: {
+      type: [Boolean, String],
+      default: true
+    },
+    remember: {
+      type: Boolean,
+      default: true
+    },
+    downloadApp: String,
+    onDownLoadApp: [Function, Boolean],
+    redirect_uri: String,
+    position: {
+      type: String,
+      default: 'center'
+    },
+    useResults: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    transform() {
+      if (this.align === 'left') {
+        return {
+          left: '30%',
+          top: '50%',
+          transform: 'translateY(-51%)'
+        };
+      }
+      if (this.align === 'right') {
+        return {
+          left: '70%',
+          top: '50%',
+          transform: 'translateY(-51%)'
+        };
+      }
+      return {
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -51%)'
+      };
+    },
+    redirectUri() {
+      if (this.redirect_uri) {
+        return this.redirect_uri;
+      } else {
+        return util.win.top.location.href || window.href;
+      }
+    },
+    loginBackgroundUrl() {
+      return this.loginBackground
+        ? this.loginBackground
+        : this.loginBackgroundImg;
+    },
+    loginImageUrl() {
+      return this.loginImage ? this.loginImage : this.loginMainImg;
+    },
+    loginNameUrl() {
+      return this.loginNameImg ? this.loginNameImg : this.loginName;
+    },
+    loginLogoUrl() {
+      return this.loginLogoImg ? this.loginLogoImg : this.loginLogo;
+    },
+    warnInfo() {
+      return this.warning === false
+        ? false
+        : typeof this.warning === 'string'
+        ? this.warning
+        : '本系统为非涉密系统，禁止上传和处理任何涉密文件';
+    },
+    loginType() {
+      if (this.type) {
+        return this.type;
+      }
+      if (this.loginModel) {
+        return this.loginModel;
+      }
+      return '0';
+    },
+    switchs() {
+      return Array.isArray(this.loginType)
+        ? this.loginType.length
+        : this.loginType.split(',').length;
+    },
+    iconfonts() {
+      const types = this.loginType.split(',');
+      return types.length > 2
+        ? {
+            '0': { type: '0', icon: 'es-icon-shuru', name: '账号登录' },
+            '3': { type: '3', icon: 'es-icon-saoma', name: '扫码登录' },
+            '6': { type: '6', icon: 'es-icon-duanxin', name: '短信登录' },
+            '7': { type: '7', icon: 'es-icon-dingding', name: '钉钉扫码登录' },
+            '9': { type: '9', icon: 'es-icon-weixin', name: '微信扫码登录' },
+            '11': { type: '11', icon: 'es-icon-youxiang', name: '邮箱登录' }
+          }
+        : {
+            '0': { type: '0', icon: 'es-icon-jianpan', name: '账号登录' },
+            '3': { type: '3', icon: 'es-icon-qrcode', name: '扫码登录' },
+            '6': { type: '6', icon: 'es-icon-duanxin', name: '短信登录' },
+            '7': { type: '7', icon: 'es-icon-dingding', name: '钉钉扫码登录' },
+            '9': { type: '9', icon: 'es-icon-weixin', name: '微信扫码登录' },
+            '11': {
+              type: '11',
+              icon: 'es-icon-wodeyouxiang',
+              name: '邮箱登录'
+            }
+          };
+    },
+    icons() {
+      let icon = [];
+      const types = this.loginType.split(',');
+      types.forEach(item => {
+        icon.push(this.iconfonts[item]);
+      });
+      return icon;
+    }
+  },
+  watch: {
+    loginType: {
+      immediate: true,
+      handler(val) {
+        this.active = val.split(',')[0];
+      }
+    },
+    active: {
+      immediate: true,
+      handler(val) {
+        this.loginInfo(val == 3);
+      }
+    },
+    appName: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.app = val;
+        }
+      }
+    },
+    qrImage: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.qrimg = val;
+        }
+      }
+    },
+    checked(val) {
+      if (!val) {
+        localStorage.removeItem('unpd');
+        localStorage.removeItem('remember');
+      }
+    },
+    secret: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          if (this.storage) {
+            localStorage.setItem('storage', this.storage);
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      align: this.position,
+      loginBackgroundImg: null,
+      loginMainImg: null,
+      loginNameImg: null,
+      loginLogoImg: null,
+      loginModel: null,
+      passModifyModel: null,
+      active: 0,
+      submit: false,
+      checked: false,
+      formData: this.model,
+      imageCode: '',
+      secret: null,
+      identifyingId: '',
+      download: {},
+      setup: '',
+      sysName: '',
+      icpInfo: '',
+      forgetUrl: this.forget,
+      actionUrl: this.action,
+      downloadSetup: '',
+      app: '',
+      qrimg: '',
+      ios: '',
+      android: '',
+      pad: '',
+      ipad: '',
+      interval: null,
+      showResetPassword: false,
+      showDownLoadApp: false,
+      wechatAppid: null,
+      wechatScope: null,
+      disabled: false,
+      btnText: '获取验证码',
+      timer: null,
+      countdown: 0,
+      code: null,
+      defaultModel: JSON.parse(JSON.stringify(this.model))
+    };
+  },
+  created() {
+    this.code = util.getParams('code');
+    if (this.code) {
+      this.doWechatLogin(this.code);
+    } else {
+      this.getLogin();
+      document.addEventListener('keyup', this.doLogin);
+    }
+  },
+  mounted() {
+    this.getRemember();
+  },
+  methods: {
+    doWechatLogin(code) {
+      util
+        .ajax({
+          method: 'post',
+          url: this.doWechatQrLogin,
+          data: { code: code }
+        })
+        .then(res => {
+          if (res.rCode == 0) {
+            const results = res.results;
+            this.handleResults(results);
+          } else {
+            const msg =
+              res.results && res.results.msg ? res.results.msg : res.msg;
+            this.$message({
+              message: msg || '系统错误，请联系管理员！',
+              type: 'error',
+              duration: 1500,
+              onClose: () => {
+                window.location.href = util.delUrlParam({ key: 'code' });
+                if (window.location.hash) {
+                  location.reload();
+                }
+              }
+            });
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    getImgUrl(urls) {
+      let url = '';
+      if (!urls || !urls.length) {
+        return url;
+      }
+      if (Array.isArray(urls)) {
+        url = urls
+          .map(item => {
+            return `url(${item})`;
+          })
+          .join(',');
+      } else {
+        url = `url(${urls})`;
+      }
+      return url;
+    },
+    getRemember(user) {
+      if (!user) {
+        user = localStorage.getItem('remember');
+        if (user) {
+          user = util.esDecode(user);
+        } else {
+          return false;
+        }
+      }
+      let values = localStorage.getItem('unpd');
+      let value = {};
+      if (values) {
+        values = JSON.parse(values);
+        for (let i in values) {
+          value[util.esDecode(i)] = util.esDecode(values[i]);
+        }
+        if (value[user]) {
+          this.checked = true;
+        }
+        this.$set(this.formData, 'username', user);
+        this.$set(this.formData, 'password', value[user]);
+      }
+    },
+    handleBlur() {
+      if (this.formData.username && !this.formData.password) {
+        this.getRemember(this.formData.username);
+      }
+    },
+    handleRemember() {
+      let values = localStorage.getItem('unpd');
+      let value = {};
+      if (values) {
+        values = JSON.parse(values);
+        for (let i in values) {
+          value[util.esDecode(i)] = util.esDecode(values[i]);
+        }
+      }
+      if (this.checked) {
+        localStorage.setItem('remember', util.esEncode(this.formData.username));
+        value[this.formData.username] = this.formData.password;
+        let data = {};
+        for (let i in value) {
+          data[util.esEncode(i)] = util.esEncode(value[i]);
+        }
+        localStorage.setItem('unpd', JSON.stringify(data));
+      } else {
+        delete value[this.formData.username];
+        if (Object.keys(value)) {
+          let data = {};
+          for (let i in value) {
+            data[util.esEncode(i)] = util.esEncode(value[i]);
+          }
+          localStorage.setItem('unpd', JSON.stringify(data));
+        } else {
+          localStorage.removeItem('unpd');
+        }
+        localStorage.removeItem('remember');
+      }
+    },
+    // 下载app的弹窗
+    handleDownLoadApp() {
+      if (this.onDownLoadApp) {
+        if (typeof this.onDownLoadApp === 'function') {
+          this.onDownLoadApp();
+        } else {
+          this.$emit('handleDownLoadApp');
+        }
+      } else {
+        this.showDownLoadApp = true;
+      }
+    },
+    switchLogin(res) {
+      //this.$refs.login && this.$refs.login.resetFields();
+      this.$refs.login && this.$refs.login.clearValidate();
+
+      this.active = res;
+      this.formData = JSON.parse(JSON.stringify(this.defaultModel));
+    },
+    isShow(res) {
+      return this.loginType.indexOf(res) > -1;
+    },
+    getLogin() {
+      const config = store.get('initLogin');
+      if (config) {
+        this.setConfig(config);
+      } else {
+        util
+          .ajax({ url: this.initLogin })
+          .then(res => {
+            if (res && res.rCode === 0) {
+              store.set('initLogin', res.results);
+              util.setStorage({
+                type: this.storage,
+                key: 'initLogin',
+                value: JSON.stringify(res.results)
+              });
+              this.setConfig(res.results);
+            } else {
+              this.$message({
+                message: res.msg || '系统错误，请联系管理员！',
+                type: 'error',
+                duration: 2000
+              });
+            }
+          })
+          .catch(err => {
+            if (err.message && err.message !== 'canceled') {
+              this.$message.error(err.message);
+            }
+          });
+      }
+    },
+    setConfig(res) {
+      const host = util.getStorage('host');
+      this.identifyingId = res.identifyingId;
+      this.getImgCode();
+      this.download = {
+        android: res.androidDownloadUrl,
+        ios: res.iosDownloadUrl || res.iosDownloadUrl2
+      };
+      this.secret = res.secret;
+      this.setup = res.setup;
+      this.sysName = res.subsystemName;
+      this.downloadSetup = res.downloadSetup;
+      document.title = res.subsystemName;
+      this.app = res.appName || res.subsystemName;
+      this.qrimg = res.qrimg || res.qrImg;
+      this.loginModel = res.loginModel;
+      this.loginBackgroundImg = res.loginBackgroundUrl
+        ? res.loginBackgroundUrl.split(',')
+        : null;
+      this.loginLogoImg = res.loginLogoUrl ? res.loginLogoUrl : null;
+      if (res.subsystemExtend && Object.keys(res.subsystemExtend).length) {
+        this.icpInfo = res.subsystemExtend;
+        this.forgetUrl = res.subsystemExtend.look_pass_url;
+        if (res.subsystemExtend.login_url) {
+          this.actionUrl = res.subsystemExtend.login_url;
+        }
+        if (res.subsystemExtend.applicationName) {
+          localStorage.setItem('appcode', res.subsystemExtend.applicationName);
+        }
+        this.loginMainImg = res.subsystemExtend.loginBoxBackground
+          ? res.subsystemExtend.loginBoxBackground.split(',')
+          : null;
+        this.loginNameImg = res.subsystemExtend.loginBoxName
+          ? res.subsystemExtend.loginBoxName.split(',')
+          : null;
+        if (res.subsystemExtend.loginBoxAlign && this.useResults) {
+          this.align = res.subsystemExtend.loginBoxAlign;
+        }
+      }
+      this.passModifyModel = res.passModifyModel;
+      this.wechatAppid = res.wechatAppid;
+      this.wechatScope = res.wechatScope;
+      if (res.sysLogoIco) {
+        util.setFavicon(res.sysLogoIco);
+      }
+    },
+
+    getImgCode() {
+      if (this.identifyingId === '') {
+        return;
+      }
+      this.imageCode =
+        util.getStorage('host') +
+        this.codeAction +
+        '?identifyingId=' +
+        this.identifyingId +
+        (this.imgCode && typeof this.imgCode == 'object'
+          ? '&' + util.queryParams(this.imgCode)
+          : '') +
+        '&heightflag=' +
+        Math.random();
+
+      return this.imageCode;
+    },
+    getCode() {
+      if (this.countdown) {
+        return false;
+      }
+      if (!this.formData.target) {
+        this.$refs.login.validateField('target');
+        return false;
+      } else {
+        let flag = false;
+        this.$refs.login.validateField('target', res => {
+          flag = res != '';
+        });
+        if (flag) {
+          return false;
+        }
+        let data = {
+          target: this.formData.target,
+          targetType: this.active == '6' ? 'SMS' : 'EMAIL'
+        };
+        this.countdown = 60;
+        this.timer = setInterval(() => {
+          if (this.countdown > 0) {
+            this.countdown--;
+            this.disabled = true;
+            this.btnText = '重新获取' + this.countdown + 's';
+          } else {
+            this.btnText = '重新获取';
+            this.disabled = false;
+          }
+        }, 1000);
+        util
+          .ajax({
+            method: 'post',
+            url: this.getLoginCode,
+            data: data
+          })
+          .then(res => {
+            this.$message({
+              message: res.msg,
+              duration: 2000,
+              type: res ? 'error' : 'success'
+            });
+            // if (res.rCode) {
+            //   clearInterval(this.timer);
+            // }
+          })
+          .catch(err => {
+            if (err.message && err.message !== 'canceled') {
+              this.$message.error(err.message);
+            }
+          });
+      }
+    },
+    handleLogin() {
+      if (this.submit) {
+        return false;
+      }
+      this.$refs['login'].validate(valid => {
+        if (valid) {
+          this.submit = true;
+          const data =
+            this.active == '0'
+              ? {
+                  username: this.formData.username,
+                  password:
+                    this.secret && this.isEncrypt
+                      ? util.esmEncrypt({
+                          data: this.formData.password,
+                          key: this.secret
+                        })
+                      : this.formData.password,
+                  identifyingCode: this.formData.identifyingCode,
+                  identifyingId: this.identifyingId
+                }
+              : {
+                  target: this.formData.target,
+                  verificationCode: this.formData.verificationCode,
+                  targetType: this.active == '6' ? 'SMS' : 'EMAIL'
+                };
+          if (this.onLogin) {
+            if (this.active == '0') {
+              this.onLogin(data, this.getImgCode, this.handleRemember);
+            } else {
+              this.onLogin(data);
+            }
+          } else {
+            this.handleUserLogin(data);
+          }
+        } else {
+          this.submit = false;
+          return false;
+        }
+      });
+    },
+    doLogin(e) {
+      if (util.win.event == undefined) {
+        var key = e.keyCode;
+      } else {
+        var key = util.win.event.keyCode;
+      }
+      if (key == 13) {
+        this.handleLogin();
+      }
+    },
+    handleUserLogin(data) {
+      util
+        .ajax({
+          method: 'post',
+          url: this.active == '0' ? this.actionUrl : this.doCodeLogin,
+          data: data
+        })
+        .then(res => {
+          this.submit = false;
+          if (res.rCode == 0) {
+            this.handleRemember();
+            const results = res.results;
+            this.handleResults(results);
+            if (this.onSuccess) {
+              this.onSuccess(res);
+            }
+          } else {
+            const msg =
+              res.results && res.results.msg ? res.results.msg : res.msg;
+            this.$message({
+              message: msg || '系统错误，请联系管理员！',
+              type: 'error',
+              duration: 1500,
+              onClose: () => {
+                this.getImgCode();
+              }
+            });
+            this.onError(res);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    handleForget() {
+      if (typeof this.forget === 'string') {
+        util.win.open(this.forgetUrl);
+      } else {
+        this.showResetPassword = true;
+      }
+    },
+    downloadExe() {
+      util.win.open(this.downloadSetup);
+    },
+    //获取app登录信息
+    loginInfo(res) {
+      clearInterval(this.interval);
+      if (res) {
+        //this.modifyPasswordfun();
+        this.interval = setInterval(() => {
+          this.initRequestLoginInfo();
+        }, 1000);
+      }
+    },
+    initRequestLoginInfo() {
+      util
+        .ajax({
+          method: 'post',
+          url: this.scanAction,
+          data: {
+            identifyingId: this.identifyingId
+          }
+        })
+        .then(res => {
+          if (res.rCode === 0) {
+            const results = res.results;
+            this.handleResults(results, 3);
+          }
+        })
+        .catch(err => {
+          clearInterval(this.interval);
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    handleResults(results, type) {
+      this.loginInfo(false);
+      switch (results.statusCode) {
+        case 0:
+          util.setStorage({
+            type: this.storage,
+            key: {
+              ssId: results.ssId,
+              token: results.token,
+              Authorization: results.token,
+              deviceUnique: results.deviceUnique,
+              userId: results.userId,
+              userName: results.username,
+              useCaseCodes: results.resourceCodes
+            }
+          });
+          this.$message({
+            message: '登录成功!',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              if (this.toUrl) {
+                util.win.location.href = this.toUrl;
+              } else if (results.doorIndex && this.doorIndex) {
+                util.win.location.href = results.doorIndex;
+              } else {
+                if (util.win.top.location.href.indexOf('login.html') > -1) {
+                  util.win.top.location.href = './main.html';
+                } else {
+                  this.$router.push({ name: 'main' });
+                }
+              }
+              util.removeStorage('timer');
+            }
+          });
+          break;
+        case 2:
+          this.$confirm(
+            results.msg ? results.msg : '密码太简单了, 请修改密码?',
+            '提示',
+            {
+              confirmButtonText: '确定',
+              //cancelButtonText: '取消',
+              type: 'warning'
+            }
+          )
+            .then(() => {
+              if (typeof this.forget === 'string') {
+                util.win.open(this.forgetUrl);
+              } else {
+                this.showResetPassword = true;
+              }
+            })
+            .catch(e => {});
+          break;
+        case 3:
+          let url =
+            results.doorIndex && this.doorIndex
+              ? results.doorIndex
+              : util.win.top.location.href.indexOf('main.html') > -1
+              ? './login.html'
+              : util.win.location.hash
+              ? util.win.location.href.replace('login', 'main')
+              : util.win.location.href;
+          const href = results.authorizeUrl.replace(
+            '{redirectUri}',
+            encodeURIComponent(url)
+          );
+          util.win.top.location.href = href;
+          // util.win.location.href =
+          //   results.authorizeUrl.indexOf('?') > -1
+          //     ? results.authorizeUrl + '&token=' + results.token
+          //     : results.authorizeUrl + '?token=' + results.token;
+          break;
+        default:
+          if (type !== 3) {
+            this.$message({
+              message: results.msg || res.msg,
+              type: 'error',
+              duration: 1500,
+              onClose: () => {
+                if (this.code) {
+                  window.location.href = util.delUrlParam({ key: 'code' });
+                  if (window.location.hash) {
+                    location.reload();
+                  }
+                } else {
+                  this.getImgCode();
+                }
+              }
+            });
+          } else if (this.active == 3) {
+            this.loginInfo(true);
+          }
+      }
+    },
+    handleSuccess() {
+      this.showResetPassword = false;
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('keyup', this.doLogin);
+  }
+};
+</script>