14.2 搜索优化

pages-search/components/industrialsource.vue

@@ -3,20 +3,25 @@
     <view class="global_title" v-if="list.IndustryName">
       <mp-html :content="richTextClamp(3) + list.IndustryName + isSourceText(list) + '</div>'" />
     </view>
-    <view class="item-lable">
-      <view class="lable-list" v-for="item in list.IndustrialSubjectList" :key="item.IndustrialSubjectId">{{ item.SubjectName }}</view>
-    </view>
-    <view class="item-time">
-      <text>{{ list.PublishDate }} &nbsp;&nbsp;更新</text>
-    </view>
+    <searchTimeLine v-if="list.ListTimeLine && list.ListTimeLine.length" :timeList="list.ListTimeLine" />
+    <block v-else>
+      <view class="item-lable">
+        <view class="lable-list" v-for="item in list.IndustrialSubjectList" :key="item.IndustrialSubjectId">{{ item.SubjectName }}</view>
+      </view>
+      <view class="item-time">
+        <text>{{ list.PublishDate }} &nbsp;&nbsp;更新</text>
+      </view>
+    </block>
   </view>
 </template>
 
 <script>
 import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue";
+import searchTimeLine from "./searchTimeLine.vue";
+
 export default {
   name: "",
-  components: { mpHtml },
+  components: { mpHtml, searchTimeLine },
   props: {
     list: {
       type: Object,

pages-search/components/report.vue

@@ -1,133 +1,26 @@
 <template>
   <view class="container-report-page">
     <view class="content-list">
-      <block v-if="reportPageData.ListHzResource.length">
-        <view class="resource global_title">
-          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/zybico.jpg"></image>
-          <text>弘则资源包</text>
+      <view class="list-ui" v-for="(item, index) in reportPageData.ListHzResource" :key="item.IndustrialManagementId" @click.stop="themeDetails(item)">
+        <view v-if="index % 2 == 0">
+          <Industrialsource :list="item" />
         </view>
-        <text style="height: 1rpx; background: #ececec"></text>
-        <view class="global_card_content list-ui" v-for="item in reportPageData.ListHzResource" :key="item.IndustrialManagementId" @click.stop="themeDetails(item)">
-          <view class="industry-content">
-            <view class="industry-box-left">
-              <image
-                class="follw-image"
-                @click.stop="reportFllow(item.IndustrialManagementId, '弘则')"
-                :src="item.IsFollw ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/not_collected.png'"
-              ></image>
-              <view class="global_title">{{ item.IndustryName }} </view>
-            </view>
-            <view class="ndustry-box-tiem global_content_center">
-              <text v-if="item.IsRed" class="read"></text>
-              <text class="ndustry-box-text">{{ item.UpdateTime }}</text>
-              <u-icon name="arrow-right" color="#333" size="28"></u-icon>
-            </view>
-          </view>
-          <view class="read-more">
-            <view class="industry-video-item" @click.stop="handelVideoPlay(item)" :style="{ 'background-image': 'url(' + item.IndustryVideo.BackgroundImg + ')' }" v-if="item.IndustryVideo">
-              5min
-              <br />
-              逻辑解析
-              <view class="industry-video-icon">
-                <image src="https://hzstatic.hzinsights.com/cygx/video-right-top-icon.svg"></image>
-              </view>
-            </view>
-            <block v-if="item.IndustrialSubjectList">
-              <view v-if="item.IndustryVideo" style="display: flex; flex-wrap: wrap; width: 502rpx">
-                <view v-for="val in item.IndustrialSubjectList.slice(0, 6)" :key="val.IndustrialSubjectId" class="text-box text_oneLine">{{ val.SubjectName }}</view>
-              </view>
-              <block v-if="item.IndustryVideo && item.IndustrialSubjectList.length > 6">
-                <view v-for="val in item.IndustrialSubjectList.slice(6)" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
-              </block>
-              <block v-if="!item.IndustryVideo">
-                <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box text_oneLine">{{ val.SubjectName }}</view>
-              </block>
-            </block>
-          </view>
-        </view>
-      </block>
-      <block v-if="reportPageData.ListYxResource.length">
-        <view class="resource global_title">
-          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/zybico.jpg"></image>
-          <text>买方研选主题</text>
-        </view>
-        <text style="height: 1rpx; background: #ececec"></text>
-        <view class="global_card_content list-ui" v-for="item in reportPageData.ListYxResource" :key="item.IndustrialManagementId" @click.stop="themeDetails(item)">
-          <view class="industry-content">
-            <view class="industry-box-left">
-              <image
-                class="follw-image"
-                @click.stop="reportFllow(item.IndustrialManagementId, '研选')"
-                :src="item.IsFollw ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/not_collected.png'"
-              ></image>
-              <view class="global_title">{{ item.IndustryName }} </view>
-            </view>
-            <view class="ndustry-box-tiem global_content_center">
-              <text class="ndustry-box-text">{{ item.UpdateTime }}</text>
-              <u-icon name="arrow-right" color="#333" size="28"></u-icon>
-            </view>
-          </view>
-
-          <view class="read-more" v-if="item.IndustrialSubjectList">
-            <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box text_oneLine">{{ val.SubjectName }}</view>
-          </view>
+        <view v-if="index % 2 !== 0">
+          <Industrialsource :list="item" />
         </view>
-      </block>
+      </view>
     </view>
     <view class="content-report">
-      <block v-if="reportPageData.ListYxReport.length">
-        <view class="resource global_title">
-          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/report_Yx.png"></image>
-          <text>买方研选报告</text>
-        </view>
-        <text style="height: 1rpx; background: #ececec"></text>
-        <view class="global_card_content content-item" v-for="item in reportPageData.ListYxReport" :key="item.ArticleId">
-          <view class="item-user" v-if="item.NickName">
-            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/user_report.png"></image>
-            <text> {{ item.NickName }}</text>
-          </view>
-          <view class="title-content-box">
-            <view v-if="item.ArticleTypeName" class="tag global_content_center">{{ item.ArticleTypeName }}</view>
-            <view class="item-title global_title" @click="goDetailReport(item)">
-              {{ item.Title }}
-              <block v-if="item.List.length">
-                <text @click.stop="themeDetails(item, val)" class="item-industry" v-for="val in item.List" :key="val.IndustrialManagementId"> # {{ val.IndustryName }} </text>
-              </block>
-              <block v-if="item.SpecialTags.length">
-                <text class="item-industry" style="color: #90aeda" v-for="val in item.SpecialTags.split(',')" :key="val"> # {{ val }} </text>
-              </block>
-            </view>
-          </view>
-          <view class="item-more">
-            <text>{{ item.PublishDate }}</text>
-            <view class="global_pv-ollect">
-              <view>
-                <image class="pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/examine_icon.png"></image>
-                {{ item.Pv }}
-              </view>
-              <view @click="collectClick(item, 'ListYxReport')">
-                <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collect_act.png"></image>
-                <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collect_ico.png"></image>
-                {{ item.CollectNum }}
-              </view>
-            </view>
-          </view>
-        </view>
-      </block>
       <block v-if="reportPageData.ListHzReport.length">
-        <view class="resource global_title">
-          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/report_Hz.png"></image>
-          <text>弘则报告</text>
-        </view>
         <text style="height: 1rpx; background: #ececec"></text>
         <view class="global_card_content content-item" v-for="item in reportPageData.ListHzReport" :key="item.ArticleId">
           <view class="item-title global_title">
+            <text :class="['tag', item.ResourceObj == 'articlevmp' && 'tag-hz']" v-if="['articleyx', 'articlevmp'].includes(item.ResourceObj)">{{
+              item.ResourceObj == "articleyx" ? "买方研选" : item.ResourceObj == "articlevmp" ? "弘则报告" : ""
+            }}</text>
             <text style="display: inline; margin-right: 10rpx" @click="goDetailReport(item)"> {{ item.Title }} </text>
             <text class="item-industry" v-for="key in item.List" :key="key.IndustrialManagementId" @click="themeDetails(key)">#{{ key.IndustryName }}&nbsp;&nbsp;&nbsp;</text>
           </view>
-          <!-- <view class="item-more">
-            <text>{{ item.PublishDate }}</text>
-          </view> -->
           <view class="item-more">
             <text>{{ item.PublishDate }}</text>
             <view class="global_pv-ollect">
@@ -171,8 +64,10 @@
 import { Report, Reports, purchaserApi } from "@/config/api";
 import videoModule from "@/components/videoModule/index";
 import modalDialog from "@/components/modalDialog.vue";
+import Industrialsource from "./industrialsource.vue";
+
 export default {
-  components: { videoModule, modalDialog },
+  components: { videoModule, modalDialog, Industrialsource },
   props: {
     reportPageData: {
       type: Object,
@@ -343,12 +238,16 @@ export default {
 <style scoped lang="scss">
 .container-report-page {
   background-color: $uni-bg-color;
-  padding: 0 24rpx;
+  padding: 0 24rpx 50rpx;
   .content-list {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
     .list-ui {
-      background-color: #fff;
-      margin-top: 2rpx;
-      margin-bottom: 20rpx;
+      width: 49%;
+      &:first-child {
+        margin-right: 10rpx;
+      }
     }
     .item-title {
       display: flex;
@@ -442,6 +341,20 @@ export default {
           color: #376cbb;
           display: inline-block;
         }
+        .tag {
+          display: inline-block !important;
+          padding: 0 20rpx;
+          color: #928563;
+          font-size: 24rpx;
+          font-weight: 500;
+          border-radius: 38rpx;
+          background-color: #f2e8cc;
+          margin-right: 10rpx;
+        }
+        .tag-hz {
+          color: #bc372b;
+          background-color: #f2dacb;
+        }
       }
       .item-user {
         display: flex;

pages-search/components/searchTimeLine.vue

@@ -0,0 +1,96 @@
+<template>
+  <view class="timeline">
+    <view class="timelineItem">
+      <view class="timeItem" v-for="(item, index) in timeList" :key="index">
+        <view class="line">
+          <view class="out" :style="{ background: color == '' ? '' : color }">
+            <view class="inner" :style="{ background: color == '' ? '' : color }"></view>
+          </view>
+        </view>
+        <view class="rightContent">
+          <view class="time-content"> {{ item.PublishDate }}</view>
+          <view class="title-content text_twoLine"> {{ item.Title }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { Home } from "@/config/api";
+
+export default {
+  props: {
+    timeList: {
+      type: Array,
+      default: [],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      color: "#376cbb",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.container-report-item {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
+  border-radius: 8rpx;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  overflow: hidden;
+}
+.timeline {
+  padding: 20rpx;
+}
+.timelineItem {
+  .timeItem {
+    display: flex;
+    margin-top: 10rpx;
+    .line {
+      width: 1px;
+      background: rgba(204, 204, 204, 1);
+      position: relative;
+      .out {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 28rpx;
+        height: 28rpx;
+        background: rgba(236, 104, 23, 0.6);
+        border-radius: 50%;
+        .inner {
+          width: 18rpx;
+          height: 18rpx;
+          background: rgba(236, 104, 23, 1);
+          border-radius: 50%;
+        }
+      }
+    }
+    .rightContent {
+      flex: 1;
+      margin-left: 20rpx;
+      font-size: 24rpx;
+      height: 110rpx;
+      .time-content {
+        color: #666666;
+      }
+      .title-content {
+        color: #376cbb;
+        line-height: 36rpx;
+      }
+    }
+  }
+}
+</style>