Skip to content

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

旅游和营地

parent 95ba7ef8
Hide whitespace changes
Inline Side-by-side
Showing with 714 additions and 142 deletions
pages/campsite.vue
View file @ 88fb151f
...@@ -2,12 +2,23 @@ ...@@ -2,12 +2,23 @@
<div> <div>
<menu-modal></menu-modal> <menu-modal></menu-modal>
<div class="main-container"> <div class="main-container">
<banner
v-if="showBanner"
:list = "bannerList"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
:fontSize="fontSize"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</banner>
<div class="wrap"> <div class="wrap">
<div class="banner"> <div class="clearfix" style="background-color: #fff;padding:5px 10px">
<h2>娱乐营地</h2>
<h3>娱乐休息俩不误</h3>
</div>
<div class="clearfix">
共{{totalCount}}个房车营地 共{{totalCount}}个房车营地
<select <select
@change="chooseSelect($event)" @change="chooseSelect($event)"
...@@ -18,8 +29,9 @@ ...@@ -18,8 +29,9 @@
<option value>全部</option> <option value>全部</option>
</select> </select>
</div> </div>
<ul class="campsiteDetail clearfix"> <h3 v-if="dataNull" style="margin:10px 0;margin-bottom:60px;background-color: #fff;padding:20px">暂无信息</h3>
<li v-for="(item,idx) in dataDetail" :key="idx" style="padding:0 30px;margin-bottom:60px"> <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">
<img :src="item.logo" alt style="width:100%;height:223px" /> <img :src="item.logo" alt style="width:100%;height:223px" />
<h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2> <h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2>
<nuxt-link :to="'/campsiteDetails/'+item.id"> <nuxt-link :to="'/campsiteDetails/'+item.id">
...@@ -27,9 +39,9 @@ ...@@ -27,9 +39,9 @@
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
<div class="right"> <!-- <div class="right">
<nuxt-child :key="$route.params.id" /> <nuxt-child :key="$route.params.id" />
</div> </div> -->
</div> </div>
</div> </div>
<footer-modal></footer-modal> <footer-modal></footer-modal>
...@@ -40,24 +52,34 @@ ...@@ -40,24 +52,34 @@
import axios from "axios"; import axios from "axios";
import menuModal from "../components/menu"; import menuModal from "../components/menu";
import footerModal from "../components/footer"; import footerModal from "../components/footer";
import banner from "../components/banner"
export default { export default {
transition: "bounce", transition: "bounce",
components: { components: {
menuModal, menuModal,
footerModal footerModal,
banner
}, },
data() { data() {
return { return {
showBanner: !0,
looptime: 4000, // 循环时间
typeId: "营地类型", typeId: "营地类型",
dataType: [], dataType: [],
totalCount: "", totalCount: "",
dataDetail: [], dataDetail: [],
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
listQuery: { listQuery: {
type: "", type: "",
pageNo: 1, pageNo: 1,
pageSize: 6 pageSize: 6
}, },
store: "" store: "",
dataNull:false
}; };
}, },
created() { created() {
...@@ -68,7 +90,7 @@ export default { ...@@ -68,7 +90,7 @@ export default {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件 window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
}, },
methods: { methods: {
chooseSelect(e) { chooseSelect(e) {
console.log(e.target.value); console.log(e.target.value);
this.listQuery.type = e.target.value; this.listQuery.type = e.target.value;
...@@ -76,7 +98,7 @@ export default { ...@@ -76,7 +98,7 @@ export default {
}, },
goDetails() { goDetails() {
console.log(2222222); console.log(2222222);
}, },
async getType() { async getType() {
const { const {
...@@ -94,9 +116,28 @@ export default { ...@@ -94,9 +116,28 @@ export default {
`https://dev.dfangche.com/api/uccn/app/unauth/campsite/shops?type=${this.listQuery.type}&pageNo=${this.listQuery.pageNo}&pageSize=${this.listQuery.pageSize}` `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); // console.log(data);
this.totalCount = data.totalCount; if(!data.data.length == 0){
this.dataDetail = data.data; this.totalCount = data.totalCount;
this.dataDetail = data.data;
this.dataNull = false
}else{
this.totalCount = 0;
this.dataDetail = data.data;
this.dataNull = true
}
// this.dataDetail = this.dataDetail.push(data.data); // this.dataDetail = this.dataDetail.push(data.data);
},
// 点击下一页回调
prev () {
},
// 点击下一页回调
next () {
},
// 鼠标移入状态点回调
changeBanner () {
},
bannerClick () {
}, },
mounted() { mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件 window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
...@@ -114,14 +155,19 @@ export default { ...@@ -114,14 +155,19 @@ export default {
//           console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight); //           console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
// this.listQuery.pageNo++; // this.listQuery.pageNo++;
// this.getAll(); // this.getAll();
              }                 }  
} }
}, },
head: { head: {
title: "房车营地" title: "房车营地"
} },
async asyncData() {
const { data } = await axios.get('https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=2&platform=1');
let cc = data.data;
return { bannerList: cc}
},
// async asyncData({store,listQuery}) { // async asyncData({store,listQuery}) {
// let [dataType,dataDetail] = await Promise.all([ // let [dataType,dataDetail] = await Promise.all([
// axios.get("https://dev.dfangche.com/api/campsite/campsiteTag/app/unauth/tags"), // axios.get("https://dev.dfangche.com/api/campsite/campsiteTag/app/unauth/tags"),
...@@ -151,12 +197,11 @@ export default { ...@@ -151,12 +197,11 @@ export default {
.clearfix { .clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
} }
/*.wrap {*/
/*background-color: #fff;*/ .wrap {
/*padding: 0 200px;*/ padding: 0 0;
/*}*/ }
.banner { /* .banner {
/* background-color: #fff; */
text-align: center; text-align: center;
} }
...@@ -171,21 +216,20 @@ export default { ...@@ -171,21 +216,20 @@ export default {
padding-top: 20px; padding-top: 20px;
font-weight: 400; font-weight: 400;
padding-bottom: 40px; padding-bottom: 40px;
} } */
.campsiteDetail { .campsiteDetail {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
margin-top: 60px; margin-top: 10px;
} }
.campsiteDetail li { .campsiteDetail li {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
width: 33%; width: 30%;
float: left; float: left;
} }
...@@ -204,4 +248,4 @@ export default { ...@@ -204,4 +248,4 @@ export default {
color: white; /* 字体颜色 */ color: white; /* 字体颜色 */
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
\ No newline at end of file
pages/campsiteDetails/_id.vue
View file @ 88fb151f
...@@ -4,13 +4,17 @@ ...@@ -4,13 +4,17 @@
<div class="main-container"> <div class="main-container">
<div class="wrap"> <div class="wrap">
<div>面包屑</div> <div>面包屑</div>
<div class="clearfix"> <div class="clearfix" style="background-color: #fff;padding:20px">
<div style="float:left;width:50%"> <div style="float:left;width:50%">
<div class="gallery-top-box" style="width:100%"> <div class="gallery-top-box" style="width:100%">
<div class="swiper-container gallery-top" ref="mySwiper"> <div class="swiper-container gallery-top" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper" style="height:450px">
<div class="swiper-slide" v-for="(item,idx) in campsiteShopCarouselDetailVos" :key="idx"> <div
<img :src="item.imgUrl" style="width:100%"> class="swiper-slide"
v-for="(item,idx) in campsiteShopCarouselDetailVos"
:key="idx"
>
<img :src="item.imgUrl" style="width:100%" />
</div> </div>
</div> </div>
<div class="swiper-button-next swiper-button-black"></div> <div class="swiper-button-next swiper-button-black"></div>
...@@ -19,22 +23,69 @@ ...@@ -19,22 +23,69 @@
<div class="gallery-thumbs-box"> <div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs"> <div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper swiper-wrapper-thu"> <div class="swiper-wrapper swiper-wrapper-thu">
<div class="swiper-slide" v-for="(item,index) in campsiteShopCarouselDetailVos" :key="index" @click="changeImgIndex(index,campsiteShopCarouselDetailVos.length)"> <div
<img :src="item.imgUrl" :class="preIndex==index?'active':''" alt="" style="width:100%"> class="swiper-slide"
v-for="(item,index) in campsiteShopCarouselDetailVos"
:key="index"
@click="changeImgIndex(index,campsiteShopCarouselDetailVos.length)"
>
<img
:src="item.imgUrl"
:class="preIndex==index?'active':''"
alt
style="width:100%"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="float:left;margin-left:20px"> <div style="float:left;padding-left:50px;width:50%">
<h1>[{{name}}]</h1> <h2>{{name}}</h2>
<h3>{{address}}</h3> <h3 style="font-weight: 400;margin-left:20px;font-size:16px;margin-top:10px">{{address}}</h3>
<div style="margin-top:90%"> <div style="margin-top:20%" class="clearfix">
<button class="buttonDetails">预定营地</button> <button class="buttonDetails" @click="visiblePic()" style="float:left;width:30%">预定营地</button>
<img :src="logo" style="width:100px;margin-left:50px"> <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" />
<p>
安卓用户扫码下载
滴房车APP可预订
</p>
</div>
<div style="float:left;width:40%;margin-left:5%">
<img :src="logo" style="width:100%;vertical-align:top" />
<p>
微信扫码进入
欣新房车助手可预订
</p>
</div>
</div> </div>
</div> </div>
</div>
</div>
<div class="clearfix" style="margin-top:40px;">
<div style="float:left;width:70%;background-color: #fff;padding:20px">
营地详情
<div v-html="content">
</div>
配套设施收费
<div v-html="configure">
</div>
预定须知
<div v-html="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>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -43,81 +94,115 @@ ...@@ -43,81 +94,115 @@
</template> </template>
<script> <script>
import axios from 'axios' import axios from "axios";
import menuModal from "../../components/menu" import menuModal from "../../components/menu";
import footerModal from "../../components/footer" import footerModal from "../../components/footer";
import Swiper from 'swiper'; import Swiper from "swiper";
import 'swiper/dist/css/swiper.min.css'; import "swiper/dist/css/swiper.min.css";
// import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData'; // import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData';
export default { export default {
transition: 'bounce', transition: "bounce",
components: { components: {
menuModal, menuModal,
footerModal footerModal
}, },
data(){ created() {
return{ this.getNode();
lengthPic:0, this.toHot();
preIndex: 0,//当前轮播选中图 this.getHot()
} },
}, data() {
validate ({ params }) { return {
console.log(params.id); lengthPic: 0,
return !isNaN(+params.id) preIndex: 0, //当前轮播选中图
}, visible: false,
async asyncData({ env, params, error}) { value:"",
const { data } = await axios.get( env.host + '/api/uccn/app/unauth/campsite/shop?id='+params.id); hotList:[]
let user = data.data; };
let campsiteShop = user.campsiteShopCarouselDetailVos; },
console.log(user); 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);
if (!user) { if (!user) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: "User not found", statusCode: 404 });
} }
return user return user;
}, },
methods:{ methods: {
changeImgIndex(index,length){ changeImgIndex(index, length) {
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true); this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true);
this.lengthPic = length; this.lengthPic = length;
console.log(this.lengthPic); // console.log(this.lengthPic);
},
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;
}, },
mounted(){ 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
}
},
mounted() {
let t = this; let t = this;
let galleryThumbs = new Swiper('.gallery-thumbs', { let galleryThumbs = new Swiper(".gallery-thumbs", {
spaceBetween: 10, spaceBetween: 10,
slidesPerView: 5, slidesPerView: 5,
freeMode: true, freeMode: true,
watchSlidesVisibility: true, watchSlidesVisibility: true,
watchSlidesProgress: true, watchSlidesProgress: true
}); });
let galleryTop = new Swiper('.gallery-top', { let galleryTop = new Swiper(".gallery-top", {
spaceBetween: 10, spaceBetween: 10,
loop:true, loop: true,
on: { on: {
slideChangeTransitionEnd: function () { slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex-1; t.preIndex = this.activeIndex - 1;
if(t.preIndex == 5){ if (t.preIndex == 5) {
t.preIndex = 0 t.preIndex = 0;
} }
console.log(this.activeIndex) console.log(this.activeIndex);
}, }
}, },
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: ".swiper-button-next",
prevEl: '.swiper-button-prev', prevEl: ".swiper-button-prev"
}, },
thumbs: { thumbs: {
swiper: galleryThumbs swiper: galleryThumbs
} }
}); });
}, },
head: { head: {
title: '营地详情' title: "营地详情"
}
} }
};
</script> </script>
<style scoped> <style scoped>
...@@ -132,34 +217,29 @@ ...@@ -132,34 +217,29 @@
.clearfix { .clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
} }
/*.wrap {*/ .wrap {
/*background-color: #fff;*/
/*padding: 0 200px;*/ padding: 0 10%;
/*}*/ }
.gallery-top img {
</style> width: 100%;
}
<style scoped> .swiper-container{
.swiper-container { width: 100%
height: auto; }
} .swiper-wrapper-thu {
.gallery-top img{ /*max-width: 293px;*/
width: 100%; margin: 0 !important;
} }
.swiper-wrapper-thu{ .swiper-wrapper-thu img {
/*max-width: 293px;*/ width: 100%;
margin: 0 !important; border: 2px solid #fff;
} }
.swiper-wrapper-thu img{ .swiper-wrapper-thu img.active {
width: 100%; border: 2px solid #1bbb9f;
border: 2px solid #fff; padding: 5px;
} }
.swiper-wrapper-thu img.active{ .buttonDetails {
border: 2px solid #1bbb9f;
padding: 5px;
}
.buttonDetails {
width: 156px; /* 宽度 */
height: 35px; /* 高度 */ height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */ border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */ background: #1bbb9f; /* 背景颜色 */
...@@ -167,6 +247,18 @@ ...@@ -167,6 +247,18 @@
outline: none; /* 不显示轮廓线 */ outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */ font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */ color: white; /* 字体颜色 */
margin-left: 10px; }
.buttonDetail{
width: 150px;
height: 35px; /* 高度 */
border: 1px solid #1bbb9f;
background-color: #fff;
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: #1bbb9f; /* 字体颜色 */
} }
</style> </style>
\ No newline at end of file
pages/tour.vue
View file @ 88fb151f
...@@ -2,12 +2,47 @@ ...@@ -2,12 +2,47 @@
<div> <div>
<menu-modal></menu-modal> <menu-modal></menu-modal>
<div class="main-container"> <div class="main-container">
<banner
v-if="showBanner"
:list = "bannerList"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
:fontSize="fontSize"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</banner>
<div class="wrap"> <div class="wrap">
<div class="banner"> <div class="clearfix" style="background-color: #fff;padding:5px 10px">
<p>精选热门房车旅行路线</p> 共{{totalCount}}个旅行路线
<p>寻找适合你的旅游线路</p> <select
@change="chooseSelect($event)"
style="width:180px;text-align:center;height:30px;float:right"
>
<option value>旅行类型</option>
<option v-for="item in dataType" :value="item.id" :key="item.id">{{ item.name }}</option>
<option value>全部</option>
</select>
</div> </div>
<p>这里是房车旅游</p> <h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
<ul class="campsiteDetail" v-if="!dataNull">
<li class="clearfix" v-for="(item,index) in dataDetail" :key="index" style="margin:20px 0;background-color: #fff;padding:20px">
<div style="float:left;width:30%"><img :src="item.cover" alt style="width:100%;height:193px"/></div>
<div style="float:left;width:70%;padding-left:30px">
<h2 style="font-size: 18px">{{item.name}}</h2>
<h6 style="font-size: 16px;font-weight:400;margin:35px 8px">{{item.describe}}</h6>
<nuxt-link :to="'/tourDetails/'+item.id">
<button class="buttonDetails">旅游详情</button>
</nuxt-link>
</div>
</li>
</ul>
</div> </div>
</div> </div>
<footer-modal></footer-modal> <footer-modal></footer-modal>
...@@ -18,37 +53,137 @@ ...@@ -18,37 +53,137 @@
import axios from 'axios' import axios from 'axios'
import menuModal from "../components/menu" import menuModal from "../components/menu"
import footerModal from "../components/footer" import footerModal from "../components/footer"
import banner from "../components/banner"
export default { export default {
transition: 'bounce', transition: 'bounce',
components: { components: {
menuModal, menuModal,
footerModal footerModal,
banner
},
created() {
this.getType();
this.getAll();
},
data(){
return{
showBanner: !0,
looptime: 4000, // 循环时间
typeId: "营地类型",
dataType: [],
totalCount: "",
dataDetail: [],
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
listQuery: {
tagId: "",
page: 1,
limit: 10
},
store: "",
dataNull:false
};
},
methods:{
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.tagId = e.target.value;
this.getAll();
},
async getType() {
const {
data: { data }
} = await axios.get(
"https://dev.dfangche.com/api/uccn/app/unauth/tour/tagList"
);
// console.log(data);
this.dataType = data;
},
async getAll() {
let {
data: { data }
} = await axios.get(
`https://dev.dfangche.com/api/uccn/app/unauth/tour/getGoodList?tagId=${this.listQuery.tagId}&page=${this.listQuery.page}&limit=${this.listQuery.limit}`
);
console.log(data);
if(!data.data.length == 0){
this.totalCount = data.totalCount;
this.dataDetail = data.data;
this.dataNull = false
}else{
this.totalCount = 0;
this.dataDetail = data.data;
this.dataNull = true
}
// this.dataDetail = this.dataDetail.push(data.data);
},
// 点击下一页回调
prev () {
},
// 点击下一页回调
next () {
},
// 鼠标移入状态点回调
changeBanner () {
},
bannerClick () {
},
}, },
// async asyncData({}) {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/campsite/campsiteShop/app/unauth/webchat_official/campsites');
// let cc = data.data;
// return { users: cc}
// },
head: { head: {
title: '房车旅游' title: '房车旅游'
} },
async asyncData() {
const { data } = await axios.get('https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=1&platform=1');
let cc = data.data;
return { bannerList: cc}
},
} }
</script> </script>
<style scoped> <style scoped>
.banner{ .clearfix:after {
background-color: #fff; /*伪元素是行内元素 正常浏览器清除浮动方法*/
text-align: center; content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.wrap {
/* background-color: #fff; */
padding: 0 5%;
}
.campsiteDetail {
padding: 0;
margin: 0;
list-style: none;
} }
.banner p:nth-child(1){ .campsiteDetail li {
font-size: 20px; padding: 20px;
font-weight: 700; margin: 50px 0;
padding-top:40px; list-style: none;
height: 233px;
} }
.banner p:nth-child(2){ .buttonDetails {
padding-top:20px; width: 130px; /* 宽度 */
padding-bottom:40px; height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin-left: 10px;
margin-top: 15px;
} }
</style> </style>
\ No newline at end of file
pages/tourDetails/_id.vue 0 → 100644
View file @ 88fb151f
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<div class="bread-menu">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/tourDetails">房车旅行></nuxt-link>
<!-- <span>{{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%">
<div class="swiper-container gallery-top" ref="mySwiper">
<div class="swiper-wrapper" style="height:450px">
<div
class="swiper-slide"
v-for="(item,idx) in bannerDTOS"
:key="idx"
>
<img :src="item.cover" style="width:100%" />
</div>
</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 bannerDTOS"
:key="index"
@click="changeImgIndex(index,cover.length)"
>
<img
:src="item.cover"
:class="preIndex==index?'active':''"
alt
style="width:100%"
/>
</div>
</div>
</div>
</div>
</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> -->
<div style="margin-top:50%" 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" />
<p>
安卓用户扫码下载
滴房车APP可预订
</p>
</div>
<div style="float:left;width:40%;margin-left:5%">
<img :src="cover" style="width:100%;vertical-align:top" />
<p>
微信扫码进入
欣新房车助手可预订
</p>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix" style="margin-top:40px">
<div style="float:left;width:70%;background-color:#fff;padding:20px">
营地详情
<div v-html="content">
</div>
配套设施收费
<div v-html="introduce">
</div>
预定须知
<div v-html="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%">
<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>
</div>
</div>
</div>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from "axios";
import menuModal from "../../components/menu";
import footerModal from "../../components/footer";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
// import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData';
export default {
transition: "bounce",
components: {
menuModal,
footerModal
},
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);
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);
this.lengthPic = length;
console.log(this.lengthPic);
},
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
}
},
mounted() {
let t = this;
let galleryThumbs = new Swiper(".gallery-thumbs", {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true
});
let galleryTop = new Swiper(".gallery-top", {
spaceBetween: 10,
loop: true,
on: {
slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex - 1;
if (t.preIndex == 5) {
t.preIndex = 0;
}
console.log(this.activeIndex);
}
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
thumbs: {
swiper: galleryThumbs
}
});
},
head: {
title: "营地详情"
}
};
</script>
<style scoped>
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.wrap {
/* background-color: #fff; */
padding: 0 10%;
}
.gallery-top img {
width: 100%;
}
.swiper-container{
width: 100%
}
.swiper-wrapper-thu {
/*max-width: 293px;*/
margin: 0 !important;
}
.swiper-wrapper-thu img {
width: 100%;
border: 2px solid #fff;
}
.swiper-wrapper-thu img.active {
border: 2px solid #1bbb9f;
padding: 5px;
}
.buttonDetails {
width: 150px;
height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
}
.buttonDetail{
width: 150px;
height: 35px; /* 高度 */
border: 1px solid #1bbb9f;
background-color: #fff;
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: #1bbb9f; /* 字体颜色 */
}
.tabContent {
padding: 0;
margin: 0;
list-style: none;
}
.tabContent li {
padding: 0;
margin: 0;
list-style: none;
width: 32%;
float: left;
}
</style>
\ No newline at end of file
pages/tourDetails/tourDetails.vue 0 → 100644
View file @ 88fb151f
<template>
<h2>Please select an user.</h2>
</template>
<script>
export default {
head: {
title: 'Please select an user'
}
}
</script>
<style scoped>
h2 {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
}
</style>
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