daikins/src/views/home/intelligence/Detail.vue

<!-- 外部情报 > 情报详情 -->
<script setup lang="ts">
import AppBlock from '@/components/AppBlock.vue'
import AppNewsBox from '@/components/AppNewsBox.vue'
import Layout from './components/Layout.vue'
import DetailNews from './DetailNews.vue'
import { getArticleDetail, getArticlePage, getManagerDetail } from '@/api/daikin/base'
import { message } from '@/utils/message'

const { push } = useRouter()
const route = useRoute()

const SideNews = [
  { key: 'IntelligenceOutside', name: '社外情报' },
  { key: 'IntelligenceWithin', name: '社内情报' }
]

const state = ref<any>({})
async function getData() {
  const { id, flag } = route.params
  console.log(typeof flag)
  if (!id) return
  if (flag === 'true') {
    // 驳回&撤回
    const { data } = await getManagerDetail(id as string)
    data.tagColor = data.tag === '紧急' ? '#e60e0e' : '#2cba06'
    data.content = unescapeHTML(data.content)
    state.value = data
  } else {
    const { data } = await getArticleDetail(id as string)
    data.tagColor = data.tag === '紧急' ? '#e60e0e' : '#2cba06'

    data.content = unescapeHTML(data.content)
    state.value = data
  }
}
function unescapeHTML(html: string) {
  const doc = new DOMParser().parseFromString(html, 'text/html')
  return doc.documentElement.textContent
}

async function getDatas(id: string) {
  if (!id) return
  const { data } = await getArticleDetail(id as string)
  data.content = unescapeHTML(data.content)
  state.value = data
}

async function toDetail2(n: { id: any }) {
  console.log(route, route.path, n.id)
  if (n.id === 0) return
  if (n.isSelect === 1) {
    getDatas(n.id)
  } else {
    message.info('您没有权限查看！')
  }
}

getData()
getPageList(1)
getPageLists(1)

const neiScoll = ref<HTMLElement | null>(null)
const waiScoll = ref<HTMLElement | null>(null)
onMounted(() => {
  neiScoll.value?.addEventListener('scroll', handleNeiScoll)
  waiScoll.value?.addEventListener('scroll', handlewaiScoll)
})

const listData = ref<any[]>([])
let neiLength: number
let neiPum = 1
async function getPageList(page) {
  const pasr = {
    pageNum: page,
    pageSize: 5,
    type: 2,
    position: 'recommend'
  }
  const { rows, total } = await getArticlePage(pasr)
  neiLength = total / 6
  listData.value.push(...rows)
  console.log(listData.value)
}

const listDatas = ref<any[]>([])
let waiLength: number
let waiPum = 1
async function getPageLists(page) {
  const pasr = {
    pageNum: page,
    pageSize: 5,
    type: 1,
    position: 'recommend'
  }
  const { rows, total } = await getArticlePage(pasr)
  waiLength = total / 6
  listDatas.value.push(...rows)
}

const handleNeiScoll = () => {
  const container = neiScoll.value
  if (container) {
    const isAtBottom = container.scrollHeight - container.scrollTop === container.clientHeight
    if (isAtBottom) {
      if (neiPum < neiLength) {
        ++neiPum
        getPageList(neiPum)
      }
    }
  }
}
const handlewaiScoll = () => {
  const container = waiScoll.value
  if (container) {
    const isAtBottom = container.scrollHeight - container.scrollTop === container.clientHeight
    if (isAtBottom) {
      if (waiPum < waiLength) {
        ++waiPum
        getPageList(waiPum)
      }
    }
  }
}
</script>

<template>
  <Layout>
    <div class="page-wrap h-834px">
      <div class="page-main">
        <AppBlock class="h-full">
          <div class="overflow-y-auto h-full">
            <div class="px46px py40px">
              <DetailNews
                :title="state.title"
                :content="state.content"
                :publishTime="state.publishTime"
                :tag="state.tag"
                :tagColor="state.tagColor"
                :source="state.source"
              />
            </div>
          </div>
        </AppBlock>
      </div>
      <div class="page-side">
        <AppBlock class="h-400px">
          <div class="box h-full">
            <div class="box-title flex items-center" @click="push({ name: 'IntelligenceWithin' })">
              <span class="flex-1">社内情报</span>
              <span>❯</span>
            </div>
            <div ref="neiScoll" class="box-content overflow-y-auto px22px">
              <div class="py13px line" v-for="i in listData" :key="i">
                <!-- <AppNewsBox @click="toDetail2(i)"
                  class="!lh-2em"
                  :labelText="i.tag"
                  labelColor="#2cba06"
                  :text="i.title"
                  :date="i.publishTime"
                  size="h20px"
                />  -->
                <div class="flex" @click="toDetail2(i)">
                  <img v-if="i.tag === 'New'" src="../../../assets/images/NEW3.gif" class="h20px" />
                  <img v-if="i.tag === '紧急'" src="../../../assets/images/jj.gif" class="h20px" />
                  <div class="ml5px leading-4.5 max-w300px overflow-ellipsis">
                    {{ i.title }}
                  </div>
                </div>
                <div class="text-#808696 text-right">{{ i.publishTime }}</div>
              </div>
            </div>
          </div>
        </AppBlock>
      </div>
      <div class="page-side">
        <AppBlock class="h-400px">
          <div class="box h-full">
            <div class="box-title flex items-center" @click="push({ name: 'IntelligenceOutside' })">
              <span class="flex-1">社外情报</span>
              <span>❯</span>
            </div>
            <div ref="waiScoll" class="box-content overflow-y-auto px22px">
              <div class="py13px line" v-for="i in listDatas" :key="i">
                <!-- <AppNewsBox @click="toDetail2(i)"
                  class="!lh-2em"
                  :labelText="i.tag"
                  labelColor="#2cba06"
                  :text="i.title"
                  :date="i.publishTime"
                  size="h20px"
                />  -->

                <div class="flex" @click="toDetail2(i)">
                  <img v-if="i.tag === 'New'" src="../../../assets/images/NEW3.gif" class="h20px" />
                  <img v-if="i.tag === '紧急'" src="../../../assets/images/jj.gif" class="h20px" />
                  <div class="ml5px leading-4.5 max-w300px overflow-ellipsis">
                    {{ i.title }}
                  </div>
                </div>
                <div class="text-#808696 text-right mt8px">
                  {{ i.publishTime }}
                </div>
              </div>
            </div>
          </div>
        </AppBlock>
      </div>
    </div>
  </Layout>
</template>

<style scoped lang="less">
.overflow-ellipsis {
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.page-wrap {
  display: grid;
  grid-template-columns: 1fr 314px;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;

  .page-main {
    height: 830px;
    grid-area: 1 / 1 / 3 / 2;
    width: 100%;
  }
  .page-side {
    height: 100%;
    grid-area: 1 / 2 / 2 / 3;
    &:last-of-type {
      height: 300px;
      grid-area: 2 / 2 / 3 / 3;
    }
  }
}

.box {
  --title-h: 58px;

  border: 0;
  .box-title {
    height: var(--title-h);
    color: #fff;
    background-color: #537deb;
    font-size: 18px;
    font-weight: 600;
    padding: 0 24px;
    cursor: pointer;
  }
  .box-content {
    height: 100%;
    max-height: calc(100% - var(--title-h));
  }
}
.line {
  border-bottom: 1px solid #eef3fb;
}
</style>