Skip to content

A
Athena
Commit be140f75 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

no message

parent fa81c807
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 183 deletions
src/assets/css/common.css
View file @ be140f75
......@@ -143,6 +143,24 @@
border-radius: 4px;
background: #EDEDED;
}
.content-item-box .content-item-box-hover::-webkit-scrollbar{
/*滚动条整体样式*/
width: 0px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 0px;
}
.content-item-box .content-item-box-hover::-webkit-scrollbar-thumb{
/*滚动条里面小方块*/
border-radius: 0px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
background: #c9c9c9;
}
.content-item-box .content-item-box-hover::-webkit-scrollbar-track{
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
border-radius: 0px;
background: #EDEDED;
}
.w200{
width: 200px !important;
}
......
src/components/FreeTravel/FreeHome.vue
View file @ be140f75
......@@ -275,9 +275,12 @@
.content-item-box .content-item-box-hover{
position: relative;
width: 100%;
display: flex;
display: -webkit-box;
padding-top: 16px;
overflow: auto;
/* justify-content: space-between; */
height: 280px;
padding-bottom: 10px;
}
.content-item-box-hover{
width: 100%;
......@@ -632,9 +635,13 @@
.FreeHome .el-carousel__indicator.is-active button{
width: 12px;;
}
.loading-box{
min-height:400px
}
</style>
<template>
<div class="FreeHome commonF" @click="inputActive = false">
<div v-loading="loading">
<div class="FreeHome commonF" @click="inputActive = false" >
<div>
<div class="fh-tit">
<img :onerror="defaultImg" src="../../assets/img/freeHome/top-tex.png" alt="">
......@@ -715,216 +722,176 @@
更多城市选择
</div>
</div> -->
<div class="fh-tejia">
<p>当季特价</p>
<div class="icon-item">
<div v-if="menPiaoList.length>0">
<div :class="{'active': activeId == 'menpiao'}" @click="goScroll('menpiao')">
<i class="iconfont icon-menpiao1"></i>
<div>
<div class="fh-tejia">
<p>当季特价</p>
<div class="icon-item">
<div v-if="menPiaoList.length>0">
<div :class="{'active': activeId == 'menpiao'}" @click="goScroll('menpiao')">
<i class="iconfont icon-menpiao1"></i>
</div>
</div>
</div>
<div v-if="list1.length>0">
<div :class="{'active': activeId == 'meals'}" @click="goScroll('meals')">
<i class="iconfont icon-b-meals"></i>
<div v-if="list1.length>0">
<div :class="{'active': activeId == 'meals'}" @click="goScroll('meals')">
<i class="iconfont icon-b-meals"></i>
</div>
</div>
</div>
<div v-if="list2.length>0">
<div :class="{'active': activeId == 'yiriyou'}" @click="goScroll('yiriyou')">
<i class="iconfont icon-yiriyou"></i>
<div v-if="list2.length>0">
<div :class="{'active': activeId == 'yiriyou'}" @click="goScroll('yiriyou')">
<i class="iconfont icon-yiriyou"></i>
</div>
</div>
</div>
<div v-if="list3.length>0">
<div :class="{'active': activeId == 'cheliang'}" @click="goScroll('cheliang')">
<i class="iconfont icon-cheliang"></i>
<div v-if="list3.length>0">
<div :class="{'active': activeId == 'cheliang'}" @click="goScroll('cheliang')">
<i class="iconfont icon-cheliang"></i>
</div>
</div>
</div>
</div>
</div>
<div id="meals" class="content-item" v-if="list1.length>0">
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">餐食就在这里解决吧~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item" v-for="(item, index) in list1" @click="goDetails(item)" v-if="index < 4">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong class="PingFangR">{{item.b2c_price}}</strong>/人</p>
<div id="meals" class="content-item" v-if="list1.length>0">
<div class="left-btn _btn" @click="scrollbar('meals', 1)">
</div>
<div class="right-btn _btn" @click="scrollbar('meals', 2)">
</div>
<p class="content-item-tit">餐食就在这里解决吧~</p>
<div class="content-item-box">
<div class="content-item-box-hover" ref="meals">
<div class="content-item-box-item" v-for="(item, index) in list1" @click="goDetails(item)" >
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong class="PingFangR">{{item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div>
<img :onerror="defaultImg" :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction">
{{item.introduction}}
</div>
</div>
</div>
</div>
</div>
<div id="yiriyou" class="content-item" v-if="list2.length>0">
<!-- <div class="left-btn _btn">
<div id="yiriyou" class="content-item" v-if="list2.length>0">
<div class="left-btn _btn" @click="scrollbar('yiriyou', 1)">
</div>
<div class="right-btn _btn">
<div class="right-btn _btn" @click="scrollbar('yiriyou', 2)">
</div>
<p class="content-item-tit">放轻松，甩手一日游~</p>
<el-row :gutter="20">
<el-col :span="10">
<div class="content-item-box2">
<div class="content-item-box">
<div class="content-item-box-hover" ref="yiriyou">
<div class="content-item-box-item" v-for="(item, index) in list2" @click="goDetails(item)" >
<div class="img-box">
<img :onerror="defaultImg" src="../../assets/img/activy.jpg" alt="">
<img :onerror="defaultImg" src="../../assets/img/activy.jpg" alt="">
<span class="tag price2">￥ <strong>299</strong> 起</span>
</div>
<div class="content-tit">
<div>
【导游带领免排队】太平山缆车快速通关套票
</div>
<div>
<i class="iconfont icon-mudedi"></i> 日本-京东
<div class="price price2">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
</div>
</el-col>
<el-col :span="14">
<div class="content-item-box2">
<div class="img-box img-box2">
<img :onerror="defaultImg" src="../../assets/img/activy.jpg" alt="">
<img :onerror="defaultImg" src="../../assets/img/activy.jpg" alt="">
<img :onerror="defaultImg" src="../../assets/img/activy.jpg" alt="">
<span class="tag price2">￥ <strong>299</strong> 起</span>
</div>
<div class="content-tit">
<div>
【导游带领免排队】太平山缆车快速通关套票
</div>
<div>
<i class="iconfont icon-mudedi"></i> 日本-京东
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div>
</div>
</el-col>
</el-row> -->
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">放轻松，甩手一日游~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item" v-for="(item, index) in list2" @click="goDetails(item)" v-if="index < 4">
<div class="img-box">
<div class="price price2">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction">
{{item.introduction}}
</div>
</div>
</div>
</div>
</div>
<div id="cheliang" class="content-item" v-if="list3.length>0">
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">车程快慢，你来定~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item" v-for="(item, index) in list3" @click="goDetails(item)" v-if="index < 4">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
<div id="cheliang" class="content-item" v-if="list3.length>0">
<div class="left-btn _btn" @click="scrollbar('cheliang', 1)">
</div>
<div class="right-btn _btn" @click="scrollbar('cheliang', 2)">
</div>
<p class="content-item-tit">车程快慢，你来定~</p>
<div class="content-item-box">
<div class="content-item-box-hover" ref="cheliang">
<div class="content-item-box-item" v-for="(item, index) in list3" @click="goDetails(item)" >
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div>
<img :onerror="defaultImg" :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction">
{{item.introduction}}
</div>
</div>
</div>
</div>
</div>
<div id="menpiao" class="content-item" v-if="menPiaoList.length>0">
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">游玩门票，看过来~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item" v-for="(item, index) in menPiaoList" @click="goDetails(item)" v-if="index < 4">
<div class="img-box">
<div class="price price4">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="name" :title="item.introduction">
{{item.introduction}}
</div>
</div>
<div id="menpiao" class="content-item" v-if="menPiaoList.length>0">
<div class="left-btn _btn" @click="scrollbar('menpiao', 1)">
</div>
</div>
</div>
<div class="jingxuan">
<div v-if="TaoCanList.length > 0">
<div class="tit">
<i class="iconfont icon-jingxuan"></i>
<p>精选</p>
<div class="right-btn _btn" @click="scrollbar('menpiao', 2)">
</div>
<el-carousel :interval="999999" type="card" height="490px">
<el-carousel-item v-for="(item, index) in TaoCanList" v-if="item.pkgs" :key="index">
<div class="jingxuan-item" @click="goDetails(item.pkgs[0], 2)">
<div>
<div class="img-item">
<img :onerror="defaultImg" :src="item.url" alt="">
<p class="content-item-tit">游玩门票，看过来~</p>
<div class="content-item-box">
<div class="content-item-box-hover" ref="menpiao">
<div class="content-item-box-item" v-for="(item, index) in menPiaoList" @click="goDetails(item)" >
<div class="img-box">
<div class="price price4">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p>
</div>
<img :onerror="defaultImg" :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag">
<span class="PingFangR"><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
</div>
<div class="jingxuanbg">
<img :onerror="defaultImg" src="../../assets/img/freeHome/jingxuanbg.png" alt="">
<div class="name" :title="item.introduction.replace(/KKday/g, '印象之旅')">
{{item.introduction.replace(/KKday/g, '印象之旅')}}
</div>
<div class="jinxuan-time">
<span class="number">{{getMonth(item.sale_dates.saleDt[0].sale_day)}}</span><span class="text"> 月</span><span class="number number2"> {{getDay(item.sale_dates.saleDt[0].sale_day)}}</span><span class="text"> 日</span>
</div>
</div>
</div>
</div>
<div class="jingxuan">
<div v-if="TaoCanList.length > 0">
<div class="tit">
<i class="iconfont icon-jingxuan"></i>
<p>精选</p>
</div>
<el-carousel :interval="999999" type="card" height="490px">
<el-carousel-item v-for="(item, index) in TaoCanList" v-if="item.pkgs" :key="index">
<div class="jingxuan-item" @click="goDetails(item.pkgs[0], 2)">
<div>
<div class="img-item">
<img :onerror="defaultImg" :src="item.url" alt="">
</div>
</div>
<div class="jingxuanbg">
<img :onerror="defaultImg" src="../../assets/img/freeHome/jingxuanbg.png" alt="">
</div>
<div class="jinxuan-time">
<span class="number">{{getMonth(item.sale_dates.saleDt[0].sale_day)}}</span><span class="text"> 月</span><span class="number number2"> {{getDay(item.sale_dates.saleDt[0].sale_day)}}</span><span class="text"> 日</span>
</div>
</div>
</div>
<p class="jingxuan-tit">{{item.pkgs[0].pkg_name}}</p>
</el-carousel-item>
</el-carousel>
<p class="jingxuan-tit">{{item.pkgs[0].pkg_name.replace(/KKday/g, '印象之旅')}}</p>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
loading: false,
scrollobj: null,
navs:[
'meals',
......@@ -982,6 +949,13 @@ export default {
this.getCCList()
},
methods: {
scrollbar(dom, type) {
if (type == 1) {
this.$refs[dom].scrollLeft = this.$refs[dom].scrollLeft - 300
} else {
this.$refs[dom].scrollLeft = this.$refs[dom].scrollLeft + 300
}
},
goList2(obj, type){
this.$router.push({
name: "FreeList2",
......@@ -1037,6 +1011,7 @@ export default {
);
},
goDetails(obj, type){
console.log(obj)
this.$router.push({
name: "FreeDetail",
query: {
......@@ -1074,15 +1049,17 @@ export default {
},
getDataList(){
// http://efficient.oytour.com/api/kkday/commodityList
this.loading = true
this.apiJavaPost(
"/api/kkday/commodityList",
{
"locale": "zh-cn",
"state":"CN" ,
"state": "CN" ,
"cat_sub_keys": [
"TAG_1_3"
],
"sort": "PASC",
"page_size": 110,
},
res => {
if (res.data.resultCode === 1) {
......@@ -1097,7 +1074,7 @@ export default {
// M07 私人導遊
// M08 點對點接送
data.map((x, index)=>{
if (x.countries[0].name.indexOf('台湾') !== -1 ||x.countries[0].name.indexOf('台灣') !== -1 || x.countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x.countries[0].name.indexOf('澳门') !== -1){
if (x.countries[0].name.indexOf('台湾') !== -1 || x.countries[0].name.indexOf('台灣') !== -1 || x.countries[0].name.indexOf('香港') !== -1 || x.countries[0].name.indexOf('澳門') !== -1 || x.countries[0].name.indexOf('澳门') !== -1){
x.countries[0].name = `中国-${x.countries[0].name}`
}
if (x.prod_type == 'M05') { // M05 票券
......@@ -1120,6 +1097,7 @@ export default {
this.list3 = list3;
this.dataList = data
this.menPiaoList = menPiaoList
this.loading = false
this.getTaocanList(TaoCanIds)
this.$forceUpdate()
} else {
......
src/components/FreeTravel/FreeList.vue
View file @ be140f75
......@@ -498,7 +498,7 @@
<div class="content">
<div class="hot-p" v-if="dataHotList.length > 0">
<div class="hot-p-item">
<p class="f24 hot-p-item-tit"><strong>TOP{{dataHotList.length}}</strong> 目的地热销产品</p>
<p class="f24 hot-p-item-tit"><strong>TOP{{dataHotList.length > 2 ? 3 : dataHotList.length}}</strong> 目的地热销产品</p>
<div v-for="(item, index) in dataHotList" v-if="index < 3" @click="goDetails(item)" class="__cp">
<p class="f20 hot-p-item-tit-s">
<span class="hot-p-item-tit-s-line"></span>
......@@ -510,8 +510,8 @@
<div class="pro-item" >
<span class="pro-item-tag bgc-b cff" :class="`bgc-b${sItem.prod_type == 'M01' ? 1 : sItem.prod_type == 'M04' ? 2 : sItem.prod_type == 'M05' ? 3 : 4}`">{{sItem.prod_type == 'M01' ? '一日游' : sItem.prod_type == 'M04' ? '交通' : sItem.prod_type == 'M05' ? '门票' : '其他'}}</span>
<div class="pro-item-top">
<img :onerror="defaultImg" :src="KkdayDomain + item.prod_img_url" alt="">
<p class="text4 f14 PingFangR">{{sItem.prod_name}}</p>
<img :onerror="defaultImg" :src="KkdayDomain + sItem.prod_img_url" alt="">
<p class="text4 f14 PingFangR">{{sItem.prod_name.replace(/KKday/g, '印象之旅')}}</p>
</div>
<div class="pro-item-btm">
<div>
......@@ -616,8 +616,9 @@
:page-size="16"
layout="total, prev, pager, next"
:total="totalCount"
@prev-click="handleCurrentChange(1)"
@next-click="handleCurrentChange(2)"
@current-change="handleCurrentChange"
@prev-click="handleCurrentChange('p')"
@next-click="handleCurrentChange('n')"
></el-pagination>
</div>
</div>
......@@ -1019,11 +1020,15 @@ export default {
},
handleCurrentChange(val) {
let start = this.msg.start
if (val == 1) {
console.log(val, start)
if (val == 'p') {
start = start == 0 ? 0 : start - 16
} else {
} else if (val == 'n'){
start = start + 16
} else{
start = (val * 16) - 16
}
console.log(val, start)
// 翻页
this.msg.start = start;
this.getList();
......@@ -1083,6 +1088,7 @@ export default {
},
// 获取列表
getList(type, id){
this.dataList = [];
let query = this.$route.query;
if(query.type == 1) {
this.msg.country_keys = [query.id]
......
src/components/FreeTravel/FreeList2.vue
View file @ be140f75
......@@ -626,7 +626,7 @@
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div>
<p class="text2 f14 c33 PingFangR">{{item.prod_name}}</p>
<p class="text2 f14 c33 PingFangR">{{item.prod_name.replace(/KKday/g, '印象之旅')}}</p>
<div class="pro-item-btm">
<div>
<p><span class="price-box">￥<strong class="PingFangR">{{item.b2c_price}}</strong>/人</span></p>
......@@ -650,8 +650,9 @@
:page-size="16"
layout="total, prev, pager, next"
:total="totalCount"
@prev-click="handleCurrentChange(1)"
@next-click="handleCurrentChange(2)"
@current-change="handleCurrentChange"
@prev-click="handleCurrentChange('p')"
@next-click="handleCurrentChange('n')"
></el-pagination>
<!-- @current-change="handleCurrentChange" -->
......@@ -1041,6 +1042,7 @@ export default {
},
// 获取列表
getList(type, id){
this.dataList = [];
let query = this.$route.query;
if(query.type == 1) {
this.msg.country_keys = [query.id]
......@@ -1107,10 +1109,12 @@ export default {
},
handleCurrentChange(val) {
let start = this.msg.start
if (val == 1) {
if (val == 'p') {
start = start == 0 ? 0 : start - 16
} else {
} else if (val == 'n'){
start = start + 16
} else{
start = (val * 16) - 16
}
// 翻页
this.msg.start = start;
......
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