9.5 init

components/search-bar/searchBar.vue

@@ -0,0 +1,76 @@
+<template>
+ 
+    <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
+      <slot name="content-left"> </slot>
+      <view class="search-box" @click="goSearch" :style="{ width: `${width}%` }">
+        <icon type="search" size="15" class="search_ico" />
+        <text class="sea_ipt">{{ searchTitle || "" }}</text>
+      </view>
+       <slot name="content-right"> </slot>
+    </view>
+</template>
+
+<script>
+export default {
+  props: {
+    searchTitle: {
+      type: String,
+      requer: true,
+      default: "",
+    },
+    width: {
+      type: Number,
+      requer: true,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      navBarStyle: {
+        height: 60 + "px",
+        paddingTop: 40 + "px",
+        paddingBottom: "4px",
+      },
+    };
+  },
+  mounted() {
+    this.initNavBar();
+  },
+  methods: {
+    initNavBar() {
+      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      this.navBarStyle = {
+        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
+        paddingTop: menuButtonInfo.top - 4 + "px",
+        paddingBottom: "4px",
+      };
+    },
+    goSearch() {
+      this.$emit("goSearch");
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.nav-bar-wrap {
+  background-color: #fff;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .search-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 55%;
+    height: 63rpx;
+    font-size: 30rpx;
+    color: #8d8d8d;
+    background-color: #f3f3f3;
+    padding-left: 33rpx;
+    border-radius: 70rpx;
+    .sea_ipt {
+      padding-left: 15rpx;
+    }
+  }
+}
+</style>

config/api.js

@@ -5,8 +5,9 @@ import { activity } from "./modules/activity";
 import { Home } from "./modules/Home";
 import { User } from "./modules/User";
 import { Report } from "./modules/ReportArticle";
+import { Research } from "./modules/Research";
 
-export { Reports, activity, Home, User, Report };
+export { Reports, activity, Home, User, Report, Research };
 
 /* 上传 */
 export const uploadurl = baseUrl + "/resource/image/upload";
@@ -81,38 +82,6 @@ export const Chart = {
   },
 };
 
-/* 研选 */
-export const Research = {
-  /* 近期更新主题列表接口 */
-  researchNewList: (params) => {
-    return getHttp("/research/theme/newList", params, 0);
-  },
-  /* 用户收藏列表接口 */
-  researchCollectionList: (params) => {
-    return getHttp("/research/collectionList", params, 0);
-  },
-  /* 主题热度/近期更新更多,列表接口 */
-  researchHotList: (params) => {
-    return getHttp("/research/hotList", params, 0);
-  },
-  /* KOL榜列表接口 */
-  researchKolList: (params) => {
-    return getHttp("/research/kolList", params, 0);
-  },
-  /* 研选作者详情接口 */
-  departmentIdDetail: (params) => {
-    return getHttp("/research/departmentId/detail", params, 0);
-  },
-  /* 研选作者详情接口 */
-  researchThemeDetail: (params) => {
-    return getHttp("/research/theme/detail", params, 0);
-  },
-  /* 热搜关键词接口 */
-  researchHotKeyWord: (params) => {
-    return getHttp("/research/hotKeyWord", params, 0);
-  },
-};
-
 /* 免费送月卡 */
 export const FreeButton = {
   /*获取是否展示免费试用按钮接口*/

config/modules/Research.js

@@ -0,0 +1,41 @@
+import { getHttp, postHttp } from "../request.js";
+
+/* 研选 */
+export const Research = {
+  /* 近期更新主题列表接口 */
+  researchNewList: (params) => {
+    return getHttp("/research/theme/newList", params, 0);
+  },
+  /* 用户收藏列表接口 */
+  researchCollectionList: (params) => {
+    return getHttp("/research/collectionList", params, 0);
+  },
+  /* 主题热度/近期更新更多,列表接口 */
+  researchHotList: (params) => {
+    return getHttp("/research/hotList", params, 0);
+  },
+  /* KOL榜列表接口 */
+  researchKolList: (params) => {
+    return getHttp("/research/kolList", params, 0);
+  },
+  /* 研选作者详情接口 */
+  departmentIdDetail: (params) => {
+    return getHttp("/research/departmentId/detail", params, 0);
+  },
+  /* 研选作者详情接口 */
+  researchThemeDetail: (params) => {
+    return getHttp("/research/theme/detail", params, 0);
+  },
+  /* 热搜关键词接口 */
+  researchHotKeyWord: (params) => {
+    return getHttp("/research/hotKeyWord", params, 0);
+  },
+  /* 研选文章类型列表 */
+  researchArticleTypeList: (params) => {
+    return getHttp("/research/article/typeList", params, 0);
+  },
+  /* 研选最新报告列表 */
+  researchArticleNewList: (params) => {
+    return getHttp("/research/article/newList", params, 0);
+  },
+};

pages-purchaser/components/cssAuthorTheme.scss

@@ -0,0 +1,231 @@
+.tab-bar-ul {
+    position: sticky;
+    top: 0;
+    left: 0;
+    height: 111rpx;
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 20rpx;
+    background-color: #fff;
+    border-bottom: 2rpx solid #f6f6f6;
+
+    .item-content {
+        display: flex;
+        height: 51rpx;
+        background: #f8f8fa;
+        width: 260rpx;
+        font-size: 24rpx;
+        border-radius: 64rpx;
+        color: #999999;
+    }
+
+    .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 130rpx;
+        height: 51rpx;
+        border-radius: 47rpx;
+    }
+
+    .item-act {
+        background-color: #3385ff;
+        color: #fff;
+        font-weight: 500;
+    }
+}
+
+.content-ul {
+    padding: 0 30rpx;
+
+    .user-li,
+    .hot-li,
+    .kol-li {
+        padding: 30rpx 0 20rpx;
+        border-bottom: 1px solid #f6f6f6;
+    }
+
+    .user-img {
+        width: 38%;
+        justify-content: space-between;
+
+        .img-box {
+            display: flex;
+            align-items: center;
+        }
+
+        .user-pv {
+            width: 21rpx;
+            height: 16rpx;
+        }
+    }
+
+    .kol-li {
+        display: flex;
+        align-items: center;
+        padding-bottom: 30rpx;
+
+        image {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 8rpx;
+            margin: 0 20rpx 0 15rpx;
+            overflow: hidden;
+            flex-shrink: 0;
+        }
+    }
+
+    .kol-item {
+        display: flex;
+        flex-wrap: wrap;
+        width: 480rpx;
+        height: 120rpx;
+        align-items: baseline;
+        margin-bottom: 20rpx;
+
+        .item-top {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 29rpx;
+            font-weight: 700;
+        }
+
+        .kol-text {
+            width: 50%;
+            margin-top: 10rpx;
+            flex-shrink: 0;
+        }
+    }
+
+    .li-serial {
+        width: 26rpx;
+        height: 26rpx;
+        line-height: 26rpx;
+        color: #fff;
+        font-size: 20rpx;
+        text-align: center;
+        border-radius: 4rpx 4rpx 4rpx 4rpx;
+        margin: 7rpx 10rpx 0 20rpx;
+        flex-shrink: 0;
+    }
+
+    .li-type {
+        padding: 0 15rpx;
+        height: 29rpx;
+        margin-top: 6rpx;
+        display: flex;
+        align-items: center;
+        border-radius: 4rpx;
+        color: #fff;
+        font-size: 24rpx;
+        flex-wrap: 500;
+        background: linear-gradient(90deg, #fecd18 0%, #ffdc5b 100%);
+    }
+
+    .serial-number {
+        margin-top: 0 !important;
+    }
+
+    .li-item {
+        display: flex;
+
+        .title {
+            font-size: 28rpx;
+            line-height: 39rpx;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .li-industry {
+            color: #3385ff;
+            margin-left: 20rpx;
+            display: inline-block;
+            font-weight: 400;
+        }
+
+        .time-user {
+            display: flex;
+            align-items: center;
+            font-size: 24rpx;
+        }
+
+        .li-user {
+            display: flex;
+            align-items: center;
+            flex-shrink: 0;
+            width: 170rpx;
+            margin-left: 75rpx;
+        }
+
+        .li-title {
+            display: flex;
+        }
+    }
+
+    .li-bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 30rpx;
+        width: 100%;
+
+        image {
+            width: 23rpx;
+            height: 26rpx;
+            margin-right: 10rpx;
+        }
+    }
+
+    .read-more {
+        margin-left: 30rpx;
+        margin-top: 20rpx;
+        display: flex;
+        flex-wrap: wrap;
+
+        .text-box {
+            margin-bottom: 27rpx;
+            margin-right: 40rpx;
+            padding: 0;
+            font-size: 24rpx;
+            color: #408fff;
+            width: 170rpx;
+            height: 46rpx;
+            line-height: 46rpx;
+            text-align: center !important;
+            background: url(~@/static/img/report_bg.png) no-repeat;
+            background-size: 100% 100%;
+            text-indent: 0em;
+        }
+    }
+
+    .attention {
+        flex-shrink: 0;
+        padding: 5rpx 28rpx;
+        border-radius: 37rpx 37rpx 37rpx 37rpx;
+        color: #fff;
+        background: #3385ff;
+        font-weight: 400;
+        font-size: 24rpx;
+    }
+
+    .hot-item {
+        justify-content: space-between;
+        align-items: center;
+
+        .hot-new {
+            align-items: center;
+            flex: 1;
+            padding-right: 20rpx;
+        }
+
+        .new-img {
+            width: 60rpx;
+            height: 30rpx;
+            margin-left: 15rpx;
+            flex-shrink: 0;
+        }
+    }
+}

pages-purchaser/components/mixinsAuthorTheme.js

@@ -0,0 +1,82 @@
+import { Reports, Research, Report } from "@/config/api.js";
+export default {
+  data() {
+    return {
+      confirmText: "知道了",
+      accounts: "",
+      isCancelBtn: false,
+      goFollowShow: false,
+      tabBarActive: 1,
+      dataList: [],
+      status: "loadmore",
+      loadText: {
+        loadmore: "上拉加载更多",
+        loading: "加载中",
+        nomore: "已经到底了",
+      },
+      page_no: 1,
+      pageSize: 10,
+      refresh: false, //正在下拉
+    };
+  },
+  methods: {
+    // tab bar 切换
+    tabBarSwitchHandel(item) {
+      this.tabBarActive = item.value;
+    },
+    //去往主题详情
+    themeDetails(item, source) {
+      this.$store.dispatch("checkHandle", "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId + "&pageRouter=" + source);
+    },
+    //关注
+    async isAttention(item, val) {
+      const res =
+        val === "主题"
+          ? await Reports.reportFllow({ IndustrialManagementId: item.IndustrialManagementId, PageRouter: this.$store.state.pageRouterReport })
+          : await Reports.reportFllowDepartment({ DepartmentId: item.DepartmentId, PageRouter: this.$store.state.pageRouterReport });
+      if (res.Ret === 200) {
+        item.IsFollw = !item.IsFollw;
+        if (res.Data.Status == 1) {
+          this.goFollowShow = true;
+          this.confirmText = res.Data.GoFollow ? "去关注" : "知道了";
+          if (res.Data.GoFollow) {
+            this.accounts = `${val == "主题" ? "产业" : "作者"}关注成功 <br> 想要及时获取该${val === "主题" ? "产业内容的更新推送" : "作者的报告更新提示"}，请关注【查研观向小助手】公众号`;
+            this.isCancelBtn = true;
+          } else {
+            this.accounts = `${val == "主题" ? "产业" : "作者"}` + `关注成功<br>请关注【查研观向小助手】公众号，及时获取${val === "主题" ? "产业" : "作者"}报告更新提醒`;
+          }
+        } else {
+          uni.showToast({
+            title: "已取消关注",
+            icon: "none",
+            duration: 2000,
+          });
+        }
+      }
+    },
+    //去关注
+    goFollowShowBtn() {
+      if (this.confirmText == "去关注") {
+        uni.navigateTo({
+          url: "/activityPages/accountsOfficial/accountsOfficial",
+        });
+      }
+      this.goFollowShow = false;
+    },
+  },
+  onLoad() {
+    this.getDataList();
+  },
+  onReachBottom() {
+    if (this.status === "nomore") return;
+    this.status = "loading";
+    this.page_no++;
+    this.getDataList();
+  },
+  onPullDownRefresh() {
+    this.refresh = true;
+    this.dataList = [];
+    this.page_no = 1;
+    this.getDataList();
+  },
+};

pages-purchaser/researchAuthor/researchAuthor.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="container theme-hot-content">
+    <view class="tab-bar-ul">
+      <view class="item-content">
+        <view @click="tabBarSwitchHandel(item)" :class="['item', tabBarActive === item.value && 'item-act']" v-for="item in tabBarList" :key="item.value">{{ item.name }}</view>
+      </view>
+    </view>
+    <view class="content-ul">
+      <view class="kol-li" v-for="item in dataList" :key="item.DepartmentId">
+        <image @click="authorDetails(item)" :src="item.ImgUrl" v-if="item.ImgUrl"></image>
+        <view class="li-item kol-item">
+          <view class="item-top">
+            <text @click="authorDetails(item)">
+              {{ item.NickName }}
+            </text>
+            <text :class="item.IsFollw ? 'cancel-attention' : 'attention'" @click="isAttention(item, '专家')">{{ item.IsFollw ? "取消关注" : "+ 关注" }}</text>
+          </view>
+          <text @click="themeDetails(val, 'KOL榜')" class="kol-text text_oneLine" v-for="val in item.List" :key="val.IndustrialManagementId"> # {{ val.IndustryName }} </text>
+        </view>
+      </view>
+    </view>
+    <u-loadmore :status="status" :load-text="loadText" v-if="page_no > 1" />
+    <u-modal
+      v-model="goFollowShow"
+      :content-style="{ fontSize: '32rpx' }"
+      @confirm="goFollowShowBtn"
+      :show-cancel-button="isCancelBtn"
+      :confirm-text="confirmText"
+      @cancel="isCancelBtn = false"
+      :show-title="false"
+      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
+      :confirm-style="{ fontWeight: '700' }"
+    >
+      <view class="slot-content">
+        <rich-text :nodes="accounts"></rich-text>
+      </view>
+    </u-modal>
+  </view>
+</template>
+
+<script>
+import { Reports, Research, Report } from "@/config/api.js";
+import mixinsAuthorTheme from "../components/mixinsAuthorTheme";
+export default {
+  data() {
+    return {
+      tabBarList: [
+        {
+          name: "更新时间",
+          value: 1,
+        },
+        {
+          name: "关注度",
+          value: 2,
+        },
+      ],
+    };
+  },
+  mixins: [mixinsAuthorTheme],
+  methods: {
+    // tab bar 切换
+    tabBarSwitchHandel(item) {
+      this.tabBarActive = item.value;
+    },
+    //主题热度/近期更新更多
+    async getDataList() {
+      const res = await Research.researchKolList({ ChartPermissionId: 31 });
+      if (res.Ret === 200) {
+        // this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
+        if (this.refresh) {
+          uni.stopPullDownRefresh();
+          this.refresh = false;
+        }
+        this.dataList = this.page_no === 1 ? res.Data.List || [] : [...this.dataList, ...res.Data.List];
+      }
+    },
+        //去往作者详情
+    authorDetails(item) {
+      uni.navigateTo({
+        url: "/reportPages/authorPages/authorPages?id=" + item.DepartmentId,
+      });
+    },
+  },
+  onLoad() {
+    this.getDataList();
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.theme-hot-content {
+  @import "../components/cssAuthorTheme.scss";
+}
+</style>

pages-purchaser/researchTheme/researchTheme.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="container theme-hot-content">
+    <view class="tab-bar-ul">
+      <view class="item-content">
+        <view @click="tabBarSwitchHandel(item)" :class="['item', tabBarActive === item.value && 'item-act']" v-for="item in tabBarList" :key="item.value">{{ item.name }}</view>
+      </view>
+    </view>
+    <view class="content-ul">
+      <view class="hot-li" v-for="item in dataList" :key="item.IndustrialManagementId">
+        <view class="li-item hot-item">
+          <view style="display: flex" class="text_oneLine hot-new" @click="themeDetails(item, '主题热度榜')">
+            <text class="text_oneLine title" style="display: inline"> # {{ item.IndustryName }} </text>
+            <image class="new-img" v-if="item.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png"></image>
+          </view>
+          <text :class="item.IsFollw ? 'cancel-attention' : 'attention'" @click="isAttention(item, '主题')">{{ item.IsFollw ? "取消关注" : "+ 关注" }}</text>
+        </view>
+        <view class="li-item read-more" @click="themeDetails(item, '主题热度榜')">
+          <text class="text-box text_oneLine" v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId">
+            {{ val.SubjectName }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <u-loadmore :status="status" :load-text="loadText" v-if="page_no > 1" />
+    <u-modal
+      v-model="goFollowShow"
+      :content-style="{ fontSize: '32rpx' }"
+      @confirm="goFollowShowBtn"
+      :show-cancel-button="isCancelBtn"
+      :confirm-text="confirmText"
+      @cancel="isCancelBtn = false"
+      :show-title="false"
+      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
+      :confirm-style="{ fontWeight: '700' }"
+    >
+      <view class="slot-content">
+        <rich-text :nodes="accounts"></rich-text>
+      </view>
+    </u-modal>
+  </view>
+</template>
+
+<script>
+import { Reports, Research, Report } from "@/config/api.js";
+import mixinsAuthorTheme from "../components/mixinsAuthorTheme";
+export default {
+  data() {
+    return {
+      tabBarList: [
+        {
+          name: "更新时间",
+          value: 1,
+        },
+        {
+          name: "主题热度",
+          value: 2,
+        },
+      ],
+    };
+  },
+  watch: {
+   page_no:{
+    handler(val){
+      console.log(val);
+    }
+   }
+  },
+  mixins: [mixinsAuthorTheme],
+  methods: {
+    // tab bar 切换
+    tabBarSwitchHandel(item) {
+      this.tabBarActive = item.value;
+    },
+    //主题热度/近期更新更多
+    async getDataList() {
+      const res = await Research.researchHotList({ ChartPermissionId: 31, ThemeType: 1 });
+      if (res.Ret === 200) {
+        this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
+        if (this.refresh) {
+          uni.stopPullDownRefresh();
+          this.refresh = false;
+        }
+        this.dataList = this.page_no === 1 ? res.Data.List || [] : [...this.dataList, ...res.Data.List];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+.theme-hot-content {
+  @import "../components/cssAuthorTheme.scss";
+}
+</style>

pages.json

@@ -29,7 +29,7 @@
       "path": "pages/purchaser/purchaser",
       "style": {
         "navigationBarTitleText": "买方研选",
-        "enablePullDownRefresh": true,
+        "enablePullDownRefresh": false,
         "navigationStyle": "custom"
       }
     },
@@ -48,7 +48,7 @@
         "enablePullDownRefresh": false
       }
     }
-    ],
+  ],
   "subPackages": [
     {
       "root": "activityPages",
@@ -351,6 +351,25 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages-purchaser",
+      "pages": [
+        {
+          "path": "researchTheme/researchTheme",
+          "style": {
+            "navigationBarTitleText": "研选主题",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "researchAuthor/researchAuthor",
+          "style": {
+            "navigationBarTitleText": "研选作者",
+            "enablePullDownRefresh": false
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {

pages/activity/activity.vue

@@ -1,18 +1,16 @@
 <template>
   <view class="container activity-content">
     <view class="top-content-box">
-      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
-        <view class="content">
-          <view class="activity-back" @click="activityPlayBack">
-            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/at_back.png"></image>
-            活动回放
-          </view>
-          <view class="activity-search" @click="goSearch">
-            <icon type="search" size="15" class="search_ico" style="margin-right: 10rpx" />
-            {{ searchPlaceholderList.ActivitySearch || "" }}
+      <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="46">
+        <template slot="content-left">
+          <view class="content">
+            <view class="activity-back" @click="activityPlayBack">
+              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/at_back.png"></image>
+              活动回放
+            </view>
           </view>
-        </view>
-      </view>
+        </template>
+      </search-bar>
       <view class="screen-item">
         <text :class="isShowJurisdiction ? 'active' : ''" @click="permissioActivity">有权限行业</text>
         <!-- 各种状态选择 -->
@@ -93,11 +91,13 @@
 <script>
 import { activity } from "@/config/api.js";
 import { Throttle } from "@/config/util.js";
+import SearchBar from "@/components/search-bar/searchBar.vue";
 import freeCharge from "@/components/freeCharge";
 let app = getApp();
 export default {
   components: {
     freeCharge,
+    SearchBar,
   },
   data() {
     return {
@@ -128,16 +128,6 @@ export default {
     },
   },
   methods: {
-    //获取胶囊位置
-    initNavBar() {
-      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-      this.navBarStyle = {
-        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
-        paddingTop: menuButtonInfo.top - 4 + "px",
-        paddingBottom: "4px",
-      };
-    },
-
     // 获取权限、所有的行业
     async getUserSearchContent() {
       const res = await activity.getUserSearchContent({
@@ -330,7 +320,6 @@ export default {
     this.loadShare(option);
     this.getUserSearchContent();
     this.getActivityLabelTypeList();
-    this.initNavBar();
   },
   async onShow() {
     this.$store.commit("setRouterReport", "活动");
@@ -368,14 +357,13 @@ export default {
     width: 100%;
     z-index: 99;
     background-color: #fff;
-    .nav-bar-wrap {
-      background-color: #fff;
-      width: 100%;
+    /deep/ .nav-bar-wrap {
       .content {
         height: 100%;
         display: flex;
         align-items: center;
         padding-left: 30rpx;
+        margin-right: 20rpx;
         .activity-back {
           display: flex;
           flex-shrink: 0;
@@ -388,18 +376,6 @@ export default {
             margin-right: 10rpx;
           }
         }
-        .activity-search {
-          margin-left: 20rpx;
-          width: 46%;
-          height: 62rpx;
-          color: #8d8d8d;
-          font-size: 30rpx;
-          display: flex;
-          align-items: center;
-          padding-left: 20rpx;
-          background: #f3f3f3;
-          border-radius: 82rpx;
-        }
       }
     }
   }

pages/index/index.vue

@@ -1,16 +1,14 @@
 <template>
   <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" @click="goMyInfo">
-          <image v-if="info.Headimgurl" :src="info.Headimgurl" alt=""></image>
-          <image v-else 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>
+      <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="55">
+        <template slot="content-left">
+          <view class="box-img" @click="goMyInfo">
+            <image v-if="info.Headimgurl" :src="info.Headimgurl" alt=""></image>
+            <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/logo.png" class="avatar"></image>
+          </view>
+        </template>
+      </search-bar>
     </view>
     <view class="content-ul">
       <view class="item-ul">
@@ -59,6 +57,7 @@ import ReportItem from "@/components/ItemComponent/reportItem.vue";
 import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
 import suspenButton from "@/components/suspen_button.vue";
 import ActivityItem from "@/components/ItemComponent/activityItem.vue";
+import SearchBar from "@/components/search-bar/searchBar.vue";
 export default {
   data() {
     return {
@@ -81,17 +80,9 @@ export default {
     RoadshowItem,
     ActivityItem,
     suspenButton,
+    SearchBar,
   },
   methods: {
-    //获取胶囊位置
-    initNavBar() {
-      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-      this.navBarStyle = {
-        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
-        paddingTop: menuButtonInfo.top - 4 + "px",
-        paddingBottom: "4px",
-      };
-    },
     // 获取最先数据
     async getNewList() {
       const res = await Home.getNewList({
@@ -163,7 +154,6 @@ export default {
     });
   },
   onLoad() {
-    this.initNavBar();
     this.getNewList();
   },
   onShow() {
@@ -223,27 +213,8 @@ export default {
     width: 100%;
     z-index: 9;
   }
-  .nav-bar-wrap {
-    background-color: #fff;
-    width: 100%;
+  /deep/ .nav-bar-wrap {
     padding-left: 35rpx;
-    display: flex;
-    align-items: center;
-    .content {
-      position: relative;
-      display: flex;
-      align-items: center;
-      width: 55%;
-      height: 63rpx;
-      font-size: 30rpx;
-      color: #8d8d8d;
-      background-color: #f3f3f3;
-      padding-left: 33rpx;
-      border-radius: 70rpx;
-      .sea_ipt {
-        padding-left: 15rpx;
-      }
-    }
     .box-img {
       display: flex;
       align-items: center;

pages/material/material.vue

@@ -1,12 +1,7 @@
 <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>
+      <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="70" />
       <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)">
@@ -88,6 +83,7 @@
 import { Home, Reports, Chart, activity } from "@/config/api.js";
 import { Throttle, deepCopy } from "@/config/util.js";
 import freeCharge from "@/components/freeCharge";
+import SearchBar from "@/components/search-bar/searchBar.vue";
 
 import ChartItem from "@/components/ItemComponent/chartItem.vue";
 import ReportItem from "@/components/ItemComponent/reportItem.vue";
@@ -135,6 +131,7 @@ export default {
     ChartItem,
     ReportItem,
     RoadshowItem,
+    SearchBar,
   },
   watch: {},
   onLoad(optios) {
@@ -157,7 +154,6 @@ export default {
       this.activityShareId = optios.activityId;
     }
     this.getTabs();
-    this.initNavBar();
     this.getReportList();
     this.$store.dispatch("checkHandle", "noGO");
   },
@@ -189,15 +185,6 @@ export default {
     },
   },
   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;
@@ -454,7 +441,7 @@ export default {
       const res = await Home.microRoadshowCollect({
         Id: item.Id,
         SourceType: item.Type,
-        PageRouter: this.$store.state.pageRouterReport
+        PageRouter: this.$store.state.pageRouterReport,
       });
       if (res.Ret === 200) {
         let index = this.roadshowPageList.findIndex((key) => key.Id == item.Id);
@@ -577,26 +564,7 @@ export default {
     }
   }
   .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;
-      .sea_ipt {
-        padding-left: 15rpx;
-      }
-    }
   }
   .tabs-content {
     padding: 0 30rpx;

pages/purchaser/components/Tabs.js

@@ -0,0 +1,20 @@
+export const ResearchTabBars = [
+  { titel: "月度收藏榜", name: "用户" },
+  { titel: "主题热度榜", name: "主题" },
+  { titel: "KOL榜", name: "专家" },
+];
+
+export const TabBars = [
+  { titel: "最新报告", name: "报告", val: 1 },
+  { titel: "研选榜单", name: "榜单", val: 2 },
+];
+export const CheckboxGroup = [
+  { name: "纪要", val: 10 },
+  { name: "观点", val: 11 },
+  { name: "沙龙", val: 12 },
+  { name: "报告", val: 13 },
+  { name: "榜单", val: 2 },
+  { name: "榜单1", val: 20 },
+  { name: "榜单2", val: 21 },
+  { name: "榜单3", val: 22 },
+];

pages/purchaser/purchaser.vue

@@ -1,9 +1,12 @@
 <template>
   <view class="container resear-container">
-    <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.YanXuanSearch || "" }}</text>
+    <view class="top-content-box">
+      <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="70" />
+      <view class="content-tabs">
+        <view v-for="item in TabBars" :key="item.val" :class="['item', item.val == topTabsActive && 'tabs-active']" @click="topTabsClickHandler(item)">
+          {{ item.titel }}
+          <view class="active" v-if="item.val == topTabsActive"></view>
+        </view>
       </view>
     </view>
     <view class="notice-content" v-if="wholeShowListData.YanXuan_Explain">
@@ -14,25 +17,10 @@
         </view>
       </view>
     </view>
-    <view class="theme">
-      <view class="theme-top">
-        <text class="title"> 近期更新主题： </text>
-        <view class="" @click="goRecent">
-          更多
-          <u-icon name="arrow-right" color="#BDBDBD" size="28"></u-icon>
-        </view>
-      </view>
-      <view class="theme-content">
-        <view class="theme-ul" v-for="item in themeNewList" :key="item.IndustrialManagementId">
-          <text class="text_oneLine" @click="themeDetails(item, '近期主题更新')"> # {{ item.IndustryName }}</text>
-          <image v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/hot_report.png"></image>
-        </view>
-      </view>
-    </view>
     <view class="announcement">
-      <view class="tab-cont">
+      <view class="tab-cont" v-if="topTabsActive == 2">
         <scroll-view scroll-x="true" @scroll="scrollMove" :scroll-left="scrollLeft" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
-          <block v-for="(item, index) in tabBars" :key="index">
+          <block v-for="(item, index) in researchTabBars" :key="index">
             <view class="scroll-tab-item" :class="{ active: tagActive == item.name }" @click.stop="typeChange(item)">
               {{ item.titel }}
               <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tagActive == item.name"></image>
@@ -40,46 +28,71 @@
           </block>
         </scroll-view>
       </view>
-      <view class="content-ul" v-if="collectionList.length && tagActive == '用户'">
-        <view class="user-li" v-for="(item, index) in collectionList" :key="item.ArticleId">
-          <view class="li-item">
-            <text class="li-serial" :style="{ background: serialBackground(index) }">
-              {{ index + 1 }}
-            </text>
-            <view>
-              <text @click="goDetail(item)" style="display: inline">{{ item.Title }}</text>
-              <text class="li-industry" @click="themeDetails(item, '月度收藏榜')"> # {{ item.IndustryName }} </text>
-            </view>
-          </view>
-          <view class="li-item li-bottom" style="color: #999999">
-            <view class="li-user text_oneLine" @click="authorDetails(item)">
-              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/user_report.png"></image>
-              {{ item.NickName }}
+      <blok v-else>
+        <van-checkbox-group class="checkbox-ui" :value="newCheckboxValue" @change="checkboxChange">
+          <van-checkbox style="margin-right: 30rpx; flex-shrink: 0" shape="square" icon-size="14" :name="item.ArticleTypeId" v-for="item in checkboxGroup" :key="item.ArticleTypeId">{{
+            item.ArticleTypeName
+          }}</van-checkbox>
+        </van-checkbox-group>
+      </blok>
+      <view class="content-ul" v-if="tagActive == '用户' || topTabsActive == 1">
+        <blok v-if="haveData">
+          <view class="user-li" v-for="(item, index) in collectionList" :key="item.ArticleId">
+            <view class="li-item">
+              <text class="li-serial" :style="{ background: serialBackground(index) }" v-if="topTabsActive == 2">
+                {{ index + 1 }}
+              </text>
+              <text class="li-type" :style="{ background: item.ButtonStyle }" v-else>
+                {{ item.ArticleTypeName }}
+              </text>
+              <view>
+                <text class="title" @click="goDetail(item)" :style="{ display: 'inline', marginLeft: item.Title.substr(0, 1) != '【' ? '14rpx' : 0 }">{{ item.Title }}</text>
+                <text v-if="topTabsActive == 2" class="li-industry" @click="themeDetails(item, '月度收藏榜')"> # {{ item.IndustryName }} </text>
+                <text v-else class="li-industry" @click="themeDetails(key, '月度收藏榜')" v-for="key in item.List" :key="key.IndustrialManagementId"> # {{ key.IndustryName }} </text>
+              </view>
             </view>
-            <view class="li-item user-img">
-              <view class="img-box">
-                <image class="user-pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
+            <view class="li-item li-bottom" style="color: #999999">
+              <viwe class="time-user">
                 <text>
-                  {{ item.Pv }}
+                  {{ item.PublishDate }}
                 </text>
-              </view>
-              <view class="img-box" @click="collectClick(item)">
-                <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image>
-                <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png"></image>
-                <text class=""> {{ item.CollectNum }}人收藏 </text>
+                <view class="li-user text_oneLine" @click="authorDetails(item)">
+                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/user_report.png"></image>
+                  {{ item.NickName }}
+                </view>
+              </viwe>
+
+              <view class="li-item user-img">
+                <view class="img-box">
+                  <image class="user-pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
+                  <text>
+                    {{ item.Pv }}
+                  </text>
+                </view>
+                <view class="img-box" @click="collectClick(item)">
+                  <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image>
+                  <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png"></image>
+                  <text class=""> {{ item.CollectNum }}人收藏 </text>
+                </view>
               </view>
             </view>
           </view>
+        </blok>
+        <!-- <view class="content-bottom" v-if="topTabsActive == 2">最新榜单您已掌握，明天再刷刷看~</view> -->
+        <view class="nodata" v-else>
+          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
+          <text>暂无活动</text>
         </view>
       </view>
-      <view class="content-ul" v-if="hotList.length && tagActive == '主题'">
+
+      <view class="content-ul" v-if="topTabsActive == 2 && hotList.length && tagActive == '主题'">
         <view class="hot-li" v-for="(item, index) in hotList" :key="item.IndustrialManagementId">
           <view class="li-item hot-item">
             <view style="display: flex" class="text_oneLine hot-new" @click="themeDetails(item, '主题热度榜')">
               <text class="li-serial serial-number" :style="{ background: serialBackground(index) }">
                 {{ index + 1 }}
               </text>
-              <text class="text_oneLine" style="display: inline"> # {{ item.IndustryName }} </text>
+              <text class="text_oneLine title" style="display: inline"> # {{ item.IndustryName }} </text>
               <image class="new-img" v-if="item.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png"></image>
             </view>
             <text :class="item.IsFollw ? 'cancel-attention' : 'attention'" @click="isAttention(item, '主题')">{{ item.IsFollw ? "取消关注" : "+ 关注" }}</text>
@@ -90,8 +103,9 @@
             </text>
           </view>
         </view>
+        <view class="content-button" @click="goThemeAuthor('主题')">查看全部主题>></view>
       </view>
-      <view class="content-ul" v-if="kolList.length && tagActive == '专家'">
+      <view class="content-ul" v-if="topTabsActive == 2 && kolList.length && tagActive == '专家'">
         <view class="kol-li" v-for="(item, index) in kolList" :key="item.DepartmentId">
           <text class="li-serial serial-number" :style="{ background: serialBackground(index) }">
             {{ index + 1 }}
@@ -107,9 +121,10 @@
             <text @click="themeDetails(val, 'KOL榜')" class="kol-text text_oneLine" v-for="val in item.List" :key="val.IndustrialManagementId"> # {{ val.IndustryName }} </text>
           </view>
         </view>
+        <view class="content-button" @click="goThemeAuthor('作者')">查看全部作者>></view>
       </view>
+      <u-loadmore :status="status" :load-text="loadText" v-if="page_no > 1" />
     </view>
-    <view class="content-bottom">最新榜单您已掌握，明天再刷刷看~</view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
     <u-modal
       v-model="goFollowShow"
@@ -132,25 +147,33 @@
 <script>
 import { Reports, Research, Report } from "@/config/api.js";
 import freeCharge from "@/components/freeCharge";
-import { Throttle } from "@/config/util.js";
+import SearchBar from "@/components/search-bar/searchBar.vue";
+import { ResearchTabBars, TabBars, CheckboxGroup } from "./components/Tabs";
 export default {
-  components: { freeCharge },
+  components: { freeCharge, SearchBar },
   data() {
     return {
-      themeNewList: [],
+      // themeNewList: [],
+      topTabsActive: 1,
       tagActive: "用户",
       collectionList: [], //用户收藏
       hotList: [],
       kolList: [],
-      tabBars: [
-        { titel: "月度收藏榜", name: "用户" },
-        { titel: "主题热度榜", name: "主题" },
-        { titel: "KOL榜", name: "专家" },
-      ],
       confirmText: "知道了",
       accounts: "",
       isCancelBtn: false,
       goFollowShow: false,
+      newCheckboxValue: [],
+      checkboxGroup: [],
+      status: "loadmore",
+      loadText: {
+        loadmore: "上拉加载更多",
+        loading: "加载中",
+        nomore: "已经到底了",
+      },
+      page_no: 1,
+      pageSize: 10,
+      haveData: true,
     };
   },
   mounted() {
@@ -171,31 +194,30 @@ export default {
       });
     });
   },
+  computed: {
+    researchTabBars() {
+      return ResearchTabBars;
+    },
+    TabBars() {
+      return TabBars;
+    },
+  },
   watch: {
     tagActive: {
       handler(val) {
-        val == "用户" ? this.researchCollectionList() : val == "主题" ? this.researchHotList() : this.researchKolList();
+        this.topTabsActive == 2 && val == "用户" ? this.researchCollectionList() : val == "主题" ? this.researchHotList() : this.researchKolList();
+      },
+      immediate: true,
+    },
+    topTabsActive: {
+      handler(val) {
+        this.collectionList = [];
+        val == 2 ? this.researchCollectionList() : this.researchArticleNewList();
       },
       immediate: true,
     },
   },
   methods: {
-    //获取胶囊位置
-    initNavBar() {
-      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-      this.navBarStyle = {
-        height: menuButtonInfo.height + menuButtonInfo.top + 20 + "px",
-        paddingTop: menuButtonInfo.top + "px",
-        paddingBottom: "4px",
-      };
-    },
-    //近期更新主题
-    async researchNewList() {
-      const res = await Research.researchNewList({ ChartPermissionId: 31 });
-      if (res.Ret === 200) {
-        this.themeNewList = res.Data.List || [];
-      }
-    },
     //用户收藏榜
     async researchCollectionList() {
       const res = await Research.researchCollectionList({ ChartPermissionId: 31 });
@@ -257,14 +279,14 @@ export default {
       this.goFollowShow = false;
     },
     //去往更多主题
-    goRecent() {
-      uni.navigateTo({
-        url: "/reportPages/recentPages/recentPages?id=31",
-      });
-    },
+    // goRecent() {
+    //   uni.navigateTo({
+    //     url: "/reportPages/recentPages/recentPages?id=31",
+    //   });
+    // },
     //收藏
     async collectClick(item) {
-      const res = await Report.collectRpt({ ArticleId: item.ArticleId, PageRouter: '月度收藏榜' });
+      const res = await Report.collectRpt({ ArticleId: item.ArticleId, PageRouter: "月度收藏榜" });
       if (res.Ret === 200) {
         item.IsCollect = !item.IsCollect;
         item.IsCollect
@@ -291,7 +313,7 @@ export default {
     },
     //去往文章详情页面
     goDetail(item) {
-       this.$store.commit("setRouterReport", "月度收藏榜");
+      this.$store.commit("setRouterReport", "月度收藏榜");
       this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
     },
     //去往主题详情
@@ -307,19 +329,62 @@ export default {
     async goSearch() {
       await this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?id=研选" + "&source=买方研选页面");
     },
+    // 头部tab的点击事件
+    topTabsClickHandler(item) {
+      this.topTabsActive = item.val;
+      this.haveData = true;
+      this.page_no = 1;
+    },
+    // 复选框组的选择事件
+    checkboxChange(e) {
+      this.newCheckboxValue = e.detail;
+      this.page_no = 1;
+      this.researchArticleNewList();
+    },
+    // 跳转主题 of 作者
+    goThemeAuthor(type) {
+      type === "主题" ? uni.navigateTo({ url: "/pages-purchaser/researchTheme/researchTheme" }) : "";
+    },
+    // 获取最新下的文章类型
+    async researchArticleTypeList() {
+      const res = await Research.researchArticleTypeList();
+      if (res.Ret === 200) {
+        this.checkboxGroup = res.Data.List;
+      }
+    },
+    // 获取最新的文章列表
+    async researchArticleNewList() {
+      const res = await Research.researchArticleNewList({
+        PageSize: this.pageSize,
+        CurrentIndex: this.page_no,
+        ArticleTypeIds: this.newCheckboxValue.join(","),
+      });
+      if (res.Ret === 200) {
+        this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
+        this.collectionList = this.page_no === 1 ? res.Data.List || [] : [...this.collectionList, ...res.Data.List];
+        if (this.page_no == 1) {
+          this.haveData = this.collectionList.length ? true : false;
+        }
+      }
+    },
   },
   onLoad() {
-    this.researchNewList();
-    this.initNavBar();
+    this.researchArticleTypeList();
   },
   onShow() {
     this.$store.commit("setRouterReport", "买方研选");
     this.getRecordTracking("买方研选");
   },
   /* 下拉刷新 */
-  onPullDownRefresh: Throttle(function () {
-    wx.stopPullDownRefresh();
-  }),
+  // onPullDownRefresh() {
+  //   wx.stopPullDownRefresh();
+  // },
+  onReachBottom() {
+    if (this.status == "nomore" || this.topTabsActive != 1) return;
+    this.status = "loading";
+    this.page_no++;
+    this.researchArticleNewList();
+  },
   /**
    * 用户点击分享
    */
@@ -334,36 +399,47 @@ export default {
 };
 </script>
 <style lang="scss">
-.nav-bar-wrap {
-  background-color: #fff;
-  color: #fff;
-  position: sticky;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 999;
-  padding-left: 30rpx;
-  .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;
-    }
-  }
-}
-</style>
-<style lang="scss">
 .resear-container {
   background-color: #f7f7f7;
+  .nav-bar-wrap,
+  .top-content-box {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    padding-left: 30rpx;
+  }
+  .top-content-box {
+    padding-left: 0;
+    margin-bottom: 20rpx;
+    .content-tabs {
+      background-color: #fff;
+      display: flex;
+      justify-content: center;
+      padding-bottom: 10rpx;
+      .item {
+        padding-top: 20rpx;
+        font-size: 34rpx;
+        position: relative;
+        padding-bottom: 8rpx;
+        margin-right: 60rpx;
+        flex-shrink: 0;
+        .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;
+      }
+    }
+  }
   .notice-content {
     position: sticky;
     left: 0;
@@ -391,45 +467,7 @@ export default {
       height: 56rpx;
     }
   }
-  .theme {
-    margin-top: 4rpx;
-    background-color: #fff;
-    padding: 0 30rpx 15rpx;
-    margin-bottom: 8rpx;
-    .theme-top {
-      display: flex;
-      color: #999999;
-      align-items: center;
-      font-size: 28rpx;
-      height: 95rpx;
-      justify-content: space-between;
-      .title {
-        color: #333;
-        font-size: 32rpx;
-        font-weight: 500;
-      }
-    }
-    .theme-content {
-      display: flex;
-      flex-wrap: wrap;
-      .theme-ul {
-        width: 50%;
-        display: flex;
-        align-items: center;
-        padding-right: 15rpx;
-        line-height: 59rpx;
-        image {
-          width: 26rpx;
-          height: 28rpx;
-          margin-left: 8rpx;
-          flex-shrink: 0;
-        }
-      }
-    }
-  }
-
   .content-ul {
-    margin: 20rpx 0 0;
     border-top: 1px solid #f6f6f6;
     .user-li,
     .hot-li,
@@ -438,7 +476,7 @@ export default {
       border-bottom: 1px solid #f6f6f6;
     }
     .user-img {
-      width: 40%;
+      width: 38%;
       justify-content: space-between;
       .img-box {
         display: flex;
@@ -495,18 +533,46 @@ export default {
       margin: 7rpx 10rpx 0 20rpx;
       flex-shrink: 0;
     }
+    .li-type {
+      padding: 0 15rpx;
+      height: 29rpx;
+      margin-top: 6rpx;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      border-radius: 4rpx;
+      color: #fff;
+      font-size: 24rpx;
+      font-weight: 500;
+    }
     .serial-number {
       margin-top: 0 !important;
     }
     .li-item {
       display: flex;
+      .title {
+        font-size: 28rpx;
+        line-height: 39rpx;
+        font-weight: 500;
+        color: #333;
+      }
       .li-industry {
         color: #3385ff;
         margin-left: 20rpx;
         display: inline-block;
+        font-weight: 400;
+      }
+      .time-user {
+        display: flex;
+        align-items: center;
+        font-size: 24rpx;
       }
       .li-user {
-        margin-left: 46rpx;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        width: 170rpx;
+        margin-left: 75rpx;
       }
       .li-title {
         display: flex;
@@ -576,6 +642,7 @@ export default {
       height: 115rpx;
       background-color: #fff;
       font-size: 32rpx;
+      border-bottom: 1rpx solid #ececec;
       .scroll-tab {
         position: relative;
         width: 100%;
@@ -618,5 +685,20 @@ export default {
     color: #c4c4c4;
     font-size: 20rpx;
   }
+  .checkbox-ui {
+    width: 100%;
+    padding: 30rpx 0;
+    overflow: hidden;
+    overflow-x: auto;
+    display: flex;
+    border-bottom: 1rpx solid #ececec;
+  }
+  .content-button {
+    height: 100rpx;
+    width: 100%;
+    text-align: center;
+    line-height: 100rpx;
+    color: #3385ff;
+  }
 }
 </style>

pages/reportForm/index.scss

@@ -159,7 +159,7 @@
 
     .industry-sticky {
       position: sticky;
-      top: 252rpx;
+      top: 230rpx;
       z-index: 90;
     }
 

pages/reportForm/reportForm.vue

@@ -1,16 +1,16 @@
 <template>
   <view class="reportForm-container">
-    <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
-      <view class="content">
-        <view class="hot-top" @click="goHot" v-if="wholeShowListData.IsShowList">
-          <image class="hot-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/hot_icon_report.png"></image>
-          <text class="sea_ipt">榜单</text>
-        </view>
-        <view class="search-box" @click="goSearch">
-          <icon type="search" size="15" class="search_ico" />
-          <text class="sea_ipt">{{ searchPlaceholderList.ReportSearch || "" }}</text>
-        </view>
-      </view>
+    <view class="nav-bar-wrap">
+      <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="50">
+        <template slot="content-left">
+          <view class="content">
+            <view class="hot-top" @click="goHot" v-if="wholeShowListData.IsShowList">
+              <image class="hot-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/hot_icon_report.png"></image>
+              <text class="sea_ipt">榜单</text>
+            </view>
+          </view>
+        </template>
+      </search-bar>
       <view class="second-tabs">
         <view :class="['item', item.ChartPermissionId == tabAct_id && 'tabs-active']" v-for="(item, index) in tabBars" :key="item.ChartPermissionId" @click="toggleTab(item, index)">
           {{ item.PermissionName }}
@@ -156,6 +156,8 @@ import { Throttle, Debounce } from "@/config/util.js";
 import freeCharge from "@/components/freeCharge";
 import videoModule from "@/components/videoModule/index";
 import modalDialog from "@/components/modalDialog.vue";
+import SearchBar from "@/components/search-bar/searchBar.vue";
+
 import { Reports } from "@/config/api.js";
 let app = getApp();
 export default {
@@ -164,6 +166,7 @@ export default {
     freeCharge,
     videoModule,
     modalDialog,
+    SearchBar,
   },
   data() {
     return {
@@ -213,7 +216,6 @@ export default {
   },
   onLoad(option) {
     this.loadList(option);
-    this.initNavBar();
   },
   watch: {
     //监听tabs的变化
@@ -225,15 +227,6 @@ export default {
     },
   },
   methods: {
-    //获取胶囊位置
-    initNavBar() {
-      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-      this.navBarStyle = {
-        height: menuButtonInfo.height + menuButtonInfo.top + 46 + "px",
-        paddingTop: menuButtonInfo.top + "px",
-        paddingBottom: "4px",
-      };
-    },
     //获取一级事件
     getClassify() {
       Reports.getClassify().then((res) => {
@@ -558,22 +551,13 @@ export default {
 @import "./index.scss";
 .reportForm-container {
   .nav-bar-wrap {
-    background-color: #fff;
-    color: #fff;
     position: sticky;
     top: 0;
     left: 0;
-    width: 100%;
     z-index: 99;
-    padding-left: 30rpx;
     .content {
       position: relative;
-      display: flex;
-      align-items: center;
-      width: 70%;
-      height: 63rpx;
-      margin-bottom: 20rpx;
-
+      padding-left: 30rpx;
       .hot-top {
         display: flex;
         align-items: center;
@@ -587,24 +571,10 @@ export default {
           height: 28rpx;
         }
       }
-      .search-box {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        height: 100%;
-        font-size: 30rpx;
-        color: #8d8d8d;
-        background-color: #f3f3f3;
-        padding-left: 33rpx;
-        border-radius: 70rpx;
-        // border: 1rpx solid #e5e5e5;
-      }
-      .sea_ipt {
-        padding-left: 15rpx;
-      }
     }
     .second-tabs {
       width: 100%;
+       padding-left: 30rpx;
       display: flex;
       overflow-x: auto;
       background-color: #fff;