pan-mini/pages/category/category.vue

189 lines
4.6 KiB
Vue

<template>
<!-- <smart-tabs
:tabs="tabs"
:initial-index="current"
:scrollEnable="true"
:activeColor="'#19c324'"
@change="handleTabChange"
>
</smart-tabs> -->
<uni-data-select v-model="categoryParam.id" :localdata="categoryList" @change="categoryChanged"></uni-data-select>
<uni-data-select v-model="subCategoryParam.id" :localdata="subCategoryList" @change="subCategoryChanged"></uni-data-select>
<!-- 视频列表 -->
<view class="video-container">
<image-grid-simple
:imageList="list"
:columns="2"
:height="'80vh'"
@image-click="handlerClick"
@load-more-action = "queryList"
>
<!-- <template #empty>
<view class="custom-empty">
<image src="/static/images/no-videos.png" />
<text>没有找到视频内容</text>
</view>
</template> -->
</image-grid-simple>
</view>
</template>
<script>
export default {
data() {
return {
categoryParam:{
target:'all',
id:0
},
categoryList:[
{
text:'全部',
value:0
}
],
subCategoryParam:{
id:0
},
subCategoryList:[
{
text:'全部',
value:0
}
],
list:[],
pageInfo:{
index:1,
size:10,
isEnd:false,
}
}
},
onLoad() {
this.getCategory();
this.queryList();
},
methods: {
getCategory() {
// 获取分类
let param = {
index:1,
size:1000,
target:'parent'
}
try {
this.$http.get('/category/list',param).then((resp)=>{
this.categoryList = [
{
text:'全部',
value:0
}
];
resp.data?.list.forEach((item,idx)=>{
this.categoryList.push({
value:item?.id,
text:item?.name,
});
});
})
} catch(err){
console.log("query category error",err)
}
},
getSubCategory() {
// 获取分类
let param = {
index:1,
size:1000,
}
if (this.categoryParam.id === 0) {
param.target = 'sub'
} else {
param.parent_id = this.categoryParam.id
}
try {
this.$http.get('/category/list',param).then((resp)=>{
this.subCategoryList = [
{
text:'全部',
value:0
}
];
resp.data?.list.forEach((item,idx)=>{
this.subCategoryList.push({
value:item?.id,
text:item?.name,
});
});
})
} catch(err){
console.log("query category error",err)
}
},
categoryChanged(e) {
// 一级分类变更
this.getSubCategory();
this.queryList();
},
subCategoryChanged(e) {
// 一级分类变更
this.queryList();
},
queryList() {
if (this.pageInfo.isEnd) {
uni.showToast({
title: '没有更多数据了哦!^v^',
icon: 'none',
complete: () => {
console.log("no more data")
}
});
return
}
let param = {
...this.pageInfo
}
if (this.categoryParam.id === 0) {
param.target = 'all'
} else {
param.category_id = this.categoryParam.id
}
if (this.subCategoryParam.id !== 0) {
param.sub_category_id = this.subCategoryParam.id
}
try {
uni.$http.get('/resource/list',param).then((resp) => {
console.log("resp data",resp.data);
resp.data?.list.forEach((item,idx)=>{
this.list.push({
id:item?.id,
name:item?.name,
src:item?.thumb_src,
android_src:item?.android_src,
});
});
console.log("length:",this.list.length,resp.data.page.rows,resp.data.page)
if (this.list.length >= resp.data.page.rows) {
this.pageInfo.isEnd = true
} else {
this.pageInfo.isEnd = false
this.pageInfo.index++
}
})
}catch(err) {
console.log("catch query list err:",err)
}
}
}
}
</script>
<style>
</style>