list.vue 3.22 KB
<template>
  <div>
    <div class="box forPc">
      <el-breadcrumb class="mt20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>资讯列表</el-breadcrumb-item>
        <el-breadcrumb-item>{{ kindName }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="newsLine mt20 mb20">
        <div v-for="(n,index) in newsList" :key="index" class="item" @click="goDetail(n)">
          <div class="date">
            <div class="day">{{ n.belongTime?.substring(8, 10) }}</div>
            <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p>
          </div>
          <div class="item-body">
            <h3>
              <span v-if="n.publishType">
                <span v-for="(t,index) in n.publishType.split(',')" :key="index" class="jstype">{{ t }}</span>
              </span>

              {{ n.name }}</h3>
          </div>
          <a class="go" />
        </div>

        <div v-if="total>8" class="pc-page-box">
          <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList" />
        </div>

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

      </el-card>


    </div>
    <div class="newsLine wbg forWei">
      <div v-for="(n,index) in newsList" :key="index" class="item"
           @click="goDetail(n)" style="height: 70px">
        <div class="date" style="height: auto;padding: 8px 0">
          <div class="day" style="font-size: 16px">{{ n.belongTime?.substring(8, 10) }}</div>
          <p style="font-size: 12px">{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p>
        </div>
        <div class="item-body" style="width: 100%">
          <h3 class="esp_2" style="font-size: 15px;">
            <span v-if="n.publishType">
              <span v-for="(t,index) in n.publishType.split(',')" :key="index" class="jstype">{{ t }}</span>
            </span>
            {{ n.name }}</h3>
        </div>
      </div>

      <div v-if="total>8" class="pc-page-box">
        <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList" />
      </div>

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

    </div>


  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
import { onMounted, ref } from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRoute, useRouter } from 'vue-router'

const query = ref({
  pageSize: 10,
  pageNum: 1
})
const kindName = ref('')
const total = ref(0)
const newsList = ref([])
onMounted(() => {
  kindName.value = route.query.sortName
  query.value.sortId = route.query.sortId
  query.value.code = route.query.code
  getList()
})
const getList = () => {
  getNewsListById(query.value).then(res => {
    newsList.value = res.rows
    total.value = res.total
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
</script>

<style scoped lang="scss">

</style>