Huaihua-High-tech-Site/src/views/creditDynamics/creditDynamicsDetail/index.vue

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import { getNews, type NewsData } from '@/api/home'
import { queryFieldMethod } from '@/utils/queryFieldMethod'
import { ElMessage } from 'element-plus'
import NewDynamics from '@/components/NewDynamics.vue'
import SmallSearch from '@/components/SmallSearch.vue'
import FourDynamics from '@/components/FourDynamics.vue'

const route = useRoute()
const router = useRouter()
const creditDynamicsList = ref<NewsData[]>([]);
const knowMore = (dickMapKey:string|undefined,dickMapValue:string|undefined)=>{
  router.push({
    path:'/creditDynamicsDetail',
    query:{
      dickMapKey,
      dickMapValue
    }
  });
}
watch(()=>route.query.dickMapKey,()=>{
  getData();
})
const dataList = ref<NewsData[]>();
const getData =async ()=>{
  const res =await getNews(queryFieldMethod('special_column',route.query.dickMapKey as string));
  if(res.code == 200){
    dataList.value = res.data;
  }else {
    ElMessage({
      message:res.msg,
      type:'error'
    })
  }
}
const init = async ()=>{
  await getData()
  const res5 = await getNews(queryFieldMethod('special_column','credit_dynamics'));
  if (res5.code == 200){
    creditDynamicsList.value = res5.data;
  }
}
const toDetail = (id:number|undefined)=>{
  if(!id){
    return
  }
  router.push({
    path:'/newsDetail',
    query:{
      id
    }
  })
}
init();
</script>

<template>
  <div class="warnningContainer">
    <div class="w-912px ml-auto mr-auto pt-20px mb-20px text-14px">
      你所在的位置：<span class="cursor-pointer" @click="$router.push('/home')" >首页</span> > <span class="cursor-pointer" @click="$router.push('/creditDynamics')">信用动态</span>> > <span class="color-#006eff">{{$route.query.dickMapValue?$route.query.dickMapValue:'详情'}}</span>
    </div>
    <div class="w-912px ml-auto mr-auto flex">
      <div class="w-603px bg-white bg-opacity-90 mr-15px">
        <div class="p-20px pl-24px pr-24px cursor-pointer " v-for="(item,index) in dataList" :key="index" @click="toDetail(item.id)">
          <div class="text-16px text-#000000 bold ">{{ item.title }}</div>
          <div class="mt-8px line-height-23px text-13px text-#464646 line-clamp-4" v-html="item.content"></div>
          <div class="mt-20px h-1px bg-#e9e9e9"></div>
        </div>
      </div>
      <div class="w-294px bg-opacity-90">
        <small-search />
        <four-dynamics />
        <new-dynamics />
      </div>
    </div>
  </div>
</template>

<style scoped>
.warnningContainer {
  background-color: #ecf0f9;
}
</style>