Skip to content

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

no message

parent 2f067831
Show whitespace changes
Inline Side-by-side
Showing with 374 additions and 278 deletions
src/components/FreeTravel/FreeHome.vue
View file @ 796f7823
...@@ -527,13 +527,15 @@ ...@@ -527,13 +527,15 @@
.jingxuan-item .img-item{ .jingxuan-item .img-item{
margin-bottom: 5px; margin-bottom: 5px;
position: relative; position: relative;
width: 562px;
height: 406px;
} }
.jingxuan-item .img-item:nth-child(2n){ .jingxuan-item .img-item:nth-child(2n){
margin-left: 5px; margin-left: 5px;
} }
.jingxuan-item .img-item img{ .jingxuan-item .img-item img{
width: 253px; width: 100%;
height: 198px; height: 100%;
display: block; display: block;
} }
.jingxuan-item .img-item .info{ .jingxuan-item .img-item .info{
...@@ -637,21 +639,21 @@ ...@@ -637,21 +639,21 @@
</div> </div>
</div> </div>
<div v-show="inputActive" class="inputActive" @click.stop> <div v-show="inputActive" class="inputActive" @click.stop>
<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="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>{{item.name}}</p> <p @click="goListPage(1, item.short, item.name, index)">{{item.name}}</p>
<div class="f12 text2"> <div class="f12 text2">
<span v-for="(s, sIndex) in item.cities" :key="sIndex">{{s.name}}</span> <span @click="goListPage(2, s.number, s.name, sIndex)" v-for="(s, sIndex) in item.cities" :key="sIndex">{{s.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">{{CCList[CCListActive].name}}</span> <span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].short, CCList[CCListActive].name)">{{CCList[CCListActive].name}}</span>
<p> <p>
<span v-for="(item, index) in CCList[CCListActive].cities" :key="index">{{item.name}}</span> <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>
</p> </p>
</div> </div>
</el-col> </el-col>
...@@ -739,7 +741,7 @@ ...@@ -739,7 +741,7 @@
<div class="content-item-box-item" v-for="(item, index) in list1" @click="goDetails(item)" v-if="index < 4"> <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="img-box">
<div class="price price3"> <div class="price price3">
<p class="now-p">￥<strong>{{item.b2c_price}}</strong>/人</p> <p class="now-p">￥<strong class="PingFangR">{{item.b2c_price}}</strong>/人</p>
</div> </div>
<img :src="KkdayDomain+item.prod_img_url" alt=""> <img :src="KkdayDomain+item.prod_img_url" alt="">
<div class="tag"> <div class="tag">
...@@ -879,58 +881,27 @@ ...@@ -879,58 +881,27 @@
</div> </div>
</div> </div>
<div class="jingxuan"> <div class="jingxuan">
<div> <div v-if="TaoCanList.length > 0">
<div class="tit"> <div class="tit">
<i class="iconfont icon-jingxuan"></i> <i class="iconfont icon-jingxuan"></i>
<p>精选搭配</p> <p>精选</p>
</div> </div>
<el-carousel :interval="999000" type="card" height="490px"> <el-carousel :interval="999999" type="card" height="490px">
<el-carousel-item v-for="item in 6" :key="item"> <el-carousel-item v-for="(item, index) in TaoCanList" v-if="item.pkgs" :key="index">
<div class="jingxuan-item"> <div class="jingxuan-item">
<div> <div>
<div class="img-item"> <div class="img-item">
<img src="../../assets/img/country1.png" alt=""> <img :src="item.url" alt="">
</div>
<div class="img-item">
<img src="../../assets/img/country1.png" alt="">
</div>
<div class="img-item">
<img src="../../assets/img/country1.png" alt="">
</div>
<div class="img-item">
<img src="../../assets/img/country1.png" alt="">
</div> </div>
</div> </div>
<div class="jingxuanbg"> <div class="jingxuanbg">
<img src="../../assets/img/freeHome/jingxuanbg.png" alt=""> <img src="../../assets/img/freeHome/jingxuanbg.png" alt="">
</div> </div>
<div class="top-zhezhao">
<div class="img-item">
<div class="info">
【三亚网红海底餐厅】亚龙湾迎宾馆v海蓝海底餐厅海鲜BBQ自助晚餐¥125
</div>
</div>
<div class="img-item">
<div class="info">
【三亚网红海底餐厅】亚龙湾迎宾馆v海蓝海底餐厅海鲜BBQ自助晚餐¥125
</div>
</div>
<div class="img-item">
<div class="info">
【三亚网红海底餐厅】亚龙湾迎宾馆v海蓝海底餐厅海鲜BBQ自助晚餐¥125
</div>
</div>
<div class="img-item">
<div class="info">
【三亚网红海底餐厅】亚龙湾迎宾馆v海蓝海底餐厅海鲜BBQ自助晚餐¥125
</div>
</div>
</div>
<div class="jinxuan-time"> <div class="jinxuan-time">
<span class="number">8</span><span class="text"> 月</span><span class="number number2"> 16</span><span class="text"> 日</span> <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>
<p class="jingxuan-tit">赠观光层票】澳门旅游观光塔360Cafe旋转餐厅自助餐</p> <p class="jingxuan-tit">{{item.pkgs[0].pkg_name}}</p>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
...@@ -956,6 +927,7 @@ export default { ...@@ -956,6 +927,7 @@ export default {
list1: [], list1: [],
list2: [], list2: [],
list3: [], list3: [],
TaoCanList: [],
topCityActive: 0, topCityActive: 0,
CCListActive: 0, CCListActive: 0,
topCityList: [{ topCityList: [{
...@@ -988,10 +960,28 @@ export default { ...@@ -988,10 +960,28 @@ export default {
this.scrollobj.addEventListener('scroll', this.handleScroll); this.scrollobj.addEventListener('scroll', this.handleScroll);
this.getDataList() this.getDataList()
this.getDataCanList() this.getDataCanList()
this.getTaocanList()
this.getCCList() this.getCCList()
}, },
methods: { methods: {
goListPage(type, id, name, index){
this.inputActive = false;
let url = type == 1 ? "FreeList" : "FreeList2"
this.$router.push({
name: url,
query: {
id: id,
type: type,
name: name,
CCListActive: index ? index : this.CCListActive,
}
});
},
getMonth(str){
return str.substring(4, 6)
},
getDay(str){
return str.substring(6, 10)
},
//获取国家 城市 //获取国家 城市
getCCList(){ getCCList(){
//http://efficient.oytour.com/api/kkday/searchCity //http://efficient.oytour.com/api/kkday/searchCity
...@@ -1025,13 +1015,14 @@ export default { ...@@ -1025,13 +1015,14 @@ export default {
"/api/kkday/commodityList", "/api/kkday/commodityList",
{ {
"locale": "zh-cn", "locale": "zh-cn",
"state":"TW" , "state":"CN" ,
"cat_main_keys": [ "cat_main_keys": [
"TAG_3" "TAG_3"
], ],
"cat_sub_keys": [ "cat_sub_keys": [
"TAG_3_2" "TAG_3_2"
], ],
"sort": "PASC",
}, },
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
...@@ -1050,14 +1041,15 @@ export default { ...@@ -1050,14 +1041,15 @@ export default {
"/api/kkday/commodityList", "/api/kkday/commodityList",
{ {
"locale": "zh-cn", "locale": "zh-cn",
"state":"TW" , "state":"CN" ,
"cat_sub_keys": [ "cat_sub_keys": [
"TAG_1_3" "TAG_1_3"
], ],
"sort": "PASC",
}, },
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
let data = res.data.data.prods,menPiaoList = [], list1 = [], list2 = [], list3 = []; let data = res.data.data.prods,menPiaoList = [], list1 = [], list2 = [], list3 = [], TaoCanIds = [];
this.KkdayDomain = res.data.data.KkdayDomain; this.KkdayDomain = res.data.data.KkdayDomain;
// M01 一日遊 // M01 一日遊
// M02 多日遊 // M02 多日遊
...@@ -1076,6 +1068,12 @@ export default { ...@@ -1076,6 +1068,12 @@ export default {
} else if (x.prod_type == 'M02') { } else if (x.prod_type == 'M02') {
// list1.push(x) // list1.push(x)
} else if (x.prod_type == 'M01' || x.prod_type == 'M06') { // M01 一日遊 M06 半日遊 } else if (x.prod_type == 'M01' || x.prod_type == 'M06') { // M01 一日遊 M06 半日遊
if (TaoCanIds.length < 6) {
TaoCanIds.push({
num: x.prod_no,
url: this.KkdayDomain + x.prod_img_url
})
}
list2.push(x) list2.push(x)
} else if (x.prod_type == 'M04' || x.prod_type == 'M08' || x.prod_type == 'M03') { // M04 司機/交通 M03 機場接送 M08 點對點接送 } else if (x.prod_type == 'M04' || x.prod_type == 'M08' || x.prod_type == 'M03') { // M04 司機/交通 M03 機場接送 M08 點對點接送
list3.push(x) list3.push(x)
...@@ -1085,7 +1083,7 @@ export default { ...@@ -1085,7 +1083,7 @@ export default {
this.list3 = list3; this.list3 = list3;
this.dataList = data this.dataList = data
this.menPiaoList = menPiaoList this.menPiaoList = menPiaoList
this.getTaoCan() this.getTaocanList(TaoCanIds)
this.$forceUpdate() this.$forceUpdate()
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
...@@ -1094,17 +1092,25 @@ export default { ...@@ -1094,17 +1092,25 @@ export default {
null null
); );
}, },
getTaocanList(){ getTaocanList(TaoCanIds){
//http://efficient.oytour.com/api/kkday/QueryPackage let list = '';
for(let i = 0; i < TaoCanIds.length; i ++) {
list = list + TaoCanIds[i].num + (i == TaoCanIds.length -1 ? '' : ',')
}
//http://efficient.oytour.com/api/kkday/QueryPackageList
this.apiJavaPost( this.apiJavaPost(
"/api/kkday/QueryPackage", "/api/kkday/QueryPackageList",
{ {
"prod_no": "20140", "prodNums": list,
"locale":"zh-cn"
}, },
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
let data = res.data.data.prods let data = res.data.data
console.log(data)
for(let i = 0; i < data.length ; i ++){
data[i].url = TaoCanIds[i].url
}
this.TaoCanList = data
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
......
src/components/FreeTravel/FreeList.vue
View file @ 796f7823
...@@ -166,12 +166,13 @@ ...@@ -166,12 +166,13 @@
.freeList .contet-nav{ .freeList .contet-nav{
padding: 0 60px; padding: 0 60px;
height: 87px; height: 87px;
width: 100%; 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); box-shadow:0px 4px 35px 0px rgba(0, 0, 0, 0.24);
border-radius:6px; border-radius:6px;
position: absolute; position: absolute;
top: -50px; bottom: -50px;
left: 0;
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -231,6 +232,7 @@ ...@@ -231,6 +232,7 @@
position: relative; position: relative;
box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35); box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
border-radius:6px; border-radius:6px;
margin-bottom: 25px;
} }
.pro-item-top{ .pro-item-top{
display: flex; display: flex;
...@@ -341,12 +343,18 @@ ...@@ -341,12 +343,18 @@
.shangpinliebiao-item:hover{ .shangpinliebiao-item:hover{
top: -10px; top: -10px;
} }
.shangpinliebiao .top-img{
width: 100%;
height: 185px;
background-color: #e0e0e0;
}
.shangpinliebiao .top-img img{ .shangpinliebiao .top-img img{
width: 100%; width: 100%;
height: 185px; height: 185px;
} }
.shangpinliebiao-item>p{ .shangpinliebiao-item>p{
margin-top: 5px; margin-top: 5px;
min-height: 40px;
} }
.get-nav{ .get-nav{
height: 50px; height: 50px;
...@@ -362,7 +370,25 @@ ...@@ -362,7 +370,25 @@
align-items: center; align-items: center;
} }
.get-nav .paixu{ .get-nav .paixu{
transform: rotate(180deg) display: inline-block;
transform: rotate(180deg);
color: #EE4454;
}
.shangpinliebiao-item .tag{
position: absolute;
left: 15px;
top: 25px;
}
.shangpinliebiao-item .tag>span{
padding: 8px;
background:rgba(0,0,0, .4);
border-radius:4px;
color: #FFFFFF;
margin-right: 10px;
}
.page-con{
margin-top: 25px;
text-align: center;
} }
</style> </style>
<template> <template>
...@@ -371,7 +397,7 @@ ...@@ -371,7 +397,7 @@
<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">
<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>
...@@ -381,101 +407,20 @@ ...@@ -381,101 +407,20 @@
<el-input size="mini"></el-input> <el-input size="mini"></el-input>
</div> </div>
<el-row> <el-row>
<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="" :class="{'active': CCListActive == index}" :key="index">
<p>东亚</p> <p @click="CCListActive = index,goListPage(1, CCList[index].short, item.name, index)">{{item.name}}</p>
<div class="f12 text2"> <div class="f12 text2">
<span>成都</span> <span @click="goListPage(2, CCList[sIndex].number, s.name, sIndex)" v-for="(s, sIndex) in item.cities" :key="sIndex">{{s.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">
<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"> <div class="city-list">
<span>河南</span> <span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].short, CCList[CCListActive].name)">{{CCList[CCListActive].name}}</span>
<p> <p>
<span>郑州</span> <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>郑州</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>
...@@ -484,25 +429,11 @@ ...@@ -484,25 +429,11 @@
</div> </div>
</div> </div>
<div class="city-right-tag"> <div class="city-right-tag">
<p class="f14 cff">共12个旅游点</p> <p class="f14 cff">共{{newCityList.cities.length}}个旅游点</p>
<el-tabs type="card" > <el-tabs type="card" @tab-click="handleClick">
<el-tab-pane label="大阪" name="first"></el-tab-pane> <el-tab-pane v-for="(item, index) in newCityList.cities" :label="item.name" :key="index" :name="item.name"></el-tab-pane>
<el-tab-pane label="冲绳" name="second"></el-tab-pane>
<el-tab-pane label="东京" name="third"></el-tab-pane>
<el-tab-pane label="三和" name="fourth"></el-tab-pane>
<el-tab-pane label="大阪" name="first"></el-tab-pane>
<el-tab-pane label="冲绳" name="second"></el-tab-pane>
<el-tab-pane label="东京" name="third"></el-tab-pane>
<el-tab-pane label="三和" name="fourth"></el-tab-pane>
<el-tab-pane label="大阪" name="first"></el-tab-pane>
<el-tab-pane label="冲绳" name="second"></el-tab-pane>
<el-tab-pane label="东京" name="third"></el-tab-pane>
<el-tab-pane label="三和" name="fourth"></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div>
</div>
<div class="content">
<div class="contet-nav"> <div class="contet-nav">
<div> <div>
<div class="contet-nav-item"> <div class="contet-nav-item">
...@@ -535,101 +466,53 @@ ...@@ -535,101 +466,53 @@
<p>当地交通</p> <p>当地交通</p>
</div> </div>
</div> </div>
<div class="hot-p">
<div class="hot-p-item">
<p class="f24 hot-p-item-tit"><strong>TOP3</strong> 目的地热销产品</p>
<p class="f20 hot-p-item-tit-s">
<span class="hot-p-item-tit-s-line"></span>
<strong>新潟＆長野</strong>
<span class="f14 c88 __cp see-more">查看更多</span>
</p>
<el-row :gutter="20">
<el-col :span="6" v-for="item in 4" :key="item">
<div class="pro-item" >
<span class="pro-item-tag bgc-b cff" :class="`bgc-b${item}`">一日游</span>
<div class="pro-item-top">
<img src="../../assets/img/activy.jpg" alt="">
<p class="text4 f14">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p>
</div>
<div class="pro-item-btm">
<div>
<p><span class="price-box">￥<strong>298</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p>
</div>
<div class="c88 f12">
128人已购买
</div>
</div> </div>
</div> </div>
</el-col> <div class="content">
</el-row> <div class="hot-p" v-if="dataHotList.length > 0">
</div>
<div class="hot-p-item"> <div class="hot-p-item">
<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">
<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>东京</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="item in 4" :key="item"> <el-col :span="6" v-for="(sItem, sIndex) in item.data" :key="sIndex">
<div class="pro-item" > <div class="pro-item" >
<span class="pro-item-tag bgc-b cff" :class="`bgc-b${item}`">一日游</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">
<img src="../../assets/img/activy.jpg" alt=""> <img src="../../assets/img/activy.jpg" alt="">
<p class="text4 f14">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p> <p class="text4 f14 PingFangR">{{sItem.prod_name}}</p>
</div> </div>
<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">{{sItem.b2c_price}}</strong>/人</span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p> <!-- <span><span class="price-box">￥<strong>298</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人已购买 {{sItem.order_count + Math.round(Math.random()*99)}}人已购买
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="hot-p-item">
<p class="f20 hot-p-item-tit-s">
<span class="hot-p-item-tit-s-line"></span>
<strong>北海道</strong>
<span class="f14 c88 __cp see-more">查看更多</span>
</p>
<el-row :gutter="20">
<el-col :span="6" v-for="item in 4" :key="item">
<div class="pro-item" >
<span class="pro-item-tag bgc-b cff" :class="`bgc-b${item}`">一日游</span>
<div class="pro-item-top">
<img src="../../assets/img/activy.jpg" alt="">
<p class="text4 f14">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p>
</div>
<div class="pro-item-btm">
<div>
<p><span class="price-box">￥<strong>298</strong>/人 <span class="f12 c88 del-text">￥<strong>298</strong>/人</span></span></p>
<p class="c88 f12">最早可订日期：2019年8月20日</p>
</div>
<div class="c88 f12">
128人已购买
</div>
</div>
</div>
</el-col>
</el-row>
</div> </div>
</div> </div>
</div> </div>
<div class="shaixuan"> <div class="shaixuan">
<p class="f24 bold">日本游玩列表</p> <p class="f24 bold">{{ccName}}游玩列表</p>
<div class="shaixuan-box"> <div class="shaixuan-box">
<div class="shaixuan-top shaixuan-top1"> <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="checkedCities"> <el-checkbox-group v-model="newCityCheck" >
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> <el-checkbox v-for="city in newCityList.cities" :label="city.number" :key="city.number" @change="changeCity">{{city.name}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</div> </div>
...@@ -679,29 +562,42 @@ ...@@ -679,29 +562,42 @@
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 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>
<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="page-con">
<el-pagination
:current-page.sync="currentPage"
:page-size="16"
layout="total, prev, pager, next"
:total="totalCount"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -710,6 +606,7 @@ ...@@ -710,6 +606,7 @@
export default { export default {
data () { data () {
return { return {
newCityCheck: [],
paixu1: false, 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'],
...@@ -720,32 +617,200 @@ export default { ...@@ -720,32 +617,200 @@ export default {
disabledDate(time) { disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; 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_sub_keys": [
"TAG_1_3"
],
"page_size": 16,
"start": 0,
},
priceSort: "PASC", // PDESC 高到低
KkdayDomain: '',
laoding: false,
newCityList: {cities: []},
} }
}, },
mounted() { mounted() {
this.ccId = this.$route.query.id;
this.ccName = this.$route.query.name;
this.CCListActive = this.$route.query.CCListActive;
this.getList()
this.getHotList()
this.getCCList(1)
}, },
methods: { methods: {
// 获取列表 handleClick(tab, event){
getTaocanList(){ console.log(tab, event);
this.newCityList.cities.map((x, index)=>{
if (x.name == tab.name) {
this.goListPage(2, this.CCList[this.CCListActive].number, tab.name, index)
}
})
// this.goListPage(2, CCList[CCListActive].number, item.name, index)
},
goDetails(obj){
this.$router.push({
name: "FreeDetail",
query: {
id: obj.prod_url_no,
}
});
},
changeCity(){
if (this.newCityCheck.length>0) {
this.msg.city_keys = this.newCityCheck
this.getList()
} else{
delete this.msg.city_keys
this.msg = this.msg.city_keys
this.getList()
}
},
changeCon(index){
this.newCityList = this.CCList[index]
this.$forceUpdate()
},
pSort(){
this.paixu1 = !this.paixu1;
this.priceSort = this.paixu1 ? "PASC" : "PDESC"
this.getList()
},
goListPage(type, id, name, index){
if (id === this.ccId) return
this.addShow = false;
this.changeCon(index)
if(type == 1) {
this.getList(2, id)
this.getHotList(2, id)
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,
}
});
},
//获取国家 城市
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
this.CCList = data
this.changeCon(this.$route.query.CCListActive)
} else {
this.Error(res.data.message);
}
},
null
);
},
handleCurrentChange(val) {
// 翻页
this.msg.start = this.msg.start + 15;
this.getList();
},
// 获取热门列表
getHotList(type, id){
let query = this.$route.query;
if(query.type == 1 && !type) {
this.msg.country_keys = [query.id]
} else if(query.type == 2 && !type) {
this.msg.city_keys = [query.id]
}
if (type) {
this.msg.country_keys = [id]
}
this.msg.sort = "HDESC"
this.laoding2 = true;
//http://efficient.oytour.com/api/kkday/commodityList //http://efficient.oytour.com/api/kkday/commodityList
this.apiJavaPost( this.apiJavaPost(
"/api/kkday/commodityList", "/api/kkday/commodityList",
{ this.msg,
"locale": "zh-cn",
"state":"TW" ,
"cat_sub_keys": [
"TAG_1_3"
]
},
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
let data = res.data.data.prods let data = res.data.data.prods
let list = [];
var Diningmap = {},
Diningdest = [];
for(var i = 0; i < data.length; i++){
var ai = data[i];
if(!Diningmap[ai.countries[0].cities[0].name]){
Diningdest.push({
name: ai.countries[0].cities[0].name,
data: [ai]
});
Diningmap[ai.countries[0].cities[0].name] = ai;
}else{
for(var j = 0; j < Diningdest.length; j++){
var dj = Diningdest[j];
if(dj.name == ai.countries[0].cities[0].name){
dj.data.push(ai);
break;
}
}
}
}
console.log(Diningdest)
this.dataHotList = Diningdest
} else {
this.Error(res.data.message);
}
this.laoding2 = false;
},
null
);
},
// 获取列表
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.country_keys = [id]
}
this.msg.sort = this.priceSort
this.laoding = true;
//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) console.log(data)
this.KkdayDomain = data.KkdayDomain
this.totalCount = data.metadata.total_count
this.dataList = data.prods
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
this.laoding = false;
}, },
null null
); );
......
src/components/FreeTravel/FreeList2.vue
View file @ 796f7823
...@@ -166,12 +166,13 @@ ...@@ -166,12 +166,13 @@
.freeList .contet-nav{ .freeList .contet-nav{
padding: 0 60px; padding: 0 60px;
height: 87px; height: 87px;
width: 100%; 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); box-shadow:0px 4px 35px 0px rgba(0, 0, 0, 0.24);
border-radius:6px; border-radius:6px;
position: absolute; position: absolute;
top: -50px; bottom: -50px;
left: 0;
z-index: 0; z-index: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -341,12 +342,18 @@ ...@@ -341,12 +342,18 @@
.shangpinliebiao-item:hover{ .shangpinliebiao-item:hover{
top: -10px; top: -10px;
} }
.shangpinliebiao .top-img{
width: 100%;
height: 185px;
background-color: #e0e0e0;
}
.shangpinliebiao .top-img img{ .shangpinliebiao .top-img img{
width: 100%; width: 100%;
height: 185px; height: 185px;
} }
.shangpinliebiao-item>p{ .shangpinliebiao-item>p{
margin-top: 5px; margin-top: 5px;
min-height: 40px;
} }
.get-nav{ .get-nav{
height: 50px; height: 50px;
...@@ -362,7 +369,24 @@ ...@@ -362,7 +369,24 @@
align-items: center; align-items: center;
} }
.get-nav .paixu{ .get-nav .paixu{
transform: rotate(180deg) display: inline-block;
transform: rotate(180deg);
color: #EE4454;
}
.shangpinliebiao-item .tag{
position: absolute;
left: 15px;
top: 25px;
}
.shangpinliebiao-item .tag>span{
padding: 8px;
background:rgba(0,0,0, .4);
border-radius:4px;
color: #FFFFFF;
margin-right: 10px;
}
.page-con{
margin-top: 25px;
} }
</style> </style>
<template> <template>
...@@ -485,9 +509,6 @@ ...@@ -485,9 +509,6 @@
</div> </div>
<!-- 天气 --> <!-- 天气 -->
</div>
</div>
<div class="content">
<div class="contet-nav"> <div class="contet-nav">
<div> <div>
<div class="contet-nav-item"> <div class="contet-nav-item">
...@@ -521,6 +542,7 @@ ...@@ -521,6 +542,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="shaixuan"> <div class="shaixuan">
<p class="f24 bold">日本游玩列表</p> <p class="f24 bold">日本游玩列表</p>
<div class="shaixuan-box"> <div class="shaixuan-box">
...@@ -580,6 +602,9 @@ ...@@ -580,6 +602,9 @@
<div class="top-img"> <div class="top-img">
<img src="../../assets/img/activy.jpg" alt=""> <img src="../../assets/img/activy.jpg" alt="">
</div> </div>
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> <span class="PingFangR">中国-香港</span> </span>
</div>
<p class="text2 f14 c33">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p> <p class="text2 f14 c33">【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐</p>
<div class="pro-item-btm"> <div class="pro-item-btm">
<div> <div>
......
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