Commit 81fb76ce authored by lixy's avatar lixy

移动端官网

parent 1f26236c
......@@ -24,19 +24,19 @@
:class="path=='/'?'active':''"
@click="$router.push('/')">首页</li>
<li
:class="path=='/vehicle'|| path=='/vehicleDetail'?'active':''"
:class="path=='/vehicle'|| path.indexOf('/vehicleList') != -1?'active':''"
@click="$router.push('/vehicle')">房车租赁</li>
<li
:class="path=='/tour'|| path=='/tourDetail'?'active':''"
:class="path=='/tour'|| path.indexOf('/tourDetails') != -1 ?'active':''"
@click="$router.push('/tour')">房车旅游</li>
<li
:class="path=='/campsite'|| path=='/campsiteDetail'?'active':''"
:class="path=='/campsite'|| path.indexOf('/campsiteDetails') != -1 ?'active':''"
@click="$router.push('/campsite')">房车营地</li>
<li
:class="path=='/activity'|| path=='/activityDetail'?'active':''"
:class="path=='/activity'|| path.indexOf('/activityList') != -1?'active':''"
@click="$router.push('/activity')">欣新活动</li>
<li
:class="path=='/news'|| path=='/newsDetail'?'active':''"
:class="path=='/news'|| path.indexOf('/newsList') != -1?'active':''"
@click="$router.push('/news')">新闻动态</li>
<li
:class="path=='/aboutXx'?'active':''"
......
......@@ -23,7 +23,7 @@
v-for="item in dataDetail"
:key="item.id">
<router-link
:to="{ path: 'activityDetail', query:{id: item.id }}"
:to="{ path: 'activityList/'+item.id, query:{id: item.id }}"
class="activity-item">
<img
:src="item.banner"
......
<template>
<div
class="activity-detail-page"
style="margin-top:1.87733rem;">
<Head/>
<img
:src="detail.banner"
style="width: 100%;height:249px;object-fit: cover;">
<div class="detail-main-container">
<div>
<h1 class="activity-detail-name">{{ detail.title }}</h1>
<div class="activity-detail-info">
<div
class="flex-aic">
<span style="color: #666;font-size: 14px;">活动人数</span>
<div>{{ detail.limitNum }}</div>
</div>
<div
class="flex-aic"
style="margin: 6px 0;">
<span style="color: #666;font-size: 14px;">活动时间</span>
<div>{{ detail.startTime | formatDate('yyyy-MM-dd hh:mm') }}~{{ detail.endTime | formatDate('yyyy-MM-dd hh:mm') }} </div>
</div>
<div class="flex-aic">
<span style="color: #666;font-size: 14px;">活动地点</span>
<div>{{ detail.province }}{{ detail.city }}{{ detail.town }}{{ detail.address }}</div>
</div>
</div>
</div>
<div>
<div style="height: 10px;background: #eee;"/>
</div>
<div class="flex-jcb activity-detail">
<div style="background: #fff;margin: 17px 0;">
<h3
class="content-t"
style="text-align: left;">活动详情</h3>
<div
class="models-details"
v-html="detail.content"/>
</div>
</div>
</div>
<go-top/>
</div>
</template>
<script>
import axios from '../../plugins/axios'
import Head from "~/components/head";
import DetailBanner from '~/components/detailBanner'
import GoTop from "~/components/goTop";
export default {
components: {
Head,
DetailBanner,
GoTop
},
data() {
return {};
},
async asyncData({ route, params}) {
const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/'+params.id);
let detail = data.data;
detail.content =detail.content.replace(/<img/g,"<img style='width:90%'");
return {detail: detail}
},
created() {},
methods: {},
};
</script>
<style lang="scss">
@import "../../assets/styles/mixin";
.activity-detail-page {
font-size: px2rem(24px);
.content-t{
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.detail-main-container{
border-radius: 7px 7px 0 0;
box-shadow: 0px 0px 13px #666;
margin-top: -10px;
z-index: 99;
position: relative;
background: #fff;
.activity-detail-name{
padding: 17px px2rem(20px);
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #eee;
}
.activity-detail{
padding: 0 px2rem(20px);
}
.activity-detail-info{
padding: 17px px2rem(20px);
font-size: 14px;
span{
color: #666;
min-width: 60px;
margin-right: 13px;
}
}
.vehicle-lower{
padding: 0 px2rem(20px);
font-size: px2rem(30px);
margin-top: px2rem(20px);
margin-bottom: px2rem(20px);
span{
color: #F25B5B;
font-size: px2rem(36px);
font-weight: bold;
margin-left: px2rem(30px);
margin-right: px2rem(4px);
}
}
.member-list{
padding: 0 px2rem(20px);
}
.member-list-c img{
width: 20px;
height: 20px;
margin-right: px2rem(20px);
}
.member-list-name{
color: #666;
font-size:px2rem(26px);
margin-bottom: px2rem(20px);
}
.market-price{
font-size: px2rem(30px);
margin: px2rem(34px) 0;
padding: 0 px2rem(20px);
}
.detail-list{
height: px2rem(100px);
}
.select-tab{
width: 100%;
.select-tab-li-l{
font-size:16px;
color: #999;
padding: 0 px2rem(20px);
}
.select-tab-li-l.active{
color: #333;
font-weight: bold;
height: px2rem(100px);
line-height: px2rem(100px);
border-bottom: 2px solid #1bbb9f;
}
}
.scroll0, .scroll1, .scroll2, .scroll3{
padding: 0 px2rem(20px);
.base-set{
margin: 17px 0;
font-size: 15px;
font-weight: bold;
}
.base-set-name{
font-size: 13px;
color: #666;
padding: 0 10px 6px 0;
}
}
.mint-navbar {
position: sticky;
top: 0;
z-index: 20;
.mint-tab-item-label {
font-size: px2rem(30px);
}
.mint-tab-item {
padding: 10px 0;
&.is-selected {
color: inherit;
border: none;
position: relative;
&::after {
content: " ";
display: inline-block;
@include wh(20%, 2px);
background: #2395ff;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
}
.left-item{
width: 30%;
border-left: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
height: 34px;
padding-left: 10px;
line-height: 34px;
}
.right-item{
width:70%;
border-right: 1px solid #ccc;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.modal-item{
border-top:1px solid #ccc;
}
.kr-article-article .modal-item:last-child{
border-bottom: 1px solid #ccc;
}
}
}
</style>
......@@ -36,7 +36,7 @@
:key="item.id"
class="campsite-li">
<router-link
:to="{ path: 'campsiteDetail', query:{id: item.id }}"
:to="{ path: 'campsiteDetails/'+item.id, query:{id: item.id }}"
class="campsite-item">
<img
:src="item.logo"
......
<template>
<div
class="campsite-detail-page"
style="margin-top:1.87733rem;">
<Head/>
<detail-banner
:list = "detail.pictureList"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
class="mb-50"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick"/>
<div class="detail-main-container">
<div>
<h1 class="campsite-detail-name">{{ detail.name }}</h1>
<div class="campsite-detail-info">
<div
class="flex-aic">
<img
style="margin-right: 5px;width: 17px;"
src="data:image/png;base64,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">
<div style="font-size: 14px;color: #666;">{{ detail.address }}</div>
</div>
<div
class="flex-aic"
style="margin: 6px 0;">
<img
style="margin-right: 5px;width: 18px;"
src="data:image/png;base64,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">
<span style="color: #666;font-size: 14px;">营地预约热线</span>
<div><a :href="detail.toPhone">{{ detail.phone }}</a> </div>
</div>
</div>
</div>
<div>
<div style="height: 10px;background: #eee;"/>
</div>
<div
id="nav"
:class="searchBarFixed == true ? 'isFixed' :''"
class="scroll">
<div
style="border-bottom: 1px solid #dfdfdf;"
class="flex-aic-jcb detail-list" >
<ul class="select-tab flex-aic-jcb">
<li
:class="{active:active=='activity'}"
class="select-tab-li-l mui-control-item"
@click="activity()">营地详情</li>
<li
:class="{ active:active=='lastest'}"
class="select-tab-li-l mui-control-item"
@click="lastest()">配套设施收费</li>
<li
:class="{ active:active=='rank'}"
class="select-tab-li-l mui-control-item"
@click="rank()" >预定须知</li>
</ul>
</div>
</div>
<div id="segmentedControlContents">
<!--详细内容-->
<div
id="activityIntro"
class="scroll0" >
<div class="base-set">
营地详情
</div>
<div
class="bt-line"
v-html="detail.content"/>
</div>
<div
id="lastestDubbing"
class="scroll1" >
<div class="base-set">
配套设施收费
</div>
<div
class="bt-line"
v-html="detail.configure"/>
</div>
<div
id="rankLlistDetail"
class="scroll3">
<div class="base-set" >
预定须知
</div>
<div
v-html="notice[0].value"/>
</div>
</div>
</div>
<detail-footer-btn/>
<go-top/>
</div>
</template>
<script>
import axios from '../../plugins/axios'
import Head from "~/components/head";
import DetailBanner from '~/components/detailBanner'
import GoTop from "~/components/goTop";
import DetailFooterBtn from "~/components/detailFooterBtn";
export default {
components: {
Head,
DetailBanner,
GoTop,
DetailFooterBtn
},
data() {
return {
looptime: 4000, // 循环时间
touchend: false,////没有更多数据
dataType: [],
totalCount: "",
dataDetail: [],
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
active: 'activity',
searchBarFixed:false,
};
},
async asyncData({ route, params }) {
const { data } = await axios.get( "/api/uccn/app/unauth/campsite/shop?id=" + params.id);
let user = data.data;
data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
let pic = [];
data.data.campsiteShopCarouselDetailVos.map(function(item){
pic.push(item.imgUrl);
});
user.pictureList = pic;
user.pictureNum = pic.length;
user.toPhone = "tel:" + user.phone;
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let noticeData = await axios.get('/api/app/cofig/app/unauth/types?types=13');
let notice = noticeData.data.data;
return {detail: user, notice: notice}
},
created() {
window.addEventListener('scroll', this.handleScroll);
},
methods: {
// 点击下一页回调
prev () {},
// 点击下一页回调
next () {},
// 鼠标移入状态点回调
changeBanner () {},
bannerClick () {},
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path == '/campsiteDetails'){
var menuTop = document.querySelector('#nav').offsetTop;
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop+180) {
this.searchBarFixed = true;
}
//滑动到指定位置相应菜单高亮
var top1 = document.querySelector('#activityIntro').offsetTop;
var top2 = document.querySelector('#lastestDubbing').offsetTop;
var top3 = document.querySelector('#rankLlistDetail').offsetTop;
if (scrollTop < top1+180) {
this.active = 'activity';
this.searchBarFixed = false;
}
if (scrollTop < top2+180) {
this.active = 'activity';
} else if (scrollTop >= top2+180 && scrollTop < top3+180) {
this.active = 'lastest';
} else if (scrollTop >= top3+130) {
this.active = 'rank';
}
}
},
lastest(){//配套设施收费
this.active = "lastest";
let top1 = document.querySelector('#lastestDubbing').offsetTop;
let top = document.querySelector('#activityIntro').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 +180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1+130;
}
this.searchBarFixed = true;
},
activity(){
//营地详情
this.active = "activity";
let top = document.querySelector('#nav').offsetTop;
var top1 = document.querySelector('#activityIntro').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 +180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1 +130;
}
this.searchBarFixed = true;
},
rank(){
//预定须知
this.active = "rank";
let top1 = document.querySelector('#rankLlistDetail').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 +180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1 +130;
}
this.searchBarFixed = true;
}
},
};
</script>
<style lang="scss">
@import "../../assets/styles/mixin";
.campsite-detail-page {
font-size: px2rem(26px);
.campsite-detail-info{
padding: 13px px2rem(20px);
font-size: 14px;
span{
color: #666;
min-width: 60px;
margin-right: 8px;
}
}
.detail-main-container{
border-radius: 7px 7px 0 0;
padding-bottom: 60px;
box-shadow: 0px 0px 13px #666;
margin-top: -10px;
z-index: 99;
position: relative;
background: #fff;
.campsite-detail-name{
padding: 17px 0.42667rem 0 0.42667rem;
font-size: 18px;
font-weight: bold;
}
.vehicle-detail-config{
padding: 0 px2rem(20px);
border-bottom: 1px solid #dfdfdf;
.config{
margin-right: 30px;
margin-bottom: 13px;
margin-top: 13px;
}
}
.vehicle-lower{
padding: 0 px2rem(20px);
font-size: px2rem(30px);
margin-top: px2rem(20px);
margin-bottom: px2rem(20px);
span{
color: #F25B5B;
font-size: px2rem(36px);
font-weight: bold;
margin-left: px2rem(30px);
margin-right: px2rem(4px);
}
}
.member-list{
padding: 0 px2rem(20px);
}
.member-list-c img{
width: 20px;
height: 20px;
margin-right: px2rem(20px);
}
.member-list-name{
color: #666;
font-size:px2rem(26px);
margin-bottom: px2rem(20px);
}
.market-price{
font-size: px2rem(30px);
margin: px2rem(34px) 0;
padding: 0 px2rem(20px);
}
.detail-list{
height: px2rem(100px);
}
.select-tab{
width: 100%;
.select-tab-li-l{
font-size:14px;
color: #999;
padding: 0 px2rem(20px);
}
.select-tab-li-l.active{
color: #333;
font-size:16px;
font-weight: bold;
height: px2rem(100px);
line-height: px2rem(100px);
border-bottom: 2px solid #1bbb9f;
}
}
.scroll0, .scroll1, .scroll2, .scroll3{
padding: 0 px2rem(20px);
.base-set{
margin: 15px 0 10px 0;
font-size: 16px;
font-weight: bold;
}
.base-set-name{
font-size: 13px;
color: #666;
padding: 0 10px 6px 0;
}
}
.mint-navbar {
position: sticky;
top: 0;
z-index: 20;
.mint-tab-item-label {
font-size: px2rem(30px);
}
.mint-tab-item {
padding: 10px 0;
&.is-selected {
color: inherit;
border: none;
position: relative;
&::after {
content: " ";
display: inline-block;
@include wh(20%, 2px);
background: #2395ff;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
}
.left-item{
width: 30%;
border-left: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
height: 34px;
padding-left: 10px;
line-height: 34px;
}
.right-item{
width:70%;
border-right: 1px solid #ccc;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.modal-item{
border-top:1px solid #ccc;
}
.kr-article-article .modal-item:last-child{
border-bottom: 1px solid #ccc;
}
}
}
</style>
......@@ -163,7 +163,7 @@
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path == '/campsiteDetail'){
if(path == '/campsiteDetails'){
var menuTop = document.querySelector('#nav').offsetTop;
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop+180) {
......
......@@ -157,7 +157,7 @@
v-for="(item, index) in activityList"
:key="index">
<router-link
:to="{ path: 'activityDetail', query:{id: item.id }}"
:to="{ path: 'activityList', query:{id: item.id }}"
class="flex-jcb">
<img
:src="item.banner"
......@@ -197,7 +197,7 @@
class="main-padding">
<router-link
v-for="item in tourList"
:to="{ path: 'tourDetail', query:{id: item.id }}"
:to="{ path: 'tourDetails/'+item.id, query:{id: item.id }}"
:key="item.id"
class="flex-jcb tour-item">
<img
......@@ -225,7 +225,7 @@
class="flex-aic-fww-jcb"
style="padding:0 0.4rem;justify-content: space-around;">
<router-link
:to="{ path: 'vehicleDetail', query:{name:'【上汽】大通RV80旅居车'}}"
:to="{ path: 'vehicleList', query:{name:'【上汽】大通RV80旅居车'}}"
class="hot-vehicle-home">
<div
class="flex-aic-jcc-fdc vehicle-home-item"
......@@ -236,7 +236,7 @@
</div>
</router-link>
<router-link
:to="{ path: 'vehicleDetail', query:{name:'【金冠】格林卡诺C2'}}"
:to="{ path: 'vehicleList', query:{name:'【金冠】格林卡诺C2'}}"
class="hot-vehicle-home">
<div
class="flex-aic-jcc-fdc vehicle-home-item"
......@@ -258,7 +258,7 @@
</div>
</router-link>
<router-link
:to="{ path: 'vehicleDetail', query:{name:'【奔驰】斯宾特'}}"
:to="{ path: 'vehicleList', query:{name:'【奔驰】斯宾特'}}"
class="hot-vehicle-home">
<div
class="flex-aic-jcc-fdc vehicle-home-item"
......@@ -291,7 +291,7 @@
style="padding-top: 0;margin-top: 20px;">
<router-link
v-for="item in newsList"
:to="{ path: 'newsDetail', query:{id: item.id }}"
:to="{ path: 'newsList/'+item.id, query:{id: item.id }}"
:key="item.id"
class="flex-jcb tour-item">
<div
......
......@@ -22,7 +22,7 @@
v-for="item in dataDetail"
:key="item.id">
<router-link
:to="{ path: 'newsDetail', query:{id: item.id }}"
:to="{ path: 'newsList/'+item.id, query:{id: item.id }}"
class="flex-jcb-aie"
style="margin-bottom: 13px;">
<img
......
<template>
<div
class="news-detail-page"
style="margin-top:1.87733rem;">
<Head/>
<div class="detail-main-container main-padding">
<div>
<h1 class="news-detail-name">{{ detail.title }}</h1>
<div class="news-detail-time flex-aic">
<img
src="data:image/png;base64,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"
style="width: 17px;height: 17px;margin-right: 7px;">
{{ detail.addTime.substring(0, 10) }}</div>
<div
class="content-detail"
v-html="detail.text"/>
<div class="more-news flex-aic-jcb">
<div class="more-news-l">
推荐咨讯
</div>
<router-link
:to="{ path: 'news'}"
class="more-news-r">更多</router-link>
</div>
<ul
class="main-padding">
<router-link
v-for="item in hotList"
:to="{ path: 'newsList/'+item.id, query:{id: item.id }}"
:key="item.id"
class="flex-jcb"
style="margin-bottom: 20px;">
<img
:src="item.coverImage"
class="news-img-list">
<div class="news-list">
<div class="ellipsis2 news-list-title">{{ item.title }}</div>
<!--<div class="ellipsis2 epitome">导语:{{ item.epitome }}</div>-->
<div class="epitome news-list-time flex-aic">
<img
src="data:image/png;base64,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"
style="width: 17px;height: 17px;margin-right: 7px;">
{{ item.addTime.substring(0, 10) }}</div>
</div>
</router-link>
</ul>
</div>
</div>
<go-top/>
</div>
</template>
<script>
import axios from '../../plugins/axios'
import Head from "~/components/head";
import DetailBanner from '~/components/detailBanner'
import GoTop from "~/components/goTop";
export default {
components: {
Head,
DetailBanner,
GoTop
},
data() {
return {};
},
async asyncData({ route }) {
const { data } = await axios.get('/api/uccn/article/app/unauth/one?id='+route.query.id+"&urlType=1");
let detail = data.data;
detail.text = detail.text.replace(/<img/g,"<img style='width:100%'");
detail.text = detail.text.replace(/<video style="/g,'<video style="width:100% !important; heigit:auto;"');
let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+route.query.id);
let hot = tempBannerData.data.data;
return {detail: detail, hotList: hot}
},
created() {},
methods: {},
};
</script>
<style lang="scss">
@import "../../assets/styles/mixin";
.news-detail-page {
font-size: px2rem(26px);
.news-detail-name{
font-size: 17px;
font-weight: bold;
}
.news-detail-time{
padding: 15px 0 20px 0;
border-bottom: 1px solid #dfdfdf;
color: #999;
font-size: 13px;
}
.news-img-list{
width: 92px;
height: 75px;
border-radius: 3px;
}
.news-list {
border-bottom: 1px solid #dfdfdf;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 13px;
padding-bottom: 13px;
}
.news-list-title{
margin-bottom: 15px;
font-size: 15px;
}
.news-list-time{
font-size: 13px;
color: #999;
}
.more-news{
margin: 17px 0;
.more-news-l{
font-size: 17px;
font-weight: bold;
}
.more-news-r{
font-size: 14px;
color: #999;
}
}
}
</style>
......@@ -26,7 +26,7 @@
class="main-padding">
<router-link
v-for="item in hotList"
:to="{ path: 'newsDetail', query:{id: item.id }}"
:to="{ path: 'newsList/'+item.id, query:{id: item.id }}"
:key="item.id"
class="flex-jcb"
style="margin-bottom: 20px;">
......
<template>
<div
class="news-detail-page"
style="margin-top:1.87733rem;">
<Head/>
<div
style="padding-top: 20px; !important;"
class="main-padding">
<div>
<h1 class="news-detail-name">{{ detail.title }}</h1>
<div class="news-detail-time flex-aic">
<img
src="data:image/png;base64,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"
style="width: 17px;height: 17px;margin-right: 7px;">
{{ detail.addTime.substring(0, 10) }}</div>
<div
class="content-detail"
v-html="detail.text"/>
<div class="more-news flex-aic-jcb">
<div class="more-news-l">
推荐咨讯
</div>
<router-link
:to="{ path: 'news'}"
class="more-news-r">更多</router-link>
</div>
<ul>
<li
v-for="item in hotList"
:key="item.id"
class="flex-jcb"
style="margin-bottom: 20px;"
@click="$nuxt.$route.path=='newsList'?$router.push($nuxt.$route.path +item.id):$router.push(''+item.id)">
{{ $nuxt.$route.path+item.id }}
<img
:src="item.coverImage"
class="news-img-list">
<div class="news-list">
<div class="ellipsis2 news-list-title">{{ item.title }}</div>
<div class="epitome news-list-time flex-aic">
<img
src="data:image/png;base64,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"
style="width: 17px;height: 17px;margin-right: 7px;">
{{ item.addTime.substring(0, 10) }}</div>
</div>
</li>
</ul>
</div>
</div>
<go-top/>
<Footer/>
</div>
</template>
<script>
import axios from '../../plugins/axios'
import Head from "~/components/head";
import DetailBanner from '~/components/detailBanner'
import GoTop from "~/components/goTop";
import Footer from "~/components/footer";
export default {
components: {
Head,
DetailBanner,
GoTop,
Footer
},
data() {
return {};
},
async asyncData({ route, params }) {
const { data } = await axios.get('/api/uccn/article/app/unauth/one?id='+ params.id+"&urlType=1");
let detail = data.data;
detail.text = detail.text.replace(/<img/g,"<img style='width:100%'");
detail.text = detail.text.replace(/<video style="/g,'<video style="width:100% !important; heigit:auto;"');
let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+ params.id);
let hot = tempBannerData.data.data;
return {detail: detail, hotList: hot}
},
created() {},
methods: {},
};
</script>
<style lang="scss">
@import "../../assets/styles/mixin";
.news-detail-page {
font-size: px2rem(26px);
.news-detail-name{
font-size: 18px;
font-weight: bold;
}
.news-detail-time{
padding: 17px 0 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
color: #999;
font-size: 13px;
}
.news-img-list{
width: 92px;
height: 75px;
border-radius: 3px;
}
.news-list {
border-bottom: 1px solid #eee;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 13px;
padding-bottom: 13px;
}
.news-list-title{
margin-bottom: 15px;
font-size: 15px;
}
.news-list-time{
font-size: 13px;
color: #999;
}
.more-news{
margin: 17px 0;
.more-news-l{
font-size: 17px;
font-weight: bold;
}
.more-news-r{
font-size: 14px;
color: #999;
}
}
}
</style>
......@@ -27,7 +27,7 @@
<ul>
<router-link
v-for="item in hotList"
:to="{ path: 'newsDetailHot', query:{id: item.id }}"
:to="{ path: 'newsList/'+item.id, query:{id: item.id }}"
:key="item.id"
class="flex-jcb"
style="margin-bottom: 20px;">
......
......@@ -34,7 +34,7 @@
class="main-padding">
<router-link
v-for="item in dataDetail"
:to="{ path: 'tourDetail', query:{id: item.id }}"
:to="{ path: 'tourDetails/'+item.id, query:{id: item.id }}"
:key="item.id"
class="flex-jcb tour-item">
<img
......
<template>
<div
class="tour-detail-page"
style="margin-top:1.87733rem;">
<Head/>
<detail-banner
:list = "detail.pictureList"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
class="mb-50"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick"/>
<div class="detail-main-container">
<div>
<h1 class="tour-detail-name">{{ detail.name }}</h1>
<div class="tour-detail-info">
<div
class="flex">
<span style="color: #666;font-size: 14px;">出发地</span>
<div>
<div style="font-size: 14px;">{{ detail.addressTo.name }}</div>
<div style="font-size: 12px;color: #999;">({{ detail.addressTo.provinceName }} {{ detail.addressTo.cityName }} {{ detail.addressTo.address }})</div>
</div>
</div>
<div
class="flex-aic"
style="margin: 8px 0;">
<span style="color: #666;font-size: 14px;">目的地</span>
<div> {{ detail.addressGo.provinceName }} {{ detail.addressGo.cityName }} {{ detail.addressGo.address }}</div>
</div>
<div class="flex-aic">
<span style="color: #666;font-size: 14px;">出发日期</span>
<div>{{ detail.time.startTime| formatDate('MM/dd') }} {{ detail.time.weekStart }} {{ detail.addressTo.departTime | formatDate('hh:mm') }} ~ {{ detail.time.endTime| formatDate('MM/dd') }} {{ detail.time.weekEnd }}</div>
</div>
</div>
</div>
<div>
<div style="height: 10px;background: #eee;"/>
</div>
<div
id="nav"
:class="searchBarFixed == true ? 'isFixed' :''"
class="scroll">
<div
style="border-bottom: 1px solid #eee;"
class="flex-aic-jcb detail-list" >
<ul class="select-tab flex-aic-jcb">
<li
:class="{active:active=='activity'}"
class="select-tab-li-l mui-control-item"
@click="activity()">行程亮点</li>
<li
:class="{ active:active=='lastest'}"
class="select-tab-li-l mui-control-item"
@click="lastest()">行程介绍</li>
<li
:class="{ active:active=='rank'}"
class="select-tab-li-l mui-control-item"
@click="rank()" >报名须知</li>
</ul>
</div>
</div>
<div>
<!--详细内容-->
<div
id="activityIntro"
class="scroll0" >
<div class="base-set">
行程亮点
</div>
<div
class="bt-line"
v-html="detail.content"/>
</div>
<div
id="lastestDubbing"
class="scroll1" >
<div class="base-set">
行程介绍
</div>
<div
class="bt-line"
v-html="detail.introduce"/>
</div>
<div
id="rankLlistDetail"
class="scroll3">
<div class="base-set" >
报名须知
</div>
<div
v-html="notice[0].value"/>
</div>
</div>
</div>
<detail-footer-btn/>
<go-top/>
</div>
</template>
<script>
import axios from '../../plugins/axios'
import Head from "~/components/head";
import DetailBanner from '~/components/detailBanner'
import GoTop from "~/components/goTop";
import DetailFooterBtn from "~/components/detailFooterBtn";
export default {
components: {
Head,
DetailBanner,
GoTop,
DetailFooterBtn
},
data() {
return {
showBanner: !0,
looptime: 4000, // 循环时间
touchend: false,////没有更多数据
dataType: [],
totalCount: "",
dataDetail: [],
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
active: 'activity',
searchBarFixed:false,
};
},
async asyncData({ route, params }) {
const { data } = await axios.get("/api/uccn/app/unauth/tour/detail/" + params.id);
let user = data.data;
let pic = [];
data.data.bannerDTOS.map(function(item){
pic.push(item.cover);
});
user.pictureList = pic;
user.pictureNum = pic.length;
let startAddress = data.data.tourDepartVo;
for(var i = 0;i<startAddress.length;i++){
if(startAddress[i].type == 0){
user.addressTo = startAddress[i];
}
if(startAddress[i].type == 2){
user.addressGo = startAddress[i];
}
}
let tourTimeVo = data.data.tourDepartTimeVo
for(var i = 0;i<tourTimeVo.length;i++){
if(tourTimeVo[i].overdue == 0){
user.time = tourTimeVo[i];
break
}else{
user.time = tourTimeVo[i];
}
}
var weekday=["周日","周一","周二","周三","周四","周五","周六"]
user.time.weekStart = weekday[user.time.startWeek];
user.time.weekEnd = weekday[user.time.endWeek];
user.introduce = user.introduce.replace(/<img/g,"<img style='width:100%'");
user.content = user.content.replace(/<img/g,"<img style='width:100%'");
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let noticeData = await axios.get('/api/app/cofig/app/unauth/types?types=14');
let notice = noticeData.data.data;
notice[0].value = notice[0].value.replace(/<ul/g,"<ul style='width:100% !important;'");
return {detail: user, notice: notice}
},
created() {
window.addEventListener('scroll', this.handleScroll);
},
methods: {
// 点击下一页回调
prev () {},
// 点击下一页回调
next () {},
// 鼠标移入状态点回调
changeBanner () {},
bannerClick () {},
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path == '/tourDetails'){
var menuTop = document.querySelector('#nav').offsetTop;
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop + 180) {
this.searchBarFixed = true;
}
//滑动到指定位置相应菜单高亮
var top1 = document.querySelector('#activityIntro').offsetTop;
var top2 = document.querySelector('#lastestDubbing').offsetTop;
var top3 = document.querySelector('#rankLlistDetail').offsetTop;
if (scrollTop < top1 + 180) {
this.active = 'activity';
this.searchBarFixed = false;
}
if (scrollTop < top2+180) {
this.active = 'activity';
} else if (scrollTop >= top2+180 && scrollTop < top3+180) {
this.active = 'lastest';
} else if (scrollTop >= top3+180) {
this.active = 'rank';
}
}
},
lastest(){//行程介绍
this.active = "lastest";
let top1 = document.querySelector('#lastestDubbing').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 + 180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1+132;
}
this.searchBarFixed = true;
},
activity(){
//行程亮点
this.active = "activity";
let top = document.querySelector('#nav').offsetTop;
var top1 = document.querySelector('#activityIntro').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 + 180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1+132;
}
this.searchBarFixed = true;
},
rank(){
//报名须知
this.active = "rank";
let top1 = document.querySelector('#rankLlistDetail').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 + 180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1+132;
}
this.searchBarFixed = true;
},
},
};
</script>
<style lang="scss">
@import "../../assets/styles/mixin";
.tour-detail-page {
font-size: px2rem(26px);
.tour-detail-name{
padding: 17px px2rem(20px);
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #eee;
}
.tour-detail-info{
padding: 17px 10px 17px 10px;
font-size: 14px;
span{
color: #666;
min-width: 60px;
margin-right: 13px;
}
}
.detail-main-container{
padding-bottom: 60px;
border-radius: 7px 7px 0 0;
box-shadow: 0px 0px 13px #666;
margin-top: -10px;
z-index: 99;
position: relative;
background: #fff;
.vehicle-detail-name{
padding: 14px px2rem(20px) 0 px2rem(20px);
font-size: px2rem(34px);
font-weight: bold;
}
.vehicle-detail-config{
padding: 0 px2rem(20px);
border-bottom: 1px solid #eee;
.config{
margin-right: 30px;
margin-bottom: 13px;
margin-top: 13px;
}
}
.vehicle-lower{
padding: 0 px2rem(20px);
font-size: px2rem(30px);
margin-top: px2rem(20px);
margin-bottom: px2rem(20px);
span{
color: #F25B5B;
font-size: px2rem(36px);
font-weight: bold;
margin-left: px2rem(30px);
margin-right: px2rem(4px);
}
}
.member-list{
padding: 0 px2rem(20px);
}
.member-list-c img{
width: 20px;
height: 20px;
margin-right: px2rem(20px);
}
.member-list-name{
color: #666;
font-size:px2rem(26px);
margin-bottom: px2rem(20px);
}
.market-price{
font-size: px2rem(30px);
margin: px2rem(34px) 0;
padding: 0 px2rem(20px);
}
.detail-list{
height: px2rem(100px);
}
.select-tab{
width: 100%;
.select-tab-li-l{
font-size:14px;
color: #999;
padding: 0 px2rem(20px);
}
.select-tab-li-l.active{
color: #333;
font-size: 16px;
font-weight: bold;
height: px2rem(100px);
line-height: px2rem(100px);
border-bottom: 2px solid #1bbb9f;
}
}
.scroll0, .scroll1, .scroll2, .scroll3{
padding: 0 px2rem(20px);
.base-set{
margin: 15px 0 10px 0;
font-size: 16px;
font-weight: bold;
}
.base-set-name{
font-size: 13px;
color: #666;
padding: 0 10px 6px 0;
}
}
.mint-navbar {
position: sticky;
top: 0;
z-index: 20;
.mint-tab-item-label {
font-size: px2rem(30px);
}
.mint-tab-item {
padding: 10px 0;
&.is-selected {
color: inherit;
border: none;
position: relative;
&::after {
content: " ";
display: inline-block;
@include wh(20%, 2px);
background: #2395ff;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
}
.left-item{
width: 30%;
border-left: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
height: 34px;
padding-left: 10px;
line-height: 34px;
}
.right-item{
width:70%;
border-right: 1px solid #ccc;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.modal-item{
border-top:1px solid #ccc;
}
.kr-article-article .modal-item:last-child{
border-bottom: 1px solid #ccc;
}
}
}
</style>
......@@ -189,7 +189,7 @@
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path == '/tourDetail'){
if(path == '/tourDetails'){
var menuTop = document.querySelector('#nav').offsetTop;
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop + 180) {
......
......@@ -21,7 +21,7 @@
class="main-padding">
<router-link
v-for="item in dataDetail"
:to="{ path: 'vehicleDetail', query:{id: item.id, name:item.name }}"
:to="item.link"
:key="item.id"
class="vehicle-item flex">
<img
......
<template>
<div
class="vehicle-detail-page"
style="margin-top:1.87733rem;">
<Head/>
<detail-banner
:list = "detail.pictureList"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
class="mb-50"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick"/>
<div class="detail-main-container">
<div>
<h1 class="vehicle-detail-name">{{ detail.name }}</h1>
<div class="flex-aic vehicle-detail-config">
<span
v-for="(iitem,iindex) in detail.uccnCataList"
:key="iitem.id"
class="flex-aic config">
<img
v-if="iindex==0"
style="margin-right: 5px;width: 20px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABHNCSVQICAgIfAhkiAAABCJJREFUaIHt2k9sFGUABfD3vtnddnf7T1IOhSoSJCQokVLaRvSg8VAT8X+ywUsVI/FA4sGLHjw0IfHghXjgUEOsAUnMEkTTg6FqiBcOFCwaU1N6QVKshtJQ2O22uzPf81C7bdHQaTvbte38brM7s/Pe/P1md4FQKBQKhUKhUCi0FGzqPbE3InxCskHQlyNVo0eG972XK3ewUolEwTMkHgIAiIc3ZepvDwMflzlXyRgADxaniAqAu8sXp/QiBFicEijILLRQc1dXNPeAW5GvqjW1Xta9nPt+CqnTXkmTBiSymJmfSKfjbiLTQMd5POlwV1KqRjTxV3N0/2Xb++pg/4XBP9HZaUsVNgi+C+8+211XSEw+ZxA5RGIfwUoQgAAaThD5b1rathztky6B1MxyzZe6os6teKMUSZSkwTx5eI6x1vVyuWp7a/DJtzJzswA+Czf3dCWcmHmJxAcCd2DuaQCAYMIBX7cG25q+PXWwHxgovjmaqAfxPumuwLXBIGKRh2NGotlIX0vvFxemzp34+Zf2juzMHP72cCy+C0CHwB28p+xcpGmJGn24M51+cyCVygOAJ7fCgfMoDduWW8c/gsRrIn6qFD9t7un6+vIL74wC01fp+9qZTsdIsxfknvuVnV4NCIMXozUT24OKvgwOhRYCnaxMHGju6UoAPgrbDblqwm4FUONnLQSSUZg9ywwbpM1GeJfRqsfQ2WkWLJx0TQxinD42zgxRdcvLGLhtpPfKI60boguW8HJuDtA4AF/3WQEyhjeWHTFABAzJZ52aZGzBwlcKybsgrkq66efDBY3mrNu3/JjBErCZk5GFCyOV8mBtH4kLWGAvC7AkP/91vOqPoIIGRorG857xdVvK3rk2lKjdetwADSRbATj/+jzACjxjPR1FKlXcMJSyIr6DdD3A+ItG4s5EQZO+Cg+kOvMPn+8+X1/gHcq8QfJlAPUEqOmx1rCV95nnFrr7n397ZO6y/ZmqsdYNuWOea2IlaeLT1OSkHey/kWVb78ni0EtCXtDZvvaOA/+5VDrt7N6YrbZZr7EyVrkdQg2JEckOZWJ3bw48czizYg2WaFEPD0ilvCvAbQDjSKd/w8YB4mlY8P/9wDDX4grP0tzzdDXxPZhYK+bv4emrULLph1NbypSnZCxcNxGPj80rTCAGcn/Ms/vLFawUBEgyI4XMxEdLPYdXFQIksUlyjqyvc5ioW1eFCfDeQ9oTcJ3Qj2VJFCgDSE8B2ArODoXnFZbgCbp4sb3j4IrnCx5bzp3sNlQjwGLhdXVIA2HhtS8svNatv8LT31j8gxAI3Wf+1USEPGH2tyUBMoJGZ14gUABwtSzxSkDQEKTivxkkjRlZ95CVrgmYkPTVlHCsnCGDZGOTxwGdljQm4HdAh8udKRQKhUKhUCgUWq3+BswKetL4/mVRAAAAAElFTkSuQmCC">
<img
v-if="iindex==1"
style="margin-right: 5px;width: 20px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAABU5JREFUaIHtmWtsFFUUx///e3e32y2lRSIaSrAIEhItFHdboo1GEgMWeSiGgjyKJDRrfMWY6Bdi0kRB/WKMr7BiKH2ApiI1YgqUGtJgVOw2GERCQqkQHwkE0JQ2dLe7c/xQdvucZdpZoG32l2yy994z557/nJn7GiBFihQpUqRIMW5h/F/tKu3LWvG0hnHfbYzHHkoJDLQe+6l1H8rLDQBwxNoKJy5fB8ougDT3MMoRgRDie/jejUGgGgBUvJGSz74ZHaMQIAQFsXI8g1AApNdQRMK3MjC7kHTFCyLxRDmGtAbQFQ3NjHSE/7vJcSWFzAlZ2XDIn0O1mQoUo7vzVMmLHTcvrOSRd3S303NNhmxTQ9aOI5IlcNQOTqaP6I0obKxciijXgCwAcBeBToH8FgW+ueyM7jq3cFNXEuMcMcMWmF9Xke3K0J/B4DNkvycgi+BUB7B4SlhvubOxZmXz4+ubkxjriBiWwNwjFW5XWDcRnJvIjuQ0GHLMe6Dy0ZbijT8MMhBhweE987RE04YZbz86ukLnTq4ou5DIZlgCp4TUR1Q94qRn3fBupDscCGtc9aRpF7udDwGyg8BkAtRKfe4NBPJa/P7uvn4KD1d/CtAvtLdq8qS7I94DFWvDQKOZjWWB876vzEGEa2NlIyplweLSnei3PEBdfkPFSRccxwlkgJitc91rAVT29SWCHEX7AxMBh6LOTmRjWaArghUkPQAAkdNBd1sl+osDAPy6aNOZgsaqrTC4lQANqGUYIDASCb/scDqvKcBttf+hMIRtne1Xv9AZ2U4zm2E8our+eIDkdiwsj5hZdoTCeyY60t4CoQmZOrD9+JObzwNYbb3vxOQd3T3JrM36PKh613cQw0hkSldUhkjubcG6QAOney9Sz6G2VpuZZhjpTwkZ851wlLvZWH5EQwjtT4f7PQBuRTxYmB1e/gtQN9Bubv2OaQTeJkABBIJDg5yVlyvvI7kzGNYjXmgAQFjJvycWl15MZGO5gxOLy/4obKiuI/BsT43s9R2sXBlsT/8OJSVRiNB7qOZuraSBYGaPCf7uaG/bOdCXb8HMzSqK7dT2RtJ0MOI7WFkUAs6Y2QzrDnYaoZc8yj1fQeYQUFqprwqzuy7yYNUFOVwzEUqmEj0jrQAiGmWnSsoH7SupUZqkzbVDUYqQFIG1q7RHu16gIVl9QnMSzIFCTk9VbwMFhkRlvXd/INiyzH+pn6+IbBEHPhGxN02QPBtV/DqRjWWBhdlLt0L4Bq1O0IRW4DqmeWZ7A4GivquZ5iWlTQAesNr3jUg0TVgSOKu+Pg245CdAETEAXAQQFGDwhphwEcwnMP26fx/vcb8OYNvIwreHJYF3qMurAWYBAAS7/2m/5P+r5LVrZvbeQMDJ6Z5irbGPgFbkq7lHKt6/HVsoS/OgaCMvNihEnfwgkTgAaPH7u4PFG74V4AoAgMyY3BGeYDvaEWApgxQVvxE6ir0LDlWFLPqfBFw/ypuQGa/0NdQUKcjHFLE1yAjQJog83zXUq3KdYU+0BGbYPRtWlHcoyLfrh8AcgXMlgCrTvqw5ot2FZb/rpVveFEgngIidnwCtkO59iTq2lMEOo2uby1CDViRWUVEaLT+evRIrNy8pbZpV/+HkSHqmrRSee+x8GCw3bE8Tvz+x+QpiA0aSaF3yitX32Bapc9GxzrgXaPoOuhzanXukwtY8datwdRpus1SZCtRMb50yVj6gKYHZ7stUYPwEbYwTT6yAP4+akyIbCCCgboqV++aVvobqNUownzBG7deiRAiUGMTx4KINX2IcJCtFihQpUqRIcQP+B7jnvcfwUWbhAAAAAElFTkSuQmCC">
<img
v-if="iindex==2"
style="margin-right: 5px;width: 18px;"
src="data:image/png;base64,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">
{{ iitem.name }}
</span>
</div>
</div>
<div class="vehicle-lower">房车租赁<span>900</span>元起/天</div>
<div
style="display: flex;"
class="member-list">
<div class="member-list-c">
<div
v-for="ictem in detail.userMemberLevel"
v-if="ictem.level == 3"
:key="ictem.level"
class="flex-aic member-list-name">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjAzODM0ODNDRkIyMTFFOUI4NzBDNjVFMUJGRTVBRTYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjAzODM0ODJDRkIyMTFFOUI4NzBDNjVFMUJGRTVBRTYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Y2UzNzQ0ZjAtNDBkYS1lMDQzLWExOWQtM2I1MWE5NjYyMWYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt0GqK4AAAQsSURBVHjatFVbSJtnGH7/JCYmgoqHJHaxOFPnqMik7IAb7EJacXYOceuFeKgFQaybjDrYzXY3vRvWKotiV9EbQdFdeDl74YadCOscXjk1iYk5GDUnNTHnfc9X/lCb30u/EP783+F5n/d5n/eLkEql6KqGQvxxdHR0YSEnJ4e2trbI5XJRbW0tTU5OTi0vL9cNDg5+UVJS8q/dbiej0UgymYySyWT6XHFxcSa4IAgXoyoUlJWVpTCbzZ9ubm4a19bWujA/Pz8/WFlZ+aSwsPCwurr6n0gkknE2A9xqtaY3QaqCggJaXV39fmFh4aeioiKeSW5uLvbdXV9fv6vT6Uiv12vUanUYAcSBvRngoVCI5HI5B0aQeDyOlO3IQKVS8blEIsFlwJxSqdxj++OYC4fDkuxl4g/GgILBIJ2fn3MQv99PdXV1MzU1NRaPx0PRaJTAEOsg0tzc/CPTNwbtT05OyOvzks/nk5YF7GKxGBhRfn4+Ma35e0NDQ7nX6+1gGYFI6vT0VHb7zu19rU67PDc3R5DHYDAQ23O55qg4ZGGFgkPe2djYaGTs5ezdVVpa6mFZCchIk6MRYtFY1tPJp/2MqZpl5i5/u3w6Ly+PgoGgNDi0ho0sFssHs7Ozf7JUVZAKGYi1AIFEMpGWLplI0uLiIu079j/vut9171LNkd729vYnMzMz60xbFaqu0Wjo7OyMf5ktSSaX8SDHx8ccWK1RU2FRIa2srHw1MTGxoFQppcF3dnZuMcZ/gB0sB70BWl9fzzNyOBzcQS6nixo/a+QNhKJj6HV6evHXixbWaHOS4FNTU78zO8kADBCk7Xa7UVCanp7m78+Xn9PAwACxLqVQOMSDY14M8PLvl/ckwQ8PDwvgGFFbjLz8POrr6+NBlpaWaHx8nNra2qi3t5dYI/FGgzzYzyUTUtKydHZ23j84OKBAIMADcGcwzfFs+bKFdnd2qampibq7u2nxt0W6XnqdEvHEq6aTCTACGd4ybL8OLrx+KzJpvmXshmHH7OxsrjsO+rw+3mDoTDhFq9XyNTDGutlipgpjxa7JZPq4qqrKk2FFpN7a2vqYUpQaHRt9jJSz1SxAJMafSDsei8PnFI1FKZV8xRhWLSsrc7Bivn+t5JpfUha0Nq7Xtva2EabpIwQDW1EigX0QAGzTwIzxjYob5me/PrvFrOy3WC3SmuNC4gHcLuro6Bju6el55Ha6KRAM8HU0D4onAlv3rNDdMfZk7CN0sM1m480mCZ4OcB4hp9NJ7e3tww+/fvgdLi0UWexisXis5c2mX0zvsWv3CO9vAmeAiwFQNKfLSQ+6Hvzc/01/v+fAwz0tV8jJZrdB472RkZEPGfAxbkUp4AsFfTMArlUcZBYdjUQjSuakH1gA+c13b/43NDR0hzWND1KgNy4bwlX+QcvoCsf/AgwAIgxUsvgyBW4AAAAASUVORK5CYII="
>
{{ ictem.name }} {{ ictem.price }}元/天 可节省¥{{ ictem.disPrice }}
</div>
<div
v-for="ictem in detail.userMemberLevel"
v-if="ictem.level == 2"
:key="ictem.level"
class="flex-aic member-list-name">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjAzODM0ODdDRkIyMTFFOUI4NzBDNjVFMUJGRTVBRTYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjAzODM0ODZDRkIyMTFFOUI4NzBDNjVFMUJGRTVBRTYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Y2UzNzQ0ZjAtNDBkYS1lMDQzLWExOWQtM2I1MWE5NjYyMWYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PougWI4AAAQOSURBVHjatFXNbxtFFH8zu9543fU2SW03IQ0KlSpacNsglCYREhShShyQ6Kkl0PbQA5UKPfbUG+KEONLwcUOo5X/ggFTaghQRRaIfRHwolROaOInjj3jX+zGzw5tZ18H1lltGsrwzO/t7v/m933tDhBCwW0N/8sCDZtcLohvAnE3wa3+DmS+Cu/rr1+7GvbcGD585LaLwPnM31bqIOO7eIaj1ZXvBCaHd4FSXa1rkN040S7cOBtuPPyRAwFmd+5Qa1ueantkimvEQhN8F3oXxRBav+lfXCy1lgVd5eNUtL3xG9QwGSwFQChELIApdoH3ZMDv6ukU1IxAR63yXHjzUy1wwT9KNWRCtfVyygog4TclnXIs6JySglQghXAJH3E9kTne0svEDKQ/KISIECsAsHP/esA8scr8BEkQICRTiL4DM0Pg1PVPgkSQlA6MCT3tD/4/ICoBQ3AgRcLcsI4GZKx6JAvc9XKNSRdSYmLmXlqlh397+Z06R0s0BlAoNIWiy5kFjGbhfw817gbnrYzh/BxnqNLVnDaOuR6GHe6NYNi1NuV8/xEM33WePls3ckRvoIAzggTX8SgJzKY1hAWttjjur87cxBxagY4TYaOcCYSU4komURBgE583VBQi92tv2genzRP8fzUOnPNFc+WVe8NAiGIhofSAwWQI1Bqqp7ULVhKOA0YqAtgS38se5eumnG5TqyeChs3bUeTx3BylRkjKVW2TizNzLCoC1aoo58+qQKRRBz+SBh634+Chlq7r0fr1059tEcGfl7g94fkMCgzo+JhVdIquwcPyiAnY3F6H/4CnY9+LpjmviPEhJbfAapQuJ4CxoDoEsFGmpKGq3ABM27t8E5tdheOIK5I9+ANmRSVi/dxO82iPcvkclWOlPyLN9bo1Mz0imyrck9q3UHNCWa/NfoWzrYO0fh/Jv30FzbQHtN6hOp8yG+1mrAnp64EGiFeXYXr57uVG6dV0ywrJGV3D1IVouDgqyckOUIKvkiBljvtwKGJn87/uLM68Z9nPV3q6IibJGTszKc9Yf/TgrpFtQJplY+U91qgBltxSCdxiH7gakzH1LQ8fOTWjpvU6iLLI6mQow9aU9dvJjqTNXbNuaquZA45y0pyG2XSNTWBw6duFVtLLD8ASJ4CohnKFD6pi0qev28298JIPx0NspIIji7opbmbuFjAeWCsWzk1j+1bC11Sm2XvB2ACwglKgmXTHbP3byCvO3ld5EJRmxFXAFUpncYqE4M46MG1Lzp++DXvBOAKb6jD06/UX/C29eYugiznwFwFpVLKDcn/nimUk9bTe4V00E7uktXQHQFRLIHpn6BpNq1Jd//kQ2MsMafpA7/O4pvM6aDKVQl8gzBtnNC5rCLo5/BRgAXjkqwv6j4/MAAAAASUVORK5CYII="
>
{{ ictem.name }} {{ ictem.price }}元/天 可节省¥{{ ictem.disPrice }}
</div>
<div
v-for="ictem in detail.userMemberLevel"
v-if="ictem.level == 1"
:key="ictem.level"
class="flex-aic member-list-name">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjA1MEExMTJDRkIyMTFFOUI4NzBDNjVFMUJGRTVBRTYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjA1MEExMTFDRkIyMTFFOUI4NzBDNjVFMUJGRTVBRTYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Y2UzNzQ0ZjAtNDBkYS1lMDQzLWExOWQtM2I1MWE5NjYyMWYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm/vKBcAAAMqSURBVHjatFVNa1NBFJ2XviRNSFOSlNamJCT0Q5CggRSSkHVxI4K4cuOidVFB/4Br3brQjVoV3Lhw4dq9oKVFxGBB2krB0FqalrRJ06T5quc8euNL8rLswDAfb+bcc8+9d552dnamLqrpMjk5Oen4MDAwoKrVqioUCmpkZITjs6Ojo7lQKHSjXC7/bjQaxj5Hc/N6vb3gzWaz4xA9Ou+zBwcHkUql8lDTNLW/v/+41Wo9dTqdBaw3udevaSLL3t7e/01cIPPj4+MHpVLpuc1mUwJCpuz4Xg4Ggz5d1+tmYn6/v5c5waQRjGtc3JE12CohQjAY+4OxxX0B7/bC1rai623Q09NTo7vd7o9w/1utVlMCIszB8BHuNBmrer1ufOM5y4ASmMxonSMP0+Dw8PAs5rcBbjtnrfl8vpzL5fqKWBhk2HmHBCzBxWUCYn4JmXILQdRhNG+323fIjg1zDQbcuVxuEUydMPJ3dHT0A0l1J4XesQAwAK8Ui8XPcN0v+krmcE52lIVz9sPDQ6bs9UgksgDD1po7HA4CX0PWfMclv2QIGbOLAYLjnAHMMyS0u7s7v76+/o5rS3AE5nI+n/+Cyw7JDoIGAgEDgIHjHgpIjY2NMdhG0GkQQWcq393Y2HhjCY6Pn3DQTWBxmQxZhfF43AAGQzU9Pa1isZhhmNkhUg0ODrLA5i3BARziKClHRsyCbDZrMEwmk4aRcDisVldXCcTgduR/3zyH5jdRkW1g0ZTj8vIyq1WNj4+rlZUVhUxRyJL2WTbKBal+WJY/meBxuoP+XljIZSkqNspBjZkxchdPBB+sn6lUKoMaKPaA8zLd3N7evre1tbVEScSAOf3M6SnAHo9nM5PJXIU3FRrukYWXaWBiYuI1dF1kMM1lb35XuhivAThBYErTt4h4kQbwZr+EsRZy95W8OeKBADMGZIxAJ6F1meu+ATXrzJ8E2C9NTU3dFw+kiITx0NDQWjqdjvcD7gHvNhCNRl/MzMwsyMvHb3QdwL/IGFKUue73w9At/yA4TAkIOjk5+RbG7Ki+J5DKgVcym0gk5kTj7pK3TMWLaDZ1ge2fAAMAmId5+3zZfVQAAAAASUVORK5CYII="
>
{{ ictem.name }} {{ ictem.price }}元/天 可节省¥{{ ictem.disPrice }}
</div>
<div
style="margin-bottom: 0;"
class="flex-aic member-list-name">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUI0NTZDOTBDRkI2MTFFOTgwQzk4NDZFQUYxM0NBMzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUI0NTZDOEZDRkI2MTFFOTgwQzk4NDZFQUYxM0NBMzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NWYzZjhmOTMtMGM3Ni1jYjRhLTkwZTktZGE3NzUxZDI3NWU0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhHl4nQAAAQOSURBVHjatFVLbBtVFL1v/uPxOAlxggNIadK4lPJrCElIu4BNpQohBJSqSEhUbJAKLNmxgyULVqQgNkgggYQEe5aolVJVFAQhLv1EadxPQp3Escf2fN6H+56dCNeTZV7keN543jnnnvsZIoSA/VrGzgWPml0/EMME1tiCpLIKZn4Uorul+eTflROZQ8deFSBKgsZgPzwBgjOA/wnUHK8XHDTSTavpyKBpPAqmo/LiOK2unUMUiO5d/YTY2c91t2+T6OZVeQ/2iJ7s2CIVdv1guRCv3/woulP6TLMc5EEdhIBgFFjcAmJn4sz4tK8ZZiwY2z1nDR/oVS6SSCoFpQS/iWAS6zbBf0RvPyYEB4F7pZSQVfwwwTlwFqcq17q9wkOavIUglII1cvgHo6+wxFoBSHXqQxNgNALn0SMfG34eLwMET0A6wJEoNaESVHCKYkwljAcbygbrkeKTLG6eQWKNYCYFjYhdmChrTvZC49YfGJUJuuO3CR4A3/WcVu8Ba9VAc31gwdYo27r7imCJgd6vox3rLI7QcDwsAQxLp2GtyKPQNnJDa05h4nsphEct8EafTlEuxVseKq4+E5cXL/Ak9AGTKMSG1ICGCRW68h1VKgtw37yzBCwKTnrjU2cJJj7dczsLNNiYCm/9fgVD9ImVUbWONrQTRvQ2CQJS7AkVMSZasz1ord18p35t4TsiyzcNnNYrT8Wrf17EUzoxbdUcHBvFKhSxLD2gzW1Uy9S3O/I4GNkBVZKyCHS0Mry/8nbt+sI3qeDhypVfUIsNhq0SI8OnrTrYCDQwdxr3DBVeh9wTL0L/0ZNInChy9Sz+yVxFm7fPpoLzsDEiu1KFK9pZ10wHqpd/Bo4k+ZfehcGZN8Abm4TKpZ8gqpQxR277eS6UZXvWuTM2+RYLsWZpqJ5VZYWeciS6/+u3QGsVcB87ApWFH6FR/gt0r78TIepGXNrYBMPt+zu1FOVqLf92LrhxaV62vuxK6bFcDEuMJy0E0VSlYI23BxZvAyfBJlh+fik/c+q4PVCo9k7FsA7O6LPnUQsP/rn4paoWbBDZWDICQlxkYe17slPVmEDFCGx6A8tDL5yeMdxcI9UWeVB6mzkw+VW2OPcBw2uWhLu1DcpW0tl3hp0E9vOl4bkzU7qbbUhr0sF3Jp4kGHtuPlucfZ+2thUB7DSP6IxX5fEWKu5fzs+8Pmt4/VXWqHYGXxp4hwAUwbYkOJ87dOxDikNLRaCmYid5qNjIDpaGZt48ajh+Xe4fBO4F74qgBv7B6S9yh4+/J6ORbx6CLxTZREb2oWtD06/NGplcnTarqcA9s6UrAmwSiqH6489/jWRm7cblTwmNTSs3vDg4+fIJnISNBD1WL5E9FtnPF7QG+7j+E2AAXUZQb2HTr3kAAAAASUVORK5CYII="
>
普通用户 {{ detail.price }}元/天
</div>
</div>
</div>
<div
class="market-price">市场统一售价<span style="margin-left: 5px;">{{ detail.buyPrice }}万/辆</span></div>
<div>
<div style="height: 10px;background: #eee;"/>
</div>
<div
id="nav"
:class="searchBarFixed == true ? 'isFixed' :''"
class="scroll">
<div
style="border-bottom: 1px solid #eee;"
class="flex-aic-jcb detail-list" >
<ul class="select-tab flex-aic-jcb">
<li
:class="{active:active=='activity'}"
class="select-tab-li-l mui-control-item"
@click="activity()">基础配置</li>
<li
:class="{ active:active=='lastest'}"
class="select-tab-li-l mui-control-item"
@click="lastest()">房车图片</li>
<li
:class="{ active:active=='rank'}"
class="select-tab-li-l mui-control-item"
@click="rank()" >租车须知</li>
<li
:class="{ active:active=='model'}"
class="select-tab-li-l"
@click="modelClick()" >房车参数</li>
</ul>
</div>
</div>
<div id="segmentedControlContents">
<!--详细内容-->
<div
id="activityIntro"
class="scroll0" >
<div class="base-set">
基础配置
</div>
<div
class="flex-aic-fww bt-line">
<span
v-for="item in detail.vehiclePlatCatas"
:key="item.id"
class="base-set-name">{{ item.name }}</span>
</div>
</div>
<div
id="lastestDubbing"
class="scroll1" >
<div class="base-set">
房车图片
</div>
<div
class="bt-line"
v-html="detail.modelsDetails"/>
</div>
<div
id="rankLlistDetail"
class="scroll3">
<div class="base-set" >
租车须知
</div>
<div
class="bt-line"
v-html="notice"/>
</div>
<div
id="modelsDetails"
class="scroll2">
<div class="base-set">
房车参数
</div>
<div style="padding-bottom: 20px;">
<div
v-for="iitem in detail.modelParam"
:key="iitem.key"
class="flex-aic modal-item">
<div class="left-item ellipsis color-666">{{ iitem.key }}</div>
<div class="right-item ellipsis color-666">{{ iitem.val }}</div>
</div>
</div>
</div>
</div>
</div>
<detail-footer-btn/>
<go-top/>
</div>
</template>
<script>
import axios from '../../plugins/axios'
import Head from "~/components/head";
import DetailBanner from '~/components/detailBanner'
import GoTop from "~/components/goTop";
import DetailFooterBtn from "~/components/detailFooterBtn";
export default {
components: {
Head,
DetailBanner,
GoTop,
DetailFooterBtn
},
data() {
return {
selected: "goods",
seller: {},
showBanner: !0,
looptime: 4000, // 循环时间
touchend: false,////没有更多数据
dataType: [],
totalCount: "",
dataDetail: [],
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
active: 'activity',
searchBarFixed:false,
};
},
async asyncData({ route }) {
const { data } = await axios.get('/api/uccn/vehicleModel/app/unauth/detail/'+route.query.name);
let user = data.data;
data.data.modelsDetails = data.data.modelsDetails.replace(/<img/g,"<img style='width:100%'");
data.data.modelParam = JSON.parse(data.data.modelParam );
let pic = data.data.picture.split(",");
user.pictureList = pic;
user.pictureNum = pic.length;
user.buyPrice = parseFloat((user.buyPrice/10000).toFixed(2));
user.userMemberLevel.map(function(item){
item.price = parseFloat((item.discount/100*user.price).toFixed(2));
item.disPrice = parseFloat((user.price-item.price).toFixed(2))
});
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let tempBannerData = await axios.get( '/api/uccn/random/list/app/unauth/get?type=1');
let hot = tempBannerData.data.data;
hot.map(function(item){
item.link = encodeURI('/vehicleList/' + item.id+'?name='+item.name);
item.link = encodeURI(item.link)
item.pictureList = item.picture.split(",");
item.coverPic = item.coverPic?item.coverPic: item.pictureList.length>0?item.pictureList[0]:'';
});
let noticeData = await axios.get( '/api/app/cofig/app/unauth/types?types=6');
let notice = noticeData.data.data;
notice[0].value = notice[0].value.replace(/<ul/g,"<ul style='width:100% !important;'");
return {detail: user, hotList: hot, notice: notice[0].value}
},
created() {
window.addEventListener('scroll', this.handleScroll);
},
methods: {
// 点击下一页回调
prev () {},
// 点击下一页回调
next () {},
// 鼠标移入状态点回调
changeBanner () {},
bannerClick () {},
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path == '/vehicleList'){
var menuTop = document.querySelector('#nav').offsetTop;
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop+180) {
this.searchBarFixed = true;
}
//滑动到指定位置相应菜单高亮
var top1 = document.querySelector('#activityIntro').offsetTop;
var top2 = document.querySelector('#lastestDubbing').offsetTop;
var top3 = document.querySelector('#rankLlistDetail').offsetTop;
var top4 = document.querySelector('#modelsDetails').offsetTop;
if (scrollTop < top1+180) {
this.active = 'activity';
this.searchBarFixed = false;
}
if (scrollTop < top2+180) {
this.active = 'activity';
} else if (scrollTop >= top2+180 && scrollTop < top3+180) {
this.active = 'lastest';
} else if (scrollTop >= top3+180 && scrollTop < top4+180) {
this.active = 'rank';
} else if (scrollTop >= top4+180) {
this.active = 'model';
}
}
},
lastest(){//房车图片
this.active = "lastest";
let top1 = document.querySelector('#lastestDubbing').offsetTop;
let top = document.querySelector('#activityIntro').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 +180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1+135;
}
this.searchBarFixed = true;
},
activity(){
//基础配置
this.active = "activity";
let top = document.querySelector('#nav').offsetTop;
var top1 = document.querySelector('#activityIntro').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 +180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1 +135;
}
this.searchBarFixed = true;
},
rank(){
//租车须知
this.active = "rank";
let top1 = document.querySelector('#rankLlistDetail').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 +180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1 +135;
}
this.searchBarFixed = true;
},
modelClick(){
//房车参数
this.active = "model";
let top1 = document.querySelector('#modelsDetails').offsetTop;
if(this.searchBarFixed){
document.body.scrollTop = document.documentElement.scrollTop = top1 +180;
} else {
document.body.scrollTop = document.documentElement.scrollTop = top1+135;
}
this.searchBarFixed = true;
},
},
};
</script>
<style lang="scss">
@import "../../assets/styles/mixin";
.vehicle-detail-page {
font-size: px2rem(24px);
.detail-main-container{
padding-bottom: 60px;
border-radius: 7px 7px 0 0;
box-shadow: 0px 0px 13px #666;
margin-top: -10px;
z-index: 99;
position: relative;
background: #fff;
.vehicle-detail-name{
padding: 17px px2rem(20px) 0 px2rem(20px);
font-size: 18px;
font-weight: bold;
}
.vehicle-detail-config{
padding: 0 px2rem(20px);
border-bottom: 1px solid #eee;
.config{
margin-right: 30px;
margin-bottom: 17px;
margin-top: 8px;
color: #666;
}
}
.vehicle-lower{
padding: 0 px2rem(20px);
font-size: px2rem(30px);
margin-top: 17px;
margin-bottom: 10px;
span{
color: #F25B5B;
font-size: px2rem(36px);
font-weight: bold;
margin-left: px2rem(30px);
margin-right: px2rem(4px);
}
}
.member-list{
padding: 0 px2rem(20px);
}
.member-list-c img{
width: 20px;
height: 20px;
margin-right: px2rem(20px);
}
.member-list-name{
color: #666;
font-size:px2rem(26px);
margin-bottom: 6px;
}
.market-price{
font-size: px2rem(30px);
margin: 17px 0;
padding: 0 px2rem(20px);
}
.detail-list{
height: px2rem(100px);
}
.select-tab{
width: 100%;
.select-tab-li-l{
font-size:14px;
color: #999;
padding: 0 px2rem(20px);
}
.select-tab-li-l.active{
color: #333;
font-weight: bold;
font-size: 16px;
height: px2rem(100px);
line-height: px2rem(100px);
border-bottom: 2px solid #1bbb9f;
}
}
.scroll0, .scroll1, .scroll2, .scroll3{
padding: 0 px2rem(20px);
.base-set{
margin: 15px 0 10px 0;
font-size: 16px;
font-weight: bold;
}
.base-set-name{
font-size: 13px;
color: #666;
padding: 0 10px 6px 0;
}
}
.mint-navbar {
position: sticky;
top: 0;
z-index: 20;
.mint-tab-item-label {
font-size: px2rem(30px);
}
.mint-tab-item {
padding: 10px 0;
&.is-selected {
color: inherit;
border: none;
position: relative;
&::after {
content: " ";
display: inline-block;
@include wh(20%, 2px);
background: #2395ff;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
}
.left-item{
width: 30%;
border-left: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
height: 34px;
padding-left: 10px;
line-height: 34px;
}
.right-item{
width:70%;
border-right: 1px solid #ccc;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.modal-item{
border-top:1px solid #ccc;
}
.modal-item:last-child{
border-bottom: 1px solid #ccc;
}
}
}
</style>
......@@ -252,7 +252,7 @@
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path == '/vehicleDetail'){
if(path == '/vehicleList'){
var menuTop = document.querySelector('#nav').offsetTop;
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop+180) {
......
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