首页调整

src/boot/eventBus.js

+import Vue from 'vue'
+export const EventBus = new Vue()
\ No newline at end of file

src/boot/utils.js

 import Vue from 'vue'
 import axios from 'axios'
 import md5 from 'js-md5'
+// import {eventBus} from './eventBus'
 import VueCoreVideoPlayer from 'vue-core-video-players'
 import 'viewerjs/dist/viewer.css'
 import VueViewer from 'v-viewer'
 // import VueCoreVideoPlayer from 'vue-core-video-player'
-
+Vue.prototype.$EventBus = new Vue()
 Vue.use(VueCoreVideoPlayer)
 Vue.use(VueViewer)
 //域名管理对象
@@ -31,7 +32,6 @@ Vue.prototype.domainManager = function () {
   };
   return obj;
 }
-
 //获取当前域名
 Vue.prototype.GetDomain=function()
 {

src/components/navs/hor-big-one.vue

@@ -117,6 +117,29 @@ margin-left: 10px;
 .font-16 {
   font-size: 16px;
 }
+.category-l2 {
+  margin: 8px;
+height: 34px;
+border-radius: 8px;
+line-height: 34px;
+padding-left: 8px;
+cursor: pointer;
+}
+.category-l2-select {
+background: #EE4454;
+color: #fff;
+}
+.category-l3 {
+  margin: 8px;
+font-size: 14px;
+font-weight: 400;
+color: #A0A0A0;
+padding-left: 8px;
+cursor: pointer;
+}
+.category-l3-select {
+color: #EE4454;
+}
 </style>
 <template>
   <q-header
@@ -307,7 +330,7 @@ margin-left: 10px;
                   :key="item.Id"
                   class="menu-item"
                   @click="changeAreas(item)"
-                  :class="{'select': true}"
+                  :class="{'select': selectedAreaId === item.Id}"
                 >
                   <div v-if="!item.tag" class="hot">{{item.Name}}</div>
                   <div v-else>
@@ -343,46 +366,50 @@ margin-left: 10px;
           <q-menu>
             <div class="all-menu">
             <div class="flex">
-              <div class="category-item font-16" :key="i" v-for="(x, i) in baseData.nav.navs">{{x.NavTitle}}</div>
+              <div class="category-item font-16" :key="i" v-for="(x, i) in dataList.CategoryList">{{x.CategoryName}}</div>
             </div>
             <q-separator />
             <div class="flex">
-              <div class="category-item" :key="i" v-for="(x, i) in baseData.nav.navs">
-                <q-list>
-                  <q-item :key="item.Id" v-for="item in x.SubList" clickable v-close-popup>
-                    <q-item-section>{{item.NavTitle}}</q-item-section>
-                    <q-menu v-if="item.SubList.length">
-                      <q-list>
-                        <q-item
+              <div class="category-item" :key="i" v-for="(x, i) in dataList.CategoryList">
+                  <div :key="item.Id" v-for="item in x.SubList">
+                    <div @click="selectCategory = item.Id" class="category-l2" :class="{'category-l2-select': selectCategory === item.Id}">{{item.CategoryName}}</div>
+                    <div v-if="item.SubList.length">
+                        <div @click="selectCategory = item2.Id"
+                          class="category-l3"
+                          :class="{'category-l3-select': selectCategory === item2.Id}"
                           :key="item2.Id"
                           v-for="item2 in item.SubList"
-                          clickable
-                          v-close-popup
                         >
-                          <q-item-section>{{item2.NavTitle}}</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-item>
-                </q-list>
+                          <div>{{item2.CategoryName}}</div>
+                        </div>
+                    </div>
+                  </div>
               </div>
             </div></div>
           </q-menu>
         </q-btn>
-        <template v-for="(x, i) in baseData.nav.navs">
-          <q-btn :key="i" :label="x.NavTitle" flat :content-style="{ hover: '#ff0000' }">
+        <template v-for="(x, i) in dataList.CategoryList">
+          <q-btn :key="i" :label="x.CategoryName" flat :content-style="{ hover: '#ff0000' }">
             <q-menu :key="i">
               <q-list>
-                <q-item :key="item.Id" v-for="item in x.SubList" clickable v-close-popup>
-                  <q-item-section v-if="!item.SubList.length">{{item.NavTitle}}</q-item-section>
-                  <q-menu v-else>
-                    <q-list>
-                      <q-item :key="item2.Id" v-for="item2 in item.SubList" clickable v-close-popup>
-                        <q-item-section>{{item2.NavTitle}}</q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-menu>
-                </q-item>
+                <div :key="item.Id" v-for="item in x.SubList">
+                  <q-item v-if="item.SubList.length" clickable>
+                    <q-item-section>{{item.CategoryName}}</q-item-section>
+                    <q-item-section side>
+                      <q-icon name="keyboard_arrow_right" />
+                    </q-item-section>
+                    <q-menu anchor="top right" self="top left">
+                      <q-list>
+                        <q-item :key="item2.Id" v-for="item2 in item.SubList" clickable v-close-popup>
+                          <q-item-section>{{item2.CategoryName}}</q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-item>
+                  <q-item v-else clickable v-close-popup>
+                    <q-item-section>{{item.CategoryName}}</q-item-section>
+                  </q-item>
+                </div>
               </q-list>
             </q-menu>
           </q-btn>
@@ -399,6 +426,10 @@ export default {
       type: Object,
       default: {}
     },
+    dataList: {
+      type: Object,
+      default: {}
+    },
     title: {
       type: String,
       default: ""
@@ -406,13 +437,15 @@ export default {
   },
   data() {
     return {
+      selectCategory: undefined,
       categoryList: [],
       subTitle: "",
       LoginUser: {},
       navs: [],
       navsStyle: 1,
       areas: [],
-      selectedArea: []
+      selectedArea: [],
+      selectedAreaId: ''
     };
   },
   watch: {
@@ -477,10 +510,13 @@ export default {
       let hotArr = this.getHotList(this.baseData.AreaList);
       this.areas.push({
         Name: "热门目的地",
-        SubList: hotArr
+        SubList: hotArr,
+        Id: ''
       });
+      this.$EventBus.$emit('hotList', hotArr)
+      console.log('emit', this.$EventBus.$emit, hotArr)
+      this.selectedArea = hotArr
       this.areas = this.areas.concat(this.baseData.AreaList);
-      console.log("this.hotArr", hotArr, this.baseData.AreaList, this.areas);
     },
     getHotList(arr) {
       let hotArr = [];

src/components/search_sf/search_sf2.vue

@@ -179,7 +179,7 @@
             <div class="text-weight-bold q-pa-sm">熱門目的地</div>
             <q-separator />
             <div>
-              <div :key="item" v-for="item in 12">熱門地址</div>
+              <div class="hot-tag" @click="setectHotTag = item.Id" :class="{'hot-tag-select': setectHotTag === item.Id}" :key="item" v-for="item in hotList">{{item.Name}}</div>
             </div>
             <!-- <div class="col full-width row">
               <div style="width: 180px">
@@ -424,6 +424,8 @@ export default {
   },
   data() {
     return {
+      setectHotTag: '',
+      hotList: [],
       slide: 0,
       searchKey: "",
       searchDate: "",
@@ -457,6 +459,12 @@ export default {
       RB_Group_Id: 0,
     };
   },
+  created() {
+    this.$EventBus.$on('hotList', (hotList) => {
+      console.log('hotList', hotList);
+      this.hotList = hotList
+    })
+  },
   mounted() {
     this.getHistory()
     var newStartDate = new Date();
@@ -714,3 +722,17 @@ export default {
   line-height: 56px;
 }
 </style>
+<style scoped>
+.hot-tag {
+  width: 141px;
+height: 34px;
+line-height: 34px;
+padding-left: 8px;
+border-radius: 8px;
+margin: 12px 0 12px 12px;
+}
+.hot-tag-select {
+background: #EE4454;
+color: #fff;
+}
+</style>
\ No newline at end of file

src/layouts/HomeLayout.vue

@@ -27,7 +27,7 @@
 </style>
 <template>
   <q-layout view="hHh lpr fFf">
-    <hor-big-one :base-data="baseinfo" ref="webhead"></hor-big-one>
+    <hor-big-one :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
     <!-- <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead"></hor-big-two> -->
     <q-page-container>
       <router-view />