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 in list" :key="item" @click="goReportDetail(item)">
                <view class="van-ellipsis title" v-html="item.title"></view>
                <view class="van-multi-ellipsis--l3 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">{{item.publish_time|formatReportTime}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import searchBox from './components/searchBox.vue'
import {apiReportSearch} from '@/api/report'
export default {
    components: {
        searchBox
    },
    data () {
        return {
            searchVal:'',
            focus:true,
            list:[],
            finished:false
        }
    },
    methods: {
        onChange(e){
            this.searchVal=e
        },

        async onSearch(){
            this.finished=false
            if(!this.searchVal){
                this.list=[]
                this.finished=true
                return
            }
            const res=await apiReportSearch({key_word:this.searchVal})
            if(res.code===200){
                this.list=res.data.list||[]
                this.finished=true
            }
        },

        goReportDetail(item){
            uni.navigateTo({ url: '/pages-report/reportDetail?reportId='+item.report_id })
        }
    }
}
</script>

<style>
.van-sticky-wrap--fixed{
  background-color: #fff;
}
</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;
            .time{
                flex-shrink: 0;
                color: #999999;
                font-size: 24rpx;
            }
            .tags{
                font-size: 28rpx;
                color: #E3B377;
                text{
                    display: inline-block;
                    margin-right: 30rpx;
                }
            }
        }
    }
}
</style>