web/pages/report-industries/index.vue

<template>
  <div class="page" id="page">
    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="report-nav-container top-container">
        <n-icon :component="IosFiling" size="40" style="vertical-align: middle" />
        <span>{{ t("common.navigate.report") }}</span>
      </div>
    </div>
    <div class="page-nav">
      <div class="report-page-nav page-nav-container">
        <div class="nav-txt wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
          <n-breadcrumb separator=">">
            <n-breadcrumb-item>
              <n-icon :component="MdHome" /><router-link to="/home">{{
                t("common.navigate.home")
              }}</router-link>
            </n-breadcrumb-item>
            <n-breadcrumb-item>
              <n-icon :component="IosFiling" />{{ t("common.navigate.report") }}
            </n-breadcrumb-item>
          </n-breadcrumb>
        </div>
        <div class="content">
          <div class="content-search">
            <div class="report-category wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
              <div class="report-category-title">
                {{ t("report.category.fsttitle") }}
              </div>
              <ul>
                <template v-for="item in categories" :key="item">
                  <li>
                    <a>
                      <span class="category-name">{{ item.marketTypeName }}({{ item.marketCount }})</span>
                      <span class="category-check">
                        <n-checkbox size="large" :checked="item.marketType === record.marketType" @update:checked="
                            handleCategory(
                              $event,
                              item.marketType,
                              item.marketTypeName
                            )
                          " />
                      </span>
                    </a>
                  </li>
                </template>
              </ul>
            </div>

            <div class="report-search wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
              <div class="report-search-name">
                {{ t("report.category.sndtitle") }}
              </div>
              <div class="report-search-content">
                <n-input-number :show-button="false" clearable v-model:value="record.priceStr" :min="0" />
                <span class="report-search-line">-</span>
                <n-input-number :show-button="false" clearable v-model:value="record.priceEnd" :min="0" />
                <n-button type="primary" @click="queryPrice">{{
                  t("report.category.ok")
                }}</n-button>
              </div>
              <div class="report-search-range">
                <!--<template v-for="item in prices" :key="item">-->
                <div class="price-range range">
                  <!--({{ item.marketCount }})-->
                  <span>{{ t("report.price.eight") }}</span>
                  <n-checkbox size="large" :checked="8000 === record.queryPrice" @update:checked="handlePrice($event, 8000)" />
                </div>
                <div class="price-range range">
                  <!--({{ item.marketCount }})-->
                  <span>{{ t("report.price.twelve") }}</span>
                  <n-checkbox size="large" :checked="12000 === record.queryPrice" @update:checked="handlePrice($event, 12000)" />
                </div>
                <div class="price-range range">
                  <!--({{ item.marketCount }})-->
                  <span>{{ t("report.price.fifteen") }}</span>
                  <n-checkbox size="large" :checked="15000 === record.queryPrice" @update:checked="handlePrice($event, 15000)" />
                </div>
                <div class="price-range range">
                  <!--({{ item.marketCount }})-->
                  <span>{{ t("report.price.fifteens") }}</span>
                  <n-checkbox size="large" :checked="15001 === record.queryPrice" @update:checked="handlePrice($event, 15001)" />
                </div>
                <!--</template>-->
                <!-- <div class="price-range range">
                                  <span>&lt;￥3000(1000)</span>
                                  <n-checkbox size="large"
                                      :checked="3000 === record.queryPrice"
                                      @update:checked="handlePrice($event,3000)"/>
                              </div>-->
              </div>
            </div>

            <div class="report-search wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
              <div class="report-search-name">
                {{ t("report.category.trdtitle") }}
              </div>
              <div class="report-search-content">
                <n-date-picker type="date" clearable v-model:value="publishDateStr" />
                <span class="report-search-line">-</span>
                <n-date-picker type="date" clearable v-model:value="publishDateEnd" />
                <n-button type="primary" @click="queryPublishDate">{{
                  t("report.category.ok")
                }}</n-button>
              </div>
              <div class="report-search-range">
                <template v-for="item in publishDates" :key="item">
                  <div class="date-range range">
                    <span>{{ item.marketTypeName }}({{ item.marketCount }})</span>
                    <n-checkbox size="large" :checked="
                        item.publishDateValue === record.queryPublishDate
                      " @update:checked="
                        handlePublishDate(
                          $event,
                          item.publishDateValue,
                          item.marketTypeName
                        )
                      " />
                  </div>
                </template>
              </div>
            </div>

            <div class="report-search wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
              <div class="report-search-name">
                {{ t("report.content.area") }}
              </div>
              <div class="report-search-range">
                <div class="range">
                  <span>{{ t("report.content.global") }}</span>
                  <n-checkbox size="large" :checked="record.reportRegion === '1'" @update:checked="handleRegion($event, '1')" />
                </div>
              </div>
              <div class="report-search-range">
                <div class="range">
                  <span>{{ t("report.content.china") }}</span>
                  <n-checkbox size="large" :checked="record.reportRegion === '0'" @update:checked="handleRegion($event, '0')" />
                </div>
              </div>
            </div>
          </div>

          <div class="report-content wow fadeInRight" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
            <div class="search">
              <div class="search-text">
                <n-tag v-if="categoryTag" type="success" closable @close="handleCloseTag($event, 'marketType')">{{ categoryTag }}</n-tag>
                <n-tag v-if="priceTag" type="success" closable @close="handleCloseTag($event, 'price')">{{ priceTag }}</n-tag>
                <n-tag v-if="publishDateTag" type="success" closable @close="handleCloseTag($event, 'publishDate')">{{ publishDateTag }}</n-tag>
                <n-tag v-if="regionTag" type="success" closable @close="handleCloseTag($event, 'region')">{{ regionTag }}</n-tag>
              </div>
              <div class="search-keyword">
                <!-- <n-input type="text" size="large" round :placeholder="t('report.content.keyword')" v-model:value="record.queryKeyword" clearable>
                                  <template #suffix>
                                      <a class="search-btn" @click="handleSearch"><n-icon :component="MdSearch" size="30" color="#0e7a0d"/></a>
                                  </template>
                              </n-input> -->

                <!-- <n-input-group>
                                  <n-button size="large" type="primary" @click="handleSearch" style="padding: 0 10px;"><n-icon :component="MdSearch" size="30" color="#fff"/></n-button>
                                  <n-input type="text" size="large" :placeholder="t('report.content.keyword')" v-model:value="record.queryKeyword" clearable/>
                              </n-input-group> -->
              </div>
            </div>
            <div class="box">
              <ul v-if="pageList?.count > 0">
                <template v-for="item in pageList?.list" :key="item">
                  <li>
                    <div class="img">
                      <img :src="BaseUrl + '/report/' + item.fileName" />
                    </div>
                    <div class="text">
                      <!-- <a @click="viewDetail(item)"><h3>{{ item.title }}</h3></a> -->
                      <a :href="
                          (lang === 'zh-CN' ? '' : '/en') +
                          '/reports/' +
                          item.webTitle +
                          '-' +
                          item.id
                        ">
                        <h2>{{ item.title }}</h2>
                      </a>
                      <p>{{ item.outline }}</p>
                      <div v-if="pcShow" class="time pc-time">
                        <n-icon :component="MdTime" color="#0e7a0d" depth="1" size="18" />
                        <span>{{ item.publishDate }}</span>
                        <span class="text-type">
                          {{ t("report.detail.formTitle") }}
                          <span class="desc-icon">
                            <img src="@/assets/images/doc.png" />
                            <img src="@/assets/images/pdf.png" />
                            <img src="@/assets/images/xlsx.png" />
                          </span>
                        </span>
                        <span class="text-price">
                          {{ t("report.content.version") }}：<b>{{
                            (item.lang == "zh-CN" ? "￥ " : "") +
                            item.price?.toFixed(2) +
                            (item.lang == "en-US" ? " USD" : "")
                          }}</b>
                        </span>
                      </div>

                      <div v-if="pcShow" class="operate">
                        <n-button class="btn" @click="handleDemand(item, '1')" type="warning">{{ t("report.content.sample") }}</n-button>
                        <n-button class="btn" v-if="lang === 'zh-CN'" type="info" @click="handleDemand(item, '2')">{{ t("report.content.buy") }}</n-button>
                        <n-button class="btn" v-else type="info" @click="tocontentBuy(item)">{{ t("report.content.buy") }}</n-button>
                      </div>
                    </div>

                    <div v-if="!pcShow" class="time mobile-time">
                      <n-icon :component="MdTime" color="#0e7a0d" depth="1" size="18" />
                      <span>{{ item.publishDate }}</span>
                      <span class="text-price">
                        {{ t("report.content.version") }}：<b>{{
                          (item.lang == "zh-CN" ? "￥ " : "") +
                          item.price?.toFixed(2) +
                          (item.lang == "en-US" ? " USD" : "")
                        }}</b>
                      </span>
                    </div>
                  </li>
                </template>

                <div class="pagination">
                  <n-pagination :page="pageList?.pageNo" :page-count="pageList?.count" :page-size="pageList?.pageSize" size="large" :on-update-page="changePage" :page-slot="7" />
                </div>
              </ul>

              <div class="box-empty" v-if="pageList?.count === 0">
                <n-empty :description="t('report.detail.empty')">
                  <template #extra>
                    <n-button @click="handleDemand({ id: '', price: 0 }, '0')" round type="primary">{{ t("report.detail.custom") }}</n-button>
                  </template>
                </n-empty>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="load">
      <n-spin size="large">
        <template #description>{{ t("report.content.loading") }}</template>
      </n-spin>
    </div>

    <n-modal :show="demandShow" preset="dialog" :title="t('report.detail.subscribe')" @close="demandShow = false" @esc="demandShow = false" @mask-click="demandShow = false" :style="'min-width: 40%'">
      <Demand :rowId="rowId" :rowPrice="rowPrice" :rowType="rowType" :rowRegion="rowRegion" @closeDialog="handleCloseDiag" />
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, onServerPrefetch, nextTick } from "vue";
import { MdSearch, MdHome, IosFiling, MdTime } from "@vicons/ionicons4";
// import {
//   NBreadcrumb,
//   NBreadcrumbItem,
//   NInput,
//   NPagination,
//   NIcon,
//   NModal,
//   NCheckbox,
//   NTag,
//   NInputNumber,
//   NButton,
//   NDatePicker,
//   NSpin,
//   PaginationInfo,
//   NInputGroup,
//   NEmpty,
// } from "naive-ui";
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 = 10;
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);
//     }
// })
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(
  checked: boolean,
  value: string | undefined,
  label: string | undefined
) {
  //const lang = useLocaleStore().getLocale;
  const language = lang === "zh-CN" ? "" : "en";
  if (checked) {
    record.value.marketType = value;
    // categoryTag.value = label;
    router.push({
      name: "reports",
      params: { category: value, lang: language },
    });
  } else {
    record.value.marketType = "";
    // categoryTag.value = "";
    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(
  checked: boolean,
  day: number | undefined,
  dayStr: string | undefined
) {
  if (checked) {
    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>
.content {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 30px;
  flex-wrap: wrap;
  .content-search {
    width: 22%;
    .report-category {
      background-color: #fff;
      padding: 20px;
      .report-category-title {
        font-size: 18px;
        font-weight: 600;
        padding: 10px 0;
      }
      ul {
        padding: 0;
        li {
          height: 50px;
          line-height: 50px;
          margin: 0;
          list-style: none;
          padding: 0;
          > a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            > .category-name {
              font-size: 16px;
              margin: 0;
              line-height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 80%;
            }
            > .category-check {
              font-size: 16px;
              color: #999999;
              text-align: center;
              vertical-align: middle;
            }
          }
        }
      }
    }
    .report-search {
      padding: 20px;
      background-color: #fff;
      margin-top: 20px;
      .report-search-name {
        font-size: 18px;
        font-weight: 600;
        padding: 10px 0;
      }
      .report-search-content {
        display: flex;
        justify-content: space-around;
        padding-bottom: 20px;
        .n-input-number {
          width: 35%;
        }
        .n-date-pick {
          width: 35%;
          .n-input .n-input-wrapper {
            .n-input__suffix {
              display: none !important;
            }
          }
        }

        .report-search-line {
          line-height: 30px;
        }
      }
      .report-search-range {
        .range {
          display: flex;
          justify-content: space-between;
          padding-bottom: 15px;
        }
      }
    }
  }
  .report-content {
    width: 77%;
    background-color: #fff;
    padding: 30px 50px;
    .search {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #d1d1d1;
      align-items: center;
      .search-text {
        padding-top: 10px;
        font-size: 16px;
        font-weight: 700;
        width: 30%;
        .n-tag {
          margin: 0 5px 5px 0;
        }
      }
      .search-keyword {
        width: 60%;
      }
    }
    .box > ul > li {
      padding: 0.3rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #d1d1d1;
      flex-wrap: wrap;
      > .img {
        max-width: 11em;
        max-height: 14em;
        overflow: hidden;
        box-shadow: 7px 0px 15px rgb(0 87 149 / 33%);
        > img {
          width: 100%;
          transition: all 0.4s ease;
          border: none;
          vertical-align: middle;
        }
        // >img:hover{
        //     transform: scale(1.1);
        // }
      }
      .text {
        width: calc(100% - 13em);
        > a {
          > h3 {
            //word-break: break-all;
          }
        }
        > .time {
          vertical-align: sub;
          padding: 10px 0;
          > span {
            padding: 0px 20px 0 2px;
            vertical-align: text-bottom;
            > b {
              color: #f00;
            }
          }
          .desc-icon {
            img {
              width: 1.7em;
              height: 1.7em;
              vertical-align: bottom;
              margin-right: 0.6em;
            }
          }
        }
        > p {
          font-size: 14px;
          color: #999999;
          line-height: 26px;
          margin: 0.15rem 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          //word-break: break-all;
        }
      }
    }
    .box {
      .box-empty {
        padding: 50px 0;
        border-bottom: 1px solid #d1d1d1;
      }
      .operate {
        width: 100%;
        text-align: right;
        .btn {
          margin: 5px;
        }
      }
    }
  }
}
.search-btn > .n-icon {
  vertical-align: middle;
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px;
}
.n-input .n-input__suffix {
  display: none !important;
}
.n-input .n-input-wrapper {
  padding: 0 1px;
}
.load {
  display: v-bind("spinShow");
}
</style>