hongze_yb_xcx/pages/report/report.vue

<template>
  <view class="report-page">
    <view class="top-sticky" style="background: #fff">
      <!-- 导航 -->
      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
        <view class="content">
          <view class="avatar" @click="goUser">
            <image style="width: 100%; height: 100%; border-radius: 50%" :src="userInfo.head_img_url" mode="aspectFill" />
          </view>
          <view class="search-box" @click="goSearch">
            <van-icon custom-class="search-icon" name="search" size="20px" />
            搜索
          </view>
        </view>
      </view>
      <!-- swiper -->
      <view class="content-swiper" v-if="bannerDataList.length">
        <swiper autoplay :interval="4000" circular>
          <view v-for="item in bannerDataList" :key="item.id" @click="bannerSwiperHandler(item)">
            <swiper-item>
              <image mode="widthFix" :src="item.image_url_mobile"></image>
            </swiper-item>
          </view>
        </swiper>
      </view>
      <!-- card -->
      <view class="tab-card">
        <view class="card-item" v-for="(tab, index) in tabCards" :key="index" @click="linkPage(tab)">
          <image :src="tab.icon + '?t=' + new Date().getDay()" mode="aspectFill" class="card-ico" />
          <view class="title">{{ tab.tab }}</view>
        </view>
      </view>

      <!-- 分类 -->
      <view class="type-wrap">
        <view class="flex first-type-box">
          <view :class="['item', { act: selectTopFirstId == item.classify_name }]" v-for="(item, index) in topFirstList" :key="item.classify_name" @click="handleClickTopFirst(item, index)">
            <view>{{ item.classify_name }}</view>
          </view>
        </view>
        <view class="flex sub-type-box">
          <view :class="['item', item.chart_permission_id == selectTopSubId && 'active']" v-for="item in topSubList" :key="item.chart_permission_id" @click="handleClickTopSub(item)">{{
            item.chart_permission_name
          }}</view>
        </view>
      </view>
    </view>
    <view class="report-empty-box" v-if="finished && list.length == 0">
      <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
      <view>暂无报告</view>
    </view>
    <view class="list-wrap" v-else>
      <view class="list-item" v-for="item in list" :key="item.date">
        <view class="time">{{ getReportListDate(item.date) }}</view>
        <view class="content-list">
          <view class="content-item" v-for="(citem, index) in item.sub_list" :key="index">
            <view class="content-box" @click="goDetail(citem)">
              <view class="all-btn">全部</view>
              <view class="c-time">{{ citem.publish_time | getListTime }}</view>
              <view class="c-title">{{ citem.title }}</view>
              <view class="desc" v-html="citem.content_sub"></view>
              <view class="tags">
                <text style="margin-right: 15px" v-if="citem.classify_name_first">#{{ citem.classify_name_first }}</text>
                <text style="margin-right: 15px" v-if="citem.classify_name_second">#{{ citem.classify_name_second }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系销售弹窗 -->
    <van-popup :show="authData.show" @close="authData.show = false" :close-on-click-overlay="false">
      <view class="global-pup">
        <view class="content">
          <view style="width: 100%">
            <view>您暂无该品种权限，若想查看请联系</view>
            <view>对口销售{{ authData.contactInfo.name }}:{{ authData.contactInfo.mobile }}</view>
          </view>
        </view>
        <view class="flex bot">
          <view @click="authData.show = false" style="color: #a9afb8">取消</view>
          <view @click="handleCallPhone(authData.contactInfo.mobile)">拨号</view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
const dayjs = require("@/utils/dayjs.min");
dayjs.locale("zh-cn");
import { apiReportIndexPageAuthList, apiReportIndexPageList, apiPublicBannerMark, apiPublicBannerList } from "@/api/report";
import { apiHomeTab } from "@/api/user.js";
export default {
  filters: {
    getListTime(e) {
      return dayjs(e).format("HH:mm:ss");
    },
  },
  data() {
    return {
      navBarStyle: {
        height: 60 + "px",
        paddingTop: 40 + "px",
        paddingBottom: "4px",
      },
      authData: {
        show: false,
        isBuy: false, //是否为已购客户
        contactInfo: "",
      }, //如果是已购客户 并且点击了没有开通的品种则弹窗联系销售
      topFirstList: [],
      selectTopFirstId: 0,
      topSubList: [],
      selectTopSubId: 0,

      list: [],
      dateArr: [],
      page: 1,
      pageSize: 20,
      finished: false,

      tabPathMap: new Map([
        ["report", "/pages-report/classify"],
        ["chart", "/pages/chart/chart"],
        ["sandbox", "/pages-sandTable/sandTable"],
        ["activity", "/pages/activity/activity"],
        ["pricedriven", "/pages/pricedriven/pricedriven"],
        ["video", "/pages/video/videoList"],
        ["position_analysis", "/pages/positionAnalysis/index"],
        ["calendar_matter", "/pages/forexCalendar/index"],
      ]),
      tabCards: [],
      bannerDataList: [],
    };
  },
  onLoad() {
    this.initNavBar();
    this.getTopAuthList();
    this.getTopTab();
    this.getBannerList();
  },
  onShow() {
    uni.getSystemInfo({
      success: function (res) {
        if (res.windowWidth > 750 || ["windows", "mac"].includes(res.platform)) {
          // console.log("跳转启动页判断进入pc");
          uni.reLaunch({
            url: "/pages/pc",
          });
        }
      },
    });
  },
  onReady() {},
  onPullDownRefresh() {
    this.getTopAuthList();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  },
  onReachBottom() {
    if (this.finished) return;
    this.page++;
    this.getReportList();
  },
  onShareAppMessage() {
    return {
      title: "FICC研报",
    };
  },
  methods: {
    // banner 点击事件
    async bannerSwiperHandler(item) {
      await this.checkUserIsBind()
      if (item.id == 9999) {
        uni.navigateTo({
          url: "/pages-report/surveyHistory/surveyHistory",
        });
      } else {
        const res = await apiPublicBannerMark({
          banner_url: item.image_url_mobile,
          first_source: 1, //一级来源 1小程序移动 2小程序pc 3研报官网
          second_source: 1, //二级来源 1首页 2研报详情页
          id: item.id,
        });
        if (res.code === 200) {
          uni.navigateTo({
            url: "/pages-report/disseminatePage/disseminatePage?imgHb=" + encodeURIComponent(item.jump_url_mobile) + "&title=" + item.remark + "&id=" + item.id + "&enable="+item.enable,
          });
        }
      }
    },
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
    //顶部权限数据
    async getTopAuthList() {
      const res = await apiReportIndexPageAuthList();
      if (res.code === 200) {
        this.authData.isBuy = res.data.check_flag;
        this.authData.contactInfo = res.data.contact_info;
        this.topFirstList = res.data.permission_list.filter((item) => item.sort != 100000);
        this.handleClickTopFirst(this.topFirstList[0], 0);
      }
    },

    /* 顶部tab */
    async getTopTab() {
      const { code, data } = await apiHomeTab();

      if (code !== 200) return;
      this.tabCards = data;
    },

    //点击顶部一级分类
    handleClickTopFirst(item, index) {
      if (item.sort == 100000) {
        this.goClassify();
        return;
      }
      this.selectTopFirstId = item.classify_name;
      this.topSubList = this.topFirstList[index].list;
      this.handleClickTopSub(this.topSubList[0]);
      this.handleShowAuthData(this.topSubList[0]);
    },

    //点击顶部二级分类
    handleClickTopSub(item) {
      this.selectTopSubId = item.chart_permission_id;
      this.list = [];
      this.dateArr = [];
      this.page = 1;
      this.finished = false;
      this.getReportList();
      this.handleShowAuthData(item);
    },

    // 判断是否要为已购用户且点击的品种没有权限
    handleShowAuthData(e) {
      if (this.authData.isBuy) {
        if (!e.auth_ok) {
          this.authData.show = true;
        }
      }
    },

    //获取报告列表
    async getReportList() {
      const res = await apiReportIndexPageList({
        chart_permission_id: this.selectTopSubId,
        current_index: this.page,
        page_size: this.pageSize,
      });
      if (res.code === 200) {
        if (res.data.list) {
          if (this.list.length == 0) {
            this.list = res.data.list;
            res.data.list.forEach((item) => {
              this.dateArr.push(item.date);
            });
          } else {
            //判断是否前面已经有相同日期数据 有的话添加合并
            let arr = [];
            let temTimearr = [];
            res.data.list.forEach((item) => {
              if (this.dateArr.includes(item.date)) {
                this.list.forEach((_item) => {
                  if (item.date === _item.date) {
                    _item.sub_list = [..._item.sub_list, ...item.sub_list];
                  }
                });
              } else {
                arr.push(item);
                temTimearr.push(item.date);
              }
            });
            this.list = [...this.list, ...arr];
            this.dateArr = [...this.dateArr, ...temTimearr];
          }
        }
        if (res.data.paging.is_end) {
          this.finished = true;
        }
      }
    },

    //跳转
    linkPage({ mark }) {
      const url = this.tabPathMap.get(mark);
      uni.navigateTo({
        url,
        fail() {
          uni.switchTab({
            url,
          });
        },
      });
    },

    // 跳转分类
    goClassify() {
      uni.navigateTo({ url: "/pages-report/classify" });
    },

    //跳转搜索
    goSearch() {
      uni.navigateTo({ url: "/pages-report/search" });
    },

    //跳转我的
    async goUser() {
      await this.checkUserIsBind();
      uni.navigateTo({
        url: "/pages/user/user",
        fail() {
          uni.switchTab({
            url: "/pages/user/user",
          });
        },
      });
    },

    //跳转报告详情
    async goDetail(item) {
      if(item.report_chapter_id){
        uni.navigateTo({ url: `/pages-report/chapterDetail?chapterId=${item.report_chapter_id}&fromPage=home` });
      } else {
        uni.navigateTo({ url: "/pages-report/reportDetail?reportId=" + item.report_id });
      }
    },

    // 拨打电话
    handleCallPhone(tel) {
      uni.makePhoneCall({
        phoneNumber: tel,
        success: () => {
          this.authData.show = false;
        },
      });
    },

    //设置列表日期显示
    getReportListDate(e) {
      const isSameYear = dayjs(e).isSame(new Date(), "year");
      if (isSameYear) {
        //今年
        return dayjs(e).format("MM.DD") + " " + dayjs(e).format("ddd");
      } else {
        return dayjs(e).format("YY.MM.DD") + " " + dayjs(e).format("ddd");
      }
    },

    // 获取banner 列表
    async getBannerList() {
      const res = await apiPublicBannerList({
        is_homepage: 1,
      });
      if (res.code === 200) {
        this.bannerDataList = res.data;
      }
    },
  },
};
</script>

<style lang="scss">
.van-sticky-wrap--fixed {
  background-color: #fff;
}
.nav-bar-wrap {
  .content {
    position: relative;
    height: 100%;
    .search-icon {
      position: absolute;
      left: 25rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      position: absolute;
      left: 34rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .search-box {
    position: absolute;
    left: 110rpx;
    top: 50%;
    transform: translate(0, -50%);
    width: 422rpx;
    height: 64rpx;
    font-size: 28rpx;
    line-height: 64rpx;
    padding: 0 80rpx;
    border-radius: 100rpx;
    background-color: #f2f2f2;
    color: #999999;
  }
}
</style>

<style lang="scss" scoped>
movable-area {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(50% - 100rpx);
  pointer-events: none;
  z-index: 3;
  movable-view {
    width: fit-content;
    height: fit-content;
    pointer-events: auto;
  }
}
.top-sticky {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
}
.nav-bar-wrap {
  border-bottom: 1px solid $global-border-color;
  .content {
    .text {
      text-align: center;
      width: 50vw;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-weight: bold;
      font-size: 16px;
    }
  }
}
.type-wrap {
  // border-bottom: 1px solid $global-border-color;
  padding: 20rpx 34rpx 0 34rpx;
  box-shadow: 0px 4rpx 4rpx 1px rgba(198, 198, 198, 0.25);
  .avatar {
    width: 78rpx;
    height: 78rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
  }
  .first-type-box {
    justify-content: space-between;
    overflow-x: auto;
    gap: 0 10rpx;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    .item {
      min-width: 150rpx;
      flex-shrink: 0;
      text-align: center;
      padding: 16rpx 0;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      // font-size: $global-font-size-sm;
      image {
        width: 100rpx;
        height: 100rpx;
        display: block;
        margin: 0 auto 15rpx auto;
      }
    }
    .act {
      background: #fdf8f2;
      color: #e3b377;
    }
  }
  .sub-type-box {
    margin-top: 40rpx;
    font-size: 28rpx;
    color: #666666;
    overflow-x: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    .item {
      padding-bottom: 16rpx;
      margin-right: 50rpx;
      flex-shrink: 0;
    }
    .active {
      color: #e3b377;
      border-bottom: 2px solid #e3b377;
    }
  }
}

.list-wrap {
  padding: 20rpx 34rpx;
  .list-item {
    margin-bottom: 40rpx;
    .time {
      margin-bottom: 32rpx;
    }
  }
  .content-list {
    .content-box {
      padding: 0 0rpx 20rpx 20rpx;
      position: relative;
      .all-btn {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        width: 95rpx;
        height: 34rpx;
        background: linear-gradient(100deg, #e3b377 0%, #ffddb1 100%);
        border-radius: 17rpx;
        color: #fff;
        font-size: 24rpx;
        text-align: center;
      }
    }
    .content-item {
      padding: 0 0 50rpx 20rpx;
      border-left: 1px solid #f4e1c9;
      position: relative;
      &:last-child {
        border-bottom: none;
        padding-bottom: 0rpx;
      }
      &::before {
        content: "";
        display: block;
        box-sizing: border-box;
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border: 6rpx solid #f4e1c9;
        position: absolute;
        left: 0;
        top: 0;
        background: #e3b377;
        transform: translate(-50%, -50%);
        z-index: 2;
      }
      &::after {
        content: "";
        display: block;
        width: 34rpx;
        height: 1rpx;
        background-color: #f4e1c9;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
      .c-time {
        position: relative;
        top: -17rpx;
        font-size: 24rpx;
        color: #333333;
      }
      .c-title {
        font-size: $global-font-size-lg;
        font-weight: bold;
        word-wrap: break-word;
        white-space: normal;
        word-break: break-all;
      }
      .desc {
        line-height: 1.5;
        margin-top: 10rpx;
        color: #666666;
      }
      .tags {
        margin-top: 20rpx;
        color: #e3b377;
        min-height: 40rpx;
      }
    }
  }
}
.quesion-btn {
  width: 100rpx;
  height: 100rpx;
  background-color: red;
  border-radius: 50%;
  z-index: 50;
}

.tab-card {
  display: flex;
  padding: 40rpx 34rpx 20rpx;
  align-items: center;
  justify-content: space-between;
  .card-item {
    // margin-right: 40rpx;
    // &:last-child { margin-right: 0; }
    .card-ico {
      width: 60rpx;
      height: 60rpx;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .title {
      text-align: center;
    }
  }
}
.content-swiper {
  width: 100%;
  padding: 30rpx 34rpx 0 34rpx;
  height: auto;
  overflow: hidden;
  swiper {
    width: 100%;
    image {
      object-fit: cover; /* 按比例缩放图像，直到完全覆盖容器 */
      width: 100%;
      height: 100%;
    }
  }
}
</style>