feat: 调整组件引用

apps/bigmember_pc/src/views/article-content/components/RecommendOpportunities.vue

@@ -10,6 +10,7 @@ import {
 import ArticleItem from '@/components/article-item/ArticleItem.vue'
 import { dateFromNow } from '@/utils'
 import CollectInfo from '@/components/collect-info/CollectInfo.vue'
+import RecommendServesCard from '@/views/article-content/components/RecommendServesCard.vue'
 
 function dateFormat(str) {
   if (str) {
@@ -39,7 +40,11 @@ function createRecommendation(modelName) {
 }
 
 const recommendProjects = computed(() => {
-  return createRecommendation('recommendProjects')
+  const result = createRecommendation('recommendProjects')
+  if (canShowProjectMask.value) {
+    result.list = new Array(5).fill(1).map((v) => result.list[0])
+  }
+  return result
 })
 
 const recommendBuyers = computed(() => {
@@ -69,7 +74,7 @@ const recommendInfo = {
 }
 
 const canShowProjectMask = computed(() => {
-  return true
+  return ContentExpandsModel.value.recommendProjects?.popup
 })
 
 /**
@@ -95,6 +100,26 @@ const collectElement = ref(null)
 function doOpenCollectDialog() {
   collectElement.value?.noCallApiFn('pc_article_cqxmmore', false)
 }
+
+const recommendMaskConfig = {
+  headerTitle: '大会员权益',
+  headerMore: '查看服务介绍',
+  clickMore: () => {
+    window.open('/big/page/index', '_blank')
+  },
+  title: '项目提前介入，中标更轻松',
+  content:
+    '提前1-3个月获取项目采购计划，获取采购内容、预算金额、预计采购时间等，提前运作提高中标率。',
+  buttons: [
+    {
+      label: '免费体验',
+      type: 'primary',
+      action: () => {
+        doOpenCollectDialog()
+      }
+    }
+  ]
+}
 </script>
 <template>
   <div class="recommend-opportunities" v-if="canShowModule">
@@ -123,51 +148,29 @@ function doOpenCollectDialog() {
       </div>
 
       <div class="article-info-list">
-        <article-item
-          model="S"
-          :grid-data="[]"
-          class="article-info-item"
-          v-for="(item, index) in recommendProjects.list"
-          :class="{ visited: item.visited || item.ca_isvisit }"
-          :key="index"
-          :index="index + 1"
-          :article="item"
-          :config="recommendInfo.config"
-          @onClick="doOpenArticlePage(item)"
-          :vt="'f'"
-        >
-          <div slot="right-time"></div>
-          <div class="time-text" slot="right-handle-container">
-            {{ dateFormat(item.publishTime) }}
-          </div>
-        </article-item>
-
-        <div class="mask-drainage" v-if="canShowProjectMask">
-          <div
-            class="recommend-serve-card has-header flex flex-(col items-center justify-between)"
+        <div>
+          <article-item
+            model="S"
+            :grid-data="[]"
+            class="article-info-item"
+            v-for="(item, index) in recommendProjects.list"
+            :class="{ visited: item.visited || item.ca_isvisit }"
+            :key="index"
+            :index="index + 1"
+            :article="item"
+            :config="recommendInfo.config"
+            @onClick="doOpenArticlePage(item)"
+            :vt="'f'"
           >
-            <div
-              class="recommend-serve-header w-full flex flex-(row items-center justify-between)"
-            >
-              <span>大会员权益</span>
-              <span class="action-text">查看服务介绍 ></span>
-            </div>
-            <div
-              class="recommend-serve-content flex flex-(1 col items-center justify-between)"
-            >
-              <div>
-                <span class="title-text">项目提前介入，中标更轻松</span>
-                <div class="text-center">
-                  提前1-3个月获取项目采购计划，获取采购内容、预算金额、预计采购时间等，提前运作提高中标率。
-                </div>
-              </div>
-              <div class="action-btns flex flex-(row items-center)">
-                <el-button @click="doOpenProjectMore('free')" type="primary"
-                  >免费体验</el-button
-                >
-              </div>
+            <div slot="right-time"></div>
+            <div class="time-text" slot="right-handle-container">
+              {{ dateFormat(item.publishTime) }}
             </div>
-          </div>
+          </article-item>
+        </div>
+        <div class="mask-drainage" v-if="canShowProjectMask">
+          <recommend-serves-card v-bind="recommendMaskConfig">
+          </recommend-serves-card>
         </div>
       </div>
     </div>
@@ -281,6 +284,9 @@ function doOpenCollectDialog() {
       flex-direction: row;
       justify-content: space-between;
       padding: 16px 0;
+      &:hover {
+        color: $color-main;
+      }
       &:last-of-type {
         border: none;
       }
@@ -330,6 +336,10 @@ function doOpenCollectDialog() {
     }
   }
 
+  .recommend-serve-card.has-header {
+    min-height: 205px;
+  }
+
   .recommend-info-header {
     @include diy-icon('re-unit', 24, 24);
     @include diy-icon('re-info', 24, 24);

apps/bigmember_pc/src/views/article-content/pages/Article.vue

@@ -335,69 +335,6 @@ function doOpenCollectDialog(key) {
   }
 }
 
-.recommend-serve-card {
-  &:nth-of-type(odd) {
-    margin-left: 0;
-  }
-  &:nth-of-type(even) {
-    margin-right: 0;
-  }
-  margin: 16px 8px 0 8px;
-  width: 442px;
-  min-height: 178px;
-  overflow: hidden;
-  border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  background: linear-gradient(180deg, #fff 0%, #f3f7f9 100%);
-  box-shadow: 0px 4px 8px 0px rgba(129, 134, 136, 0.06);
-  &.has-header {
-    min-height: 231px;
-  }
-
-  .recommend-serve-header {
-    padding: 8px 16px;
-    background: linear-gradient(270deg, #f1d090 0%, #fae7ca 100%);
-    color: #1d1d1d;
-    font-size: 14px;
-    line-height: 22px;
-    .action-text {
-      color: #b1700e;
-      font-size: 12px;
-    }
-
-    & + .recommend-serve-content {
-      padding-top: 16px;
-    }
-  }
-  .recommend-serve-content {
-    color: #686868;
-    text-align: center;
-    font-size: 14px;
-    line-height: 22px;
-    padding: 24px 42px;
-    .title-text {
-      display: inline-block;
-      color: #1d1d1d;
-      font-size: 16px;
-      line-height: 24px;
-      margin-bottom: 10px;
-    }
-  }
-
-  .action-btns {
-    .el-button {
-      min-width: 132px;
-      height: 36px;
-      padding: 6px 16px;
-      font-size: 16px;
-      line-height: 22px;
-      & + .el-button {
-        margin-left: 32px;
-      }
-    }
-  }
-}
-
 .content-card {
   margin-top: 16px;
   border-radius: 8px;