hongze_yb_xcx/pages-myChart/list.vue

<template>
    <view class="mychart-page">
        <view class="flex top-wrap">
            <searchBox
                placeholder="关键字搜索" 
                :focus="focus"
                @change="onChange"
                @search="onSearch"
                style="flex:1"
            />
        </view>
        <template v-if="isSearch||classify_id">
        <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>
        </template>
    </view>
      
</template>

<script>
import searchBox from '@/components/searchBox/searchBox.vue'
import {apiMyChartList} from '@/api/myChart'
export default {
    components:{
        searchBox
    },
    data() {
        return {
            focus:false,
            list:[],
            page:1,
            pageSize:20,
            finished:false,
            keyword:'',
            classify_id:'',
            isSearch:false
        }
    },
    onLoad(opt){
        this.classify_id=opt.classifyId||''
        const title=decodeURIComponent(opt.classifyName)||''
        if(title=='搜索'){
            this.focus=true
        }else{
            this.getList()
        }
        uni.setNavigationBarTitle({
            title: title,
            success: (result) => {},
            fail: () => {},
            complete: () => {}
        });
    },
    onReachBottom() {
        if(this.finished) return
        this.page++
        this.getList()
    },
    methods: {
        onChange(e){
            this.keyword=e
            if(!e){
                this.page=1
                this.list=[]
                this.finished=false 
                this.isSearch=false
            }
        },

        onSearch(){
            if(!this.keyword){
                this.isSearch=false
            }else{
                this.isSearch=true
            }
            
            this.page=1
            this.list=[]
            this.finished=false
            this.getList()
        },

        goDetail({chart_info_id,chart_info_source,unique_code}){
            uni.navigateTo({
                url: `/pages-myChart/detail?chartInfoId=${chart_info_id}&chartSource=${chart_info_source}&chartCode=${unique_code}&classifyId=${this.classify_id}`,
            });
        },

        async getList(){
            const res=await apiMyChartList({
                classify_id:this.classify_id,
                keyword:this.keyword,
                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
            }
        },
    },
}
</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;
}
.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;
        }
    }
}

</style>