1

components/AppHeader/Login/Login.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="fr clearfix flex items-center">
+    <!-- PC端 -->
+    <div v-if="setting.searchBtn" class="fl mr-5 hidden-sm-and-down">
+      <el-input v-model="keywords" :placeholder="`${$t('searchKeywords')}`" :suffix-icon="Search" @change="onSearch"/>
+    </div>
+    <template v-if="setting.loginBtn">
+      <!-- 未登录 -->
+      <div v-if="!token" class="lang flex justify-center text-center items-center">
+        <el-space class="hidden-sm-and-down">
+          <nuxt-link to="/passport/login?type=register" type="text" class="text-sm text-gray-500">注册</nuxt-link>
+          <el-divider direction="vertical"/>
+          <nuxt-link to="/passport/login" type="text" class="text-sm text-gray-500">登录</nuxt-link>
+        </el-space>
+      </div>
+      <!-- 已登录 -->
+      <div v-else>
+        <div class="header__right items-center pr-4 xl:pr-0 md:flex hidden">
+          <el-space class="sm:flex hidden" size="large">
+            <ClientOnly>
+              <template v-if="token">
+                <el-dropdown @command="handleCommand">
+                  <el-space class="flex items-center cursor-pointer">
+                    <el-avatar class="cursor-pointer" :src="user?.avatar" :size="30" />
+                    <span>{{ user?.nickname }}</span>
+                  </el-space>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="user"><nuxt-link to="/user">用户中心</nuxt-link></el-dropdown-item>
+                      <el-dropdown-item command="password"><nuxt-link to="/user/password">修改密码</nuxt-link></el-dropdown-item>
+                      <el-dropdown-item command="auth"><nuxt-link to="/user/auth">实名认证</nuxt-link></el-dropdown-item>
+                      <el-dropdown-item command="order" divided><nuxt-link to="/user/order">我的订单</nuxt-link></el-dropdown-item>
+                      <el-dropdown-item divided command="logOut"><nuxt-link to="/user/logout">退出登录</nuxt-link>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </template>
+              <template v-else>
+                <el-button type="primary"  v-if="!token" @click="navigateTo(`/passport/login`)">登录/注册</el-button>
+                <!--                <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>-->
+              </template>
+            </ClientOnly>
+          </el-space>
+        </div>
+      </div>
+      <!-- 移动端 -->
+      <div class="hidden-sm-and-up mx-7 sm:mx-0">
+        <div class="el-dropdown-link flex items-center" @click="drawer = true">
+          <el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
+          <el-icon v-else color="black" :size="24"><Fold /></el-icon>
+        </div>
+        <el-drawer
+          v-model="drawer"
+          :size="290"
+        >
+          <div id="menu">
+            <el-menu
+              currentIndex="/product"
+              :unique-opened="true"
+            >
+              <template v-for="(item,index) in navigations" :key="index">
+                <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
+                  <template #title><span>{{ item.title }}</span></template>
+                  <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
+                    <el-space>
+                      <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
+                      <a :href="navTo(sub)">{{ sub.title }}</a>
+                    </el-space>
+                  </el-menu-item>
+                </el-sub-menu>
+                <el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
+              </template>
+            </el-menu>
+<!--            <div v-if="setting.searchBtn" class="search-tools flex justify-center p-4 mt-5">-->
+<!--              <el-input v-model="keywords" placeholder="请输入关键词..." :suffix-icon="Search" @change="onSearch"/>-->
+<!--            </div>-->
+<!--            <div v-if="setting.langBtn" class="lang flex justify-center text-center">-->
+<!--              <el-space>-->
+<!--                <a @click="onLang(`zh`)" class="text-sm text-gray-500">中文版</a>-->
+<!--                <el-divider direction="vertical" />-->
+<!--                <a @click="onLang(`en`)" class="text-sm text-gray-400">English</a>-->
+<!--              </el-space>-->
+<!--            </div>-->
+          </div>
+        </el-drawer>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+import { Search, Fold } from '@element-plus/icons-vue'
+import {useConfigInfo, useMenu, useSetting} from "~/composables/configState";
+import type {CmsLangLog} from "~/api/cms/cmsLangLog/model";
+import {listCmsLangLog} from "~/api/cms/cmsLangLog";
+const token = useToken();
+const user = useUser();
+const navigations = useMenu();
+const setting = useSetting();
+const keywords = ref<string>();
+const drawer = ref<boolean>(false);
+const langList = ref<CmsLangLog[]>([]);
+
+const onSearch = () => {
+  navigateTo(`/search/${keywords.value || '关键词不能为空！'}`)
+}
+
+function handleCommand(command: string) {
+  switch (command) {
+    case 'logOut':
+      logOut();
+      break;
+    default:
+      navigateTo('/user');
+      break;
+  }
+}
+
+// TODO 读取国际化配置
+listCmsLangLog({}).then(list => {
+  langList.value = list;
+})
+
+const onLang = (lang: string) => {
+  navigateTo(`?lang=${lang}`)
+  drawer.value = false;
+}
+
+function logOut() {
+  token.value = '';
+  localStorage.clear();
+  navigateTo('/passport/login')
+}
+</script>
+<style scoped lang="scss">
+.el-menu{
+  border-right: none;
+}
+</style>