Skip to content

M
million
Commit 0b5a6f33 authored by 沈良进's avatar 沈良进
Browse files
Options

首页优化

parent 2c11f5f3
Show whitespace changes
Inline Side-by-side
Showing with 1392 additions and 212 deletions
src/components/navs/city-category-mobile.vue 0 → 100644
View file @ 0b5a6f33
<style>
.q-ml-lg .block {
margin-right: 12px;
}
</style>
<style scoped>
.header-box {
max-width: 1200px;
margin: 0 auto;
}
.address-box {
width: 815px;
height: 426px;
}
.menu-box {
width: 174px;
height: 426px;
overflow: auto;
}
.menu-item {
width: 139px;
margin: 15px auto;
height: 49px;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
}
.menu-item:hover {
color: #333;
background-color: #eeeeee;
}
.hot {
line-height: 33px;
}
.select {
color: #fff;
background-color: #ee4454;
}
.menu-title {
font-weight: bold;
}
.menu-tag-box span {
margin-right: 20px;
}
.menu-tag-box:last-child {
margin-right: 0;
}
.city-box {
padding: 14px 18px;
width: 641px;
background: #f5f5f5;
}
.city {
width: 129px;
height: 69px;
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 0%;
cursor: pointer;
}
.city2 {
width: 76px;
height: 32px;
background: #dbdbdb;
border-radius: 8px;
font-weight: bold;
line-height: 32px;
overflow: hidden;
padding: 0 8px;
margin-right: 20px;
cursor: pointer;
}
.city3 {
height: 32px;
line-height: 32px;
/* display: inline-block; */
margin: 0 20px 4px 0;
cursor: pointer;
font-weight: bold;
}
.city:hover {
background-color: #eeeeee;
}
.city-img {
width: 127px;
height: 67px;
position: absolute;
top: 1;
left: 1;
border-radius: 10px;
}
.city-name-box {
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.city-name {
text-align: center;
height: 22px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
padding: 0 5px;
border-radius: 10px;
}
.address-btn {
margin: 0 10px 0 44px;
}
.all-type {
margin-left: 10px;
}
.all-menu {
width: 660px;
padding: 10px;
}
.category-item {
width: 160px;
padding: 10px;
border-radius: 8px;
font-weight: bold;
font-size: 18px !important;
}
.font-16 {
font-size: 16px;
}
.category-l2 {
height: 34px;
border-radius: 8px;
line-height: 34px;
padding: 0 8px;
cursor: pointer;
font-size: 14px;
font-weight: 400;
}
.category-l2:hover {
background-color: #eee;
}
.category-l2-select {
background: #ee4454;
color: #fff;
}
.category-l3 {
padding: 8px;
font-size: 12px;
font-weight: 400;
color: #a0a0a0;
border-radius: 8px;
cursor: pointer;
}
.category-l3:hover {
background-color: #eee;
}
.category-l3-select {
color: #ee4454;
}
.category-box {
width: 140px;
padding: 10px;
font-weight: bold;
}
.category-btn {
width: 100px;
}
</style>
<template>
<div v-if="isHome">
<q-btn
flat
class="address-btn"
@mouseenter="mouseenterAddress"
@mouseleave="mouseeleaveAddress"
>
<span slot="default" class="flex item-center">
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i
>選擇目的地
</span>
<q-menu ref="address" @mouseenter="addressMenuEnter" class="light-shadow">
<div class="address-box flex">
<div class="menu-box">
<div
v-for="item in areas"
:key="item.Id"
class="menu-item"
@click="changeAreas(item)"
:class="{ select: selectedAreaId === item.Id }"
>
<div v-if="!item.tag" class="hot">{{ item.Name }}</div>
<div v-else>
<div class="menu-title">{{ item.Name }}</div>
<div class="menu-tag-box">
<span>加德滿都</span>
<span>加德滿都</span>
</div>
</div>
</div>
</div>
<!-- 热门城市 -->
<div class="col bg-grey-2">
<div v-if="!selectedAreaId" class="row q-pr-md">
<div
@click="handleSelectArea(item)"
v-for="item in selectedArea"
class="q-mt-md q-ml-md"
:key="item.Id"
style="width: 130px; height: 70px"
>
<q-img
:src="item.ImageList[0]"
spinner-color="grey-2"
class="rounded-borders full-width full-height"
>
<div
class="full-width full-height row items-center justify-center"
style="background: none"
>
<div
style="
background: rgba(0, 0, 0, 0.2);
text-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
"
class="rounded-borders q-px-md q-py-xs text-white cursor-pointer"
>
{{ item.Name }}
</div>
</div>
</q-img>
</div>
</div>
<div v-else class="city-box">
<div class="row" v-for="item in selectedArea" :key="item.Id">
<div style="width: 138px">
<div
@click="handleSelectArea(item)"
class="q-py-xs q-px-md bg-grey-4 cursor-pointer text-black text-subtitle2 inline-block rounded-borders text-weight-bolder"
>
{{ item.Name }}
</div>
</div>
<div class="col q-mt-sm">
<div class="row q-col-gutter-lg">
<div
@click="handleSelectArea(item2)"
class="text-subtitle2 text-grey-9 cursor-pointer"
v-for="item2 in item.SubList"
:key="item2.Id"
>
{{ item2.Name }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
<q-separator style="height: 16px; margin: auto 0" vertical />
<q-btn
class="all-type category-btn"
flat
label="全部分類"
@mouseenter="typeHoverAll(true)"
@mouseleave="typeHoverAll(false)"
>
<q-menu
ref="menu0"
@mouseenter="menuFocusAll = 2"
@mouseleave="menuLeaveAll"
>
<div class="all-menu">
<div class="flex">
<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 dataList.CategoryList"
>
<div :key="item.Id" v-for="item in x.SubList">
<div
@click="handleCategoryChage(item)"
class="category-l2"
:class="{
'category-l2-select': selectCategory === item.Id,
}"
>
{{ item.CategoryName }}
</div>
<div v-if="item.SubList.length">
<div
@click="handleCategoryChage(item2)"
class="category-l3"
:class="{
'category-l3-select': selectCategory === item2.Id,
}"
:key="item2.Id"
v-for="item2 in item.SubList"
>
<div>{{ item2.CategoryName }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
<template v-for="(x, i) in dataList.CategoryList">
<q-btn
class="category-btn"
:key="i"
:label="x.CategoryName"
flat
:content-style="{ hover: '#ff0000' }"
@mouseenter="typeHover(i, true)"
@mouseleave="typeHover(i, false)"
>
<q-menu
ref="menu"
:key="i"
@mouseenter="menuFocus = 2"
@mouseleave="menuLeave(i)"
>
<div class="category-box">
<div :key="item.Id" v-for="item in x.SubList">
<div
@click="handleCategoryChage(item)"
class="category-l2"
:class="{
'category-l2-select': selectCategory === item.Id,
}"
>
{{ item.CategoryName }}
</div>
<div v-if="item.SubList.length">
<div
@click="handleCategoryChage(item2)"
class="category-l3"
:class="{
'category-l3-select': selectCategory === item2.Id,
}"
:key="item2.Id"
v-for="item2 in item.SubList"
>
<div>{{ item2.CategoryName }}</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
</template>
</div>
</template>
<script>
import tripListVue from "../trip/tripList.vue";
export default {
props: {
baseData: {
type: Object,
default: () => ({}),
},
dataList: {
type: Object,
default: () => ({}),
},
title: {
type: String,
default: "",
},
showDialog: {
type: Boolean,
default: true,
},
},
data() {
return {
searchDate: "",
searchEndDate: "",
menuFocusAll: 0,
menuFocus: 0,
selectCategory: undefined,
categoryList: [],
subTitle: "",
LoginUser: {},
navs: [],
navsStyle: 1,
areas: [],
selectedArea: [],
selectedAreaId: "",
isHome: false,
};
},
watch: {
title: function (val, oldval) {
this.subTitle = val;
},
baseData: {
handler(n, o) {
// this.initNavs();
this.initAreas();
},
deep: true,
},
$route: {
handler: function (val, oldVal) {
this.isHome = val.path === "/" || val.path === "/index";
},
// 深度观察监听
deep: true,
},
},
meta() {
return {
title:
this.subTitle != ""
? `${this.subTitle} - ${this.baseData.name}`
: this.baseData.name,
};
},
mounted() {
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"));
}
var newStartDate = new Date();
var newStartDateStr = this.formatDate(
newStartDate.getFullYear(),
newStartDate.getMonth() + 1,
newStartDate.getDate()
);
var newEndDate = this.AddMonth(newStartDateStr, 2);
var newEndDateStr = this.formatDate(
newEndDate.getFullYear(),
newEndDate.getMonth() + 1,
newEndDate.getDate()
);
this.searchDate = newStartDateStr;
this.searchEndDate = newEndDateStr;
// this.initAreas()
// this.initNavs();
// this.getCategoryList();
},
methods: {
avatarClick() {
if (this.LoginUser.token && 1 === 2) {
this.CommonJump("/userCenter");
} else {
// 展示登录弹窗
this.CommonJump("/login");
}
},
handleSelectArea(item) {
this.CommonJump("/city/" + item.Id, {
id: item.Id,
});
},
handleCategoryChage(item) {
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
categoryId: item.Id,
});
},
mouseenterAddress() {
this.menuFocusAll = 0;
this.menuFocus = 0;
this.addressFocus = 1;
this.$refs.address.show();
},
mouseeleaveAddress() {
setTimeout(() => {
if (!this.addressFocus) {
this.$refs.address.hide();
}
}, 50);
},
addressMenuEnter() {
this.addressFocus = 2;
},
addressMenuLeave() {
this.addressFocus = 0;
setTimeout(() => {
if (!this.addressFocus) {
this.$refs.address.hide();
}
}, 50);
},
typeHoverAll(bool) {
if (bool) {
this.addressFocus = 0;
this.menuFocus = 0;
this.menuFocusAll = 1;
if (this.currentMenu !== undefined) {
this.$refs.menu[this.currentMenu].hide();
}
this.$refs.menu0.show();
} else {
this.menuFocusAll = 0;
setTimeout(() => {
if (!this.menuFocusAll) {
this.$refs.menu0.hide();
}
}, 50);
}
this.currentMenu = undefined;
},
typeHover(index, bool) {
if (bool) {
this.addressFocus = 0;
this.menuFocusAll = 0;
this.menuFocus = 1;
if (this.currentMenu !== undefined && index !== this.currentMenu) {
this.$refs.menu[this.currentMenu].hide();
}
this.$refs.menu[index].show();
} else {
this.menuFocus = 0;
setTimeout(() => {
if (!this.menuFocus) {
this.$refs.menu[index].hide();
}
}, 50);
}
this.currentMenu = index;
},
menuLeaveAll() {
this.menuFocus = 0;
setTimeout(() => {
if (!this.menuFocusAll) {
this.$refs.menu0.hide();
}
}, 50);
},
menuLeave(i) {
this.menuFocus = 0;
setTimeout(() => {
if (!this.menuFocus) {
this.$refs.menu[i].hide();
}
}, 50);
},
changeAreas(item) {
this.selectedArea = item.SubList;
this.selectedAreaId = item.Id;
},
initNavs() {
this.navs = [];
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 = [];
c.forEach((y) => {
let yt = y.split("&");
x.childs.push({
title: yt[0],
url: x.url + "&" + yt[1],
});
});
x.title = t[0];
}
this.navs.push(x);
});
}
this.navsStyle = this.navs.findIndex((x) => x.childs) != -1 ? 2 : 1;
},
initAreas() {
this.areas = [];
let hotArr = this.getHotList(this.baseData.AreaList);
this.areas.push({
Name: "热门目的地",
SubList: hotArr,
Id: "",
});
this.$EventBus.$emit("hotList", hotArr);
this.selectedArea = hotArr;
this.areas = this.areas.concat(this.baseData.AreaList);
},
getHotList(arr) {
let hotArr = [];
arr.forEach((item) => {
if (item.SubList && item.SubList.length) {
hotArr = hotArr.concat(this.getHotList(item.SubList));
} else {
if (item.IsHot === 1) {
hotArr.push(item);
}
}
});
return hotArr;
},
loginOut() {
localStorage.removeItem("b2bUser");
this.LoginUser = {};
this.CommonJump("/index", {});
},
getCategoryList() {
let locationName = this.GetDomain();
var msg = {
RB_Group_Id: this.RB_Group_Id,
B2BDomain: locationName,
};
this.apipost(
"ws_post_GetHomeCategoryTreeList",
msg,
(res) => {
if (res.data.resultCode == 1) {
if (res.data.data) {
this.categoryList = res.data.data;
}
}
this.$nextTick(() => {
this.isPic =
document.URL.indexOf("localhost") != -1 ||
document.URL.indexOf("www.oytour.com") != -1;
});
},
(err) => {}
);
},
},
};
</script>
<style>
.avatar {
width: 38px;
height: 38px;
border-radius: 50%;
}
.nav-items {
position: relative;
}
.nav-items:hover {
background: #eee;
color: var(--q-color-primary);
}
.nav-items:hover::after {
content: " ";
position: absolute;
bottom: 0px;
left: 0;
right: 0;
height: 2px;
background: var(--q-color-primary);
}
.nav-items:hover .secondMenu {
display: block;
}
.secondMenu {
display: none;
padding-top: 5px;
position: absolute;
top: 60px;
left: 0px;
z-index: 9;
}
</style>
src/components/navs/city-category.vue 0 → 100644
View file @ 0b5a6f33
<style>
.q-ml-lg .block {
margin-right: 12px;
}
</style>
<style scoped>
.header-box {
max-width: 1200px;
margin: 0 auto;
}
.address-box {
width: 815px;
height: 426px;
}
.menu-box {
width: 174px;
height: 426px;
overflow: auto;
}
.menu-item {
width: 139px;
margin: 15px auto;
height: 49px;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
}
.menu-item:hover {
color: #333;
background-color: #eeeeee;
}
.hot {
line-height: 33px;
}
.select {
color: #fff;
background-color: #ee4454;
}
.menu-title {
font-weight: bold;
}
.menu-tag-box span {
margin-right: 20px;
}
.menu-tag-box:last-child {
margin-right: 0;
}
.city-box {
padding: 14px 18px;
width: 641px;
background: #f5f5f5;
}
.city {
width: 129px;
height: 69px;
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 0%;
cursor: pointer;
}
.city2 {
width: 76px;
height: 32px;
background: #dbdbdb;
border-radius: 8px;
font-weight: bold;
line-height: 32px;
overflow: hidden;
padding: 0 8px;
margin-right: 20px;
cursor: pointer;
}
.city3 {
height: 32px;
line-height: 32px;
/* display: inline-block; */
margin: 0 20px 4px 0;
cursor: pointer;
font-weight: bold;
}
.city:hover {
background-color: #eeeeee;
}
.city-img {
width: 127px;
height: 67px;
position: absolute;
top: 1;
left: 1;
border-radius: 10px;
}
.city-name-box {
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.city-name {
text-align: center;
height: 22px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
padding: 0 5px;
border-radius: 10px;
}
.address-btn {
margin: 0 10px 0 44px;
}
.all-type {
margin-left: 10px;
}
.all-menu {
width: 660px;
padding: 10px;
}
.category-item {
width: 160px;
padding: 10px;
border-radius: 8px;
font-weight: bold;
font-size: 18px !important;
}
.font-16 {
font-size: 16px;
}
.category-l2 {
height: 34px;
border-radius: 8px;
line-height: 34px;
padding: 0 8px;
cursor: pointer;
font-size: 14px;
font-weight: 400;
}
.category-l2:hover {
background-color: #eee;
}
.category-l2-select {
background: #ee4454;
color: #fff;
}
.category-l3 {
padding: 8px;
font-size: 12px;
font-weight: 400;
color: #a0a0a0;
border-radius: 8px;
cursor: pointer;
}
.category-l3:hover {
background-color: #eee;
}
.category-l3-select {
color: #ee4454;
}
.category-box {
width: 140px;
padding: 10px;
font-weight: bold;
}
.category-btn {
width: 100px;
}
</style>
<template>
<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>
<q-btn
flat
class="address-btn"
@mouseenter="mouseenterAddress"
@mouseleave="mouseeleaveAddress"
>
<span slot="default" class="flex item-center">
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i
>選擇目的地
</span>
<q-menu
ref="address"
@mouseenter="addressMenuEnter"
class="light-shadow"
>
<div class="address-box flex">
<div class="menu-box">
<div
v-for="item in areas"
:key="item.Id"
class="menu-item"
@click="changeAreas(item)"
:class="{ select: selectedAreaId === item.Id }"
>
<div v-if="!item.tag" class="hot">{{ item.Name }}</div>
<div v-else>
<div class="menu-title">{{ item.Name }}</div>
<div class="menu-tag-box">
<span>加德滿都</span>
<span>加德滿都</span>
</div>
</div>
</div>
</div>
<!-- 热门城市 -->
<div class="col bg-grey-2">
<div v-if="!selectedAreaId" class="row q-pr-md">
<div
@click="handleSelectArea(item)"
v-for="item in selectedArea"
class="q-mt-md q-ml-md"
:key="item.Id"
style="width: 130px; height: 70px"
>
<q-img
:src="item.ImageList[0]"
spinner-color="grey-2"
class="rounded-borders full-width full-height"
>
<div
class="full-width full-height row items-center justify-center"
style="background: none"
>
<div
style="
background: rgba(0, 0, 0, 0.2);
text-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
"
class="rounded-borders q-px-md q-py-xs text-white cursor-pointer"
>
{{ item.Name }}
</div>
</div>
</q-img>
</div>
</div>
<div v-else class="city-box">
<div class="row" v-for="item in selectedArea" :key="item.Id">
<div style="width: 138px">
<div
@click="handleSelectArea(item)"
class="q-py-xs q-px-md bg-grey-4 cursor-pointer text-black text-subtitle2 inline-block rounded-borders text-weight-bolder"
>
{{ item.Name }}
</div>
</div>
<div class="col q-mt-sm">
<div class="row q-col-gutter-lg">
<div
@click="handleSelectArea(item2)"
class="text-subtitle2 text-grey-9 cursor-pointer"
v-for="item2 in item.SubList"
:key="item2.Id"
>
{{ item2.Name }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
<q-separator style="height: 16px; margin: auto 0" vertical />
<q-btn
class="all-type category-btn"
flat
label="全部分類"
@mouseenter="typeHoverAll(true)"
@mouseleave="typeHoverAll(false)"
>
<q-menu
ref="menu0"
@mouseenter="menuFocusAll = 2"
@mouseleave="menuLeaveAll"
>
<div class="all-menu">
<div class="flex">
<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 dataList.CategoryList"
>
<div :key="item.Id" v-for="item in x.SubList">
<div
@click="handleCategoryChage(item)"
class="category-l2"
:class="{
'category-l2-select': selectCategory === item.Id,
}"
>
{{ item.CategoryName }}
</div>
<div v-if="item.SubList.length">
<div
@click="handleCategoryChage(item2)"
class="category-l3"
:class="{
'category-l3-select': selectCategory === item2.Id,
}"
:key="item2.Id"
v-for="item2 in item.SubList"
>
<div>{{ item2.CategoryName }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
<template v-for="(x, i) in dataList.CategoryList">
<q-btn
class="category-btn"
:key="i"
:label="x.CategoryName"
flat
:content-style="{ hover: '#ff0000' }"
@mouseenter="typeHover(i, true)"
@mouseleave="typeHover(i, false)"
>
<q-menu
ref="menu"
:key="i"
@mouseenter="menuFocus = 2"
@mouseleave="menuLeave(i)"
>
<div class="category-box">
<div :key="item.Id" v-for="item in x.SubList">
<div
@click="handleCategoryChage(item)"
class="category-l2"
:class="{
'category-l2-select': selectCategory === item.Id,
}"
>
{{ item.CategoryName }}
</div>
<div v-if="item.SubList.length">
<div
@click="handleCategoryChage(item2)"
class="category-l3"
:class="{
'category-l3-select': selectCategory === item2.Id,
}"
:key="item2.Id"
v-for="item2 in item.SubList"
>
<div>{{ item2.CategoryName }}</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
</template>
</q-tabs>
</div></div>
</template>
<script>
export default {
props: {
baseData: {
type: Object,
default: () => ({}),
},
dataList: {
type: Object,
default: () => ({}),
},
title: {
type: String,
default: "",
},
},
data() {
return {
searchDate: "",
searchEndDate: "",
menuFocusAll: 0,
menuFocus: 0,
selectCategory: undefined,
categoryList: [],
subTitle: "",
LoginUser: {},
navs: [],
navsStyle: 1,
areas: [],
selectedArea: [],
selectedAreaId: "",
isHome: false,
};
},
watch: {
title: function (val, oldval) {
this.subTitle = val;
},
baseData: {
handler(n, o) {
// this.initNavs();
this.initAreas();
},
deep: true,
},
$route: {
handler: function (val, oldVal) {
this.isHome = val.path === "/" || val.path === "/index";
},
// 深度观察监听
deep: true,
},
},
meta() {
return {
title:
this.subTitle != ""
? `${this.subTitle} - ${this.baseData.name}`
: this.baseData.name,
};
},
mounted() {
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"));
}
var newStartDate = new Date();
var newStartDateStr = this.formatDate(
newStartDate.getFullYear(),
newStartDate.getMonth() + 1,
newStartDate.getDate()
);
var newEndDate = this.AddMonth(newStartDateStr, 2);
var newEndDateStr = this.formatDate(
newEndDate.getFullYear(),
newEndDate.getMonth() + 1,
newEndDate.getDate()
);
this.searchDate = newStartDateStr;
this.searchEndDate = newEndDateStr;
// this.initAreas()
// this.initNavs();
// this.getCategoryList();
},
methods: {
avatarClick() {
if (this.LoginUser.token && 1=== 2) {
this.CommonJump("/userCenter");
} else {
// 展示登录弹窗
this.CommonJump("/login");
}
},
handleSelectArea(item) {
this.CommonJump("/city/" + item.Id, {
id: item.Id,
});
},
handleCategoryChage(item) {
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
categoryId: item.Id,
});
},
mouseenterAddress() {
this.menuFocusAll = 0;
this.menuFocus = 0;
this.addressFocus = 1;
this.$refs.address.show();
},
mouseeleaveAddress() {
setTimeout(() => {
if (!this.addressFocus) {
this.$refs.address.hide();
}
}, 50);
},
addressMenuEnter() {
this.addressFocus = 2;
},
addressMenuLeave() {
this.addressFocus = 0;
setTimeout(() => {
if (!this.addressFocus) {
this.$refs.address.hide();
}
}, 50);
},
typeHoverAll(bool) {
if (bool) {
this.addressFocus = 0;
this.menuFocus = 0;
this.menuFocusAll = 1;
if (this.currentMenu !== undefined) {
this.$refs.menu[this.currentMenu].hide();
}
this.$refs.menu0.show();
} else {
this.menuFocusAll = 0;
setTimeout(() => {
if (!this.menuFocusAll) {
this.$refs.menu0.hide();
}
}, 50);
}
this.currentMenu = undefined;
},
typeHover(index, bool) {
if (bool) {
this.addressFocus = 0;
this.menuFocusAll = 0;
this.menuFocus = 1;
if (this.currentMenu !== undefined && index !== this.currentMenu) {
this.$refs.menu[this.currentMenu].hide();
}
this.$refs.menu[index].show();
} else {
this.menuFocus = 0;
setTimeout(() => {
if (!this.menuFocus) {
this.$refs.menu[index].hide();
}
}, 50);
}
this.currentMenu = index;
},
menuLeaveAll() {
this.menuFocus = 0;
setTimeout(() => {
if (!this.menuFocusAll) {
this.$refs.menu0.hide();
}
}, 50);
},
menuLeave(i) {
this.menuFocus = 0;
setTimeout(() => {
if (!this.menuFocus) {
this.$refs.menu[i].hide();
}
}, 50);
},
changeAreas(item) {
this.selectedArea = item.SubList;
this.selectedAreaId = item.Id;
},
initNavs() {
this.navs = [];
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 = [];
c.forEach((y) => {
let yt = y.split("&");
x.childs.push({
title: yt[0],
url: x.url + "&" + yt[1],
});
});
x.title = t[0];
}
this.navs.push(x);
});
}
this.navsStyle = this.navs.findIndex((x) => x.childs) != -1 ? 2 : 1;
},
initAreas() {
this.areas = [];
let hotArr = this.getHotList(this.baseData.AreaList);
this.areas.push({
Name: "热门目的地",
SubList: hotArr,
Id: "",
});
this.$EventBus.$emit("hotList", hotArr);
this.selectedArea = hotArr;
this.areas = this.areas.concat(this.baseData.AreaList);
},
getHotList(arr) {
let hotArr = [];
arr.forEach((item) => {
if (item.SubList && item.SubList.length) {
hotArr = hotArr.concat(this.getHotList(item.SubList));
} else {
if (item.IsHot === 1) {
hotArr.push(item);
}
}
});
return hotArr;
},
loginOut() {
localStorage.removeItem("b2bUser");
this.LoginUser = {};
this.CommonJump("/index", {});
},
getCategoryList() {
let locationName = this.GetDomain();
var msg = {
RB_Group_Id: this.RB_Group_Id,
B2BDomain: locationName,
};
this.apipost(
"ws_post_GetHomeCategoryTreeList",
msg,
(res) => {
if (res.data.resultCode == 1) {
if (res.data.data) {
this.categoryList = res.data.data;
}
}
this.$nextTick(() => {
this.isPic =
document.URL.indexOf("localhost") != -1 ||
document.URL.indexOf("www.oytour.com") != -1;
});
},
(err) => {}
);
},
},
};
</script>
<style>
.avatar {
width: 38px;
height: 38px;
border-radius: 50%;
}
.nav-items {
position: relative;
}
.nav-items:hover {
background: #eee;
color: var(--q-color-primary);
}
.nav-items:hover::after {
content: " ";
position: absolute;
bottom: 0px;
left: 0;
right: 0;
height: 2px;
background: var(--q-color-primary);
}
.nav-items:hover .secondMenu {
display: block;
}
.secondMenu {
display: none;
padding-top: 5px;
position: absolute;
top: 60px;
left: 0px;
z-index: 9;
}
</style>
src/components/navs/hor-big-one.vue
View file @ 0b5a6f33
...@@ -178,6 +178,7 @@ ...@@ -178,6 +178,7 @@
class="zk_toolbar flex justify-between" class="zk_toolbar flex justify-between"
:class="{ 'q-px-none': $q.platform.is.desktop }" :class="{ 'q-px-none': $q.platform.is.desktop }"
> >
<div v-if="$q.platform.is.mobile" @click="showDialog = true">菜单</div>
<img <img
:src="baseData.logo" :src="baseData.logo"
style=" style="
...@@ -283,227 +284,34 @@ ...@@ -283,227 +284,34 @@
<!-- 移动端 --> <!-- 移动端 -->
<div v-else> <div v-else>
<img <img
class="avatar" @click="avatarClick"
class="avatar q-mt-sm"
v-if="LoginUser.photo"
:src="LoginUser.photo"
/>
<img
v-else
class="avatar q-mt-sm"
@click="avatarClick" @click="avatarClick"
src="../../assets/img/avatar.png" src="../../assets/img/avatar.png"
/> />
</div> </div>
</q-toolbar> </q-toolbar>
<q-separator color="grey-2" v-if="isHome" /> <city-category v-if="$q.platform.is.desktop" :baseData="baseData" :dataList="dataList"></city-category>
<div class="header-box flex q-py-sm" v-if="isHome"> <q-dialog v-model="showDialog">
<q-tabs align="center" shrink> <city-category-mobile></city-category-mobile></q-dialog>
<q-btn
flat
class="address-btn"
@mouseenter="mouseenterAddress"
@mouseleave="mouseeleaveAddress"
>
<span slot="default" class="flex item-center">
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i
>選擇目的地
</span>
<q-menu
ref="address"
@mouseenter="addressMenuEnter"
class="light-shadow"
>
<div class="address-box flex">
<div class="menu-box">
<div
v-for="item in areas"
:key="item.Id"
class="menu-item"
@click="changeAreas(item)"
:class="{ select: selectedAreaId === item.Id }"
>
<div v-if="!item.tag" class="hot">{{ item.Name }}</div>
<div v-else>
<div class="menu-title">{{ item.Name }}</div>
<div class="menu-tag-box">
<span>加德滿都</span>
<span>加德滿都</span>
</div>
</div>
</div>
</div>
<!-- 热门城市 -->
<div class="col bg-grey-2">
<div v-if="!selectedAreaId" class="row q-pr-md">
<div
@click="handleSelectArea(item)"
v-for="item in selectedArea"
class="q-mt-md q-ml-md"
:key="item.Id"
style="width: 130px; height: 70px"
>
<q-img
:src="item.ImageList[0]"
spinner-color="grey-2"
class="rounded-borders full-width full-height"
>
<div
class="full-width full-height row items-center justify-center"
style="background: none"
>
<div
style="
background: rgba(0, 0, 0, 0.2);
text-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
"
class="rounded-borders q-px-md q-py-xs text-white cursor-pointer"
>
{{ item.Name }}
</div>
</div>
</q-img>
</div>
</div>
<div v-else class="city-box">
<div class="row" v-for="item in selectedArea" :key="item.Id">
<div style="width: 138px">
<div
@click="handleSelectArea(item)"
class="q-py-xs q-px-md bg-grey-4 cursor-pointer text-black text-subtitle2 inline-block rounded-borders text-weight-bolder"
>
{{ item.Name }}
</div>
</div>
<div class="col q-mt-sm">
<div class="row q-col-gutter-lg">
<div
@click="handleSelectArea(item2)"
class="text-subtitle2 text-grey-9 cursor-pointer"
v-for="item2 in item.SubList"
:key="item2.Id"
>
{{ item2.Name }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
<q-separator style="height: 16px; margin: auto 0" vertical />
<q-btn
class="all-type category-btn"
flat
label="全部分類"
@mouseenter="typeHoverAll(true)"
@mouseleave="typeHoverAll(false)"
>
<q-menu
ref="menu0"
@mouseenter="menuFocusAll = 2"
@mouseleave="menuLeaveAll"
>
<div class="all-menu">
<div class="flex">
<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 dataList.CategoryList"
>
<div :key="item.Id" v-for="item in x.SubList">
<div
@click="handleCategoryChage(item)"
class="category-l2"
:class="{
'category-l2-select': selectCategory === item.Id,
}"
>
{{ item.CategoryName }}
</div>
<div v-if="item.SubList.length">
<div
@click="handleCategoryChage(item2)"
class="category-l3"
:class="{
'category-l3-select': selectCategory === item2.Id,
}"
:key="item2.Id"
v-for="item2 in item.SubList"
>
<div>{{ item2.CategoryName }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
<template v-for="(x, i) in dataList.CategoryList">
<q-btn
class="category-btn"
:key="i"
:label="x.CategoryName"
flat
:content-style="{ hover: '#ff0000' }"
@mouseenter="typeHover(i, true)"
@mouseleave="typeHover(i, false)"
>
<q-menu
ref="menu"
:key="i"
@mouseenter="menuFocus = 2"
@mouseleave="menuLeave(i)"
>
<div class="category-box">
<div :key="item.Id" v-for="item in x.SubList">
<div
@click="handleCategoryChage(item)"
class="category-l2"
:class="{
'category-l2-select': selectCategory === item.Id,
}"
>
{{ item.CategoryName }}
</div>
<div v-if="item.SubList.length">
<div
@click="handleCategoryChage(item2)"
class="category-l3"
:class="{
'category-l3-select': selectCategory === item2.Id,
}"
:key="item2.Id"
v-for="item2 in item.SubList"
>
<div>{{ item2.CategoryName }}</div>
</div>
</div>
</div>
</div>
</q-menu>
</q-btn>
</template>
</q-tabs>
</div>
</q-header> </q-header>
</template> </template>
<script> <script>
import CityCategoryMobile from './city-category-mobile.vue';
import cityCategory from "./city-category.vue";
export default { export default {
components: { cityCategory, CityCategoryMobile },
props: { props: {
baseData: { baseData: {
type: Object, type: Object,
default: {}, default: () => ({}),
}, },
dataList: { dataList: {
type: Object, type: Object,
...@@ -516,6 +324,7 @@ export default { ...@@ -516,6 +324,7 @@ export default {
}, },
data() { data() {
return { return {
showDialog: false,
searchDate: "", searchDate: "",
searchEndDate: "", searchEndDate: "",
menuFocusAll: 0, menuFocusAll: 0,
...@@ -590,7 +399,7 @@ export default { ...@@ -590,7 +399,7 @@ export default {
}, },
methods: { methods: {
avatarClick() { avatarClick() {
if (this.LoginUser.token && 1=== 2) { if (this.LoginUser.token) {
this.CommonJump("/userCenter"); this.CommonJump("/userCenter");
} else { } else {
// 展示登录弹窗 // 展示登录弹窗
......
src/pages/city/cityDetail.vue
View file @ 0b5a6f33
...@@ -345,7 +345,7 @@ export default { ...@@ -345,7 +345,7 @@ export default {
this.CommonJump( this.CommonJump(
"/search", "/search",
{ {
qsearchKey: this.detail.AreaName, areaId: this.detail.Id,
qsearchDate: this.searchDate, qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate, qsearchEndDate: this.searchEndDate,
CategoryName: item.title} CategoryName: item.title}
......
src/pages/city/components/near-city.vue
View file @ 0b5a6f33
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<div class="row no-wrap"> <div class="row no-wrap">
<div <div
@click="navToSearch(item)" @click="navToSearch(item)"
class="relative card" class="relative card cursor-pointer"
v-for="item in cityList" v-for="item in cityList"
:key="item.Id" :key="item.Id"
> >
...@@ -96,7 +96,7 @@ export default { ...@@ -96,7 +96,7 @@ export default {
qsearchEndDate: this.searchEndDate, qsearchEndDate: this.searchEndDate,
}; };
if (item) { if (item) {
params.qsearchKey = item.AreaName params.areaId = item.Id
} }
this.CommonJump("/search", params); this.CommonJump("/search", params);
}, },
......
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