Huaihua-High-tech-Site/src/components/Link2.vue

<script setup lang="ts">

import { formatTime } from '@/utils/formatTime'
import { getNews, type NewsData } from '@/api/home'
import { queryFieldMethod } from '@/utils/queryFieldMethod'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();
const financingLoans = ref<NewsData[]>([])
const knowMore = (dickMapKey:string|undefined,dickMapValue:string|undefined)=>{
  router.push({
    path:'/creditDynamicsDetail',
    query:{
      dickMapKey,
      dickMapValue
    }
  });
}
const toDetail = (id:number|undefined)=>{
  if(!id){
    return
  }
  router.push({
    path:'/newsDetail',
    query:{
      id
    }
  })
}
const toOrtherLink = (index:number)=>{
  if(index == 1){
    window.open("https://credit.fgw.hunan.gov.cn/xyd/feature")
  }else if(index == 2){
    window.open("https://smecmd.digital.hnchasing.com/main/cms/static/html/loan.html")
  }else if(index == 3){
    window.open("https://credit.fgw.hunan.gov.cn/xyd/financeMarketDetail?id=414&isShow=ck")
  }else if(index == 4){
    window.open('https://credit.fgw.hunan.gov.cn/xyd/financeMarketDetail?id=26&isShow=ck')
  }else if(index == 5){
    window.open('http://www.hntpe.com/onlineweb/blRisk/index?menuId=101086');
  }
}
const init =async ()=>{
  const res1 = await getNews(queryFieldMethod('special_column','financial_need'))
  if(res1.code == 200){
    financingLoans.value = res1.data.slice(0,5);
  }
  const res2 = await getNews(queryFieldMethod('special_column','financing_loans'))
  if(res2.code == 200){
    financingLoans.value = res2.data.slice(0,5);
  }
}
init()
</script>

<template>
  <div>
    <div class="w-1112px bg-white ml-a mr-a text-16px mt-12px mb-10px line-height-44px border-dashed border-#e5e5e5 border-b-5px">
      <div class="w-240px border-solid border-#00306e border-b-5px relative">
        <img class="w-21px h-21px m-3px " src="/src/assets/img/信用小图标.png" />
        <span class="color-#003aac text-16px">园区企业融资贷款</span>
        <span class="absolute right--850px top-0px cursor-pointer text-#959595" @click="knowMore('financing_loans','园区企业融资贷款')">查看更多 ></span>
      </div>
      <div v-for="(item,index) in financingLoans" :key="index">
        <div class="flex justify-between">
          <div class="ml-20px cursor-pointer" @click="toDetail(item.id)">{{item.title}}</div>
          <div class="color-gray mr-20px text-14px">
            <span>数据来源:{{item.dataSource}}</span>
            <span>|</span>
            <span>{{formatTime(item.date)}}</span>
          </div>
        </div>
        <div class="h-1px bg-gray"></div>
      </div>
    </div>
    <div>
      <div class="w-1112px ml-auto mr-auto flex flex-wrap justify-between bg-white bg-opacity-22">
        <div class="w-174px h-116px mr-10px relative cursor-pointer" @click="toOrtherLink(1)">
          <img class="w-100% h-100%" src="/static/bg3.jpg" />
          <div class="absolute bottom-0 text-center w-100% h-22px text-white text-14px pt-4px pb-4px bg-#00306e bg-opacity-72">制造业中长期贷款</div>
        </div>
        <div class="w-174px h-116px mr-10px relative cursor-pointer" @click="toOrtherLink(2)">
          <img class="w-100% h-100%" src="/static/bg4.jpg" />
          <div class="absolute bottom-0 text-center w-100% h-22px text-white text-14px pt-4px pb-4px bg-#00306e bg-opacity-72">潇湘财银贷</div>
        </div>
        <div class="w-174px h-116px mr-10px relative cursor-pointer" @click="toOrtherLink(3)">
          <img class="w-100% h-100%" src="/static/bg5.jpg" />
          <div class="absolute bottom-0 text-center w-100% h-22px text-white text-14px pt-4px pb-4px bg-#00306e bg-opacity-72">农业银行流水贷</div>
        </div>
        <div class="w-174px h-116px mr-10px relative cursor-pointer" @click="toOrtherLink(4)">
          <img class="w-100% h-100%" src="/static/bg6.jpg" />
          <div class="absolute bottom-0 text-center w-100% h-22px text-white text-14px pt-4px pb-4px bg-#00306e bg-opacity-72">湖南银行流水贷</div>
        </div>
        <div class="w-174px h-116px relative cursor-pointer" @click="toOrtherLink(5)">
          <img class="w-100% h-100%" src="/static/bg7.jpg" />
          <div class="absolute bottom-0 text-center w-100% h-22px text-white text-14px pt-4px pb-4px bg-#00306e bg-opacity-72">科技贷</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>