helongyang
16 小时以前 06eb604f71605c47f015b88b1620b72b6f69df8c
´úÂë¹ÜÀí/WCS/WIDESEAWCS_Client/src/views/Login.vue
@@ -8,28 +8,50 @@
            <div>欢迎登录...</div>
            <div class="login-line"></div>
          </div>
          <div style="flex:1;"></div>
          <div style="flex: 1"></div>
        </div>
        <div class="login-text-small">WELCOME TO LOGIN</div>
        <div class="item">
          <div class="input-icon el-icon-user"></div>
          <input type="text" v-focus v-model="userInfo.userName" placeholder="请输入账号" />
          <input
            type="text"
            v-focus
            v-model="userInfo.userName"
            placeholder="请输入账号"
          />
        </div>
        <div class="item">
          <div class="input-icon el-icon-lock"></div>
          <input type="password" v-focus v-model="userInfo.password" placeholder="请输入密码" />
          <input
            type="password"
            v-focus
            v-model="userInfo.password"
            placeholder="请输入密码"
          />
        </div>
        <div class="item">
          <div class="input-icon el-icon-mobile"></div>
          <input v-focus type="text" v-model="userInfo.verificationCode" placeholder="输入验证码" />
          <input
            v-focus
            type="text"
            v-model="userInfo.verificationCode"
            placeholder="输入验证码"
          />
          <div class="code" @click="getVierificationCode">
            <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
          </div>
        </div>
      </div>
      <div class="loging-btn">
        <el-button size="large" :loading="loading" color="#3a6cd1" :dark="true" @click="login" long>
        <el-button
          size="large"
          :loading="loading"
          color="#3a6cd1"
          :dark="true"
          @click="login"
          long
        >
          <span v-if="!loading">登录</span>
          <span v-else>正在登录...</span>
        </el-button>
@@ -84,51 +106,52 @@
  ref,
  reactive,
  toRefs,
  getCurrentInstance
} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import store from '../store/index';
import http from '@/../src/api/http.js';
  getCurrentInstance,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../store/index";
import http from "@/../src/api/http.js";
export default defineComponent({
  setup(props, context) {
    store.commit('clearUserInfo', '');
    store.commit("clearUserInfo", "");
    const loading = ref(false);
    const codeImgSrc = ref('');
    const codeImgSrc = ref("");
    const userInfo = reactive({
      userName: '',
      password: '',
      verificationCode: '',
      UUID: undefined
      userName: "",
      password: "",
      verificationCode: "",
      UUID: undefined,
    });
    const getVierificationCode = () => {
      http.get('/api/User/getVierificationCode').then((x) => {
        codeImgSrc.value = 'data:image/png;base64,' + x.img;
      http.get("/api/User/getVierificationCode").then((x) => {
        codeImgSrc.value = "data:image/png;base64," + x.img;
        userInfo.UUID = x.uuid;
      });
    };
    getVierificationCode();
    let appContext = getCurrentInstance().appContext;
    let $message = appContext.config.globalProperties.$message;
    let router = useRouter();
    const login = () => {
      if (!userInfo.userName) return $message.error('请输入用户名');
      if (!userInfo.password) return $message.error('请输入密码');
      if (!userInfo.userName) return $message.error("请输入用户名");
      if (!userInfo.password) return $message.error("请输入密码");
      if (!userInfo.verificationCode) {
        return $message.error('请输入验证码');
        return $message.error("请输入验证码");
      }
      loading.value = true;
      http.post('/api/User/login', userInfo, '正在登录....').then((result) => {
      http.post("/api/User/login", userInfo, "正在登录....").then((result) => {
        if (!result.status) {
          loading.value = false;
          getVierificationCode();
          return $message.error(result.message);
        }
        $message.success('登录成功,正在跳转!');
        store.commit('setUserInfo', result.data);
        router.push({ path: '/' });
        $message.success("登录成功,正在跳转!");
        store.commit("setUserInfo", result.data);
        router.push({ path: "/" });
      });
    };
    const loginPress = (e) => {
@@ -137,7 +160,7 @@
      }
    };
    const openUrl = (url) => {
      window.open(url, '_blank');
      window.open(url, "_blank");
    };
    return {
      loading,
@@ -146,16 +169,16 @@
      login,
      userInfo,
      loginPress,
      openUrl
      openUrl,
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      }
    }
  }
      },
    },
  },
});
</script>
<style lang="less" scoped>
@@ -360,7 +383,6 @@
<style lang="less" scoped>
@media screen and (max-width: 700px) {
  .login-bg,
  .account-info,
  .app-link,