Skip to content

A
Athena
Commit 28e8b3ce authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 61562acc
Show whitespace changes
Inline Side-by-side
Showing with 427 additions and 241 deletions
src/components/mall/newTrip.vue
View file @ 28e8b3ce
<style>
.pageViewTrip{
width:100%;
height:100%;
.pageViewTrip {
width: 100%;
height: 100%;
color: #4F5A61;
font-size: 14px;
font-family: "Chinese Quote",-apple-system,BlinkMacSystemFont,"Segoe UI",Lato,'PingFang SC',"Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Lato, 'PingFang SC', "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.pageViewTrip .tripContWrap{
.pageViewTrip .tripContWrap {
position: relative;
height:100%;
height: 100%;
}
.pageViewTrip .sideBar {
position: fixed;
width: 250px;
......@@ -20,17 +22,22 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pageViewTrip .sideBarBtns .btnPage {
cursor: pointer;
margin-bottom: 5px;
}
.pageViewTrip .sideBar ul, .pageViewTrip .sideBarBtns {
.pageViewTrip .sideBar ul,
.pageViewTrip .sideBarBtns {
position: relative;
z-index: 1;
}
.pageViewTrip .sideBarBtns .btnPage.active {
color: #00A4A8;
}
.pageViewTrip .sideBarBtns .btnPage i {
display: inline-block;
font-size: 20px;
......@@ -38,12 +45,14 @@
vertical-align: middle;
font-weight: bold;
}
.pageViewTrip .border {
border-top: 1px #cfd2d5 solid;
margin-top: 15px;
height: 15px;
max-width: 140px;
}
.pageViewTrip .sideBar ul {
list-style: none;
margin: 0;
......@@ -52,6 +61,7 @@
width: 190px;
max-height: calc(100vh - 220px);
}
.pageViewTrip .sideBar ul li {
display: block;
line-height: 30px;
......@@ -65,40 +75,58 @@
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.pageViewTrip .sideBar ul li i:last-child{
display:none;
.pageViewTrip .sideBar ul li i:last-child {
display: none;
}
.pageViewTrip .sideBar ul li .dayIndex {
display: inline-block;
width: 45px;
font-size: 16px;
font-weight: 700;
}
.pageViewTrip .main {
max-width: 480px;
margin-left: 250px;
}
.swiper-slide {
position: relative;
-webkit-overflow-scrolling: touch;
}
.tripViewContainer .inner {
margin: 15px;
color: #869096;
font-size: 14px;
}
.slideHeader {
color: #00A4A8;
font-weight: 700;
font-size: 26px;
overflow: hidden;
}
#footer:after, #footer:before, #pageWrap:after, #pageWrap:before, .clear:after, .clear:before, .container980:after,
.container980:before, .formRow:after, .formRow:before, .row:after, .row:before {
#footer:after,
#footer:before,
#pageWrap:after,
#pageWrap:before,
.clear:after,
.clear:before,
.container980:after,
.container980:before,
.formRow:after,
.formRow:before,
.row:after,
.row:before {
display: table;
content: " ";
clear: both;
}
.tripViewContainer .cityDayList .tripDay {
padding: 10px 0 10px 65px;
box-sizing: border-box;
......@@ -106,6 +134,7 @@
border-bottom: 1px #DCDEE0 solid;
min-height: 60px;
}
.tripViewContainer .cityDayList .tripDay .left {
position: absolute;
left: 0;
......@@ -117,6 +146,7 @@
transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.tripViewContainer .cityDayList .tripDay .cities {
font-size: 18px;
line-height: 24px;
......@@ -129,30 +159,38 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tripViewContainer .cityDayList .tripDay .left .dayIndex {
color: #00A4A8;
font-size: 20px;
font-weight: 700;
}
.swiper-slide, .swiperMobile .swiper-slide {
.swiper-slide,
.swiperMobile .swiper-slide {
background: #fff;
}
.tripViewContainer .inner .articleCont {
min-height: 30px;
margin-bottom: 20px;
font-size: 16px;
line-height: 160%;
}
.articleCont p {
margin: 16px 0;
}
.row {
margin-right: -10px;
margin-left: -10px;
}
.col-md-12 {
width: 100%;
}
.noteSubHeader .subTitle {
display: inline-block;
background: #fff;
......@@ -160,6 +198,7 @@
position: relative;
z-index: 2;
}
.noteSubHeader {
color: #4F5A60;
font-weight: 500;
......@@ -168,6 +207,7 @@
margin: 25px 0 15px;
position: relative;
}
.noteSubHeader:after {
display: block;
position: absolute;
......@@ -175,9 +215,11 @@
width: 100%;
z-index: 0;
}
.tripViewContainer .notes .col-md-6 {
width: 100%;
}
.noteBriefPiece {
padding: 10px 10px 10px 80px;
box-sizing: border-box;
......@@ -187,20 +229,46 @@
border: 1px #eeeeee solid;
color: #455661;
}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8,
.col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9 {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.arrangementSubHeader, .noteSubHeader {
.arrangementSubHeader,
.noteSubHeader {
font-weight: 500;
font-size: 16px;
line-height: 20px;
margin: 25px 0 15px;
position: relative;
}
.arrangementSubHeader .subTitle {
display: inline-block;
background: #fff;
......@@ -209,6 +277,7 @@
z-index: 2;
color: #4F5A60;
}
.arrangementSubHeader:after {
display: block;
position: absolute;
......@@ -217,19 +286,25 @@
z-index: 0;
bottom: 1px;
}
.arrangementSubHeader:after, .noteSubHeader:after, .tripMenuWrap .btnDayHeader:before {
.arrangementSubHeader:after,
.noteSubHeader:after,
.tripMenuWrap .btnDayHeader:before {
top: 10px;
content: " ";
}
.swiper-slide{
margin:30px 0;
.swiper-slide {
margin: 30px 0;
}
.arrangements .arrangementSubContainer {
border: 1px solid #DBE0E4;
border-radius: 5px;
margin: 8px 0;
min-height: 40px;
}
.arrangements .arrangementSubContainer .header {
background-color: #EFF1F2;
height: 34px;
......@@ -238,23 +313,28 @@
padding: 0 10px;
line-height: 34px;
}
.arrangements .arrangementSubContainer .header .dayIndex {
color: #00B2B4;
margin-right: 10px;
}
.arrangements .arrangementSubContainer .content {
padding: 5px 8px;
}
.arrangements .arrangementSubContainer .content .name {
font-size: 14px;
color: #4F5A60;
margin: 5px 0;
}
.arrangements .arrangementSubContainer .content .fromTo {
position: relative;
overflow: hidden;
height: 70px;
}
.arrangements .arrangementSubContainer .content .fromTo .from {
float: left;
width: 50%;
......@@ -262,22 +342,27 @@
padding-right: 50px;
color: #4F5A60;
}
.arrangements .arrangementSubContainer .content .fromTo .name {
font-size: 14px;
}
.arrangements .arrangementSubContainer .content .fromTo .time {
font-size: 10px;
}
.arrangements .arrangementSubContainer .content .fromTo .middle {
position: absolute;
text-align: center;
width: 100%;
top: -3px;
}
.arrangements .arrangementSubContainer .content .fromTo .middle .icon {
font-size: 24px;
color: #4F5A60;
}
.arrangements .arrangementSubContainer .content .fromTo .to {
float: left;
width: 50%;
......@@ -285,13 +370,16 @@
padding-left: 50px;
color: #4F5A60;
}
.arrangements .arrangementSubContainer .content .fromTo .middle .icon {
font-size: 30px;
color: #4F5A60;
}
.transit{
.transit {
font-weight: 700;
}
.arrangements .arrangementSubContainer .header {
background-color: #EFF1F2;
height: 34px;
......@@ -300,10 +388,12 @@
padding: 0 10px;
line-height: 34px;
}
.arrangements .arrangementSubContainer .header.hotel {
background-color: #FFF;
display: flex;
}
.arrangements .arrangementSubContainer .header.hotel .city {
color: #455661;
font-size: 14px;
......@@ -313,10 +403,12 @@
white-space: nowrap;
text-overflow: ellipsis;
}
.arrangements .arrangementSubContainer .content .name.hotel {
position: relative;
overflow: hidden;
}
.arrangements .arrangementSubContainer .content .name .left {
float: left;
color: #00B2B4;
......@@ -325,15 +417,18 @@
box-sizing: border-box;
padding-left: 3px;
}
.arrangements .arrangementSubContainer .content .name .right {
margin-top: 4px;
float: left;
width: 90%;
box-sizing: border-box;
}
.dayAgenda .slideHeader {
padding: 18px 0 2px 80px;
}
.slideHeader .dayNum {
font-size: 40px;
font-weight: 400;
......@@ -342,39 +437,50 @@
left: 0;
top: 0;
}
.slideHeader .dayNumRight {
font-size: 16px;
font-weight: 400;
color: #4F5A61;
margin-left:90px;
margin-left: 90px;
}
.slideHeader .dateEleSpace {
height: 16px;
}
.slideHeader .dayNumRight .cities {
min-height: 20px;
}
.slideHeader .date span, .slideHeader .dayNumRight .cities .arrow, .slideHeader .dayNumRight .cities .city {
.slideHeader .date span,
.slideHeader .dayNumRight .cities .arrow,
.slideHeader .dayNumRight .cities .city {
display: inline-block;
}
.slideHeader .cities i {
font-size: 14px;
padding: 0 5px;
display: inline-block;
color:#00A4A8;
color: #00A4A8;
}
.tripViewContainer .inner .articleCont {
min-height: 30px;
margin-bottom: 20px;
}
.articleCont {
font-size: 16px;
line-height: 160%;
}
.slideSubHeader{
.slideSubHeader {
position: relative;
color:#00A4A8;
color: #00A4A8;
}
.slideSubHeader:after {
content: " ";
display: block;
......@@ -384,6 +490,7 @@
top: 10px;
z-index: 0;
}
.slideSubHeader .subTitle {
display: inline-block;
background: #fff;
......@@ -391,18 +498,22 @@
position: relative;
z-index: 2;
}
.tripViewAgendaList{
margin-top:30px;
.tripViewAgendaList {
margin-top: 30px;
}
.tripViewAgendaList .agendaBox {
background: #fff;
position: relative;
margin-bottom: 60px;
}
.tripViewAgendaList .agendaBox .indexNum.hotelPre {
background: #F0AF37;
color: #fff;
}
.tripViewAgendaList .agendaBox .indexNum {
font-size: 18px;
line-height: 40px;
......@@ -414,6 +525,7 @@
left: 20px;
z-index: 9;
}
.tripViewAgendaList .agendaBox .coverWrap {
text-align: right;
height: 150px;
......@@ -422,15 +534,18 @@
background-size: cover;
background: url('../../assets/img/newtrip/hotel.jpg') no-repeat 100% 100%;
}
.tripViewAgendaList .agendaBox .txtCont {
padding: 10px 20px;
box-shadow: rgba(0,0,0,.1) 0 1px 1px 0;
box-shadow: rgba(0, 0, 0, .1) 0 1px 1px 0;
white-space: pre-wrap;
}
.tripViewAgendaList .agendaBox .agendaPoi .bed{
.tripViewAgendaList .agendaBox .agendaPoi .bed {
color: #3D4756;
font-size:22px;
font-size: 22px;
}
.tripViewAgendaList .agendaBox .txtCont .title {
font-size: 22px;
line-height: 24px;
......@@ -438,20 +553,24 @@
overflow: hidden;
font-weight: 700;
padding: 0 12px;
color:#3D4756;
color: #3D4756;
}
.tripViewAgendaList .agendaBox .detailBox {
color: #626262;
font-size: 14px;
}
.tripViewAgendaList .agendaBox .detailSection {
border-top: 1px #eee solid;
padding: 10px 0;
margin-top:20px;
margin-top: 20px;
}
.tripViewAgendaList .agendaBox .item {
margin: 8px 0;
}
.tripViewAgendaList .agendaBox .label {
display: inline-block;
width: 22%;
......@@ -460,18 +579,23 @@
padding-right: 15px;
text-align: right;
}
.tripViewAgendaList .agendaBox .purchaseNote, .tripViewAgendaList .agendaBox .text {
.tripViewAgendaList .agendaBox .purchaseNote,
.tripViewAgendaList .agendaBox .text {
display: -webkit-inline-box;
width: 72%;
vertical-align: top;
}
.subSection{
border-top:1px #eee solid;
.subSection {
border-top: 1px #eee solid;
padding: 20px 0;
}
.tripViewAgendaList .agendaBox .table .item {
margin: 8px 0;
}
.tripViewAgendaList .agendaBox .table .label {
display: inline-block;
width: 22%;
......@@ -480,11 +604,14 @@
padding-right: 15px;
text-align: right;
}
.tripViewAgendaList .agendaBox .table .purchaseNote, .tripViewAgendaList .agendaBox .table .text {
.tripViewAgendaList .agendaBox .table .purchaseNote,
.tripViewAgendaList .agendaBox .table .text {
display: -webkit-inline-box;
width: 72%;
vertical-align: top;
}
.Divtriangle {
position: absolute;
left: 26px;
......@@ -495,7 +622,8 @@
border-right: 15px solid transparent;
border-top: 15px solid #DCDEDF;
}
.Divtriangle span{
.Divtriangle span {
display: block;
width: 0;
height: 0;
......@@ -506,6 +634,7 @@
left: -28px;
top: -29px;
}
/* .xuxian{
position: absolute;
width:1px;
......@@ -518,43 +647,52 @@
.tripViewAgendaList .agendaBox .numberList {
background: #00A4A8;
color: #fff;
top:-16px;
left:20px;
top: -16px;
left: 20px;
}
.tripViewAgendaList .agendaPoi{
margin-top:10px;
.tripViewAgendaList .agendaPoi {
margin-top: 10px;
}
.tripViewAgendaList .agendaBox .food{
color:#00A4A8!important;
.tripViewAgendaList .agendaBox .food {
color: #00A4A8 !important;
}
.tripViewAgendaList .agendaBox .food1{
font-size:22px!important;
.tripViewAgendaList .agendaBox .food1 {
font-size: 22px !important;
}
.tripAgendaTransitBox {
overflow: hidden;
margin-bottom: 60px;
}
.tripAgendaTransitBox .transitIcon {
float: left;
margin: 5px 0 0 60px;
font-size: 22px;
}
.tripAgendaTransitBox .transitIcon {
float: left;
margin: 5px 0 0 60px;
font-size: 22px;
}
.tripAgendaTransitBox .transitInfoTxt {
line-height: 34px;
position: relative;
top:3px;
margin-left:10px;
top: 3px;
margin-left: 10px;
}
.tripViewAgendaList {
margin-top: 30px;
background: url(../../assets/img/newtrip/agendaBorder.png) 40px top repeat-y;
background-size: 2px auto;
}
.pageViewTrip .viewTripMap {
position: fixed;
top: 0;
......@@ -563,20 +701,24 @@
height: 100%;
/* z-index:-1; */
}
.cityDayList .tripDay .cities i{
color:#00A4A8;
margin:0 10px;
font-size:18px;
.cityDayList .tripDay .cities i {
color: #00A4A8;
margin: 0 10px;
font-size: 18px;
}
.cityDayList .tripDay .cities i:last-child{
display:none;
.cityDayList .tripDay .cities i:last-child {
display: none;
}
.tripViewAgendaList .agendaBox .txtCont {
padding: 10px 20px;
box-shadow: rgba(0,0,0,.1) 0 1px 1px 0;
box-shadow: rgba(0, 0, 0, .1) 0 1px 1px 0;
border: 1px solid #DCDEDF;
white-space: pre-wrap;
}
.agendaBox .longTransitPoi .left {
position: absolute;
left: 7px;
......@@ -584,37 +726,45 @@
margin-top: -10px;
font-size: 20px;
}
.agendIndex{
.agendIndex {
background-color: #00A4A8;
color:#fff;
color: #fff;
}
.tripViewAgendaList .agendaBox .city {
color: #00A4A8;
font-size:18px;
font-size: 18px;
}
.agendaBox .poiName {
font-weight: 700;
color: #4B4E52;
font-size: 22px;
}
.agendaBox .time {
color: #8F9296;
font-size: 14px;
}
.agendaBox .longTransitPoi {
padding: 10px 10px 10px 60px;
position: relative;
}
.agendaBox .longTransitMethod {
padding: 10px 10px 10px 60px;
position: relative;
}
.agendaBox .longTransitMethod .left {
position: absolute;
left: 0;
top: 50%;
margin-top: -40px;
}
.agendaBox .longTransitMethod .left .frame {
position: absolute;
font-size: 80px;
......@@ -625,6 +775,7 @@
top: -60px;
padding-top: 7px;
}
.agendaBox .longTransitMethod .left .method {
position: absolute;
z-index: 1;
......@@ -636,21 +787,25 @@
line-height: 86px;
text-align: center;
}
.agendaBox .longTransitMethod .name {
font-weight: 700;
color: #4B4E52;
font-size: 22px;
}
.agendaBox .longTransitMethod .time {
color: #8F9296;
font-size: 14px;
}
.frame i{
font-size:30px;
.frame i {
font-size: 30px;
line-height: 80px;
}
.pageViewTrip .active{
color:#00A4A8!important;
.pageViewTrip .active {
color: #00A4A8 !important;
}
</style>
<template>
......@@ -670,14 +825,15 @@
<div class="border"></div>
</div>
<ul>
<li v-for="(item,index) in dataList.dayList" :class="crtnav=='dayList'+(index+1)?'active':''" @click="goScroll('dayList'+(index+1),index)">
<li v-for="(item,index) in dataList.dayList" :class="crtnav=='dayList'+(index+1)?'active':''"
@click="goScroll('dayList'+(index+1),index)">
<span class="dayIndex">D{{index+1}}</span>
<template v-for="suItem in item.dayArray">
<template v-if="suItem.type==1" v-for="(childItem,index) in suItem.childItem.subTraffic">
<template v-if="index==0">
<span class="city">{{childItem.startCityName}}</span>
<i>-</i>
<span class="city">{{childItem.arrivalCityName}}</span>
<span class="city" :key="index">{{childItem.startCityName}}</span>
<i :key="index">-</i>
<span class="city" :key="index">{{childItem.arrivalCityName}}</span>
<i>-</i>
</template>
<template v-else>
......@@ -704,7 +860,8 @@
</div>
<div class="cities">
<template v-for="suItem in item.dayArray">
<template v-if="suItem.type==1" v-for="(childItem,index) in suItem.childItem.subTraffic">
<template v-if="suItem.type==1"
v-for="(childItem,index) in suItem.childItem.subTraffic">
<template v-if="index==0">
<span class="city">{{childItem.startCityName}}</span>
<i class="iconfont icon-daoda icon"></i>
......@@ -747,7 +904,9 @@
<span class="subTitle">交通方案</span>
</div>
</div>
<div class="col-md-12 col-sm-12" v-if="dataList.currentPriceInfo.priceFlight&&dataList.currentPriceInfo.priceFlight!=null" v-for="(item,index) in dataList.currentPriceInfo.priceFlight">
<div class="col-md-12 col-sm-12"
v-if="dataList.currentPriceInfo.priceFlight&&dataList.currentPriceInfo.priceFlight!=null"
v-for="(item,index) in dataList.currentPriceInfo.priceFlight">
<div class="arrangementSubContainer">
<div class="header"><span class="dayIndex">D{{index+1}}</span></div>
<div class="content">
......@@ -819,15 +978,32 @@
<div class="dayNumRight">
<div class="dateEleSpace"></div>
<div class="cities">
<span class="city">东京</span>
<template v-for="suItem in item.dayArray">
<template v-if="suItem.type==1"
v-for="(childItem,index) in suItem.childItem.subTraffic">
<template v-if="index==0">
<span class="city">{{childItem.startCityName}}</span>
<i class="iconfont icon-daoda icon"></i>
<span class="city">{{childItem.arrivalCityName}}</span>
<i class="iconfont icon-daoda icon"></i>
</template>
<template v-else>
<span class="city">{{childItem.arrivalCityName}}</span>
<i class="iconfont icon-daoda icon"></i>
</template>
</template>
</template>
<!-- <span class="city">东京</span>
<i class="iconfont icon-daoda"></i>
<span>成都</span>
<span>成都</span> -->
</div>
</div>
</div>
<div class="articleCont articleTxt">
<p>今日推荐：</p>
<p>大涌谷--箱根强罗公园--雕刻之森美术馆--箱根湿生花园--箱根七汤</p>
<template v-for="(subItem,subIndex) in item.dayArray" v-if="subItem.type==7">
<p :key="subIndex">{{subItem.childItem.title}}}</p>
</template>
</div>
<div class="agendaSection">
<div class="slideSubHeader">
......@@ -838,10 +1014,13 @@
<template v-if="subItem.type==2">
<div class="agendaBox">
<div class="indexNum numberList">{{index+1}}</div>
<div class="coverWrap" :style="`background: url(${subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`"></div>
<div class="coverWrap"
:style="`background: url(${subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div>
<div class="txtCont icon-triangle">
<div class="detailBox">
<div style="border-top:0;margin:20px 0;" v-html='subItem.childItem.descriptionText'></div>
<div style="border-top:0;margin:20px 0;"
v-html='subItem.childItem.descriptionText'></div>
</div>
<div class="Divtriangle">
<span></span>
......@@ -849,7 +1028,8 @@
<div class="detailSection" style="margin-top:0;">
<div class="item">
<span class="label">建议游玩时间</span>
<span class="text">{{subItem.childItem.playTimeMinutes}}</span>
<span
class="text">{{subItem.childItem.playTimeMinutes}}</span>
</div>
</div>
</div>
......@@ -901,8 +1081,11 @@
<div class="indexNum tos-icon hotelPre ">
<i class="iconfont icon-sun"></i>
</div>
<div class="coverWrap" v-if="subItem.childItem.imaArray.length>0" :style="`background: url(${subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`"></div>
<div class="txtCont icon-triangle" v-if="subItem.childItem.imaArray.length>0">
<div class="coverWrap" v-if="subItem.childItem.imaArray.length>0"
:style="`background: url(${subItem.childItem.imaArray[0].url}) no-repeat 100% 100%`">
</div>
<div class="txtCont icon-triangle"
v-if="subItem.childItem.imaArray.length>0">
<div class="agendaPoi">
<i class="iconfont icon-bed bed"></i>
<span class="title">{{subItem.childItem.hotelName}}</span>
......@@ -912,19 +1095,23 @@
<div class="item">
<span class="label">酒店星级</span>
<span class="text">
<el-rate v-model="subItem.childItem.star" disabled></el-rate>
<el-rate v-model="subItem.childItem.star"
disabled></el-rate>
</span>
</div>
<div class="item">
<span class="label">设施服务</span>
<span class="text">{{getService(subItem.childItem.facilityServices)}}</span>
<span
class="text">{{getService(subItem.childItem.facilityServices)}}</span>
</div>
</div>
<div class="subSection">{{subItem.childItem.descriptionText}}</div>
<div class="subSection">
{{subItem.childItem.descriptionText}}</div>
<div class="detailSection" style="margin-top:0;">
<div class="item">
<span class="label">地址</span>
<span class="text">{{subItem.childItem.hotelAddress}}</span>
<span
class="text">{{subItem.childItem.hotelAddress}}</span>
</div>
<div class="item">
<span class="label">网址</span>
......@@ -1028,30 +1215,30 @@
</div>
</template>
<script>
import tripMap from '../global/tripMap'
// import HTMap from '../global/HTMap'
export default {
data(){
return{
import tripMap from '../global/tripMap'
// import HTMap from '../global/HTMap'
export default {
data() {
return {
defaultImg: 'this.src="' + require('../../assets/img/newtrip/hotel.jpg') + '"',
travelLngLat:[],
travelLngLat: [],
//请求参数
msg:{
ID:0,
tcid:0
msg: {
ID: 0,
tcid: 0
},
dataList:{},
dataList: {},
scrollobj: null,
crtnav:'',
isShow:false,
dataindex:0
crtnav: '',
isShow: false,
dataindex: 0
}
},
mounted () {
this.msg.ID= this.$route.query.ID;
this.msg.tcid= this.$route.query.tcid;
mounted() {
this.msg.ID = this.$route.query.ID;
this.msg.tcid = this.$route.query.tcid;
this.crtnav='tripLine';
this.crtnav = 'tripLine';
this.scrollobj = document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
this.getTrip();
......@@ -1059,14 +1246,14 @@ export default {
components: {
tripMap
},
watch:{
watch: {
//滚动检测day滚动
dataindex(newValue,old){
dataindex(newValue, old) {
this.getDayPoint(this.dataindex);
},
//滚动检测头部三个
crtnav(newValue,old){
if(newValue=='tripLine'||newValue=='aboutTrip'||newValue=='tripArrange'){
crtnav(newValue, old) {
if (newValue == 'tripLine' || newValue == 'aboutTrip' || newValue == 'tripArrange') {
this.getAllPoint();
}
}
......@@ -1074,12 +1261,13 @@ export default {
methods: {
//加载数据
getTrip(){
getTrip() {
this.apipost('b2b_get_GetB2BTravelInfoV1', this.msg, res => {
console.log(res);
if (res.data.resultCode == 1) {
this.dataList=res.data.data;
this.isShow=true;
this.dataList = res.data.data;
console.log( " this.dataList " ,this.dataList );
this.isShow = true;
this.getAllPoint();
// this.$refs.tripMap.mapBuild();
......@@ -1089,45 +1277,45 @@ export default {
}, null)
},
//遍历设施服务
getService(item){
getService(item) {
let Obj = JSON.parse(item);
let str=''
let str = ''
Obj[0].list.forEach(x => {
str+= x.Content+' ';
str += x.Content + ' ';
});
return str;
},
//滚动定位
goScroll(id,index) {
if(id=='tripLine'||id=='aboutTrip'||id=='tripArrange'){
goScroll(id, index) {
if (id == 'tripLine' || id == 'aboutTrip' || id == 'tripArrange') {
this.$refs.tripMap.mapBuild();
}
if(index>=0&&index!=''){
if (index >= 0 && index != '') {
this.getDayPoint(index);
this.$refs.tripMap.mapBuild();
}
this.crtnav=id;
this.crtnav = id;
this.scrollobj.scrollTop = document.getElementById(id).offsetTop;
},
//加载所有坐标点
getAllPoint(){
let Arr=[];
this.dataList.dayList.forEach(x=>{
x.dayArray.forEach(y=>{
if(y.type==1){
y.childItem.subTraffic.forEach(z=>{
let obj1={
lat:z.startCityPoint[1],
lng:z.startCityPoint[0],
name:z.arrivalCityName,
type:1
}
let obj2={
lat:z.arrivalCityPoint[1],
lng:z.arrivalCityPoint[0],
name:z.startCityName,
type:1
getAllPoint() {
let Arr = [];
this.dataList.dayList.forEach(x => {
x.dayArray.forEach(y => {
if (y.type == 1) {
y.childItem.subTraffic.forEach(z => {
let obj1 = {
lat: z.startCityPoint[1],
lng: z.startCityPoint[0],
name: z.arrivalCityName,
type: 1
}
let obj2 = {
lat: z.arrivalCityPoint[1],
lng: z.arrivalCityPoint[0],
name: z.startCityName,
type: 1
}
Arr.push(obj1);
Arr.push(obj2);
......@@ -1135,43 +1323,43 @@ export default {
}
})
})
console.log(Arr,'Arrrr');
this.travelLngLat=Arr;
console.log(Arr, 'Arrrr');
this.travelLngLat = Arr;
},
//加载当日坐标点
getDayPoint(index){
let Arr=[];
this.dataList.dayList[index].dayArray.forEach(x=>{
if(x.type==1){
x.childItem.subTraffic.forEach(z=>{
let obj1={
lat:z.startCityPoint[1],
lng:z.startCityPoint[0],
name:z.arrivalCityName,
type:1
}
let obj2={
lat:z.arrivalCityPoint[1],
lng:z.arrivalCityPoint[0],
name:z.startCityName,
type:1
getDayPoint(index) {
let Arr = [];
this.dataList.dayList[index].dayArray.forEach(x => {
if (x.type == 1) {
x.childItem.subTraffic.forEach(z => {
let obj1 = {
lat: z.startCityPoint[1],
lng: z.startCityPoint[0],
name: z.arrivalCityName,
type: 1
}
let obj2 = {
lat: z.arrivalCityPoint[1],
lng: z.arrivalCityPoint[0],
name: z.startCityName,
type: 1
}
Arr.push(obj1);
Arr.push(obj2);
})
}
})
console.log(Arr,'day加载');
this.travelLngLat=Arr;
console.log(Arr, 'day加载');
this.travelLngLat = Arr;
},
//滚动选中
handleScroll() {
try {
let navs=['tripLine','aboutTrip','tripArrange'];
this.dataList.dayList.forEach((x,index)=>{
navs.push('dayList'+(index+1))
let navs = ['tripLine', 'aboutTrip', 'tripArrange'];
this.dataList.dayList.forEach((x, index) => {
navs.push('dayList' + (index + 1))
})
let current = ''
navs.forEach(x => {
......@@ -1184,9 +1372,9 @@ export default {
// if(current=='tripLine'||current=='aboutTrip'||current=='tripArrange'){
// this.getAllPoint();
// }
if(current.indexOf("dayList") != -1){
let index=current.split('dayList')[1];
this.dataindex=index;
if (current.indexOf("dayList") != -1) {
let index = current.split('dayList')[1];
this.dataindex = index;
}
} catch (error) {
......@@ -1194,7 +1382,5 @@ export default {
},
}
}
}
</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