Skip to content

M
million
Commit 9e55d922 authored by 罗超's avatar 罗超
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/viitto/million

parents e103bd33 87315ca7
Hide whitespace changes
Inline Side-by-side
Showing with 1299 additions and 896 deletions
package.json
View file @ 9e55d922
......@@ -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/App.vue
View file @ 9e55d922
......@@ -51,6 +51,9 @@ body {
font-family: "Noto Sans SC", 微软雅黑, "Microsoft YaHei", sans-serif !important;
font-weight: 400 !important;
}
.fz13{
font-size: 13px;
}
.fz14{
font-size: 14px;
}
......
src/boot/product.js
View file @ 9e55d922
......@@ -18,7 +18,7 @@ const product = {
} else if (t === 1) {
url = "/detail/" + encodeURIComponent(productInfo.id ? productInfo.id : productInfo.ID) + "/" + 0 + "/" + configId
} else if (t === 5) {
url = "/hotel/" + configId
url = "/detailHotal/" + configId+'/'+productInfo.b2CPrice
}
} else {
throw new Error("參數不合法");
......
src/boot/utils.js
View file @ 9e55d922
......@@ -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)
this.$router.push({
path: p,
query: obj
});
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/common/ImagePreview.vue 0 → 100644
View file @ 9e55d922
<template>
<div style="width: 100vw !important; overflow: hidden">
<div class="column items-center justify-center">
<q-img width="100%" height="100%" :src="images[currentIndex]" :img-style="{'transform':scaleString+' '+rotateString}" spinner-color="primary" spinner-size="30px" fit="none" />
<div class="img-preview-tools-box" style="box-shadow: none !important">
<div class="img-preview-tools" style="box-shadow: none !important">
<div class="row items-center" style="box-shadow: none !important">
<q-icon name="first_page" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="changeImageIndexHandler(-1)"/>
<q-icon name="last_page" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="changeImageIndexHandler(1)"/>
<q-icon name="rotate_right" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="rotateHandler(1)"/>
<q-icon name="rotate_left" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="rotateHandler(-1)"/>
<q-icon name="crop_free" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(0)"/>
<q-icon name="zoom_out" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(-1)"/>
<q-icon name="zoom_in" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(1)"/>
<q-icon name="close" size="28px" color="grey-2" class="cursor-pointer" v-ripple v-close-popup/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['current', 'images'],
data() {
return {
currentIndex: 0,
scale:1,
scaleString:'scale(1)',
rotate:0,
rotateString:'rotate(0deg)'
}
},
watch:{
current:(n,o)=>{
this.current = n
this.images = this.images
this.currentIndex=this.images.indexOf(this.current)
this.currentIndex = this.currentIndex==-1?0:this.currentIndex
}
},
mounted() {
this.currentIndex=this.images.indexOf(this.current)
this.currentIndex = this.currentIndex==-1?0:this.currentIndex
},
methods: {
zoomHandler(num){
if(num==0){
this.scale=1
}
if(this.scale<3 && num>0){
this.scale+=0.25
}
if(this.scale>0.25 && num<0){
this.scale-=0.25
}
this.scaleString=`scale(${this.scale})`
console.log(this.scale,data.scaleString)
},
rotateHandler(num){
if(num==0){
this.rotate=0
}
if(num>0){
this.rotate+=90
}
if(num<0){
this.rotate-=90
}
this.rotateString=`rotate(${this.rotate}deg)`
},
changeImageIndexHandler(num){
this.scale=1
this.scaleString=`scale(${this.scale})`
this.rotate=0
this.rotateString=`rotate(${this.rotate}deg)`
let i = this.currentIndex
i+=num
i = i<0?this.images.length-1:i
i = i==this.images.length?0:i
this.currentIndex = i
}
}
}
</script>
<style>
.img-preview-tools-box {
position: fixed;
z-index: 999999;
bottom: 100px;
}
.img-preview-tools-box .img-preview-tools {
background: rgba(0, 0, 0, 0.5);
border-radius: 48px;
padding: 10px 20px;
display: inline-block;
}
</style>
\ No newline at end of file
src/components/goods/style1.vue
View file @ 9e55d922
......@@ -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 @ 9e55d922
......@@ -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 @ 9e55d922
<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;
border: 1px solid #eee;
padding: 4px 6px;
margin: 8px 8px 8px 0;
display: inline-block;
}
.city:hover {
background-color: #eeeeee;
.navigate {
line-height: 12px;
border-bottom: 1px solid #666;
}
.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;
.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;
height: 40px;
line-height: 40px;
border-top: 1px solid #eee;
}
.category-l3:hover {
background-color: #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 }"
@click="handleSelectArea(item)"
class="hot-item"
>
<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"
>
<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
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"
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>
<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>
</q-img>
</div></template
>
<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="area-item"
v-for="area in el.SubList"
:key="area.Id"
@click="handleSelectArea(area)"
>
{{ 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"
</div>
</div>
<!-- 分类 -->
<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"
>
{{ 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>
: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>
</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,
}"
<div class="category-item"
v-for="area in el.SubList"
:key="area.Id"
@click="handleCategoryChage(area)"
>
{{ 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>
<span>{{ area.CategoryName }}</span>
<i class="iconfont iconpreviewright"></i>
</div>
</div>
</div>
</q-menu>
</q-btn>
</template>
</div>
</div>
</div>
</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 @ 9e55d922
......@@ -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 @ 9e55d922
......@@ -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 @ 9e55d922
......@@ -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();
},
methods: {
if(this.timer) {
clearInterval(this.timer)
}
}
},
getHomeData() {
let locationName = this.GetDomain();
var msg = {
......
src/pages/ScenicSpotTicket/details.vue
View file @ 9e55d922
......@@ -462,7 +462,8 @@
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<componentsMap :AddressObj="AddressObj"/>
<componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/>
<div v-else class="card text-center">经纬度未知</div>
</div>
</div>
<div
......@@ -897,7 +898,6 @@ export default {
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
......
src/pages/city/components/city-info.vue
View file @ 9e55d922
......@@ -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/detailsHotal.vue
View file @ 9e55d922
<template>
<div style="min-height: 80vh">
<div class="detaObj" style="min-height: 80vh" ref="detaObj">
<div
style="
position: fixed;
......@@ -13,12 +13,12 @@
class="bg-white"
:style="{ transform: stickyHeight }"
>
<div
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
class="q-py-sm row items-center"
>
class="q-py-sm"
> <div class="row items-center">
<span
class="col product-price text-subtitle1 text-weight-bold f30"
style="text-align: left"
......@@ -31,19 +31,169 @@
unelevated
class="q-px-xl"
label="選擇方案"
@click="goScrollHandler('#scheme')"
@click="goScrollHandler(priceListHeight)"
/>
</div>
<q-separator v-if="isShowNav" color="grey-2" class="q-my-sm" />
<div class="row no-wrap items-center justify-between" :class="{'q-pt-md q-mb-xs':!isShowNav,' q-pb-xs':isShowNav}">
<div class="row no-wrap">
<q-field stack-label label="入住 / 退房日期" standout
style="min-width: 190px" dense>
<div class="self-center full-width no-outline row no-wrap items-center" tabindex="0">
<span>{{dateRangeFormat}} </span>
<q-chip size="9px" clickable
text-color="white"
color="dark" square>{{liveNvm}} 晚</q-chip>
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
@range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
<q-field stack-label label="人数及客房" standout
class="q-ml-lg"
style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">
{{numberOfAdults}}成人
<template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template>
{{roomGroup}}房
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy2">
<div class="q-pa-lg q-py-lg">
<div class="row items-center">
<span class="text-grey-7 product-price fz14 q-mr-lg">客房</span>
<div>
<q-input
style="width: 150px"
v-model="roomGroup"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople('room', -1)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople('room', 1)"
/>
</template>
</q-input>
</div>
</div>
<q-separator color="grey-2" class="q-my-md" />
<div class="column" v-for="(x,index) in msg.searchroomGroup" :key="index">
<div class="row">
<div class="row items-center">
<span class="text-grey-7 product-price fz14 q-mr-lg">成人</span>
<q-input
style="width: 150px"
v-model="x.numberOfAdults"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfAdults', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfAdults', 1,x)"
/>
</template>
</q-input>
</div>
<div class="row items-center q-ml-lg">
<span class="text-grey-7 product-price fz14 q-mr-lg">儿童</span>
<q-input
style="width: 150px"
v-model="x.numberOfChildren"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfChildren', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfChildren', 1,x)"
/>
</template>
</q-input>
</div>
</div>
<q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
</div>
</div>
</q-popup-proxy>
</q-field>
</div>
<div>
<q-btn
color="primary"
unelevated
class="q-px-xl"
label="搜索"
@click="getData"
/>
</div>
</div>
</div>
</div>
<div
v-if="dataList"
v-if="hotelSummary"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
>
<div class="row items-center q-mt-md q-mb-lg">
<div class="row items-center q-mt-md q-mb-lg" style="padding-top: 73px;">
<q-breadcrumbs
class="col f12 no-wrap q-mr-md"
v-if="dataList"
style="font-size: 13px"
>
<q-breadcrumbs-el
......@@ -54,70 +204,50 @@
/>
<q-breadcrumbs-el label="日本" class="cursor-pointer" />
<q-breadcrumbs-el>
<span v-for="(x, i) in citys" :key="i">
<span class="cursor-pointer">{{ x }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">，</span>
<span>
<span class="cursor-pointer">{{ hotelSummary.hotelStateProvince }} </span>
<span class="q-mr-sm"></span>
</span>
</q-breadcrumbs-el>
<q-breadcrumbs-el
v-if="$q.platform.is.desktop"
:label="dataList.title"
:label="hotelSummary.address"
class="text-grey-6 ellipsis"
/>
</q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
<div class="text-grey-6 f12">Product No. # </div>
</div>
<div style="padding-bottom: calc((100% - 0px) / 3); position: relative">
<div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders"
>
<slider
ref="slider"
:options="options"
@slide="slideHandler"
style="height: 100%"
>
<slideritem
v-if="dataList.videoStr"
style="width: 80%"
class="q-mx-sm"
key="video"
>
<vue-core-video-players
ref="video"
:src="dataList.videoStr"
:title="dataList.title"
:muted="true"
:autoplay="false"
@play="playHandler"
@pause="pauseHandler"
@seeked="seekedChangeHandler"
@timeupdate="timeChangeHandler"
logo="../statics/img/transparent_logo.png"
:loop="false"
id="trip_video"
/>
</slideritem>
<slideritem
v-for="(item, index) in dataList.imgCover"
:key="index"
style="width: 80%"
class="q-mx-sm"
>
<q-img :src="item" spinner-color="grey" spinner-size="20px" />
</slideritem>
<div slot="loading">loading...</div>
</slider>
<div class="row rounded-borders bg-white overflow-hidden relative">
<q-img class="col-5 cursor-pointer" :src="hotelDetails.hotelImageUrl1" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl1)"/>
<div class="col column q-ml-xs">
<q-img class="cursor-pointer" :src="hotelDetails.hotelImageUrl2" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl2)"/>
<q-img class="q-mt-xs cursor-pointer" :src="hotelDetails.hotelImageUrl3" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl3)"/>
</div>
<div class="col column q-ml-xs">
<q-img class="cursor-pointer" :src="hotelDetails.hotelImageUrl4" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl4)"/>
<q-img class="q-mt-xs cursor-pointer" :src="hotelDetails.hotelImageUrl5" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl5)"/>
</div>
<div class="absolute" style="right: 10px;bottom: 10px;">
<span class="text-white f12 q-pa-xs q-px-md row items-center cursor-pointer"
style="background: rgba(23,23,23,.5);border-radius: 30px;"
@click="showImageHandler(hotelDetails.hotelImageUrl1)">
<q-icon name="images"></q-icon>
<span>{{images.length}}</span>
</span>
</div>
</div>
<div
class="q-py-lg"
:class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
>
<div class="col q-mr-lg">
<div class="f30 bold ellipsis-2-lines">{{ dataList.Name }}</div>
<!-- <div class="text-h6 ellipsis-2-lines">{{ dataList.Description }}</div> -->
<div class="f30 bold row items-center">
<span class="ellipsis-2-lines q-pr-lg">{{ hotelSummary.hotelName }}</span>
<q-rating v-model="roomReviewRating" size="1em"
color="orange" :max="roomReviewRating" readonly />
</div>
<div class="q-mt-md f12 text-grey-6">
<q-icon
name="iconfont icondingweixiao"
......@@ -132,19 +262,26 @@
<span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
</span>
</span> -->
<span>{{dataList.Address}}</span>
<span>{{ hotelSummary.address }}</span>
</div>
<div class="flex">
<div
class="tag tag-blue"
v-for="item in dataList.Array"
:key="item"
>
{{ item }}
</div>
<div class="tag tag-red" v-for="item in dataList.Array" :key="item">
{{ item }}
</div>
<div class="q-mt-md row">
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconOwner-1"
label=" 印象自組團"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont icontime"
:label="`住宿時間 ${liveNvm} 晚`" />
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconnetwork-fill"
label="日本語/中文 導覽"
/>
</div>
</div>
<div
......@@ -166,26 +303,11 @@
color="primary"
label="選擇方案"
unelevated
@click="goScrollHandler('#scheme')"
@click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/>
</div>
</div>
<div class="q-mt-lg" v-if="dataList.productRecommend">
<div
class="q-mt-sm"
v-for="(x, i) in dataList.productRecommend.split('\n')"
:key="i"
>
<q-icon
name="iconfont iconhongqi"
color="primary"
size="16px"
class="q-mr-md"
/>
{{ x }}
</div>
</div>
</div>
<div
class="bg-white"
......@@ -213,7 +335,7 @@
<q-tab
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.id)"
@click="goScrollHandler(x.top + 20)"
:name="x.display"
:label="x.display"
></q-tab>
......@@ -234,41 +356,6 @@
style="max-width: 1200px; margin-left: auto; margin-right: auto"
>
<div class="text-h6">選擇方案</div>
<!-- <div class="flex room-item"> -->
<!-- 房型左侧 -->
<!-- <div class="mr">
<img
class="room-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
<div class="f18 bold">房型标题</div>
<div>房型描述</div>
</div> -->
<!-- 房型右侧 -->
<!-- <div class="ml col-grow"> -->
<!-- 房型规格 -->
<!-- <div class="flex justify-between">
<div>
<div>
<span class="f16 bold">含早餐</span
><span class="f16">一张大床房</span>
</div>
<div class="canuse mt mb">仅剩1间房</div>
<div>不可退款</div>
</div>
<div>
<div class="f18 bold text-right mb">CYN 3984</div>
<q-btn class="select-btn" label="选择日期"></q-btn>
</div>
</div>
<div class="text-right canuse mt mb">最早可预订日</div>
<div>
<div v-for="item in 4" :key="item">
购房{{ item }}: 注意事项{{ item }}
</div>
</div> -->
<!-- </div> -->
<!-- </div> -->
<div
style="
background: #fff;
......@@ -277,39 +364,6 @@
margin-top: 20px;
"
>
<!-- <div
class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile"
>
<q-field
class="q-my-md"
stack-label
label="選擇日期、選項"
standout
dense
>
<div class="self-center full-width no-outline" tabindex="0">
{{ currentPrice.startDate }}
</div>
<q-popup-proxy ref="qDateProxy">
<calendar
class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
<template v-if="currentPrice && currentPrice.startDate">
<order-preview
class="q-pa-md"
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</template>
</div> -->
<!--方案选择区 -->
<select-room @change="(value) => MinPrice = value" :detail="dataList"></select-room>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情
</div>
......@@ -317,7 +371,7 @@
class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList && dataList.priceList.length > 0"
>
<!-- <div class="q-pa-md row">
<div class="q-pa-md row">
<div class="col">
<div
class="text-subtitle1 text-weight-bold row items-center"
......@@ -361,29 +415,12 @@
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div>
</div>
</div> -->
</div>
<div
class="q-pa-md"
style="border-top: 1px solid #eee"
v-if="showOrderPreview"
>
<!-- <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
<div class="text-subtitle2 text-weight-bold q-mr-xl">
關於此方案
</div>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="15天前可免費取消"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
</div> -->
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col">
<calendar
......@@ -419,7 +456,6 @@
</div> -->
<div
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
......@@ -431,87 +467,115 @@
class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" id="product">产品介绍</div>
}" ref="product">產品介紹</div>
<div
class="q-mt-md"
ref="diyContext"
:style="{ zoom: zoomDiyContext }"
v-html="dataList.Descriptions"
></div>
<div id="server"
>
<div class="q-pb-md">{{hotelDetails.hotelDescription}}</div>
<div class="q-pb-md">{{hotelDetails.bathUsage}}</div>
<div>{{hotelDetails.hotelRooms}}</div>
</div>
<div ref="server"
class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">服务设施</div>
<div class="q-mt-sm flex flex-wrap">
<template v-for="item in dataList.FacilityServices">
<div style="width: 25%; padding: 10px" v-for="el in item.list" :key="el.ID">{{el.Content}}</div>
</template>
<div class="q-mt-sm column">
<div class="q-pb-md"><span class="text-weight-bold">接送服务</span> {{hotelDetails.pickupService}}</div>
<div class="q-pb-md row no-wrap">
<span class="text-weight-bold">客房网络连接</span>
<span class="q-pl-md row wrap col">
<q-chip size="9px" clickable
text-color="white"
color="dark" square v-for="(x,i) in InterArr" :key="i">{{x}}</q-chip>
</span>
</div>
<div class="row no-wrap">
<span class="text-weight-bold">水疗</span>
<div class="column col q-pl-md">
<table class="hotel-details-table q-pb-md">
<tr>
<td colspan="3" class="td01">室外</td>
<td colspan="3" class="td01">屋内</td>
<td colspan="3" class="td01">蒸气浴</td>
</tr>
<tr>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
</tr>
<tr>
<td>{{bathRoom[0]}}</td>
<td>{{bathRoom[1]}}</td>
<td>{{bathRoom[2]}}</td>
<td>{{bathRoom[3]}}</td>
<td>{{bathRoom[4]}}</td>
<td>{{bathRoom[5]}}</td>
<td>{{bathRoom[6]}}</td>
<td>{{bathRoom[7]}}</td>
<td>{{bathRoom[8]}}</td>
</tr>
</table>
<div class="q-pt-sm row wrap">
<q-chip size="9px" clickable
text-color="white"
color="dark" square v-for="(x,i) in HotSpring" :key="i">{{x}}</q-chip>
</div>
</div>
</div>
<!-- <div
id="price"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="price"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用說明
</div>
<div
class="text-subtitle1 text-weight-bold q-my-md"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用包含
</div>
<div
class="q-mt-md trip-text"
v-html="'費用包含'"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-subtitle1 text-weight-bold q-my-md"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用不含
購買須知
</div>
<div
class="q-mt-md trip-text q-pb-xl"
v-html="'費用不含'"
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div> -->
>超過13歲視為成人處理</div>
<div
id="warning"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
ref="assemblypoint"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
購買須知
酒店地址
</div>
<div
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
class="q-mt-lg trip-text rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
v-html="
dataList.feature
? dataList.feature.importantTip || '暂无购买须知'
: '暂无购买须知'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
}">
<div class="q-pa-md" style="border-bottom: 1px dashed var(--q-color-warning)">
<div class="text-weight-bold text-h6">酒店名稱：{{hotelSummary.hotelName}}</div>
<div class="text-grey-9">地址：{{`${hotelSummary.address}`}}</div>
</div>
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" v-for="(x,index) in travelLngLat" :key="index">
<componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
<div v-else class="card text-center">经纬度未知</div>
</div>
</div>
<div
id="tips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
......@@ -523,17 +587,12 @@
<div
class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-info)"
v-html="
dataList.feature
? dataList.feature.warmTip || '暂无溫馨提示'
: '暂无溫馨提示'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
>
預定成功後房間將為您整晚保留</div>
<div
id="cancelTips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{
......@@ -570,12 +629,17 @@
<template v-if="$q.platform.is.desktop">
<div class="col-1"></div>
<div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px">
<div style="position: sticky; top: 200px">
<div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.id)"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-module':
currentHeight >= x.top &&
(i == navs.length - 1 || currentHeight < navs[i + 1].top),
}"
>
{{ x.display }}
</div>
......@@ -583,10 +647,15 @@
</div>
</template>
</div>
<q-dialog class="no-padding" v-model="showImagePriview"
v-if="images && images.length > 0">
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</div>
</template>
<script>
import { date } from 'quasar'
import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue";
......@@ -598,6 +667,8 @@ import hotelMap from "./hotel/hotelMap.vue";
import hotelDes from "./hotel/hotelDes.vue";
import comments from "./hotel/comments.vue";
import selectRoom from './hotel/selectRoom.vue';
import componentsMap from 'src/components/car/Map.vue';
import ImagePreview from 'src/components/common/ImagePreview.vue'
export default {
props: [],
components: {
......@@ -612,7 +683,9 @@ export default {
hotelMap,
hotelDes,
comments,
selectRoom
selectRoom,
componentsMap,
ImagePreview
},
data() {
return {
......@@ -622,13 +695,61 @@ export default {
searchDate: "",
clickDate: "",
slide: 1,
roomReviewRating: 0,
currentImage: '',
showImagePriview: false,
travelLngLat: [],//经纬度
ServeArr: [],//酒店服务与设施
InterArr: [],//网络连接
bathRoom: [],//温泉
HotSpring: [],
images: [],
hotelSummary: {},
hotelDetails: {},
roomGroup: 1,
numberOfAdults: 1,
numberOfChildren: 0,
liveNvm: 1,
dateRange:{},
dateRangeFormat: '',//入住、离店时间
roomGroupObj:{roomNum:null,numberOfAdults:1,numberOfChildren:0},
msg: {
configId: "",
cityId: 0,
preview: 0,
tcid: 0,
teamType: 0,
isGetPriceFlight: true,
// configId: "",
// cityId: 0,
// preview: 0,
// tcid: 0,
// teamType: 0,
// isGetPriceFlight: true,
arrivalDate: '',//开始日期
departureDate: '',//结束日期
searchroomGroup: [
{roomNum:1,numberOfAdults:1,numberOfChildren:0}
],//客房数
searchHotelIdList: [],
freeword: '',//地区名字 酒店名字
freewordType: 1, //类型 1，地区，2-酒店名称
reviewRatingUpperLimits: '',//最大评分数
reviewRatingLowerLimits: '',//最小评分数
searchHotelCategory: [], //酒店分类
searchHotelFeatures: [], //酒店特征
searchRoomType: [], //类型的房间
searchMealType: [], //饮食条件搜索
searchMinRate: '', //最小金额
searchMaxRate: '', //最大金额
displayFrom: 1,//页数
numberOfResults: 12,
rowsPerPage: 15,
sort: 1
},
detaMsg:{
groupBookingFlg: "0",
hotelId: 0,
hotelImageSize: 5,
photoGalleryGetFlg: 1
},
currentPrice: {},
isShow: false,
......@@ -672,37 +793,37 @@ export default {
],
navs: [
{
id: "#product",
val: "product",
top: 0,
isActive: false,
display: "產品介紹",
},
{
id: "#server",
val: "server",
top: 0,
isActive: false,
display: "服务设施",
},
// {
// id: "#price",
// top: 0,
// isActive: false,
// display: "費用說明",
// },
{
id: "#warning",
val: "assemblypoint",
top: 0,
isActive: false,
display: "酒店地址",
},
{
val: "warning",
top: 0,
isActive: false,
display: "購買須知",
},
{
id: "#tips",
val: "tips",
top: 0,
isActive: false,
display: "溫馨提示",
},
{
id: "#cancelTips",
val: "cancelTips",
top: 0,
isActive: false,
display: "取消政策",
......@@ -724,18 +845,23 @@ export default {
},
created() {
if (this.$route.params.id) {
this.msg.configId = decodeURIComponent(this.$route.params.id);
this.detaMsg.hotelId = decodeURIComponent(this.$route.params.id)
}
if (this.$route.params.tcid) {
this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
if(this.$route.params.b2CPrice){
this.MinPrice = this.$route.params.b2CPrice
}
},
mounted() {
document.getElementsByTagName("body")[0].style.background =
"rgb(255, 255, 255)";
if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
}
window.addEventListener("scroll", this.handleScroll);
this.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY-MM-DD')
this.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY-MM-DD')
this.msg.StartDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY-MM-DD')
this.msg.EndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY-MM-DD')
this.dateRangeFormat = `${this.msg.StartDate} - ${this.msg.EndDate} `
window.addEventListener("scroll", this.menu);
this.getData();
},
......@@ -743,6 +869,62 @@ export default {
document.getElementsByTagName("body")[0].style = "";
},
methods: {
showImageHandler(url) {
this.currentImage = url
this.showImagePriview = true
},
addPeople(m, i, x) {
if(m=='room'){
if(i==1){
this.roomGroup++
this.msg.searchroomGroup.push(this.roomGroupObj)
}else{
if(this.roomGroup>1){
this.roomGroup--
this.msg.searchroomGroup.pop()
}
}
}else{
x[m] = parseInt(x[m]) + i;
if(m!='numberOfChildren'){
x[m] = x[m] < 1 ? 1 : x[m]++;
}else{
x[m] = x[m] < 0 ? 0 : x[m]++;
}
}
this.CountPeople()
},
CountPeople(){
this.numberOfAdults = 0
this.numberOfChildren = 0
this.msg.searchroomGroup.forEach((x,index)=>{
x.roomNum = index+1
this.numberOfAdults += x.numberOfAdults
this.numberOfChildren += x.numberOfChildren
})
},
optionsFn(cd) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
},
// 日期筛选
dateRangeHandler(e) {
this.msg.StartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
this.msg.EndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
this.dateRangeFormat = `${this.msg.StartDate} - ${this.msg.EndDate} `
if (this.$refs.qDateProxy) this.$refs.qDateProxy.hide()
this.liveNvm = this.dateDiffer(this.msg.StartDate,this.msg.EndDate)
},
dateDiffer(DateStart,DateEnd) {
//date1结束时间
let date1 = new Date(DateEnd);
//date2当前时间
let date2 = new Date(DateStart);
date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
const diffDate = diff / (24 * 60 * 60 * 1000); //计算当前时间与结束时间之间相差天数
return diffDate
},
handleSelect(id) {
if (this.selectedCar === id) {
this.selectedCar = "";
......@@ -753,6 +935,38 @@ export default {
getTopNum(x) {
this.days = JSON.parse(x);
},
handleScroll(e) {
let temp = this.getScroll().top;
this.stickyHeight = document.querySelector(".q-header--hidden")
? "translateY(0px)"
: "translateY(0px)";
this.currentHeight = temp;
if (
this.videoPosition > 0 &&
this.videoPosition < this.currentHeight &&
this.options.currentPage == 0 &&
!this.isPictureInPicture
) {
this.isPictureInPicture = true;
let t = document.querySelectorAll("video")[0];
try {
t.requestPictureInPicture();
} catch (error) {}
} else if (
this.videoPosition > 0 &&
this.videoPosition > this.currentHeight &&
this.options.currentPage == 0 &&
this.isPictureInPicture
) {
this.isPictureInPicture = false;
document.exitPictureInPicture();
}
let h = document.location.hash;
if (h.indexOf("#/detailsHotal/") == -1) {
window.removeEventListener("scroll", this.handleScroll);
}
},
getScroll() {
return {
left:
......@@ -767,9 +981,8 @@ export default {
0,
};
},
goScrollHandler(id) {
console.log("scrollIntoView", id);
document.querySelector(id).scrollIntoView({ behavior: "smooth" });
goScrollHandler(top) {
window.scrollTo(0, top);
},
slideHandler(e) {
this.options.currentPage = e.currentPage;
......@@ -810,75 +1023,320 @@ export default {
getData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetHotelDetail",
{ HotelId: decodeURIComponent(this.$route.params.id) },
(r) => {
if (r.data.resultCode == 1) {
console.log("getData", r);
this.dataList = r.data.data;
this.dataList.FacilityServices = JSON.parse(this.dataList.FacilityServices)
this.dataList.imgCover = this.dataList.List.map(item => {
return item.Path
"dmc_post_Get_GetJAPAN_HotelDetail",
this.detaMsg,
(res) => {
this.$q.loading.hide();
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
this.hotelDetails = res.data.data.hotelDetails;
this.hotelSummary = res.data.data.hotelSummary;
this.roomReviewRating = Number(this.hotelDetails.roomReviewRating);
this.travelLngLat.push({
Lat: this.hotelSummary.latitudeW,
Lng: this.hotelSummary.longitudeW,
name: this.hotelSummary.hotelName
});
conosle.log(this.dataList.imgCover)
this.isShow = true;
this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") {
this.options.loop = false;
this.options.currentPage = 1;
this.$nextTick(() => {
setTimeout(() => {
let t = document.querySelectorAll(".slider-wrapper");
if (t.length > 0) {
let d = t[0].getBoundingClientRect();
this.videoPosition = d.top + d.height;
}
}, 1000);
});
//拆分酒店服务与设施
if (this.hotelDetails.roomEquipments != "") {
let ServeArr = this.hotelDetails.roomEquipments.split(",");
this.Services = [];
if (ServeArr[0] == 1) {
this.Services.push("浴室和厕所");
}
if (ServeArr[1] == 0) {
this.Services.push("公共汽车厕所CD（有全室巴士）");
}
if (ServeArr[1] == 1) {
this.Services.push("公共汽车厕所CD（有一部分巴士）");
}
if (ServeArr[1] == 2) {
this.Services.push("公共汽车厕所CD（有全室厕所）");
}
if (ServeArr[1] == 3) {
this.Services.push("公共汽车厕所CD（有一部分厕所）");
}
if (ServeArr[1] == 4) {
this.Services.push("公共汽车厕所CD（所有厕所都没有）");
}
if (ServeArr[2] == 1) {
this.Services.push("淋浴-免费(全室)");
}
if (ServeArr[2] == 2) {
this.Services.push("淋浴-收费(全室)");
}
if (ServeArr[2] == 3) {
this.Services.push("淋浴-免费(部分)");
}
if (ServeArr[2] == 4) {
this.Services.push("淋浴-收费(部分)");
}
if (ServeArr[3] == 1) {
this.Services.push("冷暖气-免费(全室)");
}
if (ServeArr[3] == 2) {
this.Services.push("冷暖气-收费(全室)");
}
if (ServeArr[3] == 3) {
this.Services.push("冷暖气-免费(部分)");
}
if (ServeArr[3] == 4) {
this.Services.push("冷暖气-收费(部分)");
}
if (ServeArr[4] == 1) {
this.Services.push("全室有空调(收费)");
}
if (ServeArr[4] == 2) {
this.Services.push("部分客房有空调(免费)");
}
if (ServeArr[4] == 3) {
this.Services.push("部分客房有空调(收费)");
}
if (ServeArr[4] == 4) {
this.Services.push("没有空调");
}
if (ServeArr[5] == 0) {
this.Services.push("全房间有暖气设备(免费)");
}
if (ServeArr[5] == 1) {
this.Services.push("全部房间都有暖气(收费)");
}
if (ServeArr[5] == 2) {
this.Services.push("部分客房供暖(免费)");
}
if (ServeArr[5] == 3) {
this.Services.push("部分客房供暖(收费)");
}
if (ServeArr[5] == 4) {
this.Services.push("没有暖气设备");
}
if (ServeArr[6] == 1) {
this.Services.push("电视（免费）");
}
if (ServeArr[6] == 2) {
this.Services.push("电视（收费）");
}
if (ServeArr[7] == 1) {
this.Services.push("录像机（免费）");
}
if (ServeArr[7] == 2) {
this.Services.push("录像机（收费）");
}
if (ServeArr[8] == 1) {
this.Services.push("卫星广播（免费）");
}
if (ServeArr[8] == 2) {
this.Services.push("卫星广播（收费）");
}
if (ServeArr[9] == 1) {
this.Services.push("冰箱-有(带饮料的)");
}
if (ServeArr[9] == 2) {
this.Services.push("空冰箱");
}
if (ServeArr[10] == 1) {
this.Services.push("迷你酒吧");
}
if (ServeArr[11] == 1) {
this.Services.push("祖邦煎锅（免费）");
}
if (ServeArr[11] == 2) {
this.Services.push("祖邦煎锅（收费）");
}
}
this.$nextTick(() => {
if (
this.dataList.feature &&
this.dataList.feature.featureHtml != ""
) {
let tw =
parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0;
//拆分网络连接
if (this.hotelDetails.internetAccessibilityOfTheRoom != "") {
this.InterArr = [];
let InternetArr = this.hotelDetails.internetAccessibilityOfTheRoom.split(
","
);
if (InternetArr[0] == 1) {
this.InterArr.push("客房网络连接");
}
if (InternetArr[1] == 1) {
this.InterArr.push("拨号连线");
}
if (InternetArr[2] == 1) {
this.InterArr.push("可连接LAN");
}
if (InternetArr[3] == 1) {
this.InterArr.push("无线局域网");
}
if (InternetArr[4] == 1) {
this.InterArr.push("PC贷款");
}
if (InternetArr[5] == 1) {
this.InterArr.push("免费接入网络");
}
}
//拆分温泉
if (this.hotelDetails.bathAndBathAmenities != "") {
this.HotSpring = [];
this.bathRoom = [];
let HotSpring = this.hotelDetails.bathAndBathAmenities.split(",");
this.bathRoom = HotSpring.slice(2, 11);
if (HotSpring[0] == 1) {
this.HotSpring.push("露天温泉(也有男女(包括时间交替)·可借贷");
} else if (HotSpring[0] == 2) {
this.HotSpring.push(
"露天温泉(有男女也有(包括时间交替)·不能借贷"
);
} else if (HotSpring[0] == 3) {
this.HotSpring.push(
"露天温泉(男女中只有1个(包括混浴)、可以包租)"
);
} else if (HotSpring[0] == 4) {
this.HotSpring.push(
"露天温泉(男女中只有一个(包括混浴)，不能包租"
);
}
let divArr = document.querySelectorAll("#setZoom>div");
for (let i = 0; i < divArr.length; i++) {
let div = divArr[i];
if (this.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth / 1123.0;
} else {
div.style.zoom = 1;
}
}
if (HotSpring[1] == 1) {
this.HotSpring.push("有包租浴室(没有条件)");
} else if (HotSpring[1] == 2) {
this.HotSpring.push("有包租浴室(有条件)");
}
if (HotSpring[11] == 1) {
this.HotSpring.push("阿米尼蒂:脸·手巾(免费)");
} else if (HotSpring[11] == 2) {
this.HotSpring.push("阿米尼蒂:脸·手巾(收费)");
}
if (HotSpring[12] == 1) {
this.HotSpring.push("阿米尼蒂:牙刷、牙膏(免费)");
} else if (HotSpring[12] == 2) {
this.HotSpring.push("阿米尼蒂:牙刷、牙膏(收费)");
}
if (HotSpring[13] == 1) {
this.HotSpring.push("阿米蒂奇:浴巾(免费)");
} else if (HotSpring[13] == 2) {
this.HotSpring.push("阿米蒂奇:浴巾(收费)");
}
if (HotSpring[14] == 1) {
this.HotSpring.push("水芹菜:洗发水(免费)");
} else if (HotSpring[14] == 2) {
this.HotSpring.push("水芹菜:洗发水(收费)");
}
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
if (HotSpring[15] == 1) {
this.HotSpring.push("阿姆尼蒂:林斯(免费)");
} else if (HotSpring[15] == 2) {
this.HotSpring.push("阿姆尼蒂:林斯(收费)");
}
try {
document
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
if (HotSpring[16] == 1) {
this.HotSpring.push("阿米尼蒂:沐浴露(免费)");
} else if (HotSpring[16] == 2) {
this.HotSpring.push("阿米尼蒂:沐浴露(收费)");
}
if (HotSpring[17] == 1) {
this.HotSpring.push("水黾:肥皂(免费)");
} else if (HotSpring[17] == 2) {
this.HotSpring.push("水黾:肥皂(收费)");
}
if (HotSpring[18] == 1) {
this.HotSpring.push("亚健康:浴衣(免费)");
} else if (HotSpring[18] == 2) {
this.HotSpring.push("亚健康:浴衣(收费)");
}
if (HotSpring[19] == 1) {
this.HotSpring.push("艾尼蒂:睡衣(免费)");
} else if (HotSpring[19] == 2) {
this.HotSpring.push("艾尼蒂:睡衣(收费)");
}
if (HotSpring[20] == 1) {
this.HotSpring.push("阿姆尼蒂:浴衣(免费)");
} else if (HotSpring[20] == 2) {
this.HotSpring.push("阿姆尼蒂:浴衣(收费)");
}
if (HotSpring[21] == 1) {
this.HotSpring.push("足球运动员:吹风机(免费)");
} else if (HotSpring[21] == 2) {
this.HotSpring.push("足球运动员:吹风机(收费)");
}
if (HotSpring[22] == 1) {
this.HotSpring.push("艾尼蒂:羽毛被褥(免费)");
} else if (HotSpring[22] == 2) {
this.HotSpring.push("艾尼蒂:羽毛被褥(收费)");
}
if (HotSpring[23] == 1) {
this.HotSpring.push("艾尼蒂:刮胡子(免费)");
} else if (HotSpring[23] == 2) {
this.HotSpring.push("艾尼蒂:刮胡子(收费)");
}
if (HotSpring[24] == 1) {
this.HotSpring.push("水黾:淋浴帽(免费)");
} else if (HotSpring[24] == 2) {
this.HotSpring.push("水黾:淋浴帽(收费)");
}
if (HotSpring[25] == 1) {
this.HotSpring.push("阿米尼蒂:棉签(免费)");
} else if (HotSpring[25] == 2) {
this.HotSpring.push("阿米尼蒂:棉签(收费)");
}
if (HotSpring[26] == 1) {
this.HotSpring.push("水黾:冲澡(免费)");
} else if (HotSpring[26] == 2) {
this.HotSpring.push("水黾:冲澡(收费)");
}
if (HotSpring[27] == 1) {
this.HotSpring.push("石梳:梳子刷(有)");
}
if (HotSpring[28] == 1) {
this.HotSpring.push("其他温泉浴:展望浴(没有条件)");
} else if (HotSpring[28] == 2) {
this.HotSpring.push("其他温泉浴:展望浴(有条件)");
}
if (HotSpring[29] == 1) {
this.HotSpring.push("其他:桑拿浴(免费)");
} else if (HotSpring[29] == 2) {
this.HotSpring.push("其他:桑拿浴(收费)");
}
if (HotSpring[30] == 1) {
this.HotSpring.push("其他:jazza(没有条件)");
} else if (HotSpring[29] == 2) {
this.HotSpring.push("其他:jazza(有条件)");
}
}
let dataImgArray=[]
for (let i = 0; i < 5; i++) {
if(this.hotelDetails[`hotelImageUrl${(i+1)}`] && this.hotelDetails[`hotelImageUrl${(i+1)}`].length>0){
dataImgArray.push(this.hotelDetails[`hotelImageUrl${(i+1)}`])
}
}
if(res.data.data.photoGalleries&&res.data.data.photoGalleries.photoGalleryInfo){
for (let i = 0; i < res.data.data.photoGalleries.photoGalleryInfo.length; i++) {
dataImgArray.push(res.data.data.photoGalleries.photoGalleryInfo[i].photoGalleryImageURL)
}
}
this.images=dataImgArray;
this.$nextTick(() => {
setTimeout(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 60;
});
this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight -
60;
}, 1000);
});
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
......@@ -892,15 +1350,68 @@ export default {
this.isShowNav = false;
}
},
goNavList(val) {
let newval = "#" + val;
document.querySelector(newval).scrollIntoView(true);
},
},
};
</script>
<style>
.hotel-details-table {
border: 1px solid #DCDCDC;
border-collapse: collapse;
width:680px;
}
.hotel-details-table .td01 {
padding: 3px 15px;
background: #F7F7F7;
width: 226px;
height: 19px;
text-align: center;
}
.hotel-details-table .td02 {
padding: 3px 15px;
background: #FAFAFA;
width: 69px;
height: 19px;
text-align: center;
}
.hotel-details-table td {
width: 439px;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #DCDCDC;
font-size: 14px;
box-sizing: border-box;
}
.hotel-details-tableMoblie {
border: 1px solid #DCDCDC;
border-collapse: collapse;
width:100%;
margin-top: 5px;
}
.hotel-details-tableMoblie .td01 {
padding: 3px 10px;
background: #F7F7F7;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie .td02 {
padding: 3px 5px;
background: #FAFAFA;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie td {
width: 100%;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #DCDCDC;
font-size: 14px;
box-sizing: border-box;
}
.slider-item {
transform: scale(1);
transition-timing-function: ease;
......@@ -950,26 +1461,6 @@ export default {
border-radius: 50%;
font-family: lettergothicstd;
}
.active-trip-moduleDay {
position: relative;
border: 0;
left: -15px;
font-size: 51px;
}
.active-trip-moduleDay.active::before {
opacity: 1;
}
.active-trip-moduleDay::before {
display: inline-block;
position: absolute;
top: 0px;
left: -50px;
content: "DAY";
font-size: 13px;
font-family: fangsong;
line-height: 58px;
opacity: 0;
}
#setZoom > div {
zoom: calc(100 / 1000);
}
......
src/pages/login.vue
View file @ 9e55d922
......@@ -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 @ 9e55d922
......@@ -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 @ 9e55d922
......@@ -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 @ 9e55d922
......@@ -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',
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 @ 9e55d922
......@@ -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