Skip to content

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

房车营地

parent 759eedd5
Show whitespace changes
Inline Side-by-side
Showing with 365 additions and 22 deletions
pages/campsite.vue
View file @ eb3b4b27
......@@ -3,7 +3,33 @@
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<p>这里是房车营地</p>
<div class="banner">
<h2>娱乐营地</h2>
<h3>娱乐休息俩不误</h3>
</div>
<div class="clearfix">
共{{totalCount}}个房车营地
<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>
<ul class="campsiteDetail clearfix">
<li v-for="(item,idx) in dataDetail" :key="idx" style="padding:0 30px;margin-bottom:60px">
<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">
<button class="buttonDetails">营地详情</button>
</nuxt-link>
</li>
</ul>
<div class="right">
<nuxt-child :key="$route.params.id" />
</div>
</div>
</div>
<footer-modal></footer-modal>
......@@ -11,23 +37,171 @@
</template>
<script>
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
export default {
transition: 'bounce',
import axios from "axios";
import menuModal from "../components/menu";
import footerModal from "../components/footer";
export default {
transition: "bounce",
components: {
menuModal,
footerModal
},
// async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data;
// return { users: cc}
// },
head: {
title: '房车营地'
data() {
return {
typeId: "营地类型",
dataType: [],
totalCount: "",
dataDetail: [],
listQuery: {
type: "",
pageNo: 1,
pageSize: 6
},
store: ""
};
},
created() {
this.getType();
this.getAll();
},
mounted() {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
},
methods: {
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.type = e.target.value;
this.getAll();
},
goDetails() {
console.log(2222222);
},
async getType() {
const {
data: { data }
} = await axios.get(
"https://dev.dfangche.com/api/campsite/campsiteTag/app/unauth/tags"
);
// console.log(data);
this.dataType = data;
},
async getAll() {
let {
data: { data }
} = await axios.get(
`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);
this.totalCount = data.totalCount;
this.dataDetail = data.data;
// this.dataDetail = this.dataDetail.push(data.data);
},
mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
},
scrollHandle: function(e) {
//变量scrollTop是滚动条滚动时，距离顶部的距离
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    //变量windowHeight是可视区的高度
    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //变量scrollHeight是滚动条的总高度
    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
               //滚动条到底部的条件
               if(scrollTop+windowHeight+0.7>scrollHeight){
                //写后台加载数据的函数
//           console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
// this.listQuery.pageNo++;
// this.getAll();
              }  
}
},
head: {
title: "房车营地"
}
// async asyncData({store,listQuery}) {
// 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/uccn/app/unauth/campsite/shops")
// ])
// console.log(dataDetail.data.data.data);
// console.log(dataType.data.data,);
// return {
// dataType:dataType.data.data,
// dataDetail:dataDetail.data.data.data,
// data3:dataDetail.data.data
// };
// },
};
</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 200px;
}
.banner {
/* background-color: #fff; */
text-align: center;
}
.banner h2 {
font-size: 20px;
font-weight: 700;
padding-top: 40px;
}
.banner h3 {
font-size: 16px;
padding-top: 20px;
font-weight: 400;
padding-bottom: 40px;
}
.campsiteDetail {
padding: 0;
margin: 0;
list-style: none;
margin-top: 60px;
}
.campsiteDetail li {
padding: 0;
margin: 0;
list-style: none;
width: 33%;
float: left;
}
.toDetail {
font-size: 16px;
}
.buttonDetails {
width: 156px; /* 宽度 */
height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin-left: 10px;
}
</style>
\ No newline at end of file
pages/campsiteDetails/_id.vue 0 → 100644
View file @ eb3b4b27
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<div>面包屑</div>
<div class="clearfix">
<div style="float:left;width:50%">
<div class="gallery-top-box">
<div class="swiper-container gallery-top" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,idx) in campsiteShopCarouselDetailVos" :key="idx">
<img :src="item.imgUrl">
</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 campsiteShopCarouselDetailVos" :key="index" @click="changeImgIndex(index)">
<img :src="item.imgUrl" :class="preIndex==index?'active':''" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div style="float:left;width:50%">22</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
},
data(){
return{
preIndex: 0,//当前轮播选中图
}
},
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.campsiteShopCarouselDetailVo;
console.log(campsiteShop);
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
return user
},
method:{
changeImgIndex(index){
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
},
},
mounted(){
let t = this;
let galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
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 == 4){
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 200px;
}
</style>
\ No newline at end of file
pages/campsiteDetails/campsiteDetails.vue 0 → 100644
View file @ eb3b4b27
<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>
pages/tour.vue
View file @ eb3b4b27
......@@ -3,6 +3,10 @@
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<div class="banner">
<p>精选热门房车旅行路线</p>
<p>寻找适合你的旅游线路</p>
</div>
<p>这里是房车旅游</p>
</div>
</div>
......@@ -20,14 +24,31 @@
menuModal,
footerModal
},
// async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data;
// return { users: cc}
// },
// 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: {
title: '房车旅游'
}
}
</script>
<style scoped>
.banner{
background-color: #fff;
text-align: center;
}
.banner p:nth-child(1){
font-size: 20px;
font-weight: 700;
padding-top:40px;
}
.banner p:nth-child(2){
padding-top:20px;
padding-bottom:40px;
}
</style>
\ No newline at end of file
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