hi-ucs/front/src/views/home/packagingDetails.vue

<template>
  <!-- 青岛 -->
  <div class="details-pageconetent">
    <home-header></home-header>
    <div class="content-box">
      <div class="package-title">打包模式</div>
      <div class="basic-info">
        <div class="title-box">
          <div class="bar"></div>
          <span class="title-text">基本信息</span>
        </div>
        <div class="flex-row-start info-box">
          <div class="img"></div>
          <div class="right">
            <div class="name">名称：{{ detailInfoObj.name || '--' }}</div>
            <div class="flex-row-start area">
              <div class="name">应用领域：</div>
              <div class="flex-row-start tag" v-if="detailInfoObj.applicationArea">
                {{ detailInfoObj.applicationArea }}
              </div>
            </div>
            <div class="flex-row-start desc">
              <!-- <div class="name">描述：</div> -->
              <div class="desc">描述：{{ detailInfoObj.description +
                  '哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊哈啊啊啊啊啊啊啊啊啊啊啊啊'
                  || '--'
              }}</div>
            </div>
            <div class="btn-box">
              <a-button size="big" class="btn-text" type="primary" @click="toView()">
                <template #icon>
                  <form-outlined />
                </template>
                申请使用
              </a-button>
              <a-button size="big" class="btn-text" type="primary" @click="toView()">
                <template #icon>
                  <form-outlined />
                </template>
                收藏
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <div class="ability-list-box">
        <div class="title-box">
          <div class="bar"></div>
          <span class="title-text">服务使用能力列表</span>
        </div>
        <div class="list-box">
          <packageAbilityList />
        </div>
      </div>
    </div>
    <home-footer></home-footer>
  </div>

</template>
<script setup>
import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus'
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
import { getIntegrationServicesList } from '@/api/home.js'
import { useRouter } from 'vue-router'
import HomeHeader from '@/views/home/components/header'
import searchResultList from '@/views/home/components/searchResultList.vue'
import packageAbilityList from '@/views/home/components/packageAbilityList.vue'
import { message } from 'ant-design-vue'
import { getIntegrationDetail } from '@/api/home'


const router = useRouter()
const id = router.currentRoute.value.query.id

const detailInfoObj = ref({})
const abilityList = ref([
  {
    name: '数据资源',
    // bgImg: require('../../assets/home/integration/jcssDetail.png'),
    list: []
  },
  {
    name: '组件服务',
    list: []
  },
  {
    name: '基础设施',
    list: []
  },
])

// 融合服务--详情
const getIntegrationServicesDeatil = (id) => {
  getIntegrationDetail(id).then(
    (res) => {
      if (res.data.code !== 0) {
        return message.error(res.data.msg)
      }
      detailInfoObj.value = res.data.data || {}
      console.log('detailInfoObj------------>', detailInfoObj);

      let fuseResourceList = detailInfoObj.value.fuseResourceList || []
      abilityList.value.map(v => {
        let list = fuseResourceList.filter(x => x.type == v.name) || [];
        v.list = list.map(v => v.resource && v.resource.channelName)
      })
      console.log('abilityList.value------------>', abilityList.value);
    },
    (err) => {
      message.error(err)
    }
  )
}
getIntegrationServicesDeatil(id)


</script>
<style lang="less" scoped>
.flex-row-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-row-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-pageconetent {
  width: 100%;
  background: rgb(247, 247, 250);
}

.content-box {
  width: 14rem;
  background: #fff;
  margin: 0 auto;
  padding: 0.84rem 0.4rem 0.4rem 0.4rem;
}

.package-title {
  padding: 10px 0;
  color: #000;
  font-size: 0.18rem;
}

.title-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 0;
  border-bottom: 2px solid #f0f0f0;
}

.bar {
  height: 26px;
  width: 6px;
  background: #0058e1;
  margin-right: 6px;
}

.title-text {
  font-size: 0.16rem;
}

.info-box {
  padding: 20px;
  align-items: flex-start;
}

.img {
  width: 5rem;
  height: 4rem;
  background-image: url('../../assets/home/integration/jcssDetail.png');
  background-size: 100%;
}

.right {
  padding: 0 0.2rem;
  flex: 1;
  position: relative;
  height: 4rem;
  box-sizing: border-box;

  .name {
    font-size: 0.16rem;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .area {
    margin-bottom: 20px;
  }

  .desc {
    font-size: 0.16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
  }
}

.btn-box {
  position: absolute;
  bottom: 0;
  left: 0.2rem;

  .btn-text {
    bottom: 0.2rem;
    height: 0.4rem;
    width: 1.2rem;
    margin-right: 0.2rem;
  }
}

.tag {
  padding: 4px 10px;
  background: #40a9ff;
  color: #fff;
  font-size: 0.12rem;
  border-radius: 20px;
}
</style>