|
|
@@ -20,13 +20,21 @@
|
|
|
/>
|
|
|
</view>
|
|
|
</van-sticky>
|
|
|
- <view class="chart-list-wrap">
|
|
|
+ <view class="empty-box" v-if="list.length==0&&finished">
|
|
|
+ <image
|
|
|
+ :src="globalImgUrls.chartEmpty"
|
|
|
+ mode="widthFix"
|
|
|
+ />
|
|
|
+ <view>暂时找不到对应图，试试别的搜索词吧~</view>
|
|
|
+ </view>
|
|
|
+ <view class="chart-list-wrap" v-else>
|
|
|
<drag
|
|
|
ref="chartDragIns"
|
|
|
generic:item="chart-item"
|
|
|
:columns="2"
|
|
|
:list-data="list"
|
|
|
:itemHeight="400"
|
|
|
+ :searchVal="searchVal"
|
|
|
@sortend="chartSortend"
|
|
|
@click="chartClick"
|
|
|
@scroll="chartScroll"
|
|
|
@@ -34,8 +42,6 @@
|
|
|
></drag>
|
|
|
</view>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
</view>
|
|
|
|
|
|
<!-- 无权限 -->
|
|
|
@@ -58,17 +64,22 @@
|
|
|
<view class="filter-list">
|
|
|
<view class="title">公共图库</view>
|
|
|
<view
|
|
|
- class="filter-item"
|
|
|
+ :class="['filter-item',selectClassifyId==item.myChartClassifyId?'active':'']"
|
|
|
v-for="item in pubClassifyList"
|
|
|
:key="item.myChartClassifyName"
|
|
|
+ @click="handleSelectClassify(item,true)"
|
|
|
>{{item.myChartClassifyName}}</view>
|
|
|
|
|
|
- <view class="title">我的图库</view>
|
|
|
+ <block v-if="myClassifyList.length>0">
|
|
|
+ <view class="title" style="border:none">我的图库</view>
|
|
|
<dragSorts
|
|
|
:list="myClassifyList"
|
|
|
- :rowHeight="44"
|
|
|
- :listHeight="200"
|
|
|
+ :selectId="selectClassifyId"
|
|
|
+ :rowHeight="rowHeight"
|
|
|
+ :listHeight="classifyListHeight+20"
|
|
|
+ @onclick="myClassifyClick"
|
|
|
></dragSorts>
|
|
|
+ </block>
|
|
|
</view>
|
|
|
</view>
|
|
|
</van-popup>
|
|
|
@@ -78,7 +89,7 @@
|
|
|
import chartItem from './component/chartItem.vue'
|
|
|
import dragSorts from '../../components/chartClassifyItem/HM-dragSorts.vue'
|
|
|
import noAuth from './component/noAuth.vue'
|
|
|
-import {apiChartList,apiChartClassifyList} from '@/api/chart'
|
|
|
+import {apiChartList,apiChartClassifyList,apiChartMove} from '@/api/chart'
|
|
|
export default {
|
|
|
components: {
|
|
|
'chart-item':chartItem,
|
|
|
@@ -99,28 +110,55 @@ export default {
|
|
|
myClassifyList:[],//我的图库分类数据
|
|
|
selectClassifyId:0,//选中的分类id
|
|
|
isPublic:false,//是否当前显示的列表数据为公共图库数据
|
|
|
+ classifyListHeight:0,//我的分类默认高度
|
|
|
+ rowHeight:44,
|
|
|
+
|
|
|
+ searchVal:'',//图库搜素关键词
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.getClassifyList()
|
|
|
+ this.addEventListenerSelectClassify()
|
|
|
+ },
|
|
|
+ onUnload(){
|
|
|
+ uni.$off('classifyPageSelect')
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.initPage()
|
|
|
+ this.getClassifyList()
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 1500)
|
|
|
},
|
|
|
-
|
|
|
onReachBottom() {
|
|
|
if (this.finished) return
|
|
|
this.page++
|
|
|
this.getList()
|
|
|
},
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ return {
|
|
|
+ title: '弘则研报',
|
|
|
+ path: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
onPageScroll({ scrollTop }) {
|
|
|
this.scrollTop=scrollTop
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取列表
|
|
|
async getList(){
|
|
|
- const res=await apiChartList({Page:this.page,Limit:20})
|
|
|
+ const res=await apiChartList({
|
|
|
+ Page:this.page,
|
|
|
+ Limit:20,
|
|
|
+ ClassifyId:this.selectClassifyId,
|
|
|
+ Keywords:this.searchVal
|
|
|
+ })
|
|
|
+ // console.log(res);
|
|
|
if(res.code===200){
|
|
|
if(res.data){
|
|
|
+ // 公共图库分类下数据不允许拖动
|
|
|
let arr=res.data.map(item=>{
|
|
|
- return {...item,dragId:item.UniqueCode,fixed: false}
|
|
|
+ return {...item,dragId:item.UniqueCode,fixed: this.isPublic?true:false}
|
|
|
})
|
|
|
this.list=[...this.list,...arr]
|
|
|
setTimeout(() => {
|
|
|
@@ -131,35 +169,38 @@ export default {
|
|
|
this.finished=true
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- // if(this.page<3){
|
|
|
- // let arr=[]
|
|
|
- // for (let index = (this.page-1)*20; index < this.page*20; index++) {
|
|
|
- // arr.push({title:'标题'+index,src:'',dragId:'chart'+index,fixed: false})
|
|
|
- // }
|
|
|
- // this.list=[...this.list,...arr]
|
|
|
- // setTimeout(() => {
|
|
|
- // this.chartDragIns=this.$refs.chartDragIns
|
|
|
- // this.chartDragIns.init();
|
|
|
- // }, 100);
|
|
|
- // }else{
|
|
|
- // this.finished=true
|
|
|
- // }
|
|
|
-
|
|
|
},
|
|
|
|
|
|
//移动排序结束
|
|
|
- chartSortend(e){
|
|
|
+ async chartSortend(e){
|
|
|
// curIndex 为排序前元素所在位置 listData为排序后的数组
|
|
|
let {curIndex,listData}=e.detail
|
|
|
const moveTarget=this.list[curIndex]
|
|
|
console.log(moveTarget.ChartName);
|
|
|
- this.list=listData
|
|
|
- setTimeout(() => {
|
|
|
- this.chartDragIns.init();
|
|
|
- }, 100);
|
|
|
-
|
|
|
+ // 找到移动后所在位置
|
|
|
+ const endIndex=listData.findIndex(item=>item.MyChartId===moveTarget.MyChartId)
|
|
|
+ console.log('移动结束后序号：',endIndex);
|
|
|
+
|
|
|
+ const NextMyChartId=listData[endIndex+1]&&listData[endIndex+1].MyChartId||0
|
|
|
+ const PrevMyChartId=listData[endIndex-1]&&listData[endIndex-1].MyChartId||0
|
|
|
+
|
|
|
+ const res=await apiChartMove({
|
|
|
+ MyChartId:moveTarget.MyChartId,
|
|
|
+ MyChartClassifyId:this.selectClassifyId,
|
|
|
+ PrevMyChartId:PrevMyChartId,
|
|
|
+ NextMyChartId:NextMyChartId,
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ this.list=listData
|
|
|
+ setTimeout(() => {
|
|
|
+ this.chartDragIns.init();
|
|
|
+ }, 100);
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: '移动失败',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
// 点击某项
|
|
|
@@ -172,47 +213,91 @@ export default {
|
|
|
|
|
|
// 移动时滚动
|
|
|
chartScroll(e){
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
this.pageMetaScrollTop=e.detail.scrollTop
|
|
|
},
|
|
|
|
|
|
// 获取分类数据
|
|
|
async getClassifyList(){
|
|
|
const res=await apiChartClassifyList()
|
|
|
- console.log(res);
|
|
|
if(res.code===200){
|
|
|
this.myClassifyList=res.data.private_classify||[]
|
|
|
this.pubClassifyList=res.data.public_classify||[]
|
|
|
+ this.classifyListHeight=this.rowHeight*this.myClassifyList.length
|
|
|
if(res.data.private_classify){
|
|
|
- this.selectClassifyId=res.data.private_classify[0]
|
|
|
+ this.selectClassifyId=res.data.private_classify[0].myChartClassifyId
|
|
|
+ this.isPublic=false
|
|
|
+ }else{
|
|
|
+ this.selectClassifyId=res.data.public_classify[0].myChartClassifyId
|
|
|
+ this.isPublic=true
|
|
|
}
|
|
|
}
|
|
|
this.getList()
|
|
|
},
|
|
|
|
|
|
- // // 显示筛查弹窗
|
|
|
- // async handleShowFilter(){
|
|
|
- // const res=await apiChartClassifyList()
|
|
|
- // console.log(res);
|
|
|
- // if(res.code===200){
|
|
|
- // this.myClassifyList=res.data.private_classify||[]
|
|
|
- // this.pubClassifyList=res.data.public_classify||[]
|
|
|
- // }
|
|
|
- // this.showFilter=true
|
|
|
- // },
|
|
|
+ // 我的分类点击
|
|
|
+ myClassifyClick(e){
|
|
|
+ this.handleSelectClassify(e.value,false)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选中分类
|
|
|
+ handleSelectClassify(item,isPublic){
|
|
|
+ this.initPage()
|
|
|
+ this.searchVal=''
|
|
|
+ this.selectClassifyId=item.myChartClassifyId
|
|
|
+ this.isPublic=isPublic
|
|
|
+ this.getList()
|
|
|
+ this.showFilter=false
|
|
|
+ },
|
|
|
|
|
|
// 跳转全部分类
|
|
|
goAllTypes(){
|
|
|
uni.navigateTo({
|
|
|
- url: '/pages-chart/allTypes'
|
|
|
+ url: '/pages-chart/allTypes?selectId='+this.selectClassifyId
|
|
|
})
|
|
|
this.showFilter=false
|
|
|
- }
|
|
|
-
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索关键词变化
|
|
|
+ searchValChange(e){
|
|
|
+ this.searchVal=e.detail
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确认搜索
|
|
|
+ onSearch(){
|
|
|
+ this.initPage()
|
|
|
+ this.isPublic=true
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清除搜索内容
|
|
|
+ onClearSearch(){
|
|
|
+ this.initPage()
|
|
|
+ this.isPublic=false
|
|
|
+ this.getClassifyList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化页面数据
|
|
|
+ initPage(){
|
|
|
+ this.page=1
|
|
|
+ this.list=[]
|
|
|
+ this.finished=false
|
|
|
+ this.selectClassifyId=0
|
|
|
+ this.pageMetaScrollTop=0
|
|
|
+ this.scrollTop=0
|
|
|
+ },
|
|
|
+
|
|
|
+ // 监听分类页面选中分类事件
|
|
|
+ addEventListenerSelectClassify(){
|
|
|
+ uni.$on('classifyPageSelect',e=>{
|
|
|
+ this.handleSelectClassify({myChartClassifyId:e.selectId},e.isPublic)
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
.chart-page {
|
|
|
min-height: calc(100vh - calc(50px + constant(safe-area-inset-bottom)));
|
|
|
min-height: calc(100vh - calc(50px + env(safe-area-inset-bottom)));
|
|
|
@@ -277,6 +362,20 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: #1F243A;
|
|
|
}
|
|
|
+ .active{
|
|
|
+ color: #E3B377;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.empty-box{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #999;
|
|
|
+ padding-top: 150rpx;
|
|
|
+ image{
|
|
|
+ width: 346rpx;
|
|
|
+ margin-bottom: 57rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
