metaverse2024vue/src/views/homeComponents/Header.vue

<template>
  <div class="flex items-center justify-between p-4">
    <div class="flex items-center">
      <button
        class="text-white font-medium text-sm hover:bg-gray-600 px-3 py-2 rounded-md focus:outline-none focus:ring focus:border-blue-300 mr-4"
        style="background-color: var(--bg-color1);"
        @click="$router.push('/')"
      >
        <i class="fas el-icon-s-home"></i>
        <span> 首页 </span>
      </button>
      <div class="relative">
        <input
          type="text"
          placeholder="搜索"
          class="searchInput pl-4 pr-10 py-2 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring focus:border-blue-300"
          style="width:300px"
          @keydown="Enterkey"
          v-model="searchValue"
        />
        <button class="absolute buttonBg1 inset-y-0 right-0 px-3 flex items-center text-sm text-white rounded-r-md">
          <i class="fas fa-search search-icon"></i>
          <i class="el-icon-search"></i>
        </button>
      </div>
    </div>
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center">
        <div class="flex justify-center" v-if="getToken()">
          <button
            class="text-white text-sm mr-3 cursor-pointer px-3 py-2 rounded-md"
            style="background-color: var(--bg-color1);"
            @click.prevent="goCreate"
          >
            创建机器人
          </button>
          <button class="text-yellow-400 p-2 w-18 mr-3 flex justify-center items-center">
            <v-icon name="coins" scale="1"/>
            <span class="text-yellow-400 text-lg ml-2">{{ 0 }}</span>
          </button>
          <button class="text-white p-2">
            <i class="fas el-icon-message-solid"></i>
          </button>
          <div class="ml-2">
            <img src="@/assets/images/default_avatar_user.png" class=" w-10 h-10 rounded-full cursor-pointer" alt="">
          </div>
        </div>
        <div v-else class="felx justify-center items-center">
          <button
            class="text-white text-sm mr-3 cursor-pointer px-3 py-2 rounded-md"
            style="background-color: var(--bg-color1);"
            @click.prevent="showLogin"
          >
            登录
          </button>
          <button
            class="text-white text-sm mr-3 cursor-pointer px-3 py-2 rounded-md"
            style="background-color: var(--bg-color1);"
            @click.prevent="showRegister"
          >
            注册
          </button>
        </div>
      </div>
    </div>
    <el-dialog
      class="dialog"
      :visible.sync="showPopup"
      append-to-body
      :show-close="false"
      width="30%"
      :before-close="handleClose">
      <div slot="title" class="popupTitle">
        {{ popupType == 'login' ? '登录' : '注册'}}
      </div>
      <el-form class="form" :rules="loginRules" v-if="popupType == 'login'" ref="formLogin" :model="formLogin" label-width="0">
        <el-form-item label="" prop="account">
          <el-input v-model="formLogin.account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="formLogin.password" placeholder="密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="">
          <button
            class="formButton text-white text-lg mr-3 cursor-pointer px-3 py-2 rounded-md w-full"
            style="background-color: var(--bg-color1);"
            @click="clickLogin"
          >
            登录
          </button>
        </el-form-item>
        <el-form-item label="">
          <span style="font-size: 1rem;">
            还没有账号吗？
            <span class="textButton" @click="popupType = 'register'">注册</span>
          </span>
        </el-form-item>
      </el-form>
      <el-form class="form" :rules="registerRules" v-if="popupType == 'register'" ref="formRegister" :model="formRegister" label-width="0">
        <el-form-item label="" prop="account"> 
          <el-input v-model="formRegister.account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="formRegister.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="" prop="repeatPassword">
          <el-input v-model="formRegister.repeatPassword" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item label="">
          <button
            class="formButton text-white text-lg mr-3 cursor-pointer px-3 py-2 rounded-md w-full"
            style="background-color: var(--bg-color1);"
            @click="clickRegister"
          >
            注册
          </button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 引入需要的图标
import 'vue-awesome/icons/coins'
import { register } from "@/api/login.js"
import { getToken, setToken, removeToken } from '@/utils/auth'
import LoginContent from '@/views/homeComponents/login.vue'
export default {
  props: ['searchName'],
  components: {
    LoginContent
  },
  data() {
    return {
      showPopup: false,
      popupType: 'login',
      getToken,
      searchValue: '',
      formLogin: {
        account: null,
        password: null,
      },
      formRegister: {
        account: null,
        password: null,
        repeatPassword: null,
      },
      loginRules: {
        account: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
        ]
      },
      registerRules: {
        account: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
        ],
        repeatPassword: [
          { required: true, message: '请输入确认用户密码', trigger: 'blur' },
        ],
      }
    }
  },
  mounted() {
    console.log(this.searchName, 'this.searchName');
  },
  watch: {
    searchName: {
      handler(val) {
        // console.log(val, '监听searchName');
        this.searchValue = val
      },
      immediate: true,
    },
  },
  methods: {
    handleClose() {
      this.showPopup = false
    },
    showLogin() {
      this.$store.commit('app/TOGGLE_POPUP', true)
      // this.popupType = 'login'
      
      
    },
    showRegister() {
      this.showPopup = true
      this.popupType = 'register'
      this.$nextTick(() =>{
        this.$refs.formRegister.resetFields()
      })
    },
    clickLogin() {
      this.$refs.formLogin.validate((valid) => {
        if (valid) {
          this.$store.dispatch('Login', this.formLogin).then(() => {
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            this.showPopup = false
          })
        }
      })
    },
    clickRegister() {
      this.$refs.formRegister.validate((valid) => {
        if (valid) {
          register(this.formRegister).then(res => {
            console.log(res, '注册结果');
            setToken(res.data.userToken)
            this.$store.commit('SET_TOKEN', res.data.userToken)
            this.$message({
              message: '注册成功',
              type: 'success'
            });
            this.showPopup = false
          })
        }
      })
    },
    Enterkey(e) {
      if (e.keyCode == 13) {
        this.toHomeSearch()
      }
    },
    toHomeSearch() {
      console.log(this.$route, 'this.$route');
      if (this.$route.path == '/home') {
        this.$emit('search', this.searchValue)
      } else {
        this.$router.push({
          name: 'Home',
          params: {
            searchValue: this.searchValue
          }
        })
      }
    },
    goCreate() {
      this.$router.push('/create')
    }
  }
}
</script>

<style lang="scss" scoped>

.searchInput {
  background-color: #ffffff00;
  border: 1px solid #ffffff4d;
}

</style>
<style scoped>
  .textButton {
    font-size: 1rem;
    color: var(--bg-color1);
    cursor: pointer;
  }
  .formButton {
    letter-spacing: 4px;
  }
  .dialog >>> .el-dialog__body {
    padding: 20px;
  }
  .dialog >>> .el-dialog {
    border-radius: 10px;
  }
  .form >>> .el-input__inner {
    font-size: 1rem;
    padding: 5px 15px;
    height: 40px;
  }
</style>