hongze_yb_xcx/pages/myChart/index.vue

<template>
    <view class="mychart-page">
        <view class="flex top-wrap">
            <view style="flex:1" @click="handleGoSearch">
                <searchBox
                    placeholder="关键字搜索" 
                    :hasRightBtn="false" 
                    :disabled="true"
                />
            </view>
              
            
            <view class="icon-box filter-box" @click="showFilter=true">
                <image src="@/static/question/select.png" mode="widthFix" lazy-load="false" binderror="" bindload="" />
                <text>筛选</text>
            </view>
            <view class="icon-box filter-box" @click="goClassifyPage">
                <image src="@/static/classify-icon.png" mode="widthFix" lazy-load="false" binderror="" bindload="" />
                <text>分类</text>
            </view>
        </view>
        <view class="report-empty-box" v-if="list.length==0&&finished">
            <image
                :src="globalImgUrls.chartEmpty"
                mode="widthFix"
            />
            <view>暂无图表收藏的信息</view>
        </view>
        <view class="flex list-wrap" v-else>
            <view class="item" v-for="item in list" :key="item.chart_info_id" @click="goDetail(item)">
                <view class="van-multi-ellipsis--l2 title">{{item.chart_name}}</view>
                <image class="img" :src="item.chart_image" mode="widthFix" lazy-load="true"/>
            </view>
            <view style="height:0;width: 47%;"></view>
        </view>
        
        <!-- 筛选弹窗 -->
        <van-popup 
            :show="showFilter" 
            @close="showFilter=false"
            position="bottom"
            closeable
            z-index="99999"
        >
            <view class="filter-wrap">
                <view class="title">筛选分类</view>
                <view class="filter-list">
                    <view 
                        v-for="item in filterOpts" 
                        :key="item.my_chart_classify_id" 
                        :class="['item',item.my_chart_classify_id==classify_id?'active':'']"
                        @click="handleFilter(item)"
                    >{{item.my_chart_classify_name}}</view>

                    <view v-if="filterOpts.length==0">
                        <view style="text-align:center;padding-top:200rpx">暂无分类，请先添加图表</view>
                    </view>
                      
                </view>
            </view>
        </van-popup>
    </view>
      
</template>

<script>
import searchBox from '@/components/searchBox/searchBox.vue'
import {apiMyChartList,apiMyChartClassifyList} from '@/api/myChart'
export default {
    components:{
        searchBox
    },
    data() {
        return {
            showFilter:false,
            filterOpts:[],
            classify_id:'',

            list:[],
            page:1,
            pageSize:20,
            finished:false,
        }
    },
    onLoad(){
        this.getList()
    },
    onShow(){
        this.getClassifyList()
    },
    onPullDownRefresh() {
        this.page=1
        this.finished=false
        this.classify_id=''
        this.list=[]
        this.getList()
        this.getClassifyList()
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 1500);
    },
    onReachBottom() {
        if(this.finished) return
        this.page++
        this.getList()
    },
    methods: {
        async getList(){
            const res=await apiMyChartList({
                classify_id:this.classify_id,
                curr_page:this.page,
                page_size:this.pageSize
            })
            if(res.code===200){
                const arr=res.data.list||[]
                this.list=[...this.list,...arr]
                this.finished=res.data.paging.is_end
            }
        },

        // 获取分类数据
        async getClassifyList(){
            const res=await apiMyChartClassifyList()
            if(res.code===200){
                this.filterOpts=res.data||[]
            }
        },

        //点击筛选
        handleFilter(item){
            if(item.my_chart_classify_id==this.classify_id){
                this.classify_id=''
            }else{
                this.classify_id=item.my_chart_classify_id
            }
            this.page=1
            this.list=[]
            this.finished=false
            this.getList()
            this.showFilter=false
        },

        goClassifyPage(){
            uni.navigateTo({
                url: '/pages-myChart/classify',
                success: (result) => {},
                fail: () => {},
                complete: () => {}
            });
        },

        handleGoSearch(){
            uni.navigateTo({
                url: `/pages-myChart/list?classifyName=搜索`, 
            });
        },

        goDetail(item){
            uni.navigateTo({
                url: `/pages-myChart/detail?chartInfoId=${item.chart_info_id}`, 
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.mychart-page{
    padding-top: 132rpx;
}
.top-wrap{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color: #fff;
    z-index: 99;
    padding: 30rpx 34rpx;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    align-items: center;
    .icon-box{
        margin-left: 42rpx;
        image{
            width: 40rpx;
            vertical-align: middle;
            margin-right: 5rpx;
        }
        text{
            color: #E3B377;
            vertical-align: middle;
            font-size: 28rpx;
        }
    }
}
.list-wrap{
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20rpx 0;
    .item{
        padding: 20rpx;
        margin-bottom: 20rpx;
        background: #FFFFFF;
        border: 1px solid #EBEBEB;
        box-shadow: 0px 0px 12rpx rgba(204, 204, 204, 0.25);
        border-radius: 8rpx;
        width: 47%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .title{
            margin-bottom: 20rpx;
            width: 100%;
        }
        .img{
            width: 300rpx;
            height: 261rpx;
            background-color: #f5f5f5;
        }
    }
}

.filter-wrap{
    padding-top: 27rpx;
    .title{
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
        padding-bottom: 40rpx;
    }
    .filter-list{
        height: 40vh;
        overflow-y: auto;
        padding: 0 34rpx;
        .item{
            padding: 24rpx;
            border-bottom: 1px solid #ededed;
        }
        .active{
            color: #E3B377;
        }
    }
}
</style>