init

components/ItemComponent/chartItem.vue

@@ -0,0 +1,119 @@
+<template>
+  <view class="container-chart-item">
+    <text class="chart-title text_twoLine">{{ list.Title }}</text>
+    <view class="item-content-img">
+      <image :src="list.BodyHtml" mode=""></image>
+    </view>
+    <view class="chart-tag">
+      <text class="tag-item" v-if="list.PtagName">{{ list.PtagName }}</text>
+      <text class="tag-item" v-if="list.CtagName">{{ list.CtagName }}</text>
+    </view>
+    <!-- <view class="chart-collect" v-if="topTabsActive == 3 && secondActive == 0">
+      <text class="cancel" @click.stop="myChartIsTop(list.ChartId)">{{ list.IsTop ? "取消置顶" : "置顶" }}</text>
+      <text class="remove" @click.stop="myChartCollect(list.ChartId)">移除</text>
+    </view>
+    <view class="my-chart-collect" v-if="topTabsActive == 3 && secondActive == 0 && list.IsTop"></view> -->
+  </view>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  props: {
+    list: {
+      type: Object,
+      default: {},
+      required: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.container-chart-item {
+  width: 350rpx;
+  padding: 20rpx 20rpx 0 ;
+  background: #ffffff;
+  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
+  border-radius: 8rpx;
+  margin-bottom: 20rpx;
+  .chart-title {
+    height: 90rpx;
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333333;
+    line-height: 42rpx;
+    border-bottom: 1rpx solid #dcdfe6;
+  }
+  .item-content-img {
+    width: 330rpx;
+    height: 286rpx;
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .chart-collect {
+    margin-top: 20rpx;
+    padding-top: 20rpx;
+    padding: 20rpx 0 0 20rpx;
+    border-top: 1rpx solid #dcdfe6;
+    display: flex;
+    align-items: center;
+    .cancel {
+      background: #3385ff;
+      margin-right: 20rpx;
+      color: #ffffff;
+    }
+    .remove {
+      border: 1px solid #3385ff;
+      color: #3385ff;
+    }
+    text {
+      width: 130rpx;
+      height: 46rpx;
+      line-height: 46rpx;
+      border-radius: 4rpx;
+      text-align: center;
+      font-size: 24rpx;
+    }
+  }
+  .my-chart-collect {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-top: 60rpx solid #3385ff;
+    border-right: 60rpx solid transparent;
+  }
+  .chart-tag {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 78rpx;
+    border-top: 1rpx solid #dcdfe6;
+    .tag-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 150rpx;
+      height: 38rpx;
+      border-radius: 28rpx;
+      border: 2rpx solid #3189ff;
+      color: #3385ff;
+      font-size: 24rpx;
+    }
+  }
+}
+</style>

components/ItemComponent/reportItem.vue

@@ -0,0 +1,118 @@
+<template>
+  <view class="container-report-item">
+    <view class="item-title text-Line">{{ list.Title }}</view>
+    <view class="item-content">
+      <text>核心观点:</text>
+      <rich-text class="text-Line rich-text-item" v-if="list.Annotation" :nodes="list.Annotation"></rich-text>
+    </view>
+    <view class="item-abstract text-Line" v-if="list.Abstract"> 摘要：{{ list.Abstract }} </view>
+    <view class="item-time">
+      <text>{{ list.PublishDate }}</text>
+      <view class="item-examine" v-if="list.IsResearch">
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
+        <text>{{ list.Pv }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue";
+export default {
+  name: "",
+  components: { mpHtml },
+  props: {
+    list: {
+      type: Object,
+      default: {},
+      required: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.container-report-item {
+  width: 350rpx;
+  background: #ffffff;
+  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
+  border-radius: 8rpx;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  .item-title {
+    position: relative;
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333333;
+    line-height: 38rpx;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    text-indent: 0.5em;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 5rpx;
+      left: 0;
+      width: 6rpx;
+      height: 31rpx;
+      background-color: #3385ff;
+    }
+  }
+
+  .item-content {
+    min-height: 140rpx;
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #666666;
+    line-height: 30rpx;
+    margin: 10rpx 0;
+    .rich-text-item {
+      line-height: 30rpx;
+      overflow: hidden;
+      -webkit-line-clamp: 7;
+      line-clamp: 7;
+    }
+  }
+  .item-abstract {
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+    line-height: 33rpx;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    margin-bottom: 20rpx;
+  }
+  .text-Line {
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+
+  .item-time {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #acacac;
+    font-size: 24rpx;
+    line-height: 28rpx;
+    .item-examine {
+      display: flex;
+      align-items: center;
+      image {
+        width: 30rpx;
+        height: 24rpx;
+        margin: 0 10rpx 0 15rpx;
+      }
+    }
+  }
+}
+</style>

pageMy/myPage/myPage.vue

@@ -0,0 +1,440 @@
+<template>
+  <view class="container my-container" v-if="haveData">
+    <view class="my-background">
+      <view class="my-notice" v-if="myNotice">
+        添加到我的小程序，做您手边的研究素材库👆
+        <van-icon @click="myNotice = false" class="my-icon" name="cross" />
+      </view>
+    </view>
+    <view class="my-info">
+      <view class="my-top-info">
+        <view class="info">
+          <view class="info-img">
+            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+              <image class="avatar" v-if="headimgurl" :src="headimgurl"></image>
+              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/logo.png" class="avatar" v-else></image>
+            </button>
+          </view>
+          <view class="info-list">
+            <block v-if="isLogin">
+              <text class="name">{{ userInfo.RealName || "--" }}</text>
+              <text class="mobile">{{ userInfo.Mobile || userInfo.Email }}</text>
+              <text class="company-name">{{ userInfo.CompanyName || "--" }}</text>
+            </block>
+            <block v-else>
+              <text class="name">Hi，请绑定联系方式～</text>
+              <text class="bind-btn" @click="loginHandle">绑定联系方式</text>
+            </block>
+          </view>
+        </view>
+        <view class="auth-info">
+          <template v-if="isLogin">
+            <scroll-view scroll-x="true" scroll-with-animation class="auth-ul" v-if="userInfo.HasPermission === 0">
+              <text class="auth-li" v-for="item in authList" :key="item">{{ item }}</text>
+            </scroll-view>
+            <block v-else>
+              <button class="auth-btn" @click="applyAuth" v-if="userInfo.HasPermission != 3">申请开通权限</button>
+            </block>
+          </template>
+          <text v-else class="no-auth">暂无品种权限信息</text>
+        </view>
+        <view class="info-item">
+          <view class="item" @click="itemClickHandle('mySchedulepage')">
+            <text class="item-number">{{ userInfo.ScheduleNum }}</text>
+            <text class="item-text">活动日程</text>
+          </view>
+          <view class="item item-label" @click="itemClickHandle('myCollection')">
+            <text class="item-number">{{ userInfo.ConNum }}</text>
+            <text class="item-text">收藏</text>
+          </view>
+          <view class="item" @click="itemClickHandle('browseHistory')">
+            <text class="item-number">{{ userInfo.HistoryNum }}</text>
+            <text class="item-text">足迹</text>
+          </view>
+        </view>
+      </view>
+      <view class="info-bot">
+        <view class="list-item border_bottom" v-for="type in typeArr" :key="type" @click="itemClickHandle(type)">
+          <text>{{ type }}</text>
+          <view class="my-bot-box">
+            <block v-if="type == '外呼号码'">
+              <text v-if="userInfo.OutboundCountryCode && userInfo.OutboundMobile" style="margin-right: 40rpx; font-size: 28rpx">{{ userInfo.OutboundCountryCode }}-{{ userInfo.OutboundMobile }}</text>
+              <text v-else style="margin-right: 40rpx; font-size: 28rpx">未设置</text>
+            </block>
+            <block v-if="type == '关注公众号'">
+              <text style="margin-right: 20rpx; font-size: 28rpx">查研观向小助手</text>
+            </block>
+            <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
+          </view>
+        </view>
+      </view>
+      <view class="bottom-text">您手边的研究素材库</view>
+    </view>
+
+    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+  </view>
+</template>
+
+<script>
+import { uploadurl, Mine, checkToken, User } from "@/config/api.js";
+import freeCharge from "@/components/freeCharge";
+let app = getApp();
+export default {
+  components: {
+    freeCharge,
+  },
+  data() {
+    return {
+      isLogin: false, //是否绑定且授权
+      haveData: null, //显示页面
+      typeArr: ["外呼号码", "访谈申请", "活动提问", "我的留言", "优化建议", "关注公众号"],
+      typeObj: new Map([
+        ["外呼号码", "editOutbound"],
+        ["访谈申请", "applyInterview"],
+        ["活动提问", "myAskPage"],
+        ["我的留言", "myLeavingMessage"],
+        ["优化建议", "advice"],
+        ["关注公众号", "accountsOfficial"],
+      ]),
+      userInfo: {},
+      authList: [],
+      myNotice: true,
+      headimgurl: "",
+    };
+  },
+  async onShow() {
+    await this.$store.dispatch("checkHandle", "noGO");
+    this.haveData = true;
+    if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+      //已授权已绑定
+      this.isLogin = true;
+      this.getUser();
+    } else {
+      this.isLogin = false;
+    }
+  },
+  methods: {
+    //点击了头像
+    onChooseAvatar(e) {
+      let token = this.$db.get("access_token");
+      let authHeader = token || "";
+      let that = this;
+      uni.uploadFile({
+        url: uploadurl,
+        filePath: e.detail.avatarUrl,
+        header: {
+          "Content-Type": "multipart/form-data",
+          Authorization: authHeader,
+        },
+        name: "file",
+        success(res) {
+          let data = JSON.parse(res.data);
+          that.headimgurl = data.Data.ResourceUrl;
+          User.headimgurlUpdate({ Headimgurl: data.Data.ResourceUrl });
+        },
+      });
+    },
+    /* 检查状态 */
+    /* 获取用户信息 */
+    getUser() {
+      Mine.getInfo().then((res) => {
+        if (res.Ret === 200) {
+          this.authList = res.Data.PermissionName && res.Data.PermissionName.split(",");
+          this.userInfo = res.Data;
+          this.headimgurl = res.Data.Headimgurl;
+          res.Data.Mobile && this.$db.set("mobile", res.Data.Mobile);
+        }
+      });
+    },
+    /* 点击登录 检验是否绑定或是否授权*/
+    loginHandle() {
+      /* 先授权再绑定 */
+      if (this.$store.state.isAuth) {
+        uni.navigateTo({
+          url: "/pageMy/authGuide/authGuide",
+        });
+      } else {
+        this.$store.state.isBind &&
+          uni.navigateTo({
+            url: "/pageMy/login/login",
+          });
+      }
+    },
+    /* 申请开通权限 */
+    applyAuth() {
+      /* 查看是否是潜在用户 */
+      this.userInfo.HasPermission === 1
+        ? User.applyTry({
+            ApplyMethod: 3,
+          }).then((res) => {
+            if (res.Ret === 200) {
+              uni.navigateTo({
+                url: "/pageMy/applyResult/applyResult",
+              });
+            }
+          })
+        : this.userInfo.HasPermission === 2
+        ? uni.navigateTo({
+            url: "/pageMy/applyTrial/applyTrial",
+          })
+        : this.userInfo.HasPermission === 3
+        ? uni.showModal({
+            title: "",
+            content: "您已经提交过申请了，请耐心等待",
+            showCancel: false,
+            confirmColor: "#365595",
+            success: function (res) {},
+          })
+        : "";
+    },
+    /* 路径跳转 */
+    itemClickHandle(type) {
+      /* 是否登录 */
+      if (this.isLogin) {
+        switch (type) {
+          case "外呼号码":
+            uni.navigateTo({
+              url: "/activityPages/editOutbound/editOutbound?title=设置外呼号码&identification=我的",
+            });
+            break;
+          case "活动提问":
+            uni.navigateTo({
+              url: "/reportPages/myAskPage/myAskPage",
+            });
+            break;
+          case "我的留言":
+            uni.navigateTo({
+              url: "/pageMy/myLeavingMessage/myLeavingMessage",
+            });
+            break;
+          case "关注公众号":
+            uni.navigateTo({
+              url: "/activityPages/accountsOfficial/accountsOfficial",
+            });
+            break;
+          case "myCollection":
+            uni.navigateTo({
+              url: `/pageMy/myCollection/myCollection`,
+            });
+            break;
+          case "browseHistory":
+            uni.navigateTo({
+              url: `/pageMy/browseHistory/browseHistory`,
+            });
+            break;
+          case "mySchedulepage":
+            uni.navigateTo({
+              url: `/pageMy/mySchedulepage/mySchedulepage`,
+            });
+            break;
+          default:
+            let path = this.typeObj.get(type);
+            uni.navigateTo({
+              url: `/pageMy/${path}/${path}`,
+            });
+        }
+      } else {
+        this.loginHandle();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.my-container {
+  background: #f9f9f9;
+  position: relative;
+  .nav-bar-wrap {
+    color: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 999;
+  }
+  .my-background {
+    height: 480rpx;
+    width: 100%;
+    background: url("https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/my_bg.jpg") no-repeat;
+    background-size: 100% 100%;
+    padding-top: 206rpx;
+    .my-notice {
+      height: 55rpx;
+      width: 690rpx;
+      margin: 0 auto;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 8px;
+      line-height: 55rpx;
+      text-align: center;
+      color: #ffffff;
+      position: relative;
+      padding-right: 20rpx;
+      .my-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        font-weight: bold;
+        font-size: 16px;
+      }
+    }
+  }
+  .my-info {
+    position: absolute;
+    top: 301rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    .my-top-info {
+      width: 690rpx;
+      margin: 0 auto;
+      height: 436rpx;
+      background: url("https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/my_log.png") no-repeat;
+      background-color: #ffffff;
+      background-position: right top;
+      background-size: 267rpx 274rpx;
+      box-sizing: border-box;
+      box-shadow: 0px 0rpx 7rpx 1rpx #f0f3f5;
+      border-radius: 8rpx;
+      .info {
+        padding: 61rpx 0 0 30rpx;
+        display: flex;
+        .info-img {
+          width: 126rpx;
+          height: 126rpx;
+          background: #c4c4c4;
+          border-radius: 50%;
+          overflow: hidden;
+          .avatar-wrapper {
+            width: 126rpx;
+            height: 126rpx;
+          }
+          .avatar {
+            width: 126rpx;
+            height: 126rpx;
+            border-radius: 50%;
+          }
+        }
+        .info-list {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          margin-left: 32rpx;
+          font-size: 24rpx;
+          font-weight: 400;
+          color: #666666;
+          .name {
+            font-size: 30rpx;
+            color: #000000;
+            line-height: 35rpx;
+            font-weight: 500;
+          }
+          .bind-btn {
+            color: #3385ff;
+            width: 181rpx;
+            height: 49rpx;
+            background: #ffffff;
+            border-radius: 8rpx;
+            border: 2rpx solid #3385ff;
+            text-align: center;
+            line-height: 47rpx;
+          }
+        }
+      }
+      .auth-info {
+        width: 100%;
+        overflow: hidden;
+        margin-top: 36rpx;
+        .auth-ul {
+          white-space: nowrap;
+          padding: 0 30rpx;
+          color: #3385ff;
+          .auth-li {
+            display: inline-block;
+            padding: 1rpx 20rpx;
+            border: 1rpx solid #3385ff;
+            border-radius: 4rpx;
+            font-size: 24rpx;
+            margin-right: 20rpx;
+            background: #edf4ff;
+            &:last-child {
+              margin-right: 50rpx;
+            }
+          }
+        }
+        .no-auth {
+          text-align: center;
+          font-size: 28rpx;
+          color: #999999;
+        }
+        .auth-btn {
+          width: 181rpx;
+          height: 49rpx;
+          margin: 0 auto;
+          color: #3385ff;
+          font-size: 24rpx;
+          line-height: 47rpx;
+          border: 2rpx solid #3385ff;
+        }
+      }
+      .info-item {
+        display: flex;
+        padding-left: 30rpx;
+        margin: 36rpx auto 0;
+        .item {
+          width: 208rpx;
+          height: 76rpx;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          text-align: center;
+          .item-number {
+            font-size: 40rpx;
+            font-weight: 500;
+          }
+        }
+        .item-label {
+          border-right: 1rpx solid #ececec;
+          border-left: 1rpx solid #ececec;
+        }
+      }
+    }
+
+    .info-bot {
+      padding: 0 20rpx;
+      background-color: #fff;
+      box-shadow: 0px 0rpx 7rpx 1rpx #f0f3f5;
+      border-radius: 8rpx;
+      margin-top: 20rpx;
+      .list-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 34rpx;
+        color: #4a4a4a;
+        padding: 33rpx 34rpx;
+        .icon-area {
+          width: 100rpx;
+        }
+        &:last-child {
+          position: static;
+        }
+      }
+      .my-bot-box {
+        display: flex;
+      }
+    }
+  }
+  .bottom-text {
+    position: absolute;
+    bottom: -80rpx;
+    right: 0;
+    z-index: 9;
+    margin-top: 30px;
+    font-size: 20rpx;
+    color: #999999;
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>

pages.json

@@ -4,7 +4,15 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "查研观向",
+        "navigationBarTitleText": "最新",
+        "enablePullDownRefresh": true,
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/material/material",
+      "style": {
+        "navigationBarTitleText": "素材库",
         "enablePullDownRefresh": true,
         "navigationStyle": "custom"
       }
@@ -33,13 +41,6 @@
         "navigationStyle": "custom"
       }
     },
-    {
-      "path": "pages/my/my",
-      "style": {
-        "navigationBarTitleText": "我的",
-        "navigationStyle": "custom"
-      }
-    },
     {
       "path": "pages/pcWebViev/pcWebViev",
       "style": {
@@ -47,7 +48,7 @@
         "enablePullDownRefresh": false
       }
     }
-  ],
+    ],
   "subPackages": [
     {
       "root": "activityPages",
@@ -321,6 +322,14 @@
             "navigationBarTitleText": "我的留言",
             "enablePullDownRefresh": false
           }
+        },
+        {
+          "path": "myPage/myPage",
+          "style": {
+            "navigationBarTitleText": "我的",
+            "enablePullDownRefresh": false,
+            "navigationStyle": "custom"
+          }
         }
       ]
     },
@@ -366,6 +375,12 @@
     "list": [
       {
         "pagePath": "pages/index/index",
+        "text": "最新",
+        "iconPath": "static/img/tab/my_ico.png",
+        "selectedIconPath": "static/img/tab/my_actico.png"
+      },
+      {
+        "pagePath": "pages/material/material",
         "text": "素材库",
         "iconPath": "static/img/tab/index_ico.png",
         "selectedIconPath": "static/img/tab/index_actico.png"
@@ -387,12 +402,6 @@
         "text": "活动",
         "iconPath": "static/img/tab/activity_ico.png",
         "selectedIconPath": "static/img/tab/activity_act.png"
-      },
-      {
-        "pagePath": "pages/my/my",
-        "text": "我的",
-        "iconPath": "static/img/tab/my_ico.png",
-        "selectedIconPath": "static/img/tab/my_actico.png"
       }
     ]
   },

pages/index/index.vue

@@ -1,352 +1,23 @@
 <template>
-  <view class="container Index-container">
+  <view class="container New-container">
     <view class="top-content-box">
       <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
+        <view class="box-img">
+          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/logo.png" class="avatar"></image>
+        </view>
         <view class="content" @click="goSearch">
           <icon type="search" size="15" class="search_ico" />
           <text class="sea_ipt">{{ searchPlaceholderList.SummarySearch || "" }}</text>
         </view>
       </view>
-      <view class="top-tabs">
-        <block v-for="item in topTabBars" :key="item.Id">
-          <view v-if="item.IsShow" :class="['item', item.val == topTabsActive && 'tabs-active']" @click="topTabsChange(item)">
-            {{ item.Name }}
-            <block v-if="(item.Id === 3 || item.Name == '图表') && wholeShowListData.IsShowChart">
-              <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
-            </block>
-            <view class="active" v-if="item.Id == topTabsActive"></view>
-          </view>
-        </block>
-      </view>
-      <view class="tabs-content">
-        <view class="second-tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
-          <view :class="['item', item.ChartPermissionId == secondActive && 'tabs-active']" v-for="(item, index) in secondBars" :key="item.ChartPermissionId" @click="handleClickTopSub(item)">
-            {{ item.PermissionName }}
-            <block v-if="wholeShowListData.IsShowResearch && index === secondBars.length - 1 && topTabsActive == '2'">
-              <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
-            </block>
-            <view class="active" v-if="item.ChartPermissionId == secondActive"></view>
-          </view>
-        </view>
-        <block v-if="topTabsActive == '3'">
-          <view class="children-ul">
-            <view :class="['chart-children', chartChildrenActive == item.CtagId ? 'children-active' : '']" v-for="item in chartChildren" :key="item.CtagId" @click="handleChartChildren(item)">{{
-              item.Name
-            }}</view>
-          </view>
-        </block>
-        <view v-if="topTabsActive == '4'" class="medium-ul">
-          <view class="item-content">
-            <view @click="mediumClickHandler(item)" :class="['item', mediumActive === item.value && 'item-act']" v-for="item in mediumSelect" :key="item.value">{{ item.name }}</view>
-          </view>
-        </view>
-      </view>
     </view>
-    <block v-if="haveData">
-      <view class="audio-video-content" v-if="topTabsActive == 4">
-        <view class="audio-item" v-for="item in videoAudioList" :key="item.Id">
-          <view class="cover-item" :style="{ 'background-image': 'url(' + item.BackgroundImg + ')' }">
-            <!-- type:3 -- 产业视频 -->
-            <block v-if="item.Type == 2 || item.Type == 3">
-              <image class="img-bg" @click="handelPlay(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
-            </block>
-            <block v-else>
-              <image
-                class="img-bg"
-                @click.stop="handelPlay(item)"
-                :src="
-                  curVoiceId === item.ActivityId && !curAudioPaused
-                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
-                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
-                "
-              ></image>
-            </block>
-            <text class="time">{{ item.PublishTime }}</text>
-            <view :class="['identification', item.Type != 1 && 'identification-video']"> </view>
-            <image
-              class="identification-img"
-              :src="item.Type == 1 ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/video-iocn.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/audio-icon.png'"
-            ></image>
-          </view>
-          <view class="title-share">
-            <view class="title text_twoLine">{{ item.Title }}</view>
-            <view class="share share-collected">
-              <image @click="myLeavingMessageHandler(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
-              <image  @click="isCollectionHandeler(item)" :src="item.IsCollect ?'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/not_collected.png'"></image>
-              <button class="share-icon" open-type="share" :data-item="item">
-                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
-              </button>
-            </view>
-          </view>
-        </view>
-      </view>
-      <view class="data-cont" v-else>
-        <view class="report-ul">
-          <block v-for="(report, index) in dataList" :key="index">
-            <view class="report-item" v-if="index % 2 === 0" @click="goDetail(report)">
-              <block v-if="report.HomeType === 1">
-                <view class="audio-video-content">
-                  <view class="audio-item">
-                    <view class="cover-item" :style="{ 'background-image': 'url(' + report.MicroAudio.AudioImgUrl + ')' }">
-                      <image
-                        class="img-bg"
-                        @click.stop="handelPlay(report.MicroAudio)"
-                        :src="
-                          curVoiceId === report.MicroAudio.AudioActivityId && !curAudioPaused
-                            ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
-                            : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
-                        "
-                      ></image>
-                      <text class="time">{{ report.MicroAudio.AudioPublishTime }}</text>
-                    </view>
-                    <view class="title-share">
-                      <view class="title text_twoLine">{{ report.MicroAudio.AudioTitle }}</view>
-                      <view class="share">
-                        <view class="share-text" :style="[classifyColor(report.MicroAudio.AudioChartPermissionName)]">
-                          <image :src="classifyIcon(report.MicroAudio)"></image>
-                          音频｜{{ report.MicroAudio.AudioChartPermissionName }}
-                        </view>
-                        <button class="share-icon" open-type="share" :data-item="report.MicroAudio">
-                          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
-                        </button>
-                      </view>
-                    </view>
-                  </view>
-                </view>
-              </block>
-              <block v-else>
-                <view class="item-content-img" v-if="report.BodyHtml">
-                  <image :src="report.BodyHtml" mode=""></image>
-                </view>
-                <view class="item-content" v-else>{{ report.Body }}</view>
-                <view class="line"></view>
-                <text :class="['item-title', report.Source != 1 && 'chart-title text_twoLine']">{{ report.Title }}</text>
-                <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
-                  {{ report.ExpertBackground }}
-                </view>
-                <block v-if="report.Source == 1">
-                  <view class="item-createtime">
-                    <text>{{ report.PublishDate }}</text>
-                    <view class="item-examine" v-if="report.IsResearch">
-                      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
-                      <text>{{ report.Pv }}</text>
-                    </view>
-                  </view>
-                </block>
-                <block v-else>
-                  <view class="item-createtime chart-tag">
-                    <text class="tag-item" v-if="report.PtagName">{{ report.PtagName }}</text>
-                    <text class="tag-item" v-if="report.CtagName">{{ report.CtagName }}</text>
-                  </view>
-                  <view class="chart-collect" v-if="topTabsActive == 3 && secondActive == 0">
-                    <text class="cancel" @click.stop="myChartIsTop(report.ChartId)">{{ report.IsTop ? "取消置顶" : "置顶" }}</text>
-                    <text class="remove" @click.stop="myChartCollect(report.ChartId)">移除</text>
-                  </view>
-                  <view class="my-chart-collect" v-if="topTabsActive == 3 && secondActive == 0 && report.IsTop"></view>
-                </block>
-              </block>
-            </view>
-          </block>
-        </view>
-        <view class="report-ul">
-          <block v-for="(report, index) in dataList" :key="index">
-            <view class="report-item" v-if="index % 2 !== 0" @click="goDetail(report)">
-              <block v-if="report.HomeType === 1">
-                <view class="audio-video-content">
-                  <view class="audio-item">
-                    <view class="cover-item" :style="{ 'background-image': 'url(' + report.MicroAudio.AudioImgUrl + ')' }">
-                      <image
-                        class="img-bg"
-                        @click.stop="handelPlay(report.MicroAudio)"
-                        :src="
-                          curVoiceId === report.MicroAudio.AudioActivityId && !curAudioPaused
-                            ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
-                            : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
-                        "
-                      ></image>
-                      <text class="time">{{ report.MicroAudio.AudioPublishTime }}</text>
-                    </view>
-                    <view class="title-share">
-                      <view class="title text_twoLine">{{ report.MicroAudio.AudioTitle }}</view>
-                      <view class="share">
-                        <view class="share-text" :style="[classifyColor(report.MicroAudio.AudioChartPermissionName)]">
-                          <image :src="classifyIcon(report.MicroAudio)"></image>
-                          音频｜{{ report.MicroAudio.AudioChartPermissionName }}
-                        </view>
-                        <button class="share-icon" open-type="share" :data-item="report">
-                          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
-                        </button>
-                      </view>
-                    </view>
-                  </view>
-                </view>
-              </block>
-              <block v-else>
-                <view class="item-content-img" v-if="report.BodyHtml">
-                  <image :src="report.BodyHtml"></image>
-                </view>
-                <view class="item-content" v-else>{{ report.Body }}</view>
-                <view class="line"></view>
-                <text :class="['item-title', report.Source != 1 && 'chart-title text_twoLine']">{{ report.Title }}</text>
-                <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
-                  {{ report.ExpertBackground }}
-                </view>
-                <block v-if="report.Source == 1">
-                  <view class="item-createtime">
-                    <text>{{ report.PublishDate }}</text>
-                    <view class="item-examine" v-if="report.IsResearch">
-                      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
-                      <text>{{ report.Pv }}</text>
-                    </view>
-                  </view>
-                </block>
-                <block v-else>
-                  <view class="item-createtime chart-tag">
-                    <text class="tag-item" v-if="report.PtagName">{{ report.PtagName }}</text>
-                    <text class="tag-item" v-if="report.CtagName">{{ report.CtagName }}</text>
-                  </view>
-                  <view class="chart-collect" v-if="topTabsActive == 3 && secondActive == 0">
-                    <text class="cancel" @click.stop="myChartIsTop(report.ChartId)">{{ report.IsTop ? "取消置顶" : "置顶" }}</text>
-                    <text class="remove" @click.stop="myChartCollect(report.ChartId)">移除</text>
-                  </view>
-                  <view class="my-chart-collect" v-if="topTabsActive == 3 && secondActive == 0 && report.IsTop"></view>
-                </block>
-              </block>
-            </view>
-          </block>
-        </view>
-      </view>
-      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="pageNum > 1" />
-    </block>
-    <view class="nodata" v-else-if="haveData === false" style="padding-top: 400rpx">
-      <block class="nodata" v-if="!isBindingMobile && secondActive == 0">
-        <text>请先绑定联系方式</text>
-        <view class="bind-mobile" @click="bindingMobile">绑定联系方式</view>
-      </block>
-      <block v-else>
-        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
-        <text>{{ topTabsActive == 3 && secondActive == 0 ? "暂无收藏的图表" : "暂时没有数据" }}</text>
-      </block>
-    </view>
-    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
-    <view v-if="showAudioBox">
-      <audioModule :showAudioPop.sync="showAudioPop" />
-    </view>
-    <videoModule :showVideoPop="showVideoPop" :curVideoId="curVideoId" :videoPopList="videoPopList" />
-    <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" />
-    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
   </view>
 </template>
 
 <script>
-import { Home, Reports, Chart, activity } from "@/config/api.js";
-import { Throttle, deepCopy } from "@/config/util.js";
-import freeCharge from "@/components/freeCharge";
-import suspenButton from "@/components/suspen_button.vue";
-import { color_word_bg, MultimediaIcon } from "@/utils/styleClassify";
-import audioModule from "@/components/audioModule/index";
-import modalDialog from "@/components/modalDialog.vue";
-import videoModule from "@/components/videoModule/index";
-
-let app = getApp();
 export default {
   data() {
-    return {
-      topTabBars: [],
-      topTabsActive: 1, //一级top的tabs
-      secondActive: "", //二级的tabs
-      secondBars: [], //二级的tabs数组
-      chartChildren: [], //二级的tabs下的标签
-      chartChildrenActive: 0,
-      refresh: false,
-      pageSize: 10, //条数
-      pageNum: 1, //页码
-      haveMore: true, //是否有更多数据
-      haveData: null, //是否有数据
-      //数据列表
-      dataList: [],
-      status: "loadmore",
-      loadText: {
-        loadmore: "上拉加载更多",
-        loading: "加载中",
-        nomore: "已经到底了",
-      },
-      showTransition: false, //点击绝密后的隐现
-      isBindingMobile: true, //图表我的收藏是否绑定手机号
-      videoContext: null,
-      showAudioPop: false, //播放音频
-      isShowhasPermission: false, //  联系销售的提交申请
-      applyForIsShow: false, // 提交申请
-      jurisdictionList: {},
-      hasPermission: "", //权限
-      audioShareId: "", //通过分享单个音频点进页面时使用
-      videoShareId: "", //通过分享单个视频点进页面时使用
-      activityShareId: "",
-      videoAudioList: [], //音频  视频 list
-      curVideoId: 0, //音频Id
-      showVideoPop: false,
-      videoPopList: {},
-      mediumSelect: [
-        { name: "全部", value: 0 },
-        { name: "视频", value: 1 },
-        { name: "音频", value: 2 },
-      ],
-      mediumActive: 0,
-    };
-  },
-  components: {
-    freeCharge,
-    suspenButton,
-    modalDialog,
-    audioModule,
-    videoModule,
-  },
-  watch: {},
-  onLoad(optios) {
-    this.getHeaderTab();
-    uni.getSystemInfo({
-      success: function (res) {
-        if (res.windowWidth > 700) {
-          uni.reLaunch({
-            url: "/pages/pcWebViev/pcWebViev",
-          });
-        }
-      },
-    });
-    if (optios.topTabsActive) {
-      this.topTabsActive = optios.topTabsActive;
-      this.secondActive = optios.secondActive;
-      this.chartChildrenActive = optios.childrenActive;
-      this.videoShareId = optios.videoShareId;
-      this.audioShareId = optios.audioShareId;
-      this.activityShareId = optios.activityId;
-      console.log(this.activityShareId);
-      this.getTabs();
-    }
-    this.initNavBar();
-    this.getReportList();
-    this.$store.dispatch("checkHandle", "noGO");
-  },
-  onShow() {
-    //进入页面的记录
-    this.$store.dispatch("statistics", { PageType: "Activit" });
-    // #ifdef MP-WEIXIN
-    uni.hideHomeButton();
-    // #endif
-    this.$store.commit("audioBg/parseIntAudio", true);
-  },
-  computed: {
-    curVoiceId() {
-      //当前正在播放的音频id
-      return this.$store.state.audioBg.indexId;
-    },
-    curAudioPaused() {
-      //当前音频是否暂停状态
-      return this.$store.state.audioBg.paused;
-    },
-    showAudioBox() {
-      return this.$store.state.audioBg.parseIntShow;
-    },
+    return {};
   },
   methods: {
     //获取胶囊位置
@@ -358,475 +29,22 @@ export default {
         paddingBottom: "4px",
       };
     },
-    //点击顶部一级分类
-    topTabsChange(item) {
-      this.topTabsActive = item.Id;
-      this.chartChildren = [];
-      this.chartChildrenActive = 0;
-      this.secondActive = "";
-      this.pageNum = 1;
-      this.dataList = [];
-      this.audioShareId = "";
-      this.videoShareId = "";
-      uni.pageScrollTo({
-        scrollTop: 0,
-        duration: 0,
-      });
-      if (this.topTabsActive == "2" || this.topTabsActive == "3") {
-        this.getTabs();
-      } else {
-        this.initData();
-      }
-    },
-    //点击顶部二级分类
-    handleClickTopSub(item) {
-      this.secondActive = item.ChartPermissionId;
-      this.chartChildren = [];
-      this.chartChildrenActive = 0;
-      this.childrenChartData();
-      this.initData();
-    },
-    //点击图标的二级分类 处理数据
-    childrenChartData() {
-      if (this.topTabsActive == 3 && this.secondActive != 0) {
-        let arr = [];
-        this.secondBars &&
-          this.secondBars.forEach((item) => {
-            if (this.secondActive == item.ChartPermissionId) {
-              deepCopy(arr, item.List);
-              arr.unshift({
-                CtagId: 0,
-                Name: "全部",
-              });
-              this.chartChildren = arr;
-            }
-          });
-        this.chartChildrenActive > 0 ? "" : (this.chartChildrenActive = 0);
-      }
-    },
-    //点击图标的三级分类
-    handleChartChildren(item) {
-      this.chartChildrenActive = item.CtagId;
-      this.initData();
-    },
-    // 点击为路演的筛选
-    mediumClickHandler(item) {
-      this.mediumActive = item.value;
-      this.initData();
-    },
-    //点击
-    initData() {
-      this.pageNum = 1;
-      this.dataList = [];
-      uni.pageScrollTo({
-        scrollTop: 0,
-        duration: 0,
-      });
-      this.getReportList();
-    },
-    /* 获取tab分类 */
-    getTabs() {
-      this.secondBars = [];
-      this.topTabsActive == "2"
-        ? Home.Tab().then((res) => {
-            if (res.Ret === 200) {
-              this.secondBars = res.Data.List;
-              this.secondActive > 0 ? "" : (this.secondActive = this.secondBars[0].ChartPermissionId);
-              this.getReportList();
-            }
-          })
-        : this.topTabsActive == "3"
-        ? Chart.getChartPatg().then((res) => {
-            if (res.Ret === 200) {
-              let arr = res.Data;
-              arr.unshift({
-                ChartPermissionId: 0,
-                PermissionName: "我的收藏",
-              });
-              this.secondBars = arr;
-              this.secondActive ? "" : (this.secondActive = 0);
-              this.secondActive > 0 && this.childrenChartData();
-              this.getReportList();
-            }
-          })
-        : "";
-    },
-    /* 获取列表 */
-    async getReportList() {
-      if (this.topTabsActive == "3" && this.secondActive == 0) {
-        const res = await Chart.getChartcollection({
-          PageSize: this.pageSize,
-          CurrentIndex: this.pageNum,
-        });
-        if (res.Ret === 200) {
-          this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
-          this.isBindingMobile = res.Data.IsBindingMobile;
-          if (this.pageNum === 1) {
-            this.dataList = res.Data.List || [];
-            this.haveData = this.dataList.length > 0 ? true : false;
-          } else {
-            this.dataList = this.dataList.concat(res.Data.List);
-          }
-        }
-      } else if (this.topTabsActive == 4) {
-        const res = await Home.microRoadshowList({
-          PageSize: this.pageSize,
-          CurrentIndex: this.pageNum,
-          AudioId: this.audioShareId,
-          VideoId: this.activityShareId ? "" : this.videoShareId,
-          ActivityVideoId: this.activityShareId && this.videoShareId,
-          Filter: this.mediumActive,
-        });
-        if (res.Ret === 200) {
-          this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
-          if (this.pageNum == 1) {
-            this.videoAudioList = res.Data.List || [];
-            this.haveData = this.videoAudioList.length > 0 ? true : false;
-            if (this.refresh) {
-              uni.stopPullDownRefresh();
-              this.refresh = false;
-            }
-          } else {
-            this.videoAudioList = this.videoAudioList.concat(res.Data.List);
-          }
-        }
-      } else {
-        const res = await Home.getList({
-          PageSize: this.pageSize,
-          CurrentIndex: this.pageNum,
-          ChartPermissionId: this.secondActive,
-          CtagId: this.chartChildrenActive,
-          ListType: this.topTabsActive,
-        });
-        if (res.Ret === 200) {
-          this.processingData(res);
-        }
-      }
-    },
-    //处理数据
-    processingData(res) {
-      if (!res.Data.HaveResearch) {
-        this.$util.modalShow("", "您暂无查看买方研选权限", "", () => {
-          uni.reLaunch({
-            url: "/pages/index/index",
-          });
-        });
-      }
-      this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
-      res.Data.List &&
-        res.Data.List.forEach((item) => {
-          if (item.BodyHtml) {
-            item.BodyHtml = item.BodyHtml.replace(/'\'/g, "");
-          }
-        });
-      if (this.topTabsActive == "2") {
-        if (this.pageNum === 1) {
-          this.dataList = res.Data.List || [];
-          this.haveData = this.dataList.length ? true : false;
-        } else {
-          this.dataList = this.dataList.concat(res.Data.List);
-        }
-      } else {
-        if (this.pageNum === 1) {
-          this.haveData = res.Data.List ? true : res.Data.ChartList ? true : false;
-        }
-        if (!res.Data.List) {
-          this.dataList = this.dataList.concat(res.Data.ChartList);
-        } else if (!res.Data.ChartList) {
-          this.dataList = this.dataList.concat(res.Data.List);
-        } else {
-          this.dataList.push(res.Data.List.shift());
-          let newArr = [];
-          let newArrTwo = [];
-          for (let i = 0; i < res.Data.List.length; i += 2) {
-            newArr.push(res.Data.List.slice(i, i + 2));
-          }
-          for (let i = 0; i < res.Data.ChartList.length; i += 2) {
-            newArrTwo.push(res.Data.ChartList.slice(i, i + 2));
-          }
-          let arr = [];
-          newArr.forEach((item, index) => {
-            if (newArrTwo[index]) {
-              arr.push(newArrTwo[index], item);
-            } else {
-              arr.push(item);
-            }
-          });
-          this.dataList = this.dataList.concat(arr.flat(Infinity));
-        }
-      }
-
-      if (this.refresh) {
-        uni.stopPullDownRefresh();
-        this.refresh = false;
-      }
-    },
-    //我的收藏的删除
-    myChartCollect(id) {
-      uni.showModal({
-        content: "确认要将该图表移除我的收藏吗？",
-        confirmColor: "#3385FF",
-        cancelColor: "#606266",
-        success: async (res) => {
-          if (res.confirm) {
-            const res = await Chart.myChartCollect({
-              ChartId: id,
-            });
-            if (res.Ret === 200) {
-              this.initData();
-              this.$util.toast("已取消收藏");
-            }
-          }
-        },
-      });
-    },
-    //我的收藏 置顶
-    async myChartIsTop(id) {
-      const res = await Chart.myChartTop({
-        ChartId: id,
-      });
-      if (res.Ret === 200) {
-        this.initData();
-        this.$util.toast(res.Msg);
-      }
-    },
-    /* 进入详情 校验是否有该品种权限 */
-    goDetail(item) {
-      if (item.HomeType !== 1) {
-        if (item.Source == 2) {
-          /* 无需授权且已绑定 检验是或否有权限 */
-          this.$store.dispatch("checkHandle", "/pageMy/chartPage/chartPage?id=" + item.ChartId);
-        } else {
-          /* 无需授权且已绑定 检验是或否有权限 */
-          this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
-        }
-      }
-    },
-    /* 搜索 */
-    goSearch() {
-      this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive);
-    },
-    /* 绑定联系方式 */
-    bindingMobile() {
-      uni.navigateTo({
-        url: "/pageMy/login/login",
-      });
-    },
-
-    //播放的权限判断
-    handelPlay(item) {
-      let content_item = null;
-      if (item.AudioActivityId) {
-        content_item = {
-          ActivityId: item.AudioActivityId,
-          PlaySeconds: item.AudioPlaySeconds,
-          ResourceUrl: item.AudioResourceUrl,
-          Title: item.AudioTitle,
-          Type: item.AudioType,
-        };
-      }
-      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
-        if (item.AuthInfo.HasPermission == 1) {
-          item.Type == 1 || item.AudioType == 1 ? this.audioPlayBack(content_item ? content_item : item) : this.handelVideoPlay(item);
-        } else {
-          this.hasPermission = item.AuthInfo.HasPermission;
-          this.jurisdictionList.ActivityId = item.Id;
-          this.jurisdictionList.isAudioVideo = item.Type;
-          if (this.hasPermission == 2) {
-            this.jurisdictionList.SellerMobile = item.AuthInfo.SellerMobile;
-            this.jurisdictionList.SellerName = item.AuthInfo.SellerName;
-            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
-            this.isShowhasPermission = true;
-          } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
-            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
-            this.applyForIsShow = true;
-          }
-        }
-      } else {
-        this.$store.dispatch("checkHandle");
-      }
-    },
-    //视频的播放事件
-    handelVideoPlay(item) {
-      if (this.$store.state.videoPlay.playVideoId != item.Id) {
-        this.$store.commit("videoPlay/palyTimeUpdate", 0);
-        console.log(this.$store.state.videoPlay.palyCurrentTime);
-        this.$store.commit("videoPlay/playVideo", item.Id);
-      }
-      this.globalBgAudioManager.stop();
-      this.videoPopList = item;
-      this.showVideoPop = true;
-    },
-    //音频的播放事件
-    async audioPlayBack(item) {
-      console.log(item);
-      this.curVideoId = 0;
-      this.$store.commit("audioBg/parseIntAudio", true);
-      // 判断是否为同一个音频
-      if (this.$store.state.audioBg.indexId == item.ActivityId) {
-        if (this.globalBgAudioManager.paused) {
-          this.globalBgAudioManager.play();
-        } else {
-          this.globalBgAudioManager.pause();
-        }
-      } else {
-        let VoiceList = {
-          Url: item.ResourceUrl,
-          Name: item.Title,
-          PlaySeconds: item.PlaySeconds,
-        };
-        this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.ActivityId, activityTitle: item.Title });
-      }
-      this.showAudioPop = true;
-    },
-    //音视频的背景色 文字颜色
-    classifyColor(item) {
-      let text_color = color_word_bg.color_word.find((key) => key.name == item).color;
-      let back_ground = color_word_bg.color_bg.find((key) => key.name == item).color;
-      let _isColor = { color: text_color, "background-color": back_ground };
-      return _isColor;
-    },
-    //音视频的图标
-    classifyIcon(item) {
-      let srcItem = MultimediaIcon.find((key) => key.name == (item.AudioChartPermissionName || item.ChartPermissionName));
-      let imgSrc = item.Type == 1 || item.AudioType == 1 ? srcItem.audio : srcItem.video;
-      return imgSrc;
-    },
-    //获取顶部导航
-    async getHeaderTab() {
-      const res = await Home.headerTab();
-      if (res.Ret === 200) {
-        this.topTabBars = res.Data || [];
-      }
-    },
-
-    // 微路演留言
-    myLeavingMessageHandler(item) {
-      uni.navigateTo({
-        url: "/activityPages/generationAsk/generationAsk?id=" + (item.Type == 3 ? item.Id : item.ActivityId) + "&type=文章&roadshow=" + item.Type + "&roadshowTitle=" + item.Title,
-      });
-    },
-
-    // 微路演收藏
-    async isCollectionHandeler(item) {
-      const res = await Home.microRoadshowCollect({
-        Id: item.Id,
-        SourceType: item.Type,
-      });
-      if (res.Ret === 200) {
-        res.Data.Status == 1 ? (item.IsCollect = true) : (item.IsCollect = false);
-        uni.showToast({
-          title: res.Msg,
-          duration: 2000,
-        });
-      }
-    },
   },
-  onHide() {
-    this.$store.commit("audioBg/parseIntAudio", false);
-    this.curVideoId = 0;
-  },
-  mounted() {
-    uni.$on("updateAudioVideo", (data) => {
-      console.log("执行了");
-      this.$store.dispatch("checkHandle", "noGO");
-      this.getReportList();
-    });
-  },
-  /* 下拉刷新 */
-  onPullDownRefresh: Throttle(function () {
-    this.audioShareId = "";
-    this.videoShareId = "";
-    this.activityShareId = "";
-    this.status = "loadmore";
-    this.refresh = true;
-    this.dataList = [];
-    this.pageNum = 1;
-    this.getReportList();
-  }),
-  // 上拉加载
-  onReachBottom: Throttle(function () {
-    if (this.status === "nomore") return;
-    this.status = "loading";
-    this.pageNum++;
-    this.getReportList();
-  }),
-  /** 用户点击分享*/
-  onShareAppMessage: function ({ from, target }) {
-    if (from === "button") {
-      let item = target.dataset.item;
-      let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
-      // type=2 -- 活动视频 type=3 -- 产业视频
-      let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
-      let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
-      let title_share = item.AudioTitle || item.Title;
-      return {
-        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : title_share,
-        path: "/pages/index/index?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
-        imageUrl: item.AudioShareImg || item.ShareImg,
-      };
-    } else {
-      return {
-        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "您手边的弘则研究素材检索库",
-        path: "/pages/index/index?topTabsActive=" + this.topTabsActive + "&secondActive=" + this.secondActive + "&childrenActive=" + this.chartChildrenActive,
-        imageUrl: this.topTabsActive == 1 ? "https://hzstatic.hzinsights.com/cygx/czbk/home_share.png" : "",
-        success: (res) => {},
-        fail: (err) => {},
-      };
-    }
+  onLoad() {
+    this.initNavBar();
   },
 };
 </script>
 
-<style lang="scss">
-.Index-container {
-  background-color: #f7f7f7;
-  font-size: 30rpx;
+<style lang="scss" scoped>
+.New-container {
+  background-color: #F5F6FA;
   .top-content-box {
     position: sticky;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 9;
-    .top-tabs {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 34rpx;
-      background-color: #fff;
-      padding: 35rpx 0 10rpx;
-      &::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-        display: none;
-      }
-      .item {
-        position: relative;
-        padding-bottom: 8rpx;
-        margin-right: 60rpx;
-        flex-shrink: 0;
-        .limit-img {
-          position: absolute;
-          top: -15rpx;
-          right: -50rpx;
-          z-index: 99;
-        }
-        .active {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          height: 4rpx;
-          width: 100%;
-          border-radius: 1rpx;
-          background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
-        }
-      }
-      .tabs-active {
-        color: #3385ff;
-        font-weight: 500;
-      }
-    }
   }
   .nav-bar-wrap {
     background-color: #fff;
@@ -838,323 +56,31 @@ export default {
       position: relative;
       display: flex;
       align-items: center;
-      width: 70%;
+      width: 55%;
       height: 63rpx;
       font-size: 30rpx;
       color: #8d8d8d;
-      background-color: #f6f6f6;
+      background-color: #f3f3f3;
       padding-left: 33rpx;
       border-radius: 70rpx;
-      // border: 1rpx solid #e5e5e5;
       .sea_ipt {
         padding-left: 15rpx;
       }
     }
-  }
-  .tabs-content {
-    padding: 0 30rpx;
-    background-color: #fff;
-    .children-ul {
-      display: flex;
-      flex-wrap: wrap;
-      .children-active {
-        background-color: #3385ff;
-        color: #fff;
-      }
-    }
-    .medium-ul {
+    .box-img {
       display: flex;
-      justify-content: flex-end;
-      padding: 10px 0;
-      .item-content {
-        display: flex;
-        height: 51rpx;
-        background: #f8f8fa;
-        width: 345rpx;
-        border-radius: 64rpx;
-        color: #999999;
-      }
-      .item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 115rpx;
-        height: 51rpx;
-        border-radius: 47rpx;
-      }
-      .item-act {
-        background-color: #3385ff;
-        color: #fff;
-      }
-    }
-    .chart-children {
-      padding: 10rpx 20rpx;
-      margin: 0rpx 20rpx 20rpx 0;
-      background-color: #f9f9f9;
-      color: #666666;
-      font-size: 26rpx;
-      border-radius: 4rpx;
-    }
-  }
-  .second-tabs {
-    width: 100%;
-    display: flex;
-    overflow-x: auto;
-    background-color: #fff;
-    font-size: 30rpx;
-    color: #999999;
-    padding: 20rpx 0;
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-      display: none;
-    }
-    .item {
-      position: relative;
-      padding-bottom: 16rpx;
-      margin-right: 50rpx;
-      flex-shrink: 0;
-      .limit-img {
-        position: absolute;
-        top: -15rpx;
-        right: -50rpx;
-        z-index: 99;
-      }
-      .active {
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 4rpx;
-        width: 100%;
-        border-radius: 1rpx;
-        background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
-      }
-    }
-    .tabs-active {
-      color: #3385ff;
-      font-weight: 500;
-    }
-  }
-  .data-cont {
-    padding: 28rpx 20rpx 10rpx;
-    display: flex;
-    .report-ul {
-      width: 50%;
-      &:first-child {
-        margin-right: 10rpx;
-      }
-      .report-item {
-        padding: 20rpx 20rpx 24rpx 20rpx;
-        margin-bottom: 20rpx;
-        border-radius: 8rpx;
-        box-shadow: 0 3rpx 6rpx rgba($color: #000000, $alpha: 0.16);
-        background: #fff;
-        position: relative;
-        overflow: hidden;
-        .audio-video-content {
-          width: calc(100% + 40rpx);
-          height: calc(100% + 25rpx);
-          margin: -20rpx 0 0 -20rpx;
-          padding: 0 !important;
-          .audio-item {
-            width: 100%;
-            height: auto;
-            box-shadow: none;
-          }
-        }
-        .my-chart-collect {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 0;
-          height: 0;
-          border-top: 60rpx solid #3385ff;
-          border-right: 60rpx solid transparent;
-        }
-        .item-content-img {
-          display: flex;
-          align-items: center;
-          width: 330rpx;
-          margin-left: -6rpx;
-          margin-bottom: -20rpx;
-          image {
-            width: 100%;
-            height: 262rpx;
-            vertical-align: middle;
-          }
-        }
-        .item-content {
-          height: 273rpx;
-          font-size: 24rpx;
-          line-height: 40rpx;
-          color: #7f7f7f;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 7;
-          -webkit-box-orient: vertical;
-          image {
-            width: 100% !important;
-          }
-        }
-        .line {
-          margin: 18rpx 0;
-          content: "";
-          width: 100%;
-          height: 1px;
-          padding: 0 32rpx;
-          box-sizing: border-box;
-          background-color: #e5e5e5;
-          -webkit-transform: scale(1, 0.5);
-          transform: scale(1, 0.5);
-          -webkit-transform-origin: center bottom;
-          transform-origin: center bottom;
-        }
-        .item-title {
-          font-size: 28rpx;
-          color: #4a4a4a;
-          margin-bottom: 10rpx;
-          position: relative;
-          text-indent: 0.5em;
-          &::before {
-            content: "";
-            position: absolute;
-            top: 5rpx;
-            left: 0;
-            width: 6rpx;
-            height: 31rpx;
-            background-color: #3385ff;
-          }
-        }
-        .chart-title {
-          height: 72rpx;
-          padding-bottom: 10rpx;
-          text-indent: 0em;
-          &::before {
-            display: none;
-          }
-        }
-        .item-abstract {
-          font-size: 26rpx;
-          color: #6a6a6a;
-          margin-bottom: 10rpx;
-          .report_ico {
-            width: 32rpx;
-            height: 26rpx;
-            margin-right: 20rpx;
-            display: inline-block;
-          }
-        }
-        .item-createtime {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          color: #acacac;
-          font-size: 24rpx;
-          .item-examine {
-            display: flex;
-            align-items: center;
-            image {
-              width: 30rpx;
-              height: 24rpx;
-              margin: 0 10rpx 0 15rpx;
-            }
-          }
-        }
-        .chart-tag {
-          padding-top: 1rpx;
-          height: 36rpx;
-          .tag-item {
-            width: 148rpx;
-            border-radius: 28rpx;
-            border: 2rpx solid rgba(49, 137, 255, 1);
-            overflow: hidden;
-            color: #3385ff;
-            text-align: center;
-            line-height: 30rpx;
-          }
-        }
-        .chart-collect {
-          margin-top: 20rpx;
-          padding-top: 20rpx;
-          padding: 20rpx 0 0 20rpx;
-          border-top: 1rpx solid #dcdfe6;
-          display: flex;
-          align-items: center;
-          .cancel {
-            background: #3385ff;
-            margin-right: 20rpx;
-            color: #ffffff;
-          }
-          .remove {
-            border: 1px solid #3385ff;
-            color: #3385ff;
-          }
-          text {
-            width: 130rpx;
-            height: 46rpx;
-            line-height: 46rpx;
-            border-radius: 4rpx;
-            text-align: center;
-            font-size: 24rpx;
-          }
-        }
-      }
-    }
-  }
-  .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;
+      align-items: center;
+      justify-content: center;
+      width: 64rpx;
+      height: 64rpx;
+      margin-right: 20rpx;
+      border-radius:50%;
       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: 100%;
+        height: 100%;
       }
     }
-
-    image {
-      width: 156rpx;
-      height: 100%;
-      z-index: 99;
-    }
-  }
-  .tabs-img {
-    width: 46rpx;
-    height: 26rpx;
-  }
-  .nodata {
-    font-size: 40rpx;
-    .bind-mobile {
-      width: 244rpx;
-      height: 58rpx;
-      background: #3385ff;
-      border-radius: 8rpx;
-      font-size: 28rpx;
-      line-height: 58rpx;
-      text-align: center;
-      color: #fff;
-      margin: 50rpx auto;
-    }
   }
-  @import "@/components/audioVideo.scss";
 }
 </style>

pages/material/material.vue

@@ -0,0 +1,1004 @@
+<template>
+  <view class="container Index-container">
+    <view class="top-content-box">
+      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
+        <view class="content" @click="goSearch">
+          <icon type="search" size="15" class="search_ico" />
+          <text class="sea_ipt">{{ searchPlaceholderList.SummarySearch || "" }}</text>
+        </view>
+      </view>
+      <view class="top-tabs">
+        <block v-for="item in topTabBars" :key="item.Id">
+          <view v-if="item.IsShow" :class="['item', item.val == topTabsActive && 'tabs-active']" @click="topTabsChange(item)">
+            {{ item.Name }}
+            <block v-if="(item.Id === 3 || item.Name == '图表') && wholeShowListData.IsShowChart">
+              <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
+            </block>
+            <view class="active" v-if="item.Id == topTabsActive"></view>
+          </view>
+        </block>
+      </view>
+      <view class="tabs-content">
+        <view class="second-tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
+          <view :class="['item', item.ChartPermissionId == secondActive && 'tabs-active']" v-for="(item, index) in secondBars" :key="item.ChartPermissionId" @click="handleClickTopSub(item)">
+            {{ item.PermissionName }}
+            <block v-if="wholeShowListData.IsShowResearch && index === secondBars.length - 1 && topTabsActive == '2'">
+              <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
+            </block>
+            <view class="active" v-if="item.ChartPermissionId == secondActive"></view>
+          </view>
+        </view>
+        <block v-if="topTabsActive == '3'">
+          <view class="children-ul">
+            <view :class="['chart-children', chartChildrenActive == item.CtagId ? 'children-active' : '']" v-for="item in chartChildren" :key="item.CtagId" @click="handleChartChildren(item)">{{
+              item.Name
+            }}</view>
+          </view>
+        </block>
+        <view v-if="topTabsActive == '4'" class="medium-ul">
+          <view class="item-content">
+            <view @click="mediumClickHandler(item)" :class="['item', mediumActive === item.value && 'item-act']" v-for="item in mediumSelect" :key="item.value">{{ item.name }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <block v-if="haveData">
+      <view style="display:flex; flex-wrap:wrap">
+      <block v-for="(report, index) in dataList" :key="index">
+        <view style="width: 50%" v-if="index % 2 == 0">
+          <!-- <ChartItem :list="report" :key="index" /> -->
+          <ReportItem :list="report"/>
+        </view>
+        <view style="width: 50%" v-else>
+          <!-- <ChartItem :list="report" :key="index" /> -->
+        </view>
+      </block>
+        </view>
+      
+
+      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="pageNum > 1" />
+    </block>
+    <view class="nodata" v-else-if="haveData === false" style="padding-top: 400rpx">
+      <block class="nodata" v-if="!isBindingMobile && secondActive == 0">
+        <text>请先绑定联系方式</text>
+        <view class="bind-mobile" @click="bindingMobile">绑定联系方式</view>
+      </block>
+      <block v-else>
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
+        <text>{{ topTabsActive == 3 && secondActive == 0 ? "暂无收藏的图表" : "暂时没有数据" }}</text>
+      </block>
+    </view>
+    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+    <view v-if="showAudioBox">
+      <audioModule :showAudioPop.sync="showAudioPop" />
+    </view>
+    <videoModule :showVideoPop="showVideoPop" :curVideoId="curVideoId" :videoPopList="videoPopList" />
+    <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" />
+    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
+  </view>
+</template>
+
+<script>
+import { Home, Reports, Chart, activity } from "@/config/api.js";
+import { Throttle, deepCopy } from "@/config/util.js";
+import freeCharge from "@/components/freeCharge";
+import suspenButton from "@/components/suspen_button.vue";
+import { color_word_bg, MultimediaIcon } from "@/utils/styleClassify";
+import audioModule from "@/components/audioModule/index";
+import modalDialog from "@/components/modalDialog.vue";
+import videoModule from "@/components/videoModule/index";
+import ChartItem from "@/components/ItemComponent/chartItem.vue";
+import ReportItem from "@/components/ItemComponent/reportItem.vue";
+
+let app = getApp();
+export default {
+  data() {
+    return {
+      topTabBars: [],
+      topTabsActive: 1, //一级top的tabs
+      secondActive: "", //二级的tabs
+      secondBars: [], //二级的tabs数组
+      chartChildren: [], //二级的tabs下的标签
+      chartChildrenActive: 0,
+      refresh: false,
+      pageSize: 10, //条数
+      pageNum: 1, //页码
+      haveMore: true, //是否有更多数据
+      haveData: null, //是否有数据
+      //数据列表
+      dataList: [],
+      status: "loadmore",
+      loadText: {
+        loadmore: "上拉加载更多",
+        loading: "加载中",
+        nomore: "已经到底了",
+      },
+      showTransition: false, //点击绝密后的隐现
+      isBindingMobile: true, //图表我的收藏是否绑定手机号
+      videoContext: null,
+      showAudioPop: false, //播放音频
+      isShowhasPermission: false, //  联系销售的提交申请
+      applyForIsShow: false, // 提交申请
+      jurisdictionList: {},
+      hasPermission: "", //权限
+      audioShareId: "", //通过分享单个音频点进页面时使用
+      videoShareId: "", //通过分享单个视频点进页面时使用
+      activityShareId: "",
+      videoAudioList: [], //音频  视频 list
+      curVideoId: 0, //音频Id
+      showVideoPop: false,
+      videoPopList: {},
+      mediumSelect: [
+        { name: "全部", value: 0 },
+        { name: "视频", value: 1 },
+        { name: "音频", value: 2 },
+      ],
+      mediumActive: 0,
+    };
+  },
+  components: {
+    freeCharge,
+    suspenButton,
+    modalDialog,
+    audioModule,
+    videoModule,
+    ChartItem,
+    ReportItem,
+  },
+  watch: {},
+  onLoad(optios) {
+    this.getHeaderTab();
+    uni.getSystemInfo({
+      success: function (res) {
+        if (res.windowWidth > 700) {
+          uni.reLaunch({
+            url: "/pages/pcWebViev/pcWebViev",
+          });
+        }
+      },
+    });
+    if (optios.topTabsActive) {
+      this.topTabsActive = optios.topTabsActive;
+      this.secondActive = optios.secondActive;
+      this.chartChildrenActive = optios.childrenActive;
+      this.videoShareId = optios.videoShareId;
+      this.audioShareId = optios.audioShareId;
+      this.activityShareId = optios.activityId;
+      console.log(this.activityShareId);
+      this.getTabs();
+    }
+    this.initNavBar();
+    this.getReportList();
+    this.$store.dispatch("checkHandle", "noGO");
+  },
+  onShow() {
+    //进入页面的记录
+    this.$store.dispatch("statistics", { PageType: "Activit" });
+    // #ifdef MP-WEIXIN
+    uni.hideHomeButton();
+    // #endif
+    this.$store.commit("audioBg/parseIntAudio", true);
+  },
+  computed: {
+    curVoiceId() {
+      //当前正在播放的音频id
+      return this.$store.state.audioBg.indexId;
+    },
+    curAudioPaused() {
+      //当前音频是否暂停状态
+      return this.$store.state.audioBg.paused;
+    },
+    showAudioBox() {
+      return this.$store.state.audioBg.parseIntShow;
+    },
+  },
+  methods: {
+    //获取胶囊位置
+    initNavBar() {
+      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      this.navBarStyle = {
+        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
+        paddingTop: menuButtonInfo.top - 4 + "px",
+        paddingBottom: "4px",
+      };
+    },
+    //点击顶部一级分类
+    topTabsChange(item) {
+      this.topTabsActive = item.Id;
+      this.chartChildren = [];
+      this.chartChildrenActive = 0;
+      this.secondActive = "";
+      this.pageNum = 1;
+      this.dataList = [];
+      this.audioShareId = "";
+      this.videoShareId = "";
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      if (this.topTabsActive == "2" || this.topTabsActive == "3") {
+        this.getTabs();
+      } else {
+        this.initData();
+      }
+    },
+    //点击顶部二级分类
+    handleClickTopSub(item) {
+      this.secondActive = item.ChartPermissionId;
+      this.chartChildren = [];
+      this.chartChildrenActive = 0;
+      this.childrenChartData();
+      this.initData();
+    },
+    //点击图标的二级分类 处理数据
+    childrenChartData() {
+      if (this.topTabsActive == 3 && this.secondActive != 0) {
+        let arr = [];
+        this.secondBars &&
+          this.secondBars.forEach((item) => {
+            if (this.secondActive == item.ChartPermissionId) {
+              deepCopy(arr, item.List);
+              arr.unshift({
+                CtagId: 0,
+                Name: "全部",
+              });
+              this.chartChildren = arr;
+            }
+          });
+        this.chartChildrenActive > 0 ? "" : (this.chartChildrenActive = 0);
+      }
+    },
+    //点击图标的三级分类
+    handleChartChildren(item) {
+      this.chartChildrenActive = item.CtagId;
+      this.initData();
+    },
+    // 点击为路演的筛选
+    mediumClickHandler(item) {
+      this.mediumActive = item.value;
+      this.initData();
+    },
+    //点击
+    initData() {
+      this.pageNum = 1;
+      this.dataList = [];
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      this.getReportList();
+    },
+    /* 获取tab分类 */
+    getTabs() {
+      this.secondBars = [];
+      this.topTabsActive == "2"
+        ? Home.Tab().then((res) => {
+            if (res.Ret === 200) {
+              this.secondBars = res.Data.List;
+              this.secondActive > 0 ? "" : (this.secondActive = this.secondBars[0].ChartPermissionId);
+              this.getReportList();
+            }
+          })
+        : this.topTabsActive == "3"
+        ? Chart.getChartPatg().then((res) => {
+            if (res.Ret === 200) {
+              let arr = res.Data;
+              arr.unshift({
+                ChartPermissionId: 0,
+                PermissionName: "我的收藏",
+              });
+              this.secondBars = arr;
+              this.secondActive ? "" : (this.secondActive = 0);
+              this.secondActive > 0 && this.childrenChartData();
+              this.getReportList();
+            }
+          })
+        : "";
+    },
+    /* 获取列表 */
+    async getReportList() {
+      if (this.topTabsActive == "3" && this.secondActive == 0) {
+        const res = await Chart.getChartcollection({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+        });
+        if (res.Ret === 200) {
+          this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+          this.isBindingMobile = res.Data.IsBindingMobile;
+          if (this.pageNum === 1) {
+            this.dataList = res.Data.List || [];
+            this.haveData = this.dataList.length > 0 ? true : false;
+          } else {
+            this.dataList = this.dataList.concat(res.Data.List);
+          }
+        }
+      } else if (this.topTabsActive == 4) {
+        const res = await Home.microRoadshowList({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+          AudioId: this.audioShareId,
+          VideoId: this.activityShareId ? "" : this.videoShareId,
+          ActivityVideoId: this.activityShareId && this.videoShareId,
+          Filter: this.mediumActive,
+        });
+        if (res.Ret === 200) {
+          this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+          if (this.pageNum == 1) {
+            this.videoAudioList = res.Data.List || [];
+            this.haveData = this.videoAudioList.length > 0 ? true : false;
+            if (this.refresh) {
+              uni.stopPullDownRefresh();
+              this.refresh = false;
+            }
+          } else {
+            this.videoAudioList = this.videoAudioList.concat(res.Data.List);
+          }
+        }
+      } else {
+        const res = await Home.getList({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+          ChartPermissionId: this.secondActive,
+          CtagId: this.chartChildrenActive,
+          ListType: this.topTabsActive,
+        });
+        if (res.Ret === 200) {
+          this.processingData(res);
+        }
+      }
+    },
+    //处理数据
+    processingData(res) {
+      if (!res.Data.HaveResearch) {
+        this.$util.modalShow("", "您暂无查看买方研选权限", "", () => {
+          uni.reLaunch({
+            url: "/pages/index/index",
+          });
+        });
+      }
+      this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+      res.Data.List &&
+        res.Data.List.forEach((item) => {
+          if (item.BodyHtml) {
+            item.BodyHtml = item.BodyHtml.replace(/'\'/g, "");
+          }
+        });
+      if (this.topTabsActive == "2") {
+        if (this.pageNum === 1) {
+          this.dataList = res.Data.List || [];
+          this.haveData = this.dataList.length ? true : false;
+        } else {
+          this.dataList = this.dataList.concat(res.Data.List);
+        }
+      } else {
+        if (this.pageNum === 1) {
+          this.haveData = res.Data.List ? true : res.Data.ChartList ? true : false;
+        }
+        if (!res.Data.List) {
+          this.dataList = this.dataList.concat(res.Data.ChartList);
+        } else if (!res.Data.ChartList) {
+          this.dataList = this.dataList.concat(res.Data.List);
+        } else {
+          this.dataList.push(res.Data.List.shift());
+          let newArr = [];
+          let newArrTwo = [];
+          for (let i = 0; i < res.Data.List.length; i += 2) {
+            newArr.push(res.Data.List.slice(i, i + 2));
+          }
+          for (let i = 0; i < res.Data.ChartList.length; i += 2) {
+            newArrTwo.push(res.Data.ChartList.slice(i, i + 2));
+          }
+          let arr = [];
+          newArr.forEach((item, index) => {
+            if (newArrTwo[index]) {
+              arr.push(newArrTwo[index], item);
+            } else {
+              arr.push(item);
+            }
+          });
+          this.dataList = this.dataList.concat(arr.flat(Infinity));
+        }
+      }
+
+      if (this.refresh) {
+        uni.stopPullDownRefresh();
+        this.refresh = false;
+      }
+    },
+    //我的收藏的删除
+    myChartCollect(id) {
+      uni.showModal({
+        content: "确认要将该图表移除我的收藏吗？",
+        confirmColor: "#3385FF",
+        cancelColor: "#606266",
+        success: async (res) => {
+          if (res.confirm) {
+            const res = await Chart.myChartCollect({
+              ChartId: id,
+            });
+            if (res.Ret === 200) {
+              this.initData();
+              this.$util.toast("已取消收藏");
+            }
+          }
+        },
+      });
+    },
+    //我的收藏 置顶
+    async myChartIsTop(id) {
+      const res = await Chart.myChartTop({
+        ChartId: id,
+      });
+      if (res.Ret === 200) {
+        this.initData();
+        this.$util.toast(res.Msg);
+      }
+    },
+    /* 进入详情 校验是否有该品种权限 */
+    goDetail(item) {
+      if (item.HomeType !== 1) {
+        if (item.Source == 2) {
+          /* 无需授权且已绑定 检验是或否有权限 */
+          this.$store.dispatch("checkHandle", "/pageMy/chartPage/chartPage?id=" + item.ChartId);
+        } else {
+          /* 无需授权且已绑定 检验是或否有权限 */
+          this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
+        }
+      }
+    },
+    /* 搜索 */
+    goSearch() {
+      this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive);
+    },
+    /* 绑定联系方式 */
+    bindingMobile() {
+      uni.navigateTo({
+        url: "/pageMy/login/login",
+      });
+    },
+
+    //播放的权限判断
+    handelPlay(item) {
+      let content_item = null;
+      if (item.AudioActivityId) {
+        content_item = {
+          ActivityId: item.AudioActivityId,
+          PlaySeconds: item.AudioPlaySeconds,
+          ResourceUrl: item.AudioResourceUrl,
+          Title: item.AudioTitle,
+          Type: item.AudioType,
+        };
+      }
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        if (item.AuthInfo.HasPermission == 1) {
+          item.Type == 1 || item.AudioType == 1 ? this.audioPlayBack(content_item ? content_item : item) : this.handelVideoPlay(item);
+        } else {
+          this.hasPermission = item.AuthInfo.HasPermission;
+          this.jurisdictionList.ActivityId = item.Id;
+          this.jurisdictionList.isAudioVideo = item.Type;
+          if (this.hasPermission == 2) {
+            this.jurisdictionList.SellerMobile = item.AuthInfo.SellerMobile;
+            this.jurisdictionList.SellerName = item.AuthInfo.SellerName;
+            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
+            this.isShowhasPermission = true;
+          } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
+            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
+            this.applyForIsShow = true;
+          }
+        }
+      } else {
+        this.$store.dispatch("checkHandle");
+      }
+    },
+    //视频的播放事件
+    handelVideoPlay(item) {
+      if (this.$store.state.videoPlay.playVideoId != item.Id) {
+        this.$store.commit("videoPlay/palyTimeUpdate", 0);
+        console.log(this.$store.state.videoPlay.palyCurrentTime);
+        this.$store.commit("videoPlay/playVideo", item.Id);
+      }
+      this.globalBgAudioManager.stop();
+      this.videoPopList = item;
+      this.showVideoPop = true;
+    },
+    //音频的播放事件
+    async audioPlayBack(item) {
+      console.log(item);
+      this.curVideoId = 0;
+      this.$store.commit("audioBg/parseIntAudio", true);
+      // 判断是否为同一个音频
+      if (this.$store.state.audioBg.indexId == item.ActivityId) {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
+        } else {
+          this.globalBgAudioManager.pause();
+        }
+      } else {
+        let VoiceList = {
+          Url: item.ResourceUrl,
+          Name: item.Title,
+          PlaySeconds: item.PlaySeconds,
+        };
+        this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.ActivityId, activityTitle: item.Title });
+      }
+      this.showAudioPop = true;
+    },
+    //音视频的背景色 文字颜色
+    classifyColor(item) {
+      let text_color = color_word_bg.color_word.find((key) => key.name == item).color;
+      let back_ground = color_word_bg.color_bg.find((key) => key.name == item).color;
+      let _isColor = { color: text_color, "background-color": back_ground };
+      return _isColor;
+    },
+    //音视频的图标
+    classifyIcon(item) {
+      let srcItem = MultimediaIcon.find((key) => key.name == (item.AudioChartPermissionName || item.ChartPermissionName));
+      let imgSrc = item.Type == 1 || item.AudioType == 1 ? srcItem.audio : srcItem.video;
+      return imgSrc;
+    },
+    //获取顶部导航
+    async getHeaderTab() {
+      const res = await Home.headerTab();
+      if (res.Ret === 200) {
+        this.topTabBars = res.Data || [];
+      }
+    },
+
+    // 微路演留言
+    myLeavingMessageHandler(item) {
+      uni.navigateTo({
+        url: "/activityPages/generationAsk/generationAsk?id=" + (item.Type == 3 ? item.Id : item.ActivityId) + "&type=文章&roadshow=" + item.Type + "&roadshowTitle=" + item.Title,
+      });
+    },
+
+    // 微路演收藏
+    async isCollectionHandeler(item) {
+      const res = await Home.microRoadshowCollect({
+        Id: item.Id,
+        SourceType: item.Type,
+      });
+      if (res.Ret === 200) {
+        res.Data.Status == 1 ? (item.IsCollect = true) : (item.IsCollect = false);
+        uni.showToast({
+          title: res.Msg,
+          duration: 2000,
+        });
+      }
+    },
+  },
+  onHide() {
+    this.$store.commit("audioBg/parseIntAudio", false);
+    this.curVideoId = 0;
+  },
+  mounted() {
+    uni.$on("updateAudioVideo", (data) => {
+      console.log("执行了");
+      this.$store.dispatch("checkHandle", "noGO");
+      this.getReportList();
+    });
+  },
+  /* 下拉刷新 */
+  onPullDownRefresh: Throttle(function () {
+    this.audioShareId = "";
+    this.videoShareId = "";
+    this.activityShareId = "";
+    this.status = "loadmore";
+    this.refresh = true;
+    this.dataList = [];
+    this.pageNum = 1;
+    this.getReportList();
+  }),
+  // 上拉加载
+  onReachBottom: Throttle(function () {
+    if (this.status === "nomore") return;
+    this.status = "loading";
+    this.pageNum++;
+    this.getReportList();
+  }),
+  /** 用户点击分享*/
+  onShareAppMessage: function ({ from, target }) {
+    if (from === "button") {
+      let item = target.dataset.item;
+      let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
+      // type=2 -- 活动视频 type=3 -- 产业视频
+      let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
+      let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
+      let title_share = item.AudioTitle || item.Title;
+      return {
+        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : title_share,
+        path: "/pages/index/index?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
+        imageUrl: item.AudioShareImg || item.ShareImg,
+      };
+    } else {
+      return {
+        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "您手边的弘则研究素材检索库",
+        path: "/pages/index/index?topTabsActive=" + this.topTabsActive + "&secondActive=" + this.secondActive + "&childrenActive=" + this.chartChildrenActive,
+        imageUrl: this.topTabsActive == 1 ? "https://hzstatic.hzinsights.com/cygx/czbk/home_share.png" : "",
+        success: (res) => {},
+        fail: (err) => {},
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.Index-container {
+  background-color: #f7f7f7;
+  font-size: 30rpx;
+  .top-content-box {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9;
+    .top-tabs {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 34rpx;
+      background-color: #fff;
+      padding: 35rpx 0 10rpx;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        display: none;
+      }
+      .item {
+        position: relative;
+        padding-bottom: 8rpx;
+        margin-right: 60rpx;
+        flex-shrink: 0;
+        .limit-img {
+          position: absolute;
+          top: -15rpx;
+          right: -50rpx;
+          z-index: 99;
+        }
+        .active {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          height: 4rpx;
+          width: 100%;
+          border-radius: 1rpx;
+          background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+        }
+      }
+      .tabs-active {
+        color: #3385ff;
+        font-weight: 500;
+      }
+    }
+  }
+  .nav-bar-wrap {
+    background-color: #fff;
+    width: 100%;
+    padding-left: 35rpx;
+    display: flex;
+    align-items: center;
+    .content {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 70%;
+      height: 63rpx;
+      font-size: 30rpx;
+      color: #8d8d8d;
+      background-color: #f3f3f3;
+      padding-left: 33rpx;
+      border-radius: 70rpx;
+      // border: 1rpx solid #e5e5e5;
+      .sea_ipt {
+        padding-left: 15rpx;
+      }
+    }
+  }
+  .tabs-content {
+    padding: 0 30rpx;
+    background-color: #fff;
+    .children-ul {
+      display: flex;
+      flex-wrap: wrap;
+      .children-active {
+        background-color: #3385ff;
+        color: #fff;
+      }
+    }
+    .medium-ul {
+      display: flex;
+      justify-content: flex-end;
+      padding: 10px 0;
+      .item-content {
+        display: flex;
+        height: 51rpx;
+        background: #f8f8fa;
+        width: 345rpx;
+        border-radius: 64rpx;
+        color: #999999;
+      }
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 115rpx;
+        height: 51rpx;
+        border-radius: 47rpx;
+      }
+      .item-act {
+        background-color: #3385ff;
+        color: #fff;
+      }
+    }
+    .chart-children {
+      padding: 10rpx 20rpx;
+      margin: 0rpx 20rpx 20rpx 0;
+      background-color: #f9f9f9;
+      color: #666666;
+      font-size: 26rpx;
+      border-radius: 4rpx;
+    }
+  }
+  .second-tabs {
+    width: 100%;
+    display: flex;
+    overflow-x: auto;
+    background-color: #fff;
+    font-size: 30rpx;
+    color: #999999;
+    padding: 20rpx 0;
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
+    }
+    .item {
+      position: relative;
+      padding-bottom: 16rpx;
+      margin-right: 50rpx;
+      flex-shrink: 0;
+      .limit-img {
+        position: absolute;
+        top: -15rpx;
+        right: -50rpx;
+        z-index: 99;
+      }
+      .active {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 4rpx;
+        width: 100%;
+        border-radius: 1rpx;
+        background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+      }
+    }
+    .tabs-active {
+      color: #3385ff;
+      font-weight: 500;
+    }
+  }
+  .data-cont {
+    padding: 28rpx 20rpx 10rpx;
+    display: flex;
+    .report-ul {
+      width: 50%;
+      &:first-child {
+        margin-right: 10rpx;
+      }
+      .report-item {
+        padding: 20rpx 20rpx 24rpx 20rpx;
+        margin-bottom: 20rpx;
+        border-radius: 8rpx;
+        box-shadow: 0 3rpx 6rpx rgba($color: #000000, $alpha: 0.16);
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        .audio-video-content {
+          width: calc(100% + 40rpx);
+          height: calc(100% + 25rpx);
+          margin: -20rpx 0 0 -20rpx;
+          padding: 0 !important;
+          .audio-item {
+            width: 100%;
+            height: auto;
+            box-shadow: none;
+          }
+        }
+        .my-chart-collect {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 0;
+          height: 0;
+          border-top: 60rpx solid #3385ff;
+          border-right: 60rpx solid transparent;
+        }
+        .item-content-img {
+          display: flex;
+          align-items: center;
+          width: 330rpx;
+          margin-left: -6rpx;
+          margin-bottom: -20rpx;
+          image {
+            width: 100%;
+            height: 262rpx;
+            vertical-align: middle;
+          }
+        }
+        .item-content {
+          height: 273rpx;
+          font-size: 24rpx;
+          line-height: 40rpx;
+          color: #7f7f7f;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 7;
+          -webkit-box-orient: vertical;
+          image {
+            width: 100% !important;
+          }
+        }
+        .line {
+          margin: 18rpx 0;
+          content: "";
+          width: 100%;
+          height: 1px;
+          padding: 0 32rpx;
+          box-sizing: border-box;
+          background-color: #e5e5e5;
+          -webkit-transform: scale(1, 0.5);
+          transform: scale(1, 0.5);
+          -webkit-transform-origin: center bottom;
+          transform-origin: center bottom;
+        }
+        .item-title {
+          font-size: 28rpx;
+          color: #4a4a4a;
+          margin-bottom: 10rpx;
+          position: relative;
+          text-indent: 0.5em;
+          &::before {
+            content: "";
+            position: absolute;
+            top: 5rpx;
+            left: 0;
+            width: 6rpx;
+            height: 31rpx;
+            background-color: #3385ff;
+          }
+        }
+        .chart-title {
+          height: 72rpx;
+          padding-bottom: 10rpx;
+          text-indent: 0em;
+          &::before {
+            display: none;
+          }
+        }
+        .item-abstract {
+          font-size: 26rpx;
+          color: #6a6a6a;
+          margin-bottom: 10rpx;
+          .report_ico {
+            width: 32rpx;
+            height: 26rpx;
+            margin-right: 20rpx;
+            display: inline-block;
+          }
+        }
+        .item-createtime {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          color: #acacac;
+          font-size: 24rpx;
+          .item-examine {
+            display: flex;
+            align-items: center;
+            image {
+              width: 30rpx;
+              height: 24rpx;
+              margin: 0 10rpx 0 15rpx;
+            }
+          }
+        }
+        .chart-tag {
+          padding-top: 1rpx;
+          height: 36rpx;
+          .tag-item {
+            width: 148rpx;
+            border-radius: 28rpx;
+            border: 2rpx solid rgba(49, 137, 255, 1);
+            overflow: hidden;
+            color: #3385ff;
+            text-align: center;
+            line-height: 30rpx;
+          }
+        }
+        .chart-collect {
+          margin-top: 20rpx;
+          padding-top: 20rpx;
+          padding: 20rpx 0 0 20rpx;
+          border-top: 1rpx solid #dcdfe6;
+          display: flex;
+          align-items: center;
+          .cancel {
+            background: #3385ff;
+            margin-right: 20rpx;
+            color: #ffffff;
+          }
+          .remove {
+            border: 1px solid #3385ff;
+            color: #3385ff;
+          }
+          text {
+            width: 130rpx;
+            height: 46rpx;
+            line-height: 46rpx;
+            border-radius: 4rpx;
+            text-align: center;
+            font-size: 24rpx;
+          }
+        }
+      }
+    }
+  }
+  .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;
+    }
+  }
+  .tabs-img {
+    width: 46rpx;
+    height: 26rpx;
+  }
+  .nodata {
+    font-size: 40rpx;
+    .bind-mobile {
+      width: 244rpx;
+      height: 58rpx;
+      background: #3385ff;
+      border-radius: 8rpx;
+      font-size: 28rpx;
+      line-height: 58rpx;
+      text-align: center;
+      color: #fff;
+      margin: 50rpx auto;
+    }
+  }
+  @import "@/components/audioVideo.scss";
+}
+</style>

pages/my/1.vue

@@ -0,0 +1,990 @@
+<template>
+  <view class="container Index-container">
+    <view class="top-content-box">
+      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
+        <view class="content" @click="goSearch">
+          <icon type="search" size="15" class="search_ico" />
+          <text class="sea_ipt">{{ searchPlaceholderList.SummarySearch || "" }}</text>
+        </view>
+      </view>
+      <view class="top-tabs">
+        <block v-for="item in topTabBars" :key="item.Id">
+          <view v-if="item.IsShow" :class="['item', item.val == topTabsActive && 'tabs-active']" @click="topTabsChange(item)">
+            {{ item.Name }}
+            <block v-if="(item.Id === 3 || item.Name == '图表') && wholeShowListData.IsShowChart">
+              <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
+            </block>
+            <view class="active" v-if="item.Id == topTabsActive"></view>
+          </view>
+        </block>
+      </view>
+      <view class="tabs-content">
+        <view class="second-tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
+          <view :class="['item', item.ChartPermissionId == secondActive && 'tabs-active']" v-for="(item, index) in secondBars" :key="item.ChartPermissionId" @click="handleClickTopSub(item)">
+            {{ item.PermissionName }}
+            <block v-if="wholeShowListData.IsShowResearch && index === secondBars.length - 1 && topTabsActive == '2'">
+              <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
+            </block>
+            <view class="active" v-if="item.ChartPermissionId == secondActive"></view>
+          </view>
+        </view>
+        <block v-if="topTabsActive == '3'">
+          <view class="children-ul">
+            <view :class="['chart-children', chartChildrenActive == item.CtagId ? 'children-active' : '']" v-for="item in chartChildren" :key="item.CtagId" @click="handleChartChildren(item)">{{
+              item.Name
+            }}</view>
+          </view>
+        </block>
+        <view v-if="topTabsActive == '4'" class="medium-ul">
+          <view class="item-content">
+            <view @click="mediumClickHandler(item)" :class="['item', mediumActive === item.value && 'item-act']" v-for="item in mediumSelect" :key="item.value">{{ item.name }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <block v-if="haveData">
+      <ChartItem :dataList="dataList" />
+      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="pageNum > 1" />
+    </block>
+    <view class="nodata" v-else-if="haveData === false" style="padding-top: 400rpx">
+      <block class="nodata" v-if="!isBindingMobile && secondActive == 0">
+        <text>请先绑定联系方式</text>
+        <view class="bind-mobile" @click="bindingMobile">绑定联系方式</view>
+      </block>
+      <block v-else>
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
+        <text>{{ topTabsActive == 3 && secondActive == 0 ? "暂无收藏的图表" : "暂时没有数据" }}</text>
+      </block>
+    </view>
+    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+    <view v-if="showAudioBox">
+      <audioModule :showAudioPop.sync="showAudioPop" />
+    </view>
+    <videoModule :showVideoPop="showVideoPop" :curVideoId="curVideoId" :videoPopList="videoPopList" />
+    <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" />
+    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
+  </view>
+</template>
+
+<script>
+import { Home, Reports, Chart, activity } from "@/config/api.js";
+import { Throttle, deepCopy } from "@/config/util.js";
+import freeCharge from "@/components/freeCharge";
+import suspenButton from "@/components/suspen_button.vue";
+import { color_word_bg, MultimediaIcon } from "@/utils/styleClassify";
+import audioModule from "@/components/audioModule/index";
+import modalDialog from "@/components/modalDialog.vue";
+import videoModule from "@/components/videoModule/index";
+import ChartItem from '@/components/ItemComponent/chartItem.vue';
+
+let app = getApp();
+export default {
+  data() {
+    return {
+      topTabBars: [],
+      topTabsActive: 1, //一级top的tabs
+      secondActive: "", //二级的tabs
+      secondBars: [], //二级的tabs数组
+      chartChildren: [], //二级的tabs下的标签
+      chartChildrenActive: 0,
+      refresh: false,
+      pageSize: 10, //条数
+      pageNum: 1, //页码
+      haveMore: true, //是否有更多数据
+      haveData: null, //是否有数据
+      //数据列表
+      dataList: [],
+      status: "loadmore",
+      loadText: {
+        loadmore: "上拉加载更多",
+        loading: "加载中",
+        nomore: "已经到底了",
+      },
+      showTransition: false, //点击绝密后的隐现
+      isBindingMobile: true, //图表我的收藏是否绑定手机号
+      videoContext: null,
+      showAudioPop: false, //播放音频
+      isShowhasPermission: false, //  联系销售的提交申请
+      applyForIsShow: false, // 提交申请
+      jurisdictionList: {},
+      hasPermission: "", //权限
+      audioShareId: "", //通过分享单个音频点进页面时使用
+      videoShareId: "", //通过分享单个视频点进页面时使用
+      activityShareId: "",
+      videoAudioList: [], //音频  视频 list
+      curVideoId: 0, //音频Id
+      showVideoPop: false,
+      videoPopList: {},
+      mediumSelect: [
+        { name: "全部", value: 0 },
+        { name: "视频", value: 1 },
+        { name: "音频", value: 2 },
+      ],
+      mediumActive: 0,
+    };
+  },
+  components: {
+    freeCharge,
+    suspenButton,
+    modalDialog,
+    audioModule,
+    videoModule,
+    ChartItem,
+  },
+  watch: {},
+  onLoad(optios) {
+    this.getHeaderTab();
+    uni.getSystemInfo({
+      success: function (res) {
+        if (res.windowWidth > 700) {
+          uni.reLaunch({
+            url: "/pages/pcWebViev/pcWebViev",
+          });
+        }
+      },
+    });
+    if (optios.topTabsActive) {
+      this.topTabsActive = optios.topTabsActive;
+      this.secondActive = optios.secondActive;
+      this.chartChildrenActive = optios.childrenActive;
+      this.videoShareId = optios.videoShareId;
+      this.audioShareId = optios.audioShareId;
+      this.activityShareId = optios.activityId;
+      console.log(this.activityShareId);
+      this.getTabs();
+    }
+    this.initNavBar();
+    this.getReportList();
+    this.$store.dispatch("checkHandle", "noGO");
+  },
+  onShow() {
+    //进入页面的记录
+    this.$store.dispatch("statistics", { PageType: "Activit" });
+    // #ifdef MP-WEIXIN
+    uni.hideHomeButton();
+    // #endif
+    this.$store.commit("audioBg/parseIntAudio", true);
+  },
+  computed: {
+    curVoiceId() {
+      //当前正在播放的音频id
+      return this.$store.state.audioBg.indexId;
+    },
+    curAudioPaused() {
+      //当前音频是否暂停状态
+      return this.$store.state.audioBg.paused;
+    },
+    showAudioBox() {
+      return this.$store.state.audioBg.parseIntShow;
+    },
+  },
+  methods: {
+    //获取胶囊位置
+    initNavBar() {
+      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      this.navBarStyle = {
+        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
+        paddingTop: menuButtonInfo.top - 4 + "px",
+        paddingBottom: "4px",
+      };
+    },
+    //点击顶部一级分类
+    topTabsChange(item) {
+      this.topTabsActive = item.Id;
+      this.chartChildren = [];
+      this.chartChildrenActive = 0;
+      this.secondActive = "";
+      this.pageNum = 1;
+      this.dataList = [];
+      this.audioShareId = "";
+      this.videoShareId = "";
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      if (this.topTabsActive == "2" || this.topTabsActive == "3") {
+        this.getTabs();
+      } else {
+        this.initData();
+      }
+    },
+    //点击顶部二级分类
+    handleClickTopSub(item) {
+      this.secondActive = item.ChartPermissionId;
+      this.chartChildren = [];
+      this.chartChildrenActive = 0;
+      this.childrenChartData();
+      this.initData();
+    },
+    //点击图标的二级分类 处理数据
+    childrenChartData() {
+      if (this.topTabsActive == 3 && this.secondActive != 0) {
+        let arr = [];
+        this.secondBars &&
+          this.secondBars.forEach((item) => {
+            if (this.secondActive == item.ChartPermissionId) {
+              deepCopy(arr, item.List);
+              arr.unshift({
+                CtagId: 0,
+                Name: "全部",
+              });
+              this.chartChildren = arr;
+            }
+          });
+        this.chartChildrenActive > 0 ? "" : (this.chartChildrenActive = 0);
+      }
+    },
+    //点击图标的三级分类
+    handleChartChildren(item) {
+      this.chartChildrenActive = item.CtagId;
+      this.initData();
+    },
+    // 点击为路演的筛选
+    mediumClickHandler(item) {
+      this.mediumActive = item.value;
+      this.initData();
+    },
+    //点击
+    initData() {
+      this.pageNum = 1;
+      this.dataList = [];
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      this.getReportList();
+    },
+    /* 获取tab分类 */
+    getTabs() {
+      this.secondBars = [];
+      this.topTabsActive == "2"
+        ? Home.Tab().then((res) => {
+            if (res.Ret === 200) {
+              this.secondBars = res.Data.List;
+              this.secondActive > 0 ? "" : (this.secondActive = this.secondBars[0].ChartPermissionId);
+              this.getReportList();
+            }
+          })
+        : this.topTabsActive == "3"
+        ? Chart.getChartPatg().then((res) => {
+            if (res.Ret === 200) {
+              let arr = res.Data;
+              arr.unshift({
+                ChartPermissionId: 0,
+                PermissionName: "我的收藏",
+              });
+              this.secondBars = arr;
+              this.secondActive ? "" : (this.secondActive = 0);
+              this.secondActive > 0 && this.childrenChartData();
+              this.getReportList();
+            }
+          })
+        : "";
+    },
+    /* 获取列表 */
+    async getReportList() {
+      if (this.topTabsActive == "3" && this.secondActive == 0) {
+        const res = await Chart.getChartcollection({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+        });
+        if (res.Ret === 200) {
+          this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+          this.isBindingMobile = res.Data.IsBindingMobile;
+          if (this.pageNum === 1) {
+            this.dataList = res.Data.List || [];
+            this.haveData = this.dataList.length > 0 ? true : false;
+          } else {
+            this.dataList = this.dataList.concat(res.Data.List);
+          }
+        }
+      } else if (this.topTabsActive == 4) {
+        const res = await Home.microRoadshowList({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+          AudioId: this.audioShareId,
+          VideoId: this.activityShareId ? "" : this.videoShareId,
+          ActivityVideoId: this.activityShareId && this.videoShareId,
+          Filter: this.mediumActive,
+        });
+        if (res.Ret === 200) {
+          this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+          if (this.pageNum == 1) {
+            this.videoAudioList = res.Data.List || [];
+            this.haveData = this.videoAudioList.length > 0 ? true : false;
+            if (this.refresh) {
+              uni.stopPullDownRefresh();
+              this.refresh = false;
+            }
+          } else {
+            this.videoAudioList = this.videoAudioList.concat(res.Data.List);
+          }
+        }
+      } else {
+        const res = await Home.getList({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+          ChartPermissionId: this.secondActive,
+          CtagId: this.chartChildrenActive,
+          ListType: this.topTabsActive,
+        });
+        if (res.Ret === 200) {
+          this.processingData(res);
+        }
+      }
+    },
+    //处理数据
+    processingData(res) {
+      if (!res.Data.HaveResearch) {
+        this.$util.modalShow("", "您暂无查看买方研选权限", "", () => {
+          uni.reLaunch({
+            url: "/pages/index/index",
+          });
+        });
+      }
+      this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+      res.Data.List &&
+        res.Data.List.forEach((item) => {
+          if (item.BodyHtml) {
+            item.BodyHtml = item.BodyHtml.replace(/'\'/g, "");
+          }
+        });
+      if (this.topTabsActive == "2") {
+        if (this.pageNum === 1) {
+          this.dataList = res.Data.List || [];
+          this.haveData = this.dataList.length ? true : false;
+        } else {
+          this.dataList = this.dataList.concat(res.Data.List);
+        }
+      } else {
+        if (this.pageNum === 1) {
+          this.haveData = res.Data.List ? true : res.Data.ChartList ? true : false;
+        }
+        if (!res.Data.List) {
+          this.dataList = this.dataList.concat(res.Data.ChartList);
+        } else if (!res.Data.ChartList) {
+          this.dataList = this.dataList.concat(res.Data.List);
+        } else {
+          this.dataList.push(res.Data.List.shift());
+          let newArr = [];
+          let newArrTwo = [];
+          for (let i = 0; i < res.Data.List.length; i += 2) {
+            newArr.push(res.Data.List.slice(i, i + 2));
+          }
+          for (let i = 0; i < res.Data.ChartList.length; i += 2) {
+            newArrTwo.push(res.Data.ChartList.slice(i, i + 2));
+          }
+          let arr = [];
+          newArr.forEach((item, index) => {
+            if (newArrTwo[index]) {
+              arr.push(newArrTwo[index], item);
+            } else {
+              arr.push(item);
+            }
+          });
+          this.dataList = this.dataList.concat(arr.flat(Infinity));
+        }
+      }
+
+      if (this.refresh) {
+        uni.stopPullDownRefresh();
+        this.refresh = false;
+      }
+    },
+    //我的收藏的删除
+    myChartCollect(id) {
+      uni.showModal({
+        content: "确认要将该图表移除我的收藏吗？",
+        confirmColor: "#3385FF",
+        cancelColor: "#606266",
+        success: async (res) => {
+          if (res.confirm) {
+            const res = await Chart.myChartCollect({
+              ChartId: id,
+            });
+            if (res.Ret === 200) {
+              this.initData();
+              this.$util.toast("已取消收藏");
+            }
+          }
+        },
+      });
+    },
+    //我的收藏 置顶
+    async myChartIsTop(id) {
+      const res = await Chart.myChartTop({
+        ChartId: id,
+      });
+      if (res.Ret === 200) {
+        this.initData();
+        this.$util.toast(res.Msg);
+      }
+    },
+    /* 进入详情 校验是否有该品种权限 */
+    goDetail(item) {
+      if (item.HomeType !== 1) {
+        if (item.Source == 2) {
+          /* 无需授权且已绑定 检验是或否有权限 */
+          this.$store.dispatch("checkHandle", "/pageMy/chartPage/chartPage?id=" + item.ChartId);
+        } else {
+          /* 无需授权且已绑定 检验是或否有权限 */
+          this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
+        }
+      }
+    },
+    /* 搜索 */
+    goSearch() {
+      this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive);
+    },
+    /* 绑定联系方式 */
+    bindingMobile() {
+      uni.navigateTo({
+        url: "/pageMy/login/login",
+      });
+    },
+
+    //播放的权限判断
+    handelPlay(item) {
+      let content_item = null;
+      if (item.AudioActivityId) {
+        content_item = {
+          ActivityId: item.AudioActivityId,
+          PlaySeconds: item.AudioPlaySeconds,
+          ResourceUrl: item.AudioResourceUrl,
+          Title: item.AudioTitle,
+          Type: item.AudioType,
+        };
+      }
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        if (item.AuthInfo.HasPermission == 1) {
+          item.Type == 1 || item.AudioType == 1 ? this.audioPlayBack(content_item ? content_item : item) : this.handelVideoPlay(item);
+        } else {
+          this.hasPermission = item.AuthInfo.HasPermission;
+          this.jurisdictionList.ActivityId = item.Id;
+          this.jurisdictionList.isAudioVideo = item.Type;
+          if (this.hasPermission == 2) {
+            this.jurisdictionList.SellerMobile = item.AuthInfo.SellerMobile;
+            this.jurisdictionList.SellerName = item.AuthInfo.SellerName;
+            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
+            this.isShowhasPermission = true;
+          } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
+            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
+            this.applyForIsShow = true;
+          }
+        }
+      } else {
+        this.$store.dispatch("checkHandle");
+      }
+    },
+    //视频的播放事件
+    handelVideoPlay(item) {
+      if (this.$store.state.videoPlay.playVideoId != item.Id) {
+        this.$store.commit("videoPlay/palyTimeUpdate", 0);
+        console.log(this.$store.state.videoPlay.palyCurrentTime);
+        this.$store.commit("videoPlay/playVideo", item.Id);
+      }
+      this.globalBgAudioManager.stop();
+      this.videoPopList = item;
+      this.showVideoPop = true;
+    },
+    //音频的播放事件
+    async audioPlayBack(item) {
+      console.log(item);
+      this.curVideoId = 0;
+      this.$store.commit("audioBg/parseIntAudio", true);
+      // 判断是否为同一个音频
+      if (this.$store.state.audioBg.indexId == item.ActivityId) {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
+        } else {
+          this.globalBgAudioManager.pause();
+        }
+      } else {
+        let VoiceList = {
+          Url: item.ResourceUrl,
+          Name: item.Title,
+          PlaySeconds: item.PlaySeconds,
+        };
+        this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.ActivityId, activityTitle: item.Title });
+      }
+      this.showAudioPop = true;
+    },
+    //音视频的背景色 文字颜色
+    classifyColor(item) {
+      let text_color = color_word_bg.color_word.find((key) => key.name == item).color;
+      let back_ground = color_word_bg.color_bg.find((key) => key.name == item).color;
+      let _isColor = { color: text_color, "background-color": back_ground };
+      return _isColor;
+    },
+    //音视频的图标
+    classifyIcon(item) {
+      let srcItem = MultimediaIcon.find((key) => key.name == (item.AudioChartPermissionName || item.ChartPermissionName));
+      let imgSrc = item.Type == 1 || item.AudioType == 1 ? srcItem.audio : srcItem.video;
+      return imgSrc;
+    },
+    //获取顶部导航
+    async getHeaderTab() {
+      const res = await Home.headerTab();
+      if (res.Ret === 200) {
+        this.topTabBars = res.Data || [];
+      }
+    },
+
+    // 微路演留言
+    myLeavingMessageHandler(item) {
+      uni.navigateTo({
+        url: "/activityPages/generationAsk/generationAsk?id=" + (item.Type == 3 ? item.Id : item.ActivityId) + "&type=文章&roadshow=" + item.Type + "&roadshowTitle=" + item.Title,
+      });
+    },
+
+    // 微路演收藏
+    async isCollectionHandeler(item) {
+      const res = await Home.microRoadshowCollect({
+        Id: item.Id,
+        SourceType: item.Type,
+      });
+      if (res.Ret === 200) {
+        res.Data.Status == 1 ? (item.IsCollect = true) : (item.IsCollect = false);
+        uni.showToast({
+          title: res.Msg,
+          duration: 2000,
+        });
+      }
+    },
+  },
+  onHide() {
+    this.$store.commit("audioBg/parseIntAudio", false);
+    this.curVideoId = 0;
+  },
+  mounted() {
+    uni.$on("updateAudioVideo", (data) => {
+      console.log("执行了");
+      this.$store.dispatch("checkHandle", "noGO");
+      this.getReportList();
+    });
+  },
+  /* 下拉刷新 */
+  onPullDownRefresh: Throttle(function () {
+    this.audioShareId = "";
+    this.videoShareId = "";
+    this.activityShareId = "";
+    this.status = "loadmore";
+    this.refresh = true;
+    this.dataList = [];
+    this.pageNum = 1;
+    this.getReportList();
+  }),
+  // 上拉加载
+  onReachBottom: Throttle(function () {
+    if (this.status === "nomore") return;
+    this.status = "loading";
+    this.pageNum++;
+    this.getReportList();
+  }),
+  /** 用户点击分享*/
+  onShareAppMessage: function ({ from, target }) {
+    if (from === "button") {
+      let item = target.dataset.item;
+      let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
+      // type=2 -- 活动视频 type=3 -- 产业视频
+      let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
+      let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
+      let title_share = item.AudioTitle || item.Title;
+      return {
+        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : title_share,
+        path: "/pages/index/index?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
+        imageUrl: item.AudioShareImg || item.ShareImg,
+      };
+    } else {
+      return {
+        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "您手边的弘则研究素材检索库",
+        path: "/pages/index/index?topTabsActive=" + this.topTabsActive + "&secondActive=" + this.secondActive + "&childrenActive=" + this.chartChildrenActive,
+        imageUrl: this.topTabsActive == 1 ? "https://hzstatic.hzinsights.com/cygx/czbk/home_share.png" : "",
+        success: (res) => {},
+        fail: (err) => {},
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.Index-container {
+  background-color: #f7f7f7;
+  font-size: 30rpx;
+  .top-content-box {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9;
+    .top-tabs {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 34rpx;
+      background-color: #fff;
+      padding: 35rpx 0 10rpx;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        display: none;
+      }
+      .item {
+        position: relative;
+        padding-bottom: 8rpx;
+        margin-right: 60rpx;
+        flex-shrink: 0;
+        .limit-img {
+          position: absolute;
+          top: -15rpx;
+          right: -50rpx;
+          z-index: 99;
+        }
+        .active {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          height: 4rpx;
+          width: 100%;
+          border-radius: 1rpx;
+          background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+        }
+      }
+      .tabs-active {
+        color: #3385ff;
+        font-weight: 500;
+      }
+    }
+  }
+  .nav-bar-wrap {
+    background-color: #fff;
+    width: 100%;
+    padding-left: 35rpx;
+    display: flex;
+    align-items: center;
+    .content {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 70%;
+      height: 63rpx;
+      font-size: 30rpx;
+      color: #8d8d8d;
+      background-color: #f3f3f3;
+      padding-left: 33rpx;
+      border-radius: 70rpx;
+      // border: 1rpx solid #e5e5e5;
+      .sea_ipt {
+        padding-left: 15rpx;
+      }
+    }
+  }
+  .tabs-content {
+    padding: 0 30rpx;
+    background-color: #fff;
+    .children-ul {
+      display: flex;
+      flex-wrap: wrap;
+      .children-active {
+        background-color: #3385ff;
+        color: #fff;
+      }
+    }
+    .medium-ul {
+      display: flex;
+      justify-content: flex-end;
+      padding: 10px 0;
+      .item-content {
+        display: flex;
+        height: 51rpx;
+        background: #f8f8fa;
+        width: 345rpx;
+        border-radius: 64rpx;
+        color: #999999;
+      }
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 115rpx;
+        height: 51rpx;
+        border-radius: 47rpx;
+      }
+      .item-act {
+        background-color: #3385ff;
+        color: #fff;
+      }
+    }
+    .chart-children {
+      padding: 10rpx 20rpx;
+      margin: 0rpx 20rpx 20rpx 0;
+      background-color: #f9f9f9;
+      color: #666666;
+      font-size: 26rpx;
+      border-radius: 4rpx;
+    }
+  }
+  .second-tabs {
+    width: 100%;
+    display: flex;
+    overflow-x: auto;
+    background-color: #fff;
+    font-size: 30rpx;
+    color: #999999;
+    padding: 20rpx 0;
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
+    }
+    .item {
+      position: relative;
+      padding-bottom: 16rpx;
+      margin-right: 50rpx;
+      flex-shrink: 0;
+      .limit-img {
+        position: absolute;
+        top: -15rpx;
+        right: -50rpx;
+        z-index: 99;
+      }
+      .active {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 4rpx;
+        width: 100%;
+        border-radius: 1rpx;
+        background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+      }
+    }
+    .tabs-active {
+      color: #3385ff;
+      font-weight: 500;
+    }
+  }
+  .data-cont {
+    padding: 28rpx 20rpx 10rpx;
+    display: flex;
+    .report-ul {
+      width: 50%;
+      &:first-child {
+        margin-right: 10rpx;
+      }
+      .report-item {
+        padding: 20rpx 20rpx 24rpx 20rpx;
+        margin-bottom: 20rpx;
+        border-radius: 8rpx;
+        box-shadow: 0 3rpx 6rpx rgba($color: #000000, $alpha: 0.16);
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        .audio-video-content {
+          width: calc(100% + 40rpx);
+          height: calc(100% + 25rpx);
+          margin: -20rpx 0 0 -20rpx;
+          padding: 0 !important;
+          .audio-item {
+            width: 100%;
+            height: auto;
+            box-shadow: none;
+          }
+        }
+        .my-chart-collect {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 0;
+          height: 0;
+          border-top: 60rpx solid #3385ff;
+          border-right: 60rpx solid transparent;
+        }
+        .item-content-img {
+          display: flex;
+          align-items: center;
+          width: 330rpx;
+          margin-left: -6rpx;
+          margin-bottom: -20rpx;
+          image {
+            width: 100%;
+            height: 262rpx;
+            vertical-align: middle;
+          }
+        }
+        .item-content {
+          height: 273rpx;
+          font-size: 24rpx;
+          line-height: 40rpx;
+          color: #7f7f7f;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 7;
+          -webkit-box-orient: vertical;
+          image {
+            width: 100% !important;
+          }
+        }
+        .line {
+          margin: 18rpx 0;
+          content: "";
+          width: 100%;
+          height: 1px;
+          padding: 0 32rpx;
+          box-sizing: border-box;
+          background-color: #e5e5e5;
+          -webkit-transform: scale(1, 0.5);
+          transform: scale(1, 0.5);
+          -webkit-transform-origin: center bottom;
+          transform-origin: center bottom;
+        }
+        .item-title {
+          font-size: 28rpx;
+          color: #4a4a4a;
+          margin-bottom: 10rpx;
+          position: relative;
+          text-indent: 0.5em;
+          &::before {
+            content: "";
+            position: absolute;
+            top: 5rpx;
+            left: 0;
+            width: 6rpx;
+            height: 31rpx;
+            background-color: #3385ff;
+          }
+        }
+        .chart-title {
+          height: 72rpx;
+          padding-bottom: 10rpx;
+          text-indent: 0em;
+          &::before {
+            display: none;
+          }
+        }
+        .item-abstract {
+          font-size: 26rpx;
+          color: #6a6a6a;
+          margin-bottom: 10rpx;
+          .report_ico {
+            width: 32rpx;
+            height: 26rpx;
+            margin-right: 20rpx;
+            display: inline-block;
+          }
+        }
+        .item-createtime {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          color: #acacac;
+          font-size: 24rpx;
+          .item-examine {
+            display: flex;
+            align-items: center;
+            image {
+              width: 30rpx;
+              height: 24rpx;
+              margin: 0 10rpx 0 15rpx;
+            }
+          }
+        }
+        .chart-tag {
+          padding-top: 1rpx;
+          height: 36rpx;
+          .tag-item {
+            width: 148rpx;
+            border-radius: 28rpx;
+            border: 2rpx solid rgba(49, 137, 255, 1);
+            overflow: hidden;
+            color: #3385ff;
+            text-align: center;
+            line-height: 30rpx;
+          }
+        }
+        .chart-collect {
+          margin-top: 20rpx;
+          padding-top: 20rpx;
+          padding: 20rpx 0 0 20rpx;
+          border-top: 1rpx solid #dcdfe6;
+          display: flex;
+          align-items: center;
+          .cancel {
+            background: #3385ff;
+            margin-right: 20rpx;
+            color: #ffffff;
+          }
+          .remove {
+            border: 1px solid #3385ff;
+            color: #3385ff;
+          }
+          text {
+            width: 130rpx;
+            height: 46rpx;
+            line-height: 46rpx;
+            border-radius: 4rpx;
+            text-align: center;
+            font-size: 24rpx;
+          }
+        }
+      }
+    }
+  }
+  .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;
+    }
+  }
+  .tabs-img {
+    width: 46rpx;
+    height: 26rpx;
+  }
+  .nodata {
+    font-size: 40rpx;
+    .bind-mobile {
+      width: 244rpx;
+      height: 58rpx;
+      background: #3385ff;
+      border-radius: 8rpx;
+      font-size: 28rpx;
+      line-height: 58rpx;
+      text-align: center;
+      color: #fff;
+      margin: 50rpx auto;
+    }
+  }
+  @import "@/components/audioVideo.scss";
+}
+</style>

pages/my/2.vue

@@ -0,0 +1,1159 @@
+<template>
+  <view class="container Index-container">
+    <view class="top-content-box">
+      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
+        <view class="content" @click="goSearch">
+          <icon type="search" size="15" class="search_ico" />
+          <text class="sea_ipt">{{ searchPlaceholderList.SummarySearch || "" }}</text>
+        </view>
+      </view>
+      <view class="top-tabs">
+        <block v-for="item in topTabBars" :key="item.Id">
+          <view v-if="item.IsShow" :class="['item', item.val == topTabsActive && 'tabs-active']" @click="topTabsChange(item)">
+            {{ item.Name }}
+            <block v-if="(item.Id === 3 || item.Name == '图表') && wholeShowListData.IsShowChart">
+              <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
+            </block>
+            <view class="active" v-if="item.Id == topTabsActive"></view>
+          </view>
+        </block>
+      </view>
+      <view class="tabs-content">
+        <view class="second-tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
+          <view :class="['item', item.ChartPermissionId == secondActive && 'tabs-active']" v-for="(item, index) in secondBars" :key="item.ChartPermissionId" @click="handleClickTopSub(item)">
+            {{ item.PermissionName }}
+            <block v-if="wholeShowListData.IsShowResearch && index === secondBars.length - 1 && topTabsActive == '2'">
+              <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
+            </block>
+            <view class="active" v-if="item.ChartPermissionId == secondActive"></view>
+          </view>
+        </view>
+        <block v-if="topTabsActive == '3'">
+          <view class="children-ul">
+            <view :class="['chart-children', chartChildrenActive == item.CtagId ? 'children-active' : '']" v-for="item in chartChildren" :key="item.CtagId" @click="handleChartChildren(item)">{{
+              item.Name
+            }}</view>
+          </view>
+        </block>
+        <view v-if="topTabsActive == '4'" class="medium-ul">
+          <view class="item-content">
+            <view @click="mediumClickHandler(item)" :class="['item', mediumActive === item.value && 'item-act']" v-for="item in mediumSelect" :key="item.value">{{ item.name }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <block v-if="haveData">
+      <view class="audio-video-content" v-if="topTabsActive == 4">
+        <view class="audio-item" v-for="item in videoAudioList" :key="item.Id">
+          <view class="cover-item" :style="{ 'background-image': 'url(' + item.BackgroundImg + ')' }">
+            <!-- type:3 -- 产业视频 -->
+            <block v-if="item.Type == 2 || item.Type == 3">
+              <image class="img-bg" @click="handelPlay(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
+            </block>
+            <block v-else>
+              <image
+                class="img-bg"
+                @click.stop="handelPlay(item)"
+                :src="
+                  curVoiceId === item.ActivityId && !curAudioPaused
+                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
+                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
+                "
+              ></image>
+            </block>
+            <text class="time">{{ item.PublishTime }}</text>
+            <view :class="['identification', item.Type != 1 && 'identification-video']"> </view>
+            <image
+              class="identification-img"
+              :src="item.Type == 1 ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/video-iocn.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/audio-icon.png'"
+            ></image>
+          </view>
+          <view class="title-share">
+            <view class="title text_twoLine">{{ item.Title }}</view>
+            <view class="share share-collected">
+              <image @click="myLeavingMessageHandler(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
+              <image  @click="isCollectionHandeler(item)" :src="item.IsCollect ?'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/not_collected.png'"></image>
+              <button class="share-icon" open-type="share" :data-item="item">
+                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="data-cont" v-else>
+        <view class="report-ul">
+          <block v-for="(report, index) in dataList" :key="index">
+            <view class="report-item" v-if="index % 2 === 0" @click="goDetail(report)">
+              <block v-if="report.HomeType === 1">
+                <view class="audio-video-content">
+                  <view class="audio-item">
+                    <view class="cover-item" :style="{ 'background-image': 'url(' + report.MicroAudio.AudioImgUrl + ')' }">
+                      <image
+                        class="img-bg"
+                        @click.stop="handelPlay(report.MicroAudio)"
+                        :src="
+                          curVoiceId === report.MicroAudio.AudioActivityId && !curAudioPaused
+                            ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
+                            : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
+                        "
+                      ></image>
+                      <text class="time">{{ report.MicroAudio.AudioPublishTime }}</text>
+                    </view>
+                    <view class="title-share">
+                      <view class="title text_twoLine">{{ report.MicroAudio.AudioTitle }}</view>
+                      <view class="share">
+                        <view class="share-text" :style="[classifyColor(report.MicroAudio.AudioChartPermissionName)]">
+                          <image :src="classifyIcon(report.MicroAudio)"></image>
+                          音频｜{{ report.MicroAudio.AudioChartPermissionName }}
+                        </view>
+                        <button class="share-icon" open-type="share" :data-item="report.MicroAudio">
+                          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
+                        </button>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </block>
+              <block v-else>
+                <view class="item-content-img" v-if="report.BodyHtml">
+                  <image :src="report.BodyHtml" mode=""></image>
+                </view>
+                <view class="item-content" v-else>{{ report.Body }}</view>
+                <view class="line"></view>
+                <text :class="['item-title', report.Source != 1 && 'chart-title text_twoLine']">{{ report.Title }}</text>
+                <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
+                  {{ report.ExpertBackground }}
+                </view>
+                <block v-if="report.Source == 1">
+                  <view class="item-createtime">
+                    <text>{{ report.PublishDate }}</text>
+                    <view class="item-examine" v-if="report.IsResearch">
+                      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
+                      <text>{{ report.Pv }}</text>
+                    </view>
+                  </view>
+                </block>
+                <block v-else>
+                  <view class="item-createtime chart-tag">
+                    <text class="tag-item" v-if="report.PtagName">{{ report.PtagName }}</text>
+                    <text class="tag-item" v-if="report.CtagName">{{ report.CtagName }}</text>
+                  </view>
+                  <view class="chart-collect" v-if="topTabsActive == 3 && secondActive == 0">
+                    <text class="cancel" @click.stop="myChartIsTop(report.ChartId)">{{ report.IsTop ? "取消置顶" : "置顶" }}</text>
+                    <text class="remove" @click.stop="myChartCollect(report.ChartId)">移除</text>
+                  </view>
+                  <view class="my-chart-collect" v-if="topTabsActive == 3 && secondActive == 0 && report.IsTop"></view>
+                </block>
+              </block>
+            </view>
+          </block>
+        </view>
+        <view class="report-ul">
+          <block v-for="(report, index) in dataList" :key="index">
+            <view class="report-item" v-if="index % 2 !== 0" @click="goDetail(report)">
+              <block v-if="report.HomeType === 1">
+                <view class="audio-video-content">
+                  <view class="audio-item">
+                    <view class="cover-item" :style="{ 'background-image': 'url(' + report.MicroAudio.AudioImgUrl + ')' }">
+                      <image
+                        class="img-bg"
+                        @click.stop="handelPlay(report.MicroAudio)"
+                        :src="
+                          curVoiceId === report.MicroAudio.AudioActivityId && !curAudioPaused
+                            ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
+                            : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
+                        "
+                      ></image>
+                      <text class="time">{{ report.MicroAudio.AudioPublishTime }}</text>
+                    </view>
+                    <view class="title-share">
+                      <view class="title text_twoLine">{{ report.MicroAudio.AudioTitle }}</view>
+                      <view class="share">
+                        <view class="share-text" :style="[classifyColor(report.MicroAudio.AudioChartPermissionName)]">
+                          <image :src="classifyIcon(report.MicroAudio)"></image>
+                          音频｜{{ report.MicroAudio.AudioChartPermissionName }}
+                        </view>
+                        <button class="share-icon" open-type="share" :data-item="report">
+                          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
+                        </button>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </block>
+              <block v-else>
+                <view class="item-content-img" v-if="report.BodyHtml">
+                  <image :src="report.BodyHtml"></image>
+                </view>
+                <view class="item-content" v-else>{{ report.Body }}</view>
+                <view class="line"></view>
+                <text :class="['item-title', report.Source != 1 && 'chart-title text_twoLine']">{{ report.Title }}</text>
+                <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
+                  {{ report.ExpertBackground }}
+                </view>
+                <block v-if="report.Source == 1">
+                  <view class="item-createtime">
+                    <text>{{ report.PublishDate }}</text>
+                    <view class="item-examine" v-if="report.IsResearch">
+                      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
+                      <text>{{ report.Pv }}</text>
+                    </view>
+                  </view>
+                </block>
+                <block v-else>
+                  <view class="item-createtime chart-tag">
+                    <text class="tag-item" v-if="report.PtagName">{{ report.PtagName }}</text>
+                    <text class="tag-item" v-if="report.CtagName">{{ report.CtagName }}</text>
+                  </view>
+                  <view class="chart-collect" v-if="topTabsActive == 3 && secondActive == 0">
+                    <text class="cancel" @click.stop="myChartIsTop(report.ChartId)">{{ report.IsTop ? "取消置顶" : "置顶" }}</text>
+                    <text class="remove" @click.stop="myChartCollect(report.ChartId)">移除</text>
+                  </view>
+                  <view class="my-chart-collect" v-if="topTabsActive == 3 && secondActive == 0 && report.IsTop"></view>
+                </block>
+              </block>
+            </view>
+          </block>
+        </view>
+      </view>
+      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="pageNum > 1" />
+    </block>
+    <view class="nodata" v-else-if="haveData === false" style="padding-top: 400rpx">
+      <block class="nodata" v-if="!isBindingMobile && secondActive == 0">
+        <text>请先绑定联系方式</text>
+        <view class="bind-mobile" @click="bindingMobile">绑定联系方式</view>
+      </block>
+      <block v-else>
+        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
+        <text>{{ topTabsActive == 3 && secondActive == 0 ? "暂无收藏的图表" : "暂时没有数据" }}</text>
+      </block>
+    </view>
+    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+    <view v-if="showAudioBox">
+      <audioModule :showAudioPop.sync="showAudioPop" />
+    </view>
+    <videoModule :showVideoPop="showVideoPop" :curVideoId="curVideoId" :videoPopList="videoPopList" />
+    <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" />
+    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
+  </view>
+</template>
+
+<script>
+import { Home, Reports, Chart, activity } from "@/config/api.js";
+import { Throttle, deepCopy } from "@/config/util.js";
+import freeCharge from "@/components/freeCharge";
+import suspenButton from "@/components/suspen_button.vue";
+import { color_word_bg, MultimediaIcon } from "@/utils/styleClassify";
+import audioModule from "@/components/audioModule/index";
+import modalDialog from "@/components/modalDialog.vue";
+import videoModule from "@/components/videoModule/index";
+
+let app = getApp();
+export default {
+  data() {
+    return {
+      topTabBars: [],
+      topTabsActive: 1, //一级top的tabs
+      secondActive: "", //二级的tabs
+      secondBars: [], //二级的tabs数组
+      chartChildren: [], //二级的tabs下的标签
+      chartChildrenActive: 0,
+      refresh: false,
+      pageSize: 10, //条数
+      pageNum: 1, //页码
+      haveMore: true, //是否有更多数据
+      haveData: null, //是否有数据
+      //数据列表
+      dataList: [],
+      status: "loadmore",
+      loadText: {
+        loadmore: "上拉加载更多",
+        loading: "加载中",
+        nomore: "已经到底了",
+      },
+      showTransition: false, //点击绝密后的隐现
+      isBindingMobile: true, //图表我的收藏是否绑定手机号
+      videoContext: null,
+      showAudioPop: false, //播放音频
+      isShowhasPermission: false, //  联系销售的提交申请
+      applyForIsShow: false, // 提交申请
+      jurisdictionList: {},
+      hasPermission: "", //权限
+      audioShareId: "", //通过分享单个音频点进页面时使用
+      videoShareId: "", //通过分享单个视频点进页面时使用
+      activityShareId: "",
+      videoAudioList: [], //音频  视频 list
+      curVideoId: 0, //音频Id
+      showVideoPop: false,
+      videoPopList: {},
+      mediumSelect: [
+        { name: "全部", value: 0 },
+        { name: "视频", value: 1 },
+        { name: "音频", value: 2 },
+      ],
+      mediumActive: 0,
+    };
+  },
+  components: {
+    freeCharge,
+    suspenButton,
+    modalDialog,
+    audioModule,
+    videoModule,
+  },
+  watch: {},
+  onLoad(optios) {
+    this.getHeaderTab();
+    uni.getSystemInfo({
+      success: function (res) {
+        if (res.windowWidth > 700) {
+          uni.reLaunch({
+            url: "/pages/pcWebViev/pcWebViev",
+          });
+        }
+      },
+    });
+    if (optios.topTabsActive) {
+      this.topTabsActive = optios.topTabsActive;
+      this.secondActive = optios.secondActive;
+      this.chartChildrenActive = optios.childrenActive;
+      this.videoShareId = optios.videoShareId;
+      this.audioShareId = optios.audioShareId;
+      this.activityShareId = optios.activityId;
+      console.log(this.activityShareId);
+      this.getTabs();
+    }
+    this.initNavBar();
+    this.getReportList();
+    this.$store.dispatch("checkHandle", "noGO");
+  },
+  onShow() {
+    //进入页面的记录
+    this.$store.dispatch("statistics", { PageType: "Activit" });
+    // #ifdef MP-WEIXIN
+    uni.hideHomeButton();
+    // #endif
+    this.$store.commit("audioBg/parseIntAudio", true);
+  },
+  computed: {
+    curVoiceId() {
+      //当前正在播放的音频id
+      return this.$store.state.audioBg.indexId;
+    },
+    curAudioPaused() {
+      //当前音频是否暂停状态
+      return this.$store.state.audioBg.paused;
+    },
+    showAudioBox() {
+      return this.$store.state.audioBg.parseIntShow;
+    },
+  },
+  methods: {
+    //获取胶囊位置
+    initNavBar() {
+      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      this.navBarStyle = {
+        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
+        paddingTop: menuButtonInfo.top - 4 + "px",
+        paddingBottom: "4px",
+      };
+    },
+    //点击顶部一级分类
+    topTabsChange(item) {
+      this.topTabsActive = item.Id;
+      this.chartChildren = [];
+      this.chartChildrenActive = 0;
+      this.secondActive = "";
+      this.pageNum = 1;
+      this.dataList = [];
+      this.audioShareId = "";
+      this.videoShareId = "";
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      if (this.topTabsActive == "2" || this.topTabsActive == "3") {
+        this.getTabs();
+      } else {
+        this.initData();
+      }
+    },
+    //点击顶部二级分类
+    handleClickTopSub(item) {
+      this.secondActive = item.ChartPermissionId;
+      this.chartChildren = [];
+      this.chartChildrenActive = 0;
+      this.childrenChartData();
+      this.initData();
+    },
+    //点击图标的二级分类 处理数据
+    childrenChartData() {
+      if (this.topTabsActive == 3 && this.secondActive != 0) {
+        let arr = [];
+        this.secondBars &&
+          this.secondBars.forEach((item) => {
+            if (this.secondActive == item.ChartPermissionId) {
+              deepCopy(arr, item.List);
+              arr.unshift({
+                CtagId: 0,
+                Name: "全部",
+              });
+              this.chartChildren = arr;
+            }
+          });
+        this.chartChildrenActive > 0 ? "" : (this.chartChildrenActive = 0);
+      }
+    },
+    //点击图标的三级分类
+    handleChartChildren(item) {
+      this.chartChildrenActive = item.CtagId;
+      this.initData();
+    },
+    // 点击为路演的筛选
+    mediumClickHandler(item) {
+      this.mediumActive = item.value;
+      this.initData();
+    },
+    //点击
+    initData() {
+      this.pageNum = 1;
+      this.dataList = [];
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      this.getReportList();
+    },
+    /* 获取tab分类 */
+    getTabs() {
+      this.secondBars = [];
+      this.topTabsActive == "2"
+        ? Home.Tab().then((res) => {
+            if (res.Ret === 200) {
+              this.secondBars = res.Data.List;
+              this.secondActive > 0 ? "" : (this.secondActive = this.secondBars[0].ChartPermissionId);
+              this.getReportList();
+            }
+          })
+        : this.topTabsActive == "3"
+        ? Chart.getChartPatg().then((res) => {
+            if (res.Ret === 200) {
+              let arr = res.Data;
+              arr.unshift({
+                ChartPermissionId: 0,
+                PermissionName: "我的收藏",
+              });
+              this.secondBars = arr;
+              this.secondActive ? "" : (this.secondActive = 0);
+              this.secondActive > 0 && this.childrenChartData();
+              this.getReportList();
+            }
+          })
+        : "";
+    },
+    /* 获取列表 */
+    async getReportList() {
+      if (this.topTabsActive == "3" && this.secondActive == 0) {
+        const res = await Chart.getChartcollection({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+        });
+        if (res.Ret === 200) {
+          this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+          this.isBindingMobile = res.Data.IsBindingMobile;
+          if (this.pageNum === 1) {
+            this.dataList = res.Data.List || [];
+            this.haveData = this.dataList.length > 0 ? true : false;
+          } else {
+            this.dataList = this.dataList.concat(res.Data.List);
+          }
+        }
+      } else if (this.topTabsActive == 4) {
+        const res = await Home.microRoadshowList({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+          AudioId: this.audioShareId,
+          VideoId: this.activityShareId ? "" : this.videoShareId,
+          ActivityVideoId: this.activityShareId && this.videoShareId,
+          Filter: this.mediumActive,
+        });
+        if (res.Ret === 200) {
+          this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+          if (this.pageNum == 1) {
+            this.videoAudioList = res.Data.List || [];
+            this.haveData = this.videoAudioList.length > 0 ? true : false;
+            if (this.refresh) {
+              uni.stopPullDownRefresh();
+              this.refresh = false;
+            }
+          } else {
+            this.videoAudioList = this.videoAudioList.concat(res.Data.List);
+          }
+        }
+      } else {
+        const res = await Home.getList({
+          PageSize: this.pageSize,
+          CurrentIndex: this.pageNum,
+          ChartPermissionId: this.secondActive,
+          CtagId: this.chartChildrenActive,
+          ListType: this.topTabsActive,
+        });
+        if (res.Ret === 200) {
+          this.processingData(res);
+        }
+      }
+    },
+    //处理数据
+    processingData(res) {
+      if (!res.Data.HaveResearch) {
+        this.$util.modalShow("", "您暂无查看买方研选权限", "", () => {
+          uni.reLaunch({
+            url: "/pages/index/index",
+          });
+        });
+      }
+      this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+      res.Data.List &&
+        res.Data.List.forEach((item) => {
+          if (item.BodyHtml) {
+            item.BodyHtml = item.BodyHtml.replace(/'\'/g, "");
+          }
+        });
+      if (this.topTabsActive == "2") {
+        if (this.pageNum === 1) {
+          this.dataList = res.Data.List || [];
+          this.haveData = this.dataList.length ? true : false;
+        } else {
+          this.dataList = this.dataList.concat(res.Data.List);
+        }
+      } else {
+        if (this.pageNum === 1) {
+          this.haveData = res.Data.List ? true : res.Data.ChartList ? true : false;
+        }
+        if (!res.Data.List) {
+          this.dataList = this.dataList.concat(res.Data.ChartList);
+        } else if (!res.Data.ChartList) {
+          this.dataList = this.dataList.concat(res.Data.List);
+        } else {
+          this.dataList.push(res.Data.List.shift());
+          let newArr = [];
+          let newArrTwo = [];
+          for (let i = 0; i < res.Data.List.length; i += 2) {
+            newArr.push(res.Data.List.slice(i, i + 2));
+          }
+          for (let i = 0; i < res.Data.ChartList.length; i += 2) {
+            newArrTwo.push(res.Data.ChartList.slice(i, i + 2));
+          }
+          let arr = [];
+          newArr.forEach((item, index) => {
+            if (newArrTwo[index]) {
+              arr.push(newArrTwo[index], item);
+            } else {
+              arr.push(item);
+            }
+          });
+          this.dataList = this.dataList.concat(arr.flat(Infinity));
+        }
+      }
+
+      if (this.refresh) {
+        uni.stopPullDownRefresh();
+        this.refresh = false;
+      }
+    },
+    //我的收藏的删除
+    myChartCollect(id) {
+      uni.showModal({
+        content: "确认要将该图表移除我的收藏吗？",
+        confirmColor: "#3385FF",
+        cancelColor: "#606266",
+        success: async (res) => {
+          if (res.confirm) {
+            const res = await Chart.myChartCollect({
+              ChartId: id,
+            });
+            if (res.Ret === 200) {
+              this.initData();
+              this.$util.toast("已取消收藏");
+            }
+          }
+        },
+      });
+    },
+    //我的收藏 置顶
+    async myChartIsTop(id) {
+      const res = await Chart.myChartTop({
+        ChartId: id,
+      });
+      if (res.Ret === 200) {
+        this.initData();
+        this.$util.toast(res.Msg);
+      }
+    },
+    /* 进入详情 校验是否有该品种权限 */
+    goDetail(item) {
+      if (item.HomeType !== 1) {
+        if (item.Source == 2) {
+          /* 无需授权且已绑定 检验是或否有权限 */
+          this.$store.dispatch("checkHandle", "/pageMy/chartPage/chartPage?id=" + item.ChartId);
+        } else {
+          /* 无需授权且已绑定 检验是或否有权限 */
+          this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
+        }
+      }
+    },
+    /* 搜索 */
+    goSearch() {
+      this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive);
+    },
+    /* 绑定联系方式 */
+    bindingMobile() {
+      uni.navigateTo({
+        url: "/pageMy/login/login",
+      });
+    },
+
+    //播放的权限判断
+    handelPlay(item) {
+      let content_item = null;
+      if (item.AudioActivityId) {
+        content_item = {
+          ActivityId: item.AudioActivityId,
+          PlaySeconds: item.AudioPlaySeconds,
+          ResourceUrl: item.AudioResourceUrl,
+          Title: item.AudioTitle,
+          Type: item.AudioType,
+        };
+      }
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        if (item.AuthInfo.HasPermission == 1) {
+          item.Type == 1 || item.AudioType == 1 ? this.audioPlayBack(content_item ? content_item : item) : this.handelVideoPlay(item);
+        } else {
+          this.hasPermission = item.AuthInfo.HasPermission;
+          this.jurisdictionList.ActivityId = item.Id;
+          this.jurisdictionList.isAudioVideo = item.Type;
+          if (this.hasPermission == 2) {
+            this.jurisdictionList.SellerMobile = item.AuthInfo.SellerMobile;
+            this.jurisdictionList.SellerName = item.AuthInfo.SellerName;
+            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
+            this.isShowhasPermission = true;
+          } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
+            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
+            this.applyForIsShow = true;
+          }
+        }
+      } else {
+        this.$store.dispatch("checkHandle");
+      }
+    },
+    //视频的播放事件
+    handelVideoPlay(item) {
+      if (this.$store.state.videoPlay.playVideoId != item.Id) {
+        this.$store.commit("videoPlay/palyTimeUpdate", 0);
+        console.log(this.$store.state.videoPlay.palyCurrentTime);
+        this.$store.commit("videoPlay/playVideo", item.Id);
+      }
+      this.globalBgAudioManager.stop();
+      this.videoPopList = item;
+      this.showVideoPop = true;
+    },
+    //音频的播放事件
+    async audioPlayBack(item) {
+      console.log(item);
+      this.curVideoId = 0;
+      this.$store.commit("audioBg/parseIntAudio", true);
+      // 判断是否为同一个音频
+      if (this.$store.state.audioBg.indexId == item.ActivityId) {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
+        } else {
+          this.globalBgAudioManager.pause();
+        }
+      } else {
+        let VoiceList = {
+          Url: item.ResourceUrl,
+          Name: item.Title,
+          PlaySeconds: item.PlaySeconds,
+        };
+        this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.ActivityId, activityTitle: item.Title });
+      }
+      this.showAudioPop = true;
+    },
+    //音视频的背景色 文字颜色
+    classifyColor(item) {
+      let text_color = color_word_bg.color_word.find((key) => key.name == item).color;
+      let back_ground = color_word_bg.color_bg.find((key) => key.name == item).color;
+      let _isColor = { color: text_color, "background-color": back_ground };
+      return _isColor;
+    },
+    //音视频的图标
+    classifyIcon(item) {
+      let srcItem = MultimediaIcon.find((key) => key.name == (item.AudioChartPermissionName || item.ChartPermissionName));
+      let imgSrc = item.Type == 1 || item.AudioType == 1 ? srcItem.audio : srcItem.video;
+      return imgSrc;
+    },
+    //获取顶部导航
+    async getHeaderTab() {
+      const res = await Home.headerTab();
+      if (res.Ret === 200) {
+        this.topTabBars = res.Data || [];
+      }
+    },
+
+    // 微路演留言
+    myLeavingMessageHandler(item) {
+      uni.navigateTo({
+        url: "/activityPages/generationAsk/generationAsk?id=" + (item.Type == 3 ? item.Id : item.ActivityId) + "&type=文章&roadshow=" + item.Type + "&roadshowTitle=" + item.Title,
+      });
+    },
+
+    // 微路演收藏
+    async isCollectionHandeler(item) {
+      const res = await Home.microRoadshowCollect({
+        Id: item.Id,
+        SourceType: item.Type,
+      });
+      if (res.Ret === 200) {
+        res.Data.Status == 1 ? (item.IsCollect = true) : (item.IsCollect = false);
+        uni.showToast({
+          title: res.Msg,
+          duration: 2000,
+        });
+      }
+    },
+  },
+  onHide() {
+    this.$store.commit("audioBg/parseIntAudio", false);
+    this.curVideoId = 0;
+  },
+  mounted() {
+    uni.$on("updateAudioVideo", (data) => {
+      console.log("执行了");
+      this.$store.dispatch("checkHandle", "noGO");
+      this.getReportList();
+    });
+  },
+  /* 下拉刷新 */
+  onPullDownRefresh: Throttle(function () {
+    this.audioShareId = "";
+    this.videoShareId = "";
+    this.activityShareId = "";
+    this.status = "loadmore";
+    this.refresh = true;
+    this.dataList = [];
+    this.pageNum = 1;
+    this.getReportList();
+  }),
+  // 上拉加载
+  onReachBottom: Throttle(function () {
+    if (this.status === "nomore") return;
+    this.status = "loading";
+    this.pageNum++;
+    this.getReportList();
+  }),
+  /** 用户点击分享*/
+  onShareAppMessage: function ({ from, target }) {
+    if (from === "button") {
+      let item = target.dataset.item;
+      let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
+      // type=2 -- 活动视频 type=3 -- 产业视频
+      let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
+      let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
+      let title_share = item.AudioTitle || item.Title;
+      return {
+        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : title_share,
+        path: "/pages/index/index?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
+        imageUrl: item.AudioShareImg || item.ShareImg,
+      };
+    } else {
+      return {
+        title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "您手边的弘则研究素材检索库",
+        path: "/pages/index/index?topTabsActive=" + this.topTabsActive + "&secondActive=" + this.secondActive + "&childrenActive=" + this.chartChildrenActive,
+        imageUrl: this.topTabsActive == 1 ? "https://hzstatic.hzinsights.com/cygx/czbk/home_share.png" : "",
+        success: (res) => {},
+        fail: (err) => {},
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.Index-container {
+  background-color: #f7f7f7;
+  font-size: 30rpx;
+  .top-content-box {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9;
+    .top-tabs {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 34rpx;
+      background-color: #fff;
+      padding: 35rpx 0 10rpx;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        display: none;
+      }
+      .item {
+        position: relative;
+        padding-bottom: 8rpx;
+        margin-right: 60rpx;
+        flex-shrink: 0;
+        .limit-img {
+          position: absolute;
+          top: -15rpx;
+          right: -50rpx;
+          z-index: 99;
+        }
+        .active {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          height: 4rpx;
+          width: 100%;
+          border-radius: 1rpx;
+          background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+        }
+      }
+      .tabs-active {
+        color: #3385ff;
+        font-weight: 500;
+      }
+    }
+  }
+  .nav-bar-wrap {
+    background-color: #fff;
+    width: 100%;
+    padding-left: 35rpx;
+    display: flex;
+    align-items: center;
+    .content {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 70%;
+      height: 63rpx;
+      font-size: 30rpx;
+      color: #8d8d8d;
+      background-color: #f6f6f6;
+      padding-left: 33rpx;
+      border-radius: 70rpx;
+      // border: 1rpx solid #e5e5e5;
+      .sea_ipt {
+        padding-left: 15rpx;
+      }
+    }
+  }
+  .tabs-content {
+    padding: 0 30rpx;
+    background-color: #fff;
+    .children-ul {
+      display: flex;
+      flex-wrap: wrap;
+      .children-active {
+        background-color: #3385ff;
+        color: #fff;
+      }
+    }
+    .medium-ul {
+      display: flex;
+      justify-content: flex-end;
+      padding: 10px 0;
+      .item-content {
+        display: flex;
+        height: 51rpx;
+        background: #f8f8fa;
+        width: 345rpx;
+        border-radius: 64rpx;
+        color: #999999;
+      }
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 115rpx;
+        height: 51rpx;
+        border-radius: 47rpx;
+      }
+      .item-act {
+        background-color: #3385ff;
+        color: #fff;
+      }
+    }
+    .chart-children {
+      padding: 10rpx 20rpx;
+      margin: 0rpx 20rpx 20rpx 0;
+      background-color: #f9f9f9;
+      color: #666666;
+      font-size: 26rpx;
+      border-radius: 4rpx;
+    }
+  }
+  .second-tabs {
+    width: 100%;
+    display: flex;
+    overflow-x: auto;
+    background-color: #fff;
+    font-size: 30rpx;
+    color: #999999;
+    padding: 20rpx 0;
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
+    }
+    .item {
+      position: relative;
+      padding-bottom: 16rpx;
+      margin-right: 50rpx;
+      flex-shrink: 0;
+      .limit-img {
+        position: absolute;
+        top: -15rpx;
+        right: -50rpx;
+        z-index: 99;
+      }
+      .active {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 4rpx;
+        width: 100%;
+        border-radius: 1rpx;
+        background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+      }
+    }
+    .tabs-active {
+      color: #3385ff;
+      font-weight: 500;
+    }
+  }
+  .data-cont {
+    padding: 28rpx 20rpx 10rpx;
+    display: flex;
+    .report-ul {
+      width: 50%;
+      &:first-child {
+        margin-right: 10rpx;
+      }
+      .report-item {
+        padding: 20rpx 20rpx 24rpx 20rpx;
+        margin-bottom: 20rpx;
+        border-radius: 8rpx;
+        box-shadow: 0 3rpx 6rpx rgba($color: #000000, $alpha: 0.16);
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        .audio-video-content {
+          width: calc(100% + 40rpx);
+          height: calc(100% + 25rpx);
+          margin: -20rpx 0 0 -20rpx;
+          padding: 0 !important;
+          .audio-item {
+            width: 100%;
+            height: auto;
+            box-shadow: none;
+          }
+        }
+        .my-chart-collect {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 0;
+          height: 0;
+          border-top: 60rpx solid #3385ff;
+          border-right: 60rpx solid transparent;
+        }
+        .item-content-img {
+          display: flex;
+          align-items: center;
+          width: 330rpx;
+          margin-left: -6rpx;
+          margin-bottom: -20rpx;
+          image {
+            width: 100%;
+            height: 262rpx;
+            vertical-align: middle;
+          }
+        }
+        .item-content {
+          height: 273rpx;
+          font-size: 24rpx;
+          line-height: 40rpx;
+          color: #7f7f7f;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 7;
+          -webkit-box-orient: vertical;
+          image {
+            width: 100% !important;
+          }
+        }
+        .line {
+          margin: 18rpx 0;
+          content: "";
+          width: 100%;
+          height: 1px;
+          padding: 0 32rpx;
+          box-sizing: border-box;
+          background-color: #e5e5e5;
+          -webkit-transform: scale(1, 0.5);
+          transform: scale(1, 0.5);
+          -webkit-transform-origin: center bottom;
+          transform-origin: center bottom;
+        }
+        .item-title {
+          font-size: 28rpx;
+          color: #4a4a4a;
+          margin-bottom: 10rpx;
+          position: relative;
+          text-indent: 0.5em;
+          &::before {
+            content: "";
+            position: absolute;
+            top: 5rpx;
+            left: 0;
+            width: 6rpx;
+            height: 31rpx;
+            background-color: #3385ff;
+          }
+        }
+        .chart-title {
+          height: 72rpx;
+          padding-bottom: 10rpx;
+          text-indent: 0em;
+          &::before {
+            display: none;
+          }
+        }
+        .item-abstract {
+          font-size: 26rpx;
+          color: #6a6a6a;
+          margin-bottom: 10rpx;
+          .report_ico {
+            width: 32rpx;
+            height: 26rpx;
+            margin-right: 20rpx;
+            display: inline-block;
+          }
+        }
+        .item-createtime {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          color: #acacac;
+          font-size: 24rpx;
+          .item-examine {
+            display: flex;
+            align-items: center;
+            image {
+              width: 30rpx;
+              height: 24rpx;
+              margin: 0 10rpx 0 15rpx;
+            }
+          }
+        }
+        .chart-tag {
+          padding-top: 1rpx;
+          height: 36rpx;
+          .tag-item {
+            width: 148rpx;
+            border-radius: 28rpx;
+            border: 2rpx solid rgba(49, 137, 255, 1);
+            overflow: hidden;
+            color: #3385ff;
+            text-align: center;
+            line-height: 30rpx;
+          }
+        }
+        .chart-collect {
+          margin-top: 20rpx;
+          padding-top: 20rpx;
+          padding: 20rpx 0 0 20rpx;
+          border-top: 1rpx solid #dcdfe6;
+          display: flex;
+          align-items: center;
+          .cancel {
+            background: #3385ff;
+            margin-right: 20rpx;
+            color: #ffffff;
+          }
+          .remove {
+            border: 1px solid #3385ff;
+            color: #3385ff;
+          }
+          text {
+            width: 130rpx;
+            height: 46rpx;
+            line-height: 46rpx;
+            border-radius: 4rpx;
+            text-align: center;
+            font-size: 24rpx;
+          }
+        }
+      }
+    }
+  }
+  .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;
+    }
+  }
+  .tabs-img {
+    width: 46rpx;
+    height: 26rpx;
+  }
+  .nodata {
+    font-size: 40rpx;
+    .bind-mobile {
+      width: 244rpx;
+      height: 58rpx;
+      background: #3385ff;
+      border-radius: 8rpx;
+      font-size: 28rpx;
+      line-height: 58rpx;
+      text-align: center;
+      color: #fff;
+      margin: 50rpx auto;
+    }
+  }
+  @import "@/components/audioVideo.scss";
+}

pages/my/ces.vue

@@ -0,0 +1,173 @@
+      <view class="audio-video-content" v-if="topTabsActive == 4">
+        <view class="audio-item" v-for="item in videoAudioList" :key="item.Id">
+          <view class="cover-item" :style="{ 'background-image': 'url(' + item.BackgroundImg + ')' }">
+            <!-- type:3 -- 产业视频 -->
+            <block v-if="item.Type == 2 || item.Type == 3">
+              <image class="img-bg" @click="handelPlay(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
+            </block>
+            <block v-else>
+              <image
+                class="img-bg"
+                @click.stop="handelPlay(item)"
+                :src="
+                  curVoiceId === item.ActivityId && !curAudioPaused
+                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
+                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
+                "
+              ></image>
+            </block>
+            <text class="time">{{ item.PublishTime }}</text>
+            <view :class="['identification', item.Type != 1 && 'identification-video']"> </view>
+            <image
+              class="identification-img"
+              :src="item.Type == 1 ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/video-iocn.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/audio-icon.png'"
+            ></image>
+          </view>
+          <view class="title-share">
+            <view class="title text_twoLine">{{ item.Title }}</view>
+            <view class="share share-collected">
+              <image @click="myLeavingMessageHandler(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
+              <image  @click="isCollectionHandeler(item)" :src="item.IsCollect ?'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/not_collected.png'"></image>
+              <button class="share-icon" open-type="share" :data-item="item">
+                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="data-cont" v-else>
+        <view class="report-ul">
+          <block v-for="(report, index) in dataList" :key="index">
+            <view class="report-item" v-if="index % 2 === 0" @click="goDetail(report)">
+              <block v-if="report.HomeType === 1">
+                <view class="audio-video-content">
+                  <view class="audio-item">
+                    <view class="cover-item" :style="{ 'background-image': 'url(' + report.MicroAudio.AudioImgUrl + ')' }">
+                      <image
+                        class="img-bg"
+                        @click.stop="handelPlay(report.MicroAudio)"
+                        :src="
+                          curVoiceId === report.MicroAudio.AudioActivityId && !curAudioPaused
+                            ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
+                            : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
+                        "
+                      ></image>
+                      <text class="time">{{ report.MicroAudio.AudioPublishTime }}</text>
+                    </view>
+                    <view class="title-share">
+                      <view class="title text_twoLine">{{ report.MicroAudio.AudioTitle }}</view>
+                      <view class="share">
+                        <view class="share-text" :style="[classifyColor(report.MicroAudio.AudioChartPermissionName)]">
+                          <image :src="classifyIcon(report.MicroAudio)"></image>
+                          音频｜{{ report.MicroAudio.AudioChartPermissionName }}
+                        </view>
+                        <button class="share-icon" open-type="share" :data-item="report.MicroAudio">
+                          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
+                        </button>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </block>
+              <block v-else>
+                <view class="item-content-img" v-if="report.BodyHtml">
+                  <image :src="report.BodyHtml" mode=""></image>
+                </view>
+                <view class="item-content" v-else>{{ report.Body }}</view>
+                <view class="line"></view>
+                <text :class="['item-title', report.Source != 1 && 'chart-title text_twoLine']">{{ report.Title }}</text>
+                <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
+                  {{ report.ExpertBackground }}
+                </view>
+                <block v-if="report.Source == 1">
+                  <view class="item-createtime">
+                    <text>{{ report.PublishDate }}</text>
+                    <view class="item-examine" v-if="report.IsResearch">
+                      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
+                      <text>{{ report.Pv }}</text>
+                    </view>
+                  </view>
+                </block>
+                <block v-else>
+                  <view class="item-createtime chart-tag">
+                    <text class="tag-item" v-if="report.PtagName">{{ report.PtagName }}</text>
+                    <text class="tag-item" v-if="report.CtagName">{{ report.CtagName }}</text>
+                  </view>
+                  <view class="chart-collect" v-if="topTabsActive == 3 && secondActive == 0">
+                    <text class="cancel" @click.stop="myChartIsTop(report.ChartId)">{{ report.IsTop ? "取消置顶" : "置顶" }}</text>
+                    <text class="remove" @click.stop="myChartCollect(report.ChartId)">移除</text>
+                  </view>
+                  <view class="my-chart-collect" v-if="topTabsActive == 3 && secondActive == 0 && report.IsTop"></view>
+                </block>
+              </block>
+            </view>
+          </block>
+        </view>
+        <view class="report-ul">
+          <block v-for="(report, index) in dataList" :key="index">
+            <view class="report-item" v-if="index % 2 !== 0" @click="goDetail(report)">
+              <block v-if="report.HomeType === 1">
+                <view class="audio-video-content">
+                  <view class="audio-item">
+                    <view class="cover-item" :style="{ 'background-image': 'url(' + report.MicroAudio.AudioImgUrl + ')' }">
+                      <image
+                        class="img-bg"
+                        @click.stop="handelPlay(report.MicroAudio)"
+                        :src="
+                          curVoiceId === report.MicroAudio.AudioActivityId && !curAudioPaused
+                            ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
+                            : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
+                        "
+                      ></image>
+                      <text class="time">{{ report.MicroAudio.AudioPublishTime }}</text>
+                    </view>
+                    <view class="title-share">
+                      <view class="title text_twoLine">{{ report.MicroAudio.AudioTitle }}</view>
+                      <view class="share">
+                        <view class="share-text" :style="[classifyColor(report.MicroAudio.AudioChartPermissionName)]">
+                          <image :src="classifyIcon(report.MicroAudio)"></image>
+                          音频｜{{ report.MicroAudio.AudioChartPermissionName }}
+                        </view>
+                        <button class="share-icon" open-type="share" :data-item="report">
+                          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/share-btn-icon.png"></image>
+                        </button>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </block>
+              <block v-else>
+                <view class="item-content-img" v-if="report.BodyHtml">
+                  <image :src="report.BodyHtml"></image>
+                </view>
+                <view class="item-content" v-else>{{ report.Body }}</view>
+                <view class="line"></view>
+                <text :class="['item-title', report.Source != 1 && 'chart-title text_twoLine']">{{ report.Title }}</text>
+                <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
+                  {{ report.ExpertBackground }}
+                </view>
+                <block v-if="report.Source == 1">
+                  <view class="item-createtime">
+                    <text>{{ report.PublishDate }}</text>
+                    <view class="item-examine" v-if="report.IsResearch">
+                      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
+                      <text>{{ report.Pv }}</text>
+                    </view>
+                  </view>
+                </block>
+                <block v-else>
+                  <view class="item-createtime chart-tag">
+                    <text class="tag-item" v-if="report.PtagName">{{ report.PtagName }}</text>
+                    <text class="tag-item" v-if="report.CtagName">{{ report.CtagName }}</text>
+                  </view>
+                  <view class="chart-collect" v-if="topTabsActive == 3 && secondActive == 0">
+                    <text class="cancel" @click.stop="myChartIsTop(report.ChartId)">{{ report.IsTop ? "取消置顶" : "置顶" }}</text>
+                    <text class="remove" @click.stop="myChartCollect(report.ChartId)">移除</text>
+                  </view>
+                  <view class="my-chart-collect" v-if="topTabsActive == 3 && secondActive == 0 && report.IsTop"></view>
+                </block>
+              </block>
+            </view>
+          </block>
+        </view>
+      </view>

pages/purchaser/purchaser.vue

@@ -343,7 +343,7 @@ export default {
     height: 63rpx;
     font-size: 30rpx;
     color: #8d8d8d;
-    background-color: #f6f6f6;
+    background-color: #f3f3f3;
     padding-left: 33rpx;
     border-radius: 70rpx;
     // border: 1rpx solid #e5e5e5;

pages/reportForm/reportForm.vue

@@ -602,7 +602,7 @@ export default {
         height: 100%;
         font-size: 30rpx;
         color: #8d8d8d;
-        background-color: #f6f6f6;
+        background-color: #f3f3f3;
         padding-left: 33rpx;
         border-radius: 70rpx;
         // border: 1rpx solid #e5e5e5;