web/pages/report-industries/index.vue

<template>
  <div class="page">
    <div class="top">
      <img src="@/assets/images/report/img1.png" alt="">
      <div>
        <div class="top_title">Reports</div>
        <div class="top_location">
          <span class="iconfont icon-weizhi"></span>
          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Reports</span>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box_l">
        <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 in categories" :key="item">
            <div class="box_l_list_item" :class="{active:item.marketType === record.marketType}" @click=" handleCategory(
                              item,
                              item.marketType,
                              item.marketTypeName
                            )">
              <div class="box_l_list_item_l">{{ item.marketTypeName }}</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>Published</div>
          <div>
            <span class="iconfont icon-shouqi1"></span>
          </div>
        </div>
        <div class="box_l_list">
          <template v-for="item in publishDates" :key="item">
            <div class="box_l_list_item" :class="{active:item.publishDateValue === record.queryPublishDate}" @click=" handlePublishDate(
                          item,
                          item.publishDateValue,
                          item.marketTypeName
                        )">
              <div class="box_l_list_item_l">{{ item.marketTypeName }}</div>
              <div class="box_l_list_item_r ">
                <div></div>
                <span class="iconfont icon-duigou"></span>
              </div>
            </div>
          </template>
          <div class="selBox">
            <n-date-picker v-model:value="publishDateStr" clearable placeholder="Select Date" type="date" />
            <span> - </span>
            <n-date-picker v-model:value="publishDateEnd" clearable placeholder="Select Date" type="date" />
            <div class="selBox_btn" @click="queryPublishDate">OK</div>
          </div>
        </div>
      </div>
      <div class="box_r">
        <view class="box_r_list">
          <template v-for="(item,i) in pageList?.list" :key="i">
            <a class="box_r_list_item " :href="'/reports/' +item.webTitle +'-' +item.id">
              <img :src="BaseUrl + '/report/' + item.fileName" alt="">
              <div class="box_r_list_item_content">
                <h2 class="box_r_list_title">{{ item.title }}</h2>
                <div class="box_r_list_time">
                  <span class="iconfont  icon-suoshuhangye-01"></span>
                  Industry：{{dealTypeShow(item.marketType)}}{{item.marketType}}
                </div>
                <div class="box_r_list_time">
                  <span class="iconfont  icon-top_"></span>
                  Report Format：
                  <span class="desc-icon">
                    <img src="@/assets/images/doc.png" />
                    <img src="@/assets/images/pdf.png" />
                    <img src="@/assets/images/xlsx.png" />
                  </span>
                </div>
                <div class="box_r_list_time">
                  <span class="iconfont  icon-normal"></span>
                  {{ item.publishDate }}
                </div>
              </div>
              <div class="box_r_list_item_btn">
                <div class="box_r_list_item_btn_l">Request</div>
                <div class="box_r_list_item_btn_r">Buy Now</div>
              </div>
            </a>
          </template>
        </view>
        <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="未找到指定的报告">
            <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 { ref, onMounted, watch, onServerPrefetch, nextTick } from "vue";
import { MdSearch, MdHome, IosFiling, MdTime } from "@vicons/ionicons4";
import {
  useRouter,
  useRoute,
  onBeforeRouteLeave,
  onBeforeRouteUpdate,
} from "vue-router";
import { useI18n } from "#imports";
import { useUserStore } from "@/store/user";
const record = ref({ pageSize: pageSize, pageNo: 1, queryKeyword: "" } as any); // 参数
const router = useRouter(); // 传递参数
const route = useRoute(); // 接收参数
const demandShow = ref(false); // 需求页面
const categoryTag = ref<string>(); // 类型tag
const priceTag = ref<string>(); // 价格tag
const publishDateTag = ref<string>(); // 发布日期tag
const regionTag = ref<string>(); // 地区
const pageList = ref(); // 列表数据
const publishDateStr = ref<number>(); // 发布日期
const publishDateEnd = ref<number>();
const rowId = ref<string>(); // id
const rowPrice = ref<string>(); // 单价
const rowType = ref<string>(); // 类型
const rowRegion = ref<string>(); //版本
const { t } = useI18n();
const pcShow = ref<boolean>(true);
const userStore = useUserStore();
const lang = userStore.getLang;
const config = useRuntimeConfig();
const BaseUrl = ref(config.public.baseUrl);
const pageSize = 9;
const websiteToken = computed(() => userStore.getToken);
const userInfo = computed(() => userStore.getUserInfo);
function viewDetail(item: any) {
  const language = lang === "zh-CN" ? "" : "en";
  router.push({
    name: "reportDetail",
    params: {
      webTitle: item.webTitle + "-" + item.id,
      lang: language,
      keyword: record.value.queryKeyword,
    },
  });
}

const spinShow = ref("none");
const categories = ref();
//const prices = ref<ResearchReport[]>();
const publishDates = ref();
// onBeforeRouteUpdate((to) => {
//     const keyword = to.params.keyword;
//     console.log(keyword);
//     if(keyword && keyword != 'undefined'){
//         record.value.queryKeyword = keyword;
//         setTimeout(async() => {
//             await getData()
//         }, 1000);
//     }
// })
const dealTypeShow = (type) => {
  let arr = categories.value;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].marketType == type) {
      return arr[i].marketTypeName;
    }
  }
};
onMounted(async () => {
  if (typeof window !== "undefined") {
    window.scrollTo(0, 1);
  }

  // 接收参数，导航栏进入
  const marketType = route.params.category;
  record.value.marketType = marketType;

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

  // 列表
  await getData();

  // 此段代码解决无法监听home页面跳转显示tag问题
  const item = containsType(categories.value, marketType);
  categoryTag.value = item?.marketTypeName;

  pcShow.value = !isMobile();
});

watch(
  () => [route.params.category, route.params.keyword],
  async ([newCate, newKeyword], [oldCate, oldKeyword]) => {
    record.value.marketType = newCate;
    record.value.queryKeyword = newKeyword;
    await getData();
    const item = containsType(categories.value, newCate);
    categoryTag.value = item?.marketTypeName;
  }
);
async function getData() {
  spinShow.value = "block";
  record.value.lang = lang;
  const ret = await researchReportListData(record.value);
  pageList.value = ret;
  spinShow.value = "none";

  const ret2 = await researchReportCategoryList(record.value);
  categories.value = ret2;

  const ret3 = await researchReportPublishDateList(record.value);
  // prices.value = ret2.data.prices;
  publishDates.value = ret3;
}

// 选择/取消类别
function handleCategory(
  item: boolean,
  value: string | undefined,
  label: string | undefined
) {
  //const lang = useLocaleStore().getLocale;
  const language = lang === "zh-CN" ? "" : "en";
  // item.checked = !Boolean(item.checked);
  record.value.marketType =
    record.value.marketType != item.marketType ? item.marketType : "";
  if (record.value.marketType) {
    router.push({
      name: "reports",
      params: { category: value, lang: language },
    });
  } else {
    router.push({ name: "reports", params: { lang: language } });
  }
}

// 关闭tag
function handleCloseTag(_e: MouseEvent, type: string) {
  if ("marketType" === type) {
    record.value.marketType = "";
    categoryTag.value = "";

    //const lang = useLocaleStore().getLocale;
    const language = lang === "zh-CN" ? "" : "en";
    router.push({ name: "reports", params: { lang: language } });
  } else {
    if ("price" === type) {
      record.value.queryPrice = "";
      priceTag.value = "";
    }
    if ("publishDate" === type) {
      record.value.queryPublishDate = "";
      publishDateTag.value = "";
    }
    if ("region" === type) {
      record.value.reportRegion = "";
      regionTag.value = "";
    }
    getData();
  }
}

// 价格
function handlePrice(checked: boolean, price: number | undefined) {
  if (checked) {
    if (price === 5001) {
      priceTag.value = ">￥5000";
    } else {
      priceTag.value = "<￥" + price;
    }
    record.value.queryPrice = price;

    record.value.priceEnd = "";
    record.value.priceStr = "";
  } else {
    record.value.queryPrice = "";
    priceTag.value = "";
  }
  getData();
}

// 发布日期
function handlePublishDate(
  item: boolean,
  day: number | undefined,
  dayStr: string | undefined
) {
  if (record.value.queryPublishDate != day) {
    record.value.queryPublishDate = day;
    publishDateTag.value = dayStr;
  } else {
    record.value.queryPublishDate = "";
    publishDateTag.value = "";
  }
  record.value.publishDateStr = "";
  record.value.publishDateEnd = "";
  getData();
}

// 地区
function handleRegion(checked: boolean, region: string) {
  if (checked) {
    record.value.reportRegion = region;
    if ("1" === region) {
      regionTag.value = lang == "zh-CN" ? "全球与中国" : "Global";
    } else {
      regionTag.value = lang == "zh-CN" ? "中国" : "China";
    }
  } else {
    record.value.reportRegion = "";
    regionTag.value = "";
  }
  getData();
}

// 价格区间查询
function queryPrice() {
  const price01 = record.value.priceStr,
    price02 = record.value.priceEnd;
  if (price01) {
    // 价格end不存在或者小于价格str，则只计算大于价格str
    let priceDesc = "";
    if (price02) {
      if (price02 > price01) {
        priceDesc = "￥" + price01 + "~" + price02;
      } else {
        priceDesc = ">￥" + price01;
      }
    } else {
      priceDesc = ">￥" + price01;
    }
    priceTag.value = priceDesc;
  } else {
    if (price02 && price02 > 0) {
      priceTag.value = "<￥" + price02;
    } else {
      priceTag.value = "";
    }
  }
  record.value.queryPrice = ""; //去掉价格
  getData();
}

// 发布日期区间查询
function queryPublishDate() {
  const dateStr = publishDateStr.value,
    dateEnd = publishDateEnd.value;
  if (dateStr) {
    const date01 = formatDate(dateStr, "yyyy-MM-dd");
    let dateTag = "",
      date02;
    if (dateEnd) {
      date02 = formatDate(dateEnd, "yyyy-MM-dd");
      if (dateEnd > dateStr) {
        dateTag = date01 + "~" + date02;
      } else {
        dateTag = ">" + date01;
      }
    } else {
      dateTag = ">" + date01;
    }
    publishDateTag.value = dateTag;
    record.value.publishDateStr = date01;
    record.value.publishDateEnd = date02;
  } else {
    if (dateEnd) {
      const date02 = formatDate(dateEnd, "yyyy-MM-dd");
      publishDateTag.value = "<" + date02;
      record.value.publishDateEnd = date02;
    }
  }
  record.value.queryPublishDate = "";
  getData();
}

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

// 提交需求
function handleDemand(item: any, type: string) {
  rowId.value = item.id;
  rowPrice.value = item.price?.toString();
  rowType.value = type;
  rowRegion.value = item.reportRegion;
  demandShow.value = true;
}
const tocontentBuy = (item: any) => {
  if (userInfo.value?.id && websiteToken.value) {
    let param = {
      researchReportId: item.id,
      payMethod: "paypal",
      payPrice: item.price,
      payResearchKey: item.priceKey,
      payResearchType:
        item.priceName.split("-")[2] == "企业数据"
          ? t("report.detail.EnterpriseMarketShare")
          : t("report.detail.integrity"),
      payResearchVersion: "",
    };
    param.payResearchVersion =
      item.priceName.split("-")[3] == "单用户版单价"
        ? t("report.detail.singlePrice")
        : item.priceName.split("-")[3] == "多用户版单价"
        ? t("report.detail.multiPrice")
        : t("report.detail.enterprisePrice02");
    item.btnLoading = true;
    createOrder_Api(param)
      .then((res) => {
        window.open(res.data.orderPayUrl);
      })
      .finally(() => {
        item.btnLoading = false;
      });
  } else {
    userStore.setShowLoginDialog(true);
    // errorMsg("请先登录");
  }
};
// 关闭diag
function handleCloseDiag() {
  demandShow.value = false;
}

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

onServerPrefetch(async () => {
  try {
    const marketType = route.params.category;
    record.value.marketType = marketType;

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

    // 列表
    await getData();

    // 此段代码解决无法监听home页面跳转显示tag问题
    const item = containsType(categories.value, marketType);
    categoryTag.value = item?.marketTypeName;
  } catch (error) {
    console.log(error);
  }
});
useHead({
  title: t("common.navigate.report") + "-" + 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 lang="scss" scoped>
@import "~/assets/css/tool.scss";
.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-46);
      flex-grow: 1;
      .box_r_list {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        .box_r_list_item {
          background: #ffffff;
          width: var(--size-338);
          border-radius: var(--size-10);
          margin-right: var(--size-26);
          margin-bottom: var(--size-27);
          overflow: hidden;
          &:nth-child(3n) {
            margin-right: 0;
          }
          > img {
            width: var(--size-338);
            height: var(--size-394);
            display: block;
          }
          .box_r_list_item_content {
            padding: var(--size-15) var(--size-18);
            .box_r_list_title {
              font-size: var(--size-18);
              font-family: Arial, Arial-Regular;
              color: #1a1a1a;
              line-height: var(--size-28);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .box_r_list_time {
              font-size: var(--size-14);
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              color: #999999;
              line-height: var(--size-26);
              display: flex;
              align-items: center;
              .desc-icon {
                display: flex !important;
                align-items: center;
                img {
                  width: var(--size-18);
                  height: var(--size-18);
                  margin-left: var(--size-4);
                }
              }
              &:nth-child(2) {
                span {
                  font-size: var(--size-22);
                  position: relative;
                  left: var(--size--2);
                }
              }
              &:nth-child(3),
              &:nth-child(4) {
                span {
                  font-size: var(--size-18);
                  display: inline-block;
                  margin-right: var(--size-3);
                }
              }
            }
          }
          .box_r_list_item_btn {
            display: flex;
            justify-content: space-between;
            padding: var(--size-20) var(--size-18);
            border-top: 1px solid rgba(230, 230, 230, 0.5);
            > div {
              width: var(--size-145);
              height: var(--size-48);
              border-radius: var(--size-8);
              font-size: var(--size-14);
              font-family: Arial, Arial-Regular;
              text-align: center;
              color: #ffffff;
              line-height: var(--size-48);
              cursor: pointer;
            }
            .box_r_list_item_btn_l {
              background: #60ac92;
            }
            .box_r_list_item_btn_r {
              background: #84a86c;
            }
          }
        }
        .box_r_list_item:hover {
          box-shadow: 0px var(--size-9) var(--size-16) 0px #d1d1d1;
        }
      }
      .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);
        }
      }
    }
  }
}
::v-deep .n-date-picker > div {
  --n-height: var(--size-45) !important;
  margin-top: var(--size-1);
}
.load {
  display: v-bind("spinShow");
}
@include responseTo("phone") {
  .page {
    .top {
      img {
        height: 100px;
        object-fit: cover;
      }
      > div {
        padding: 15px;
        .top_title {
          font-size: 28px;
        }
      }
    }
    .box {
      padding: 15px;
      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: 16px;
            }
            .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: 0;
        .box_r_list {
          .box_r_list_item {
            width: 100%;
            margin-right: 0;
            > img {
              width: 100%;
            }
          }
        }
        .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);
          }
        }
      }
    }
  }
  ::v-deep(.n-input__input) {
    height: var(--size-34);
    line-height: var(--size-34);
    font-size: 14px;
  }
}
h2 {
  margin: 0;
}
</style>