web/pages/news-categories/index.vue

<template>
  <div class="page" id="page">
    <div class="top">
      <img src="@/assets/images/newsCategories/img1.png" alt="">
      <div>
        <div class="top_title">Industry News</div>
        <div class="top_location">
          <span class="iconfont icon-weizhi"></span>
          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Industry News</span>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box_l">
        <div class="box_l_title">
          <div>Information Type</div>
          <div>
            <span class="iconfont icon-shouqi1"></span>
          </div>
        </div>
        <div class="box_l_list">
          <template v-for="item in newsCategory" :key="item">
            <div class="box_l_list_item" :class="{active:item.dictValue === params?.marketType}" @click=" handleType(item.dictValue)">
              <div class="box_l_list_item_l">{{ item.dictLabel }}</div>
              <div class="box_l_list_item_r ">
                <div></div>
                <span class="iconfont icon-duigou"></span>
              </div>
            </div>
          </template>
        </div>
        <div class="box_l_title">
          <div>Industry Segment</div>
          <div>
            <span class="iconfont icon-shouqi1"></span>
          </div>
        </div>
        <div class="box_l_list">
          <template v-for="(item,i) in reportTypes" :key="i">
            <div class="box_l_list_item" :class="{active:item.dictValue === params?.marketCategory }" @click="handleCategroy(item.dictValue)">
              <div class="box_l_list_item_l">{{ item.dictLabel }}</div>
              <div class="box_l_list_item_r ">
                <div></div>
                <span class="iconfont icon-duigou"></span>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="box_r">
        <div class="box_r_list">
          <div class="box_r_item" v-for="item in pageList?.list" :key="item">
            <a :href="'/news/' +item.webTitle +'-' +item.id">
              <img :src="BaseUrl +'/fileupload/' + item.filePath +item.fileName" alt="">
            </a>
            <div class="box_r_item_content">
              <div class="date">{{formatDateEn(item.publishDate) }}</div>
              <a :href="'/news/' +item.webTitle +'-' +item.id" class="title">{{ item.title }}</a>
              <a :href="'/news/' +item.webTitle +'-' +item.id" class="btn">Know More</a>
            </div>
          </div>
        </div>
        <div class="pageBox" v-if="pageList?.list.length>0">
          <n-pagination show-quick-jumper :page-count="pageList?.count" :on-update:page="changePage" :page-slot="6">
            <template #prev>
              <div class="pageBox_btn">Previous</div>
            </template>
            <template #next>
              <div class="pageBox_btn">Next</div>
            </template>
            <template #goto>
              <div class="pageBox_inp">Go To</div>
            </template>
          </n-pagination>
        </div>
        <div class="box-empty" v-if="pageList?.count === 0">
          <n-empty description="The specified information was not found">
            <template #extra>
              <!-- <n-button @click="handleDemand({ id: '', price: 0 }, '0')" round type="primary">{{ t("report.detail.custom") }}</n-button> -->
            </template>
          </n-empty>
        </div>
        <div class="load">
          <n-spin size="large">
            <template #description>Loading...</template>
          </n-spin>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { IosFiling, MdHome, MdSearch } from "@vicons/ionicons4";
import {
  NIcon,
  NBreadcrumb,
  NBreadcrumbItem,
  NInput,
  NList,
  NListItem,
  NThing,
  NPagination,
  NSpin,
} from "naive-ui";
import { useRouter, useRoute } from "vue-router";
import { onMounted, onServerPrefetch, ref, watch } from "vue";
import { useI18n } from "#imports";
import { useUserStore } from "@/store/user";
const config = useRuntimeConfig();
const BaseUrl = ref(config.public.baseUrl);
const pageSize = 10;
const router = useRouter();
const route = useRoute(); // 接收参数
const reportTypes = ref([]); // 报告分类
const newsCategory = ref([]); //资讯分类

const params = ref({ pageSize: pageSize, pageNo: 1, keyword: "" }) as any; // 参数
const pageList = ref({ list: [] }); //data
const spinShow = ref("none"); // loading
const { t } = useI18n();
const pcShow = ref<boolean>(true);
const userStore = useUserStore();
const lang = userStore.getLang;

function viewDetail(item: MarketInfo) {
  const language = lang === "zh-CN" ? "" : "en";
  router.push({
    name: "newsDetail",
    params: { webTitle: item.webTitle + "-" + item.id, lang: language },
  });
}

// onMounted(async () => {
//   pcShow.value = !isMobile();

//   const keyword = route.params.keyword;
//   if (keyword) {
//     params.value.keyword = keyword;
//   }

//   const dicts = await getLocalSessionReport();
//   reportTypes.value = dicts;

//   const dicts02 = await getLocalSessionNews();
//   newsCategory.value = dicts02;

//   if (containsMarketType(dicts, route.params.marketType)) {
//     params.value.marketCategory = route.params.marketType;
//   } else {
//     params.value.marketType = route.params.marketType;
//   }
//   await getData();
// });

watch(
  () => [
    route.params.marketType,
    route.params.marketCategory,
    route.params.keyword,
  ],
  async (newValue, oldValue) => {
    params.value.marketType = newValue[0];
    params.value.marketCategory = newValue[1];
    params.value.keyword = newValue[2];
    await getData();
  }
);
async function getData() {
  spinShow.value = "block";
  params.value.lang = lang;
  const ret = await marketInfoPageList({ ...params.value });
  // setTimeout(() => {
  pageList.value = ret;
  spinShow.value = "none";
  // }, 500);
}

//报告分类
function handleCategroy(type: string | undefined) {
  params.value.marketType = "";
  const language = lang === "zh-CN" ? "" : "en";
  if (params.value.marketCategory == type) {
    router.push({
      name: "newsCategories",
      params: { lang: language },
    });
  } else {
    params.value.marketCategory = type;
    router.push({
      name: "newsCategories",
      params: { marketCategory: type, lang: language },
    });
  }
}

//资讯分类
function handleType(type: string | undefined) {
  params.value.marketCategory = "";
  const language = lang === "zh-CN" ? "" : "en";
  if (params.value.marketType == type) {
    params.value.marketType = "";
    router.push({
      name: "newsCategories",
      params: { lang: language },
    });
  } else {
    params.value.marketType = type;
    router.push({
      name: "newsCategories",
      params: { marketType: type, lang: language },
    });
  }
}

// 全部
function handleAll() {
  params.value.marketCategory = "";
  params.value.marketType = "";
  const language = lang === "zh-CN" ? "" : "en";
  router.push({ name: "newsCategories", params: { lang: language } });
}

// 改变页数
async function changePage(page: number) {
  document.documentElement.scrollTop = 0;
  params.value.pageNo = page;
  await getData();
}

// 关键字查询
async function handleSearch() {
  await getData();
}

try {
  const keyword = route.params.keyword;
  if (keyword) {
    params.value.keyword = keyword;
  }
  const dicts = await getLocalSessionReport();
  reportTypes.value = dicts;

  const dicts02 = await getLocalSessionNews();
  newsCategory.value = dicts02;

  if (containsMarketType(dicts, route.params.marketType)) {
    params.value.marketCategory = route.params.marketType;
  } else {
    params.value.marketType = route.params.marketType;
  }
  params.value.lang = lang;
  const ret = await marketInfoPageList({ ...params.value });
  pageList.value = ret;
} catch (error) {
  console.log(error);
}
useHead({
  title: t("common.navigate.news") + "-" + t("defaultSettings.title"),
  viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
  charset: "utf-8",
  meta: [
    {
      hid: "keywords",
      name: "keywords",
      content: t("defaultSettings.keyword"),
    },
    {
      hid: "description",
      name: "description",
      content: t("defaultSettings.desc"),
    },
  ],
});
</script>

<style scoped lang="scss">
@import "~/assets/css/tool.scss";
.load {
  display: v-bind("spinShow");
}
.page {
  .top {
    width: 100%;
    position: relative;
    margin-top: var(--size-130);
    img {
      width: 100%;
    }
    > div {
      width: 100%;
      padding: var(--size-60) var(--size-176) 0;
      position: absolute;
      top: 0;
      left: 0;
      .top_title {
        font-size: var(--size-48);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
      }
      .top_location {
        font-size: var(--size-14);
        font-family: Arial, Arial-Regular;
        font-weight: 400;
        color: #ffffff;
        .icon-dkw_guanbi- {
          color: #ffffff;
          font-size: var(--size-12);
        }
        span {
          color: #72ff56;
        }
      }
    }
  }
  .box {
    background: #f6f7fa;
    padding: var(--size-30) var(--size-147) var(--size-70);
    display: flex;
    .box_l {
      background: #ffffff;
      width: var(--size-493);
      flex-shrink: 0;
      .box_l_title {
        width: 100%;
        padding: var(--size-20) var(--size-30);
        background: #6aaa87;
        font-size: var(--size-22);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
        line-height: var(--size-22);
        display: flex;
        justify-content: space-between;
        span {
          font-size: var(--size-13);
        }
      }
      .box_l_list {
        padding: var(--size-12) 0;
        border: 1px solid #ffffff;
        border-bottom: var(--size-20) solid #ffffff;
        background: #f4f7f9;
        min-height: var(--size-282);
        .box_l_list_item {
          padding: var(--size-6) var(--size-30);
          display: flex;
          justify-content: space-between;
          background: #f4f7f9;
          cursor: pointer;
          .box_l_list_item_l {
            font-size: var(--size-18);
            font-family: Arial, Arial-Regular;
            color: #639e57;
            line-height: var(--size-22);
          }
          .box_l_list_item_r {
            width: var(--size-27);
            height: var(--size-27);
            border: 1px solid #639e57;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            > div {
              width: var(--size-17);
              height: var(--size-17);
              background: #639e57;
              border-radius: 50%;
              display: block;
            }
            span {
              display: none;
            }
          }
        }
        .active {
          .box_l_list_item_l {
            font-weight: 700;
          }
          .box_l_list_item_r {
            background: #639e57;
            span {
              color: #ffffff;
              font-size: var(--size-25);
            }
            > div {
              display: none;
            }
            span {
              display: block;
            }
          }
        }
        .selBox {
          display: flex;
          align-items: center;
          padding: var(--size-8) var(--size-30);
          > span {
            display: inline-block;
          }
          .selBox_btn {
            width: var(--size-68);
            height: var(--size-44);
            background: linear-gradient(90deg, #719d58 4%, #43a086 99%);
            border-radius: var(--size-4);
            font-size: var(--size-16);
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            color: #ffffff;
            cursor: pointer;
            text-align: center;
            line-height: var(--size-44);
            flex-shrink: 0;
          }
        }
      }
    }
    .box_r {
      margin-left: var(--size-42);
      flex-grow: 1;
      .box_r_list {
        display: flex;
        flex-wrap: wrap;
        .box_r_item {
          width: var(--size-526);
          background: #ffffff;
          border-radius: var(--size-10);
          overflow: hidden;
          padding: var(--size-19);
          margin-bottom: var(--size-20);
          cursor: default;
          &:nth-child(2n-1) {
            margin-right: var(--size-20);
          }
          img {
            width: var(--size-488);
            height: var(--size-274);
            border-radius: var(--size-8);
            overflow: hidden;
          }
          .box_r_item_content {
            .date {
              font-size: var(--size-16);
              font-family: Arial, Arial-Regular;
              color: #808080;
              line-height: var(--size-15);
              margin-top: var(--size-15);
            }
            .title {
              font-size: var(--size-20);
              font-family: Arial-BoldMT;
              color: #333333;
              line-height: var(--size-28);
              margin-top: var(--size-10);
              font-weight: 700;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .btn {
              width: var(--size-108);
              height: var(--size-29);
              display: block;
              background: rgba(0, 0, 0, 0);
              border: var(--size-1) solid #509f7a;
              font-size: var(--size-14);
              font-family: ArialMT;
              text-align: center;
              color: #509f7a;
              line-height: var(--size-27);
              margin-top: var(--size-20);
              cursor: pointer;
            }
          }
          &:hover {
            background: #399ac0;
            .box_r_item_content {
              .date {
                color: #ffffff;
              }
              .title {
                color: #ffffff;
              }
              .btn {
                color: #ffffff;
                border: var(--size-1) solid #ffffff;
              }
            }
          }
        }
      }
      .pageBox {
        display: flex;
        justify-content: center;
        ::v-deep .n-pagination-item {
          min-width: var(--size-42);
          height: var(--size-42);
          background: #f2f2f2;
          border: 1px solid #cccccc;
          border-radius: var(--size-4);
          font-size: var(--size-14);
          color: #808080;
          text-align: center;
          line-height: var(--size-40);
        }
        ::v-deep .n-pagination-item--active {
          background: rgba(57, 154, 192, 1);
          color: #ffffff;
          &:hover {
            background: rgba(57, 154, 192, 1);
            color: #ffffff;
          }
        }
        .pageBox_btn {
          width: var(--size-70);
          color: #333333;
        }
        ::v-deep(.n-input__input) {
          height: var(--size-40);
          line-height: var(--size-40);
        }
        ::v-deep(.n-pagination .n-pagination-quick-jumper .n-input) {
          border: 1px solid #cccccc;
        }
        .pageBox_inp {
          font-size: var(--size-16);
        }
      }
    }
  }
}
@include responseTo("phone") {
  .page {
    .top {
      img {
        height: 100px;
        object-fit: cover;
      }
      > div {
        padding: var(--size-15);
        .top_title {
          font-size: var(--size-28);
        }
      }
    }
    .box {
      padding: var(--size-15);
      width: 100%;
      display: block;
      .box_l {
        width: 100%;
        .box_l_list {
          .box_l_list_item {
            padding: var(--size-6) var(--size-20);
            .box_l_list_item_l {
              font-size: var(--size-16);
            }
            .box_l_list_item_r {
              width: var(--size-20);
              height: var(--size-20);
              > div {
                width: var(--size-12);
                height: var(--size-12);
              }
            }
          }
          .active .box_l_list_item_r span {
            font-size: var(--size-18);
          }
          .selBox {
            padding: var(--size-6) var(--size-20);
            .selBox_btn {
              width: var(--size-52);
              height: var(--size-34);
              border-radius: var(--size-4);
              font-size: var(--size-16);
              line-height: var(--size-34);
            }
          }
        }
      }
      .box_r {
        margin-left: 0;
        margin-top: var(--size-20);
        .box_r_list {
          justify-content: space-between;
          .box_r_item {
            width: 48%;
            padding: var(--size-10) var(--size-10) var(--size-20);
            margin-right: 0 !important;
            margin-bottom: var(--size-10);
            img {
              width: 100%;
              // height: auto;
              height: var(--size-82);
              display: block;
            }
            .box_r_item_content {
              .date {
                margin-top: var(--size-5);
                font-size: var(--size-14);
              }
              .title {
                font-size: var(--size-16);
                line-height: var(--size-20);
                margin-top: var(--size-5);
              }
              .btn {
                margin-top: var(--size-15);
              }
            }
          }
        }
        .pageBox {
          ::v-deep .n-pagination-item {
            min-width: var(--size-21);
            height: var(--size-21);
            border-radius: var(--size-2);
            font-size: var(--size-8);
            line-height: var(--size-20);
          }
          .pageBox_btn {
            width: var(--size-35);
          }
          ::v-deep(.n-input__input) {
            height: var(--size-20);
            line-height: var(--size-20);
            font-size: var(--size-9);
          }
          .pageBox_inp {
            font-size: var(--size-8);
          }

          ::v-deep(.n-pagination .n-pagination-quick-jumper .n-input) {
            width: var(--size-35);
          }
          ::v-deep(.n-input .n-input__input-el) {
            height: var(--size-20);
            line-height: var(--size-20);
          }
        }
      }
    }
  }
}
</style>