Skip to content

M
million
Commit 7abed8b6 authored by 黄奎's avatar 黄奎
Browse files
Options

1

parent 0ee7a8aa
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 101 deletions
src/components/navs/city-category-mobile.vue
View file @ 7abed8b6
<style>
</style>
<style></style>
<style scoped>
.area-item {
border-radius: 4px;
......@@ -86,30 +85,32 @@
</div></template
>
<q-tabs v-model="areaType" class="text-primary area-navs" :dense="true">
<q-tab @click="goScrollHandler(item.Id)"
<q-tab
@click="goScrollHandler(item.Id)"
v-for="item in areas"
:key="item.Id"
:name="item.Id"
:label="item.Name"
/>
</q-tabs>
<div :style="showPadding ?'padding-top: 100px' : ''">
<div :id="`el${item.Id}`" v-for="item in areas" :key="item.Id">
<div class="q-mt-md" ref="content" v-for="el in item.SubList" :key="el.Id">
<div class="flex justify-between items-end">
<span class="f18 bold">{{ el.Name }}</span>
<span class="navigate" @click="handleSelectArea(el)">探索</span>
</div>
<div
class="area-item"
v-for="area in el.SubList"
:key="area.Id"
@click="handleSelectArea(area)"
>
{{ area.Name }}
<div :style="showPadding ? 'padding-top: 100px' : ''">
<div :id="`el${item.Id}`" v-for="item in areas" :key="item.Id">
<div class="q-mt-md" ref="content" v-for="el in item.SubList" :key="el.Id">
<div class="flex justify-between items-end">
<span class="f18 bold">{{ el.Name }}</span>
<span class="navigate" @click="handleSelectArea(el)">探索</span>
</div>
<div
class="area-item"
v-for="area in el.SubList"
:key="area.Id"
@click="handleSelectArea(area)"
>
{{ area.Name }}
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div>
......@@ -117,31 +118,20 @@
<div v-else>
<div class="padding">
<div>
<!-- <q-tabs v-model="areaType" class="text-primary" :dense="true">
<q-tab
v-for="(item, i) in dataList.CategoryList"
:key="i"
:name="i"
:label="item.CategoryName"
/>
</q-tabs> -->
<div v-for="(item, i) in dataList.CategoryList" :key="i">
<!-- <div class="category-item" @click="handleCategoryChage(item)">
<span>{{ item.CategoryName }}</span>
<i class="iconfont iconpreviewright"></i></div> -->
<div v-for="el in item.SubList" :key="el.Id">
<div class="category-item"
@click="handleCategoryChage(el)">
<div class="category-item" @click="handleCategoryChage(el)">
<span>{{ el.CategoryName }}</span>
<i class="iconfont iconpreviewright"></i>
<i class="iconfont iconpreviewright"></i>
</div>
<div class="category-item"
<div
class="category-item"
v-for="area in el.SubList"
:key="area.Id"
@click="handleCategoryChage(area)"
>
<span>{{ area.CategoryName }}</span>
<i class="iconfont iconpreviewright"></i>
<i class="iconfont iconpreviewright"></i>
</div>
</div>
</div>
......@@ -152,7 +142,7 @@
</template>
<script>
import {throttle} from 'lodash';
import { throttle } from "lodash";
export default {
props: {
baseData: {
......@@ -209,62 +199,63 @@ export default {
this.searchEndDate = newEndDateStr;
},
beforeDestroy() {
window.removeEventListener('scroll', this.throttleGetScrollTop, true)
window.removeEventListener("scroll", this.throttleGetScrollTop, true);
},
methods: {
initScroll() {
this.isSlide = true // 平滑滚动前
setTimeout(() => { // 点击时平滑滚动完成前不监听滚动
this.isSlide = false
}, 600)
this.isSlide = true; // 平滑滚动前
setTimeout(() => {
// 点击时平滑滚动完成前不监听滚动
this.isSlide = false;
}, 600);
// 收集收集滚动元素的高度
this.slotsTopList = this.$refs.content?.map((item, index) => {
return item.offsetTop
})
this.slotsTopList = this.slotsTopList || []
console.log('this.slotsTopList', this.slotsTopList)
return item.offsetTop;
});
this.slotsTopList = this.slotsTopList || [];
// 初始化滚动监听
this.scrollInit()
this.scrollInit();
},
// 监听滚动高度
scrollInit () {
this.throttleGetScrollTop = throttle(this.getScrollTop, 100)
this.throttleGetScrollTop()
window.addEventListener('scroll', this.throttleGetScrollTop, true)
// 监听滚动高度
scrollInit() {
this.throttleGetScrollTop = throttle(this.getScrollTop, 100);
this.throttleGetScrollTop();
window.addEventListener("scroll", this.throttleGetScrollTop, true);
},
// 监听滚动距离
async getScrollTop () {
if (this.isSlide) return
const scrollTop = document.getElementById('privilage-list').scrollTop
async getScrollTop() {
if (this.isSlide) return;
const scrollTop = document.getElementById("privilage-list").scrollTop;
// 获取当前滚动内容对应的tabIndex
let currentIndex = this.slotsTopList.findIndex((top, index) => {
return scrollTop >= this.slotsTopList[index + 1] && scrollTop < this.slotsTopList[index + 2]
})
// this.clickedIndex = currentIndex + 1
if(currentIndex + 1 > -1) {
// this.showPadding = true
this.areaType = this.areas[currentIndex + 1].Id
return (
scrollTop >= this.slotsTopList[index + 1] &&
scrollTop < this.slotsTopList[index + 2]
);
});
if (currentIndex + 1 > -1) {
this.areaType = this.areas[currentIndex + 1].Id;
} else {
this.showPadding = false
this.showPadding = false;
}
},
goScrollHandler(id) {
this.isSlide = true // 平滑滚动前
setTimeout(() => { // 点击时平滑滚动完成前不监听滚动
this.isSlide = false
}, 600)
console.log("scrollIntoView",`el${id}`, id);
const ele = `#el${id}`
document.querySelector(ele).scrollIntoView({ behavior: "smooth", block: 'end' });
this.isSlide = true; // 平滑滚动前
setTimeout(() => {
// 点击时平滑滚动完成前不监听滚动
this.isSlide = false;
}, 600);
const ele = `#el${id}`;
document.querySelector(ele).scrollIntoView({ behavior: "smooth", block: "end" });
},
handleSelectArea(item) {
this.$emit('close', false)
this.$emit("close", false);
this.CommonJump("/city/" + item.Id, {
id: item.Id,
});
},
handleCategoryChage(item) {
this.$emit('close', false)
this.$emit("close", false);
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
......@@ -278,11 +269,9 @@ export default {
this.selectedArea = hotArr;
this.areas = this.baseData.AreaList;
this.hotAreas = hotArr;
console.log("hotArea", this.hotAreas, this.areas);
this.$nextTick(() => {
this.initScroll();
})
this.initScroll();
});
},
getHotList(arr) {
let hotArr = [];
......@@ -336,7 +325,6 @@ export default {
}
.nav-items:hover {
background: #eee;
color: var(--q-color-primary);
}
.nav-items:hover::after {
......
src/components/navs/city-category.vue
View file @ 7abed8b6
......@@ -68,7 +68,6 @@
.city3 {
height: 32px;
line-height: 32px;
/* display: inline-block; */
margin: 0 20px 4px 0;
cursor: pointer;
font-weight: bold;
......@@ -110,7 +109,7 @@
margin: 0 10px 0 44px;
}
.address-btn:hover {
background: #F5F5F5;
background: #f5f5f5;
}
.all-type {
margin-left: 10px;
......@@ -173,7 +172,7 @@
background: #fff;
}
.category-btn:hover {
background: #F5F5F5;
background: #f5f5f5;
}
.category-icon {
width: 16px;
......@@ -181,12 +180,13 @@
}
</style>
<template>
<div>
<div>
<q-separator color="grey-2" v-if="isHome" />
<div class="header-box flex q-py-sm" v-if="isHome">
<q-tabs align="center" shrink>
<div
flat unelevated
flat
unelevated
class="address-btn"
@mouseenter="mouseenterAddress"
@mouseleave="mouseeleaveAddress"
......@@ -201,7 +201,7 @@
<q-menu
ref="address"
@mouseenter="addressMenuEnter"
@mouseleave="addressMenuLeave"
@mouseleave="addressMenuLeave"
class="light-shadow"
>
<div class="address-box flex">
......@@ -286,15 +286,13 @@
<q-separator style="height: 16px; margin: auto 0" vertical />
<div
class="all-type category-btn"
flat unelevated
flat
unelevated
@mouseenter="typeHoverAll(true)"
@mouseleave="typeHoverAll(false)"
>全部分類
<q-menu
ref="menu0"
@mouseenter="menuFocusAll = 2"
@mouseleave="menuLeaveAll"
>
>
全部分類
<q-menu ref="menu0" @mouseenter="menuFocusAll = 2" @mouseleave="menuLeaveAll">
<div class="all-menu">
<div class="flex">
<div
......@@ -302,7 +300,16 @@
:key="i"
v-for="(x, i) in dataList.CategoryList"
>
<img class="category-icon" :src="require(`../../assets/img/home/${['guanguang','jindian','hotel','car'][i]}.png`)"/>
<template v-if="i <= 3">
<img
class="category-icon"
:src="
require(`../../assets/img/home/${
['guanguang', 'jindian', 'hotel', 'car'][i]
}.png`)
"
/>
</template>
{{ x.CategoryName }}
</div>
</div>
......@@ -347,11 +354,13 @@
class="category-btn"
:key="i"
:label="x.CategoryName"
flat unelevated
flat
unelevated
:content-style="{ hover: '#ff0000' }"
@mouseenter="typeHover(i, true)"
@mouseleave="typeHover(i, false)"
>{{x.CategoryName}}
>
{{ x.CategoryName }}
<q-menu
ref="menu"
:key="i"
......@@ -388,7 +397,8 @@
</div>
</template>
</q-tabs>
</div></div>
</div>
</div>
</template>
<script>
......@@ -456,10 +466,7 @@ export default {
this.isHome =
this.$router.history.current.path === "/" ||
this.$router.history.current.path === "/index";
console.log(
'JSON.parse(window.localStorage.getItem("b2bUser"))',
JSON.parse(window.localStorage.getItem("b2bUser"))
);
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
}
......@@ -477,13 +484,10 @@ export default {
);
this.searchDate = newStartDateStr;
this.searchEndDate = newEndDateStr;
// this.initAreas()
// this.initNavs();
// this.getCategoryList();
},
methods: {
avatarClick() {
if (this.LoginUser.token && 1=== 2) {
if (this.LoginUser.token && 1 === 2) {
this.CommonJump("/userCenter");
} else {
// 展示登录弹窗
......@@ -589,7 +593,6 @@ export default {
if (this.baseData.nav.navs) {
this.baseData.nav.navs.forEach((x) => {
if (x.title.indexOf("^") != -1) {
console.log("in....");
let t = x.title.split("^");
let c = t[1].split(",");
x.childs = [];
......@@ -605,7 +608,6 @@ export default {
this.navs.push(x);
});
}
this.navsStyle = this.navs.findIndex((x) => x.childs) != -1 ? 2 : 1;
},
initAreas() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment