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

<template>
  <!-- 青岛 -->
  <div class="details-pageconetent">
    <home-header></home-header>
    <div class="content-box" v-loading="loadingPage">
      <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">
          <a-image class="img" style="width:4rem;height:3rem" :preview="false" :src="imgUrl" />
          <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="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" style="margin-top: 30px">
        <div class="title-box">
          <div class="bar"></div>
          <span class="title-text">服务使用能力列表</span>
        </div>
        <div class="list-box">
          <packageAbilityList style="margin-bottom:20px" v-for="(item, i) in abilityList" :abilityInfo="item"
            :key="i" />
        </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 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'
import HomeHeader from '@/views/home/components/header'

const router = useRouter()
const id = router.currentRoute.value.query.id
const loadingPage = ref(false)

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

// 融合服务--详情
const getIntegrationServicesDeatil = (id) => {
  loadingPage.value = true
  getIntegrationDetail(id).then(
    (res) => {
      loadingPage.value = false
      if (res.data.code !== 0) {
        return message.error(res.data.msg)
      }
      detailInfoObj.value = res.data.data || {}
      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) || []
      })
      let imgList = detailInfoObj.value.fuseAttrList.filter((val) => val.attrType == '服务图片') || []
      imgUrl.value = imgList[0] && imgList[0].attrValue || ''
    },
    (err) => {
      loadingPage.value = false
      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: 0.2rem;
  align-items: flex-start;
}

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

.ant-image-img {
  height: 3rem;
  width: 4rem;
}

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

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

  .area {
    margin-bottom: 0.2rem;
  }

  .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;
}

.list-box {
  padding: 0.4rem;
}
</style>