hongze_yb_en/src/views/report/Search.vue

<script setup>
import {reactive} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { apiReportSearch } from '@/api/report'
import { useRouter } from 'vue-router'

const router=useRouter()

let listState=reactive({
    keywords:'',
    page:1,
    pageSize:20,
    list:[],
    loading:false,
    finished:false
})  

async function getReportList(){
    if(!listState.keywords) return
    listState.loading=true
    const res=await apiReportSearch({
        key_word:listState.keywords,
        page_size:listState.pageSize,
        current:listState.page
    })
    setTimeout(() => {
        listState.loading=false
    }, 100);
    if(res.code===200){
        const arr=res.data.list||[]
        listState.list=[...listState.list,...arr]
        if(arr.length<listState.pageSize){
            listState.finished=true
        }
    }
}

function handleSearch(){
    listState.list=[]
    listState.page=1
    listState.finished=false
    getReportList()
}

//跳转详情
function goReportDetail(item){
    const url=router.resolve({
        path:'/report/detail',
        query:{
            code:item.report_code
        }
    })
    window.open(url.href,'_blank')
}

</script>

<template>
    <div class="report-search-page">
        <div class="header-wrap" @click="$router.replace('/')">
            <span>HORIZON INSIGHTS</span>
        </div>
        <div class="search-box">
            <el-input
                v-model="listState.keywords"
                class="self-input"
                placeholder="Please Input Keywords"
                :suffix-icon="Search"
                @change="handleSearch"
            />
        </div>
        <div v-if="listState.list.length===0" class="empty">no results</div>
        <div class="report-list-wrap" v-else>
            <div class="item" v-for="item in listState.list" :key="item.id" @click="goReportDetail(item)">
                <div class="title" v-html="item.title"></div>
                <div class="intro" v-html="item.content_sub"></div>
                <div class="time">{{item.publish_time}}</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.header-wrap{
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: var(--el-color-primary);
    padding: 40px 0;
    border-bottom: 1px solid#E6E6E6;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 99;
    cursor: pointer;
}
@media (max-width: 768px){
    .header-wrap{
        border: none;
        font-size: 17px;
        box-shadow: 0px 4px 20px rgba(180, 180, 180, 0.16);
        padding: 15px 0;
    }
}

.search-box{
    width: 640px; 
    margin: 60px auto 0 auto;
    .self-input{
        :deep(.el-input__wrapper){
            border-radius: 24px;
            border: 1px solid #000000;
            height: 48px;
        }
    }
}
@media (max-width: 768px){
    .search-box{
        width: calc(100vw - 34px);
        margin: 30px auto 0 auto;
        .self-input{
            :deep(.el-input__wrapper){
                height: 40px;
            }
        }
    }
}

.empty{
    padding: 50px 0 ;
    text-align: center;
    color: #666;
}

.report-list-wrap{
    width: 600px;
    margin: 50px auto;
    .item{
        border-bottom: 1px solid #E6E6E6;
        padding: 20px 0;
        .title{
            font-size: 20px;
            font-weight: 600;
        }
        .intro{
            font-size: 14px;
            color: #666;
            line-height: 17px;
            margin: 10px 0;
        }
        .time{
            font-size: 14px;
            color: #999;
        }
    }
}
@media (max-width: 768px){
    .report-list-wrap{
        width: 100%;
        padding: 0 17px;
        margin: 25px 0;
        .item{
            padding: 10px 0;
            .title{
                font-size: 14px;
            }
            .time{
                font-size: 12px;
            }
        }
    }
}
</style>