Skip to content

V
vue-ssr
Commit d487c3a7 authored by linjw's avatar linjw
Browse files
Options

修改营地，旅游

parent 9059aaa7
Hide whitespace changes
Inline Side-by-side
Showing with 195 additions and 137 deletions
pages/campsite.vue
View file @ d487c3a7
......@@ -31,10 +31,10 @@
</div>
<h3 v-if="dataNull" style="margin:10px 0;margin-bottom:60px;background-color: #fff;padding:20px">暂无信息</h3>
<ul class="campsiteDetail clearfix" v-if="!dataNull">
<li v-for="(item,idx) in dataDetail" :key="idx" style="margin:15px 10px;background-color: #fff;padding:20px">
<li v-for="(item,idx) in dataDetail" :key="idx" style="margin:15px 10px;background-color: #fff;padding:20px" class="vehicle-item">
<img :src="item.logo" alt style="width:100%;height:223px" />
<h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2>
<nuxt-link :to="'/campsiteDetails/'+item.id">
<h2 style="font-size: 16px;margin:10px 0">{{ item.name }}</h2>
<nuxt-link :to="item.link">
<button class="buttonDetails">营地详情</button>
</nuxt-link>
</li>
......@@ -76,7 +76,7 @@ export default {
listQuery: {
type: "",
pageNo: 1,
pageSize: 6
pageSize: 100
},
store: "",
dataNull:false
......@@ -116,6 +116,13 @@ export default {
`https://dev.dfangche.com/api/uccn/app/unauth/campsite/shops?type=${this.listQuery.type}&pageNo=${this.listQuery.pageNo}&pageSize=${this.listQuery.pageSize}`
);
// console.log(data);
data.data.map(function(item){
// item.modelParam = JSON.parse( item.modelParam);
item.link = encodeURI('/campsiteDetails/' + 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]:'';
});
if(!data.data.length == 0){
this.totalCount = data.totalCount;
this.dataDetail = data.data;
......
pages/campsiteDetails/_id.vue
View file @ d487c3a7
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="main-container" style="margin-top: 110px;">
<div class="wrap">
<div>面包屑</div>
<div class="bread-menu">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/campsite">房车营地></nuxt-link>
<span>{{detail.name}}</span>
</div>
<div class="clearfix" style="background-color: #fff;padding:20px">
<div style="float:left;width:50%">
<div class="gallery-top-box" style="width:100%">
......@@ -11,23 +15,23 @@
<div class="swiper-wrapper" style="height:450px">
<div
class="swiper-slide"
v-for="(item,idx) in campsiteShopCarouselDetailVos"
v-for="(item,idx) in detail.pictureList"
:key="idx"
>
<img :src="item.imgUrl" style="width:100%" />
</div>
</div>
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<!-- <div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div> -->
</div>
<div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper swiper-wrapper-thu">
<div
class="swiper-slide"
v-for="(item,index) in campsiteShopCarouselDetailVos"
v-for="(item,index) in detail.pictureList"
:key="index"
@click="changeImgIndex(index,campsiteShopCarouselDetailVos.length)"
@click="changeImgIndex(index,detail.pictureList.length)"
>
<img
:src="item.imgUrl"
......@@ -42,20 +46,20 @@
</div>
</div>
<div style="float:left;padding-left:50px;width:50%">
<h2>{{name}}</h2>
<h3 style="font-weight: 400;margin-left:20px;font-size:16px;margin-top:10px">{{address}}</h3>
<h2>{{detail.name}}</h2>
<h3 style="font-weight: 400;margin-left:20px;font-size:16px;margin-top:10px">{{detail.address}}</h3>
<div style="margin-top:20%" class="clearfix">
<button class="buttonDetails" @click="visiblePic()" style="float:left;width:30%">预定营地</button>
<div style="float:left;width:60%" class="clearfix" v-if="visible">
<div style="float:left;width:40%;margin-left:5%">
<img :src="logo" style="width:100%;vertical-align:top" />
<img :src="detail.logo" style="width:100%;vertical-align:top" />
<p>
安卓用户扫码下载
滴房车APP可预订
</p>
</div>
<div style="float:left;width:40%;margin-left:5%">
<img :src="logo" style="width:100%;vertical-align:top" />
<img :src="detail.logo" style="width:100%;vertical-align:top" />
<p>
微信扫码进入
欣新房车助手可预订
......@@ -68,22 +72,23 @@
<div class="clearfix" style="margin-top:40px;">
<div style="float:left;width:70%;background-color: #fff;padding:20px">
营地详情
<div v-html="content">
<h3>营地详情</h3>
<div v-html="detail.content">
</div>
配套设施收费
<div v-html="configure">
<h3 style="margin-top:30px">配套设施收费</h3>
<div v-html="detail.configure">
</div>
预定须知
<div v-html="value">
<h3 style="margin-top:30px">预定须知</h3>
<div v-html="notice[0].value">
</div>
</div>
<div style="float:left;width:27%;margin-left:3%;background-color:#fff;text-align:center">
<h3 style="height:40px;font-weight:400;line-height:40px;border-bottom:1px solid #ccc">热门旅行</h3>
<div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:20px 50px">
<img :src="item.banner" alt="" style="width:100%">
<h5 style="overflow: hidden;text-overflow:ellipsis;width:100%;margin:10px 0">{{item.title}}</h5>
<button class="buttonDetail" style="margin-bottom:20px" @click="toHot(item.id)">营地详情</button>
<img :src="item.imgUrl" alt="" style="width:100%">
<h5 style="overflow: hidden;text-overflow:ellipsis;width:100%;margin:10px 0">{{item.name}}</h5>
<nuxt-link :to="item.link"><button class="buttonDetail" style="margin-bottom:20px">营地详情</button></nuxt-link>
</div>
</div>
</div>
......@@ -107,36 +112,61 @@ export default {
footerModal
},
created() {
this.getNode();
this.toHot();
this.getHot()
// this.getNode();
// this.toHot();
// this.getHot()
},
data() {
return {
lengthPic: 0,
preIndex: 0, //当前轮播选中图
visible: false,
value:"",
hotList:[]
};
},
validate({ params }) {
console.log(params.id);
return !isNaN(+params.id);
},
async asyncData({ env, params, error }) {
const { data } = await axios.get(
env.host + "/api/uccn/app/unauth/campsite/shop?id=" + params.id
);
let user = data.data;
let campsiteShop = user.campsiteShopCarouselDetailVos;
// console.log(user);
async asyncData({ env, params, route, error}) {
const { data } = await axios.get( env.host + "/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%'");
// data.data.modelParam = JSON.parse(data.data.modelParam );
let pic = data.data.campsiteShopCarouselDetailVos;
user.pictureList = pic;
user.pictureNum = pic.length;
console.log(pic);
console.log(user);
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let tempBannerData = await axios.get( env.host + '/api/uccn/random/list/app/unauth/get?type=3');
let hot = tempBannerData.data.data;
hot.map(function(item){
item.link = encodeURI('/campsiteDetails/' + item.id+'?name='+item.title);
item.link = encodeURI(item.link)
});
console.log(hot);
let noticeData = await axios.get( env.host + '/api/app/cofig/app/unauth/types?types=13');
let notice = noticeData.data.data;
return {detail: user, hotList: hot, notice: notice}
},
// async asyncData({ env, params, error }) {
// const { data } = await axios.get(
// env.host + "/api/uccn/app/unauth/campsite/shop?id=" + params.id
// );
// let user = data.data;
// let campsiteShop = user.campsiteShopCarouselDetailVos;
// // console.log(user);
if (!user) {
return error({ message: "User not found", statusCode: 404 });
}
return user;
},
// if (!user) {
// return error({ message: "User not found", statusCode: 404 });
// }
//
// return user;
// },
methods: {
changeImgIndex(index, length) {
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true);
......@@ -146,28 +176,25 @@ export default {
visiblePic() {
this.visible = !this.visible;
},
async getNode() {
const {
data: { data }
} = await axios.get(
"https://dev.dfangche.com/api/app/cofig/app/unauth/types?types=13"
);
// console.log(data[0].value);
this.value = data[0].value;
},
async getHot() {
const {
data: { data }
} = await axios.get(
"https://dev.dfangche.com/api/uccn/random/list/app/unauth/get?type=4&number&location=2"
);
console.log(data);
this.hotList = data
},
toHot(id){
// console.log(id);
// params.id = id
}
// async getNode() {
// const {
// data: { data }
// } = await axios.get(
// "https://dev.dfangche.com/api/app/cofig/app/unauth/types?types=13"
// );
// // console.log(data[0].value);
// this.value = data[0].value;
// },
// async getHot() {
// const {
// data: { data }
// } = await axios.get(
// "https://dev.dfangche.com/api/uccn/random/list/app/unauth/get?type=4&number&location=2"
// );
// console.log(data);
// this.hotList = data
// },
},
mounted() {
let t = this;
......@@ -181,19 +208,23 @@ export default {
let galleryTop = new Swiper(".gallery-top", {
spaceBetween: 10,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
on: {
slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex - 1;
if (t.preIndex == 5) {
if (t.preIndex == t.detail.pictureNum) {
t.preIndex = 0;
}
console.log(this.activeIndex);
// console.log(this.activeIndex);
}
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev"
// },
thumbs: {
swiper: galleryThumbs
}
......@@ -219,13 +250,13 @@ export default {
}
.wrap {
padding: 0 10%;
/* padding: 0 10%; */
}
.gallery-top img {
width: 100%;
}
.swiper-container{
width: 100%
height: auto;
}
.swiper-wrapper-thu {
/*max-width: 293px;*/
......
pages/tour.vue
View file @ d487c3a7
......@@ -83,7 +83,7 @@
listQuery: {
tagId: "",
page: 1,
limit: 10
limit: 100
},
store: "",
dataNull:false
......
pages/tourDetails/_id.vue
View file @ d487c3a7
......@@ -6,7 +6,7 @@
<div class="bread-menu">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/tour">房车旅行></nuxt-link>
<span>{{name}}</span>
<span>{{detail.name}}</span>
</div>
<div class="clearfix" style="background-color:#fff;padding:20px">
<div style="float:left;width:50%">
......@@ -15,7 +15,7 @@
<div class="swiper-wrapper" style="height:450px">
<div
class="swiper-slide"
v-for="(item,idx) in bannerDTOS"
v-for="(item,idx) in detail.pictureList"
:key="idx"
>
<img :src="item.cover" style="width:100%" />
......@@ -29,9 +29,9 @@
<div class="swiper-wrapper swiper-wrapper-thu">
<div
class="swiper-slide"
v-for="(item,index) in bannerDTOS"
v-for="(item,index) in detail.pictureList"
:key="index"
@click="changeImgIndex(index,cover.length)"
@click="changeImgIndex(index,detail.pictureList.length)"
>
<img
:src="item.cover"
......@@ -46,20 +46,20 @@
</div>
</div>
<div style="float:left;padding-left:50px;width:50%">
<h2>{{name}}</h2>
<h2>{{detail.name}}</h2>
<!-- <h3 style="font-weight: 400;margin-left:20px;font-size:16px;margin-top:10px">{{address}}</h3> -->
<div style="margin-top:50%" class="clearfix">
<div style="margin-top:20%" class="clearfix">
<button class="buttonDetails" @click="visiblePic()" style="float:left">预定营地</button>
<div style="float:left;width:60%" class="clearfix" v-if="visible">
<div style="float:left;width:40%;margin-left:5%">
<img :src="cover" style="width:100%;vertical-align:top" />
<img :src="detail.cover" style="width:100%;vertical-align:top" />
<p>
安卓用户扫码下载
滴房车APP可预订
</p>
</div>
<div style="float:left;width:40%;margin-left:5%">
<img :src="cover" style="width:100%;vertical-align:top" />
<img :src="detail.cover" style="width:100%;vertical-align:top" />
<p>
微信扫码进入
欣新房车助手可预订
......@@ -72,22 +72,23 @@
<div class="clearfix" style="margin-top:40px">
<div style="float:left;width:70%;background-color:#fff;padding:20px">
营地详情
<div v-html="content">
<h3>营地详情</h3>
<div v-html="detail.content">
</div>
配套设施收费
<div v-html="introduce">
<h3 style="margin-top:30px">配套设施收费</h3>
<div v-html="detail.introduce">
</div>
预定须知
<div v-html="value">
<h3 style="margin-top:30px">预定须知</h3>
<div v-html="notice[0].value">
</div>
</div>
<div style="float:left;width:27%;margin-left:3%;background-color:#fff;text-align:center">
<h3 style="height:40px;font-weight:400;line-height:40px;border-bottom:1px solid #ccc">热门旅行</h3>
<div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:20px 50px">
<img :src="item.imgUrl" alt="" style="width:100%">
<img :src="item.cover" alt="" style="width:100%">
<h5 style="overflow: hidden;text-overflow:ellipsis;width:100%;margin:10px 0">{{item.name}}</h5>
<button class="buttonDetail" style="margin-bottom:20px" @click="toHot(item.id)">营地详情</button>
<nuxt-link :to="item.link"><button class="buttonDetail" style="margin-bottom:20px" >旅游详情</button></nuxt-link>
</div>
</div>
</div>
......@@ -110,37 +111,62 @@ export default {
menuModal,
footerModal
},
created() {
this.getNode();
this.getHot();
},
// created() {
// this.getNode();
// this.getHot();
// },
data() {
return {
lengthPic: 0,
preIndex: 0, //当前轮播选中图
visible: false,
value:"",
hotList:[]
};
},
validate({ params }) {
console.log(params.id);
return !isNaN(+params.id);
},
async asyncData({ env, params, error }) {
console.log(params.id);
const { data } = await axios.get(
env.host + "/api/uccn/app/unauth/tour/detail/" + params.id
);
let user = data.data;
let campsiteShop = user.bannerDTOS;
// console.log(user);
async asyncData({ env, params, route, error}) {
const { data } = await axios.get( env.host + "/api/uccn/app/unauth/tour/detail/" + params.id);
let user = data.data;
// data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
// data.data.modelParam = JSON.parse(data.data.modelParam );
let pic = data.data.bannerDTOS;
user.pictureList = pic;
user.pictureNum = pic.length;
console.log(pic);
console.log(user);
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let tempBannerData = await axios.get( env.host + '/api/uccn/random/list/app/unauth/get?type=2');
let hot = tempBannerData.data.data;
hot.map(function(item){
item.link = encodeURI('/tourDetails/' + item.id+'?name='+item.name);
item.link = encodeURI(item.link)
});
console.log(hot);
let noticeData = await axios.get( env.host + '/api/app/cofig/app/unauth/types?types=14');
let notice = noticeData.data.data;
return {detail: user, hotList: hot, notice: notice}
},
// async asyncData({ env, params, error }) {
// console.log(params.id);
// const { data } = await axios.get(
// env.host + "/api/uccn/app/unauth/tour/detail/" + params.id
// );
// let user = data.data;
// let campsiteShop = user.bannerDTOS;
// // console.log(user);
if (!user) {
return error({ message: "User not found", statusCode: 404 });
}
return user;
},
// if (!user) {
// return error({ message: "User not found", statusCode: 404 });
// }
// return user;
// },
methods: {
changeImgIndex(index, length) {
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true);
......@@ -150,28 +176,25 @@ export default {
visiblePic() {
this.visible = !this.visible;
},
async getNode() {
const {
data: { data }
} = await axios.get(
"https://dev.dfangche.com/api/app/cofig/app/unauth/types?types=14"
);
// console.log(data[0].value);
this.value = data[0].value;
},
async getHot() {
const {
data: { data }
} = await axios.get(
"https://dev.dfangche.com/api/uccn/random/list/app/unauth/get?type=3&number&location=2"
);
console.log(data);
this.hotList = data
},
toHot(id){
console.log(id);
// params.id = id
}
// async getNode() {
// const {
// data: { data }
// } = await axios.get(
// "https://dev.dfangche.com/api/app/cofig/app/unauth/types?types=14"
// );
// // console.log(data[0].value);
// this.value = data[0].value;
// },
// async getHot() {
// const {
// data: { data }
// } = await axios.get(
// "https://dev.dfangche.com/api/uccn/random/list/app/unauth/get?type=3&number&location=2"
// );
// console.log(data);
// this.hotList = data
// },
},
mounted() {
let t = this;
......@@ -192,10 +215,10 @@ export default {
on: {
slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex - 1;
if (t.preIndex == 5) {
if (t.preIndex == t.detail.pictureNum) {
t.preIndex = 0;
}
console.log(this.activeIndex);
// console.log(this.activeIndex);
}
},
// navigation: {
......@@ -208,7 +231,7 @@ export default {
});
},
head: {
title: "营地详情"
title: "旅游详情"
}
};
</script>
......@@ -225,15 +248,12 @@ export default {
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.wrap {
/* background-color: #fff; */
/* padding: 0 10%; */
}
.gallery-top img {
width: 100%;
}
.swiper-container{
width: 100%
width: 100%;
}
.swiper-wrapper-thu {
/*max-width: 293px;*/
......
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