vite-zfb/src/layout/login/login.vue

<template>
  <div id="login">
    <el-button type="primary" @click="login">登录</el-button>
    <input v-model="captcha" type="" name="" />
    <img src="https://plaza.4dkankan.com/captcha.jpg" alt="" />
    <a v-if="show">文本</a>
    <router-view></router-view>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Base64 } from "js-base64";
import { loginapi } from "@/api/api";
import { encodeStr } from "@/util/common";
export default defineComponent({
  name: "login",
  components: {},
  setup(props, ctx) {
    const store = useStore();
    const wenben = ref(null);
    console.log(props);
    console.log(ctx);
    const router = useRouter();
    console.log(router);
    const data = reactive({
      show: false,
      username: "18819272208",
      password: "zfb123456",
      //   captcha: "",
    });
    console.log(data);
    const login = () => {
      data.show = true;
      console.log(data.show);
      let params = {
        username: data.username,
        password: encodeStr(Base64.encode(data.password)),
        // password: data.password,
        captcha: data.captcha,
      };
      store.dispatch("setUserInfo", params);
      console.log(store.state.userInfo);
      loginapi(params)
        .then((res) => {
          console.log(res);
          router.push("/home");
        })
        .catch((err) => {
          console.log(params);
          console.log(err);
        });
    };

    onMounted(() => {
      //   wenben.value.style = "display:none;";
    });

    return {
      login,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="scss"></style>