Skip to content

M
million
Commit 87315ca7 authored by 沈良进's avatar 沈良进
Browse files
Options

首页搜索条件适配移动端,路由,登录跳转,商品详情打开优化

parent ce3ad935
Show whitespace changes
Inline Side-by-side
Showing with 354 additions and 549 deletions
package.json
View file @ 87315ca7
......@@ -19,6 +19,7 @@
"babel-plugin-transform-remove-console": "^6.9.4",
"dayjs": "^1.11.7",
"js-md5": "^0.7.3",
"lodash-es": "^4.17.21",
"qrcode.vue": "^1.7.0",
"qrcodejs2": "^0.0.2",
"quasar": "^1.22.5",
......
src/boot/utils.js
View file @ 87315ca7
......@@ -196,12 +196,25 @@ Vue.prototype.OpenNewUrl = function(URL) {
}
//公用跳转
Vue.prototype.CommonJump = function(path, obj) {
Vue.prototype.CommonJump = function(path, obj, type = 'push') {
let p = typeof(path) == 'string' ? path : this.$product.genernalUrl(path)
if(type === 'blank') { // 新窗口打开
let routeUrl = this.$router.resolve({
path: p,
query: obj
});
window.open(routeUrl.href, '_blank');
} else if (type === 'replace') { // replace
this.$router.replace({
path: p,
query: obj
});
} else if (type === 'push') { // push
this.$router.push({
path: p,
query: obj
});
}
}
Vue.prototype.$user = user
Vue.prototype.createCalendar = function(dateStr) {
......
src/components/goods/style1.vue
View file @ 87315ca7
......@@ -5,7 +5,7 @@
{{ formatEnum(product.ProductType) }}
</div>
</q-img>
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height: 74px;" @click="CommonJump(product,{})">{{ product.Title }}</div>
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height: 74px;" @click="CommonJump(product,{},'blank')">{{ product.Title }}</div>
<div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
<span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
<span class="f12 q-ml-sm">起</span>
......
src/components/goods/style2.vue
View file @ 87315ca7
......@@ -15,7 +15,7 @@
</div>
</q-img>
<div class="q-px-md col">
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height:50px;" @click="CommonJump(product,{})">{{ product.Title }}</div>
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height:50px;" @click="CommonJump(product,{},'blank')">{{ product.Title }}</div>
<div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
<span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
<span class="f12 q-ml-sm">起</span>
......
src/components/navs/city-category-mobile.vue
View file @ 87315ca7
<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;
.area-item {
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;
border: 1px solid #eee;
padding: 4px 6px;
margin: 8px 8px 8px 0;
display: inline-block;
}
.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;
.navigate {
line-height: 12px;
border-bottom: 1px solid #666;
}
.address-btn {
margin: 0 10px 0 44px;
}
.all-type {
margin-left: 10px;
.box {
max-height: 500px;
overflow: auto;
}
.all-menu {
width: 660px;
padding: 10px;
.hot-item {
width: 50%;
display: inline-block;
height: 100px;
padding: 5px;
}
.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;
height: 40px;
line-height: 40px;
border-top: 1px solid #eee;
}
.category-l3-select {
color: #ee4454;
}
.category-box {
width: 140px;
padding: 10px;
font-weight: bold;
.top-navs {
position: sticky;
top: 0px;
z-index: 10;
background: #fff;
}
.category-btn {
width: 100px;
.area-navs {
position: sticky;
top: 48px;
z-index: 10;
background: #fff;
}
</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 class="box relative" id="privilage-list">
<q-tabs v-model="tabType" class="text-primary top-navs">
<q-tab name="area" label="目的地" />
<q-tab name="category" label="所有分类" />
</q-tabs>
<!-- 目的地 -->
<div v-if="tabType === 'area'">
<div class="padding">
<div class="flex justify-between items-end">
<span class="f18 bold">热门目的地</span>
<span class="navigate" @click="showHotMore = !showHotMore">{{
showHotMore ? "收起" : "查看更多"
}}</span>
</div>
<div>
<template v-for="(item, index) in hotAreas">
<div
v-for="item in areas"
v-if="showHotMore || index < 4"
: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"
class="hot-item"
>
<q-img
:src="item.ImageList[0]"
......@@ -229,145 +83,76 @@
</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"
</div></template
>
{{ item.Name }}
</div>
<q-tabs v-model="areaType" class="text-primary area-navs" :dense="true">
<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="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"
class="area-item"
v-for="area in el.SubList"
:key="area.Id"
@click="handleSelectArea(area)"
>
{{ item2.Name }}
</div>
</div>
</div>
{{ area.Name }}
</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"
<!-- 分类 -->
<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"
v-for="(x, i) in dataList.CategoryList"
: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)">
<span>{{ el.CategoryName }}</span>
<i class="iconfont iconpreviewright"></i>
</div>
<div class="category-item"
v-for="area in el.SubList"
:key="area.Id"
@click="handleCategoryChage(area)"
>
<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>
<span>{{ area.CategoryName }}</span>
<i class="iconfont iconpreviewright"></i>
</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";
import {throttle} from 'lodash';
export default {
props: {
baseData: {
......@@ -378,17 +163,13 @@ export default {
type: Object,
default: () => ({}),
},
title: {
type: String,
default: "",
},
showDialog: {
type: Boolean,
default: true,
},
},
data() {
return {
showPadding: false,
showHotMore: false,
tabType: "area",
areaType: "",
searchDate: "",
searchEndDate: "",
menuFocusAll: 0,
......@@ -396,53 +177,22 @@ export default {
selectCategory: undefined,
categoryList: [],
subTitle: "",
LoginUser: {},
navs: [],
navsStyle: 1,
areas: [],
selectedArea: [],
selectedAreaId: "",
isHome: false,
hotAreas: [],
};
},
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"));
}
this.initAreas();
var newStartDate = new Date();
var newStartDateStr = this.formatDate(
newStartDate.getFullYear(),
......@@ -457,25 +207,64 @@ export default {
);
this.searchDate = newStartDateStr;
this.searchEndDate = newEndDateStr;
// this.initAreas()
// this.initNavs();
// this.getCategoryList();
},
beforeDestroy() {
window.removeEventListener('scroll', this.throttleGetScrollTop, true)
},
methods: {
avatarClick() {
if (this.LoginUser.token && 1 === 2) {
this.CommonJump("/userCenter");
initScroll() {
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)
// 初始化滚动监听
this.scrollInit()
},
// 监听滚动高度
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
// 获取当前滚动内容对应的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
} else {
// 展示登录弹窗
this.CommonJump("/login");
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' });
},
handleSelectArea(item) {
this.$emit('close', false)
this.CommonJump("/city/" + item.Id, {
id: item.Id,
});
},
handleCategoryChage(item) {
this.$emit('close', false)
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
......@@ -483,123 +272,17 @@ export default {
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);
this.areas = this.baseData.AreaList;
this.hotAreas = hotArr;
console.log("hotArea", this.hotAreas, this.areas);
this.$nextTick(() => {
this.initScroll();
})
},
getHotList(arr) {
let hotArr = [];
......@@ -614,11 +297,6 @@ export default {
});
return hotArr;
},
loginOut() {
localStorage.removeItem("b2bUser");
this.LoginUser = {};
this.CommonJump("/index", {});
},
getCategoryList() {
let locationName = this.GetDomain();
var msg = {
......
src/components/navs/hor-big-one.vue
View file @ 87315ca7
......@@ -178,7 +178,9 @@
class="zk_toolbar flex justify-between"
:class="{ 'q-px-none': $q.platform.is.desktop }"
>
<div v-if="$q.platform.is.mobile" @click="showDialog = true">菜单</div>
<div class="flex"><div class="f24" v-if="$q.platform.is.mobile && isHome" @click="handleShowDialog">
<i class="iconfont iconmore1" style="font-size: 24px;"></i>
</div>
<img
:src="baseData.logo"
style="
......@@ -189,7 +191,7 @@
"
class="q-mr-lg q-ml-sm"
@click="CommonJump('/index', {})"
/>
/></div>
<!-- pc -->
<div v-if="$q.platform.is.desktop">
<q-btn label="繁體中文" flat>
......@@ -297,17 +299,26 @@
/>
</div>
</q-toolbar>
<city-category v-if="$q.platform.is.desktop" :baseData="baseData" :dataList="dataList"></city-category>
<q-dialog v-model="showDialog">
<city-category-mobile></city-category-mobile></q-dialog>
<city-category
v-if="$q.platform.is.desktop"
:baseData="baseData"
:dataList="dataList"
></city-category>
<popup @mousemove.prevent id="city-category" v-model="showDialog" mode="bottom" @close="handleDialogClose">
<city-category-mobile @close="showDialog = false"
:baseData="baseData"
:dataList="dataList"
></city-category-mobile
></popup>
</q-header>
</template>
<script>
import CityCategoryMobile from './city-category-mobile.vue';
import popup from "../props/index";
import CityCategoryMobile from "./city-category-mobile.vue";
import cityCategory from "./city-category.vue";
export default {
components: { cityCategory, CityCategoryMobile },
components: { cityCategory, CityCategoryMobile, popup },
props: {
baseData: {
type: Object,
......@@ -398,6 +409,19 @@ export default {
// this.getCategoryList();
},
methods: {
handler(event) {event.preventDefault();},
handleShowDialog() {
this.showDialog = true;
this.scrollTop = document.querySelector('body').scrollTop;
document.querySelector(
"body"
).style = `position: fixed; top: -${this.scrollTop}px`;
},
handleDialogClose() {
document.querySelector(
"body"
).style = '';},
avatarClick() {
if (this.LoginUser.token) {
this.CommonJump("/userCenter");
......
src/components/searchdata/kkday.vue
View file @ 87315ca7
......@@ -733,7 +733,7 @@ this.dayArray = this.dayArray.filter(item => arr.includes(item.id))
// this.msg.dayNumList = arr;
},
GotoDetails(item) {
this.CommonJump(item,{});
this.CommonJump(item,{}, 'blank');
},
},
};
......
src/pages/Index.vue
View file @ 87315ca7
......@@ -416,13 +416,22 @@ export default {
// this.getHomeData();
},
mounted() {
this.init()
this.timer = setInterval(() => {
this.init()
}, 100)
},
methods: {
init() {
var jObj = JSON.parse(localStorage.getItem("groupinfo"));
if(jObj) {
this.RB_Group_Id = jObj.GroupId;
this.getHomeData();
if(this.timer) {
clearInterval(this.timer)
}
}
},
methods: {
getHomeData() {
let locationName = this.GetDomain();
var msg = {
......
src/pages/city/components/city-info.vue
View file @ 87315ca7
......@@ -44,7 +44,7 @@ export default {
},
created() {
this.cityInfo = this.city
this.cityInfo.Introduction=this.cityInfo.Introduction.replace(/\n/g,"<br>")
this.cityInfo.Introduction=this.cityInfo.Introduction?.replace(/\n/g,"<br>")
},
}
</script>
......
src/pages/login.vue
View file @ 87315ca7
......@@ -261,7 +261,8 @@ export default {
created() {},
mounted() {
console.log("login", this.$route.query);
const { code, state } = this.$route.query;
const { code, state, path } = this.$route.query;
this.path = path
if (code) {
this.fetchLoginInfo(code, state);
this.isLogin = false;
......@@ -519,7 +520,11 @@ export default {
var jsonData = JSON.stringify(res.data.data);
window.localStorage.setItem("b2bUser", jsonData);
console.log("userInfo", jsonData, res.data.data);
if(this.path) {
this.CommonJump(this.path, {});
} else {
this.CommonJump("/index", {});
}
} else {
this.$q.notify({
type: "negative",
......
src/pages/usercenter/mobileUserCenter.vue
View file @ 87315ca7
......@@ -57,6 +57,19 @@ background: #FAF9F9;
border-radius: 9px;
margin: 10px 13px 0 13px;
}
.order-number {
text-align: center;
position: absolute;
right: 10px;
top: 0;
height: 14px;
width: 14px;
font-size: 9px;
line-height: 14px;
border-radius: 50%;
color: #fff;
background-color: $primary;
}
</style>
<template>
<div class="user-nav-box">
......@@ -84,7 +97,7 @@ margin: 10px 13px 0 13px;
</div>
<div class="bg-white card">
<div
class="order-item cursor-pointer"
class="order-item cursor-pointer relative"
@click="navigateTo(item.key)"
v-for="item in orderList"
:key="item.key"
......@@ -93,15 +106,15 @@ margin: 10px 13px 0 13px;
<div class="column flex-center">
<img class="order-img" :src="require(`../../assets/img/userCenter/${item.icon}.png`)" />
<div>{{ item.label }}</div>
<div class="absoulte order-number" v-if="item.number">{{item.number}}</div>
</div>
<!-- <span class="text-primary">{{ item.label }}</span> -->
</div>
<div class="flex play-box q-mt-md">
<img class="go-play q-mr-md" src="../../assets/img/userCenter/set.png" />
<div class="flex play-box q-mt-md" v-if="useOrder">
<img class="go-play q-mr-md" :src="useOrder.GoodsPic" />
<div class="f12">
<div>即將出行</div>
<div class="text-grey-6">[2023年3月6日]日本富士山尊享一日遊</div>
<div class="text-grey-6">[{{useOrder.UseDate}}]{{useOrder.GoodsName}}</div>
</div>
</div>
</div>
......@@ -143,6 +156,7 @@ export default {
return {
selectKey: "",
LoginUser: {},
useOrder: null,
orderList: [
{
icon: "order-pay",
......@@ -221,6 +235,7 @@ export default {
this.selectKey = this.$route.path;
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
this.getUserOrderInfo()
}
},
methods: {
......@@ -228,6 +243,34 @@ export default {
this.selectKey = route;
this.CommonJump(route, {});
},
getUserOrderInfo() {
this.apipost(
"GetMyOrderNum_post",
{},
(res) => {
if (res.data.resultCode == 1) {
const { NoPayCount, PayCount, RetultList } = res.data.data;
this.useOrder = RetultList[0] ? RetultList[0] : null
this.orderList.forEach(item => {
if(item.label === '待付款') {
item.number = NoPayCount
} else if(item.label === '待出行') {
item.number = PayCount
}
})
} else {
// // this.$notify(res.data.message);
// this.$q.notify({
// type: "negative",
// message: res.data.message,
// position: "top",
// timeout: 2000, // 以毫秒为单位; 0意味着没有超时
// });
}
},
null
);
},
},
};
</script>
\ No newline at end of file
src/router/index.js
View file @ 87315ca7
......@@ -32,9 +32,12 @@ export default function (/* { store, ssrContext } */) {
Router.beforeEach((to, from, next) => {
let user = undefined
if(typeof window === 'object') {
if(to.meta.title) {
document.title = to.meta.title
}
user = JSON.parse(window.localStorage.getItem('b2bUser'))
if(to.meta.needLogin && !user) {
next({path: '/login'})
next({path: '/login?path=' + encodeURIComponent(to.fullPath)})
} else {
next()
}
......
src/router/routes.js
View file @ 87315ca7
......@@ -4,171 +4,189 @@ const routes = [{
import ('layouts/HomeLayout.vue'),
children: [{
path: '',
meta: { title: '首页' },
component: () =>
import ('pages/index.vue')
},
{
path: '/index',
meta: { title: '首页' },
component: () =>
import ('pages/index.vue')
},
{
path: '/about', //关于我们
meta: { title: '关于我们' },
component: () =>
import ('pages/about.vue')
}, {
path: '/contract', //契约管理
meta: { title: '契约管理' },
component: () =>
import ('pages/contract.vue')
}, {
path: '/tour_visa', //签证护照管理
meta: { title: '签证护照管理' },
component: () =>
import ('pages/tour_visa.vue')
}, { //行程
path: '/details/:id/:tcid',
meta: { title: '行程' },
component: () =>
import ('pages/details.vue')
}, { // 包车，接机
meta: { title: '包车，接机' },
path: '/detailCar/:id',
component: () =>
import ('pages/detailsCar.vue')
}, { // 包车，接机下单
path: '/PickuporderForm/:id',
meta: { title: '包车，接机下单' },
component: () =>
import ('pages/Pickuporder/orderForm.vue')
}, { // 景区门票详情
path: '/detailsScenicSpotTicket/:id',
meta: { title: '景区门票详情' },
component: () =>
import ('pages/ScenicSpotTicket/details.vue')
}, { // 景区门票下单
path: '/ScenicSpotTicketOrderForm/:id',
meta: { title: '景区门票下单' },
component: () =>
import ('pages/ScenicSpotTicket/orderForm.vue')
}, { // 酒店
path: '/detailHotal/:id/:b2CPrice',
meta: { title: '酒店' },
component: () =>
import ('pages/detailsHotal.vue')
}, { // 旅程
path: '/detail/:id/:tcid/:newConfigId',
meta: { title: '旅程' },
component: () =>
import ('pages/detailsNew.vue')
}, {
path: '/search', //签证护照管理
path: '/search', //出行检索
meta: { title: '出行检索' },
component: () =>
import ('pages/Search.vue')
},
{
path: '/account', //用户信息
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '用户信息' },
component: () =>
import ('pages/usercenter/account.vue')
},
{
path: '/demandlist', //需求单列表
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '需求单列表' },
component: () =>
import ('pages/usercenter/demandlist.vue')
},
{
path: '/demandinfo/:id', //需求单详情
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '需求单详情' },
component: () =>
import ('pages/usercenter/demandinfo.vue')
},
{
path: '/orderlist', //订单列表
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '订单列表' },
component: () =>
import ('pages/usercenter/orderlist.vue')
},
{
path: '/orderinfo/:id', //订单详情
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '订单详情' },
component: () =>
import ('pages/usercenter/orderinfo.vue')
},
{
path: '/passengerList/:id', //旅客名单
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '旅客名单' },
component: () =>
import ('pages/usercenter/passengerList.vue')
},
{
path: '/register', //用户注册
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '用户注册' },
component: () =>
import ('pages/usercenter/register.vue')
},
{
path: '/loginInfo', //账户设置
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '账户设置' },
component: () =>
import ('pages/usercenter/loginInfo.vue')
},
{
path: '/setAddress', //地址管理
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '地址管理' },
component: () =>
import ('pages/usercenter/setAddress.vue')
},
{
path: '/setInfo', //账户设置
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '账户设置' },
component: () =>
import ('pages/usercenter/setInfo.vue')
},
{
path: '/setUserInfo', //用户信息
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '用户信息' },
component: () =>
import ('pages/usercenter/setUserInfo.vue')
},
{
path: '/coupon', //优惠券
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '优惠券' },
component: () =>
import ('pages/usercenter/coupon.vue')
},
{
path: '/order', //用户订单
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '用户订单' },
component: () =>
import ('pages/usercenter/order.vue')
},
{
path: '/setUsersList', //用户订单
meta: { isUserCenter: true, needLogin: true },
path: '/setUsersList', //出行人管理
meta: { isUserCenter: true, needLogin: true, title: '出行人管理' },
component: () =>
import ('pages/usercenter/setUsersList.vue')
},
{
path: '/payInfo', //支付管理
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true, title: '支付管理' },
component: () =>
import ('pages/usercenter/payInfo.vue')
},
{
path: '/customer/:id', //自定义页面
path: '/customer/:id', //顾客管理
meta: { title: '顾客管理' },
component: () =>
import ('pages/customer.vue')
},
{
path: '/city/:id', //自定义页面
path: '/city/:id', //城市详情
meta: { title: '城市详情' },
component: () =>
import ('pages/city/cityDetail.vue')
},
{
path: '/lineOrderPriview/:id?', //自定义页面
path: '/lineOrderPriview/:id?', //订单确认
meta: { title: '订单确认' },
component: () =>
import ('pages/line/orderPreview.vue')
},
{
path: '/pay/:id?', //自定义页面
meta: { title: '订单支付' },
component: () =>
import ('pages/pay/pay.vue')
},
{
path: '/paysuccess/:id?', //自定义页面
path: '/paysuccess/:id?', //支付结果
meta: { title: '支付结果' },
component: () =>
import ('pages/pay/paysuccess.vue')
},
......@@ -177,37 +195,43 @@ const routes = [{
},
{
path: '/userCenter', //移动端个人中心
meta: { isUserCenter: true, needLogin: true },
meta: { isUserCenter: true, needLogin: true,title: '个人中心' },
component: () =>
import ('pages/usercenter/mobileUserCenter.vue')
},
{
path: '/login',
meta: { title: '登录' },
component: () =>
import ('pages/login.vue'),
children: [{
path: '/login',
meta: { title: '登录' },
component: () =>
import ('pages/login.vue')
}]
},
{
path: '/resetPassword',
meta: { title: '重置密码' },
component: () =>
import ('pages/resetPassword.vue'),
children: [{
path: '/resetPassword',
meta: { title: '重置密码' },
component: () =>
import ('pages/resetPassword.vue')
}]
},
{
path: '/newTrip',
meta: { title: '旅程' },
component: () =>
import ('pages/newTrip.vue')
},
{
path: '/tripMobile',
meta: { title: '旅程' },
component: () =>
import ('pages/tripMobile.vue')
}
......
yarn.lock
View file @ 87315ca7
......@@ -5915,6 +5915,11 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash._reinterpolate@^3.0.0:
version "3.0.0"
resolved "https://registry.npmmirror.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz"
......
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