Huaihua-High-tech-Site/src/layout/component/HeadBlock.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
// import type { TabsInstance } from 'element-plus'

import { useRoute, useRouter } from 'vue-router'
import { getNews, type NewsData, type NewsResponseData } from '@/api/home'
import { getFileExtension } from '@/utils/getFileExtension'
import { queryFieldMethod } from '@/utils/queryFieldMethod'
import { useSearchStore } from '@/stores/searchStore'

const searchStore = useSearchStore();

const input3 = ref('')
const firstNewsList = ref<NewsData[]>();
const tabs = ref([
  { title: '企业名称', placeholder: '请输入企业名称' },
  { title: '统一社会信用代码', placeholder: '请输入统一社会信用代码' },
  { title: '站内文章', placeholder: '请输入站内文章关键字' }
])
const isHome = ref<boolean>(false);

const route: any = useRoute()
const router: any = useRouter()
const BASE_URL = import.meta.env.VITE_APP_BASE_URL;
const homeImgUrl = ref<string>('');

const munTabs = ref([
  { title: '首页', route: 'home' },
  { title: '信用动态', route: 'creditDynamics' },
  { title: '信用惠企', route: 'creditWiseEnterprise' },
  { title: '信用红榜', route: 'creditEcaluationResults' },
  { title: '信用警示', route: 'creditWarning' },
  { title: '企业自主上报', route: 'creditServices' },
  { title: '园区通知公告', route: 'about' }
])
const checkIndex = ()=>{
  const filter = munTabs.value.find(item=> item.title == route.meta.title );
  let index =null;
  if(filter){
    index = munTabs.value.indexOf(filter)
  }
  return index;
}
const activeTab = ref(0)
const activeMun = ref(checkIndex())
const staticNews = ref<NewsData>();
watch(() => route.meta.title,()=>{
  activeMun.value = checkIndex();
})
const placeholder = ref('请输入企业名称')
// const tabPosition = ref<TabsInstance['tabPosition']>('left')
const setActiveTab = (index: any, value: any) => {
  if(!index){
    activeTab.value = 0
  }else {
    activeTab.value = index
  }
  if(!value){
    placeholder.value = '请输入企业名称'
  }else {
    placeholder.value = value?.placeholder
  }
}
setActiveTab(route.query.searchModule,tabs.value[route.query.searchModule])
const munActiveTab = (index: any, tab: any) => {
  activeMun.value = index
  router.push({
    path: tab.route,
    query: {}
  })
}
const toSearch = (searchModule:number,value:string)=>{
  router.push({
    path:'/search',
    query:{
      searchModule,
      value
    }
  })
}
const toDetail = (id:number|undefined)=>{
  if(!id){
    return;
  }
  router.push({
    path:'/newsDetail',
    query:{
      id
    }
  })
}
const getData =async ()=>{
  const res:NewsResponseData = await getNews(queryFieldMethod('special_column','big_news'));
  // console.log(res)
  if(res.code == 200){
    firstNewsList.value = res.data.slice(0,5);
  }
  const res1:NewsResponseData = await getNews(queryFieldMethod('special_column','static_news'))
  if(res1.code == 200){
    staticNews.value = res1.data[0];
  }
  // const find = res.data.find(item=>{
  //   return item.files.find(q=>{
  //     return getFileExtension(q.fileOriginalName) == 'png'||getFileExtension(q.fileOriginalName) == 'jpg'
  //   })
  // })
  // if(find){
  //   firstNews.value = find;
  // }else {
  //   firstNews.value = res.data[0];
  // }
  // homeImgUrl.value = BASE_URL + firstNews.value?.files.find(item=>{
  //   return getFileExtension(item.fileOriginalName) == 'png'||getFileExtension(item.fileOriginalName) == 'jpg'
  // })?.fileUrl
  // console.log(homeImgUrl)
  // console.log(firstNews.value)
};
const computeImgUrl = (files:FileType[])=>{
  return BASE_URL + files.filter(item=>{
    return getFileExtension(item.fileUrl) == 'png'||getFileExtension(item.fileUrl) == 'jpg'
  })?.[0]?.fileUrl
}
const init = ()=>{
  getData()
  if(route.query.value){
    input3.value = route.query.value;
  }
}
const toManager = ()=>{
  window.open('http://42.48.99.5:81/')
}
init()

</script>

<template>
  <div class="headContainer w-99vw" style="background-image:url('/static/首页背景.png');background-size: 100% 100%;object-fit: fill">
    <!-- 标题部分登录跳转 -->
    <div class="headTitle">
      <text>欢迎来到怀化高新区企业信用分级分类网</text>
      <div>
        <el-button type="primary" @click="toManager">登录</el-button>
      </div>
    </div>
    <!-- 头部功能及其显示内容 -->
    <div class="headModule">
      <div class="h-238px">
        <h1>怀化高新区企业信用分级分类网</h1>
<!--        <h3>www.aabbccd.com</h3>-->
      </div>
      <div class="headSearch">
        <!-- 搜索上方tab切换选择 -->
        <div class="headSTab">
          <div v-for="(tab, index) in tabs" :key="index" class="tab cursor-pointer hover:bg-#FF9900 hover:bg-op-80" :class="{ active: activeTab == index }"
               @click="setActiveTab(index, tab)">
            {{ tab.title }}
          </div>
        </div>
        <!-- 搜索框位置 -->
        <div>
          <el-input v-model="input3" style="width: 337px;height:33px" :placeholder=placeholder
                    class="input-with-select">
            <template #append>
              <el-button :icon="Search" @click="toSearch(activeTab,input3)" />
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="D" style="display:flex;justify-content:center">
      <div style="width:100%;
        bottom: 0;
        display: flex;
        justify-content: center;
        background:rgba(255,255,255,.22);
        height:46px"
      >
        <div class="headMune bg-opacity-22">
          <div v-for="(tab, index) in munTabs" :key="index" class="tab cursor-pointer hover:bg-#FF9900 hover:bg-op-80" :class="{ activeMun: activeMun === index }"
               @click="munActiveTab(index,tab)">
            {{ tab.title }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="route.meta.title == '首页'">
      <div class="h-100px" >
        <div class="w-1112px ml-auto mr-auto text-center mt-21px mb-20px bg-white bg-opacity-90 h-102px cursor-pointer" @click="toDetail(staticNews?.id)">
          <div class="text-26px font-600 color-black line-height-60px pt-21px pb-10px">{{staticNews?.title}}</div>
          <div class="mb-17px " ></div>
        </div>
      </div>
      <div class="w-1112px ml-auto mr-auto  mt-20px pb-54px ">
        <el-carousel :interval="5000" arrow="always" indicator-position="none" height="367px">
          <el-carousel-item v-for="item in firstNewsList" :key="item">
            <div class="flex">
              <div class="w-685px h-351px">
                <img class="w-100% h-100%" :src="computeImgUrl(item.files)" />
              </div>
              <div class="w-427px h-351px p-22px bg-white bg-opacity-90">
                <div class="w-368px h-44px mb-12px bold text-22px line-height-22px line-clamp-2">{{item.title}}</div>
                <div class="w-368px h-206px mb-17px line-clamp-8 line-height-23px overflow-hidden text-13px" v-html="item.content"></div>
                <div class="color-006eff cursor-pointer text-right" @click="toDetail(item.id)" >了解更多 ></div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$boxWidth: 1200px;

.headContainer {
  background-size: 100% 100%;
  position: relative;
  //background-image: url(src/assets/img/首页背景.png);
  .headTitle {
    margin: 0 40px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      font-weight: 400;
      font-size: 13px;
      color: #FFFFFF;
    }
  }

  .headModule {
    margin-top: 27px;
    width: $boxWidth;
    margin: 27px auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    H1 {
      font-weight: bold;
      font-size: 26px;
      color: #FFFFFF;
    }

    H3 {
      font-weight: bold;
      font-size: 14px;
      color: #FFFFFF;
      margin: 16px 0 0 0;
    }

    .headSearch {

      .headSTab {
        display: flex;

        .tab {
          color: white;
          padding: 6px 6px;
          margin-bottom: 16px;
          border-radius: 6px;
        }

        .active {
          background-color: #FF9900;
        }
      }
    }
  }

  .headMune {
    width: 100%;
    bottom: 0;
    width: $boxWidth;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;

    .tab {
      color: white;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .activeMun {
      background-color: #FF9900;
    }
  }
}
</style>