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 @@
</nuxt-link>
</li>
</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">
<nuxt-child :key="$route.params.id" />
</div>
......@@ -63,13 +70,13 @@
data() {
return {
dataType: [],
totalCount: "",
totalCount: 0,
dataDetail: [],
bannerList: [],//车型banner列表
listQuery: {
type: "",
pageNo: 1,
pageSize: 6
page: 1,
limit: 10
},
store: "",
curId: 0,
......@@ -102,6 +109,15 @@
},
bannerClick () {
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
},
/**
* 获取车型列表页banner
*/
......@@ -118,30 +134,11 @@
async getAll() {
let {
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);
this.totalCount = data.totalCount;
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 () {
return {
......
pages/campsite.vue
View file @ 60b0aabc
......@@ -56,6 +56,13 @@
</nuxt-link>
</li>
</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>
<go-top></go-top>
......@@ -84,7 +91,7 @@ export default {
looptime: 4000, // 循环时间
typeId: "营地类型",
dataType: [],
totalCount: "",
totalCount: 0,
dataDetail: [],
width: 400,
height:200,
......@@ -94,7 +101,7 @@ export default {
listQuery: {
type: "",
pageNo: 1,
pageSize: 100
pageSize: 9
},
store: "",
dataNull:false
......@@ -114,9 +121,14 @@ export default {
this.listQuery.type = this.typeList
this.getAll();
},
goDetails() {
console.log(2222222);
handleCurrentChange(val) {
this.listQuery.pageNo = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getAll();
},
async getType() {
const {
......
pages/news.vue
View file @ 60b0aabc
......@@ -36,6 +36,13 @@
</nuxt-link>
</li>
</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">
<nuxt-child :key="$route.params.id" />
</div>
......@@ -62,13 +69,13 @@
},
data() {
return {
totalCount: "",
totalCount: 0,
dataDetail: [],
bannerList: [],//banner列表
listQuery: {
type: "",
pageNo: 1,
pageSize: 6
page: 1,
limit: 10
},
looptime: 4000, // 循环时间
width: 400,
......@@ -97,6 +104,15 @@
},
bannerClick () {
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
},
/**
* 获取车型列表页banner
*/
......@@ -114,34 +130,14 @@
async getAll() {
let {
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);
this.totalCount = data.total;
data.list.map(function(item){
item.addTime = item.addTime.substring(0, 10);
})
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 () {
return {
......
pages/tour.vue
View file @ 60b0aabc
......@@ -58,14 +58,18 @@
<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>
<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>
</div>
</nuxt-link>
</li>
</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>
<go-top></go-top>
......@@ -98,7 +102,7 @@
looptime: 4000, // 循环时间
typeId: "营地类型",
dataType: [],
totalCount: "",
totalCount: 0,
dataDetail: [],
width: 400,
height:200,
......@@ -108,7 +112,7 @@
listQuery: {
tagId: "",
page: 1,
limit: 100
limit: 10
},
store: "",
dataNull:false
......@@ -120,6 +124,15 @@
this.listQuery.tagId = this.typeList
this.getAll();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
},
choose(e) {
console.log(e.target.value);
this.listQuery.tagId = e.target.value;
......
pages/vehicle.vue
View file @ 60b0aabc
......@@ -47,6 +47,13 @@
</nuxt-link>
</li>
</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">
<nuxt-child :key="$route.params.id" />
</div>
......@@ -74,13 +81,13 @@
},
data() {
return {
totalCount: "",
totalCount: 0,
dataDetail: [],
bannerList: [],//车型banner列表
listQuery: {
type: "",
pageNo: 1,
pageSize: 6
page: 1,
limit: 10
},
store: "",
curId: 0,
......@@ -102,6 +109,15 @@
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
},
methods: {
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
},
// 点击下一页回调
prev () {
},
......@@ -130,7 +146,7 @@
async getAll() {
let {
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;
data.data.map(function(item){
item.link = encodeURI('/vehicleList/' + item.id+'?name='+item.name);
......@@ -144,22 +160,6 @@
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 () {
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