pageMy/search/index.vue

@@ -0,0 +1,496 @@
+<template>
+  <view class="searchTarget-container container">
+    <view class="searchTarget-header">
+      <input type="text" placeholder="请输入关键字" placeholder-class="sea_ipt_placeholder" class="sea_ipt" v-model="searchTxt" focus="true" confirm-type="search" @confirm="searchHandle" />
+      <icon type="search" size="15" class="sea_ico" />
+      <view class="ipt-right">
+        <icon type="clear" size="16" color="#E0E0E0" v-show="searchTxt" @click="clearIpt" />
+        <text class="line">|</text>
+        <text @click="searchHandle" style="color: #3385ff">搜索</text>
+      </view>
+    </view>
+    <view class="search-cont">
+      <template v-if="!isResult">
+        <view class="search-cont-top" v-if="historySearchList.length">
+          <view class="cont-tit">
+            <text>搜索历史</text>
+            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/empty_ico.png" class="empty_ico" @click="clearHistory"></image>
+          </view>
+          <view class="targetList">
+            <view class="target-item" v-for="(item, index) in historySearchList" :key="index" @click="chooseTarget(item)">{{ item }}</view>
+          </view>
+        </view>
+        <view class="search-cont-top">
+          <view class="cont-tit">
+            <text>弘则推荐</text>
+          </view>
+          <view class="targetList">
+            <view class="target-item" v-for="(item, index) in keywordList" :key="index" @click="chooseTarget(item)">{{ item }}</view>
+          </view>
+        </view>
+      </template>
+      <template v-else>
+        <block v-if="haveResult">
+          <view class="tab-cont">
+            <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
+              <block v-for="(item, index) in tabBars" :key="item.ChartPermissionId">
+                <view :id="'_' + index" class="scroll-tab-item" :class="{ active: tabAct_id === item.ChartPermissionId }" @click.stop="toggleTab(item, index)">
+                  {{ item.PermissionName }}
+                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tabAct_id === item.ChartPermissionId"></image>
+                </view>
+              </block>
+            </scroll-view>
+          </view>
+          <view class="result-data">
+            <view class="report-ul">
+              <view class="report-item" v-for="(report, index) in resultList" :key="index" v-if="index % 2 === 0" @click="goDetail(report)">
+                <!-- <view class="item-content">{{report.content}}</view> -->
+                <view class="item-content"><u-parse :html="report.Body[0] + '...'"></u-parse></view>
+                <view class="line"></view>
+                <view class="item-title"><u-parse :html="report.Title"></u-parse></view>
+                <view class="item-abstract" v-if="report.abstract">
+                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/report_ico.png" class="report_ico"></image>
+                  {{ report.abstract }}
+                </view>
+                <text class="item-createtime">{{ report.PublishDate }}</text>
+              </view>
+            </view>
+            <view class="report-ul">
+              <view class="report-item" v-for="(report, index) in resultList" :key="index" v-if="index % 2 !== 0" @click="goDetail(report)">
+                <view class="item-content"><u-parse :html="report.Body[0] + '...'"></u-parse></view>
+                <view class="line"></view>
+                <view class="item-title"><u-parse :html="report.Title"></u-parse></view>
+                <view class="item-abstract" v-if="report.ExpertBackground">
+                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/report_ico.png" class="report_ico"></image>
+                  {{ report.ExpertBackground }}
+                </view>
+                <text class="item-createtime">{{ report.PublishDate }}</text>
+              </view>
+            </view>
+          </view>
+          <u-loadmore :status="status" icon-type="flower" :load-text="loadText" bg-color="#F7F7F7" padding-bottom="20rpx" />
+        </block>
+        <view class="nodata" v-else>
+          <image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
+          <text>未找到您想搜索的内容</text>
+        </view>
+      </template>
+    </view>
+    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+  </view>
+</template>
+
+<script>
+import { Search } from "@/config/api.js";
+import { Debounce, Throttle } from "@/config/util.js";
+import freeCharge from "@/components/freeCharge";
+export default {
+  data() {
+    return {
+      searchTxt: "", //搜索关键字
+      isResult: false, //显示搜索结果
+      haveResult: true, //是否有搜索数据
+      // 历史搜索列表
+      historySearchList: [],
+      // 关键字列表
+      keywordList: [],
+      targetList: [], //所有指标列表
+      // 搜索结果列表
+      resultList: [],
+      page_no: 1,
+      pageSize: 10,
+      totalPage: 0,
+      orderColumn: "Matching",
+      loadText: {
+        loadmore: "上拉加载更多",
+        loading: "加载中",
+        nomore: "已经到底了",
+      },
+      status: "loadmore",
+      tabAct_id: 1,
+      isTabAct: true,
+      tabBars: [
+        {
+          PermissionName: "匹配度排序",
+          ChartPermissionId: 1,
+          mode: "Matching",
+        },
+        {
+          PermissionName: "综合排序",
+          ChartPermissionId: 2,
+          mode: "Comprehensive",
+        },
+        {
+          PermissionName: "发布时间排序",
+          ChartPermissionId: 3,
+          mode: "PublishDate",
+        },
+      ],
+    };
+  },
+  watch: {
+    searchTxt(newVal) {
+      if (newVal.length <= 0) {
+        this.tabAct_id = 1;
+        this.isResult = false;
+      }
+    },
+  },
+  components: {
+    freeCharge,
+  },
+  methods: {
+    //tabs切换事件
+    toggleTab(item, index) {
+      this.orderColumn = item.mode;
+      if (this.tabAct_id !== item.ChartPermissionId) {
+        this.tabAct_id = item.ChartPermissionId;
+        this.pageNum = 1;
+        this.getDataList();
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 0,
+        });
+      }
+    },
+    /* 获取关键词 */
+    getKeyWord() {
+      Search.getKeys().then((res) => {
+        if (res.Ret === 200) {
+          this.keywordList = res.Data.Item.ConfigValue ? res.Data.Item.ConfigValue.split(",") : [];
+        }
+      });
+    },
+    // 选择历史搜索
+    chooseTarget(item) {
+      this.searchTxt = item;
+      this.SecName = item;
+      this.resultList = [];
+      this.page_no = 1;
+      this.getDataList();
+    },
+    // 键盘输入过程中
+    searchDoing() {
+      this.isResult = false;
+      //全部指标列表
+      let arr = JSON.parse(JSON.stringify(this.targetList));
+      let filterArr = [];
+      // // 过滤出符合搜索条件的值
+      arr.forEach((item, index) => {
+        if (item.SecName.includes(this.searchTxt)) {
+          item.SecName = this.join(item.SecName, this.searchTxt);
+          filterArr.unshift(item);
+        }
+      });
+      this.keywordList = filterArr;
+    },
+    // 拼接
+    join(str, key) {
+      return str.replace(new RegExp(`${key}`, "g"), `%%${key}%%`).split("%%");
+    },
+    // 搜索数据
+    searchHandle: Debounce(function () {
+      if (this.searchTxt) {
+        //添加搜索记录
+        if (!this.historySearchList.includes(this.searchTxt)) {
+          this.historySearchList.unshift(this.searchTxt);
+          this.$db.set("historySearchList", JSON.stringify(this.historySearchList));
+        }
+        this.resultList = [];
+        this.page_no = 1;
+        this.getDataList();
+      } else {
+        this.$util.toast("请输入关键字");
+      }
+    }),
+    // 查找数据
+    getDataList() {
+      this.isResult = true;
+      Search.getResult({
+        KeyWord: this.searchTxt,
+        // PageSize: this.pageSize,
+        // CurrentIndex: this.page_no,
+        OrderColumn: this.orderColumn,
+      }).then((res) => {
+        if (res.Ret === 200) {
+          // this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
+          this.status = "nomore";
+          this.totalPage = res.Data.Paging.Pages; //总页数
+          if (this.page_no === 1) {
+            this.resultList = res.Data.List || [];
+            this.haveResult = this.resultList.length ? true : false;
+          } else {
+            this.resultList = this.resultList.concat(res.Data.List);
+          }
+        }
+      });
+    },
+    // 点击数据列表修改数据
+    itemClick(item) {
+      let data = encodeURIComponent(JSON.stringify(item));
+      uni.navigateTo({
+        url: "/pages/recordData/recordData?data=" + data,
+      });
+    },
+    /* 表单清空 */
+    clearIpt() {
+      this.searchTxt = "";
+      this.isTabAct = false;
+      this.orderColumn = "Matching";
+      //
+    },
+    /* 历史搜索清空 */
+    clearHistory() {
+      this.historySearchList = [];
+      this.$db.del("historySearchList");
+    },
+    /* 进入详情 校验是否有该品种权限 */
+    goDetail(item) {
+      uni.navigateTo({
+        url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId,
+      });
+    },
+  },
+  /* 触底 */
+  onReachBottom: Throttle(function () {
+    // this.status = 'nomore';
+    if (this.isResult) {
+      // if(this.status === 'nomore') return ;
+      // this.page_no++;
+      // this.getDataList();
+    }
+  }),
+  onLoad() {
+    // 获取历史搜索记录
+    if (this.$db.get("historySearchList")) {
+      let historyList = JSON.parse(this.$db.get("historySearchList"));
+      this.historySearchList = historyList;
+    }
+  },
+  onShow() {
+    this.$store.dispatch("statistics", { PageType: "SummarySearch" });
+    this.getKeyWord();
+  },
+};
+</script>
+
+<style lang="scss">
+.searchTarget-container {
+  background-color: #fff;
+  .searchTarget-header {
+    padding: 0 34rpx;
+    width: 100%;
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    padding: 30rpx 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .sea_ipt_placeholder {
+      color: #8d8d8d;
+    }
+    .sea_ipt {
+      width: 682rpx;
+      height: 70rpx;
+      line-height: 70rpx;
+      box-sizing: border-box;
+      border: 1rpx solid #e5e5e5;
+      background-color: rgba(245, 245, 245, 0.2);
+      font-size: 26rpx;
+      color: #4a4a4a;
+      padding: 0 180rpx 0 78rpx;
+      border-radius: 70rpx;
+    }
+    .sea_ico {
+      width: 31rpx;
+      height: 31rpx;
+      position: absolute;
+      left: 68rpx;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .ipt-right {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      right: 59rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #3385ff;
+      .line {
+        margin: 0 21rpx;
+        color: #e0e0e0;
+      }
+    }
+  }
+  .search-cont {
+    padding-top: 130rpx;
+    .search-cont-top {
+      padding: 0 34rpx 0;
+      margin-bottom: 10rpx;
+      padding-top: 20rpx;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .cont-tit {
+        color: #666;
+        font-size: 28rpx;
+        margin-bottom: 30rpx;
+        display: flex;
+        justify-content: space-between;
+        .empty_ico {
+          width: 32rpx;
+          height: 33rpx;
+        }
+      }
+      .targetList {
+        display: flex;
+        flex-wrap: wrap;
+        // justify-content: space-between;
+        .target-item {
+          padding: 4rpx 18rpx;
+          color: #4a4a4a;
+          font-size: 26rpx;
+          // border: 1rpx solid #3385ff;
+          background-color: #f7f7f7;
+          margin-bottom: 30rpx;
+          margin-right: 30rpx;
+          border-radius: 20rpx;
+        }
+      }
+    }
+    .result-cont {
+      padding: 0 34rpx 0;
+      padding-left: 21rpx;
+      .result-list {
+        display: flex;
+        align-items: center;
+        color: #333;
+        padding-bottom: 30rpx;
+        border-bottom: 1rpx solid #ebedf0;
+        margin-bottom: 30rpx;
+        .result_ico {
+          width: 28rpx;
+          height: 28rpx;
+          margin-right: 20rpx;
+        }
+        text {
+          display: inline;
+        }
+        .highlight {
+          color: #3385ff;
+        }
+      }
+    }
+    .result-data {
+      margin-top: 80rpx;
+      min-height: calc(100vh - 130rpx);
+      padding: 20rpx 34rpx 40rpx;
+      display: flex;
+      background-color: #f7f7f7;
+      .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;
+          .item-content {
+            // height: 273rpx;
+            font-size: 24rpx;
+            line-height: 40rpx;
+            color: #7f7f7f;
+            display: -webkit-box;
+            // text-overflow:ellipsis;
+            // overflow: hidden;
+            text {
+              display: inline;
+            }
+          }
+          .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;
+            text {
+              display: inline;
+            }
+          }
+          .item-abstract {
+            font-size: 26rpx;
+            color: #6a6a6a;
+            margin-bottom: 10rpx;
+            .report_ico {
+              width: 32rpx;
+              height: 26rpx;
+              margin-right: 20rpx;
+              display: inline-block;
+            }
+          }
+          .item-createtime {
+            color: #acacac;
+            font-size: 24rpx;
+          }
+        }
+      }
+    }
+  }
+  .tab-cont {
+    position: fixed;
+    top: 128rpx;
+    width: 100%;
+    padding: 0 26rpx;
+    background-color: #fff;
+    font-size: 32rpx;
+    z-index: 99;
+    box-shadow: 0 3rpx 6rpx rgba(187, 216, 255, 0.2);
+    .scroll-tab {
+      width: 100%;
+      white-space: nowrap;
+    }
+    .scroll-tab-item {
+      // flex-grow: 1;
+      text-align: center;
+      display: inline-block;
+      padding: 0 8rpx 30rpx 8rpx;
+      margin-right: 40rpx;
+      border-bottom: 8rpx solid transparent;
+      position: relative;
+      &:last-child {
+        margin-right: 0;
+      }
+      &.active {
+        border-bottom: none;
+        color: #2c83ff;
+        font-weight: 700;
+      }
+      .border_act {
+        width: 100%;
+        height: 8rpx;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+    }
+  }
+}
+</style>

pageMy/search/search.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="searchTarget-container container">
+  <view class="search-container container">
     <view class="searchTarget-header">
       <input type="text" placeholder="请输入关键字" placeholder-class="sea_ipt_placeholder" class="sea_ipt" v-model="searchTxt" focus="true" confirm-type="search" @confirm="searchHandle" />
       <icon type="search" size="15" class="sea_ico" />
@@ -9,81 +9,60 @@
         <text @click="searchHandle" style="color: #3385ff">搜索</text>
       </view>
     </view>
-    <view class="search-cont">
-      <template v-if="!isResult">
-        <view class="search-cont-top" v-if="historySearchList.length">
-          <view class="cont-tit">
-            <text>搜索历史</text>
-            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/empty_ico.png" class="empty_ico" @click="clearHistory"></image>
-          </view>
-          <view class="targetList">
-            <view class="target-item" v-for="(item, index) in historySearchList" :key="index" @click="chooseTarget(item)">{{ item }}</view>
+    <view class="radio-content">
+      <van-radio-group :value="radioSelect" @change="onChangeRadio" direction="horizontal">
+        <van-radio icon-size="16" name="1">搜全部</van-radio>
+        <van-radio icon-size="16" name="2">搜纪要</van-radio>
+        <van-radio icon-size="16" name="3">搜图表</van-radio>
+      </van-radio-group>
+    </view>
+    <view class="tab-cont">
+      <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
+        <block v-for="item in tabBars" :key="item.mode">
+          <view class="scroll-tab-item" :class="{ active: orderColumn === item.mode }" @click.stop="toggleTab(item)">
+            {{ item.PermissionName }}
           </view>
+        </block>
+      </scroll-view>
+    </view>
+    <view class="search-cont" v-if="!isResult">
+      <view class="search-cont-top">
+        <view class="cont-tit">
+          <text>热搜关键词：</text>
         </view>
-        <view class="search-cont-top">
-          <view class="cont-tit">
-            <text>弘则推荐</text>
-          </view>
-          <view class="targetList">
-            <view class="target-item" v-for="(item, index) in keywordList" :key="index" @click="chooseTarget(item)">{{ item }}</view>
-          </view>
+        <view class="targetList">
+          <view class="target-item" v-for="(item, index) in hotKeyWord" :key="index" @click="chooseTarget(item.KeyWord)"># {{ item.KeyWord }}</view>
         </view>
-      </template>
-      <template v-else>
-        <block v-if="haveResult">
-          <view class="tab-cont">
-            <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
-              <block v-for="(item, index) in tabBars" :key="item.ChartPermissionId">
-                <view :id="'_' + index" class="scroll-tab-item" :class="{ active: tabAct_id === item.ChartPermissionId }" @click.stop="toggleTab(item, index)">
-                  {{ item.PermissionName }}
-                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tabAct_id === item.ChartPermissionId"></image>
-                </view>
-              </block>
-            </scroll-view>
-          </view>
-          <view class="result-data">
-            <view class="report-ul">
-              <view class="report-item" v-for="(report, index) in resultList" :key="index" v-if="index % 2 === 0" @click="goDetail(report)">
-                <!-- <view class="item-content">{{report.content}}</view> -->
-                <view class="item-content"><u-parse :html="report.Body[0] + '...'"></u-parse></view>
-                <view class="line"></view>
-                <view class="item-title"><u-parse :html="report.Title"></u-parse></view>
-                <view class="item-abstract" v-if="report.abstract">
-                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/report_ico.png" class="report_ico"></image>
-                  {{ report.abstract }}
-                </view>
-                <text class="item-createtime">{{ report.PublishDate }}</text>
-              </view>
-            </view>
-            <view class="report-ul">
-              <view class="report-item" v-for="(report, index) in resultList" :key="index" v-if="index % 2 !== 0" @click="goDetail(report)">
-                <view class="item-content"><u-parse :html="report.Body[0] + '...'"></u-parse></view>
-                <view class="line"></view>
-                <view class="item-title"><u-parse :html="report.Title"></u-parse></view>
-                <view class="item-abstract" v-if="report.ExpertBackground">
-                  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/report_ico.png" class="report_ico"></image>
-                  {{ report.ExpertBackground }}
-                </view>
-                <text class="item-createtime">{{ report.PublishDate }}</text>
-              </view>
-            </view>
-          </view>
-          <u-loadmore :status="status" icon-type="flower" :load-text="loadText" bg-color="#F7F7F7" padding-bottom="20rpx" />
-        </block>
-        <view class="nodata" v-else>
-          <image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
-          <text>未找到您想搜索的内容</text>
+      </view>
+      <view class="search-cont-top">
+        <view class="cont-tit">
+          <text>弘则推荐：</text>
+        </view>
+        <view class="targetList">
+          <view class="target-item" v-for="(item, index) in keywordList" :key="index" @click="chooseTarget(item)"># {{ item }}</view>
+        </view>
+      </view>
+      <view class="search-cont-top" v-if="historySearchList.length">
+        <view class="cont-tit">
+          <text>搜索历史：</text>
+          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/empty_ico.png" class="empty_ico" @click="clearHistory"></image>
         </view>
-      </template>
+        <view class="targetList">
+          <block v-for="(item, index) in historySearchList" :key="index">
+            <view v-if="index < 8" class="target-item" @click="chooseTarget(item)"># {{ item }}</view>
+          </block>
+        </view>
+      </view>
     </view>
-    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+    <!-- 内容地方 -->
+    <view class="search-cont" v-else>123 </view>
   </view>
 </template>
 
 <script>
 import { Search } from "@/config/api.js";
 import { Debounce, Throttle } from "@/config/util.js";
-import freeCharge from "@/components/freeCharge";
+let app = getApp({ allowDefault: true });
 export default {
   data() {
     return {
@@ -94,65 +73,51 @@ export default {
       historySearchList: [],
       // 关键字列表
       keywordList: [],
-      targetList: [], //所有指标列表
       // 搜索结果列表
       resultList: [],
+      indList: [],
       page_no: 1,
       pageSize: 10,
       totalPage: 0,
-      orderColumn: "Matching",
-      loadText: {
-        loadmore: "上拉加载更多",
-        loading: "加载中",
-        nomore: "已经到底了",
-      },
-      status: "loadmore",
-      tabAct_id: 1,
-      isTabAct: true,
+      hotKeyWord: [],
+      radioSelect: "",
       tabBars: [
         {
           PermissionName: "匹配度排序",
-          ChartPermissionId: 1,
           mode: "Matching",
         },
         {
           PermissionName: "综合排序",
-          ChartPermissionId: 2,
           mode: "Comprehensive",
         },
         {
           PermissionName: "发布时间排序",
-          ChartPermissionId: 3,
           mode: "PublishDate",
         },
       ],
+      orderColumn: "Matching",
     };
   },
   watch: {
     searchTxt(newVal) {
       if (newVal.length <= 0) {
-        this.tabAct_id = 1;
         this.isResult = false;
       }
     },
   },
-  components: {
-    freeCharge,
-  },
   methods: {
-    //tabs切换事件
-    toggleTab(item, index) {
-      this.orderColumn = item.mode;
-      if (this.tabAct_id !== item.ChartPermissionId) {
-        this.tabAct_id = item.ChartPermissionId;
-        this.pageNum = 1;
-        this.getDataList();
-        uni.pageScrollTo({
-          scrollTop: 0,
-          duration: 0,
-        });
+    //获取热搜关键词的请求
+    async researchHotKeyWord() {
+      const res = await Research.researchHotKeyWord();
+      if (res.Ret === 200) {
+        this.hotKeyWord = res.Data.List || [];
       }
     },
+    //点击了搜索的变化
+    onChangeRadio(value) {
+      this.radioSelect = value.detail;
+      this.clearIpt();
+    },
     /* 获取关键词 */
     getKeyWord() {
       Search.getKeys().then((res) => {
@@ -166,24 +131,13 @@ export default {
       this.searchTxt = item;
       this.SecName = item;
       this.resultList = [];
-      this.page_no = 1;
+      this.indList = [];
+      if (!this.historySearchList.includes(this.searchTxt)) {
+        this.historySearchList.unshift(this.searchTxt);
+        this.$db.set("historySearchList", JSON.stringify(this.historySearchList));
+      }
       this.getDataList();
     },
-    // 键盘输入过程中
-    searchDoing() {
-      this.isResult = false;
-      //全部指标列表
-      let arr = JSON.parse(JSON.stringify(this.targetList));
-      let filterArr = [];
-      // // 过滤出符合搜索条件的值
-      arr.forEach((item, index) => {
-        if (item.SecName.includes(this.searchTxt)) {
-          item.SecName = this.join(item.SecName, this.searchTxt);
-          filterArr.unshift(item);
-        }
-      });
-      this.keywordList = filterArr;
-    },
     // 拼接
     join(str, key) {
       return str.replace(new RegExp(`${key}`, "g"), `%%${key}%%`).split("%%");
@@ -197,70 +151,37 @@ export default {
           this.$db.set("historySearchList", JSON.stringify(this.historySearchList));
         }
         this.resultList = [];
-        this.page_no = 1;
+        this.indList = [];
         this.getDataList();
       } else {
         this.$util.toast("请输入关键字");
       }
     }),
     // 查找数据
-    getDataList() {
+    async getDataList() {
       this.isResult = true;
-      Search.getResult({
-        KeyWord: this.searchTxt,
-        // PageSize: this.pageSize,
-        // CurrentIndex: this.page_no,
-        OrderColumn: this.orderColumn,
-      }).then((res) => {
-        if (res.Ret === 200) {
-          // this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
-          this.status = "nomore";
-          this.totalPage = res.Data.Paging.Pages; //总页数
-          if (this.page_no === 1) {
-            this.resultList = res.Data.List || [];
-            this.haveResult = this.resultList.length ? true : false;
-          } else {
-            this.resultList = this.resultList.concat(res.Data.List);
-          }
-        }
-      });
-    },
-    // 点击数据列表修改数据
-    itemClick(item) {
-      let data = encodeURIComponent(JSON.stringify(item));
-      uni.navigateTo({
-        url: "/pages/recordData/recordData?data=" + data,
-      });
     },
     /* 表单清空 */
     clearIpt() {
       this.searchTxt = "";
       this.isTabAct = false;
-      this.orderColumn = "Matching";
-      //
     },
     /* 历史搜索清空 */
     clearHistory() {
       this.historySearchList = [];
       this.$db.del("historySearchList");
     },
-    /* 进入详情 校验是否有该品种权限 */
-    goDetail(item) {
-      uni.navigateTo({
-        url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId,
-      });
+    //tabs切换事件
+    toggleTab(item) {
+     this.orderColumn = item.mode
     },
   },
-  /* 触底 */
-  onReachBottom: Throttle(function () {
-    // this.status = 'nomore';
-    if (this.isResult) {
-      // if(this.status === 'nomore') return ;
-      // this.page_no++;
-      // this.getDataList();
+  onLoad(options) {
+    this.radioSelect = options.id == 31 ? "1" : "2";
+    if (options.text) {
+      this.searchTxt = options.text;
+      this.getDataList();
     }
-  }),
-  onLoad() {
     // 获取历史搜索记录
     if (this.$db.get("historySearchList")) {
       let historyList = JSON.parse(this.$db.get("historySearchList"));
@@ -270,18 +191,20 @@ export default {
   onShow() {
     this.$store.dispatch("statistics", { PageType: "SummarySearch" });
     this.getKeyWord();
+    // this.researchHotKeyWord();
   },
 };
 </script>
 
 <style lang="scss">
-.searchTarget-container {
+.search-container {
   background-color: #fff;
+  padding-bottom: 30rpx;
   .searchTarget-header {
     padding: 0 34rpx;
     width: 100%;
     background-color: #fff;
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
     z-index: 99;
@@ -326,8 +249,18 @@ export default {
       }
     }
   }
+  .radio-content {
+    width: 100%;
+    padding-left: 58rpx;
+    background-color: #fff;
+    position: sticky;
+    height: 70rpx;
+    top: 128rpx;
+    left: 0;
+    z-index: 99;
+    display: flex;
+  }
   .search-cont {
-    padding-top: 130rpx;
     .search-cont-top {
       padding: 0 34rpx 0;
       margin-bottom: 10rpx;
@@ -336,9 +269,9 @@ export default {
         margin-bottom: 0;
       }
       .cont-tit {
-        color: #666;
-        font-size: 28rpx;
-        margin-bottom: 30rpx;
+        font-size: 32rpx;
+        margin-bottom: 20rpx;
+        font-weight: 500;
         display: flex;
         justify-content: space-between;
         .empty_ico {
@@ -349,16 +282,10 @@ export default {
       .targetList {
         display: flex;
         flex-wrap: wrap;
-        // justify-content: space-between;
+        font-size: 28rpx;
         .target-item {
-          padding: 4rpx 18rpx;
-          color: #4a4a4a;
-          font-size: 26rpx;
-          // border: 1rpx solid #3385ff;
-          background-color: #f7f7f7;
-          margin-bottom: 30rpx;
-          margin-right: 30rpx;
-          border-radius: 20rpx;
+          width: 50%;
+          margin-bottom: 20rpx;
         }
       }
     }
@@ -386,92 +313,29 @@ export default {
       }
     }
     .result-data {
-      margin-top: 80rpx;
+      // margin-top: 80rpx;
       min-height: calc(100vh - 130rpx);
       padding: 20rpx 34rpx 40rpx;
       display: flex;
       background-color: #f7f7f7;
-      .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;
-          .item-content {
-            // height: 273rpx;
-            font-size: 24rpx;
-            line-height: 40rpx;
-            color: #7f7f7f;
-            display: -webkit-box;
-            // text-overflow:ellipsis;
-            // overflow: hidden;
-            text {
-              display: inline;
-            }
-          }
-          .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;
-            text {
-              display: inline;
-            }
-          }
-          .item-abstract {
-            font-size: 26rpx;
-            color: #6a6a6a;
-            margin-bottom: 10rpx;
-            .report_ico {
-              width: 32rpx;
-              height: 26rpx;
-              margin-right: 20rpx;
-              display: inline-block;
-            }
-          }
-          .item-createtime {
-            color: #acacac;
-            font-size: 24rpx;
-          }
-        }
-      }
     }
   }
   .tab-cont {
-    position: fixed;
+    position: sticky;
     top: 128rpx;
     width: 100%;
     padding: 0 26rpx;
     background-color: #fff;
     font-size: 32rpx;
-    z-index: 99;
-    box-shadow: 0 3rpx 6rpx rgba(187, 216, 255, 0.2);
     .scroll-tab {
       width: 100%;
       white-space: nowrap;
     }
     .scroll-tab-item {
-      // flex-grow: 1;
       text-align: center;
       display: inline-block;
-      padding: 0 8rpx 30rpx 8rpx;
+      // padding: 0 8rpx 20rpx 8rpx;
+      padding-bottom: 20rpx;
       margin-right: 40rpx;
       border-bottom: 8rpx solid transparent;
       position: relative;
@@ -482,6 +346,8 @@ export default {
         border-bottom: none;
         color: #2c83ff;
         font-weight: 700;
+        border-bottom: 2px solid;
+        border-image: linear-gradient(to right, #2e85ff, #7eeaf6) 1;
       }
       .border_act {
         width: 100%;

pages.json

@@ -291,7 +291,9 @@
       "van-tab": "/wxcomponents/vant/dist/tab/index",
       "van-tabs": "/wxcomponents/vant/dist/tabs/index",
       "van-transition": "/wxcomponents/vant/dist/transition/index",
-      "van-icon": "/wxcomponents/vant/dist/icon/index"
+      "van-icon": "/wxcomponents/vant/dist/icon/index",
+      "van-radio": "/wxcomponents/vant/dist/radio/index",
+      "van-radio-group": "/wxcomponents/vant/dist/radio-group/index"
     }
   },
   "tabBar": {

pages/index/index.vue

@@ -4,8 +4,8 @@
       <view class="content">
         <van-icon name="search" size="28px" class="search-icon" @click="goSearch" />
         <view class="top-tabs">
-          <van-tabs id="topTabs" :active="topTabsActive">
-            <van-tab v-for="item in topTabBars" :key="item.val" :title="item.type"></van-tab>
+          <van-tabs id="topTabs" :active="topTabsActive" @change="topTabsChange">
+            <van-tab v-for="item in topTabBars" :name="item.val" :key="item.val" :title="item.type"></van-tab>
             <template #nav-right>
               <img class="tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" alt="" />
             </template>
@@ -13,14 +13,85 @@
         </view>
       </view>
     </view>
-    <view class="second-tabs">
-      <van-tabs id="secondTabs" :active="secondActive">
-        <van-tab v-for="item in secondBars" :key="item.ChartPermissionId" :title="item.PermissionName"></van-tab>
-        <!-- <template #nav-right>
-          <img class="tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" alt="" />
-        </template> -->
-      </van-tabs>
+    <view class="second-tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
+      <view :class="['item', item.ChartPermissionId == secondActive && 'active']" v-for="(item, index) in secondBars" :key="item.ChartPermissionId" @click="handleClickTopSub(item)">
+        {{ item.PermissionName }}
+        <block v-if="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>
+    </view>
+    <block v-if="haveData">
+      <view class="data-cont">
+        <view class="report-ul">
+          <view class="report-item" v-for="(report, index) in dataList" :key="index" v-if="index % 2 === 0" @click="goDetail(report)">
+            <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.Title }}</text>
+            <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
+              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/fenxi_ico.png" class="report_ico"></image>
+              {{ report.ExpertBackground }}
+            </view>
+            <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>
+          </view>
+        </view>
+        <view class="report-ul">
+          <view class="report-item" v-for="(report, index) in dataList" :key="index" v-if="index % 2 !== 0" @click="goDetail(report)">
+            <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.Title }}</text>
+            <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
+              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/fenxi_ico.png" class="report_ico"></image>
+              {{ report.ExpertBackground }}
+            </view>
+            <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>
+          </view>
+        </view>
+      </view>
+      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" />
+    </block>
+    <view class="nodata" v-else-if="haveData === false" style="padding-top: 400rpx">
+      <image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
+      <text>暂时没有行业数据</text>
+    </view>
+    <view class="content-intimate" v-if="reportShow">
+      <van-transition :show="showTransition" name="fade-right">
+        <view class="content">
+          <view @click="goSecretDetail('1')">
+            <text>报告</text>
+            <text>精选</text>
+          </view>
+          <view class="cont-border" @click="goSecretDetail('2')">
+            <text>本周研</text>
+            <text>究汇总</text>
+          </view>
+          <view @click="goSecretDetail('3')">
+            <text>上周纪</text>
+            <text>要汇总</text>
+          </view>
+        </view>
+      </van-transition>
+      <image @click="showTransition = !showTransition" src="https://hzstatic.hzinsights.com/cygx/czbk/intimate-icon.png" mode=""></image>
     </view>
+    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
   </view>
 </template>
 
@@ -46,6 +117,21 @@ export default {
       topTabsActive: "1", //一级top的tabs
       secondActive: "", //二级的tabs
       secondBars: [], //二级的tabs数组
+      refresh: false,
+      pageSize: 10, //条数
+      pageNum: 1, //页码
+      haveMore: true, //是否有更多数据
+      haveData: null, //是否有数据
+      //数据列表
+      dataList: [],
+      status: "loadmore",
+      loadText: {
+        loadmore: "上拉加载更多",
+        loading: "加载中",
+        nomore: "已经到底了",
+      },
+      showTransition: false, //点击绝密后的隐现
+      reportShow: false, //绝密标签的隐现
     };
   },
   components: {
@@ -88,38 +174,87 @@ export default {
         paddingBottom: "4px",
       };
     },
+    //点击顶部一级分类
+    topTabsChange(e) {
+      this.topTabsActive = e.detail.name;
+    },
+    //点击顶部二级分类
+    handleClickTopSub(item) {
+      this.secondActive = item.ChartPermissionId;
+    },
     /* 获取tab分类 */
     getTabs() {
       Home.Tab().then((res) => {
         if (res.Ret === 200) {
-          // this.secondBars = res.Data.List;
-          this.secondBars = [
-            { ChartPermissionId: 22, PermissionName: "我的收藏" },
-            { ChartPermissionId: 23, PermissionName: "A股市场" },
-            { ChartPermissionId: 24, PermissionName: "行业数据" },
-            { ChartPermissionId: 25, PermissionName: "大类资产" },
-            { ChartPermissionId: 26, PermissionName: "大宗商品" },
-             { ChartPermissionId: 27, PermissionName: "大宗商品" },
-          ];
-          console.log(this.secondBars);
+          this.secondBars = res.Data.List;
+          // this.secondBars = [
+          //   { ChartPermissionId: 22, PermissionName: "我的收藏" },
+          //   { ChartPermissionId: 23, PermissionName: "A股市场" },
+          //   { ChartPermissionId: 24, PermissionName: "行业数据" },
+          //   { ChartPermissionId: 25, PermissionName: "大类资产" },
+          //   { ChartPermissionId: 26, PermissionName: "大宗商品" },
+          //   { ChartPermissionId: 27, PermissionName: "大宗商品" },
+          // ];
           if (!this.secondActive) {
             this.secondActive = this.secondBars[0].ChartPermissionId;
           }
-          this.$nextTick(() => {
-            this.selectComponent("#secondTabs").resize();
-          });
+          this.getReportList();
         }
       });
     },
+    /* 获取列表 */
+    async getReportList() {
+      const res = await Home.getList({
+        PageSize: this.pageSize,
+        CurrentIndex: this.pageNum,
+        ChartPermissionId: 0,
+      });
+      if (res.Ret === 200) {
+        if (!res.Data.HaveResearch) {
+          this.$util.modalShow("", "您暂无查看研选权限", "", () => {
+            uni.reLaunch({
+              url: "/pages/index/index",
+            });
+          });
+        }
+        this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
+        if (res.Data.List && res.Data.List.length > 0) {
+          res.Data.List.forEach((item) => {
+            if (item.BodyHtml) {
+              item.BodyHtml = item.BodyHtml.replace(/'\'/g, "");
+            }
+          });
+        }
+        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);
+        }
+        if (this.refresh) {
+          uni.stopPullDownRefresh();
+          this.refresh = false;
+        }
+      }
+    },
     /* 搜索 */
     goSearch() {
       this.$store.dispatch("checkHandle", "/pageMy/search/search");
     },
   },
   /* 下拉刷新 */
-  onPullDownRefresh: Throttle(function () {}),
+  onPullDownRefresh: Throttle(function () {
+    this.status = "loadmore";
+    this.pageNum = 1;
+    this.getReportList();
+  }),
   // 上拉加载
-  onReachBottom: Throttle(function () {}),
+  onReachBottom: Throttle(function () {
+    if (this.status === "nomore") return;
+    this.status = "loading";
+    this.pageNum++;
+    this.getReportList();
+  }),
   /** 用户点击分享*/
   onShareAppMessage: function (res) {
     return {
@@ -170,28 +305,133 @@ export default {
       padding-top: 16rpx;
       margin-left: -20rpx;
     }
+    .van-tabs__line {
+      background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+    }
+    .van-tab--active {
+      color: #3385ff;
+    }
   }
   .second-tabs {
     width: 100%;
+    display: flex;
     overflow-x: auto;
     background-color: #fff;
-    .van-ellipsis {
-      font-size: 32rpx;
+    font-size: 30rpx;
+    overflow-x: auto;
+    color: #999999;
+    padding: 20rpx 30rpx;
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
     }
-    .tabs-img {
-      padding-top: 16rpx;
-      margin-left: -30rpx;
+    .item {
+      position: relative;
+      padding-bottom: 16rpx;
+      margin-right: 50rpx;
+      flex-shrink: 0;
+      .limit-img {
+        position: absolute;
+        top: -15rpx;
+        right: -50rpx;
+      }
+    }
+    .active {
+      color: #3385ff;
+      font-weight: 500;
+      border-bottom: 2px solid;
+      border-image: linear-gradient(to right, #2e85ff, #7eeaf6) 1;
+    }
+  }
+  .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;
+        .item-content-img {
+          display: flex;
+          align-items: center;
+          image {
+            width: 100%;
+            height: 232rpx;
+            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;
+        }
+        .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;
+            }
+          }
+        }
+      }
     }
   }
   .tabs-img {
     width: 46rpx;
     height: 26rpx;
   }
-  .van-tabs__line {
-    background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
-  }
-  .van-tab--active {
-    color: #3385ff;
-  }
 }
 </style>