Skip to content

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

绑定列表数据

parent 796f7823
Hide whitespace changes
Inline Side-by-side
Showing with 921 additions and 268 deletions
src/assets/css/common.css
View file @ cdafa292
...@@ -121,4 +121,22 @@ ...@@ -121,4 +121,22 @@
} }
.mg-r-10{ .mg-r-10{
margin-right: 10px; margin-right: 10px;
}
.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar{
/*滚动条整体样式*/
width: 4px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar-thumb ,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar-thumb{
/*滚动条里面小方块*/
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar-track ,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar-track{
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #EDEDED;
} }
\ No newline at end of file
src/components/FreeTravel/FreeHome.vue
View file @ cdafa292
...@@ -57,6 +57,10 @@ ...@@ -57,6 +57,10 @@
z-index: 3; z-index: 3;
background-color: white; background-color: white;
} }
.inputActive .el-row .el-col.el-col-6{
height: 400px;
overflow: auto;
}
.fh-search-box .fh-search-box-input div:nth-child(2){ .fh-search-box .fh-search-box-input div:nth-child(2){
width: 77px; width: 77px;
justify-content: center; justify-content: center;
...@@ -82,7 +86,7 @@ ...@@ -82,7 +86,7 @@
.city-tag{ .city-tag{
padding: 13px 20px; padding: 13px 20px;
color: #333; color: #333;
width: 100%; width: 99%;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
...@@ -121,11 +125,13 @@ ...@@ -121,11 +125,13 @@
font-size:14px; font-size:14px;
color: #333; color: #333;
font-weight:bold; font-weight:bold;
flex: 1;
} }
.city-list>p{ .city-list>p{
color: #888888; color: #888888;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
flex: 6;
} }
.city-list>p span{ .city-list>p span{
display: inline-block; display: inline-block;
...@@ -641,19 +647,19 @@ ...@@ -641,19 +647,19 @@
<div v-show="inputActive" class="inputActive" @click.stop> <div v-show="inputActive" class="inputActive" @click.stop>
<el-row v-if="CCList.length>0 "> <el-row v-if="CCList.length>0 ">
<el-col :span="6"> <el-col :span="6">
<div class="city-tag __cp" v-for="(item, index) in CCList" @click="CCListActive = index" :class="{'active': CCListActive == index}" :key="index"> <div class="city-tag __cp" v-for="(item, index) in CCList" @click="CCListActive = index" :class="{'active': CCListActive == index}" :key="index" >
<p @click="goListPage(1, item.short, item.name, index)">{{item.name}}</p> <p >{{item.Country_Name}}</p>
<div class="f12 text2"> <div class="f12 text2">
<span @click="goListPage(2, s.number, s.name, sIndex)" v-for="(s, sIndex) in item.cities" :key="sIndex">{{s.name}}</span> <span v-for="(s, sIndex) in item.Cities" :key="sIndex">{{s.City_Name}}</span>
</div> </div>
<div class="triangle-up"></div> <div class="triangle-up"></div>
</div> </div>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="city-list"> <div class="city-list">
<span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].short, CCList[CCListActive].name)">{{CCList[CCListActive].name}}</span> <span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].Country_Code, CCList[CCListActive].Country_Name)">{{CCList[CCListActive].Country_Name}}</span>
<p> <p>
<span @click="goListPage(2, CCList[CCListActive].number, item.name, index)" class="f14 __cp" v-for="(item, index) in CCList[CCListActive].cities" :key="index">{{item.name}}</span> <span @click="goListPage(2, item.City_Code, item.City_Name, index)" class="f14 __cp" v-for="(item, index) in CCList[CCListActive].Cities" :key="index">{{item.City_Name}}</span>
</p> </p>
</div> </div>
</el-col> </el-col>
...@@ -665,10 +671,10 @@ ...@@ -665,10 +671,10 @@
<div :style="`background-image: url(${item.src})`"> <div :style="`background-image: url(${item.src})`">
<span>{{item.name}}</span> <span>{{item.name}}</span>
<div class="city-m-b"> <div class="city-m-b">
<span>门票</span> <span @click.stop="goList2(item, 'menpiao')">门票</span>
<span>餐食</span> <span @click.stop="goList2(item, 'canshi')">餐食</span>
<span>一日游</span> <span @click.stop="goList2(item, 'yiri')">一日游</span>
<img src="../../assets/img/freeHome/more_s.png" alt=""> <img @click.stop="goList2(item)" src="../../assets/img/freeHome/more_s.png" alt="">
</div> </div>
</div> </div>
</div> </div>
...@@ -934,22 +940,28 @@ export default { ...@@ -934,22 +940,28 @@ export default {
name: '东京', name: '东京',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335633.jpg", src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335633.jpg",
id: 1, id: 1,
number: "A01-003-00001"
},{ },{
name: '京都', name: '京都',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335636.jpg", src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335636.jpg",
id: 2, id: 2,
number: "A01-003-00003",
},{ },{
name: '大阪', name: '大阪',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335628.jpg", src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335628.jpg",
id: 3, id: 3,
number: "A01-003-00002"
},{ },{
name: '首尔', name: '首尔',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335683.jpg", src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335683.jpg",
id: 0, id: 0,
number: 'A01-004-00001'
},{ },{
name: '曼谷', name: '曼谷',
src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335631.jpg", src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335631.jpg",
id: 4, id: 4,
number: "A01-010-00001"
}], }],
KkdayDomain: "", KkdayDomain: "",
CCList: [], CCList: [],
...@@ -963,6 +975,17 @@ export default { ...@@ -963,6 +975,17 @@ export default {
this.getCCList() this.getCCList()
}, },
methods: { methods: {
goList2(obj, type){
this.$router.push({
name: "FreeList2",
query: {
id: obj.number,
type: 2,
name: obj.name,
CCListActive: 0,
}
});
},
goListPage(type, id, name, index){ goListPage(type, id, name, index){
this.inputActive = false; this.inputActive = false;
let url = type == 1 ? "FreeList" : "FreeList2" let url = type == 1 ? "FreeList" : "FreeList2"
...@@ -990,8 +1013,14 @@ export default { ...@@ -990,8 +1013,14 @@ export default {
{}, {},
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
let data = res.data.data.countries let data = res.data.data.Countries
this.CCList = data let deleteIdiot = []
data.map(x=>{
if(x.Country_Name !== "台湾" && x.Country_Name !== "香港" && x.Country_Name !== "澳门") {
deleteIdiot.push(x)
}
})
this.CCList = deleteIdiot
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
......
src/components/FreeTravel/FreeList.vue
View file @ cdafa292
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
.city-tag{ .city-tag{
padding: 13px 20px; padding: 13px 20px;
color: #333; color: #333;
width: 100%; width: 99%;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
...@@ -117,11 +117,13 @@ ...@@ -117,11 +117,13 @@
font-size:14px; font-size:14px;
color: #333; color: #333;
font-weight:bold; font-weight:bold;
flex: 1;
} }
.city-list>p{ .city-list>p{
color: #888888; color: #888888;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
flex: 6;
} }
.city-list>p span{ .city-list>p span{
display: inline-block; display: inline-block;
...@@ -298,6 +300,10 @@ ...@@ -298,6 +300,10 @@
.shaixuan-top>div:nth-child(2){ .shaixuan-top>div:nth-child(2){
flex: 1; flex: 1;
} }
.shaixuan-top2.shaixuan-top .el-checkbox{
width: auto;
padding: 0 5px;
}
.left-name{ .left-name{
width: 130px; width: 130px;
} }
...@@ -315,7 +321,8 @@ ...@@ -315,7 +321,8 @@
} }
.shaixuan-top .el-tabs__content{ .shaixuan-top .el-tabs__content{
background:rgba(238,68,84, .1); background:rgba(238,68,84, .1);
padding: 10px padding: 10px;
padding-top:20px;
} }
.shaixuan-top .el-tabs__header{ .shaixuan-top .el-tabs__header{
margin-bottom: 0; margin-bottom: 0;
...@@ -390,6 +397,13 @@ ...@@ -390,6 +397,13 @@
margin-top: 25px; margin-top: 25px;
text-align: center; text-align: center;
} }
.inputActive2 .el-row .el-col.el-col-6{
height: 400px;
overflow: auto;
}
.el-tabs--card>.el-tabs__header .el-tabs__nav{
z-index: 1
}
</style> </style>
<template> <template>
<div class="freeList commonF"> <div class="freeList commonF">
...@@ -401,26 +415,26 @@ ...@@ -401,26 +415,26 @@
<span class="f14 __cp change-ad" v-if="!addShow" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span> <span class="f14 __cp change-ad" v-if="!addShow" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span>
<div v-else class="fl-ad-box"> <div v-else class="fl-ad-box">
<p><span class="f14 __cp" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span></p> <p><span class="f14 __cp" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span></p>
<div class="fl-ad-cont"> <div class="fl-ad-cont inputActive2">
<div class="search"> <div class="search">
<span class="el-icon-close __cp" @click="addShow = !addShow"></span> <span class="el-icon-close __cp" @click="addShow = !addShow"></span>
<el-input size="mini"></el-input> <el-input size="mini"></el-input>
</div> </div>
<el-row> <el-row v-if="CCList.length>0">
<el-col :span="6"> <el-col :span="6">
<div class="city-tag __cp" v-for="(item, index) in CCList" @click="" :class="{'active': CCListActive == index}" :key="index"> <div class="city-tag __cp" v-for="(item, index) in CCList" @click="CCListActive = index" :class="{'active': CCListActive == index}" :key="index" >
<p @click="CCListActive = index,goListPage(1, CCList[index].short, item.name, index)">{{item.name}}</p> <p >{{item.Country_Name}}</p>
<div class="f12 text2"> <div class="f12 text2">
<span @click="goListPage(2, CCList[sIndex].number, s.name, sIndex)" v-for="(s, sIndex) in item.cities" :key="sIndex">{{s.name}}</span> <span v-for="(s, sIndex) in item.Cities" :key="sIndex">{{s.City_Name}}</span>
</div> </div>
<div class="triangle-up"></div> <div class="triangle-up"></div>
</div> </div>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="city-list"> <div class="city-list">
<span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].short, CCList[CCListActive].name)">{{CCList[CCListActive].name}}</span> <span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].Country_Code, CCList[CCListActive].Country_Name, CCListActive)">{{CCList[CCListActive].Country_Name}}</span>
<p> <p>
<span @click="goListPage(2, CCList[CCListActive].number, item.name, index)" class="f14 __cp" v-for="(item, index) in CCList[CCListActive].cities" :key="index">{{item.name}}</span> <span @click="goListPage(2, item.City_Code, item.City_Name, index)" class="f14 __cp" v-for="(item, index) in CCList[CCListActive].Cities" :key="index">{{item.City_Name}}</span>
</p> </p>
</div> </div>
</el-col> </el-col>
...@@ -429,31 +443,43 @@ ...@@ -429,31 +443,43 @@
</div> </div>
</div> </div>
<div class="city-right-tag"> <div class="city-right-tag">
<p class="f14 cff">共{{newCityList.cities.length}}个旅游点</p> <p class="f14 cff">共{{newCityList.Cities.length}}个旅游点</p>
<el-tabs type="card" @tab-click="handleClick"> <el-tabs type="card" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in newCityList.cities" :label="item.name" :key="index" :name="item.name"></el-tab-pane> <el-tab-pane v-for="(item, index) in newCityList.Cities" :label="item.City_Name" :key="index" :name="item.City_Name"></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="contet-nav"> <div class="contet-nav">
<div> <div @click="goHome">
<div class="contet-nav-item"> <div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon4.png" alt=""> <img src="../../assets/img/freeHome/lanse-icon4.png" alt="">
</div> </div>
<p>首页</p> <p>首页</p>
</div> </div>
<div> <div @click="goScroll('list')">
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon5.png" alt="">
</div>
<p>活动</p>
</div>
<div @click="goScroll('list')">
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon6.png" alt="">
</div>
<p>体验</p>
</div>
<div @click="goScroll('list')">
<div class="contet-nav-item"> <div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon1.png" alt=""> <img src="../../assets/img/freeHome/lanse-icon1.png" alt="">
</div> </div>
<p>特色餐食</p> <p>特色餐食</p>
</div> </div>
<div> <div @click="goScroll('list')">
<div class="contet-nav-item"> <div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon.png" alt=""> <img src="../../assets/img/freeHome/lanse-icon.png" alt="">
</div> </div>
<p>一日游</p> <p>一日游</p>
</div> </div>
<div> <div @click="goScroll('list')">
<div class="contet-nav-item"> <div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon2.png" alt=""> <img src="../../assets/img/freeHome/lanse-icon2.png" alt="">
</div> </div>
...@@ -472,14 +498,14 @@ ...@@ -472,14 +498,14 @@
<div class="hot-p" v-if="dataHotList.length > 0"> <div class="hot-p" v-if="dataHotList.length > 0">
<div class="hot-p-item"> <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}}</strong> 目的地热销产品</p>
<div v-for="(item, index) in dataHotList" @click="goDetails(item)" class="__cp"> <div v-for="(item, index) in dataHotList" v-if="index < 3" @click="goDetails(item)" class="__cp">
<p class="f20 hot-p-item-tit-s"> <p class="f20 hot-p-item-tit-s">
<span class="hot-p-item-tit-s-line"></span> <span class="hot-p-item-tit-s-line"></span>
<strong>{{item.name}}</strong> <strong>{{item.name}}</strong>
<!-- <span class="f14 c88 __cp see-more">查看更多</span> --> <!-- <span class="f14 c88 __cp see-more">查看更多</span> -->
</p> </p>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6" v-for="(sItem, sIndex) in item.data" :key="sIndex"> <el-col :span="6" v-for="(sItem, sIndex) in item.data" v-if="sIndex < 4" :key="sIndex">
<div class="pro-item" > <div class="pro-item" >
<span class="pro-item-tag bgc-b cff" :class="`bgc-b${sItem.prod_type == 'M01' ? 0 : sItem.prod_type == 'M04' ? 1 : sItem.prod_type == 'M05' ? 2 : 3}`">{{sItem.prod_type == 'M01' ? '一日游' : sItem.prod_type == 'M04' ? '交通' : sItem.prod_type == 'M05' ? '门票' : '其他'}}</span> <span class="pro-item-tag bgc-b cff" :class="`bgc-b${sItem.prod_type == 'M01' ? 0 : sItem.prod_type == 'M04' ? 1 : sItem.prod_type == 'M05' ? 2 : 3}`">{{sItem.prod_type == 'M01' ? '一日游' : sItem.prod_type == 'M04' ? '交通' : sItem.prod_type == 'M05' ? '门票' : '其他'}}</span>
<div class="pro-item-top"> <div class="pro-item-top">
...@@ -503,49 +529,31 @@ ...@@ -503,49 +529,31 @@
</div> </div>
</div> </div>
</div> </div>
<div class="shaixuan"> <div class="shaixuan" id="list">
<p class="f24 bold">{{ccName}}游玩列表</p> <p class="f24 bold">{{ccName}}游玩列表</p>
<div class="shaixuan-box"> <div class="shaixuan-box">
<div class="shaixuan-top shaixuan-top1" v-if="newCityList.cities && newCityList.cities.length > 1"> <div class="shaixuan-top shaixuan-top1" v-if="newCityList.Cities && newCityList.Cities.length > 1">
<div class="left-name"> <div class="left-name">
目的地 目的地
</div> </div>
<div> <div>
<el-checkbox-group v-model="newCityCheck" > <el-checkbox-group v-model="newCityCheck" >
<el-checkbox v-for="city in newCityList.cities" :label="city.number" :key="city.number" @change="changeCity">{{city.name}}</el-checkbox> <el-checkbox v-for="city in newCityList.Cities" :label="city.City_Code" :key="city.City_Code" @change="changeCity">{{city.City_Name}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</div> </div>
<div class="shaixuan-top"> <div class="shaixuan-top shaixuan-top2">
<div class="left-name"> <div class="left-name">
游玩类型 游玩类型
</div> </div>
<div class=""> <div>
<el-tabs type="card" v-model="activeName"> <el-tabs type="card" v-model="activeName">
<el-tab-pane label="大阪" name="大阪"> <el-tab-pane v-for="(item, index) in typeTag" :label="item.id" :name="item.name" :key="index">
<el-checkbox slot="label">大阪</el-checkbox> <el-checkbox slot="label" @change="setChange(item, index)" v-model="item.checkd">{{item.name}}</el-checkbox>
<el-checkbox-group v-model="checkedCities"> <el-checkbox-group v-model="item.checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> <el-checkbox v-for="(s, sIndex) in item.list" :label="s.id" :key="sIndex" v-model="s.checkd" @change="setChangeTag(item)">{{s.name}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="冲绳" name="冲绳">
<el-checkbox slot="label">冲绳</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="东京" name="东京">
<el-checkbox slot="label">东京</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="三和" name="三和">
<el-checkbox slot="label">三和</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
...@@ -589,13 +597,18 @@ ...@@ -589,13 +597,18 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div class="empty-data" v-if="dataList.length<1">
<i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
<div class="page-con"> <div class="page-con">
<el-pagination <el-pagination
:current-page.sync="currentPage" :current-page.sync="currentPage"
:page-size="16" :page-size="16"
layout="total, prev, pager, next" layout="total, prev, pager, next"
:total="totalCount" :total="totalCount"
@current-change="handleCurrentChange" @prev-click="handleCurrentChange(1)"
@next-click="handleCurrentChange(2)"
></el-pagination> ></el-pagination>
</div> </div>
</div> </div>
...@@ -611,7 +624,7 @@ export default { ...@@ -611,7 +624,7 @@ export default {
addShow: false, addShow: false,
cities: ['上海', '北京', '广州', '深圳','上海4', '北京2', '广州2', '深圳2','上海2', '北京3', '广州3', '深圳3','上海3', '北京4', '广州5', '深圳5'], cities: ['上海', '北京', '广州', '深圳','上海4', '北京2', '广州2', '深圳2','上海2', '北京3', '广州3', '深圳3','上海3', '北京4', '广州5', '深圳5'],
checkedCities: ['上海', '北京'], checkedCities: ['上海', '北京'],
activeName: '大阪', activeName: '景点和门票',
value:'', value:'',
pickerOptions0: { pickerOptions0: {
disabledDate(time) { disabledDate(time) {
...@@ -631,8 +644,8 @@ export default { ...@@ -631,8 +644,8 @@ export default {
"locale": "zh-cn", "locale": "zh-cn",
"state":"CN" , "state":"CN" ,
"sort": "PASC", "sort": "PASC",
"cat_sub_keys": [ "cat_main_keys": [
"TAG_1_3" "TAG_4"
], ],
"page_size": 16, "page_size": 16,
"start": 0, "start": 0,
...@@ -640,7 +653,187 @@ export default { ...@@ -640,7 +653,187 @@ export default {
priceSort: "PASC", // PDESC 高到低 priceSort: "PASC", // PDESC 高到低
KkdayDomain: '', KkdayDomain: '',
laoding: false, laoding: false,
newCityList: {cities: []}, newCityList: {Cities: []},
scrollobj: null,
typeTag: [
{
name: "景点和门票",
checkd: false,
id: "TAG_2",
checkedCities: [],
list: [
{
name: "观光票及通行证",
id: "TAG_2_1",
checkd: false,
},
{
name: "博物馆和美术馆",
id: "TAG_2_2",
checkd: false,
},
{
name: "主题公园",
id: "TAG_2_3",
checkd: false,
},
{
name: "体育节目",
id: "TAG_2_4",
checkd: false,
},
]
},{
name: "一日游",
checkd: false,
id: "TAG_4",
checkedCities: [],
list: [
{
name: "城市观光",
id: "TAG_4_1",
checkd: false,
},
{
name: "艺术，文化和历史",
id: "TAG_4_2",
checkd: false,
},
{
name: "日间旅行和短途旅行",
id: "TAG_4_3",
checkd: false,
},
{
name: "天之旅",
id: "TAG_4_4",
checkd: false,
},
{
name: "私人旅游及租船",
id: "TAG_4_5",
checkd: false,
},
{
name: "自然和野生动物",
id: "TAG_4_6",
checkd: false,
},
{
name: "游艇",
id: "TAG_4_7",
checkd: false,
},
]
},{
name: "交通生活",
checkd: false,
id: "TAG_5",
checkedCities: [],
list: [
{
name: "机票",
id: "TAG_5_1",
checkd: false,
},
{
name: "地面运输",
id: "TAG_5_2",
checkd: false,
},
{
name: "车辆租赁",
id: "TAG_5_3",
checkd: false,
},
{
name: "渡轮",
id: "TAG_5_4",
checkd: false,
},
{
name: "WiFi & SIM卡",
id: "TAG_5_5",
checkd: false,
},
{
name: "住宿",
id: "TAG_5_6",
checkd: false,
},
]
},{
name: "餐饮美食",
checkd: false,
id: "TAG_0",
checkedCities: [],
list: [
{
name: "餐饮与美食",
id: "TAG_2_5",
checkd: false,
},
{
name: "食物，饮料和夜生活",
id: "TAG_3_2",
checkd: false,
},
]
},{
name: "活动",
checkd: false,
id: "TAG_1",
checkedCities: [],
list: [
{
name: "冒险活动",
id: "TAG_1_1",
checkd: false,
},
{
name: "水上活动",
id: "TAG_1_2",
checkd: false,
},
{
name: "其他活动",
id: "TAG_1_3",
checkd: false,
},
]
},{
name: "体验",
checkd: false,
id: "TAG_3",
checkedCities: [],
list: [
{
name: "独特的经历",
id: "TAG_1_1",
checkd: false,
},
{
name: "健康",
id: "TAG_3_3",
checkd: false,
},
{
name: "研习会",
id: "TAG_3_4",
checkd: false,
},
{
name: "市场和购物",
id: "TAG_3_5",
checkd: false,
},
{
name: "节日和事件",
id: "TAG_3_6",
checkd: false,
},
]
}]
} }
}, },
mounted() { mounted() {
...@@ -650,17 +843,70 @@ export default { ...@@ -650,17 +843,70 @@ export default {
this.getList() this.getList()
this.getHotList() this.getHotList()
this.getCCList(1) this.getCCList(1)
this.scrollobj=document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
}, },
methods: { methods: {
// 选中小标签 加载数据
setChangeTag(item){
delete this.msg.cat_main_keys;
this.msg.cat_sub_keys = item.checkedCities
this.getList()
},
// 游玩类型切换 取消其他选中
setChange(item, index){
if (item.checkd) {
this.typeTag.map((x, i)=>{
if (i !== index) {
x.checkd = false;
x.checkedCities = [];
}
})
if(item.id == "TAG_0") {
delete this.msg.cat_main_keys
this.msg.cat_sub_keys = [item.list[0].id]
} else {
this.msg.cat_main_keys = [item.id]
delete this.msg.cat_sub_keys
}
this.getList()
} else {
this.msg.cat_main_keys = ["TAG_4"]
delete this.msg.cat_sub_keys
this.getList()
}
},
handleScroll(){
try {
let current=''
this.navs.forEach(x=>{
let t=document.getElementById(x).offsetTop
if(t<=this.scrollobj.scrollTop-200){
current=x
}
})
this.crtnav=current
} catch (error) {}
},
goScroll(id){
this.activeId = id;
this.scrollobj.scrollTop=document.getElementById(id).offsetTop;
},
handleClick(tab, event){ handleClick(tab, event){
console.log(tab, event); console.log(tab, event);
this.newCityList.cities.map((x, index)=>{ this.newCityList.Cities.map((x, index)=>{
if (x.name == tab.name) { if (x.City_Name == tab.name) {
this.goListPage(2, this.CCList[this.CCListActive].number, tab.name, index) this.goListPage(2, x.City_Code, tab.name, this.CCListActive)
} }
}) })
// this.goListPage(2, CCList[CCListActive].number, item.name, index) // this.goListPage(2, CCList[CCListActive].number, item.name, index)
}, },
goHome(){
this.$router.push({
name: "FreeHome",
});
},
goDetails(obj){ goDetails(obj){
this.$router.push({ this.$router.push({
name: "FreeDetail", name: "FreeDetail",
...@@ -675,7 +921,7 @@ export default { ...@@ -675,7 +921,7 @@ export default {
this.getList() this.getList()
} else{ } else{
delete this.msg.city_keys delete this.msg.city_keys
this.msg = this.msg.city_keys this.msg = this.msg
this.getList() this.getList()
} }
}, },
...@@ -690,6 +936,7 @@ export default { ...@@ -690,6 +936,7 @@ export default {
}, },
goListPage(type, id, name, index){ goListPage(type, id, name, index){
if (id === this.ccId) return if (id === this.ccId) return
this.msg.start = 0
this.addShow = false; this.addShow = false;
this.changeCon(index) this.changeCon(index)
if(type == 1) { if(type == 1) {
...@@ -697,6 +944,7 @@ export default { ...@@ -697,6 +944,7 @@ export default {
this.getHotList(2, id) this.getHotList(2, id)
this.ccId = id; this.ccId = id;
this.ccName = name; this.ccName = name;
return
} }
let url = type == 1 ? "FreeList" : "FreeList2" let url = type == 1 ? "FreeList" : "FreeList2"
this.$router.push({ this.$router.push({
...@@ -717,9 +965,15 @@ export default { ...@@ -717,9 +965,15 @@ export default {
{}, {},
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
let data = res.data.data.countries let data = res.data.data.Countries
this.CCList = data let deleteIdiot = []
this.changeCon(this.$route.query.CCListActive) data.map(x=>{
if(x.Country_Name !== "台湾" && x.Country_Name !== "香港" && x.Country_Name !== "澳门") {
deleteIdiot.push(x)
}
})
this.CCList = deleteIdiot
this.changeCon(this.CCListActive)
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
...@@ -728,8 +982,14 @@ export default { ...@@ -728,8 +982,14 @@ export default {
); );
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
let start = this.msg.start
if (val == 1) {
start = start == 0 ? 0 : start - 15
} else {
start = start + 15
}
// 翻页 // 翻页
this.msg.start = this.msg.start + 15; this.msg.start = start;
this.getList(); this.getList();
}, },
// 获取热门列表 // 获取热门列表
...@@ -796,6 +1056,9 @@ export default { ...@@ -796,6 +1056,9 @@ export default {
} }
this.msg.sort = this.priceSort this.msg.sort = this.priceSort
this.laoding = true; this.laoding = true;
if (this.msg.cat_sub_keys && this.msg.cat_sub_keys.length < 1) {
delete this.msg.cat_sub_keys
}
//http://efficient.oytour.com/api/kkday/commodityList //http://efficient.oytour.com/api/kkday/commodityList
this.apiJavaPost( this.apiJavaPost(
"/api/kkday/commodityList", "/api/kkday/commodityList",
......
src/components/FreeTravel/FreeList2.vue
View file @ cdafa292
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
.city-tag{ .city-tag{
padding: 13px 20px; padding: 13px 20px;
color: #333; color: #333;
width: 100%; width: 99%;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
...@@ -117,20 +117,22 @@ ...@@ -117,20 +117,22 @@
font-size:14px; font-size:14px;
color: #333; color: #333;
font-weight:bold; font-weight:bold;
flex: 1;
} }
.city-list>p{ .city-list>p{
color: #888888; color: #888888;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
flex: 6;
} }
.city-list>p span{ .city-list>p span{
display: inline-block; display: inline-block;
padding-right: 20px; padding-right: 20px;
} }
.freeList .city-right-tag .el-tabs--card>.el-tabs__header,.freeList .shaixuan-top .el-tabs--card>.el-tabs__header,.freeList .el-tabs--card>.el-tabs__header .el-tabs__nav,.freeList .el-tabs--card>.el-tabs__header .el-tabs__item{ .freeList2 .city-right-tag .el-tabs--card>.el-tabs__header,.freeList2 .shaixuan-top .el-tabs--card>.el-tabs__header,.freeList2 .el-tabs--card>.el-tabs__header .el-tabs__nav,.freeList2 .el-tabs--card>.el-tabs__header .el-tabs__item{
border: none; border: none;
} }
.freeList .city-right-tag .el-tabs--card>.el-tabs__header .el-tabs__item{ .freeList2 .city-right-tag .el-tabs--card>.el-tabs__header .el-tabs__item{
background:rgba(255,255,255,.1); background:rgba(255,255,255,.1);
border-radius:4px; border-radius:4px;
font-size:18px; font-size:18px;
...@@ -139,36 +141,35 @@ ...@@ -139,36 +141,35 @@
font-weight: bold; font-weight: bold;
transition: all linear .5s transition: all linear .5s
} }
.freeList .city-right-tag .el-tabs--card>.el-tabs__header .el-tabs__item:hover{ .freeList2 .city-right-tag .el-tabs--card>.el-tabs__header .el-tabs__item:hover{
background:rgba(255,255,255,1); background:rgba(255,255,255,1);
color: #EE4454; color: #EE4454;
} }
.freeList .city-right-tag{ .freeList2 .city-right-tag{
width: 618px; width: 618px;
} }
.freeList .el-icon-arrow-right ,.freeList .el-icon-arrow-left{ .freeList2 .el-icon-arrow-right ,.freeList2 .el-icon-arrow-left{
background: rgba(255,255,255,.1); background: rgba(255,255,255,.1);
border-radius: 50%; border-radius: 50%;
transition: all linear .5s transition: all linear .5s
} }
.freeList .city-right-tag .el-icon-arrow-right:hover,.city-right-tag .freeList .el-icon-arrow-left:hover{ .freeList2 .city-right-tag .el-icon-arrow-right:hover,.city-right-tag .freeList2 .el-icon-arrow-left:hover{
background: rgba(255,255,255,1); background: rgba(255,255,255,1);
} }
.freeList .city-right-tag>p{ .freeList2 .city-right-tag>p{
padding-bottom: 10px; padding-bottom: 10px;
} }
.freeList .content{ .freeList2 .content{
margin: 0 auto; margin: 0 auto;
width: 1200px; width: 1200px;
padding-top: 80px; padding-top: 80px;
position: relative; position: relative;
} }
.freeList .contet-nav{ .freeList2 .contet-nav{
padding: 0 60px; padding: 0 60px;
height: 87px; height: 87px;
width: 1200px; width: 1200px;
background:rgba(255,255,255,1); background:rgba(255,255,255,1);;
box-shadow:0px 4px 35px 0px rgba(0, 0, 0, 0.24);
border-radius:6px; border-radius:6px;
position: absolute; position: absolute;
bottom: -50px; bottom: -50px;
...@@ -178,16 +179,33 @@ ...@@ -178,16 +179,33 @@
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
padding-top: 10px;
} }
.freeList .contet-nav>div{ .freeList2 .contet-nav>div{
width: 150px; width: 150px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.freeList .contet-nav>div:hover .contet-nav-item img{ .freeList2 .contet-nav>div:hover .contet-nav-item img{
transform: scale(1.5); transform: scale(1.5);
} }
.freeList .contet-nav-item{ .freeList2 .contet-nav>div .line{
text-align: center;
}
.freeList2 .contet-nav>div .line span{
height: 3px;
width: 0px;
display: inline-block;
background-color: transparent;
position: relative;
top: 2px;
transition: all linear .5s;
}
.freeList2 .contet-nav>div.active .line span{
background-color: #EE4454;
width: 60px;
}
.freeList2 .contet-nav-item{
width: 40px; width: 40px;
height: 40px; height: 40px;
display: flex; display: flex;
...@@ -195,30 +213,30 @@ ...@@ -195,30 +213,30 @@
justify-content: center; justify-content: center;
margin: 0 auto; margin: 0 auto;
} }
.freeList .contet-nav-item img{ .freeList2 .contet-nav-item img{
width: 22px; width: 22px;
height: 22px; height: 22px;
transition: all linear .5s; transition: all linear .5s;
} }
.freeList .hot-p-item{ .freeList2 .hot-p-item{
margin-bottom: 20px; margin-bottom: 20px;
} }
.freeList .hot-p-item .hot-p-item-tit{ .freeList2 .hot-p-item .hot-p-item-tit{
margin-bottom: 10px; margin-bottom: 10px;
} }
.freeList .hot-p-item .hot-p-item-tit-s{ .freeList2 .hot-p-item .hot-p-item-tit-s{
position: relative; position: relative;
height: 40px; height: 40px;
width: 100%; width: 100%;
} }
.freeList .hot-p-item .hot-p-item-tit-s-line{ .freeList2 .hot-p-item .hot-p-item-tit-s-line{
display: inline-block; display: inline-block;
position: absolute; position: absolute;
height: 5px; height: 5px;
width: 40px; width: 40px;
background-color: #F6A1A9; background-color: #F6A1A9;
} }
.freeList .hot-p-item .hot-p-item-tit-s strong{ .freeList2 .hot-p-item .hot-p-item-tit-s strong{
position: absolute; position: absolute;
top: -4px top: -4px
} }
...@@ -276,31 +294,32 @@ ...@@ -276,31 +294,32 @@
background-color: #FEF12C; background-color: #FEF12C;
border-radius: 4px; border-radius: 4px;
} }
.shaixuan{ .freeList2 .shaixuan{
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
margin-top: 50px;
} }
.shaixuan-box{ .freeList2 .shaixuan-box{
border:1px solid rgba(220,220,220,1); border:1px solid rgba(220,220,220,1);
margin-bottom: 20px; margin-bottom: 20px;
} }
.shaixuan>p{ .freeList2 .shaixuan>p{
margin-bottom: 10px; margin-bottom: 10px;
} }
.shaixuan-top{ .freeList2 .shaixuan-top{
padding: 26px 24px 16px 24px; padding: 26px 24px 16px 24px;
display: flex; display: flex;
} }
.shaixuan-top{ .freeList2 .shaixuan-top{
border:1px dashed rgba(220,220,220,1); border:1px dashed rgba(220,220,220,1);
} }
.shaixuan-top>div:nth-child(2){ .freeList2 .shaixuan-top>div:nth-child(2){
flex: 1; flex: 1;
} }
.left-name{ .freeList2 .left-name{
width: 130px; width: 130px;
} }
.shaixuan-top .el-checkbox{ .freeList2 .shaixuan-top .el-checkbox{
width: 100px; width: 100px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
...@@ -319,11 +338,11 @@ ...@@ -319,11 +338,11 @@
.shaixuan-top .el-tabs__header{ .shaixuan-top .el-tabs__header{
margin-bottom: 0; margin-bottom: 0;
} }
.freeList .el-checkbox__input.is-checked .el-checkbox__inner{ .freeList2 .el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #EE4454; background-color: #EE4454;
border-color: #EE4454; border-color: #EE4454;
} }
.freeList .el-checkbox__input.is-checked+.el-checkbox__label{ .freeList2 .el-checkbox__input.is-checked+.el-checkbox__label{
color: #EE4454 color: #EE4454
} }
.shangpinliebiao{ .shangpinliebiao{
...@@ -388,118 +407,57 @@ ...@@ -388,118 +407,57 @@
.page-con{ .page-con{
margin-top: 25px; margin-top: 25px;
} }
.inputActive2 .el-row .el-col.el-col-6{
height: 400px;
overflow: auto;
}
.el-tabs--card>.el-tabs__header .el-tabs__nav{
z-index: 1
}
.freeList2 .nav-tag{
border-top: 1px dashed rgba(220,220,220,1);
padding: 29px 87px;
z-index: 0;
width: 1200px;
box-sizing: border-box;
margin: 0 auto;
background-color: white;
position: relative;
z-index: 1;
box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.24);
margin-bottom: 25px;
}
</style> </style>
<template> <template>
<div class="freeList commonF"> <div class="freeList2 commonF">
<div class="fl-top-box"> <div class="fl-top-box">
<div class="fl-zhezhao"></div> <div class="fl-zhezhao"></div>
<div class="fl-top"> <div class="fl-top">
<div class="fl-ad"> <div class="fl-ad">
<span class="fl-adname">日本</span> <span class="fl-adname">{{ccName}}</span>
<span class="f14 __cp change-ad" v-if="!addShow" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span> <span class="f14 __cp change-ad" v-if="!addShow" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span>
<div v-else class="fl-ad-box"> <div v-else class="fl-ad-box inputActive2">
<p><span class="f14 __cp" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span></p> <p><span class="f14 __cp" @click="addShow = !addShow">切换地点 <span class="el-icon-caret-bottom"></span> </span></p>
<div class="fl-ad-cont"> <div class="fl-ad-cont">
<div class="search"> <div class="search">
<span class="el-icon-close __cp" @click="addShow = !addShow"></span> <span class="el-icon-close __cp" @click="addShow = !addShow"></span>
<el-input size="mini"></el-input> <el-input size="mini"></el-input>
</div> </div>
<el-row> <el-row v-if="CCList.length>0 ">
<el-col :span="5"> <el-col :span="6">
<div class="city-tag active __cp"> <div class="city-tag __cp" v-for="(item, index) in CCList" @click="CCListActive = index" :class="{'active': CCListActive == index}" :key="index" >
<p>东亚</p> <p >{{item.Country_Name}}</p>
<div class="f12 text2"> <div class="f12 text2">
<span>成都</span> <span v-for="(s, sIndex) in item.Cities" :key="sIndex" >{{s.City_Name}}</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p>北美</p>
<div class="f12 text2">
<span>成都</span>
<span>四川阿坝</span>
<span>好好还会</span>
<span>上课抵抗力</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag active __cp">
<p>中东非</p>
<div class="f12 text2">
<span>菲律宾啊</span>
<span>日本掉啊</span>
<span>嗷嗷待食多</span>
<span>阿斯达是的</span>
<span>市发改委</span>
</div>
<div class="triangle-up"></div>
</div>
<div class="city-tag __cp">
<p>西伯利亚</p>
<div class="f12 text2">
<span>小从v四碗饭</span>
<span>阿萨德群二</span>
<span>哒哒</span>
<span>阿斯达是的</span>
<span>阿萨德</span>
</div> </div>
<div class="triangle-up"></div> <div class="triangle-up"></div>
</div> </div>
</el-col> </el-col>
<el-col :span="19"> <el-col :span="18">
<div class="city-list"> <div class="city-list">
<span>成都&成都</span> <span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].Country_Code, CCList[CCListActive].Country_Name)">{{CCList[CCListActive].Country_Name}}</span>
<p> <p>
<span>成都</span> <span @click="goListPage(2, item.City_Code, item.City_Name, index)" class="f14 __cp" v-for="(item, index) in CCList[CCListActive].Cities" :key="index">{{item.City_Name}}</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
<span>成都</span>
</p>
</div>
<div class="city-list">
<span>河南</span>
<p>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
<span>郑州</span>
</p>
</div>
<div class="city-list">
<span>重庆</span>
<p>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
<span>合川</span>
</p> </p>
</div> </div>
</el-col> </el-col>
...@@ -508,78 +466,69 @@ ...@@ -508,78 +466,69 @@
</div> </div>
</div> </div>
<!-- 天气 --> <!-- 天气 -->
<div class="contet-nav">
<div> <div>
<div class="contet-nav-item"> 天气预报
<img src="../../assets/img/freeHome/lanse-icon4.png" alt="">
</div>
<p>首页</p>
</div> </div>
<div> <div class="contet-nav">
<div class="contet-nav-item"> <div @click="goHome">
<img src="../../assets/img/freeHome/lanse-icon1.png" alt=""> <div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon4.png" alt="">
</div>
<p>首页</p>
<p class="line"><span></span></p>
</div> </div>
<p>特色餐食</p> <div @click="changeNav('TAG_1', 4)" :class="{'active': typeTagIndex == 4}">
</div> <div class="contet-nav-item">
<div> <img src="../../assets/img/freeHome/lanse-icon5.png" alt="">
<div class="contet-nav-item"> </div>
<img src="../../assets/img/freeHome/lanse-icon.png" alt=""> <p>活动</p>
<p class="line"><span></span></p>
</div> </div>
<p>一日游</p> <div @click="changeNav('TAG_3', 5)" :class="{'active': typeTagIndex == 5}">
</div> <div class="contet-nav-item">
<div> <img src="../../assets/img/freeHome/lanse-icon6.png" alt="">
<div class="contet-nav-item"> </div>
<img src="../../assets/img/freeHome/lanse-icon2.png" alt=""> <p>体验</p>
<p class="line"><span></span></p>
</div> </div>
<p>景点门票</p> <div @click="changeNav('TAG_0', 3)" :class="{'active': typeTagIndex == 3}">
</div> <div class="contet-nav-item">
<div> <img src="../../assets/img/freeHome/lanse-icon1.png" alt="">
<div class="contet-nav-item"> </div>
<img src="../../assets/img/freeHome/lanse-icon3.png" alt=""> <p>特色餐食</p>
<p class="line"><span></span></p>
</div>
<div @click="changeNav('TAG_4', 1)" :class="{'active': typeTagIndex == 1}">
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon.png" alt="">
</div>
<p>一日游</p>
<p class="line"><span></span></p>
</div>
<div @click="changeNav('TAG_2', 0)" :class="{'active': typeTagIndex == 0}">
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon2.png" alt="">
</div>
<p>景点门票</p>
<p class="line"><span></span></p>
</div>
<div @click="changeNav('TAG_5', 2)" :class="{'active': typeTagIndex == 2}">
<div class="contet-nav-item">
<img src="../../assets/img/freeHome/lanse-icon3.png" alt="">
</div>
<p>当地交通</p>
<p class="line"><span></span></p>
</div> </div>
<p>当地交通</p>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="shaixuan"> <div class="shaixuan">
<p class="f24 bold">日本游玩列表</p> <div class="nav-tag">
<div class="shaixuan-box"> <el-checkbox-group v-model="typeTag[typeTagIndex].checkedCities" >
<div class="shaixuan-top"> <el-checkbox v-for="tag in typeTag[typeTagIndex].list" :label="tag.id" :key="tag.id" @change="changeMainTag(typeTag[typeTagIndex].checkedCities)">{{tag.name}}</el-checkbox>
<div class="left-name"> </el-checkbox-group>
游玩类型
</div>
<div class="">
<el-tabs type="card" v-model="activeName">
<el-tab-pane label="大阪" name="大阪">
<el-checkbox slot="label">大阪</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="冲绳" name="冲绳">
<el-checkbox slot="label">冲绳</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="东京" name="东京">
<el-checkbox slot="label">东京</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="三和" name="三和">
<el-checkbox slot="label">三和</el-checkbox>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div> </div>
<p class="f24 bold">{{ccName}}游玩列表</p>
<div class="shangpinliebiao"> <div class="shangpinliebiao">
<div class="get-nav"> <div class="get-nav">
<div class="block"> <div class="block">
...@@ -592,32 +541,49 @@ ...@@ -592,32 +541,49 @@
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="f14 __cp" @click="paixu1 = !paixu1"> <div class="f14 __cp" @click="pSort()">
<span>价格排序</span><i class="iconfont icon-xia c88" :class="{'paixu': paixu1}"></i> <span>价格排序</span><i class="iconfont icon-xia c88" :class="{'paixu': paixu1}"></i>
</div> </div>
</div> </div>
<el-row :gutter="26"> <el-row :gutter="26" v-loading="laoding">
<el-col :span="6" v-for="item in 16" :key="item"> <el-col :span="6" v-for="(item, index) in dataList" :key="index">
<div class="shangpinliebiao-item"> <div class="shangpinliebiao-item" @click="goDetails(item)">
<div class="top-img"> <div class="top-img">
<img src="../../assets/img/activy.jpg" alt=""> <img :src="KkdayDomain + item.prod_img_url" alt="">
</div> </div>
<div class="tag"> <div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">中国-香港</span> </span> <span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">{{item.countries[0].name + '-' + item.countries[0].cities[0].name}}</span> </span>
</div> </div>
<p class="text2 f14 c33">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p> <p class="text2 f14 c33 PingFangR">{{item.prod_name}}</p>
<div class="pro-item-btm"> <div class="pro-item-btm">
<div> <div>
<p><span class="price-box">￥<strong>298</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p> <p><span class="price-box">￥<strong class="PingFangR">{{item.b2c_price}}</strong>/人</span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p> <!-- <p><span class="price-box">￥<strong>{{item.b2c_price}}</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p> -->
<!-- <p class="c88 f12">最早可订日期：2019年8月20日</p> -->
</div> </div>
<div class="c88 f12"> <div class="c88 f12">
128人已购买 {{item.order_count + Math.round(Math.random()*99)}}人已购买
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div class="empty-data" v-if="dataList.length<1">
<i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
<div class="page-con">
<el-pagination
:current-page.sync="currentPage"
:page-size="16"
layout="total, prev, pager, next"
:total="totalCount"
@prev-click="handleCurrentChange(1)"
@next-click="handleCurrentChange(2)"
></el-pagination>
<!-- @current-change="handleCurrentChange" -->
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -626,17 +592,394 @@ ...@@ -626,17 +592,394 @@
export default { export default {
data () { data () {
return { return {
ccIdNew: null,
newCityCheck: [],
paixu1: false,
addShow: false, addShow: false,
cities: ['上海', '北京', '广州', '深圳','上海4', '北京2', '广州2', '深圳2','上海2', '北京3', '广州3', '深圳3','上海3', '北京4', '广州5', '深圳5'], Cities: ['上海', '北京', '广州', '深圳','上海4', '北京2', '广州2', '深圳2','上海2', '北京3', '广州3', '深圳3','上海3', '北京4', '广州5', '深圳5'],
checkedCities: ['上海', '北京'], checkedCities: ['上海', '北京'],
activeName: '大阪' activeName: '景点和门票',
value:'',
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
dataHotList: [],
dataList: [],
CCList: [],
ccId: "",
ccName: "",
CCListActive: 0,
pageIndex: 0,
totalCount: 0,
currentPage: 1,
msg: {
"locale": "zh-cn",
"state":"CN" ,
"sort": "PASC",
"cat_main_keys": [
"TAG_4"
],
"page_size": 16,
"start": 0,
},
priceSort: "PASC", // PDESC 高到低
KkdayDomain: '',
laoding: false,
typeTagIndex: 1,
typeTag: [
{
name: "景点和门票",
checkd: false,
id: "TAG_2",
checkedCities: [],
list: [
{
name: "观光票及通行证",
id: "TAG_2_1",
checkd: false,
},
{
name: "博物馆和美术馆",
id: "TAG_2_2",
checkd: false,
},
{
name: "主题公园",
id: "TAG_2_3",
checkd: false,
},
{
name: "体育节目",
id: "TAG_2_4",
checkd: false,
},
]
},{
name: "一日游",
checkd: false,
id: "TAG_4",
checkedCities: [],
list: [
{
name: "城市观光",
id: "TAG_4_1",
checkd: false,
},
{
name: "艺术，文化和历史",
id: "TAG_4_2",
checkd: false,
},
{
name: "日间旅行和短途旅行",
id: "TAG_4_3",
checkd: false,
},
{
name: "天之旅",
id: "TAG_4_4",
checkd: false,
},
{
name: "私人旅游及租船",
id: "TAG_4_5",
checkd: false,
},
{
name: "自然和野生动物",
id: "TAG_4_6",
checkd: false,
},
{
name: "游艇",
id: "TAG_4_7",
checkd: false,
},
]
},{
name: "交通生活",
checkd: false,
id: "TAG_5",
checkedCities: [],
list: [
{
name: "机票",
id: "TAG_5_1",
checkd: false,
},
{
name: "地面运输",
id: "TAG_5_2",
checkd: false,
},
{
name: "车辆租赁",
id: "TAG_5_3",
checkd: false,
},
{
name: "渡轮",
id: "TAG_5_4",
checkd: false,
},
{
name: "WiFi & SIM卡",
id: "TAG_5_5",
checkd: false,
},
{
name: "住宿",
id: "TAG_5_6",
checkd: false,
},
]
},{
name: "餐饮美食",
checkd: false,
id: "TAG_0",
checkedCities: [],
list: [
{
name: "餐饮与美食",
id: "TAG_2_5",
checkd: false,
},
{
name: "食物，饮料和夜生活",
id: "TAG_3_2",
checkd: false,
},
]
},{
name: "活动",
checkd: false,
id: "TAG_1",
checkedCities: [],
list: [
{
name: "冒险活动",
id: "TAG_1_1",
checkd: false,
},
{
name: "水上活动",
id: "TAG_1_2",
checkd: false,
},
{
name: "其他活动",
id: "TAG_1_3",
checkd: false,
},
]
},{
name: "体验",
checkd: false,
id: "TAG_3",
checkedCities: [],
list: [
{
name: "独特的经历",
id: "TAG_1_1",
checkd: false,
},
{
name: "健康",
id: "TAG_3_3",
checkd: false,
},
{
name: "研习会",
id: "TAG_3_4",
checkd: false,
},
{
name: "市场和购物",
id: "TAG_3_5",
checkd: false,
},
{
name: "节日和事件",
id: "TAG_3_6",
checkd: false,
},
]
}]
} }
}, },
mounted() { mounted() {
this.ccId = this.$route.query.id;
this.ccName = this.$route.query.name;
this.CCListActive = this.$route.query.CCListActive;
this.getList()
this.getCCList(1)
}, },
methods: { methods: {
changeMainTag(e){
console.log(e)
if(e.length > 0) {
this.msg.cat_sub_keys = e
} else {
delete this.msg.cat_sub_keys
}
delete this.msg.cat_main_keys
this.getList()
},
changeNav(id, num){
this.typeTag.map(x=>{
x.checkedCities = [];
})
this.typeTagIndex = num
if (id !== 'TAG_0') {
this.msg.cat_main_keys = [id]
delete this.msg.cat_sub_keys
} else {
delete this.msg.cat_main_keys
this.msg.cat_sub_keys = ["TAG_2_5"]
}
this.getList()
},
goHome(){
this.$router.push({
name: "FreeHome",
});
},
// 选中小标签 加载数据
setChangeTag(item){
delete this.msg.cat_main_keys;
this.msg.cat_sub_keys = item.checkedCities
this.getList()
},
// 游玩类型切换 取消其他选中
setChange(item, index){
if (item.checkd) {
this.typeTag.map((x, i)=>{
if (i !== index) {
x.checkd = false;
x.checkedCities = [];
}
})
if(item.id == "TAG_0") {
delete this.msg.cat_main_keys
this.msg.cat_sub_keys = [item.list[0].id]
} else {
this.msg.cat_main_keys = [item.id]
delete this.msg.cat_sub_keys
}
this.getList()
} else {
this.msg.cat_main_keys = ["TAG_4"]
delete this.msg.cat_sub_keys
this.getList()
}
},
goDetails(obj){
this.$router.push({
name: "FreeDetail",
query: {
id: obj.prod_url_no,
}
});
},
pSort(){
this.paixu1 = !this.paixu1;
this.priceSort = this.paixu1 ? "PASC" : "PDESC"
this.getList()
},
goListPage(type, id, name, index){
this.ccIdNew = id
this.addShow = false;
if(type == 1) {
this.ccId = id;
this.ccName = name;
let url = type == 1 ? "FreeList" : "FreeList2"
this.$router.push({
name: url,
query: {
id: id,
type: type,
name: name,
CCListActive: index ? index : this.CCListActive,
}
});
} else {
this.ccName = name;
this.getList(2, id)
}
},
// 获取列表
getList(type, id){
let query = this.$route.query;
if(query.type == 1) {
this.msg.country_keys = [query.id]
} else {
this.msg.city_keys = [query.id]
}
if (type) {
this.msg.city_keys = [id]
}
this.msg.sort = this.priceSort
this.laoding = true;
if (this.ccIdNew !== "") {
this.msg.city_keys = [this.ccIdNew]
}
//http://efficient.oytour.com/api/kkday/commodityList
this.apiJavaPost(
"/api/kkday/commodityList",
this.msg,
res => {
if (res.data.resultCode === 1) {
let data = res.data.data
console.log(data)
this.KkdayDomain = data.KkdayDomain
this.totalCount = data.metadata.total_count
this.dataList = data.prods
} else {
this.Error(res.data.message);
}
this.laoding = false;
},
null
);
},
//获取国家 城市
getCCList(t){
//http://efficient.oytour.com/api/kkday/searchCity
this.apiJavaPost(
"/api/kkday/searchCity",
{},
res => {
if (res.data.resultCode === 1) {
let data = res.data.data.Countries
let deleteIdiot = []
data.map(x=>{
if(x.Country_Name !== "台湾" && x.Country_Name !== "香港" && x.Country_Name !== "澳门") {
deleteIdiot.push(x)
}
})
this.CCList = deleteIdiot
} else {
this.Error(res.data.message);
}
},
null
);
},
handleCurrentChange(val) {
let start = this.msg.start
if (val == 1) {
start = start == 0 ? 0 : start - 15
} else {
start = start + 15
}
// 翻页
this.msg.start = start;
this.getList();
},
} }
} }
</script> </script>
\ No newline at end of file
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