修改登录

src/views/login/index1.vue

@@ -0,0 +1,465 @@
+<template>
+  <div class="login-container">
+    <div class="login-form-main">
+      <el-form
+        ref="loginForm"
+        :model="loginForm"
+        :rules="loginRules"
+        class="login-form"
+        autocomplete="on"
+        label-position="left"
+      >
+        <div class="title-container">
+          <h3 class="title">
+            阳光会务
+            <div style="font-size: 20px; margin-top: 5px">{{ ver }}</div>
+          </h3>
+        </div>
+
+        <el-form-item prop="mobile">
+          <el-input
+            ref="mobile"
+            v-model="loginForm.mobile"
+            placeholder="手机号"
+            name="mobile"
+            type="text"
+            tabindex="1"
+            maxlength="11"
+            autocomplete="on"
+          >
+          <span class="svg-container" slot="prepend">
+              <i class="el-icon-user" />
+            </span>
+          </el-input>
+        </el-form-item>
+
+   
+          <el-form-item prop="code">
+            
+            <el-input
+              ref="code"
+              v-model="loginForm.code"
+              placeholder="验证码"
+              type="text"
+              tabindex="2"
+              autocomplete="on"
+              maxlength="6"
+             
+            >
+            <span class="svg-container" slot="prepend">
+              <i class="el-icon-unlock" />
+            </span>
+              <el-button slot="append" >获取验证码</el-button>
+            </el-input>
+          </el-form-item>
+
+        <el-button
+          :loading="loading"
+          :disabled="loading"
+          type="primary"
+          style="width: 100%; margin-top: 5px"
+          @click.native.prevent="handleLogin()"
+          >登&nbsp;&nbsp;录</el-button
+        >
+      </el-form>
+    </div>
+
+    <div v-if="loginBeian !== ''" class="beian">
+      <div v-if="loginBeian !== ''" class="beian">
+        <span>{{ loginTitle }}</span>
+        <a target="_blank" :href="loginBeianUrl">{{ loginBeian }}</a>
+        <span />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isnumber, isAlphanumeric, validAlphabets, isMobile } from "@/utils/validate";
+import asyncRequest from "@/apis/service/user";
+import Identify from "@/components/identify";
+import urlConfig from "@/apis/url-config";
+import resToken from "@/mixins/resToken";
+
+export default {
+  name: "Login",
+  components: { Identify },
+  mixins: [resToken],
+  data() {
+    const validatemobile = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("手机号不能为空！"));
+      }
+      if (!isMobile(value)) {
+        callback(new Error("手机号不正确！"));
+      } else {
+        callback();
+      }
+    };
+    const validatecode = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("验证码不能为空！"));
+      } else {
+        if (value.length !== 6) {
+          callback(new Error("验证码为6位！"));
+        } else if (!isnumber(value)) {
+          callback(new Error("验证码必须为数字！"));
+        } else {
+          callback();
+        }
+      }
+    };
+
+    return {
+      ver: "",
+      show: false,
+      loginTitle: urlConfig.loginTitle,
+      loginBeian: urlConfig.loginBeian,
+      loginBeianUrl: urlConfig.loginBeianUrl,
+      loginForm: {
+        mobile: "19944520491",
+        code: "123456",
+        pageCode: "",
+      },
+      loginRules: {
+        mobile: [{ required: true, trigger: "blur", validator: validatemobile }],
+        code: [{ required: true, trigger: "blur", validator: validatecode }],
+      },
+      identifyCode: "",
+      identifyCodes: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+      codeType: "code",
+      capsTooltip: false,
+      loading: false,
+      showDialog: false,
+      redirect: undefined,
+      otherQuery: {},
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        const query = route.query;
+        if (query) {
+          this.redirect = query.redirect;
+          this.otherQuery = this.getOtherQuery(query);
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.refreshCode();
+    // this.getversion();
+    if (this.loginForm.mobile === "") {
+      this.$refs.mobile.focus();
+    } else if (this.loginForm.code === "") {
+      this.$refs.code.focus();
+    }
+  },
+ 
+  methods: {
+    setVisible(val) {
+      this.show = val;
+    },
+    handleClick() {
+      this.show = true;
+    },
+    handleSuccess() {
+      this.show = false;
+      this.handleLogin();
+    },
+  
+   
+    async handleLogin() {
+      try {
+        await this.$refs.loginForm.validate();
+        const response = await this.$store.dispatch("user/login", this.loginForm);
+        const { code } = response;
+        if (Number(code) === 1) this.getMenu();
+        this.loading = false;
+      } catch (e) {
+        console.log(e);
+        this.loading = false;
+      }
+    },
+    getMenu() {
+      this.$store
+        .dispatch("user/getMenuList", this)
+        .then((res) => {
+          window.vm.$router.push({
+            path: "/welcome/dashboard/",
+            query: this.otherQuery,
+          });
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+    getOtherQuery(query) {
+      return Object.keys(query).reduce((acc, cur) => {
+        if (cur !== "redirect") {
+          acc[cur] = query[cur];
+        }
+        return acc;
+      }, {});
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #38c1e7;
+$light_gray: #f2f2f2;
+$cursor: #fff;
+
+.login-container {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  background-image: url("~@/assets/design/bg-pc.jpg");
+  zoom: 1;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  // background-position: center 0;
+  text-align: center;
+  .login-form-main {
+    height: 500px;
+    position: absolute;
+    right: 200px;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    img {
+      width: 400px;
+      height: 350px;
+    }
+
+    .main-title {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      left: 170px;
+      top: 125px;
+      text-align: left;
+      color: #fff;
+      h1 {
+        padding: 0 0 13px 0;
+      }
+      h3 {
+        font-size: 22px;
+      }
+    }
+
+    .login-form {
+      width: 400px;
+      top: -40px;
+      right: 100px;
+      z-index: 3;
+      max-width: 100%;
+      padding: 50px 28px 35px 28px;
+      margin: 0 auto;
+      overflow: hidden;
+      border-radius: 20px;
+
+      // .el-form-item {
+      //   border: 1px solid transparent;
+      //   border-bottom: 1px solid #e1e1e1;
+      //   border-radius: 0px;
+      // }
+
+      // .el-button--primary {
+      //   background-color: #087af5;
+      //   border-color: #087af5;
+      //   height: 46px;
+      //   font-size: 16px;
+      //   text-align: center;
+      //   border-radius: 15px;
+      // }
+    }
+  }
+  // min-height: 100%;
+  // width: 100%;
+  // background-color: $bg;
+  // overflow: hidden;
+  .beian {
+    position: absolute;
+    width: 100%;
+    bottom: 30px;
+    color: #343434;
+    font-size: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    span {
+      padding: 0 10px;
+    }
+    a {
+      display: inline-block;
+      color: #343434;
+      vertical-align: top;
+      font-size: 12px;
+      &:hover {
+        text-decoration: underline;
+        text-decoration-color: #343434;
+      }
+    }
+  }
+  .tips {
+    font-size: 14px;
+    color: #04a2ce;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 8px;
+      }
+    }
+    i {
+      font-size: 20px;
+      margin: 0 0 0 7px;
+    }
+  }
+  .puzzle-box {
+    position: absolute;
+    top: 200px;
+  }
+
+  .svg-container {
+    // padding: 6px 5px 6px 6px;
+    color: #38c1e7;
+    font-weight: bold;
+    vertical-align: middle;
+    // width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: #087af5;
+      margin: 0px auto 30px auto;
+      text-align: center;
+      font-weight: bold;
+      span {
+        display: inline-block;
+        font-size: 18px;
+        vertical-align: top;
+        padding: 10px 0 0 4px;
+      }
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
+}
+
+.s-canvas {
+  margin: 0px;
+  height: 38px;
+}
+
+.el-icon-key,
+.el-icon-user,
+.el-icon-unlock {
+  color: #087af5 !important;
+  font-weight: 700;
+}
+
+@media screen and (max-width: 1800px) {
+  .login-container {
+    .login-form-main {
+      right: 100px;
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .login-container {
+    .login-form-main {
+      right: 50px;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .login-container {
+    background-image: url("~@/assets/design/bg-pad.jpg");
+    .login-form-main {
+      right: 50px;
+      width: 300px;
+    }
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .login-container {
+    background-image: url("~@/assets/design/bg-pad.jpg");
+    .login-form-main {
+      right: 20px;
+      width: 360px;
+    }
+  }
+}
+
+@media screen and (max-width: 840px) {
+  .login-container {
+    background-image: url("~@/assets/design/bg-pad.jpg");
+    .login-form-main {
+      right: 5px;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .login-container {
+    background-image: url("~@/assets/design/bg-phone.jpg");
+    .login-form-main {
+      right: 20px;
+      width: 95%;
+      background: #fff;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 20px;
+      height: auto;
+    }
+  }
+
+  .beian {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0px !important;
+
+    a {
+      color: #fff !important;
+    }
+  }
+}
+</style>