wldp/src/views/policy/policyQuery.vue

<template>
    <Framework header-themte="white">
        <div class="policy-query">
            <div class="policy-query__title">
                救助政策
            </div>
            <div class="policy-query__search">
                <input type="text" v-model="searchValue" placeholder="请输入关键字查询" @keyup.enter ="getPolicyList" >
                <div class="search-btn" @click="getPolicyList"> <el-icon><Search /></el-icon> 查询</div>

            </div>
            <div class="policy-query__list">

                    <div class="list-item" v-for="(item,index) in policyList" :key="index" @click="this.$router.push({name:'policyDetail',query:{ data_id: item.data_id,type:'policy'}})">
<!--                        <div class="tag tag1">-->
<!--                            城乡低保-->
<!--                        </div>-->

                        <div class="type" v-if="item.policyTypeName || item.policy_type_name || item.policy_type_Name">{{ item.policyTypeName || item.policy_type_name || item.policy_type_Name  }}</div>
<!--                        用于占位-->
                        <div v-else style="width: 78px"></div>
                        <div class="text over-hidden_one">{{item.title}}</div>

                        <div class="tag tag2" v-for="(item,index) in item.archive_type.split(',')" :key="index" :style="index%2 === 1? {backgroundColor: '#C4DEFF',color: '#347BD5'} : {} ">
                            {{ item }}
                        </div>
<!--                        <div class="type" v-if="false">办事指南</div>-->

                        <div class="date">
                            {{ item.policy_date }}
                        </div>

                    </div>
                <div v-if="policyList.length === 0">
                    <el-empty description="暂无数据" />

                </div>

            </div>
            <div class="policy-query__pagination">
                <el-pagination :page-sizes="[10, 20, 50, 100]"
                               background size="large"
                               layout="total, prev, pager, next,sizes"
                               :total="total"
                               v-model:current-page="currentPage"
                               v-model:page-size="pageSize"
                               @change = "paginationChange"
                />
            </div>

        </div>
        <div class="btn">
            <router-link to="/"><img src="../../assets/images/close_btn.png" alt=""></router-link>

        </div>
    </Framework>
</template>
<script>
import Framework from '@/components/framework.vue'

export default {

  components: { Framework },
  created () {
    this.getPolicyList()
  },
  data () {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 100,
      pageNum: 1,
      policyList: [],
      searchValue: ''

    }
  },

  // 监听searchValue
  watch: {
    searchValue (newValue) {
      if (newValue === '') {
        this.pageNum = 1
        this.getPolicyList()
      }
    }
  },

  methods: {
    paginationChange (currentPage, pageSize) {
      this.pageNum = currentPage
      this.pageSize = pageSize
      this.getPolicyList()
    },
    async getPolicyList () {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searchTitle: this.searchValue,
        qry_archive_type: '',
        partyId: '5001560001'

      }
      const { data } = await this.$http.get('/api/archive/policy/getPolicyList.do', { params })
      this.policyList = data.listData
      this.total = data.total
    }

  }

}
</script>
<style scoped lang="less">
.policy-query {
    width: 100%;
    height: 870px;
    background-color: #fff;

    &__title {
        width: 100%;
        height: 56px;
        line-height: 56px;
        padding-left: 28px;
        font-size: 24px;
        color: #333;
        border-bottom: 1px solid #F2F2F2;
    }

    &__search {
        width: 1043px;
        height: 56px;
        margin: 0 auto;
        border: 1px solid #D7D7D7;
        border-radius: 28px;
        margin-top: 36px;
        display: flex;
        justify-content: space-between;
        padding-left: 28px;
        input{
            flex: 1;
            outline: none;
            border: 0;
            border-radius: 29px;
            font-size: 18px;

        }
        .search-btn{
            cursor: pointer;
            width: 137px;
            height: 56px;
            background-color: #347BD5;
            outline: none;
            border: 0;
            color: #fff;
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;

        }

    }

    &__list{
        width: 1473px;
        height: 622px;
        padding: 26px;
        border: 1px solid #D7D7D7;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        gap: 36px;
        //flex-wrap: wrap;
        //justify-content: space-between;

        .list-item{
            cursor: pointer;
            display: flex;
            gap: 15px;
            align-items: center;
            .tag{
                //width: 72px;
                //height: 24px;
                padding: 2px 8px;
                font-size: 14px;
                text-align: center;
                line-height: 24px;

                border-radius: 3px;

            }
            .tag1{
                background-color: #C4DEFF;
                color: #347BD5;
            }
            .tag2{
                background-color: #FFDDC4;
                color: #FF5205;
            }
            .text{
                width: 798px;
                //flex: 1;
            }
            .type{
                color: #347BD5;
                border: 1px solid #347BD5;
                width: 78px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                border-radius: 4px;
            }
            .date{
                margin-left: auto;
            }

        }
    }
    &__pagination{
        display: flex;
        justify-content: center;

    }

}
.btn{
    text-align: center;
    margin-top: 20px;
    img{
        cursor: pointer;
        width: 172px;
        height: 75px;

    }

}
</style>