horzi_rai_wxa/pages/reportForm/reportForm.vue

<template>
  <view class="reportForm-container">
    <!-- tabs -->
    <view class="index-fixed">
      <view class="index-header">
        <input type="text" placeholder="搜索您想要的产业资源包" placeholder-class="sea_ipt_placeholder" class="sea_ipt" v-model="searchTxt" disabled @click="goSearch" />
        <icon type="search" size="15" class="search_ico" />
      </view>
      <view class="tab-cont">
        <scroll-view scroll-x="true" @scroll="scrollMove" :scroll-left="scrollLeft" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
          <block v-for="(item, index) in tabBars" :key="item.ChartPermissionId">
            <view :id="'_' + index" class="scroll-tab-item" :class="{ active: tabAct_id == item.ChartPermissionId }" @click.stop="toggleTab(item, index)">
              {{ item.PermissionName }}
              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tabAct_id == item.ChartPermissionId"></image>
            </view>
          </block>
          <view class="limit-box" v-if="limitIsShow">
            <image class="limit-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
          </view>
        </scroll-view>
      </view>
      <view class="lucency" v-if="tabBars.length > 6"></view>
    </view>
    <!-- 内容 -->
    <view class="strategy" v-if="strategyIndex == 4">
      <view class="tab-cont-two">
        <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab-tow">
          <block v-for="(item, index) in tabBarsTow" :key="item.CategoryId">
            <view :id="'__' + index" class="scroll-tab-item" :class="{ active: tabAct_idTwo == item.CategoryId }" @click.stop="toggleTabTwo(item, index)">
              {{ item.MatchTypeName }}
              <text class="reg-text" v-if="item.IsRed"></text>
            </view>
          </block>
        </scroll-view>
      </view>
      <view class="row"> </view>
      <!-- 子组件 -->
      <strategy
        :strategyIndexTwo="strategyIndexTwo"
        :pageNumFather="pageNumFather"
        :matchTypeName="matchTypeName"
        :tabAct_idTwo="tabAct_idTwo"
        :isNum="isNum"
        :isSwitchover="isSwitchover"
        @hideIsred="hideIsred"
      />
    </view>
    <view class="" v-else-if="strategyIndex == 5">
      <researchChoose :strategyIndex="strategyIndex" :tabAct="tabAct_id" :pageNumFather="pageNumFather" :isNum="isNum" />
    </view>
    <!-- </view> -->
    <view class="industrial_eport_one" v-else>
      <!-- 行业报告 -->
      <view class="industry" v-if="tradeList">
        <view style="height: 20rpx"></view>
        <view class="industry-top">
          <view class="img-top-box">
            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/industry-ico.png"></image>
            <text>行业综述</text>
          </view>
          <view> </view>
        </view>
        <view class="industry-box" @click="isClickHandle(item.CategoryId)" v-for="item in tradeList" :key="item.CategoryId">
          <view class="box-left">
            {{ item.MatchTypeName }}
            <text v-if="item.IsRed"></text>
          </view>
          <view class="box-right">
            <text>{{ item.UpdateTime }}更新</text>
            <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
          </view>
        </view>
      </view>
      <!-- 产业报告 -->
      <view class="industry">
        <view style="height: 12rpx" v-if="!tradeList"></view>
        <view class="industry-top industry-sticky">
          <view class="img-top-box">
            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/property_ico.png" style="height: 50rpx"></image>
            <text class="text-sub">细分产业</text>
          </view>
          <van-dropdown-menu active-color="#333333">
            <van-dropdown-item id="menuItem" @open="isscroll" :title="overallArrangementName">
              <view class="menu-items-tow">
                <view class="items-tow" @click="pitchClick(item, index)" v-for="(item, index) in pitchOn" :key="item.id">
                  <view>
                    <u-icon v-show="pitchOnId == item.id" name="checkbox-mark" color="#2C83FF" size="24"></u-icon>
                  </view>
                  <text :class="pitchOnId == item.id ? 'items-act' : ''">{{ item.name }}</text>
                </view>
              </view>
              <view style="background-color: #f8f8fa; width: 100%">
                <view style="margin: 0 auto; width: 682rpx; border-bottom: 2rpx dashed #999"> </view>
              </view>
              <view class="menu-items">
                <view class="menu-items-box" @click="overallBtn(index, item)" v-for="(item, index) in overallArrangement" :key="item.id">
                  <view class="items-box">
                    <u-icon v-show="item.isShow" name="checkbox-mark" color="#2C83FF" size="24"> </u-icon>
                  </view>
                  <text>{{ item.name }}</text>
                </view>
              </view>
              <view class="replacement-box">
                <view class="replacement">
                  <text @click="replacementBtn" class="replacement-box">重置</text>
                  <text @click="replacementConfirm">确定</text>
                </view>
              </view>
            </van-dropdown-item>
          </van-dropdown-menu>
        </view>
        <!-- 需要循环的地方 -->
        <view class="forindustry" v-for="item in industryList" :key="item.IndustrialManagementId">
          <!-- 火锅底料这个位置 -->
          <view class="industry-content">
            <view class="industry-box-left" @click="reportFllow(item.IndustrialManagementId)">
              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/top_ico.png" v-if="item.IsFollow"></image>
              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/top_no_ico.png" v-else></image>
            </view>
            <view class="industry-box-right" @click="goIndustryReport(item.IndustrialManagementId)">
              <view class="ndustry-box-read">
                <text>{{ item.IndustryName }}</text>
                <image v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/ammunition_ico.png" mode=""></image>
              </view>
              <view class="ndustry-box-arrow">
                <text v-if="item.IsRed" class="read"></text>
                <text class="ndustry-box-text">{{ item.UpdateTime }}更新</text>
                <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
              </view>
            </view>
          </view>
          <view class="content-box" v-if="item.IndustrialSubjectList.length > 6">
            <u-read-more :toggle="true" :show-height="item.IndustrialSubjectList.length > 6 ? 140 : 150" :shadow-style="shadowStyle" close-text="展开" color="#D1D1D1">
              <view class="read-more">
                <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" @click="goIndustryReport(item.IndustrialManagementId)" class="text-box">
                  {{ val.SubjectName }}
                </view>
              </view>
            </u-read-more>
          </view>
          <view class="content-box" v-else @click="goIndustryReport(item.IndustrialManagementId)">
            <view class="read-more">
              <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
            </view>
          </view>
        </view>
        <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
      </view>
    </view>
    <coverGuide :isGuideShow="isGuideShow" />
    <u-modal
      v-model="goFollowShow"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="goFollowShowBtn"
      :show-cancel-button="isCancelBtn"
      :confirm-text="confirmText"
      @cancel="isCancelBtn = false"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <rich-text :nodes="accounts"></rich-text>
      </view>
    </u-modal>
    <view class="content-intimate" v-if="reportShow">
      <van-transition :show="showTransition" name="fade-right">
        <view class="content">
          <view @click="goSecretDetail('1')">
            <text>报告</text>
            <text>精选</text>
          </view>
          <view class="cont-border" @click="goSecretDetail('2')">
            <text>本周研</text>
            <text>究汇总</text>
          </view>
          <view @click="goSecretDetail('3')">
            <text>上周纪</text>
            <text>要汇总</text>
          </view>
        </view>
      </van-transition>
      <image @click="showTransition = !showTransition" src="https://hzstatic.hzinsights.com/cygx/czbk/intimate-icon.png" mode=""></image>
    </view>
  </view>
</template>

<script>
import strategy from "./components/strategy.vue";
import researchChoose from "./components/researchChoose.vue";
import coverGuide from "./components/coverGuide.vue";
import { Throttle, Debounce } from "@/config/util.js";
import { Reports } from "@/config/api.js";
let app = getApp();
export default {
  components: {
    strategy,
    researchChoose,
    coverGuide,
  },
  data() {
    return {
      tabAct_id: "",
      tabAct_idTwo: "",
      tabBars: [],
      pageNumFather: "",
      shadowStyle: {
        backgroundImage: "none",
      },
      tabBarsTow: [],
      pitchOn: [
        {
          name: "按最近更新排序",
          id: "NewTime",
        },
        {
          name: "按推荐关注排序",
          id: "Recommend",
        },
      ],
      pitchOnId: "NewTime",
      //pitchOnName: '按最近更新排序',
      isNum: 1,
      strategyIndex: "",
      strategyIndexTwo: 0,
      isSwitchover: 1,
      tradeList: [],
      OrderColumn: "",
      industryList: [],
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      refresh: false, //正在下拉
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      haveData: true,
      totalPage: "",
      matchTypeName: "",
      overallArrangement: [
        {
          name: "新布局产业",
          id: "1",
          isShow: false,
        },
        {
          name: "深度研究产业",
          id: "2",
          isShow: false,
        },
      ],
      overallArrangementId: "",
      overallArrangementName: "按最近更新排序",
      isScrollShow: false,
      isGuideShow: false,
      limitIsShow: false, //限免显示隐藏
      goFollowShow: false,
      accounts: "",
      confirmText: "知道了",
      isCancelBtn: false,
      scrollLeft: 0,
      showTransition: false, //点击绝密后的隐现
      reportShow: false, //绝密标签的隐现
    };
  },
  onLoad(option) {
    this.loadList(option);
  },
  watch: {
    //监听tabs的变化
    tabAct_id: {
      handler() {
        this.initList();
      },
      immediate: true,
    },
  },
  methods: {
    //获取一级事件
    getClassify() {
      Reports.getClassify().then((res) => {
        if (res.Ret !== 200) return;
        this.tabBars = res.Data.List || [];
        if (!this.tabAct_id) {
          this.tabAct_id = res.Data.List[0].ChartPermissionId;
          this.$store.dispatch("statistics", {
            PageType: "Report",
            ChartPermissionId: Number(this.tabAct_id),
          });
        }
        this.limitIsShow = this.tabBars.some((item) => item.IsShowSustainable);
      });
    },
    //获取二级事件
    getstrategyAll() {
      Reports.getstrategyAll().then((res) => {
        this.tabBarsTow = res.Data.List;
        if (!this.tabAct_idTwo) {
          this.tabAct_idTwo = res.Data.List[0].CategoryId;
        }
        this.matchTypeName = res.Data.List[0].MatchTypeName;
      });
    },
    //tabs切换事件
    toggleTab(item, index) {
      this.strategyIndex = index;
      if (this.tabAct_id !== item.ChartPermissionId) {
        this.tabAct_id = item.ChartPermissionId;
        this.$store.dispatch("statistics", {
          PageType: "Report",
          ChartPermissionId: Number(this.tabAct_id),
        });
        this.pageNum = 1;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      }
      this.getRectTab(index);
    },
    async reportIsShow() {
      const res = await Reports.reportIsShow();
      if (res.Ret === 200) {
        this.reportShow = res.Data.IsShow;
      }
    },
    getRectTab(index) {
      // const query = uni.createSelectorQuery().in(this);
      // query.select(`#_${index}`).boundingClientRect(rect => {
      //          var screen = wx.getSystemInfoSync().windowWidth/2;
      //         //获取点击item的左边坐标
      //         var left = rect.left;
      //         //获取item的宽度de 一半
      //         var subhalfwidth= rect.width/2
      //         //需要scrollview 移动的距离是
      //         var juli = left-screen
      //         var zuizhongjuli = juli+subhalfwidth
      //         this.scrollLeft = this.scrollLeft+=zuizhongjuli
      // }).exec();
    },
    scrollMove(e) {
      this.scrollLeft = e.detail.scrollLeft;
    },
    //tabs切换二级事件
    toggleTabTwo(item, index) {
      this.matchTypeName = item.MatchTypeName;
      this.strategyIndexTwo = index;
      if (this.tabAct_idTwo !== item.CategoryId) {
        this.tabAct_idTwo = item.CategoryId;
        this.pageNum = 1;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      }
    },
    //点击产业报告的筛选条件
    pitchClick(item) {
      this.pitchOnName = item.name;
      this.OrderColumn = item.id;
      if (this.pitchOnId !== item.id) {
        this.pitchOnId = item.id;
      }
    },
    //获取报告所有品种接口
    getTradeList() {
      Reports.getTradeList({
        ChartPermissionId: this.tabAct_id,
      }).then((res) => {
        if (res.Ret == 200) {
          this.tradeList = res.Data.List || [];
        }
      });
    },
    //获取产业报告所有品种接口
    getIndustryList() {
      Reports.getIndustryList({
        ChartPermissionId: this.tabAct_id,
        OrderColumn: this.OrderColumn,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        IsNewLabel: this.overallArrangementId.includes(1) ? "1" : "0",
        IsDeepLabel: this.overallArrangementId.includes(2) ? "1" : "0",
      }).then((res) => {
        // this.industryList=res.Data.List
        this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
        this.totalPage = res.Data.Paging.Pages; //总页数
        if (this.page_no === 1) {
          this.industryList = res.Data.List || [];
          this.haveData = this.industryList.length ? true : false;
          if (this.refresh) {
            uni.stopPullDownRefresh();
            this.refresh = false;
          }
        } else {
          this.industryList = this.industryList.concat(res.Data.List);
        }
      });
    },
    //跳转季度策略
    async isClickHandle(id) {
      await this.$store.dispatch("checkHandle", "/reportPages/industrialReport/industrialReport?id=" + id);
    },
    //跳转产业报告
    async goIndustryReport(id) {
      await this.$store.dispatch("checkHandle", "/reportPages/IndustryReport/IndustryReport?id=" + id);
    },
    //点击关注的图标
    reportFllow(id) {
      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
        Reports.reportFllow({
          IndustrialManagementId: id,
        }).then((res) => {
          if (res.Ret === 200) {
            if (res.Data.Status == 1) {
              this.goFollowShow = true;
              this.confirmText = res.Data.GoFollow ? "去关注" : "知道了";
              if (res.Data.GoFollow) {
                this.accounts = `产业关注成功 <br> 想要及时获取该产业内容的更新推送，请关注【查研观向小助手】公众号`;
                this.isCancelBtn = true;
              } else {
                this.accounts = "产业关注成功<br>请关注【查研观向小助手】公众号，及时获取产业报告更新提醒";
              }
            }
            this.industryList.forEach((key) => {
              if (key.IndustrialManagementId == id) {
                if (key.IsFollow == 1) {
                  key.IsFollow = 0;
                  uni.showToast({
                    title: "已取消关注",
                    icon: "none",
                    duration: 2000,
                  });
                } else {
                  key.IsFollow = 1;
                }
              }
            });
          }
        });
      } else if (this.$store.state.isAuth) {
        //未授权
        uni.navigateTo({
          url: "/pageMy/authGuide/authGuide",
        });
      } else if (!this.$store.state.isAuth && this.$store.state.isBind) {
        //已授权未绑定
        uni.navigateTo({
          url: "/pageMy/login/login",
        });
      }
    },
    goFollowShowBtn() {
      if (this.confirmText == "去关注") {
        uni.navigateTo({
          url: "/activityPages/accountsOfficial/accountsOfficial",
        });
      }
      this.goFollowShow = false;
    },
    hideIsred(is) {
      this.tabBarsTow[this.strategyIndexTwo].IsRed = is;
    },
    /* 新布局产业选项*/
    overallBtn(index, item) {
      this.overallArrangement.forEach((key) => {
        if (key.id == item.id) {
          key.isShow = !key.isShow;
        }
      });
    },
    /* 新布局产业选项确定按钮 */
    replacementConfirm() {
      const arr = [];
      this.overallArrangement.forEach((key) => {
        if (key.isShow) {
          arr.push(key.id);
        }
      });
      this.overallArrangementId = arr.join(",");
      this.overallArrangementName = this.pitchOnName;
      this.page_no = 1;
      this.status = "loadmore";
      this.getIndustryList();
      this.selectComponent("#menuItem").toggle();
    },
    /* 新布局产业选项重置按钮 */
    replacementBtn() {
      this.OrderColumn = "NewTime";
      this.pitchOnId = "NewTime";
      this.overallArrangement.forEach((key) => (key.isShow = false));
      this.overallArrangementName = "按最近排序更新";
    },
    /* 判断页面滚动 */
    isscroll: Debounce(function () {
      this.isScrollShow = true;
    }),
    /* 搜索 */
    async goSearch() {
      await this.$store.dispatch("checkHandle", "/reportPages/reportSearch/reportSearch?id="+this.tabAct_id);
    },
    /* 初始 */
    initList() {
      if (this.tabAct_id && this.strategyIndex !== 4 && this.strategyIndex !== 5) {
        this.OrderColumn = "NewTime";
        this.pitchOnId = "NewTime";
        this.overallArrangementName = "按最近更新排序";
        this.overallArrangementId = "";
        this.page_no = 1;
        this.refresh = true;
        this.getIndustryList();
        this.getTradeList();
        this.overallArrangement.forEach((key) => (key.isShow = false));
      }
      this.strategyIndex == 4 ? this.getstrategyAll() : (this.tabAct_idTwo = "");
      if (this.isScrollShow) {
        this.selectComponent("#menuItem").toggle(false);
        this.isScrollShow = false;
      }
      this.isNum = 1;
    },
    /* 页面加载 */
    loadList(option) {
      if (!this.$db.get("guideSole")) {
        //新手指引
        this.isGuideShow = true;
      }
      app.globalData.isSx = true;
      this.tabAct_id = option.tab || "";
      if (option.tabs !== "" && option.tabs) {
        this.strategyIndex = 4;
        this.tabAct_idTwo = option.tabs;
      }
      if (this.tabAct_id == 31) {
        this.strategyIndex = 5;
      }
      this.getClassify();
      this.reportIsShow();
      this.$db.set("guideSole", 1); //新手指引
    },
    goSecretDetail(type) {
      uni.navigateTo({
        url: "/reportPages/secretDetails/secretDetails?type=" + type,
      });
    },
  },
  /* 触底 */
  onReachBottom: Throttle(function () {
    if (this.strategyIndex == 4) {
      this.isNum++;
      return;
    }
    if (this.status === "nomore") return;
    this.status = "loading";
    this.page_no++;
    this.getIndustryList();
  }),
  /* 下拉刷新 */
  onPullDownRefresh: Throttle(function () {
    if (this.strategyIndex == 4 || this.strategyIndex == 5) {
      this.pageNumFather = 1;
    } else {
      this.industryList = [];
      this.pageNumFather = null;
      this.page_no = 1;
      this.refresh = true;
      this.getIndustryList();
      this.getTradeList();
    }
    wx.stopPullDownRefresh();
  }),
  onShow() {
    this.$store.dispatch("checkHandle", "noGO");
    if (this.tabAct_id) {
      this.$store.dispatch("statistics", {
        PageType: "Report",
        ChartPermissionId: Number(this.tabAct_id),
      });
    }
    if (this.tabAct_id && app.globalData.isSx) {
      this.getTradeList();
    }
  },
  /**
   * 用户点击分享
   */
  onShareAppMessage: function (res) {
    return {
      title: "报告",
      path: "/pages/reportForm/reportForm?tab=" + this.tabAct_id + "&tabs=" + this.tabAct_idTwo,
      success: (res) => {},
      fail: (err) => {},
    };
  },
  /**
   *监听页面滚动
   */
  onPageScroll() {
    if (this.isScrollShow) {
      this.selectComponent("#menuItem").toggle(false);
      this.isScrollShow = false;
    }
  },
  onHide() {
    if (this.showTransition) {
      this.showTransition = false;
    }
    if (this.strategyIndex == 4 || this.strategyIndex == 5) return;
    this.selectComponent("#menuItem").toggle(false);
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.content-intimate {
  position: fixed;
  display: flex;
  align-items: center;
  bottom: 96rpx;
  right: 41rpx;
  height: 156rpx;
  .content {
    width: 432rpx;
    height: 112rpx;
    background-color: #fff;
    display: flex;
    border-radius: 56rpx;
    overflow: hidden;
    .cont-border {
      margin: 0 2rpx;
    }
    view {
      flex: 1;
      background-color: #3385ff;
      font-size: 30rpx;
      color: #fff;
      padding-top: 15rpx;
      text-align: center;
    }
  }
  
  image {
    width: 156rpx;
    height: 100%;
    z-index: 99;
  }
}
</style>