Skip to content

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

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/athena

parents e40a9b46 75a8781e
Show whitespace changes
Inline Side-by-side
Showing with 2723 additions and 269 deletions
src/App.vue
View file @ 09727e2d
......@@ -59,7 +59,7 @@ export default {
<style>
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_pxnr9ox66cp.css';
@import '//at.alicdn.com/t/font_863923_mmwwh61s03g.css';
@import './assets/global/global.css';
body,html{
padding: 0px;
......
src/assets/css/localtourhome.css
View file @ 09727e2d
......@@ -3,13 +3,20 @@
width: 1200px;
margin: 10px auto;
}
.Localtourhome .basefix:after {
.commonF .basefix:after {
clear: both;
content: '.';
display: block;
height: 0;
overflow: hidden;
}
.commonF .textHidden1{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.Localtourhome .basefix .sidenav_left{
width: 390px;
float: left;
......@@ -33,6 +40,7 @@
border: 1px dashed #DDDDDD;
height: 104px;
box-sizing: border-box;
overflow: hidden;
}
.Localtourhome .basefix .citylist li:last-child{
border: none;
......@@ -47,6 +55,7 @@
display: inline-block;
padding-right:14px;
margin-top:5px;
cursor: pointer;
}
.Localtourhome .ttd_mod_category .tab_mod{
margin-top: 10px;
......@@ -90,6 +99,7 @@
margin: 8px 0;
margin-right:25px;
color:#003333;
cursor: pointer;
}
.Localtourhome .commontitle .outone_top_right .content .outone_active{
background:rgba(76,185,96,1);
......@@ -101,6 +111,7 @@
font-size: 12px;
position: relative;
top: 9px;
cursor: pointer;
}
.Localtourhome .outoneday .dayContent>div{
float: left;
......@@ -153,6 +164,9 @@
width: 192px;
height: 144px;
}
.Localtourhome .outoneday .dayContent .dayConDiv2 li:hover{
cursor: pointer;
}
.Localtourhome .outoneday .dayContent .dayConDiv2 li{
float: left;
margin-left: 12px;
......@@ -243,7 +257,9 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.Localtourhome .dayConDiv3 .hottour_ul li:hover{
cursor: pointer;
box-shadow:0px 1px 4px 0px rgba(94,94,94,0.61);
}
.Localtourhome .ticketContent>div{
......@@ -293,6 +309,9 @@
background-size:100% 100%;
}
.Localtourhome .ticketRight li:hover{
cursor: pointer;
}
.Localtourhome .ticketRight li{
float: left;
width: 228px;
......@@ -355,7 +374,8 @@
color: #333333;
text-align: center;
position: relative;
top: -10px;
top: 0px;
}
.Localtourhome .VeContent{
margin-top: 24px;
......@@ -365,6 +385,9 @@
width: 968px;
float: left;
}
.Localtourhome .VehicleCon .VeContentLeft li:hover{
cursor: pointer;
}
.Localtourhome .VehicleCon .VeContentLeft li{
width:228px;
height:170px;
......@@ -439,5 +462,629 @@
width: 100%;
height: 100%;
}
/* 列表页样式 */
.LocalTourList .item-pager .el-pagination__editor, .LocalTourList .item-pager .el-pager li, .LocalTourList .el-pagination .btn-next, .LocalTourList .el-pagination .btn-prev{
width: 30px;
height: 30px;
line-height: 30px;
}
.LocalTourList .tab{
border-bottom:2px solid #4CB960;
}
.LocalTourList .tab_li{
margin-left: 3px;
float: left;
}
.LocalTourList .tab_li span{
display: inline-block;
width: 83px;
height: 34px;
line-height: 34px;
text-align: center;
background-image: url("../img/localtour/tab.png");
background-repeat:no-repeat;
background-size:100% 100%;
margin-left:-3px;
position: relative;
color:#4CB960;
font-size: 14px;
cursor: pointer;
}
.LocalTourList .tab_li .tab_active{
background-image: url("../img/localtour/tab1.png");
color:#fff;
}
.LocalTourList .iconlist{
float: right;
}
.LocalTourList .iconlist .icon{
width: 140px;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
}
.LocalTourList .iconlist .icon>span{
display: inline-block;
width:29px;
height:29px;
background:rgba(76,185,96,0.2);
border-radius: 50%;
text-align: center;
}
.LocalTourList .choose_ul{
border-left: 1px solid #DCDCDC;
border-right: 1px solid #DCDCDC;
}
.LocalTourList .choose_ul li{
/* height: 34px; */
width: 100%;
border-bottom: 1px solid #DCDCDC;
position: relative;
padding:6px 0;
overflow: hidden;
}
.LocalTourList .choose_ul li>div{
display: inline-block;
}
.LocalTourList .choose_ul .tabLeft{
width: 107px;
text-align: center;
line-height: 34px;
border-right: 1px solid #DCDCDC;
font-size: 12px;
color:#333333;
font-family: "PingFangR";
height: 100%;
background: #EFEFEF;
position: absolute;
top: 0;
}
.LocalTourList .choose_ul .cityheight{
height: 25px;
}
.LocalTourList .choose_ul .cityActive{
color: rgba(76,185,96,1);
border: 1px solid rgba(76,185,96,1);
}
.LocalTourList .choose_ul .cityActive .rotate{
color: rgba(76,185,96,1);
transform: rotateX(180deg);
transition: all 0.2s;
}
.LocalTourList .choose_ul .tabRight{
font-size: 12px;
color:#000000;
height: 100%;
width: 1034px;
padding-left: 107px;
}
.LocalTourList .choose_ul .line .tabRight>span{
margin-top: 3px;
}
.LocalTourList .choose_ul .spanMargin>span{
margin-left: 20px;
padding:2px 6px;
display: inline-block;
cursor: pointer;
}
.LocalTourList .choose_ul .cityList span{
margin-bottom:6px;
margin-left: 20px;
}
.LocalTourList .choose_ul .dateLi .el-icon-circle-close{
top: -5px;
position: relative;
}
.LocalTourList .choose_ul .spanMargin .spanActive{
padding:2px 6px;
background:rgba(76,185,96,1);
border-radius:4px;
text-align: center;
color: #fff;
}
.LocalTourList .choose_ul .spanMargin .el-date-editor.el-input, .el-date-editor.el-input__inner{
width:160px;
height:28px;
margin-top:3px;
}
.LocalTourList .choose_ul .spanMargin .el-input__inner{
height:28px;
line-height: 28px;
border-radius: 0;
}
.LocalTourList .choose_ul .spanMargin .el-input__prefix{
left: 109px;
top: -6px;
color:#4CB960;
font-family: "PingFangR"
}
.LocalTourList .choose_ul .PriceLi .el-input{
width:100px;
height:28px;
margin-top: 1px;
}
.LocalTourList .sortDiv{
background: #dddddd;
margin-top: 20px;
}
.LocalTourList .sortDiv>div{
display: inline-block;
width: 85px;
text-align: right;
padding:7px 0;
}
.LocalTourList .sortDiv>div i{
color:#8F9199;
margin-right: -5px;
cursor: pointer;
}
.LocalTourList .sortDiv>div .iconfontActive{
color:rgba(76,185,96,1)!important;
}
.LocalTourList .liStatus{
position: absolute;
top: 6px;
right: 10px;
width:44px;
height:20px;
border:1px solid rgba(210,210,210,1);
border-radius:4px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.LocalTourList .liStatus .iconfont{
color:#666666;
font-size: 12px;
display: inline-block;
}
/* 景点详情开始 */
.TicketDetails{
font-family: "PingFang";
}
.TicketDetails .TicketHead{
margin-top: 20px;
width: 100%;
padding: 20px;
box-sizing: border-box;
height: 390px;
background:rgba(255,255,255,1);
border:1px solid rgba(220,220,220,1);
}
.TicketDetails .TicketHead .TicketHeadLeft{
display: inline-block;
width: 500px;
}
.TicketDetails .TicketHead .block{
margin-top: 5px;
}
.TicketDetails .TicketHead .block .imgUl{
display: inline-block;
overflow: hidden;
width: 440px;
height:63px;
position: relative;
margin-left:6px;
}
.TicketDetails .TicketHead .block .imgUl ul{
position: absolute;
left: 0;
width: 999em;
height: 100%;
overflow: hidden;
transition: left .4s;
}
.TicketDetails .TicketHead .block li{
display: inline-block;
width:77px;
height:58px;
box-sizing: border-box;
margin:0 5px;
cursor: pointer;
}
.TicketDetails .TicketHead .block .liActive{
border:2px solid rgba(76,185,96,1);
padding:1px;
position: relative;
top: -3px;
}
.TicketDetails .TicketHead .block img{
width: 100%;
height: 100%;
}
.TicketDetails .TicketHead .block .ChangeImgTab{
display: inline-block;
width:27px;
height:58px;
background:rgba(76,185,96,0.2);
position: relative;
top: -27px;
text-align: center;
line-height: 58px;
}
.TicketDetails .TicketHead .block .ChangeImgTab .iconfont{
color:#4CB960;
font-size: 20px;
font-family: "PingFangR";
cursor: pointer;
}
.TicketDetails .TicketHead .TicketHeadRight {
display: inline-block;
width:620px;
}
.TicketDetails .TicketHead>div{
float: left;
margin-left: 16px;
}
.TicketDetails .TicketHead .TicketHeadRight .ticketSpan span{
border:1px solid rgba(76,185,96,1);
font-size:12px;
color:#4CB960;
padding:2px 4px;
margin-right: 10px;
}
.TicketDetails .TicketHead .TicketHeadRight .price{
margin: 25px 0;
width:100%;
height:70px;
background:rgba(245,245,245,1);
padding: 14px 0 20px 28px;
box-sizing: border-box;
color:#FDAC11;
font-size: 30px;
font-family: "PingFangR";
}
.TicketDetails .TicketHead .TicketHeadRight p{
color:#000000;
font-size: 12px;
}
.TicketDetails .TicketHead .TicketHeadRight p .time{
width:58px;
height:20px;
background:rgba(76,185,96,1);
display: inline-block;
text-align: center;
line-height: 20px;color:#fff;
}
.TicketDetails .TicketHead .TicketHeadRight p{
display: flex;
}
.TicketDetails .TicketHead .TicketHeadRight p .text{
-webkit-flex: 1;
flex: 1;
line-height: 20px;
}
.TicketDetails .TicketTab{
border-bottom:1px solid rgba(220,220,220,1);
margin-top:20px;
}
.TicketDetails .TicketTab .nav_wrap{
overflow: hidden;
margin-bottom: -1px;
position: relative;
}
.TicketDetails .TicketTab .nav_wrap .Tablist{
border-bottom: none;
box-sizing: border-box;
white-space: nowrap;
position: relative;
transition: transform .3s;
float: left;
z-index: 2;
}
.TicketDetails .TicketTab .nav_wrap .Tablist .tab{
width:106px;
height:40px;
text-align: center;
line-height: 40px;
display: inline-block;
border-bottom: 1px solid transparent;
border-left: 1px solid #e4e7ed;
transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
background: #f5f5f5;
box-sizing: border-box;
position: relative;
border: 1px solid #dcdcdc;
cursor: pointer;
}
.TicketDetails .TicketTab .nav_wrap .Tablist .tab{
border-left: none;
font-size: 14px;
color:#000000;
}
.TicketDetails .TicketTab .nav_wrap .Tablist .tabActive{
border-bottom-color: #fff;
border-top:3px solid #4CB960;
background: #fff;
}
.TicketDetails .TicketDes{
border:1px solid rgba(220,220,220,1);
border-top: none;
}
.TicketDetails .TicketDes .title{
color:#2E9B42;
font-size: 16px;
font-family: "PingFangR";
display: flex;
align-items: center;
padding-left:10px;
}
.TicketDetails .TicketDes .commonUl{
margin-top:30px;
}
.TicketDetails .TicketDes .commonUl li .el-row{
width: 98%;
margin: 0 auto;
/* padding:26px 0 18px 0; */
box-sizing: border-box;
font-size: 14px;
border-bottom: 1px solid #DCDCDC;
height: 73px;
line-height: 73px;
color:#333333;
cursor: pointer;
}
.TicketDetails .TicketDes .commonUl li:hover{
background: #F5F5F5;
}
.TicketDetails .TicketDes .commonUl li .ydBtn{
display: inline-block;
width:62px;
height:28px;
background:rgba(238,68,84,1);
color:#fff;
text-align: center;
line-height: 28px;
}
.colorG{
background:rgba(255,255,255,1);
border:1px solid rgba(76,185,96,1);
color:#4CB960;
padding:2px 4px;
margin-left:10px;
}
.commonF .font22{
font-size: 22px;
}
.TicketDetails .TicketDes .commonUl:last-child li:last-child .el-row{
border-bottom: none;
}
.TicketDetails .ydxz{
margin-top:20px;
border:1px solid rgba(220,220,220,1);
padding:0 20px 20px 20px;
}
.TicketDetails .ydxz .ydTitle{
width:120px;
height:46px;
background: url("../img/localtour/ydback.png") no-repeat;
background-size:100% 100%;
line-height: 46px;
text-align: center;
color:#fff;
font-family: "PingFangR";
}
.TicketDetails .ydxz .explain{
height:30px;
line-height: 30px;
background:rgba(245,245,245,1);
padding-left:25px;
color:#333333;
font-family: "PingFangR";
margin:15px 0;
}
.TicketDetails .ydxz .explainContent{
padding:0 25px;
font-size: 14px;
}
.TicketDetails .ydxz .otherExplain{
width:104px;
height:31px;
background: url("../img/localtour/othere.png") no-repeat;
background-size:100% 100%;
line-height: 31px;
text-align: center;
color:#fff;
font-family: "PingFangR";
margin-bottom:30px;
position: relative;
left:-20px;
}
.TicketDetails .searchFixed{
position: fixed;
top: 0;
margin-top: -20px;
z-index: 100;
}
.TicketDetails .green{
background: #ddd!important;
}
.TicketDetails .green .iconfont{
color:#c2c2c2!important;
}
/* 预约 */
.Appointment .FirstDiv{
padding:20px;
}
.Appointment{
background:#F5F5F5;
margin-top:-15px;
padding:20px 0 5px 0;
color:#333333;
}
.Appointment .w1200{
background: #fff;
}
.Appointment .colorTitle{
display: inline-block;
width:4px;
height:14px;
background:rgba(76,185,96,1);
}
.Appointment .icon-more{
font-size: 14px;
display: inline-block;
transform: rotateX(180deg);
}
.Appointment .form .formline .el-input--small .el-input__inner{
width: 280px;
border-radius: 0px;
}
.Appointment .form .el-input-number__decrease,.Appointment .form .el-input-number__increase{
border-radius: 0px;
background: #4CB960;
color:#fff;
}
.Appointment .form .fg{
width: 100%;
height: 1px;
background: #E6E6E6;
}
.Appointment .Yhq{
margin-top:20px;
}
.Appointment .yhqUl{
padding:0 20px;
margin:20px 0;
}
.Appointment .sawtooth {
/* 相对定位，方便让before和after伪元素绝对定位偏移 */
position: relative;
/* 把超出p的部分隐藏起来 */
overflow: hidden;
width:234px;
height:84px;
background: #6776D2;
display: inline-block;
margin-right:26px;
padding-left:20px;
color:#fff;
}
.Appointment .sawtooth .kdj{
position: absolute;
display: inline-block;
width:51px;
height:22px;
background:rgba(255,231,27,1);
right:20px;
top:12px;
color:#7C6F01;
font-size: 12px;
text-align: center;
line-height: 22px;
}
.Appointment .sawtooth:before, .sawtooth:after {
content: ' ';
width: 0;
height: 100%;
/* 绝对定位进行偏移 */
position: absolute;
top: 10px;
}
.Appointment .sawtooth:before {
/* 圆点型的border */
border-right: 10px dotted white;
/* 偏移一个半径，让圆点的一半覆盖p */
left: -5px;
}
.Appointment .sawtooth .input{
position: relative;
top: 2px;
}
.Appointment .payMoney{
width:298px;
height:124px;
background:rgba(255,255,255,1);
border:1px solid rgba(233,82,82,1);
margin-top:30px;
display: inline-block;
}
.Appointment .payMoney p{
text-align: right;
font-size: 14px;
}
.Appointment .payMoney p>span{
display: inline-block;
min-width: 100px;
margin-right:10px;
}
.Appointment .orderOk{
text-align: right;
font-size: 12px;
margin-bottom:20px;
}
.Appointment .orderPay{
width:100px;
height:32px;
background:rgba(233,82,82,1);
display: inline-block;
text-align: center;
color:#fff;
font-size:14px;
line-height: 32px;
margin-left:15px;
cursor: pointer;
}
.Appointment .Rotate .icon-more{
transform: rotateX(0deg);
transition: all 0.2s;
}
.Appointment .formline{
position: relative;
}
.calendarDiv{
width:406px;
background:rgba(255,255,255,1);
z-index: 100;
border: 1px solid #E1E1E1;
}
.Appointment .formline .calendarSpan{
width: 280px;
height: 32px;
line-height: 32px;
border: 1px solid #dcdfe6;
display: inline-block;
padding-left:10px;
}
.calendarPopover{
padding:0;
}
.calendarDiv .month_circle{
display: inline-block;
width:28px;
height:28px;
background:rgba(227,227,227,1);
color: #fff;
text-align: center;
line-height: 28px;
border-radius: 2px;
cursor: pointer;
}
src/components/DependentTravel/CustomizedTourism.vue
View file @ 09727e2d
......@@ -147,7 +147,7 @@
</li>
<p style="margin-top:15px;font-size:12px;text-align:center;position:absolute;bottom:40px;right:60px">
<span @click="GetDes" :class="desshow?'desstatus':''" style="color:#666666;cursor:pointer">查看行程详情 <i class="iconfont icon-more"></i></span>
<span v-if="configId!=null" @click="GetDes" :class="desshow?'desstatus':''" style="color:#666666;cursor:pointer">查看行程详情 <i class="iconfont icon-more"></i></span>
</p>
</ul>
<!-- 查看详情 -->
......
src/components/LocalTour/AdmissionTicket.vue 0 → 100644
View file @ 09727e2d
<template>
<div class="AdmissionTicket OnedayList">
<div class="basefix">
<ul class="oneList">
<div v-for="(item,index) in dataList" :key="index+5000" style="margin-bottom:20px">
<li>
<div>
<img style="width:143px;height:106px;" :src="item.coverImgs[0]" alt="">
</div>
<div class="secondDiv">
<p style="font-size:16px;color:#2A5532">{{item.name}}</p>
<p style="margin-top:14px;" class="font12">
<i class="iconfont icon-bb-chufadi"></i>
<span>景点地址：{{item.address}}</span>
</p>
<p style="margin-top:14px;" class="font12">
<i class="iconfont icon-shijian-copy"></i>
<span>开放时间：{{item.openingHours}}</span>
</p>
</div>
<div class="threeDiv">
<p><span style="color:#FDAC11;font-size:22px">￥{{item.b2bPrice | NoDesnum}}</span>起</p>
</div>
</li>
<ul class="ticketDiv">
<li v-for="ticket in item.ticketList" :key="ticket.id">
<span class="firsrSpan">
<span class="ticketdes">{{item.name}} {{ticket.ticketDesc}}门票></span>
<span class="peopleType">{{ticket.ticketName}}</span></span>
<span class="SecondSpan">
<span class="price">￥{{ticket.b2bPrice | NoDesnum}}</span>
<!-- <span style="color:#999999;font-size:12px;margin-left:7px;text-decoration: line-through">原价:￥300</span> -->
</span>
<span class="ThreeSpan">
<span @click="GoUrl(item)" class="yd">预定</span>
</span>
</li>
</ul>
</div>
<div v-if="dataList.length==0" style="padding:15px 0;text-align:center">
<div class="empty-data"><i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
</div>
</ul>
<ul class="hottour_ul">
<p class="pfR font14" style="margin-bottom:8px">热门景点</p>
<div class="hotsecn">
<span>日本-急乐园 </span>
<span>日本-急乐园 </span>
<span>日本-豪斯登堡主题乐园</span>
<span>韩国-首尔乱打秀</span>
<span>日本-豪斯登堡主题乐园</span>
</div>
</ul>
</div>
</div>
</template>
<script>
export default {
props:["ticketList"],
data () {
return {
dataList:[],
}
},
mounted() {
},
methods: {
GoUrl(item){
this.$router.push({ path:'/TicketDetails',
query:{idDes:encodeURIComponent(item.idDes)} })
},
},
watch:{
ticketList:{
handler:function(val,oldvalue){
this.dataList=val;
}
}
}
}
</script>
<style scoped>
/* .AdmissionTicket .basefix{
clear: both;
content: '.';
display: block;
height: 0;
overflow: hidden;
} */
.AdmissionTicket .ticketDiv li .ticketdes{
display: inline-block;
max-width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.AdmissionTicket .ticketDiv li .ThreeSpan .yd{
display: inline-block;
text-align: center;
line-height: 24px;
width:60px;
height:24px;
background:rgba(238,68,84,1);
color:#fff;
cursor: pointer;
}
.AdmissionTicket .ticketDiv li .SecondSpan .price{
color: #FDAC11;
font-size: 14px;
font-family: "PingFangR";
}
.AdmissionTicket .ticketDiv li .firsrSpan .peopleType{
padding:1px 4px;
background:rgba(76,185,96,1);
display: inline-block;
text-align: center;
line-height: 20px;
color: #fff;
margin-left: 7px;
position: relative;
top: -15px;
}
.AdmissionTicket .ticketDiv li .ThreeSpan{
width:60px;
float: right;
}
.AdmissionTicket .ticketDiv li .SecondSpan{
width:180px;
position: relative;
top: -15px;
}
.AdmissionTicket .ticketDiv li .firsrSpan{
width:660px;
padding-left:20px;
color:#2A5532;
}
.AdmissionTicket .ticketDiv li>span{
display: inline-block;
box-sizing: border-box;
}
.AdmissionTicket .ticketDiv li{
background: #EDF8EF;
font-size: 12px;
padding-right: 19px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #D8E7DA;
}
.AdmissionTicket .hotsecn span{
display: inline-block;
padding:5px 14px;
color: #EE4454;
font-size: 12px;
margin-right: 10px;
margin-bottom:14px;
background:rgba(238,68,84,0.2);
}
.OnedayList .hottour_ul{
width: 228px;
float: right;
}
.OnedayList>ul{
float: left;
}
.OnedayList .pfR{
font-family: "PingFangR";
}
.OnedayList .threeDiv{
float: right!important;
text-align: right;
font-size:12px
}
.OnedayList .threeDiv .ckxq{
display: inline-block;
width:80px;
height:28px;
background:rgba(242,242,242,1);
text-align: center;
line-height: 28px;
}
.OnedayList .taglist span{
background:rgba(76,185,96,0.2);
color:#4E9F5D;
font-size: 12px;
margin-right:10px;
padding:4px 10px;
}
.OnedayList .oneList .font12{
font-size: 12px;
}
.OnedayList .oneList li .secondDiv{
margin-left:13px;
width: 535px;
}
.OnedayList .oneList li .secondDiv .iconfont{
color:#B5B5B5;
font-size: 12px;
}
.OnedayList .oneList div>li{
color:#333333;
height:127px;
border:1px solid rgba(229,229,229,1);
padding: 11px 28px 11px 11px;
box-sizing: border-box;
}
.OnedayList .oneList{
width:950px;
float: left;
}
.OnedayList .oneList li>div{
float: left;
}
/* .OnedayList .basefix:after {
clear: both;
content: '.';
display: block;
height: 0;
overflow: hidden;
} */
</style>
src/components/LocalTour/Appointment.vue 0 → 100644
View file @ 09727e2d
<template>
<div class="Appointment commonF">
<div class="w1200">
<!-- first -->
<div class="FirstDiv">
<p>
<span class="colorTitle"></span>
<span class="pfR"> {{dataDes.name}}{{Ticketinfo.ticketName}}>({{Ticketinfo.ticketDesc}})</span>
<span @click="show=!show" :class="show?'Rotate':''" class="font12" style="margin-left:10px;color:#666666;cursor: pointer;">预约须知
<i class="iconfont icon-more"></i>
</span>
</p>
<div v-show="show" style="width:740px;background:#f5f5f5;padding:15px 25px;box-sizing:border-box;margin:10px 0;font-size:12px">
<div v-if="dataDes.bookingInfo&&dataDes.bookingInfo!=''">{{dataDes.bookingInfo}}</div>
<div v-else>暂无</div>
</div>
</div>
<div class="form">
<el-form :rules="rules" ref="ruleForm" :model="form" label-width="80px">
<el-form-item class="formline" label="使用日期">
<el-popover popper-class="calendarPopover" v-model="visible"
placement="bottom-start"
trigger="click">
<div class="calendarDiv">
<div style="font-size:16px;padding:10px;text-align:center;overflow:auto;">
<el-col :span="8"><span @click="ChangeMonth(0)" class="month_circle">
<i class="iconfont icon-xiangzuo"></i>
</span> </el-col>
<el-col :span="8" style="color:#333333;">
<span class="pfR" style="position:relative;top:5px">{{tomonth}}</span>
</el-col>
<el-col :span="8"><span @click="ChangeMonth(1)" class="month_circle">
<i class="iconfont icon-arrowright1"></i>
</span></el-col>
</div>
<v-calendar ref="child" v-on:SelectChild="SelectChild" v-for="(item,index) in classArray" :key="index" v-bind:dateData="classArray" :day ="tomonth">
</v-calendar>
</div>
<span class="calendarSpan" slot="reference">{{form.useDate}}</span>
</el-popover>
</el-form-item>
<el-form-item label="购买数量">
<el-input-number size="small" v-model="form.purchaseQuantity" :min="1" :max="10" @change="PurchaseQuantity"></el-input-number>
</el-form-item>
<div class="fg"></div>
<div style="padding:0 20px">
<p class="pfR" style="color:#000000;margin:30px 0">取票人/出行人信息</p>
<el-form-item class="formline" label="中文姓名" prop="contactCNName">
<el-input size="small" v-model="form.contactCNName"></el-input>
</el-form-item>
<el-form-item class="formline" label="英文姓名">
<el-input size="small" v-model="form.contactENName"></el-input>
</el-form-item>
<el-form-item class="formline" label="手机号" prop="contactMobile">
<el-input size="small" v-model="form.contactMobile"></el-input>
</el-form-item>
<el-form-item class="formline" label="E-mail" prop="contactEmail">
<el-input size="small" v-model="form.contactEmail"></el-input>
</el-form-item>
</div>
</el-form>
</div>
<!-- 优惠券使用 -->
<div class="Yhq">
<p class="pfR" style="color:#000000;padding-left:20px">优惠券使用</p>
<ul class="yhqUl">
<li v-for="(item,index) in UserCanUseCouponList" :key="index+5000" class="sawtooth">
<span class="kdj">
<span v-if="item.overlapUse==1">可叠加</span>
<span v-else>不可叠加</span>
</span>
<p style="margin-top:10px">￥<span>{{item.denomination}}</span></p>
<p style="font-size:14px">满{{item.useCondition}}使用</p>
<p style="font-size:12px;color:#4C58A4;margin-top:6px">
有效期：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}
</p>
<div @click="clickCoupon(item)" class="_choice_box">
<span v-if="!item.active"></span>
<span v-else class="iconfont icon-xuanzhong2"></span>
</div>
</li>
</ul>
<div style="border-bottom:1px dashed #E5E5E5"></div>
<div class="basefix" style="padding-right:20px">
<div style="text-align:right">
<div class="payMoney basefix">
<p style="font-size:12px;margin-top:20px">小计：<span>￥{{price}}</span></p>
<p style="margin:7px 0">优惠：<span class="pfR">-￥{{form.discountMoney}}</span></p>
<p class="pfR">实付款：<span style="color:#AAAAAA;font-size:24px">￥<span style="color:#E95252;font-size:24px">{{SettlementPrice}}</span></span></p>
</div>
</div>
<div class="orderOk">
我已阅读并同意
<span style="color:#39B372">预订须知、旅游合同、特别预订提示、安全提示</span>
<span @click="SaveOrder('ruleForm')" class="orderPay">确认订单</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import calendar from "@/components/mall/LocalTourCalendar.vue";
export default {
components: {
"v-calendar": calendar
},
data () {
return {
visible:false,
form:{
useDate:'',
purchaseQuantity:1,
contactEmail:'',
discountMoney:0,
orderSource:2,
orderForm:1,
couponAllotIds:"",
customerId:0,
},
show:false,
idDes:0,
classArray: [],
other_date: {
flithtMonthDate: moment().format("YYYY-MM"),
},
tomonth: moment().format("YYYY-MM"),
currentMonthDays:0,
timeStr:[],
CouponsList:[],
Ticketinfo:{},
dataDes:{},
rules: {
contactCNName: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
contactMobile: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ required: true, trigger: 'blur', pattern: /^1[3|4|5|7|8][0-9]\d{8}$/ ,message: '请填写正确的手机号'}
],
contactEmail:[
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]
},
CouponList:[],
UserCanUseCouponList:[],
CouponIds: '',
SettlementPrice:0,
price:0,
CheckedId:[],
}
},
created(){
let userInfo=JSON.parse(localStorage.userInfo);
this.form.customerId=userInfo.customerId;
// console.log("StorageInfo.customerId",userInfo.customerId);
this.dataDes=JSON.parse(sessionStorage.dataDes);
this.Ticketinfo=JSON.parse(sessionStorage.Ticketinfo);
this.price=(this.Ticketinfo.b2bPrice*this.form.purchaseQuantity).toFixed(2);
this.SettlementPrice=this.price;
},
mounted() {
this.idDes=decodeURIComponent(this.$route.query.idDes);
this.GetTicketPrice();
this.GetCoupons();
},
watch:{
price:{
handler(n, o){
if (n!==o && this.CouponList.length>0 ) {
this.SettlementPrice=n;
this.filterCoupon()
}
},
deep: true
},
},
methods: {
PurchaseQuantity(val){
this.price=(this.Ticketinfo.b2bPrice*val).toFixed(2);
},
clickCoupon: function (item) {
let list = [];
if (!item.active) { // 是否选中
if (item.overlapUse === 1) { // 1允许叠加使用
this.CouponList.forEach(x=>{
if (x.overlapUse === 1 && x.couponsType === item.couponsType) { // 优惠券列表筛选出允许叠加并且type相同的
list.push(x)
}
})
item.active = !item.active
this.UserCanUseCouponList = list
} else { // 不允许叠加使用
this.CouponList.forEach(x=>{ // 筛选掉其他
if (x.id === item.id) {
list.push(x)
}
})
item.active = !item.active
this.UserCanUseCouponList = list
}
} else {
item.active = !item.active
if (this.UserCanUseCouponList.length===1) { // 取消优惠券选中状态 之前直选择了一个优惠券
this.UserCanUseCouponList = this.CouponList
} else { //... 之前选择了多个优惠券 循环判断是否已全部取消
let num = 0
this.UserCanUseCouponList.forEach(x=>{
if (x.active)
num +=1
})
if (num===0) {
this.CouponList.forEach(x=>{
x.active = false
})
this.UserCanUseCouponList = this.CouponList
}
}
}
if (this.UserCanUseCouponList.length>0) {
let CouponIds = ''
let CouponMoney = 0
let CouponSale = 1
let type = 0
this.UserCanUseCouponList.forEach(x=>{
if (x.active) {
type = x.couponsType
CouponIds = CouponIds + x.id + ','
if (x.couponsType === 1) {
CouponMoney = CouponMoney + x.denomination
} else {
CouponSale = CouponSale * (x.denomination/10)
}
}
})
this.CouponIds = CouponIds
if (type === 1) {
this.SettlementPrice = this.price - CouponMoney
} else if (type === 2) {
this.SettlementPrice = this.price * CouponSale
} else if (type === 0) {
this.SettlementPrice = this.price
}
} else {
this.SettlementPrice = this.price
}
console.log("SettlementPrice",this.SettlementPrice)
// this.SettlementPrice=parseInt(this.SettlementPrice).toFixed(2);
let allmonney=this.price - this.SettlementPrice;
this.form.discountMoney = (this.price - this.SettlementPrice).toFixed(2);
this.CouponIds=this.CouponIds.substring(0,this.CouponIds.length-1)
this.form.couponAllotIds=this.CouponIds;
},
filterCoupon() {
let list = []
this.CouponList.forEach(x=>{
if (this.price>x.useCondition) {
x.active = false
list.push(x)
}
})
this.UserCanUseCouponList = list
},
SaveOrder(formName){
this.form.preferPrice=this.SettlementPrice;
if(this.form.useDate==""){
this.Error("请选择使用日期！")
return;
}
this.$refs[formName].validate((valid) => {
if (valid) {
this.apiJavaPost("/api/b2b/scenic/setTicketOrder",this.form,res => {
if(res.data.resultCode==1){
this.Success(res.data.message);
}else{
this.Error(res.data.message)
}
},
null
);
} else {
return false;
}
});
},
SelectChild(item) {
console.log(item);
this.form.useDate=item.date_str;
this.form.couponsId=item.couponsId;
this.form.ticketId=item.ticketId;
this.form.priceId=item.priceId;
this.visible=false;
//
},
// 获取优惠券
GetCoupons(){
let msg={
lineId:0,
lineteamId:0,
CouponsUseScope:5,
};
this.apiJavaPost("/api/b2b/user/getUserCanUseCouponList",msg,
res => {
if(res.data.resultCode==1){
this.CouponList=res.data.data;
this.CouponList.forEach(item=>{
item.active=false;
})
this.filterCoupon();
}
},
null
);
},
// 改变月份
ChangeMonth(num){
if(num==1){
this.tomonth = moment(this.tomonth)
.add(1, "month")
.format("YYYY-MM");
}else{
this.tomonth = moment(this.tomonth)
.subtract(1, "month")
.format("YYYY-MM");
}
this.GetCurrentDays();
},
// 获取当月天数
GetCurrentDays(){
let MonthdayList=[];
this.currentMonthDays = moment(this.tomonth).daysInMonth();
for(let i=1;i<=this.currentMonthDays;i++){
if(i<10){
i=`0${i}`;
}
let month={};
month.dateStr=`${this.tomonth}-${i}`;
MonthdayList.push(month)
}
let DayList=[];
this.timeStr.forEach(time=>{
MonthdayList.forEach(item=>{
if(moment(time.startDate).isBefore(item.dateStr) && moment(item.dateStr).isBefore(time.endDate)){
let msg={
price:time.b2bPrice,
couponsId:time.couponsId,
priceId:time.id,
idDes:time.idDes,
ticketId:time.ticketId,
dateStr:item.dateStr,
};
DayList.push(msg)
}else{
let date={
dateStr:item.dateStr,
}
DayList.push(date)
}
})
})
this.creatCalendar(DayList);
},
GetTicketPrice(){
this.apiJavaPost('/api/b2b/scenic/getCouponsTicketPriceList',{idDes:this.idDes},res=>{
if(res.data.resultCode==1){
this.timeStr=res.data.data;
this.GetCurrentDays();
}else{
this.Error(res.data.message);
}
},null)
},
creatCalendar(list) {
// 创建日历
let dateList =list;
// if (list && list.length > 0) {
// list.forEach((x, index) => {
// // if(parseFloat(999) > 0){
// let msg = {
// dateStr: x.timeStr,
// cDate: x.timeStr.replace("-", "年").replace("-", "月"),
// price: x.price,
// b2BMemberPrice: x.price,
// b2BPrice: x.price,
// b2CMemberPrice: x.price,
// id: index,
// dateStrS: x.timeStr.substring(0, x.timeStr.length - 3)
// };
// dateList.push(msg);
// // }
// });
// }
let monthArray = [];
for (var i in dateList) {
var data = dateList[i];
var dateDict = {
mounth: data.dateStr.substring(0, data.dateStr.length - 3)
};
monthArray.push(dateDict);
}
//数组去重,获取有几个月
var hash = {};
monthArray = monthArray.reduce(function(item, next) {
hash[next.mounth] ? "" : (hash[next.mounth] = true && item.push(next));
return item;
}, []);
//数据分组
let classArray = [];
for (var j in monthArray) {
var newArray = new Array();
for (var i in dateList) {
var data = dateList[i];
if (
data.dateStr.substring(0, data.dateStr.length - 3) ==
monthArray[j].mounth
) {
newArray.push(data);
}
}
classArray.push(newArray);
}
this.classArray = classArray;
var hash = {};
dateList = dateList.reduce(function(item, next) {
hash[next.dateStrS]
? ""
: (hash[next.dateStrS] = true && item.push(next));
return item;
}, []);
this.calendarTit = dateList;
this.$nextTick(() => {
this.$refs.child[0].getYearMonthDay(this.classArray);
});
}
}
}
</script>
<style scoped>
@import "../../assets/css/localtourhome.css";
.Appointment ._choice_box{
height: 19px;
position: absolute;
right: 10px;
bottom: 8px;
}
.Appointment ._choice_box span{
width: 16px;
height: 16px;
border-radius: 50%;
line-height: 16px;
text-align: center;
background-color: white;
display: inline-block;
font-size: 12px !important;
}
.Appointment .icon-xuanzhong2{
color: #31AA21;
}
</style>
src/components/LocalTour/LocalTourList.vue
View file @ 09727e2d
<template>
<div class="LocalTourList">
<div class="LocalTourList commonF">
<div class="w1200">
<ul class="tab basefix">
<li class="tab_li">
<span @click="ChangeTab(1)" :class="tab==1?'tab_active':''" style="z-index:10">一日游</span>
<span @click="ChangeTab(2)" :class="tab==2?'tab_active':''" style="z-index:5">门票</span>
<span @click="ChangeTab(3)" :class="tab==3?'tab_active':''" style="z-index:1">巴厘岛</span>
</li>
<li class="iconlist">
<div class="icon">
<span>
<img style="width: 15px;height: 17px;margin-top: 6px;" src="../../assets/img/localtour/info.png" alt="">
</span>
无忧用车
</div>
<div class="icon">
<span>
<img style="width: 15px;height: 15px;margin-top: 7px;" src="../../assets/img/localtour/info2.png" alt="">
</span>
免费取消
</div>
<div class="icon">
<span>
<img style="width: 17px;height: 15px;margin-top:7px;" src="../../assets/img/localtour/info3.png" alt="">
</span>
退赔安心
</div>
<div class="icon">
<span>
<img style="width: 15px;height: 15px;margin-top: 7px;" src="../../assets/img/localtour/info4.png" alt="">
</span>
免费等候
</div>
</li>
</ul>
<!-- 选择条件 -->
<div class="choose_div">
<ul class="choose_ul">
<li v-if="tab==1">
<div class="tabLeft">
线路
</div>
<div class="tabRight spanMargin">
<span @click="SelectLineId(0)" :class="msg.lineId==0?'spanActive':''">不限</span>
<span @click="SelectLineId(item.lineId)" :class="msg.lineId==item.lineId?'spanActive':''" v-for="(item,index) in lineTeamList" :key="index">{{item.lineShortName}}</span>
</div>
</li>
<li v-if="tab==1 && lineList.length>0">
<div class="tabLeft">
系列
</div>
<div class="tabRight spanMargin">
<span @click="SelectLineTeamId(item.ltId)" :class="msg.lineTeamId==item.ltId?'spanActive':''" v-for="(item,index) in lineList" :key="index">{{item.ltName}}</span>
</div>
</li>
<li v-if="tab==2">
<div class="tabLeft">
国家
</div>
<div class="tabRight spanMargin">
<span @click="SelectCountry(0)" :class="msg.countryId==0?'spanActive':''">不限</span>
<span @click="SelectCountry(item.countryId)" :class="msg.countryId==item.countryId?'spanActive':''" v-for="(item,index) in countryList" :key="index">{{item.countryName}}</span>
</div>
</li>
<li v-if="tab==2&&cityList.length>0" :class="cityshow?'':'cityheight'">
<div class="tabLeft">
城市
</div>
<div class="tabRight spanMargin cityList">
<span @click="SelectCity(item.cityId)" :class="msg.cityId==item.cityId?'spanActive':''" v-for="(item,index) in cityList" :key="index">{{item.cityName}}</span>
<div @click="CityShow" :class="cityshow?'cityActive':''" class="liStatus">
展开<i class="iconfont icon-xiabiao rotate"></i>
</div>
</div>
</li>
<li class="dateLi">
<div class="tabLeft" style="line-height: 43px;">
游玩时间
</div>
<div class="tabRight spanMargin">
<el-date-picker style="margin-left:20px"
v-model="startDate"
type="date" :picker-options="pickerBeginDateBefore"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
<span class="pfR" style="margin:0 10px;color:#000000">-</span>
<el-date-picker
v-model="endDate" @change="ChangeDate"
type="date" :picker-options="pickerBeginDateAfter"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
</li>
<li>
<div class="tabLeft" style="line-height: 43px;">
价格范围
</div>
<div class="tabRight spanMargin PriceLi">
<span :class="priceActive==0?'spanActive':''" @click="SelectPrice(0,200,0)">￥200以下</span>
<span :class="priceActive==1?'spanActive':''" @click="SelectPrice(200,500,1)">￥200-￥500</span>
<span :class="priceActive==2?'spanActive':''" @click="SelectPrice(500,800,2)">￥500-￥800</span>
<span :class="priceActive==3?'spanActive':''" @click="SelectPrice(800,'',3)">￥800以上</span>
<span>自定义价格:
<el-input v-model="minPrice" placeholder="输入价格"></el-input>
<span class="pfR" style="margin:0 10px;color:#000000">-</span>
<el-input v-model="maxPrice" placeholder="输入价格"></el-input>
<el-button style="margin-left:15px;positive:relative;top:-1px" size="mini" @click="ChangePrice">确定</el-button>
</span>
</div>
</li>
<!-- <li class="line" v-if="tab==1">
<div class="tabLeft">
系列
</div>
<div class="tabRight spanMargin">
<span class="spanActive">亲子游</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span><span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<span>韩国</span>
<span>巴厘岛</span>
<div class="liStatus">
展开<i class="iconfont icon-xiabiao"></i>
</div>
</div>
</li> -->
<!-- <li v-if="tab==2">
<div class="tabLeft">
景点主题
</div>
<div class="tabRight spanMargin">
<span class="spanActive">日本</span>
<span>韩国</span>
<span>巴厘岛</span>
</div>
</li> -->
</ul>
</div>
<!-- 排序条件 -->
<div class="sortDiv basefix">
<div>
销量
<i :class="msg.orderBySales==1?'iconfontActive':''" @click="ChangeOrderBySales(1)" class="iconfont icon-jiang1"></i>
<i :class="msg.orderBySales==2?'iconfontActive':''" @click="ChangeOrderBySales(2)" class="iconfont icon-jiang"></i>
</div>
<div>
价格
<i :class="msg.orderByPrice==1?'iconfontActive':''" @click="ChangeOrderByPrice(1)" class="iconfont icon-jiang1"></i>
<i :class="msg.orderByPrice==2?'iconfontActive':''" @click="ChangeOrderByPrice(2)" class="iconfont icon-jiang"></i>
</div>
</div>
<!-- 数据 -->
<div style="margin-top:14px" v-loading="Loading">
<OnedayList :onelist="onelist" v-show="tab==1"></OnedayList>
<AdmissionTicket :ticketList="ticketList" v-show="tab==2"></AdmissionTicket>
</div>
<div style="text-align:right;width:950px;margin-top:15px">
<el-pagination
:page-size="msg.pageSize"
:current-page.sync="CurrentPage"
layout="total, prev, pager, next"
:total="totalCount"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import OnedayList from './OnedayList.vue';
import AdmissionTicket from './AdmissionTicket.vue';
export default {
data () {
return {
form:{},
tab:1,
priceActive:-1,
minPrice:"",
maxPrice:"",
startDate:"",
endDate:"",
totalCount:0,
CurrentPage:1,
msg:{
pageIndex:1,
pageSize:5,
lineId:0,
lineTeamId:0,
startDate:"",
endDate:"",
minPrice:-1,
maxPrice:-1,
companyId:localStorage.site,
cityId:localStorage.site,
priceOrderByField:1,
orderByPrice:0,
orderBySales:0,
searchKey:"",
startCityId:0,
countryId:0,
cityId:0,
},
pickerBeginDateBefore: {
disabledDate: time => {
let endTime = new Date(this.msg.endDate)
return endTime.getTime() < time.getTime()
}
},
pickerBeginDateAfter: {
disabledDate: time => {
let startTime = new Date(this.msg.startDate)
return startTime.getTime() >= time.getTime()
}
},
lineTeamList:[],
lineList:[],
onelist:[],
Loading:false,
// ticketMsg:{
// countryId:0,
// cityId:0,
// startDate:"",
// endDate:'',
// minPrice:-1,
// maxPrice:-1,
// orderByPrice
// },
countryList:[],
cityList:[],
cityshow:false,
ticketList:[],
}
},
mounted() {
components:{
OnedayList:OnedayList,
AdmissionTicket:AdmissionTicket,
},
created(){
this.GetLine();
if(this.$route.query.tab){
this.tab= this.$route.query.tab;
if(this.tab==1){
this.GetList();
}else{
this.GetTicketList();
}
}
},
mounted() {
this.CountryCity();
},
methods: {
handleCurrentChange(val){
this.msg.pageIndex=val;
if(this.tab==1){
this.GetList();
}
if(this.tab==2){
this.GetTicketList();
}
},
GetTicketList(){
this.Loading=true;
this.apiJavaPost('/api/b2b/scenic/getScenicTicketList',this.msg,res=>{
this.Loading=false;
if(res.data.resultCode==1){
this.ticketList=res.data.data.pageData;
this.totalCount=res.data.data.count;
}else{
this.Error(res.data.message);
}
},null)
},
SelectCity(cityId){
this.msg.cityId=cityId;
this.GetTicketList();
},
SelectCountry(countryId){
this.msg.countryId=countryId;
if(countryId==0){
this.cityList=[];
this.msg.cityId=0;
this.GetTicketList();
}else{
this.countryList.forEach(item=>{
if(countryId==item.countryId){
this.cityList=item.cityList;
}
})
}
},
CityShow(){
this.cityshow=!this.cityshow;
},
CountryCity(){
this.apiJavaPost('/api/b2b/scenic/getScenicCountryCityItem',{},res=>{
if(res.data.resultCode==1){
this.countryList=res.data.data;
// if(this.msg.countryId==0){
// this.msg.countryId=this.countryList[0].countryId;
// if(this.countryList.length>0){
// this.cityList=this.countryList[0].cityList;
// }
// }
}else{
this.Error(res.data.message);
}
},null)
},
ChangeDate(){
this.msg.startDate=this.startDate;
this.msg.endDate=this.endDate;
if(this.tab==1){
this.GetList();
}
if(this.tab==2){
this.GetTicketList();
}
},
ChangePrice(){
if(this.tab==1){
this.GetList();
}
if(this.tab==2){
this.GetTicketList();
}
},
GetList(){
if(this.minPrice==""){
this.msg.minPrice=-1;
}else{
this.msg.minPrice=this.minPrice;
}
if(this.maxPrice==""){
this.msg.maxPrice=-1;
}else{
this.msg.maxPrice=this.maxPrice;
}
if(!this.msg.startDate){
this.msg.startDate="";
}
if(!this.msg.endDate){
this.msg.endDate="";
}
this.Loading=true;
this.apiJavaPost('/api/b2b/dayTrip/getDayTripProductList',this.msg,res=>{
this.totalCount=res.data.data.count;
this.Loading=false;
if(res.data.resultCode==1){
this.onelist=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
ChangeOrderByPrice(num){
this.msg.orderByPrice=num;
this.msg.orderBySales=0;
if(this.tab==1){
this.GetList();
}
if(this.tab==2){
this.GetTicketList();
}
},
ChangeOrderBySales(num){
this.msg.orderBySales=num;
this.msg.orderByPrice=0;
if(this.tab==1){
this.GetList();
}
if(this.tab==2){
this.GetTicketList();
}
},
SelectPrice(num1,num2,index){
this.minPrice=num1;
this.maxPrice=num2;
this.priceActive=index;
if(this.tab==1){
this.GetList();
}
if(this.tab==2){
this.GetTicketList();
}
},
SelectLineTeamId(ltId){
this.msg.lineTeamId=ltId;
this.GetList();
},
SelectLineId(lineId){
this.msg.lineId=lineId;
if(lineId==0){
this.lineList=[];
this.msg.lineTeamId=0;
this.GetList();
}else{
this.lineTeamList.forEach(item=>{
if(lineId==item.lineId){
this.lineList=item.lineTeamList;
}
})
}
},
ChangeTab(num){
this.tab=num;
this.msg.pageIndex=1;
this.CurrentPage=1;
if(this.tab==1){
this.GetList();
}
if(this.tab==2){
this.GetTicketList();
}
},
// 系列
GetLine(){
this.apiJavaPost('/api/b2b/dayTrip/getLineItem',{},res=>{
if(res.data.resultCode==1){
this.lineTeamList=res.data.data;
if(this.$route.query.lineId){
this.msg.lineId= this.$route.query.lineId;
this.SelectLineId(this.msg.lineId);
}
if(this.$route.query.ltId){
this.msg.lineTeamId= this.$route.query.ltId
}
// if(this.msg.lineId==0){
// this.msg.lineId=this.lineTeamList[0].lineId;
// if(this.lineTeamList.length>0){
// this.lineList=this.lineTeamList[0].lineTeamList;
// }
// }
}else{
this.Error(res.data.message);
}
},null)
},
}
}
</script>
<style>
@import "../../assets/css/localtourhome.css";
</style>
src/components/LocalTour/Localtourhome.vue
View file @ 09727e2d
......@@ -8,38 +8,11 @@
<img style="width:390px;height:64px" src="../../assets/img/localtour/tourtop.png" alt="">
</div>
<ul class="citylist">
<li>
<p class="city_title pfR">日本</p>
<li v-if="index<3" v-for="(item,index) in lineTeamList" :key="item.lineName">
<p class="city_title pfR">{{item.lineShortName}}</p>
<div class="citylist_span">
<span>北海道</span>
<span>北海道</span>
<span>北海道</span>
<span>大阪</span>
<span>北海道</span>
<span>北海道</span>
<span>冲绳-石坦岛</span>
</div>
</li>
<li>
<p class="city_title pfR">巴厘岛</p>
<div class="citylist_span">
<span>罗威娜</span>
<span>北海道</span>
<span>乌鲁瓦图</span>
<span>大阪</span>
<span>北海道</span>
<span>北海道</span>
<span>冲绳-石坦岛</span>
</div>
</li>
<li>
<p class="city_title pfR">韩国</p>
<div class="citylist_span">
<span>釜山</span>
<span>北海道</span>
<span>乌鲁瓦图</span>
<span>首尔</span>
<span>济州岛</span>
<span v-if="index<7" @click="goUrl(item,line)" v-for="(line,index) in item.lineTeamList" :key="index" >{{line.ltName}}</span>
</div>
</li>
</ul>
......@@ -91,110 +64,34 @@
</div>
<div class="outone_top_right">
<div class="content">
<span class="outone_active">最新</span>
<span>日本</span>
<span>韩国</span>
<span>巴厘岛</span>
<a>更多一日游</a>
<span @click="ChangeLineId(0)" :class="abroadMsg.lineId==0?'outone_active':''">最新</span>
<span @click="ChangeLineId(item.lineId)" :class="abroadMsg.lineId==item.lineId?'outone_active':''" v-for="item in lineTeamList" :key="item.lineName">{{item.lineShortName}}</span>
<a @click="GoMore(1)">更多一日游</a>
</div>
</div>
</div>
<div class="basefix dayContent" style="margin-top:17px">
<div class="dayConDiv1">
<div>
<img src="../../assets/img/activy.jpg" alt="">
<span class="daydes">日本东京著名景点一日游>东京往返 中文导游 一人发团 游浅草寺台场海滨公园 坐东京游轮 赏东京塔</span>
<span class="price">￥<span class="pfR font18">1980</span>起</span>
</div>
<div>
<img src="../../assets/img/activy.jpg" alt="">
<span class="daydes">日本东京著名景点一日游>东京往返 中文导游 一人发团 游浅草寺台场海滨公园 坐东京游轮 赏东京塔</span>
<span class="price">￥<span class="pfR font18">1980</span>起</span>
<div @click="goOneDayDetail(item)" v-if="index<2" v-for="(item,index) in abroadList" :key="index+300">
<img v-if="index==0" :key="img.url" v-for="(img,index) in item.imgCover" :src="img.url" alt="">
<span class="daydes">{{item.lineName}}</span>
<span class="price">￥<span class="pfR font18">{{item.b2BPrice}}</span>起</span>
</div>
</div>
<div class="dayConDiv2">
<ul>
<li>
<div class="imgDiv">
<img src="../../assets/img/activy.jpg" alt="">
<span class="country">日本</span>
<p class="price">
<span>￥<span class="font18 pfR">1980</span>起</span>
</p>
</div>
<div class="conDes">
<span>金阁寺+清水寺+奈良公园+岚山+伏见稻荷大社+祇园一日游【中文司导，酒店接送】</span>
</div>
</li>
<li>
<li @click="goOneDayDetail(item)" v-if="index>1" v-for="(item,index) in abroadList" :key="index+200">
<div class="imgDiv">
<img src="../../assets/img/activy.jpg" alt="">
<span class="country">日本</span>
<img v-if="index==0" :key="img.url" v-for="(img,index) in item.imgCover" :src="img.url" alt="">
<span class="country">{{item.lineShortName}}</span>
<p class="price">
<span>￥<span class="font18 pfR">1980</span>起</span>
<span>￥<span class="font18 pfR">{{item.b2BPrice}}</span>起</span>
</p>
</div>
<div class="conDes">
<span>金阁寺+清水寺+奈良公园+岚山+伏见稻荷大社+祇园一日游【中文司导，酒店接送】</span>
</div>
</li>
<li>
<div class="imgDiv">
<img src="../../assets/img/activy.jpg" alt="">
<span class="country">日本</span>
<p class="price">
<span>￥<span class="font18 pfR">1980</span>起</span>
</p>
</div>
<div class="conDes">
<span>金阁寺+清水寺+奈良公园+岚山+伏见稻荷大社+祇园一日游【中文司导，酒店接送】</span>
</div>
</li>
<li>
<div class="imgDiv">
<img src="../../assets/img/activy.jpg" alt="">
<span class="country">日本</span>
<p class="price">
<span>￥<span class="font18 pfR">1980</span>起</span>
</p>
</div>
<div class="conDes">
<span>金阁寺+清水寺+奈良公园+岚山+伏见稻荷大社+祇园一日游【中文司导，酒店接送】</span>
</div>
</li>
<li>
<div class="imgDiv">
<img src="../../assets/img/activy.jpg" alt="">
<span class="country">日本</span>
<p class="price">
<span>￥<span class="font18 pfR">1980</span>起</span>
</p>
</div>
<div class="conDes">
<span>金阁寺+清水寺+奈良公园+岚山+伏见稻荷大社+祇园一日游【中文司导，酒店接送】</span>
</div>
</li>
<li>
<div class="imgDiv">
<img src="../../assets/img/activy.jpg" alt="">
<span class="country">日本</span>
<p class="price">
<span>￥<span class="font18 pfR">1980</span>起</span>
</p>
</div>
<div class="conDes">
<span>金阁寺+清水寺+奈良公园+岚山+伏见稻荷大社+祇园一日游【中文司导，酒店接送】</span>
<span>{{item.title}}</span>
</div>
</li>
......@@ -206,32 +103,11 @@
<span style="font-size:14px;position: relative;top:-3px;left:5px">/ / / / / / / / / </span>
</div>
<ul class="hottour_ul">
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="hotcontent">
<span class="textHidden font12">日本箱根海盗船-空中缆车-御殿场...特莱斯1日游购物储值...</span>
<p class="font12" style="color:#FDAC11;text-align:right;padding-top:4px;padding-right:6px">￥<span class="pfR font14">128</span>起</p>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="hotcontent">
<span class="textHidden font12">日本箱根海盗船-空中缆车-御殿场...特莱斯1日游购物储值...</span>
<p class="font12" style="color:#FDAC11;text-align:right;padding-top:4px;padding-right:6px">￥<span class="pfR font14">128</span>起</p>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="hotcontent">
<span class="textHidden font12">日本箱根海盗船-空中缆车-御殿场...特莱斯1日游购物储值...</span>
<p class="font12" style="color:#FDAC11;text-align:right;padding-top:4px;padding-right:6px">￥<span class="pfR font14">128</span>起</p>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<li @click="goOneDayDetail(item)" v-for="(item,index) in abroadhotList" :key="index+100">
<img v-if="index==0" :key="img.url" v-for="(img,index) in item.imgCover" :src="img.url" alt="">
<div class="hotcontent">
<span class="textHidden font12">日本箱根海盗船-空中缆车-御殿场...特莱斯1日游购物储值...</span>
<p class="font12" style="color:#FDAC11;text-align:right;padding-top:4px;padding-right:6px">￥<span class="pfR font14">128</span>起</p>
<span class="textHidden font12">{{item.title}}</span>
<p class="font12" style="color:#FDAC11;text-align:right;padding-top:4px;padding-right:6px">￥<span class="pfR font14">{{item.b2BPrice}}</span>起</p>
</div>
</li>
</ul>
......@@ -247,11 +123,10 @@
</div>
<div class="outone_top_right">
<div class="content">
<span class="outone_active">亲子</span>
<span>日本</span>
<span>韩国</span>
<span>巴厘岛</span>
<a>更多门票</a>
<span @click="SelectCountry(item.countryId)" :class="ticketmsg.countryId==item.countryId?'outone_active':''" v-for="item in countryticketList" :key="item.countryId">
{{item.countryName}}</span>
<a @click="GoMore(2)">更多门票</a>
</div>
</div>
</div>
......@@ -266,108 +141,16 @@
</div>
</div>
<ul class="ticketRight basefix">
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="title">
<li @click="GoTicket(item)" v-for="item in ticketList" :key="item.id">
<img :src="item.coverImgs[0]" alt="">
<!-- <div class="title">
<img src="../../assets/img/localtour/ticket1.png" alt="">
<!-- <img src="../../assets/img/localtour/ticket2.png" alt=""> -->
<p style="margin-top:3px;">电影</p>
<p style="margin-top:18px;">6月12日~</p>
</div>
<div class="bottom">
<span>东京迪士尼乐园/迪士士尼乐园/迪士</span>
<span class="font12">¥<a class="font14">568</a>起/人</span>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="title">
<img src="../../assets/img/localtour/ticket1.png" alt="">
<!-- <img src="../../assets/img/localtour/ticket2.png" alt=""> -->
<p style="margin-top:3px;">电影</p>
<p style="margin-top:18px;">6月12日~</p>
</div>
<div class="bottom">
<span>东京迪士尼乐园/迪士士尼乐园/迪士</span>
<span class="font12">¥<a class="font14">568</a>起/人</span>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="title">
<img src="../../assets/img/localtour/ticket1.png" alt="">
<!-- <img src="../../assets/img/localtour/ticket2.png" alt=""> -->
<p style="margin-top:3px;">电影</p>
<p style="margin-top:18px;">6月12日~</p>
</div>
<div class="bottom">
<span>东京迪士尼乐园/迪士士尼乐园/迪士</span>
<span class="font12">¥<a class="font14">568</a>起/人</span>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="title">
<img src="../../assets/img/localtour/ticket1.png" alt="">
<!-- <img src="../../assets/img/localtour/ticket2.png" alt=""> -->
<p style="margin-top:3px;">电影</p>
<p style="margin-top:18px;">6月12日~</p>
</div>
<div class="bottom">
<span>东京迪士尼乐园/迪士士尼乐园/迪士</span>
<span class="font12">¥<a class="font14">568</a>起/人</span>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="title">
<img src="../../assets/img/localtour/ticket1.png" alt="">
<!-- <img src="../../assets/img/localtour/ticket2.png" alt=""> -->
<p style="margin-top:3px;">电影</p>
<p style="margin-top:18px;">6月12日~</p>
</div>
<div class="bottom">
<span>东京迪士尼乐园/迪士士尼乐园/迪士</span>
<span class="font12">¥<a class="font14">568</a>起/人</span>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="title">
<img src="../../assets/img/localtour/ticket1.png" alt="">
<!-- <img src="../../assets/img/localtour/ticket2.png" alt=""> -->
<p style="margin-top:3px;">电影</p>
<p style="margin-top:18px;">6月12日~</p>
</div>
<div class="bottom">
<span>东京迪士尼乐园/迪士士尼乐园/迪士</span>
<span class="font12">¥<a class="font14">568</a>起/人</span>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="title">
<img src="../../assets/img/localtour/ticket1.png" alt="">
<!-- <img src="../../assets/img/localtour/ticket2.png" alt=""> -->
<p style="margin-top:3px;">电影</p>
<p style="margin-top:18px;">6月12日~</p>
</div>
</div> -->
<div class="bottom">
<span>东京迪士尼乐园/迪士士尼乐园/迪士</span>
<span class="font12">¥<a class="font14">568</a>起/人</span>
</div>
</li>
<li>
<img src="../../assets/img/activy.jpg" alt="">
<div class="title">
<img src="../../assets/img/localtour/ticket1.png" alt="">
<!-- <img src="../../assets/img/localtour/ticket2.png" alt=""> -->
<p style="margin-top:3px;">电影</p>
<p style="margin-top:18px;">6月12日~</p>
</div>
<div class="bottom">
<span>东京迪士尼乐园/迪士士尼乐园/迪士</span>
<span class="font12">¥<a class="font14">568</a>起/人</span>
<span>{{item.name}}</span>
<span class="font12 textHidden1">¥<a class="font14">{{item.b2bPrice | NoDesnum}}</a>起/人</span>
</div>
</li>
</ul>
......@@ -510,13 +293,122 @@ export default {
slideType:5,
platformType:1
},
lineTeamList:[],
abroadMsg:{
pageIndex:1,
pageSize:8,
lineId:0,
companyId:localStorage.site,
},
abroadhotMsg:{
pageIndex:1,
pageSize:4,
companyId:localStorage.site,
},
abroadList:[],
abroadhotList:[],
countryticketList:[],
ticketmsg:{
pageIndex:1,
pageSize:8,
countryId:-1,
},
ticketList:[],
}
},
mounted() {
this.getSlideList();
this.GetLine();
this.GetAbroad();
this.GetHotAbroad();
this.GetCuntryTicket();
},
methods: {
goOneDayDetail(item){
let path = 'OneDayDetailTwo';
path=`${path}/${encodeURIComponent(item.idDes)}/${item.tcid}`;
this.$router.push({ path })
},
GoTicket(item){
this.$router.push({ path:'/TicketDetails',
query:{idDes:encodeURIComponent(item.idDes)} })
},
GoMore(num){
this.$router.push({ path:'/LocalTourList',
query:{tab:num} })
},
SelectCountry(countryId){
this.ticketmsg.countryId=countryId;
this.GetTicketList();
},
// 门票列表
GetTicketList(){
this.apiJavaPost('/api/b2b/scenic/getHomeTicketList',this.ticketmsg,res=>{
if(res.data.resultCode==1){
this.ticketList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
// 门票国家
GetCuntryTicket(){
this.apiJavaPost('/api/b2b/scenic/getScenicCountryItem',{},res=>{
if(res.data.resultCode==1){
this.countryticketList=res.data.data;
if(this.countryticketList.length>0){
this.ticketmsg.countryId= this.countryticketList[0].countryId;
this.GetTicketList();
}
}else{
this.Error(res.data.message);
}
},null)
},
goUrl(item,line){
this.$router.push({ path:'/LocalTourList',
query:{lineId:item.lineId,ltId:line.ltId} })
},
ChangeLineId(ltId){
this.abroadMsg.lineId=ltId;
this.GetAbroad();
this.GetHotAbroad();
},
// 获取境外一日游热门产品
GetHotAbroad(){
this.apiJavaPost('/api/b2b/dayTrip/getHomeHotProduct',this.abroadhotMsg,res=>{
if(res.data.resultCode==1){
this.abroadhotList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
// 获取境外一日游推荐产品
GetAbroad(){
this.apiJavaPost('/api/b2b/dayTrip/getHomeRecommendProduct',this.abroadMsg,res=>{
if(res.data.resultCode==1){
this.abroadList=res.data.data.pageData;
// console.log("this.abroadList",this.abroadList);
}else{
this.Error(res.data.message);
}
},null)
},
// 系列
GetLine(){
this.apiJavaPost('/api/b2b/dayTrip/getLineItem',{},res=>{
if(res.data.resultCode==1){
this.lineTeamList=res.data.data;
// console.log("this.lineTeamList",this.lineTeamList);
}else{
this.Error(res.data.message);
}
},null)
},
getSlideList(){
this.apiJavaPost(
"/api/b2b/free/getSlideList",
......
src/components/LocalTour/OnedayList.vue 0 → 100644
View file @ 09727e2d
<template>
<div class="OnedayList">
<ul class="oneList">
<li @click="goOneDayDetail(item)" v-for="(item,index) in dataList" :key="index+200">
<div>
<img style="width:199px;height:148px;" :src="item.imgCover[0].url" alt="">
</div>
<div class="secondDiv">
<p style="font-size:16px;color:#2A5532">{{item.title}}</p>
<p class="taglist" style="margin-top:18px;">
<!-- <span>明日可订</span>
<span>明日可订</span> -->
</p>
<p style="margin-top:14px;" class="font12">
<i class="iconfont icon-bb-chufadi"></i>
<span>出发地：{{item.startCityName}}</span>
</p>
<p style="margin-top:14px;" class="font12 textHidden1">
<i class="iconfont icon-shijian-copy"></i>
<span>团期：
<span v-for="(start,index) in item.startDates" :key="index">{{start | MD}} </span>
</span>
</p>
</div>
<div class="threeDiv">
<p><span style="color:#FDAC11;font-size:22px">￥{{item.b2BPrice | NoDesnum}}</span>起</p>
<p style="margin-top:80px"><span class="ckxq" @click="GetDes(item)">查看详情</span></p>
</div>
</li>
<div v-if="dataList.length==0" style="padding:15px 0;text-align:center">
<div class="empty-data"><i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
</div>
</ul>
<ul class="hottour_ul">
<p class="pfR font14" style="margin-bottom:8px">历史浏览</p>
<li @click="goOneDayDetail(item)" v-for="(item,index) in Historylist" :key="index+2000">
<img :src="item.imgCover[0].url" alt="">
<div class="hotcontent">
<span class="textHidden font12">{{item.title}}</span>
<p class="font12" style="color:#FDAC11;text-align:right;padding-top:4px;padding-right:6px">￥<span class="pfR font14">{{item.b2BPrice}}</span>起</p>
</div>
</li>
<img style="width:228px;height:100px;margin-top:25px" src="../../assets/img/localtour/guangg1.png" alt="">
</ul>
</div>
</template>
<script>
export default {
props:["onelist"],
data () {
return {
dataList:[],
Historylist:[],
}
},
mounted() {
let arr=[];
if(localStorage.HistoryBrowse && localStorage.HistoryBrowse!=undefined){
arr=JSON.parse(localStorage.HistoryBrowse);
}
this.Historylist=arr;
},
methods: {
goOneDayDetail(item){
let path = 'OneDayDetailTwo';
path=`${path}/${encodeURIComponent(item.idDes)}/${item.tcid}`;
this.$router.push({ path })
},
GetDes(item){
if(this.Historylist.length>4 || this.Historylist.length==4){
this.Historylist.pop();
}
this.Historylist.forEach(his=>{
if(his.id==item.id){
this.Historylist.splice(his,1);
}
})
this.Historylist.unshift(item);
localStorage.HistoryBrowse=JSON.stringify(this.Historylist);
},
},
watch:{
onelist:{
handler:function(val,oldvalue){
this.dataList=val;
this.dataList.forEach(item=>{
if(item.startDates){
item.startDates= item.startDates.split(",")
}
})
}
}
}
}
</script>
<style scoped>
.OnedayList .textHidden{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.OnedayList .hotcontent{
padding-left: 79px;
box-sizing: border-box;
padding-top:12px;
}
.OnedayList{
overflow: auto;
}
.OnedayList .hottour_ul li img{
width:60px;
height:60px;
position: absolute;
top: 8px;
left: 10px;
}
.OnedayList .hottour_ul li{
position: relative;
margin-bottom:14px;
cursor: pointer;
}
.OnedayList .hottour_ul{
width: 228px;
float: right;
}
.OnedayList>ul{
float: left;
}
.OnedayList .pfR{
font-family: "PingFangR";
}
.OnedayList .threeDiv{
float: right!important;
text-align: right;
font-size:12px
}
.OnedayList .threeDiv .ckxq{
display: inline-block;
width:80px;
height:28px;
background:rgba(242,242,242,1);
text-align: center;
line-height: 28px;
cursor: pointer;
}
.OnedayList .taglist span{
background:rgba(76,185,96,0.2);
color:#4E9F5D;
font-size: 12px;
margin-right:10px;
padding:4px 10px;
}
.OnedayList .oneList .font12{
font-size: 12px;
}
.OnedayList .oneList li .secondDiv{
margin-left:13px;
width: 535px;
}
.OnedayList .oneList li .secondDiv .iconfont{
color:#B5B5B5;
font-size: 12px;
}
.OnedayList .oneList li{
color:#333333;
height:170px;
border:1px solid rgba(229,229,229,1);
padding: 11px 28px 11px 11px;
box-sizing: border-box;
}
.OnedayList .oneList{
width:950px;
}
.OnedayList .oneList li>div{
float: left;
}
/* .OnedayList .basefix:after {
clear: both;
content: '.';
display: block;
height: 0;
overflow: hidden;
} */
</style>
src/components/LocalTour/TicketDetails.vue 0 → 100644
View file @ 09727e2d
<template>
<div class="TicketDetails commonF">
<div class="w1200">
<!-- 头部 -->
<div class="TicketHead">
<div class="TicketHeadLeft">
<img style="width:499px;height:281px;display:inline-block" :src="imgHoverSrc" alt="">
<div class="block">
<i @click="ImgBefore" :class="ImgIndex==0?'green':''" class="ChangeImgTab" style="margin-left:0">
<span class="iconfont icon-xiangzuo"></span>
</i>
<div class="imgUl">
<ul ref="Changeimg">
<li v-if="index<10" @mouseover="LiHover(item,index)" :class="imgHover==index?'liActive':''" v-for="(item,index) in dataDes.coverImgs" :key="index" >
<img :src="item" :onerror="defaultImg" alt="">
</li>
</ul>
</div>
<i @click="ImgNext" :class="ImgIndex==1 || next<=1 ?'green':''" class="ChangeImgTab" style="margin-right:0;">
<span class="iconfont icon-arrowright1"></span>
</i>
</div>
</div>
<div class="TicketHeadRight">
<p class="pfR" style="color:#2A5532;font-size:20px;">{{dataDes.name}}</p>
<!-- <p style="margin-top:20px" class="ticketSpan">票类包括：<span>大小同价</span><span>大小价</span></p> -->
<div class="price">
￥{{dataDes.minPrice | NoDesnum}}~￥{{dataDes.maxPrice | NoDesnum}}
</div>
<p>
<span style="color:#666666">景点地址：</span>
{{dataDes.address}}
</p>
<p style="margin-top:15px;">
<span style="color:#666666">开放时间：</span>
<span class="text">{{dataDes.openingHours}}</span>
</p>
<p style="margin-top:15px;">
<span style="color:#666666">提前预定天数：</span>
<span>{{dataDes.dieLine}}天</span>
</p>
</div>
</div>
<!-- 详情 -->
<div :class="searchBarFixed?'searchFixed':''">
<div class="TicketTab" ref="navs">
<div class="nav_wrap">
<div class="Tablist">
<div class="tab" :class="crtnav=='mpxx'?'tabActive':''" @click="goScroll('mpxx')" style="border-left:1px solid #dcdcdc">门票信息</div>
<div @click="goScroll('ydxz')" :class="crtnav=='ydxz'?'tabActive':''" class="tab">预定须知</div>
<div @click="goScroll('jdjs')" :class="crtnav=='jdjs'?'tabActive':''" class="tab">景点简介</div>
<div @click="goScroll('jtzn')" :class="crtnav=='jtzn'?'tabActive':''" class="tab">交通指南</div>
</div>
</div>
</div>
</div>
<!-- 门票信息 -->
<div id="mpxx" class="TicketDes">
<div style="padding-top:25px">
<p class="title">
<img style="width:16px;height:16px;" src="../../assets/img/localtour/ticket.png" alt="">
<span style="margin-left:15px">{{dataDes.name}}</span>
</p>
<ul class="commonUl">
<li v-for="item in dataDes.ticketList" :key="item.id">
<el-row>
<el-col :span="19">
{{item.ticketDesc}}
<span class="pfR">({{item.ticketName}})</span>
<!-- <span>(18-64周岁)</span> -->
<!-- <span class="colorG">可订今日</span>
<span class="colorG">可订今日</span> -->
</el-col>
<el-col class="pfR" :span="3" style="color:#FDAC11">￥<span class="font22">{{item.b2bPrice | NoDesnum}}</span></el-col>
<el-col :span="2">
<span @click="YdUrl(dataDes,item)" class="ydBtn">预定</span>
</el-col>
</el-row>
</li>
</ul>
</div>
<!-- <div style="padding-top:25px">
<p class="title">
<img style="width:16px;height:20px;" src="../../assets/img/localtour/jdian.png" alt="">
<span style="margin-left:15px">周边景点推荐</span>
</p>
<p style="margin-top:20px">
<span style="margin-left:12px;padding:8px 16px;color:#fff;background:#4CB960">大江户温泉馆</span>
</p>
<ul class="commonUl">
<li>
<el-row>
<el-col :span="19">
日本东京迪士尼一日游（海洋乐园）
<span class="pfR">成人票</span>
<span>(18-64周岁)</span>
<span class="colorG">可订今日</span>
<span class="colorG">可订今日</span>
</el-col>
<el-col class="pfR" :span="3" style="color:#FDAC11">￥<span class="font22">289</span></el-col>
<el-col :span="2">
<span class="ydBtn">预定</span>
</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="19">
日本东京迪士尼一日游（海洋乐园）
<span class="pfR">儿童票</span>
<span>(6-12周岁)</span>
<span class="colorG">可订今日</span>
<span class="colorG">可订今日</span>
</el-col>
<el-col class="pfR" :span="3" style="color:#FDAC11">￥<span class="font22">289</span></el-col>
<el-col :span="2">
<span class="ydBtn">预定</span>
</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="19">
日本东京迪士尼一日游（海洋乐园）
<span class="pfR">学生票</span>
<span>(18-64周岁)</span>
<span class="colorG">可订今日</span>
<span class="colorG">可订今日</span>
</el-col>
<el-col class="pfR" :span="3" style="color:#FDAC11">￥<span class="font22">289</span></el-col>
<el-col :span="2">
<span class="ydBtn">预定</span>
</el-col>
</el-row>
</li>
</ul>
</div> -->
</div>
<div class="ydxz">
<!-- 预定须知 -->
<div id="ydxz">
<p class="ydTitle"><span style="font-size:20px" class="iconfont icon-tongzhi-lingdang-copy"></span> 预定须知</p>
<p class="explain">预订说明</p>
<div class="explainContent">
{{dataDes.bookingInfo}}
</div>
<p class="explain">温馨提示</p>
<div class="explainContent">
{{dataDes.about}}
</div>
</div>
<!-- 景点介绍 -->
<div id="jdjs">
<p style="margin-top:20px" class="ydTitle"><span style="font-size:20px" class="iconfont icon-tongzhi-lingdang-copy"></span> 景点介绍</p>
<!-- <div style="margin-top:40px">
<p class="otherExplain">特别说明</p>
由于近期东京迪士尼景区游客人数众多，如遇入园高峰期景区，景区限流无法入园的情况，请您在票面显示的有效期内择日再去，票券售出不退不改。建议于上午10点（日本时间）前入园，以减少遇到限流的几率。如您购买电子票，请务必提前将电子票打印出来，再至园区扫码入园，如不打印则无法入园。请注意！！！！！！
</div> -->
<div style="margin-top:40px">
<p class="otherExplain">园区介绍</p>
{{dataDes.feature}}
</div>
</div>
</div>
<!-- 交通指南 -->
<div id="jtzn" class="ydxz jtzn" style="margin-top:130px">
<p class="ydTitle"><span style="font-size:20px" class="iconfont icon-tongzhi-lingdang-copy"></span>
交通指南</p>
<div>
</div>
<p class="pfR font14" style="color:#333333;margin:25px 0">交通信息</p>
<div>
{{dataDes.trafficInfo}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
searchBarFixed:false,
scrollobj:null,
navs: [ "mpxx", "ydxz", "jdjs", "jtzn"],
crtnav: "mpxx",
idDes:0,
dataDes:{},
defaultImg: 'this.src="' + require('assets/img/default.png') + '"',
imgHover:0,
imgHoverSrc:'',
ImgIndex:0,
next:0,
}
},
mounted() {
this.idDes=decodeURIComponent(this.$route.query.idDes);
this.scrollobj = document.getElementsByClassName("el-scrollbar__wrap")[0];
// this.scrollobj.addEventListener("scroll", this.handleScroll);
this.GetDes();
},
methods: {
YdUrl(dataDes,item){
sessionStorage.dataDes=JSON.stringify(dataDes);
sessionStorage.Ticketinfo=JSON.stringify(item);
this.$router.push({ path:'/Appointment',
query:{idDes:encodeURIComponent(item.idDes)} })
},
LiHover(item,index){
this.imgHover=index;
this.imgHoverSrc=item;
},
GetDes(){
this.apiJavaPost('/api/b2b/scenic/getTicketCouponsInfo',{idDes:this.idDes},res=>{
if(res.data.resultCode==1){
this.dataDes=res.data.data;
if(this.dataDes.coverImgs.length>0){
this.imgHoverSrc=this.dataDes.coverImgs[0];
this.next=Math.ceil(this.dataDes.coverImgs.length / 5);
}
}else{
this.Error(res.data.message);
}
},null)
},
GoUrl(num){
this.$router.push({ path:'/LocalTourList',
query:{tab:num} })
},
ImgBefore(){
this.$refs.Changeimg.style.left="0px";
this.ImgIndex=0;
},
ImgNext(){
this.$refs.Changeimg.style.left="-440px";
this.ImgIndex=1;
},
goScroll(id) {
this.scrollobj.scrollTop =
document.getElementById(id).offsetTop + screen.availHeight - 1100;
},
handleScroll() {
try {
if (this.scrollobj.scrollTop > this.$refs.navs.offsetTop) {
this.searchBarFixed = true;
} else {
this.searchBarFixed = false;
}
let current = "";
this.navs.forEach(x => {
let t = document.getElementById(x).offsetTop;
if (this.scrollobj.scrollTop-100>=t) {
current = x;
}
// if (t <= this.scrollobj.scrollTop-300) {
// current = x;
// }
});
this.crtnav = current;
} catch (error) {}
},
}
}
</script>
<style scoped>
@import "../../assets/css/localtourhome.css";
</style>
src/components/Ticket/TicketList.vue
View file @ 09727e2d
......@@ -114,7 +114,7 @@
<i class="iconfont icon-arrowright1"></i>
</div>
<div class="font_12" style="margin-top:20px;color:#FF680B;width:6%;position:relative">
<el-popover
<el-popover popper-class="calendarPopover"
placement="bottom"
trigger="click">
<div ref="otherdate" class="otherdate">
......@@ -561,6 +561,7 @@ export default {
"/api/dmc/airticket/getB2BAirticketForMonthMinPrice",
this.other_date,
res => {
let list = res.data.data;
this.tomonth = moment(list[0].timeStr).format("YYYY-MM");
this.creatCalendar(list);
......@@ -697,6 +698,7 @@ export default {
};
monthArray.push(dateDict);
}
console.log("monthArray",monthArray)
//数组去重,获取有几个月
var hash = {};
monthArray = monthArray.reduce(function(item, next) {
......@@ -892,7 +894,7 @@ li {
border-radius: 50%;
cursor: pointer;
}
.cilcle {
.TicketList .cilcle {
width: 30px;
height: 30px;
line-height: 30px;
......@@ -905,8 +907,11 @@ li {
.TicketList .el-popover {
border: none;
}
.TicketList .calendarPopover{
padding:0;
}
.otherdate {
width: 500px;
width: 406px;
position: absolute;
right: 0;
z-index: 5;
......@@ -916,7 +921,7 @@ li {
box-sizing: border-box;
color: #333;
}
.active_data {
.TicketList .active_data {
margin: 0;
border-top: 6px solid #ee4454;
box-shadow: 0px 2px 6px 3px rgba(149, 149, 149, 0.23);
......
src/components/mall/LocalTourCalendar.vue 0 → 100644
View file @ 09727e2d
<style>
.LocalTourCalendar .calendar{
width: 100%;
overflow: hidden;
table-layout: fixed;
}
.LocalTourCalendar .calendar th{
height: 20px;
padding: 10px 0;
line-height: 20px;
color: #999999;
text-align: center;
font-size: 14px;
}
.LocalTourCalendar .dayList{
position: relative;
float: left;
width: 58px;
height: 44px;
cursor: pointer;
border: 1px solid transparent;
background-color: #F5F5F5;
font-size: 12px;
border-bottom:1px solid #E1E1E1;
border-right:1px solid #E1E1E1;
box-sizing: border-box;
}
.LocalTourCalendar .dayList:nth-child(7n){
border-right: none;
}
.LocalTourCalendar .dayList.noPrice{
cursor: default;
color: #ccc;
background-color: #FFFFFF;
}
.LocalTourCalendar .dayList.selectDay{
border: 1px solid #ff4646;
background-color: #f9f7f6;
}
.LocalTourCalendar .dayList.yesPrice{
font-weight: bold;
font-family: 'PingFangR';
}
.LocalTourCalendar .dayList p{
float: initial;
width: 100%;
text-align: left;
padding-left:5px;
margin: 2px 0;
box-sizing: border-box;
}
.LocalTourCalendar .dayList p.price{
float: initial;
width: 100%;
text-align: right;
padding:0;
margin: 2px 0;
color: #FF5A00;
font-size: 12px;
padding-right: 5px;
box-sizing: border-box;
}
.LocalTourCalendar .monthDayList{
overflow: auto;
border-top:1px solid #E1E1E1;
}
.LocalTourCalendar .dayList.yesPrice:hover{
background: #FF680B;
color:#fff!important;
}
.LocalTourCalendar .dayList.yesPrice:hover .price{
color:#fff!important;
}
</style>
<template>
<div class="LocalTourCalendar" id='LocalTourCalendar'>
<table class="calendar" cellspacing=0 cellpadding=0>
<thead>
<th style="color:#666666;font-size:12px;" v-for="(i,index) in week" :key="index">{{i}}</th>
</thead>
</table>
<div class="monthDayList">
<div v-for="(item,index) in daysData" class="dayList" :key="index" @click="item.price?selectDate(item):''" :class="{selectDay:isSelect == index,noPrice:!item.price,yesPrice:item.price}">
<p>{{item.day}}</p>
<!-- -->
<p class="price" v-if="item.price!='0.00' && item.price">￥{{item.price | priceFormat}}</p>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import bus from '../../plugins/event-bus'
export default {
props:{
dateData: Array,
day:String,
},
data(){
return{
week:['周日','周一','周二','周三','周四','周五','周六'],
// priceData:this.dateData[0],
priceData:[],
currentDay: this.day,
DaysInMonth:[],
daysData:[],
isSelect:-1,
mydate:-1,
}
},mounted(){
},created(){
// this.getYearMonthDay();
},methods:{
selectDate(item){
if(item.price=="0.00"){
return;
}else{
this.$emit('SelectChild',item);
}
},
getYearMonthDay(list){
this.priceData=list[0];
let day=this.day;
let currentYear = day.substring(0,4); //当前年份
let currentMonth =day.substring(5,7); //当前月份
// console.log("currentMonth",currentMonth)
let date = new Date();
let strDate = date.getDate();
let strMonth = (date.getMonth()+1).toString();
// alert(typeof strMonth)
//判断是否是闰年
if (this.isleapYears(currentYear)) {
this.$data.DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}else{
this.$data.DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}
let monthDay = this.$data.DaysInMonth[Number(currentMonth)-1];//当前月的天数
let daysData = [];
//给数据源赋值
for (let i = 0 ;i < Number(monthDay) ;i++) {
var priceDict = {'day':String(i+1),'price':0,'dis':false,date_str:''};
daysData.push(priceDict);
}
this.daysData = daysData;
var currentDay = `${currentYear}-${currentMonth}-01`;
var dateObject = new Date(currentDay);
var firstDay = dateObject.getDay();//得到每个月1号是周几
// for (let i in this.priceData) {
let today=moment().format("YYYY-MM-DD");
for (let i=0;i<this.priceData.length;i++) {
let price = this.priceData[i];
let dateStr=moment(price.dateStr).format("YYYY-MM-DD");
var dayIndex = price.dateStr.substring(price.dateStr.length-2,price.dateStr.length);
var dayDict = daysData[Number(dayIndex)-1];
if (moment(dateStr).isBefore(today)){
dayDict.price='';
}else{
dayDict.price = price.price;
}
// dayDict.price = price.price;
dayDict.date_str=price.dateStr;
dayDict.couponsId=price.couponsId;
dayDict.priceId=price.priceId;
dayDict.ticketId=price.ticketId;
if(dayIndex<strDate&&strMonth==currentMonth){
dayDict.price='';
}
}
if (firstDay > 0) {
var firstDayData = [];
for (var i=0; i< firstDay;i++) {
var dict = {'day':' ',price:'','dis':true};
firstDayData.push(dict);
}
this.daysData = firstDayData.concat(daysData);
}else{
this.daysData = daysData;
}
},
isleapYears(year){
if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0)) {
return true;
} else{
return false;
}
},
}
}
</script>
src/components/mall/OneDayDetailTwo.vue
View file @ 09727e2d
......@@ -794,6 +794,7 @@ export default {
let data = (r.data.data);
this.sonData = data;
this.dayList = data.dayList;
// console.log("this.dayList",this.dayList);
this.feature = data.feature;
this.isDirect = data.isDirect;
if (data.videoStr) {
......@@ -826,6 +827,7 @@ export default {
this.clickDate = data.currentPriceInfo && data.currentPriceInfo.startDate ? data.currentPriceInfo.startDate : '';
this.FlightList = data.currentPriceInfo && data.currentPriceInfo.priceFlight ? data.currentPriceInfo.priceFlight : '';
this.dataList = data;
console.log("dataList",this.dataList)
this.toDayObj = this.priceList && this.priceList.length>0?this.priceList[0]:null;
this.imgCover = JSON.parse(this.dataList.imgCover);
this.showType = this.feature.featureType;
......
src/components/mall/newcalendar.vue
View file @ 09727e2d
......@@ -17,7 +17,7 @@
.newcalendar-box .dayList{
position: relative;
float: left;
width: 13.88%;
width: 13.7%;
height: 57px;
cursor: pointer;
border: 1px solid transparent;
......@@ -112,6 +112,7 @@ export default {
getYearMonthDay(list){
this.priceData=list[0];
let day=this.day;
console.log("day",day);
let currentYear = day.substring(0,4); //当前年份
let currentMonth =day.substring(5,7); //当前月份
// console.log("currentMonth",currentMonth)
......
src/main.js
View file @ 09727e2d
......@@ -112,12 +112,31 @@ Vue.filter('priceFormat', function (value) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
})
// 不要小数点
Vue.filter('NoDesnum', function (value) {
if (value == null) {
return 0.00;
}
let nStr = value.toFixed(0)
nStr += '';
let x = nStr.split('.');
let x1 = x[0];
let x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
})
// 时间格式YYYY-MM-DD
Vue.filter("YMD", function (date) {
return moment(date).format("YYYY-MM-DD");
})
Vue.filter("MD", function (date) {
return moment(date).format("MM月DD日");
})
Vue.prototype.random_string = function (len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
......
src/router.js
View file @ 09727e2d
......@@ -416,6 +416,25 @@ export default new Router({
title: "当地游列表"
}
},
{
path: "/TicketDetails",
name: "TicketDetails",
component: resolve =>
require(["@/components/LocalTour/TicketDetails.vue"], resolve),
meta: {
title: "门票详情"
}
},
{
path: "/Appointment",
name: "Appointment",
component: resolve =>
require(["@/components/LocalTour/Appointment.vue"], resolve),
meta: {
title: "预约"
}
},
]
},
......
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