前台融合服务页面修改

front/src/views/home/components/searchResultList.vue

@@ -67,6 +67,16 @@
             "
           />
         </div>
+        <div class="left"
+          style="display: flex;
+          align-items: center"
+          v-else-if="selectCardsname === '融合服务' && item.fuseAttrList && item.fuseAttrList.filter((val) => val.attrType == '服务图片')[0]">
+            <a-image
+              :width="106"
+              :preview="false"
+              :src="item.fuseAttrList.filter((val) => val.attrType == '服务图片')[0].attrValue"
+            />
+        </div>
         <div
           class="left"
           :class="
@@ -135,7 +145,18 @@
               </svg>
             </span>
             <div class="header-right">
-              <div>
+              <div v-if="selectCardsname === '融合服务'"
+                class="label-content">
+                <template v-if="item.fuseAttrList && item.fuseAttrList.filter((val)=>val.attrType=='应用领域')[0]">
+                  <span class="label"
+                    v-for="(data, index) in item.fuseAttrList.filter((val)=>val.attrType=='应用领域')[0].attrValue.split(';')"
+                    :key="index"
+                  >
+                    {{data}}
+                  </span>
+                </template>
+              </div>
+              <div v-else>
                 发布时间：
                 <template v-if="item.createDate">
                   <span>
@@ -936,6 +957,17 @@
             div {
               margin-right: 24px;
             }
+            .label-content {
+              flex: 1;
+              display: flex;
+              justify-content: flex-end;
+              .label {
+                padding: 0.01rem 0.1rem;
+                margin-right: 0.1rem;
+                border-radius: 0.13rem;
+                background: #0087ff;
+              }
+            }
           }
           .header-right:last-child {
             div {

front/src/views/home/integrationServices.vue

@@ -3,6 +3,17 @@
   <div class="details-pageconetent">
     <home-header></home-header>
     <div class="top">
+      <div class="top-title">
+        全部：
+        <div 
+          v-for="(item, index) in titleName" 
+          :key="index" 
+          class="tabAll" 
+          @click="changeCards(index)"
+          :class="{ sel: index == number }">
+            <span>{{ item.name }}</span>
+        </div>
+      </div>
       <div class="resultListSearchInput-father">
         <div class="resultListSearchInput-son">
           模糊搜索
@@ -75,6 +86,17 @@
       const resourceList = reactive({ data: [] })
       const resourceTotal = ref(0)
       const current = ref(1)
+      // 选项卡
+      const titleName = ref([
+        {
+          name: '打包模式',
+        },
+        {
+          name: '赋能场景',
+        },
+      ])
+
+      const number = ref(0)
       // 刷新筛选条件组件
       let listKey = ref(0)
       // 刷新筛选列表信息组件
@@ -84,12 +106,18 @@
       const paramsGetResources = {
         pageNum: 1,
         pageSize: currentPageSize.value,
-        type: Cardsname.value,
+        type: titleName.value[number.value].name,
         name: '',
         orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
         orderType: 'DESC', // ASC 升序  DESC 降序
       }
 
+      const changeCards = (val) => {
+        console.log(val)
+        number.value = val
+        chongzhi()
+      }
+
       // 查询
       const onSearch = () => {
         loading.value = true
@@ -109,7 +137,7 @@
         paramsGetResources.orderField = 'create_date'
         paramsGetResources.orderType = 'DESC'
         mybus.emit('chongzhi', {
-          type: '融合服务',
+          type: titleName.value[number.value].name,
         })
         getAppResources()
       }
@@ -126,6 +154,7 @@
           orderField: paramsGetResources.orderField,
           orderType: paramsGetResources.orderType,
           name: searchValue.value,
+          type: titleName.value[number.value].name,
         }
         getIntegrationServicesList(postData).then(
           (res) => {
@@ -211,6 +240,9 @@
         pageSizeOptions,
         current,
         loading,
+        titleName,
+        changeCards,
+        number,
       }
     },
     components: {
@@ -323,6 +355,26 @@
         background: #f3f5f9;
         padding-bottom: 0.6rem;
       }
+
+      .top-title {
+        padding: 0.2rem;
+        display: flex;
+        font-size: 22px;
+        .tabAll {
+          font-size: 22px;
+          color: #000000;
+          margin-right: 35px;
+          cursor: pointer;
+        }
+        .tabAll:nth-child(1) {
+          margin-left: 20px;
+        }
+        .sel {
+          font-weight: 600;
+          color: #0087ff;
+          border-bottom: 0.02rem solid #0087ff;
+        }
+      }
     }
   }