Skip to content

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

修改

parent 1092c328
Hide whitespace changes
Inline Side-by-side
Showing with 511 additions and 45 deletions
pages.json
View file @ c63ceb50
......@@ -591,6 +591,8 @@
"root": "pages/jiuzhai",
"pages": [{
"path":"jz_Line" //九寨-线路
},{
"path":"jz_LineDetail" //九寨-线路详情
}]
},
//相亲分包
......
pages/jiuzhai/jz_Line.vue
View file @ c63ceb50
......@@ -11,9 +11,9 @@
}
.jz_TuDiv {
width: 280rpx;
height: 220rpx;
border-radius: 6px;
width: 220rpx;
height: 280rpx;
border-radius: 12px;
overflow: hidden;
position: relative;
}
......@@ -24,9 +24,10 @@
}
.jz_Right {
width: 380rpx;
width: 432rpx;
margin-top: 5px;
font-size: 14px;
position: relative;
}
.jz_LineName {
......@@ -61,14 +62,7 @@
align-items: center;
justify-content: center;
}
.jz_Remark {
width: 100%;
font-size: 13px;
background-color: #f1f0f0;
padding: 10px;
}
.op_remark {
overflow: hidden;
white-space: nowrap;
......@@ -77,7 +71,7 @@
.jz_ListMain {
padding-bottom: 10px;
border-bottom: 1px solid #d1d1d1;
border-bottom: 1px solid #E2E2E2;
margin-bottom: 10px;
}
......@@ -97,9 +91,6 @@
.jz_Sort {
width: 100%;
/* justify-content: space-between;
display: flex;
*/
margin: 20px 0;
}
......@@ -169,10 +160,10 @@
<template v-else>
<view style="height: calc(100vh - 120px);overflow: hidden;">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
<view class="jz_ListMain" v-for="(item,index) in dataList" :key="index">
<view class="jz_ListMain" v-for="(item,index) in dataList" :key="index" @click="goJzDetail(item.tcid)">
<view class="jz_List">
<view class="jz_TuDiv">
<img class="jz_TuBigImg" src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg?x-oss-process=image/resize,l_140"
<img class="jz_TuBigImg" aspectFill src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg"
alt="" />
<view class="jz_TuDivBotm">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/address.png" />成都出发
......@@ -186,16 +177,13 @@
class="jz_Canhoubu">不可候补</text>
</view>
<view style="margin-bottom:10px">航班:<text>无</text>(余位:10)</view>
<view>
同业价:<text class="jz_redType">{{item.b2BPrice}}</text>
<text style="margin-left:10px;">统一售价:<text class="jz_redType">{{item.b2CPrice}}</text></text>
<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:20rpx;">起</text>
</view>
</view>
</view>
<view class="jz_Remark">
<view class="op_remark" style="margin-bottom:10px;">OP备注：1不占床小孩收费1不占床小孩收费1不占床小孩收费1不占床小孩收费</view>
<view class="op_remark">本团卖点：1不占床小孩收费1不占床小孩收费1不占床小孩收费1不占床小孩收费</view>
</view>
</view>
</scroll-view>
</view>
......@@ -229,9 +217,6 @@
searchKey: '', //搜索数据
value1: 1,
isShowDate: false,
delMsg: {
tcid: 10964
},
lineList: [{
label: '出境日本线',
value: 1,
......@@ -253,7 +238,6 @@
},
created() {
this.getList();
this.getDetails();
},
methods: {
//获取数据
......@@ -273,22 +257,6 @@
null
);
},
//获取详情
getDetails() {
this.apipost(
"b2b_get_GetB2BTravelInfoNoDes",
this.delMsg,
res => {
console.log(res, '详情');
if (res.data.resultCode == 1) {
} else {
}
},
null
);
},
//获取日期
getStratDate(val) {
console.log(val, 'val');
......@@ -302,6 +270,12 @@
this.status = "nomore";
}
},
//跳转至详情
goJzDetail(tcid){
uni.navigateTo({
url: "/pages/jiuzhai/jz_LineDetail?tcid=" + tcid
});
}
},
};
</script>
pages/jiuzhai/jz_LineDetail.vue 0 → 100644
View file @ c63ceb50
<style>
.jz_LineDetail {
background-color: #ECF1F4;
}
.jz_TopImg {
width: 100%;
height: 500rpx;
}
.jz_TopPrice{
width:100%;
height:auto;
background-color: #fff;
position: relative;
top:-20px;
border-top-left-radius: 45rpx;
border-top-right-radius: 45rpx;
padding:45rpx;
}
.jz_LineTitle{
font-size:25rpx;
color:#FF3166;
margin-bottom:10px;
}
.jz_MainTitle{
color:#111111;
font-size:36rpx;
font-weight: 800;
line-height: 28px;
}
.jz_Maidian{
color:#999999;
font-size:24rpx;
margin-top:15px;
line-height: 23px;
}
.jz_Price{
font-size:30rpx;
color:#FF3166;
}
.jz_Price_Title{
color:#000000;
margin:10px 0;
font-weight: bold;
}
.jz_Price_Hui{
color:#9cf;
margin-left:8px;
}
.jz_flex{
display:flex;
justify-content: space-between;
}
.jz_TripDays{
width:100%;
height:auto;
padding:45rpx;
margin-top:15px;
background-color: #fff;
}
.trip_JZtype{
display: inline-block;
padding:3px 5px;
border:1px solid #257BF1;
margin-right:10px;
color:#257BF1;
font-size:13px;
border-radius: 3px;
}
.jz_StartList{
width:22%;
height:150rpx;
border-radius: 20rpx;
border:1px solid #E2E2E2;
}
.jz_renmin{
font-size:12px;
font-weight: bold;
}
.jz_B2bPrice{
font-size:23px;
font-weight: bold;
}
.jz_Service{
width:100%;
background-color: #fff;
padding:30px;
font-size:24rpx;
margin-top:-5px;
}
.jz_Serflex{
display: flex;
}
.jz_Stitle{
color:#999999;
margin-right:41rpx;
}
.jz_StartTop{
width:100%;
height:40rpx;
background-color: #ECF1F4;
color:#999999;
text-align: center;
line-height: 40rpx;
}
.jz_Dian{
display: inline-block;
width:12rpx;
height:12rpx;
border-radius: 50%;
background-color: #111111;
margin-right:23rpx;
position: relative;
top:-2px;
}
.jz_ZhaiTitle{
color:#1F1F1F;
font-size:28rpx;
font-weight: bold;
margin-top:40rpx;
}
.jz_ZhaiInner{
color:#6E6E6E;
font-size: 24rpx;
margin:22rpx 0 0 30rpx;
}
.jz_Zhankai{
width:220rpx;
height:60rpx;
text-align: center;
line-height: 60rpx;
color:#1F1F1F;
font-size:24rpx;
border-radius: 8rpx;
border:1px solid #111111;
margin:40rpx auto;
}
.jz_TripMain{
position: relative;
}
.jz_TripTitle{
width:100%;
height:90rpx;
border-radius: 20rpx;
background:linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
color:#fff;
display: flex;
justify-content: space-between;
align-items: center;
padding:28rpx;
}
.jz_TripLeft{
font-size:32rpx;
}
.jz_TripRight{
color:#111111;
font-size:22rpx;
}
.jz_TripLine{
position: absolute;
width:4rpx;
height:100%;
background-color: #111111;
left:24rpx;
top:90rpx;
}
.jz_RightInner{
margin-left:50rpx;
}
.jz_Place{
position:relative;
color:#111111;
font-size:24rpx;
margin:30rpx 0;
font-weight: bold;
}
.jz_ComDian{
width:18rpx;
height:18rpx;
background-color: #DFBE6E;
border-radius: 50%;
position: absolute;
left:-17.6px;
top:4px;
}
.jz_ImgDiv{
width:612rpx;
height:376rpx;
border-radius: 20rpx;
overflow: hidden;
}
.jz_ImgDiv img{
width:100%;
height:100%;
}
.jz_Rermark{
color:#999999;
font-size:23rpx;
line-height: 20px;
}
.jz_Canyin{
color:#999999;
font-size: 23rpx;
margin-right:44rpx;
}
.jz_CanInner{
color:#111111;
font-size:26rpx;
}
.jz_ArrowImg{
width: 25rpx;
height: 5rpx;
margin: 0 5px;
position: relative;
top: -3px;
}
.jz_Fenzhong{
color:#999999;
font-size:22rpx;
margin-left:10rpx;
}
.jz_Jinddian{
margin-top:23rpx;
color:#999999;
font-size:23rpx;
}
</style>
<template>
<div class="jz_LineDetail">
<view class="jz_TopImg">
<swiper indicator-dots :autoplay="false" :interval="1000" style="height:100%;">
<block v-for="(item, index) in getCoverImg(dataList.imgCover)" :key="index">
<swiper-item>
<!--<video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item.pic_url"
:autoplay="false" loop muted show-play-btn :enable-progress-gesture="true"
:controls="true" :show-progress="true" :show-mute-btn="true" objectFit="cover"></video>-->
<image style="width:100%;height:100%;" :src="item.Url" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
</view>
<view class="jz_TopPrice">
<view class="jz_LineTitle">
<text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{dataList.priceList[0].b2BPrice}}</text>
<text style="color:#999999;font-size:14px;">/人起</text>
</view>
<view class="jz_MainTitle">
<text v-if="dataList.title">{{dataList.title}}</text>
</view>
<view class="jz_Maidian" v-text="dataList.productRecommend">
</view>
</view>
<view class="jz_Service">
<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="" />
<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="" />
<view style="margin-left:5px;">成团保障</view>
</view>
</view>
</view>
<view class="jz_TripDays">
<view style="margin-bottom:40px;">
<span style="display: inline-block;position: relative;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">
<text v-if="dataList.startCityName">{{dataList.startCityName}}</text>出发
</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
</view>
<view style="display:flex;justify-content: space-between;">
<view class="jz_StartList">
<view class="jz_StartTop"></view>
</view>
<view class="jz_StartList">
</view>
<view class="jz_StartList">
</view>
<view class="jz_StartList">
</view>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">摘要</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>住宿
</view>
<view class="jz_ZhaiInner">
2晚4钻酒店
</view>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>购物
</view>
<view class="jz_ZhaiInner">
无购物
</view>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>景点
</view>
<view class="jz_ZhaiInner">
51个景点，含23个人气景点
</view>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>餐食
</view>
<view class="jz_ZhaiInner">
成人含2早餐2午餐2晚餐 儿童含2早餐2午餐2晚餐
</view>
<view class="jz_Zhankai">展开全部</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">行程概要</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<view class="jz_TripLine"></view>
<view class="jz_TripTitle">
<view class="jz_TripLeft">第01天</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 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>
</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 class="jz_ComDian"></view>
<text class="jz_Canyin">景点</text>
<text class="jz_CanInner">
登别地狱谷(火山口遗迹) <text class="jz_Fenzhong">约40分钟</text>
</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、素食：因各地风俗民情不同，国外的素食习惯大多是可以食 用葱、姜、蒜、蛋、奶等，除华侨开设的中华料理餐厅外，多数 仅能以蔬菜、豆腐等食材料理为主；若为饭店内用餐或一般餐厅 使用自助餐，亦多数以蔬菜、渍物、水果等佐以白饭或面食类。
</view>
<view class="jz_Place">
<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>
</view>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
pageTitle: '线路详情',
msg: {
pageIndex: 1,
pageSize: 15
},
dataList: {}, //数据
delMsg: {
tcid: 0
},
};
},
created() {
},
onLoad(option) {
if (option.tcid) {
this.delMsg.tcid = option.tcid;
this.getDetails();
}
},
methods: {
//获取详情
getDetails() {
this.apipost(
"b2b_get_GetB2BTravelInfoNoDes",
this.delMsg,
res => {
console.log(res, '详情');
if (res.resultCode == 1) {
this.dataList = res.data;
} else {
}
},
null
);
},
//转换图片格式
getCoverImg(imgCover) {
if (imgCover) {
return JSON.parse(imgCover)
}
}
},
};
</script>
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