Skip to content

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

旅游和营地

parent 95ba7ef8
Expand all Show whitespace changes
Inline Side-by-side
Showing with 714 additions and 142 deletions
pages/campsite.vue
View file @ 88fb151f
......@@ -2,12 +2,23 @@
<div>
<menu-modal></menu-modal>
<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="banner">
<h2>娱乐营地</h2>
<h3>娱乐休息俩不误</h3>
</div>
<div class="clearfix">
<div class="clearfix" style="background-color: #fff;padding:5px 10px">
共{{totalCount}}个房车营地
<select
@change="chooseSelect($event)"
......@@ -18,8 +29,9 @@
<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">
<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">
<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">
......@@ -27,9 +39,9 @@
</nuxt-link>
</li>
</ul>
<div class="right">
<!-- <div class="right">
<nuxt-child :key="$route.params.id" />
</div>
</div> -->
</div>
</div>
<footer-modal></footer-modal>
......@@ -40,24 +52,34 @@
import axios from "axios";
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import banner from "../components/banner"
export default {
transition: "bounce",
components: {
menuModal,
footerModal
footerModal,
banner
},
data() {
return {
showBanner: !0,
looptime: 4000, // 循环时间
typeId: "营地类型",
dataType: [],
totalCount: "",
dataDetail: [],
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
listQuery: {
type: "",
pageNo: 1,
pageSize: 6
},
store: ""
store: "",
dataNull:false
};
},
created() {
......@@ -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}`
);
// 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 () {
},
mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
......@@ -121,7 +162,12 @@ export default {
head: {
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}) {
// let [dataType,dataDetail] = await Promise.all([
// axios.get("https://dev.dfangche.com/api/campsite/campsiteTag/app/unauth/tags"),
......@@ -151,12 +197,11 @@ export default {
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
/*.wrap {*/
/*background-color: #fff;*/
/*padding: 0 200px;*/
/*}*/
.banner {
/* background-color: #fff; */
.wrap {
padding: 0 0;
}
/* .banner {
text-align: center;
}
......@@ -171,21 +216,20 @@ export default {
padding-top: 20px;
font-weight: 400;
padding-bottom: 40px;
}
} */
.campsiteDetail {
padding: 0;
margin: 0;
list-style: none;
margin-top: 60px;
margin-top: 10px;
}
.campsiteDetail li {
padding: 0;
margin: 0;
list-style: none;
width: 33%;
width: 30%;
float: left;
}
......
pages/campsiteDetails/_id.vue
View file @ 88fb151f
This diff is collapsed.
pages/tour.vue
View file @ 88fb151f
......@@ -2,12 +2,47 @@
<div>
<menu-modal></menu-modal>
<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="banner">
<p>精选热门房车旅行路线</p>
<p>寻找适合你的旅游线路</p>
<div class="clearfix" style="background-color: #fff;padding:5px 10px">
共{{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>
<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>
<footer-modal></footer-modal>
......@@ -18,37 +53,137 @@
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
import banner from "../components/banner"
export default {
transition: 'bounce',
components: {
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: {
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>
<style scoped>
.banner{
background-color: #fff;
text-align: center;
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
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){
font-size: 20px;
font-weight: 700;
padding-top:40px;
.campsiteDetail li {
padding: 20px;
margin: 50px 0;
list-style: none;
height: 233px;
}
.banner p:nth-child(2){
padding-top:20px;
padding-bottom:40px;
.buttonDetails {
width: 130px; /* 宽度 */
height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin-left: 10px;
margin-top: 15px;
}
</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