Skip to content

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

活动、营地、新闻、旅游、车型列表分页

parent ed1bf3c0
Show whitespace changes
Inline Side-by-side
Showing with 95 additions and 77 deletions
pages/activity.vue
View file @ 60b0aabc
...@@ -36,6 +36,13 @@ ...@@ -36,6 +36,13 @@
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
</div>
<div class="right"> <div class="right">
<nuxt-child :key="$route.params.id" /> <nuxt-child :key="$route.params.id" />
</div> </div>
...@@ -63,13 +70,13 @@ ...@@ -63,13 +70,13 @@
data() { data() {
return { return {
dataType: [], dataType: [],
totalCount: "", totalCount: 0,
dataDetail: [], dataDetail: [],
bannerList: [],//车型banner列表 bannerList: [],//车型banner列表
listQuery: { listQuery: {
type: "", type: "",
pageNo: 1, page: 1,
pageSize: 6 limit: 10
}, },
store: "", store: "",
curId: 0, curId: 0,
...@@ -102,6 +109,15 @@ ...@@ -102,6 +109,15 @@
}, },
bannerClick () { bannerClick () {
}, },
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
},
/** /**
* 获取车型列表页banner * 获取车型列表页banner
*/ */
...@@ -118,30 +134,11 @@ ...@@ -118,30 +134,11 @@
async getAll() { async getAll() {
let { let {
data: { data } data: { data }
} = await axios.get( `/api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.pageNo}&limit=10000`); } = await axios.get( `/api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.page}&limit=${this.listQuery.limit}`);
// console.log(data); // console.log(data);
this.totalCount = data.totalCount; this.totalCount = data.totalCount;
this.dataDetail = data.data; this.dataDetail = 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 () { head () {
return { return {
......
pages/campsite.vue
View file @ 60b0aabc
...@@ -56,6 +56,13 @@ ...@@ -56,6 +56,13 @@
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[9,18,24, 45]" :page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
</div>
</div> </div>
</div> </div>
<go-top></go-top> <go-top></go-top>
...@@ -84,7 +91,7 @@ export default { ...@@ -84,7 +91,7 @@ export default {
looptime: 4000, // 循环时间 looptime: 4000, // 循环时间
typeId: "营地类型", typeId: "营地类型",
dataType: [], dataType: [],
totalCount: "", totalCount: 0,
dataDetail: [], dataDetail: [],
width: 400, width: 400,
height:200, height:200,
...@@ -94,7 +101,7 @@ export default { ...@@ -94,7 +101,7 @@ export default {
listQuery: { listQuery: {
type: "", type: "",
pageNo: 1, pageNo: 1,
pageSize: 100 pageSize: 9
}, },
store: "", store: "",
dataNull:false dataNull:false
...@@ -114,9 +121,14 @@ export default { ...@@ -114,9 +121,14 @@ export default {
this.listQuery.type = this.typeList this.listQuery.type = this.typeList
this.getAll(); this.getAll();
}, },
goDetails() { handleCurrentChange(val) {
console.log(2222222); this.listQuery.pageNo = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getAll();
}, },
async getType() { async getType() {
const { const {
......
pages/news.vue
View file @ 60b0aabc
...@@ -36,6 +36,13 @@ ...@@ -36,6 +36,13 @@
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
</div>
<div class="right"> <div class="right">
<nuxt-child :key="$route.params.id" /> <nuxt-child :key="$route.params.id" />
</div> </div>
...@@ -62,13 +69,13 @@ ...@@ -62,13 +69,13 @@
}, },
data() { data() {
return { return {
totalCount: "", totalCount: 0,
dataDetail: [], dataDetail: [],
bannerList: [],//banner列表 bannerList: [],//banner列表
listQuery: { listQuery: {
type: "", type: "",
pageNo: 1, page: 1,
pageSize: 6 limit: 10
}, },
looptime: 4000, // 循环时间 looptime: 4000, // 循环时间
width: 400, width: 400,
...@@ -97,6 +104,15 @@ ...@@ -97,6 +104,15 @@
}, },
bannerClick () { bannerClick () {
}, },
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
},
/** /**
* 获取车型列表页banner * 获取车型列表页banner
*/ */
...@@ -114,34 +130,14 @@ ...@@ -114,34 +130,14 @@
async getAll() { async getAll() {
let { let {
data: { data } data: { data }
} = await axios.get(`/api/uccn/article/app/unauth/list?type=1&page=1&limit=10000` ); } = await axios.get(`/api/uccn/article/app/unauth/list?type=1&page=${this.listQuery.page}&limit=${this.listQuery.limit}` );
// console.log(data); // console.log(data);
this.totalCount = data.total; this.totalCount = data.total;
data.list.map(function(item){ data.list.map(function(item){
item.addTime = item.addTime.substring(0, 10); item.addTime = item.addTime.substring(0, 10);
}) })
this.dataDetail = data.list; this.dataDetail = data.list;
// 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 () { head () {
return { return {
......
pages/tour.vue
View file @ 60b0aabc
...@@ -58,14 +58,18 @@ ...@@ -58,14 +58,18 @@
<div style="float:left;padding-top:10px;width:850px;color:#333"> <div style="float:left;padding-top:10px;width:850px;color:#333">
<h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2> <h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2>
<h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6> <h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6>
<button class="buttonDetails">旅行详情<img style="position: absolute;" src="../assets/images/r.png"/></button> <button class="buttonDetails">旅行详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
</div> </div>
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
</div>
</div> </div>
</div> </div>
<go-top></go-top> <go-top></go-top>
...@@ -98,7 +102,7 @@ ...@@ -98,7 +102,7 @@
looptime: 4000, // 循环时间 looptime: 4000, // 循环时间
typeId: "营地类型", typeId: "营地类型",
dataType: [], dataType: [],
totalCount: "", totalCount: 0,
dataDetail: [], dataDetail: [],
width: 400, width: 400,
height:200, height:200,
...@@ -108,7 +112,7 @@ ...@@ -108,7 +112,7 @@
listQuery: { listQuery: {
tagId: "", tagId: "",
page: 1, page: 1,
limit: 100 limit: 10
}, },
store: "", store: "",
dataNull:false dataNull:false
...@@ -120,6 +124,15 @@ ...@@ -120,6 +124,15 @@
this.listQuery.tagId = this.typeList this.listQuery.tagId = this.typeList
this.getAll(); this.getAll();
}, },
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
},
choose(e) { choose(e) {
console.log(e.target.value); console.log(e.target.value);
this.listQuery.tagId = e.target.value; this.listQuery.tagId = e.target.value;
......
pages/vehicle.vue
View file @ 60b0aabc
...@@ -47,6 +47,13 @@ ...@@ -47,6 +47,13 @@
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
</div>
<div class="right"> <div class="right">
<nuxt-child :key="$route.params.id" /> <nuxt-child :key="$route.params.id" />
</div> </div>
...@@ -74,13 +81,13 @@ ...@@ -74,13 +81,13 @@
}, },
data() { data() {
return { return {
totalCount: "", totalCount: 0,
dataDetail: [], dataDetail: [],
bannerList: [],//车型banner列表 bannerList: [],//车型banner列表
listQuery: { listQuery: {
type: "", type: "",
pageNo: 1, page: 1,
pageSize: 6 limit: 10
}, },
store: "", store: "",
curId: 0, curId: 0,
...@@ -102,6 +109,15 @@ ...@@ -102,6 +109,15 @@
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件 window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
}, },
methods: { methods: {
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
},
// 点击下一页回调 // 点击下一页回调
prev () { prev () {
}, },
...@@ -130,7 +146,7 @@ ...@@ -130,7 +146,7 @@
async getAll() { async getAll() {
let { let {
data: { data } data: { data }
} = await axios.get(`/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=1&limit=100`); } = await axios.get(`/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=${this.listQuery.page}&limit=${this.listQuery.limit}`);
this.totalCount = data.totalCount; this.totalCount = data.totalCount;
data.data.map(function(item){ data.data.map(function(item){
item.link = encodeURI('/vehicleList/' + item.id+'?name='+item.name); item.link = encodeURI('/vehicleList/' + item.id+'?name='+item.name);
...@@ -144,22 +160,6 @@ ...@@ -144,22 +160,6 @@
mounted() { mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件 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 () { head () {
return { return {
......
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