198 lines
4.7 KiB
Vue
198 lines
4.7 KiB
Vue
<template>
|
||
<uni-row>
|
||
<uni-col :span="4">
|
||
<view>
|
||
一级分类：
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="8">
|
||
<uni-data-select v-model="categoryParam.id" :localdata="categoryList" @change="categoryChanged"></uni-data-select>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view>
|
||
二级分类：
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="8">
|
||
<uni-data-select v-model="subCategoryParam.id" :localdata="subCategoryList" @change="subCategoryChanged"></uni-data-select>
|
||
</uni-col>
|
||
</uni-row>
|
||
<!-- 视频列表 -->
|
||
<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 lang="scss">
|
||
|
||
|
||
</style>
|