project init

src/page/login/userlogin.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div class="login-title">{{ $t('login.phoneLogin') }}</div>
+    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-form">
+      <el-form-item prop="username">
+        <el-input size="small" style="margin-top: 20px; margin-bottom:10px;"
+          @keyup.enter.native="handleLogin"
+          v-model="loginForm.username"
+          :auto-complete="off"
+          placeholder="请输入您的账号">
+          <i slot="prefix" class="icon-yonghu" />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input size="small"  style="margin-top: 20px; margin-bottom:10px;"
+          type="password"
+          @keyup.enter.native="handleLogin"
+          v-model="loginForm.password"
+          :auto-complete="off"
+          placeholder="请输入您的密码">
+          <i slot="prefix" class="icon-mima"/>
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="this.website.captchaMode" prop="code">
+        <el-input size="small"  style="margin-top: 20px; margin-bottom:10px;"
+          @keyup.enter.native="handleLogin"
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="请输入图形验证码"
+          class="code-input">
+          <i slot="prefix" class="icon-yanzhengma"/>
+        </el-input>
+        <div class="login-code" >
+          <img :src="loginForm.image" class="login-code-img" @click="refreshCode" />
+        </div>
+      </el-form-item>
+      <div>
+        <el-button
+          size="small"
+          type="primary"
+          @click.native.prevent="handleLogin"
+          class="login-submit"
+        >{{$t('login.submit')}}</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import topLang from "@/page/index/top/top-lang";
+// import { info } from "@/api/system/tenant";
+import { getCaptcha } from "@/api/user";
+
+
+export default {
+  name: "login",
+  components: {
+    topLang,
+  },
+  data () {
+    return {
+      loginForm: {
+        //租户ID
+        tenantId: "000000",
+        //用户名
+        username: "",
+        //密码
+        password: "",
+        //账户类型
+        type: "account",
+        //验证码的值
+        code: "",
+        //验证码的索引
+        key: "",
+        //预加载白色背景
+        image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+        //工作站loginTpye值为2
+        loginType:'Type-T'
+      },
+      loginRules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 1, message: "密码长度最少为6位", trigger: "blur" }
+        ]
+      },
+      passwordType: "password"
+    };
+  },
+  watch: {
+
+  },
+  created () {
+    // this.getTenant();
+    this.refreshCode();
+  },
+  mounted () {
+  },
+  computed: {
+    ...mapGetters(["website", "tagWel"])
+  },
+  props: [],
+  methods: {
+    handelGoReg(){
+        this.$router.push({ path: "/reg" });
+    },
+    refreshCode () {
+      getCaptcha().then(res => {
+        const data = res.data;
+        this.loginForm.key = data.key;
+        this.loginForm.image = data.image;
+      })
+    },
+    showPassword () {
+      this.passwordType === ""
+        ? (this.passwordType = "password")
+        : (this.passwordType = "");
+    },
+    handleLogin () {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          const loading = this.$loading({
+            lock: true,
+            text: '登录中,请稍后。。。',
+            spinner: "el-icon-loading"
+          });
+          this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
+            this.$store.dispatch('jlHelpShow', false)
+            this.$router.push({ path: this.tagWel.value });
+            loading.close();
+          }).catch(() => {
+            loading.close();
+            this.refreshCode();
+          });
+        }
+      });
+    },
+    // getTenant () {
+    //   let domain = window.location.href.split("/#/")[0];
+    //   // 临时指定域名，方便测试
+    //   info(domain).then(res => {
+    //     const data = res.data;
+    //     if (data.success && data.data.tenantId) {
+    //       this.tenantMode = false;
+    //       this.loginForm.tenantId = data.data.tenantId;
+    //       this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
+    //     }
+    //   })
+    // }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/styles/login.scss";
+</style>