164 lines
5.1 KiB
Vue
164 lines
5.1 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'文章收藏'" :statusTitle="true"></status-nav>
|
||
<!-- 自定义二级分类 -->
|
||
<!-- 列表 -->
|
||
<view>
|
||
<view id="daoh" class="bacf pad-zy30 pad-sx20 isTopf" :style="{top:statusHNH+'px'}">
|
||
<cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" :isCenter="false" :newbmo="'#E0E0E0'" @choosecateEv="chooseTwo" :newcateList="cateList"></cate-pu>
|
||
</view>
|
||
<view :style="{paddingTop:(statusHNH+chuTop+30)+'px'}">
|
||
<view v-if="dataList.length!=0" class="pad-zy20 pad-s20">
|
||
<list-pu :radiu="true" @comfirmev="comfirmev" :list="dataList"></list-pu>
|
||
</view>
|
||
<view v-else class="disjcac fc" style="margin-top: 50%;">
|
||
<image class="zanw-img" src="/static/public/collection.png" style="" mode="aspectFill"></image>
|
||
<view class="fon24 col3">您还没有收藏，快去收藏吧</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 返回顶部 -->
|
||
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {cancleCollectionEV} from '@/jsFile/publicAPI.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
dataList:[],
|
||
showTop:false,//是否显示返回顶部
|
||
newCurrent:0,
|
||
cateList:[//所以二级分类
|
||
|
||
],
|
||
page:1,
|
||
size:10,
|
||
total:'',//总数
|
||
isZanw:true,
|
||
category_id:0,//栏目ID
|
||
chuTop:'',
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||
},
|
||
onReachBottom() {//触底事件
|
||
if(this.total!=this.dataList.length){
|
||
this.page++
|
||
this.checkConList(this.category_id)//调用自主预约列表事件
|
||
} else {
|
||
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
|
||
this.isZanw = false
|
||
}
|
||
},
|
||
onUnload() {
|
||
uni.removeStorageSync('cateList')
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin()
|
||
this.checkConList(this.category_id)
|
||
},
|
||
onLoad() {
|
||
const query = wx.createSelectorQuery()
|
||
query.select('#daoh').boundingClientRect((rect) => {
|
||
// console.log('状态栏+标题栏：',rect);
|
||
this.chuTop = rect.height
|
||
}).exec()
|
||
},
|
||
methods: {
|
||
checkConList(category_id){//查询收藏列表
|
||
// this.$toolAll.tools.showToast('加载中...')
|
||
let params = {
|
||
category_id:category_id,
|
||
page:this.page,
|
||
size:this.size
|
||
}
|
||
this.$requst.post('archives/collects',params).then(res=>{
|
||
if(res.code==0){
|
||
// 栏目类别
|
||
if(uni.getStorageSync('cateList')==''){//首次渲染栏目
|
||
if(res.data.category.length!=0){
|
||
res.data.category.forEach((item,index)=>{
|
||
let cateObj = {
|
||
id:item.id,//栏目ID
|
||
title:item.title,//栏目名称
|
||
active:item.active,//是否选中
|
||
model_id:item.model_id,//模型ID
|
||
model_name:item.model_name,//模型标识
|
||
sort:item.sort,
|
||
|
||
}
|
||
this.cateList.push(cateObj)
|
||
})
|
||
uni.setStorageSync('cateList',this.cateList)
|
||
this.category_id = this.cateList[0].id
|
||
}
|
||
} else {
|
||
//获取缓存中的栏目
|
||
this.cateList = uni.getStorageSync('cateList')
|
||
}
|
||
// 获取列表
|
||
if(this.page==1) this.dataList = []
|
||
this.total = res.data.list.total
|
||
if(res.data.list.list.length!=0){
|
||
uni.hideToast()
|
||
res.data.list.list.forEach(item=>{
|
||
let tObj = {
|
||
category_id:item.category_id,//栏目ID
|
||
id:item.id,
|
||
is_collected:1,//是否已收藏
|
||
collects:item.collects,//收藏量
|
||
views:item.views,//查看量
|
||
main_img:this.$http + item.cover,//封面图
|
||
video:this.$http + item.video,//视频地址
|
||
title:item.title,//标题
|
||
content:item.subtitle,//副标题
|
||
head_img:'/static/public/logo.png',//发布者头像
|
||
name:'恒美植发',//发布者昵称
|
||
isVideo:item.video.includes(".mp4")//是否是视频
|
||
}
|
||
if(this.newCurrent==0 && item.category_id==32) this.dataList.push(tObj)
|
||
if(this.newCurrent==1 && item.category_id==33) this.dataList.push(tObj)
|
||
if(this.newCurrent==2 && item.category_id==34) this.dataList.push(tObj)
|
||
if(this.newCurrent==3 && item.category_id==38) this.dataList.push(tObj)
|
||
})
|
||
}
|
||
}
|
||
},error=>{})
|
||
},
|
||
comfirmev(e){//确认取消收藏事件
|
||
this.$toolAll.tools.showToast('正在取消...','loading')
|
||
// 调用取消收藏事件
|
||
cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})
|
||
setTimeout(()=>{
|
||
this.checkConList(this.category_id)
|
||
},300)
|
||
this.dataList[e].is_collected = 0
|
||
},
|
||
chooseTwo(index){//二级分类选择
|
||
this.newCurrent = index
|
||
this.isZanw = true
|
||
this.page = 1
|
||
this.category_id = this.cateList[index].id
|
||
this.checkConList(this.cateList[index].id)
|
||
// console.log('二级分类：',index);
|
||
},
|
||
backTop(){//回到顶部事件
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|