Commit e40a9b46 authored by 华国豪's avatar 华国豪 🙄

新版跟团游首页

parent 0f97a1be
.GroupTour{
background:#F8F8F8;
}
.GroupTour ._list .w1180{
width: 1180px;
margin: 0 auto;
}
.GroupTour ._list>p.tit{
font-size: 24px;
color: rgba(102,102,102,1);
font-weight: 400;
text-align: center;
margin: 45px auto;
}
\ No newline at end of file
<style>
.diving{
margin: 30px 0;
}
.diving>p{
font-size: 24px;
color: rgba(102,102,102,1);
font-weight: 400;
text-align: center;
margin: 40px 0 20px 0;
}
.diving .item {
position: relative;
padding: 8px 11px;
height: 198px;
transition: all linear .5s;
box-shadow: 0 0px 7px #eaeaea;
margin-bottom: 20px;
cursor: pointer;
background-color: rgba(245,245,245,1);
overflow: hidden;
}
.diving .item .label{
position: absolute;
left: 11px;
top: 8px;
z-index: 3;
font-size: 12px;
background:rgba(238,68,84,1);
color: white;
padding: 2px 6px;
transition: all ease-out .3s;
}
.diving .item:hover{
background-color: white;
box-shadow: none;
}
.diving .item:hover .line{
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 20px;
top: 20px;
}
.diving .item:hover .label{
left: 0;
top: 0;
}
.diving .item .img img{
width: 100%;
height: 198px;
}
.diving .item .line{
position: absolute;
left: 10px;
top: 8px;
width: calc(100% - 22px);
height: calc(100% - 16px);
border: 1px solid rgba(232, 235, 239, 1);
transition: all ease-out .3s;
}
.diving .item .info{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
padding: 13px 0;
background:rgba(255,255,255,.9);
}
.diving .item .info p.tit{
font-size: 14px;
max-width: 240px;
padding: 0 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diving .item .info .info_detail{
margin-top: 5px;
max-width: 240px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
}
.diving .item .info .info_detail .day{
color: #777777;
}
.diving .item .info .info_detail .money .num{
color: #EE4454;
font-size: 22px;
}
.diving .item .info .info_detail .money small.num{
font-size: 12px;
}
.diving .item .info .info_detail .money .qi{
color: #777777;
}
</style>
<template>
<el-row class="diving">
<p>精品推荐-跳水特价</p>
<el-row :gutter="20">
<template v-for="(item, index) in data">
<el-col :span="6" v-if="index < 8">
<div class="item" >
<div class="label">
{{item.lineName.substr(0, 2)}}
</div>
<div class="img">
<img v-if='item.imgCover!=null&&item.imgCover.length' :src='compressImg(JSON.parse(item.imgCover)[0].Url, "filt", 245, "")' alt="">
<img class="notamin" src="../../../assets/img/bg_c2@3x.png" v-else />
</div>
<div class="line"></div>
<div class="info">
<p class="tit">
{{item.title}}
</p>
<div class="info_detail">
<span class="day">{{item.startDate}} 仅余{{item.surplus}}</span>
<p class="money"><small class="num"></small><span class="num">{{isLogin!==1 ? item.b2CPrice : item.b2BPrice}}</span><span class="qi"></span></p>
</div>
</div>
</div>
</el-col>
</template>
</el-row>
</el-row>
</template>
<script>
export default {
props:['data', 'isLogin'],
data () {
return {
}
},
methods: {
},
mounted () {
}
}
</script>
<style>
.hot{
position: relative;
height: 466px;
background: #ffffff url(../../../assets/img/groupTour/hot_bg.png) no-repeat 0 100%/100% auto;
}
.hot .box{
position: relative;
width: 1180px;
margin: 50px auto 0 auto;
height: 360px;
}
.hot .box img{
width: 595px;
height: 351px;
padding-left: 35px;
position: relative;
z-index: 2;
}
.hot .box>div{
width: 464px;
padding: 51px 69px 68px 84px;
background-color: #FFFFFF;
position: absolute;
right: 0;
bottom: 0;
}
.hot .box div .tit{
color: #444444;
font-size: 20px;
}
.hot .box div .s_tit{
color: #999999;
font-size: 12px;
}
.hot .box div .info{
margin-top: 24px;
color: #999999;
font-size: 14px;
}
.hot .box div .see_detai span{
display: inline-block;
width:163px;
height:41px;
border:1px solid rgba(153,153,153,1);
margin-top: 32px;
color: #999999;
text-align: center;
line-height: 41px;
}
</style>
<template>
<el-row class="hot">
<div class="box">
<img src="../../../assets/img/groupTour/hot_img.png" alt="">
<div>
<p class="tit" :title="data[0].title">{{data[0].lineName}}-{{data[0].ltName}}</p>
<p class="s_tit">{{'Japan Tour'.toUpperCase()}}</p>
<p class="info">
{{data[0].title}}
</p>
<div class="see_detai">
<span class="__cp" @click="goUrl(data[0].id, data[0])">查看详情</span>
</div>
</div>
</div>
</el-row>
</template>
<script>
export default {
props: ['data'],
data () {
return {
}
},
methods: {
goUrl(id, obj){
let path = 'detailTwo'
path=`${path}/${encodeURIComponent(id)}/${obj.tcid}`;
this.$router.push({ path })
},
},
mounted () {
}
}
</script>
<style>
.line_list{
margin-bottom: 30px;
padding: 30px;
background-color: #FFFFFF;
}
.line_list>.el-col-5{
position: relative;
height: 440px;
width: 210px;
}
.line_list>.el-col-19{
width: 81.16667%;
}
.line_list .left_top{
display: flex;
padding: 4px 0 4px 20px;
}
.line_list .font_color_wt{
color: white;
}
.line_list .bg_blue{
background-color: #409EFF;
}
.line_list .bg_green{
background-color: #C2DE9A !important;
}
.line_list .bg_yellow{
background-color: #F8C94F !important;
}
.line_list .bg_orange{
background-color: #F8924F !important;
}
.line_list .bg_red{
background-color: #FF5868 !important;
}
.line_list .bg_skyBlue{
background-color: #6AD7FF !important;
}
.line_list .bg_grape{
background-color: #9D9FFF !important;
}
.line_list .bg_blue>p{
font-size: 22px;
}
.line_list .bg_blue div{
padding-left: 3px;
font-size: 12px;
opacity: .5;
}
.line_list .left_bottom{
position: absolute;
height: 400px;
width: 100%;
}
.line_list .left_bottom .box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400px;
transition: all 1s;
backface-visibility: hidden;
cursor: pointer;
}
.line_list .left_bottom .box img{
width: 100%;
height: 400px;
}
.line_list .left_bottom .b2{
height: 400px;
background-color: #EE4454;
transform: rotateY(-180deg);
color: white;
align-items: center;
text-align: center;
}
.line_list .left_bottom .b2 p{
margin-top: 80px;
font-size: 12px;
padding: 0 15px;
}
.line_list .left_bottom .b2 .bottom{
margin: 20px auto;
font-size: 12px;
border:1px solid rgba(255,255,255,1);
width: 98px;
height: 28px;
line-height: 28px;
}
.line_list .left_bottom:hover .b1{
transform: rotateY(180deg);
}
.line_list .left_bottom:hover .b2{
transform: rotateY(0deg);
}
.line_list #tab-none{
padding-left: 30px;
}
.line_list .right .el-tabs__nav-scroll{
height: 40px;
line-height: 40px;
}
.line_list .right .el-tabs__active-bar{
bottom: 3px;
}
.line_list .right .right_top_tabs{
height: 40px;
overflow: hidden;
border-bottom: 1px solid #E9E9E9;
padding: 0 120px 0 50px;
position: relative;
}
.line_list .right .el-tabs__item:hover {
color: #111111;
}
.line_list .right .el-tabs__item{
color: #888888;
}
.line_list .right .el-tabs__item.is-active{
color: #111111;
}
.line_list .right .el-tabs__active-bar{
background-color: #EE4454;
}
.line_list .right .right_top_tabs .more{
position: absolute;
right: 0;
top: 14px;
font-size: 12px;
color: #888888;
cursor: pointer;
}
.line_list .right .right_top_tabs .more:hover{
color: #111111;
}
.line_list .right .right_bottom{
padding: 20px 0 0 20px;
}
.line_list .right .right_bottom .rb_left .img img{
width: 100%;
height: 250px;
display: block;
}
.line_list .right .right_bottom .rb_left .info{
padding: 18px 20px;
box-shadow: 0 0px 7px #eaeaea;
/* border-bottom: 1px solid #E9E9E9; */
}
.line_list .right .right_bottom .rb_left .info .tit{
font-size: 14px;
max-width: 395px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333333;
}
.line_list .right .right_bottom .rb_left .info .day{
display: flex;
align-items: flex-end;
font-size: 12px;
color: #999999;
justify-content: space-between;
margin-top: 10px;
}
.line_list .right .right_bottom .rb_left .info .day span:nth-child(1) span{
font-size: 14px;
color: #666666;
}
.line_list .right .right_bottom .rb_left .info .day span:nth-child(2){
float: right;
color: #409EFF;
}
.line_list .right .right_bottom .rb_left .info .money{
margin-top: 17px;
}
.line_list .right .right_bottom .rb_left .info .money .num{
color: #EE4454;
font-size: 22px;
}
.line_list .right .right_bottom .rb_left .info .money small.num{
font-size: 12px;
}
.line_list .right .right_bottom .rb_left .info .money .qi{
color: #777777;
}
.line_list .right .right_bottom .rb_left .info .money .btn{
width:56px;
height:32px;
background:rgba(238,68,84,1);
border-radius:3px;
display: block;
float: right;
color: white;
line-height: 32px;
text-align: center;
cursor: pointer;
font-size: 12px;
}
.line_list .right .right_bottom .rb_left .info .money .btn.noBtn{
background-color: #CCCCCC;
cursor: inherit;
}
.line_list .right .right_bottom .rb_right .item.marginb10 {
margin-bottom: 14px;
}
.line_list .right .right_bottom .rb_right .item .img img{
width: 100%;
height: 120px;
display: block;
}
.line_list .right .right_bottom .rb_right .item .info{
padding: 4px 9px;
box-shadow: 0 0px 7px #eaeaea;
}
.line_list .right .right_bottom .rb_right .item .info .tit{
font-size: 12px;
max-width: 189px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333333;
}
.line_list .right .right_bottom .rb_right .item .info .day{
display: flex;
align-items: flex-end;
font-size: 12px;
color: #999999;
justify-content: space-between;
margin-top: 10px;
}
.line_list .right .right_bottom .rb_right .item .info .money{
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.line_list .right .right_bottom .rb_right .item .info .num{
color: #EE4454;
font-size: 22px;
}
.line_list .right .right_bottom .rb_right .item .info small.num{
font-size: 12px;
}
.line_list .right .right_bottom .rb_right .item .info .qi{
color: #777777;
}
.line_list .right .right_bottom .rb_right .item .info .btn{
width: 46px;
height: 22px;
background:rgba(238,68,84,1);
border-radius:3px;
display: block;
float: right;
color: white;
line-height: 22px;
text-align: center;
cursor: pointer;
font-size: 12px;
}
.line_list .right .right_bottom .rb_right .item .info .btn.noBtn{
background-color: #CCCCCC;
cursor: inherit;
}
.line_list .noImg{
width: 100%;
height: 250px;
background-color: #E0E0E0;
display: flex;
align-items: center;
justify-content: center;
}
.line_list .noImg.small{
width: 100%;
height: 120px;
background-color: #E0E0E0;
}
.line_list .noImg img{
width: 50% !important;
height: auto !important;
margin: 0 auto;
}
</style>
<template>
<el-row class="line_list" v-loading="loading">
<el-col :span="5">
<div class="left_top bg_blue font_color_wt" :class="{bg_green: index === 1, bg_yellow: index === 2, bg_orange: index === 3, bg_red: index === 4, bg_skyBlue: index === 5, bg_grape: index === 6}">
<p>{{dataList.name.replace('出境', '')}}</p>
<div>
<p>{{'Outbound'.toUpperCase()}}</p>
<p>{{'travel'.toUpperCase()}}</p>
</div>
</div>
<div class="left_bottom">
<div class="box b1">
<img src="../../../assets/img/img-01.png" style="width:100%" v-if='dataList.name.indexOf("日本")!=-1'/>
<img src="../../../assets/img/img-02.png" style="width:100%" v-else-if='dataList.name.indexOf("韩国")!=-1'/>
<img src="../../../assets/img/img-03.png" style="width:100%" v-else />
</div>
<div class="box b2">
<p>这里是广告占位,讲述图片内容的详细讲解,位置有限,显示不完整的地方就用...</p>
<div class="bottom">查看详情</div>
</div>
</div>
</el-col>
<el-col :span="19" class="right">
<el-row class="right_top_tabs">
<el-tabs v-model="activeName" @tab-click="loadModuleDataNoLoop">
<el-tab-pane label="精选" :name="`0_${index}`"></el-tab-pane>
<template v-for="(lineItem, it) in dataList.lineTeam" >
<el-tab-pane :label="lineItem.name" :name="`${lineItem.id}_${index}`"></el-tab-pane>
</template>
</el-tabs>
<div class="more">更多特惠>></div>
</el-row>
<el-row class="right_bottom" :gutter="20">
<template v-if="dataList.pageData && dataList.pageData.length > 0">
<el-col :span="12">
<div class="rb_left">
<div class="img">
<img v-if='dataList.pageData[0].imgCover!=null&&dataList.pageData[0].imgCover.length' onerror="../../../assets/img/bg_c2@3x.png" :src='compressImg(JSON.parse(dataList.pageData[0].imgCover)[0].Url, "filt", 245, "")' alt="">
<img v-else src="../../../assets/img/bg_c2@3x.png" alt="">
</div>
<div class="info">
<p class="tit" :title="dataList.pageData[0].title">{{dataList.pageData[0].title}}</p>
<p class="day"><span>最近团期:<span>{{dataList.pageData[0].startDate}}</span></span><span>{{dataList.pageData[0].dayNum}}</span></p>
<p class="money"><small class="num"></small><span class="num">{{isLogin!==1 ? dataList.pageData[0].b2CPrice : dataList.pageData[0].b2BPrice}}</span><span class="qi"></span> <span class="btn" @click="goUrl(dataList.pageData[0].id, dataList.pageData[0])">预订</span></p>
</div>
</div>
</el-col>
<el-col :span="12" class="rb_right">
<el-row :gutter="20">
<template v-for="(item, index) in dataList.pageData" v-if="index > 0">
<el-col :span="12" class="item" :class="{'marginb10': index < 3}">
<div class="img">
<img v-if='item.imgCover!=null && item.imgCover.length' onerror="../../../assets/img/bg_c2@3x.png" :src='compressImg(JSON.parse(item.imgCover)[0].Url, "filt", 245, "")' alt="">
<img v-else src="../../../assets/img/bg_c2@3x.png" alt="">
</div>
<div class="info">
<p class="tit" :title="item.title">{{item.title}}</p>
<p class="money"><span><small class="num"></small><span class="num">{{isLogin!==1 ? item.b2CPrice : item.b2BPrice}}</span><span class="qi"></span></span><span class="btn" @click="goUrl(item.id, item)">预订</span></p>
</div>
</el-col>
</template>
<template v-if="chaList.length > 0">
<el-col :span="12" class="item" v-for="(item, index) in chaList" :key="index" :class="{'marginb10': index < 2}">
<div class="img noImg small">
<img src="../../../assets/img/logo_t.png" alt="">
</div>
<div class="info">
<p class="tit">更多产品敬请期待</p>
<p class="money"><span><small class="num">备货中</small><span class="num"></span><span class="qi"> </span></span><span class="btn noBtn">预订</span></p>
</div>
</el-col>
</template>
</el-row>
</el-col>
</template>
<template v-else>
<el-col :span="12">
<div class="rb_left">
<div class="img noImg">
<img src="../../../assets/img/logo_t.png" alt="">
</div>
<div class="info">
<p class="tit" >更多产品敬请期待</p>
<p class="day"><span>最近团期:<span>暂无</span></span><span></span></p>
<p class="money"><small class="num">备货中</small><span class="num"></span><span class="qi"></span> <span class="btn noBtn">预订</span></p>
</div>
</div>
</el-col>
<el-col :span="12" class="rb_right">
<el-row :gutter="20">
<template v-for="(item, index) in none">
<el-col :span="12" class="item" :class="{'marginb10': index < 2}">
<div class="img noImg small">
<img src="../../../assets/img/logo_t.png" alt="">
</div>
<div class="info">
<p class="tit">更多产品敬请期待</p>
<p class="money"><span><small class="num">备货中</small><span class="num"></span><span class="qi"> </span></span><span class="btn noBtn">预订</span></p>
</div>
</el-col>
</template>
</el-row>
</el-col>
</template>
</el-row>
</el-col>
</el-row>
</template>
<script>
export default {
props:['dataList', 'index', 'isLogin'],
data () {
return {
activeName: '精选',
loading: false,
none: [1,2,3,4],
chaList: []
}
},
watch: {
'dataList.pageData':{
handler(val, oldval){
if (val) {
this.jiCha()
}
}
}
},
methods: {
goUrl(id, obj){
let path = 'detailTwo'
path=`${path}/${encodeURIComponent(id)}/${obj.tcid}`;
this.$router.push({ path })
},
loadModuleDataNoLoop: function (tab) {
this.loading = true
this.$emit('sonMethods', tab, this.index)
},
reloaditem: function (val) {
if (val === this.index) {
this.$forceUpdate()
this.loading = false
this.jiCha()
}
},
jiCha: function () {
let cha = 5 - this.dataList.pageData.length
console.log(cha)
this.chaList = [];
for(let i = 0; i < cha; i ++) {
this.chaList.push(i)
}
}
},
mounted(){
},
created () {
this.MsgBus.$on('reloadList', this.reloaditem)
}
}
</script>
<style>
@import "../../assets/css/groupTour/index.css";
</style>
<template>
<el-row class="GroupTour">
<!-- 顶部图片 -->
<el-row class="GroupTour_top_bg">
<img src="../../assets/img/groupTour/top_bg.png" alt="">
</el-row>
<el-row class="_list" v-loading="loading">
<!-- 跳水特价 -->
<Vdiving :data="tiaoshui" :isLogin="isLogin" class="w1180"/>
<!-- 线路列表 -->
<p class="tit w1180">出境跟团游</p>
<template v-for="(item, index) in recoItems.line" v-if="recoItems.line && recoItems.line.length > 0 && index < 3 && (item.lineTeam && item.lineTeam.length > 0)">
<Vlist :dataList="item" :index="index" :isLogin="isLogin" @sonMethods="loadModuleDataNoLoop" class="w1180"/>
</template>
<!-- 热门 -->
<Vhot :data="tehuis"/>
<!-- 线路列表 -->
<template v-for="(item, index) in recoItems.line" v-if="recoItems.line && recoItems.line.length > 0 && index > 2 && (item.lineTeam && item.lineTeam.length > 0)">
<Vlist :dataList="item" :index="index" :isLogin="isLogin" @sonMethods="loadModuleDataNoLoop" class="w1180"/>
</template>
</el-row>
</el-row>
</template>
<script>
import diving from './block/diving'
import list from './block/list'
import hot from './block/hot'
import moment from 'moment'
export default {
components: {
Vlist: list,
Vdiving: diving,
Vhot: hot,
},
data () {
return {
VlistData: [],
VhotData: [],
site: 0,
companyId: -1,
recoItems: [],
tehuis: [],
tiaoshui: [],
recoItemList: {
line: []
},
imgs: [],
isLogin: 1,
loadingIndex: -1,
loading: true,
}
},
methods: {
loadModuleData(sno){
// console.log(this.recoItems.line)
if(sno < this.recoItems.line.length){
let msg={
pageIndex: 1,
pageSize: 5,
companyId: this.companyId,
lineId: this.recoItems.line[sno].id,
lineTeamId: 0
}
this.apipost('b2b_get_GetB2BHomeLineTravelPageList',msg,r=>{
this.recoItems.line[sno] = Object.assign({}, this.recoItems.line[sno], {pageData: r.data.data.pageData})
// console.log(this.recoItems.line[sno].pageData)
this.loadModuleData(sno+1)
},null)
} else {
// this.recoItemList = this.recoItems
this.loading = false
}
},
loadModuleDataNoLoop(tab, index){
let sno = tab.name.split('_')[1], ltId = tab.name.split('_')[0]
console.log(tab)
this.loadingIndex=sno
let msg={
pageIndex: 1,
pageSize: 5,
companyId: this.companyId,
lineId: this.recoItems.line[sno].id,
lineTeamId: ltId
}
this.apipost('b2b_get_GetB2BHomeLineTravelPageList',msg,r=>{
this.recoItems.line[sno].pageData=r.data.data.pageData
this.loadingIndex=-1
this.MsgBus.$emit('reloadList', index)
},null)
},
loadRecoItems(){
if (this.companyId!=-1) {
this.apipost('b2b_get_GetHomeSearchItem',{'companyId': this.companyId, lineDirection: 2,}, r=> {
r.data.data.line.forEach( x => {
x.chosenLineTeam = '0'
})
this.recoItems = r.data.data
this.activeName = r.data.data.recommend[0].id.toString()
this.loadModuleData(0)
},null)
}
},
loadTiaoshui(){
if (this.companyId!=-1 ){
let msg = {
pageIndex: 1,
pageSize: 12,
companyId: this.companyId,
recommendType: 2,
}
this.apipost('b2b_get_GetB2BHomeRecommendPageList', msg, r=>{
this.tiaoshui = r.data.data.pageData
this.tiaoshui.forEach(x=> {
x.dataStr = moment(x.startDate).format('M-D')
})
}, null)
}
},
loadTehuis(){
if(this.companyId!=-1){
let msg={
pageIndex: 1,
pageSize: 1,
companyId: this.companyId,
recommendType: 1,
}
this.apipost('b2b_get_GetB2BHomeRecommendPageList',msg,r=>{
this.tehuis = r.data.data.pageData
this.tehuis.forEach(x=>{
x.dataStr=moment(x.startDate).format('M-D')
})
},null)
}
},
},
mounted () {
this.companyId=localStorage.site
this.loadRecoItems();
this.loadTehuis();
this.loadTiaoshui();
}
}
</script>
...@@ -84,11 +84,20 @@ export default new Router({ ...@@ -84,11 +84,20 @@ export default new Router({
title: '团队详情-印象之旅~感动与世界同步' title: '团队详情-印象之旅~感动与世界同步'
} }
}, },
// {
// path: "/heel",
// name: "heel",
// component: resolve =>
// require(["@/components/mall/heeltour"], resolve),
// meta: {
// title: "跟团游-印象之旅~感动与世界同步"
// }
// },
{ {
path: "/heel", path: "/heel",
name: "heel", name: "heel",
component: resolve => component: resolve =>
require(["@/components/mall/heeltour"], resolve), require(["@/components/GroupTour/index"], resolve),
meta: { meta: {
title: "跟团游-印象之旅~感动与世界同步" title: "跟团游-印象之旅~感动与世界同步"
} }
......
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
<template> <template>
<div class="home-box" v-if="isPhone"> <div class="home-box" v-if="isPhone">
<mallHead msg="" @forword='goUrl("2-1")' @siteCity="siteCity"/> <!-- <mallHead msg="" @forword='goUrl("2-1")' @siteCity="siteCity"/> -->
<!-- <newHead/> --> <newHead/>
<div :style='{"min-height":minHeight+"px"}'> <div :style='{"min-height":minHeight+"px"}'>
<transition name="slide"> <transition name="slide">
<router-view :changeCity='changeCity'></router-view> <router-view :changeCity='changeCity'></router-view>
......
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