hongze_yb_xcx/pages-report/search.vue

<template>
    <view class="report-search-page">
        <van-sticky style="background: #fff">
            <view style="padding:30rpx 34rpx">
            <searchBox 
                :focus="focus" 
                placeholder="请输入报告标题或关键字" 
                @change="onChange"
                @search="onSearch"
            ></searchBox>
            </view>
        </van-sticky>
        <view class="empty-box" v-if="finished&&list.length==0">
            <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
            <view>找不到对应报告，试试别的搜索词吧</view>
        </view>
        <view class="list-wrap" v-else>
            <view class="item" v-for="(item,index) in list" :key="index" @click="goReportDetail(item)">
                <view class="title" v-html="item.title"></view>
                <view class="desc" v-html="item.content_sub"></view>
                <view class="flex bot">
                    <view class="tags">
                        <text v-if="item.classify_name_first">#{{item.classify_name_first}}</text>
                        <text v-if="item.classify_name_second">#{{item.classify_name_second}}</text>
                    </view>
                    <view class="time">{{getReportListTime(item.publish_time)}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const dayjs=require('@/utils/dayjs.min')
dayjs.locale('zh-cn') 
import searchBox from './components/searchBox.vue'
import {apiReportSearch} from '@/api/report'
export default {
    components: {
        searchBox
    },
    data () {
        return {
            searchVal:'',
            focus:true,
            list:[],
            finished:false,
            page:1,
        }
    },
    onReachBottom() {
        if(this.finished) return
        this.page++
        this.getList()
    },
    methods: {
        onChange(e){
            this.searchVal=e
        },

        async getList(){
            const res=await apiReportSearch({
                key_word:this.searchVal,
                current_index:this.page,
                page_size:20,
            })
            if(res.code===200){
                if(res.data.paging.is_end){
                    this.finished=true
                }
                let arr=res.data.list||[]
                this.list=[...this.list,...arr]
            }
        },

        async onSearch(){
            this.finished=false
            this.page=1
            this.list=[]
            if(!this.searchVal){
                this.finished=true
                return
            }
            this.getList()
        },

        goReportDetail(item){
            if(['晨报','周报'].includes(item.classify_name_first)){
                uni.navigateTo({url: `/pages-report/chapterDetail?chapterId=${item.report_chapter_id}&fromPage=search`})
            }else{
                uni.navigateTo({url:'/pages-report/reportDetail?reportId='+item.report_id})
            }
        },

        getReportListTime(e){
            return dayjs(e).format('YYYY年MM月DD日 HH:mm')
        }
    }
}
</script>

<style>
.van-sticky-wrap--fixed{
  background-color: #fff;
}
page{
    padding-bottom: 0;
}
</style>
<style lang="scss" scoped>
.empty-box{
    text-align: center;
    font-size: 32rpx;
    color: #999;
    padding-top: 150rpx;
    image{
        width: 346rpx;
        margin-bottom: 57rpx;
    }
}
.list-wrap{
    padding: 34rpx;
    .item{
        padding: 30rpx;
        background: #FFFFFF;
        box-shadow: 3rpx 3rpx 12rpx 1rpx rgba(184, 184, 184, 0.16);
        border-radius: 16rpx;
        border: 1px solid #E5E5E5;
        margin-bottom: 20rpx;
        .title{
            font-size: 32rpx;
            font-weight: bold;
        }
        .desc{
            color: #666666;
            line-height: 1.5;
            margin: 10rpx 0 20rpx 0;
        }
        .bot{
            justify-content: space-between;
            align-items: flex-end;
            .time{
                flex-shrink: 0;
                color: #999999;
                font-size: 24rpx;
            }
            .tags{
                font-size: 28rpx;
                color: #E3B377;
                text{
                    display: inline-block;
                    margin-right: 30rpx;
                }
            }
        }
    }
}
</style>