Skip to content

J
jz_Travel
Commit 3d69aa66 authored by zhengke's avatar zhengke
Browse files
Options

1

parent 3b03bc16
Show whitespace changes
Inline Side-by-side
Showing with 273 additions and 262 deletions
pages/jiuzhai/jz_Line.vue
View file @ 3d69aa66
......@@ -173,8 +173,7 @@
<view class="jz_ListMain" v-for="(item,index) in dataList" :key="index" @click="goJzDetail(item.tcid,item.configId)">
<view class="jz_List">
<view class="jz_TuDiv">
<img class="jz_TuBigImg" aspectFill src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg"
alt="" />
<img class="jz_TuBigImg" mode="aspectFill" :src="getImgs(item.imgCover)" alt="" />
<view class="jz_TuDivBotm">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/address.png" />成都出发
{{item.dayNum}} 天
......@@ -186,13 +185,15 @@
{{item.productRecommend}}
</view>
<view style="margin:10px 0">
<img class="jz_calederImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/canlder.png" />{{item.startDate}}<text
class="jz_Canhoubu">不可候补</text>
<img class="jz_calederImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/canlder.png" />{{item.startDate}}
<text class="jz_Canhoubu">
{{item.isSubstitution==0?'不可候补':'可以候补'}}
</text>
</view>
<view style="margin-bottom:10px">航班:<text>无</text>(余位:10)</view>
<view style="margin-bottom:10px">余位：{{item.surplus}}</view>
<view style="color:#FF3166;position: absolute;right:0;bottom:0">
<text style="font-size:20rpx;">¥</text>
<text style="font-size:36rpx;">{{item.b2BPrice}}</text>
<text style="font-size:40rpx;">{{item.b2BPrice}}</text>
<text style="font-size:20rpx;">起</text>
</view>
</view>
......@@ -256,7 +257,7 @@
//获取数据
getList() {
this.apipost(
"b2b_get_GetB2BHomeLineTravelPageList",
"b2b_get_GetB2BTravelPageList",
this.msg,
res => {
if (res.resultCode == 1) {
......@@ -288,6 +289,13 @@
uni.navigateTo({
url: "/pages/jiuzhai/jz_LineDetail?tcid=" + tcid +'&configId='+configId
});
},
//获取第一张图
getImgs(imgObj){
let imgArr = JSON.parse(imgObj);
if(imgArr&&imgArr.length>0){
return imgArr[0].Url
}
}
},
};
......
pages/jiuzhai/jz_LineDetail.vue
View file @ 3d69aa66
......@@ -7,222 +7,260 @@
width: 100%;
height: 500rpx;
}
.jz_TopPrice{
width:100%;
height:auto;
.jz_TopPrice {
width: 100%;
height: auto;
background-color: #fff;
position: relative;
top:-20px;
top: -20px;
border-top-left-radius: 45rpx;
border-top-right-radius: 45rpx;
padding:45rpx;
padding: 45rpx;
}
.jz_LineTitle{
font-size:25rpx;
color:#FF3166;
margin-bottom:10px;
.jz_LineTitle {
font-size: 25rpx;
color: #FF3166;
margin-bottom: 10px;
}
.jz_MainTitle{
color:#111111;
font-size:36rpx;
.jz_MainTitle {
color: #111111;
font-size: 36rpx;
font-weight: 800;
line-height: 28px;
}
.jz_Maidian{
color:#999999;
font-size:24rpx;
margin-top:15px;
.jz_Maidian {
color: #999999;
font-size: 24rpx;
margin-top: 15px;
line-height: 23px;
}
.jz_Price{
font-size:30rpx;
color:#FF3166;
.jz_Price {
font-size: 30rpx;
color: #FF3166;
}
.jz_Price_Title{
color:#000000;
margin:10px 0;
.jz_Price_Title {
color: #000000;
margin: 10px 0;
font-weight: bold;
}
.jz_Price_Hui{
color:#9cf;
margin-left:8px;
.jz_Price_Hui {
color: #9cf;
margin-left: 8px;
}
.jz_flex{
display:flex;
.jz_flex {
display: flex;
justify-content: space-between;
}
.jz_TripDays{
width:100%;
height:auto;
padding:45rpx;
margin-top:15px;
.jz_TripDays {
width: 100%;
height: auto;
padding: 45rpx;
margin-top: 15px;
background-color: #fff;
}
.trip_JZtype{
.trip_JZtype {
display: inline-block;
padding:3px 5px;
border:1px solid #257BF1;
margin-right:10px;
color:#257BF1;
font-size:13px;
padding: 3px 5px;
border: 1px solid #257BF1;
margin-right: 10px;
color: #257BF1;
font-size: 13px;
border-radius: 3px;
}
.jz_StartList{
width:22%;
height:150rpx;
.jz_StartList {
width: 22%;
height: 150rpx;
border-radius: 20rpx;
border:1px solid #E2E2E2;
border: 1px solid #E2E2E2;
}
.jz_renmin{
font-size:12px;
.jz_renmin {
font-size: 12px;
font-weight: bold;
}
.jz_B2bPrice{
font-size:23px;
.jz_B2bPrice {
font-size: 23px;
font-weight: bold;
}
.jz_Service{
width:100%;
.jz_Service {
width: 100%;
background-color: #fff;
padding:30px;
font-size:24rpx;
margin-top:-5px;
padding: 30px;
font-size: 24rpx;
margin-top: -5px;
}
.jz_Serflex{
.jz_Serflex {
display: flex;
}
.jz_Stitle{
color:#999999;
margin-right:41rpx;
.jz_Stitle {
color: #999999;
margin-right: 41rpx;
}
.jz_StartTop{
width:100%;
height:40rpx;
.jz_StartTop {
width: 100%;
height: 40rpx;
background-color: #ECF1F4;
color:#999999;
color: #999999;
text-align: center;
line-height: 40rpx;
}
.jz_Dian{
.jz_Dian {
display: inline-block;
width:12rpx;
height:12rpx;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #111111;
margin-right:23rpx;
margin-right: 23rpx;
position: relative;
top:-2px;
top: -2px;
}
.jz_ZhaiTitle{
color:#1F1F1F;
font-size:28rpx;
.jz_ZhaiTitle {
color: #1F1F1F;
font-size: 28rpx;
font-weight: bold;
margin-top:40rpx;
margin-top: 40rpx;
}
.jz_ZhaiInner{
color:#6E6E6E;
.jz_ZhaiInner {
color: #6E6E6E;
font-size: 24rpx;
margin:22rpx 0 0 30rpx;
margin: 22rpx 0 0 30rpx;
}
.jz_Zhankai{
width:220rpx;
height:60rpx;
.jz_Zhankai {
width: 220rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
color:#1F1F1F;
font-size:24rpx;
color: #1F1F1F;
font-size: 24rpx;
border-radius: 8rpx;
border:1px solid #111111;
margin:40rpx auto;
border: 1px solid #111111;
margin: 40rpx auto;
}
.jz_TripMain{
.jz_TripMain {
position: relative;
}
.jz_TripTitle{
width:100%;
height:90rpx;
.jz_TripTitle {
width: 100%;
height: 90rpx;
border-radius: 20rpx;
background:linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
color:#fff;
background: linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding:28rpx;
padding: 28rpx;
}
.jz_TripLeft{
font-size:32rpx;
.jz_TripLeft {
font-size: 32rpx;
}
.jz_TripRight{
color:#111111;
font-size:22rpx;
.jz_TripRight {
color: #111111;
font-size: 22rpx;
}
.jz_TripLine{
.jz_TripLine {
position: absolute;
width:4rpx;
height:100%;
width: 4rpx;
height: 100%;
background-color: #111111;
left:24rpx;
top:90rpx;
left: 24rpx;
top: 90rpx;
}
.jz_RightInner{
margin-left:50rpx;
.jz_RightInner {
margin-left: 50rpx;
}
.jz_Place{
position:relative;
color:#111111;
font-size:24rpx;
margin:30rpx 0;
.jz_Place {
position: relative;
color: #111111;
font-size: 24rpx;
margin: 30rpx 0;
font-weight: bold;
}
.jz_ComDian{
width:18rpx;
height:18rpx;
.jz_ComDian {
width: 18rpx;
height: 18rpx;
background-color: #DFBE6E;
border-radius: 50%;
position: absolute;
left:-17.6px;
top:4px;
left: -17.6px;
top: 4px;
}
.jz_ImgDiv{
width:612rpx;
height:376rpx;
.jz_ImgDiv {
width: 612rpx;
height: 376rpx;
border-radius: 20rpx;
overflow: hidden;
}
.jz_ImgDiv img{
width:100%;
height:100%;
.jz_ImgDiv img {
width: 100%;
height: 100%;
}
.jz_Rermark{
color:#999999;
font-size:23rpx;
.jz_Rermark {
color: #999999;
font-size: 23rpx;
line-height: 20px;
}
.jz_Canyin{
color:#999999;
.jz_Canyin {
color: #999999;
font-size: 23rpx;
margin-right:44rpx;
margin-right: 44rpx;
}
.jz_CanInner{
color:#111111;
font-size:26rpx;
.jz_CanInner {
color: #111111;
font-size: 26rpx;
}
.jz_ArrowImg{
.jz_ArrowImg {
width: 25rpx;
height: 5rpx;
margin: 0 5px;
position: relative;
top: -3px;
}
.jz_Fenzhong{
color:#999999;
font-size:22rpx;
margin-left:10rpx;
.jz_Fenzhong {
color: #999999;
font-size: 22rpx;
margin-left: 10rpx;
}
.jz_Jinddian{
margin-top:23rpx;
color:#999999;
font-size:23rpx;
.jz_Jinddian {
margin-top: 23rpx;
color: #999999;
font-size: 23rpx;
line-height: 20px;
}
</style>
<template>
......@@ -255,14 +293,16 @@
<view class="jz_Serflex">
<view class="jz_Stitle">保障</view>
<view style="color:#111111;display:flex;align-items:center">
<img style="width:16px;height:14px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png" alt="" />
<img style="width:16px;height:14px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png"
alt="" />
<view style="margin-left:5px;">更改则赔付·承诺不加价·取消则赔付</view>
</view>
</view>
<view class="jz_Serflex" style="margin-top:40rpx;">
<view class="jz_Stitle">服务</view>
<view style="color:#111111;display:flex;align-items:center">
<img style="width:15px;height:15px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dagou.png" alt="" />
<img style="width:15px;height:15px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dagou.png"
alt="" />
<view style="margin-left:5px;">成团保障</view>
</view>
</view>
......@@ -329,110 +369,62 @@
</span>
<view class="jz_TripMain">
<view class="jz_TripLine"></view>
<view v-for="(item,index) in dataList.dayList">
<view class="jz_TripTitle">
<view class="jz_TripLeft">第01天</view>
<view class="jz_TripLeft">第{{getDays(index+1)}}天</view>
<view class="jz_TripRight">2020-03-11</view>
</view>
<view class="jz_RightInner">
<view class="jz_Place">
<view class="jz_ComDian"></view>成都双流国际机场集合
</view>
<view class="jz_ImgDiv">
<img src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg" alt="">
</view>
<view class="jz_Place">温馨提示</view>
<view class="jz_Rermark">
1、行程中，若遇天气或航空公司、国外路程塞车之不可抗拒之 因素时，请贵宾们稍加耐心等候。如塞车情形严重，而会影响到 行程或餐食的安排时，为维护旅游品质及贵宾们的权益，我们将 为您斟酌调整并妥善安排旅游行程，敬请贵宾们谅解。 2、本行程设定为团体旅游行程，故为顾及旅客于出游期间之人 身安全及相关问题，于旅游行程期间，恕无法接受脱队之要求； 若因此而无法满足您的旅游需求，建议您另行选购团体自由行或 航空公司套装自由行，不便之处，尚祈谅解。 3、我们为维护旅游品质及贵宾们的权益，在不变更行程内容之 前提下，将依饭店具体确认回复的结果，再综合当地实际交通等 情况，为贵宾们斟酌调整并妥善安排旅游行程、饭店入住之先后 顺序或旅游路线，请以说明会或最后确认的行程说明资料为准。 4、素食：因各地风俗民情不同，国外的素食习惯大多是可以食 用葱、姜、蒜、蛋、奶等，除华侨开设的中华料理餐厅外，多数 仅能以蔬菜、豆腐等食材料理为主；若为饭店内用餐或一般餐厅 使用自助餐，亦多数以蔬菜、渍物、水果等佐以白饭或面食类。
</view>
<view class="jz_Place">
<view v-for="subItem in item.dayArray">
<view class="jz_Place" v-if="subItem.type==7">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">餐饮</text>
<text class="jz_CanInner">
早餐自理 午餐自理 晚餐自理
</text>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">酒店</text>
<text class="jz_CanInner">
本日无酒店安排
</text>
</view>
</view>
<view class="jz_TripTitle">
<view class="jz_TripLeft">第02天</view>
<view class="jz_TripRight">2020-03-12</view>
</view>
<view class="jz_RightInner">
<view class="jz_Place">
<view class="jz_ComDian"></view>
温泉酒店<img class="jz_ArrowImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/arrow_right.png" />地狱谷(红叶名所*)
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">景点</text>
<text class="jz_CanInner">
登别地狱谷(火山口遗迹) <text class="jz_Fenzhong">约40分钟</text>
</text>
<text>{{subItem.childItem.title}}</text>
</view>
<view class="jz_ImgDiv">
<img src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg" alt="">
</view>
<view class="jz_Jinddian">
登别的名字来自于古老的阿依努语"ヌプルペッ"，意思是白色浑
浊的河流；地狱谷是登别温泉的泉源，也是登别温泉最著名的景
点，火山地貌景色极为壮观。地狱谷是一个火山喷发的遗址，在
这里，火山气体从灰黄色的岩石表面向外喷出，周围空气中充满
了浓烈的硫磺异味，而且这里寸草不生，故名地狱谷。群山环抱
，烟雾缭绕，再配上当地特产的手持狼牙棒的妖魔鬼怪们，置身
其中，仿佛进入了耳鼻地狱。地狱谷的尽头有一口“间歇泉"每隔
一段时间，泉水就会喷发，这里的泉水温度可有80度。如您能早
起、每天凌晨6点左右，还可以看到初升阳光下的"生紫烟"效果
呢。
<template v-if="subItem.type==2">
<img :src="subItem.childItem.imaArray[0].url" alt="">
</template>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">景点</text>
<text class="jz_CanInner">
登别地狱谷(火山口遗迹) <text class="jz_Fenzhong">约40分钟</text>
<template v-if="subItem.type==2">
{{subItem.couponsName}}
<text class="jz_Fenzhong">
约<template v-if="subItem.playTimeHour">{{subItem.playTimeHour}}小时</template>
<template v-if="subItem.playTimeHour">{{subItem.playTimeMinutes}}分钟</template>
</text>
</template>
</text>
</view>
<view class="jz_ImgDiv">
<img src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg" alt="">
</view>
<view class="jz_Jinddian">
登别的名字来自于古老的阿依努语"ヌプルペッ"，意思是白色浑
浊的河流；地狱谷是登别温泉的泉源，也是登别温泉最著名的景
点，火山地貌景色极为壮观。地狱谷是一个火山喷发的遗址，在
这里，火山气体从灰黄色的岩石表面向外喷出，周围空气中充满
了浓烈的硫磺异味，而且这里寸草不生，故名地狱谷。群山环抱
，烟雾缭绕，再配上当地特产的手持狼牙棒的妖魔鬼怪们，置身
其中，仿佛进入了耳鼻地狱。地狱谷的尽头有一口“间歇泉"每隔
一段时间，泉水就会喷发，这里的泉水温度可有80度。如您能早
起、每天凌晨6点左右，还可以看到初升阳光下的"生紫烟"效果
呢。
</view>
<view class="jz_Place">温馨提示</view>
<view class="jz_Rermark">
1、行程中，若遇天气或航空公司、国外路程塞车之不可抗拒之 因素时，请贵宾们稍加耐心等候。如塞车情形严重，而会影响到 行程或餐食的安排时，为维护旅游品质及贵宾们的权益，我们将 为您斟酌调整并妥善安排旅游行程，敬请贵宾们谅解。 2、本行程设定为团体旅游行程，故为顾及旅客于出游期间之人 身安全及相关问题，于旅游行程期间，恕无法接受脱队之要求； 若因此而无法满足您的旅游需求，建议您另行选购团体自由行或 航空公司套装自由行，不便之处，尚祈谅解。 3、我们为维护旅游品质及贵宾们的权益，在不变更行程内容之 前提下，将依饭店具体确认回复的结果，再综合当地实际交通等 情况，为贵宾们斟酌调整并妥善安排旅游行程、饭店入住之先后 顺序或旅游路线，请以说明会或最后确认的行程说明资料为准。 4、素食：因各地风俗民情不同，国外的素食习惯大多是可以食 用葱、姜、蒜、蛋、奶等，除华侨开设的中华料理餐厅外，多数 仅能以蔬菜、豆腐等食材料理为主；若为饭店内用餐或一般餐厅 使用自助餐，亦多数以蔬菜、渍物、水果等佐以白饭或面食类。
<template v-if="subItem.type==6">
{{subItem.childItem.descriptionText}}
</template>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">餐饮</text>
<text class="jz_CanInner">
早餐自理 午餐自理 晚餐自理
<template v-if="subItem.type==4&&subItem.useDinnerType==1">{{subItem.dinnerName}}</template>
<template v-if="subItem.type==4&&subItem.useDinnerType==2">{{subItem.dinnerName}}</template>
<template v-if="subItem.type==4&&subItem.useDinnerType==3">{{subItem.dinnerName}}</template>
</text>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">酒店</text>
<text class="jz_CanInner">
本日无酒店安排
<template v-if="subItem.type==3">{{subItem.hotelName}}</template>
</text>
</view>
</view>
</view>
</view>
</view>
</view>
</div>
</template>
<script>
......@@ -449,7 +441,8 @@
},
dataList: {}, //数据
delMsg: {
tcid: 0
tcid: 0,
configId: 0
},
};
},
......@@ -457,16 +450,18 @@
},
onLoad(option) {
if (option.tcid) {
if (option.tcid && option.configId) {
this.delMsg.tcid = option.tcid;
this.delMsg.configId = option.configId;
this.getDetails();
}
},
methods: {
//获取详情
getDetails() {
this.apipost(
"b2b_get_GetB2BTravelInfoNoDes",
"b2b_get_GetB2BTravelInfoNoDesV1",
this.delMsg,
res => {
console.log(res, '详情');
......@@ -484,6 +479,14 @@
if (imgCover) {
return JSON.parse(imgCover)
}
},
//返回天数
getDays(day) {
if (day < 10) {
return '0' + day
} else {
return day
}
}
},
};
......
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