Skip to content

V
vue-ssr
Commit e3fa287c authored by lixy's avatar lixy
Browse files
Options

欣新活动

parent 013b9e8c
Hide whitespace changes
Inline Side-by-side
Showing with 677 additions and 20 deletions
assets/main.css
View file @ e3fa287c
...@@ -7,12 +7,26 @@ body { ...@@ -7,12 +7,26 @@ body {
.min-win{ .min-win{
width: 1200px; width: 1200px;
} }
.bread-menu{
padding-bottom: 30px;
}
.bread-menu a{
text-decoration: none;
}
.bread-menu a:hover{
color: #1bbb9f;
}
.main-container{ .main-container{
margin-top:90px; margin-top:90px;
min-height: 600px; min-height: 600px;
} }
a{
text-decoration: none;
}
.container { .container {
/*text-align: center;*/ /*text-align: center;*/
font-size: 16px; font-size: 16px;
...@@ -47,7 +61,16 @@ body { ...@@ -47,7 +61,16 @@ body {
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.wrap {
width: 1200px;
margin: 0 auto 30px auto;
background: #fff;
padding: 30px;
}
.total-div{
padding-bottom: 30px;
}
.ellipsis { .ellipsis {
overflow: hidden;white-space: nowrap;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;
} }
......
components/menu.vue
View file @ e3fa287c
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
<nuxt-link to="/"><img :src="logo" style="width:200px;max-height: 100px;" alt="欣新房车，让生活更美好"></nuxt-link> <nuxt-link to="/"><img :src="logo" style="width:200px;max-height: 100px;" alt="欣新房车，让生活更美好"></nuxt-link>
<ul class="users"> <ul class="users">
<li v-for="menu in menuList" :key="menu.id"> <li v-for="menu in menuList" :key="menu.id">
<nuxt-link :to="menu.link" :class="menu.link==router?'active':''">{{ menu.name }}</nuxt-link> <nuxt-link v-if="menu.link=='/'" :to="menu.link" :class="router== menu.link?'active':''">{{ menu.name }}</nuxt-link>
<nuxt-link v-else :to="menu.link" :class="router.indexOf(menu.link) != -1?'active':''">{{ menu.name }}</nuxt-link>
</li> </li>
</ul> </ul>
</div> </div>
......
components/vehicleBanner.vue 0 → 100644
View file @ e3fa287c
<template>
<div class="banner">
<div class="box">
<ul>
<li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
<img :src= "item.cover" style="width:100%;" :alt="item.title"/>
</li>
</ul>
<!--<div class="status">-->
<!--<span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"-->
<!--@mouseenter="changeBanner(index)"-->
<!--@mouseleave="startLoop"-->
<!--&gt;{{item.title}}-->
<!--</span>-->
<!--</div>-->
<!--<div class="btn">-->
<!--<span class="prev" @click="prev" @mouseenter="stopLoop" @mouseleave="startLoop">《</span>-->
<!--<span class="next" @click="next" @mouseenter="stopLoop" @mouseleave="startLoop">》</span>-->
<!--</div>-->
</div>
<!--h1 @click="getArticle">{{msg}}</h1-->
</div>
</template>
<script>
export default {
name: 'banner',
data() {
return {
current: 0, // 当前索引
timerId: null, // 清除循环标记
intStyle: {}
}
},
props: [
'list',
'looptime',
'height',
'width',
'background',
'color',
'fontSize'
],
methods: {
getArticle () {
this.$emit('getArticle', this.article)
},
// 鼠标移入状态圆点
changeBanner (index) {
this.$emit('change', this.current);
this.stopLoop();
this.current = index;
},
// 鼠标点击banner内容
bannerClick (index, item) {
this.$emit('click', index, item);
},
// 点击上一张按钮
prev () {
if(this.current > 0) {
// 将对象列表对应的索引和整个对象传出去
this.$emit('prev', this.current, this.list);
this.current--;
} else {
this.$emit('prev', this.current, this.list);
this.current = this.list.length - 1 ;
}
},
// 点击下一张按钮
next () {
if(this.current < this.list.length - 1) {
this.$emit('prev', this.current, this.list);
this.current ++;
} else {
this.$emit('prev', this.current, this.list);
this.current = 0;
}
},
// 鼠标移出继续循环播放
startLoop () {
this.int(4000);
},
// 鼠标移入停止循环播放
stopLoop () {
clearTimeout(this.timerId); // 清除循环
},
// 初始化加载
int (time){
this.timerId = setInterval(()=> {
this.next();
}, time);
// 初始化样式
this.intStyle = {
width: this.width + 'px',
height: this.height + 'px',
background: this.background,
color: this.color
}
}
},
created () {
this.int(4000);
}
}
</script>
<style scoped>
.banner-bg{
width: 100%;
}
li{
position:absolute;
left:0;
width:100%;
height:100%;
font-size:inherit;
color:#fff;
font-size:80px;
text-align:center;
opacity:0;
transition: all 1.5s;
}
.active{
opacity:1;
transition: all 1.5s;
}
ul{
height:100%;
}
.name-t{
display:inline-block;
height:40px;
width:100px;
font-size: 14px;
margin:0 5px;
background:#ccc;
color:#333;
cursor:pointer;
}
span.active{
color:#fff;
background:#1bbb9f;
}
.status{
position:absolute;
bottom:20px;
width:100%;
height:40px;
text-align:Center;
display: flex;
justify-content: center;
}
.box{
position:relative;
height:500px;
}
span{
display:block;
height:40px;
width:20px;
color:#fff;
line-height:40px;
text-align:Center;
background:rgba(0,0,0, .7);
cursor:pointer;
}
span.prev{
float:left;
}
span.next{
float:right;
}
.btn{
position:absolute;
top:50%;
width:100%;
transform: translateY(-50%);
}
.banner{
width:100%;
max-height:500px;
}
</style>
nuxt.config.js
View file @ e3fa287c
...@@ -10,10 +10,13 @@ module.exports = { ...@@ -10,10 +10,13 @@ module.exports = {
link: [ link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic' } { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic' }
] ],
script: [
{ src: 'https://dev.dfangche.com/h5/appHtml/js/util.js' }
],
}, },
css: [ css: [
'~/assets/main.css', '~/assets/main.css',
'swiper/dist/css/swiper.min.css' 'swiper/dist/css/swiper.min.css'
], ],
...@@ -21,8 +24,7 @@ module.exports = { ...@@ -21,8 +24,7 @@ module.exports = {
plugins: [ plugins: [
{ src: '~plugins/muse-ui.js', ssr: true }, { src: '~plugins/muse-ui.js', ssr: true },
{ src: '~plugins/loadMore.js', ssr: false }, { src: '~plugins/util.js', ssr: false }
{ src: '~plugins/dateFormattor.js', ssr: false }
], ],
build: { build: {
......
pages/activity.vue
View file @ e3fa287c
...@@ -2,8 +2,39 @@ ...@@ -2,8 +2,39 @@
<div> <div>
<menu-modal></menu-modal> <menu-modal></menu-modal>
<div class="main-container"> <div class="main-container">
<vehicle-banner
: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">
</vehicle-banner>
<div class="wrap"> <div class="wrap">
<p>这里是欣新活动</p> <div class="total-div">
共{{totalCount}}个活动
</div>
<ul class="campsiteDetail clearfix">
<li v-for="(item,idx) in dataDetail" :key="idx" style="margin-bottom:60px">
<nuxt-link :to="'/activityList/'+item.id">
<img :src="item.banner" alt style="width:50%;height: 100%" />
<div style="margin-left:20px" class="active-r">
<h2 class="ellipsis2">{{item.title }}</h2>
<div>{{item.startTime}}~{{item.endTime}}</div>
<div class="ellipsis2">{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
</div>
</nuxt-link>
</li>
</ul>
<div class="right">
<nuxt-child :key="$route.params.id" />
</div>
</div> </div>
</div> </div>
<footer-modal></footer-modal> <footer-modal></footer-modal>
...@@ -11,23 +42,193 @@ ...@@ -11,23 +42,193 @@
</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 vehicleBanner from "../components/vehicleBanner"
export default { export default {
transition: 'bounce', transition: "bounce",
components: { components: {
menuModal, menuModal,
footerModal footerModal,
vehicleBanner
}, },
// async asyncData() { data() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1'); return {
// let cc = data.data; typeId: "营地类型",
// return { users: cc} dataType: [],
// }, totalCount: "",
head: { dataDetail: [],
title: '欣新活动' bannerList: [],//车型banner列表
} listQuery: {
} type: "",
pageNo: 1,
pageSize: 6
},
store: "",
curId: 0,
items1: {},
curId1: 0,
looptime: 4000, // 循环时间
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
};
},
created() {
this.getAll();
this.getBanner();
},
mounted() {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
},
methods: {
// 点击下一页回调
prev () {
},
// 点击下一页回调
next () {
},
// 鼠标移入状态点回调
changeBanner () {
},
bannerClick () {
},
/**
* 获取车型列表页banner
*/
async getBanner(){
//首页banner
let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
let banner = tempBannerData.data.data;
this.bannerList = banner;
},
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.type = e.target.value;
this.getAll();
},
goDetails() {
console.log(2222222);
},
async getAll() {
let {
data: { data }
} = await axios.get(
`https://dev.dfangche.com//api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.pageNo}&limit=10000`
);
// console.log(data);
this.totalCount = data.totalCount;
data.data.map(function (item) {
item.startTime = timestamp2Date(item.startTime);
item.endTime = timestamp2Date(item.endTime);
})
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> </script>
<style scoped>
.active-r{
color: #333;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.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;
}
.campsiteDetail li a {
padding: 0;
margin: 0;
list-style: none;
display: flex;
text-decoration: none;
}
.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>
pages/activityList/_id.vue 0 → 100644
View file @ e3fa287c
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container" style="margin-top: 110px;">
<div class="wrap">
<div class="bread-menu">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/activity">欣新活动></nuxt-link>
<span>{{detail.title}}</span>
</div>
<div style="display: flex;">
<img :src="detail.banner" style="width: 50%;height: 100%;"/>
<div class="r-content">
<h1>{{detail.title}}</h1>
<p>活动时间:{{detail.startTime}}~{{detail.endTime}}</p>
<p>活动地点：{{detail.province}}{{detail.city}}{{detail.town}}{{detail.address}}</p>
<div class="buttonDetails">报名参加</div>
</div>
</div>
<div class="flex-aic-jcb">
<div style="width: 67%;"><h3 class="content-t">活动详情</h3></div>
<div class="content-r-link">
<h3>热门活动</h3>
</div>
</div>
<div class="content">
<div style="width: 67%;padding-top: 20px;">
<h3>活动详情</h3>
<div class="content-detail" v-html="detail.content"></div>
</div>
<div class="content-r-link">
<div class="content-detail" v-for="item in hotList" :key="item.id">
<img :src="item.banner" style="width:100%;"/>
<div class="tc ellipsis title">{{item.title}}</div>
<nuxt-link :to="'/activityList/'+item.id"><div class="detail-new">活动详情</div></nuxt-link>
</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
},
data(){
return{
lengthPic:0,
preIndex: 0,//当前轮播选中图
}
},
validate ({ params }) {
console.log(params.id);
return !isNaN(+params.id)
},
async asyncData({ env, params, error}) {
function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero(str) {
return ('00' + str).substr(str.length)
}
function timestamp2Date(timestamp) {
let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
}
const { data } = await axios.get( env.host + '/api/uccn/summitActivity/app/unauth/'+params.id);
let detail = data.data;
detail.startTime = timestamp2Date(detail.startTime);
detail.endTime = timestamp2Date(detail.endTime);
if (!detail) {
return error({ message: 'detail not found', statusCode: 404 })
}
let tempBannerData = await axios.get( env.host + '/api/uccn/summitActivity/app/unauth/hot');
let hot = tempBannerData.data.data;
return {detail: detail, hotList: hot}
},
methods:{
changeImgIndex(index,length){
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
this.lengthPic = length;
console.log(this.lengthPic);
},
},
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>
.r-content{
margin-left: 20px;
}
.r-content p{
padding: 5px 0;
}
.is-fixed{
position: fixed;
width: 1200px;
background: #fff;
border-bottom: 10px solid #ccc;
margin-left: -30px;
padding-left: 0;
top: 90px;
}
.content{
display: flex;
justify-content: space-between;
}
.content-t{
border-bottom: 5px solid #1bbb9f;
width: 100px;
text-align: center;
padding: 10px;
font-weight: normal;
}
.swiper-container {
height: auto;
}
.gallery-top img{
width: 100%;
}
.content-detail{
padding: 20px 0;
width: 100%;
}
.content-detail .title{
padding: 5px;
}
.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: 156px; /* 宽度 */
padding: 10px 0;
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
font-family: Microsoft YaHei; /* 设置字体 */
color: #fff; /* 字体颜色 */
text-align: center;
}
.detail-new{
width: 156px; /* 宽度 */
padding: 5px 0;
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
font-family: Microsoft YaHei; /* 设置字体 */
color: #fff; /* 字体颜色 */
text-align: center;
margin: 0 auto;
}
.content-r-link{
margin-left: 3%;
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
pages/activityList/activityList.vue 0 → 100644
View file @ e3fa287c
<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