2020/4/21 17:30

Selenium39 · Apr 21, 2020 · 22e46a0 · 22e46a0
1 parent 1095395
commit 22e46a0
Show file tree

Hide file tree

Showing 8 changed files with 261 additions and 17 deletions.
diff --git a/components/public/header/city.vue b/components/public/header/city.vue
@@ -1,13 +1,17 @@
 <template>
   <div class="c-city">
-      <i class="el-icon-location"/> 北京市
-      <nuxt-link to="/changeCity"/>
-      [香河 廊坊 天津]
+    <i class="el-icon-location" /> 北京市
+    <nuxt-link to="/changeCity" />[香河 廊坊 天津]
   </div>
 </template>
 
 <script>
 export default {};
 </script>
 <style>
+.c-city {
+  margin-top: 20px;
+  margin-left:200px;
+  height: 60px;
+}
 </style>
diff --git a/components/public/header/index.vue b/components/public/header/index.vue
@@ -1,25 +1,24 @@
 <template>
   <div>
-    <el-row :gutter="15">
-      <el-col :span="6">
-        <city />
+    <el-row>
+      <el-col>
+        <topbar />
       </el-col>
-      <el-col :span="6">
-        <user />
-      </el-col>
-      <el-col :span="6">
-        <div class="grid-content bg-purple"></div>
+    </el-row>
+    <el-row>
+      <el-col>
+        <search />
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
-import City from "./city";
-import User from "./user";
+import Topbar from "./topbar";
+import Search from "./search";
 export default {
   components: {
-    City,
-    User
+    Topbar,
+    Search
   }
 };
 </script>
diff --git a/components/public/header/nav.vue b/components/public/header/nav.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="c-nav">
+    <el-menu class="el-menu-demo" mode="horizontal" background-color="#F8F8F8">
+      <el-submenu index="1">
+        <template slot="title">我的美团</template>
+        <el-menu-item index="1-1">我的订单</el-menu-item>
+        <el-menu-item index="1-2">我的收藏</el-menu-item>
+        <el-menu-item index="1-3">抵用券</el-menu-item>
+        <el-menu-item index="1-4">账号设置</el-menu-item>
+      </el-submenu>
+      <el-menu-item>手机APP</el-menu-item>
+      <el-submenu index="3">
+        <template slot="title">商家中心</template>
+        <el-menu-item index="3-1">美团餐饮商户中心</el-menu-item>
+        <el-menu-item index="3-2">登录商家中心</el-menu-item>
+        <el-menu-item index="3-3">美团智能收银</el-menu-item>
+        <el-menu-item index="3-4">我想合作</el-menu-item>
+        <el-menu-item index="3-5">手机免费开店</el-menu-item>
+        <el-menu-item index="3-6">餐饮代理商招聘</el-menu-item>
+        <el-menu-item index="3-7">商家申请开票</el-menu-item>
+        <el-menu-item index="3-8">免费合作美团排队</el-menu-item>
+      </el-submenu>
+      <el-submenu index="4">
+        <template slot="title">美团规则</template>
+        <el-menu-item index="4-1">规则中心</el-menu-item>
+        <el-menu-item index="4-2">规则目录</el-menu-item>
+        <el-menu-item index="4-3">规则评议院</el-menu-item>
+      </el-submenu>
+      <el-submenu index="5">
+        <template slot="title">网站导航</template>
+        <el-menu-item index="5-1">
+          <el-collapse>
+            <div></div>
+          </el-collapse>
+        </el-menu-item>
+      </el-submenu>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.el-submenu__title > i {
+  visibility: hidden;
+}
+
+.el-menu.el-menu--horizontal{
+    border-bottom: none;
+}
+.c-nav{
+    height:40px;
+    margin-right: 200px;
+}
+</style>
diff --git a/components/public/header/search.vue b/components/public/header/search.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="3" class="left">
+        <img src="//s0.meituan.net/bs/fe-web-meituan/fa5f0f0/img/logo.png" alt="美团" />
+      </el-col>
+      <el-col :span="8" class="center">
+        <el-input
+          v-model="search"
+          @focus="focus"
+          @blur="blur"
+          @keyup.enter.native="searchHandler"
+          placeholder="搜索商家或地点"
+        >
+          <el-button slot="append" icon="el-icon-search" id="search" @click="searchHandler"></el-button>
+        </el-input>
+        <el-card v-if="isSearch" class="box-card" id="search-box">
+          <dl v-if="isHistorySearch">
+            <dt class="search-title" v-show="history">历史搜索</dt>
+            <el-tag
+              v-for="search in historySearchList"
+              :key="search.name"
+              closable
+              :type="search.type"
+              style="margin-right:5px; margin-bottom:5px;"
+            >{{search.name}}</el-tag>
+            <dt class="search-title">热门搜索</dt>
+            <dd v-for="search in hotSearchList" :key="search.id">{{search}}</dd>
+          </dl>
+          <dl v-if="isSearchList">
+            <dd v-for="search in searchList" :key="search.id">{{search}}</dd>
+          </dl>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import RandomUtil from "../../../utils/randomUtil";
+import Store from "../../../utils/store";
+export default {
+  data() {
+    return {
+      search: "", //当前输入框的值
+      isFocus: false, //是否聚焦
+      hotSearchList: ["暂无热门搜索"], //热门搜索数据
+      historySearchList: [], //历史搜索数据
+      searchList: ["暂无数据"], //搜索返回数据,
+      history: false,
+      types: ["", "success", "info", "warning", "danger"] //搜索历史tag式样
+    };
+  },
+  methods: {
+    focus() {
+      this.isFocus = true;
+      this.historySearchList =
+        Store.loadHistory() == null ? [] : Store.loadHistory();
+      this.history = this.historySearchList.length == 0 ? false : true;
+    },
+    blur() {
+      this.isFocus = false;
+    },
+    searchHandler() {
+      //随机生成搜索历史tag式样
+      let n = RandomUtil.getRandomNumber(0, 5);
+
+      let exist =
+        this.historySearchList.filter(value => {
+          return value.name == this.search;
+        }).length == 0
+          ? false
+          : true;
+      if (!exist) {
+        this.historySearchList.push({ name: this.search, type: this.types[n] });
+        Store.saveHistory(this.historySearchList);
+      }
+      this.history = this.historySearchList.length == 0 ? false : true;
+    }
+  },
+  computed: {
+    isHistorySearch() {
+      return this.isFocus && !this.search;
+    },
+    isSearchList() {
+      return this.isFocus && this.search;
+    },
+    isSearch() {
+      return this.isFocus;
+    }
+  }
+};
+</script>
+
+<style>
+.left {
+  margin-left: 200px;
+}
+.center {
+  margin-top: 15px;
+  margin-left: 200px;
+}
+#search {
+  background-color: #ffc300;
+  border-radius: 0%;
+}
+.search-title {
+  color: #bdbaba;
+  font-size: 15px;
+  margin-bottom: 5px;
+}
+#search-box {
+  width: 555px;
+  margin-top: -20px;
+  padding-bottom: 20px;
+}
+</style>
diff --git a/components/public/header/topbar.vue b/components/public/header/topbar.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="c-topbar">
+    <el-row :gutter="0">
+      <el-col :span="6">
+        <city />
+      </el-col>
+      <el-col :span="6">
+        <user />
+      </el-col>
+      <el-col :span="10">
+        <navbar />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import City from "./city";
+import User from "./user";
+import Navbar from "./nav";
+export default {
+  components: {
+    City,
+    User,
+    Navbar
+  }
+};
+</script>
+<style scoped>
+.c-topbar{
+    height: 60px;
+    width: 100%;
+    background-color:#F8F8F8;
+    color: #909399;
+}
+
+</style>
diff --git a/components/public/header/user.vue b/components/public/header/user.vue
@@ -5,7 +5,7 @@
       <nuxt-link to="/exit">退出</nuxt-link>
     </template>
     <template v-else>
-      <nuxt-link to="/login">登录</nuxt-link>
+      <nuxt-link style="color:#FE8C00;margin-right:10px" to="/login">立即登录</nuxt-link>
       <nuxt-link to="/register">注册</nuxt-link>
     </template>
   </div>
@@ -20,6 +20,13 @@ export default {
   }
 };
 </script>
-
 <style>
+.c-user{
+  margin-top: 20px;
+  margin-left: 150px;
+  height:60px;
+}
+.c-user a{
+  color: #909399;
+}
 </style>
diff --git a/utils/randomUtil.js b/utils/randomUtil.js
@@ -0,0 +1,7 @@
+class RandomUtil {
+}
+
+//静态方法，获得随机数
+RandomUtil.getRandomNumber = (min, max) => parseInt(Math.random() * (max - min)) + min
+
+module.exports = RandomUtil
diff --git a/utils/store.js b/utils/store.js
@@ -0,0 +1,17 @@
+const LOCAL_STORAGE_KEY = "searchHistory";
+
+class Store { }
+
+Store.prototype.arr=[];
+
+Store.saveHistory = (arr) => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(arr));
+}
+
+Store.loadHistory = () =>JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
+
+module.exports = Store
+
+
+
+