cxyy-web/src/views/detail/baseDetail.vue

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one">
      <div class="w_1300">
        <div class="info_1"></div>
        <div class="info_2">
          <div class="top">
            <div class="info_left">
              <el-carousel height="260px">
                <el-carousel-item v-for="(item, index) in info.logo" :key="index">
                  <el-image class="image" :src="getUrl(item.uri)" fit="fill" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="info_right">
              <div class="info_title">
                <div class="name">{{ info.name || '暂无' }}</div>
                <div class="collect iscollect" @click="toCollect" v-if="info.is_collection">
                  <el-icon :size="24" color="#1073ff"><StarFilled /></el-icon>
                  <span>已收藏</span>
                </div>
                <div class="collect" v-else @click="toCollect">
                  <el-icon :size="24"><Star /></el-icon>
                  <span>收藏</span>
                </div>
              </div>
              <el-col :span="24" class="other_1">
                <span>负责人姓名：</span>
                {{ info.person || '暂无' }}
              </el-col>
              <el-col :span="24" class="other_1">
                <span>是否和平台合作标识：</span>
                {{ getDict(info.cooperate, 'cooperate') || '暂无' }}
              </el-col>
              <el-col :span="24" class="other_1">
                <span>所在地区：</span>
                {{ getArea(info.area) || '暂无' }}
              </el-col>
            </div>
          </div>
          <div class="center">
            <div class="title">简介</div>
            <div class="content">
              <div v-if="info.brief" v-html="info.brief"></div>
            </div>
          </div>
          <div class="bottom">
            <div class="title">相关孵化基地</div>
            <div class="content">
              <el-row :gutter="16">
                <el-col :span="12" v-for="(item, index) in list" :key="index" @click="toView(item)">
                  <div class="list">
                    <el-col :span="24" class="name textOne">
                      <el-tooltip effect="dark" :content="item.name" placement="top">
                        {{ item.name || '暂无名称' }}
                      </el-tooltip>
                    </el-col>
                    <el-col :span="24" class="other">
                      <el-col :span="24" class="other_1">
                        <span>负责人姓名：</span>
                        {{ item.field || '暂无' }}
                      </el-col>
                      <el-col :span="24" class="other_1">
                        <span>所在地区：</span>
                        {{ getArea(item.area) || '暂无' }}
                      </el-col>
                    </el-col>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
const $checkRes = inject('$checkRes')
import { get } from 'lodash-es'
// 接口
import { IncubatorStore } from '@/store/api/user/incubator'
import { DictDataStore } from '@/store/api/system/dictData'
const store = IncubatorStore()
const dictDataStore = DictDataStore()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)

// 收藏
import moment from 'moment'
import { CollectionStore } from '@/store/api/platform/collection'
const collectionStore = CollectionStore()

// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
const route = useRoute()

const info = ref({})
// 列表
const list = ref([])
const isUseList = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  loading.value = false
})
const searchOther = async () => {
  const data = { skip: 0, limit: 3, status: '1', is_show: '0' }
  let res
  res = await store.query(data)
  if (res.errcode == '0') list.value = res.data
  // 是否使用
  const result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
  if ($checkRes(result)) isUseList.value = result.data
}
const search = async () => {
  let id = route.query.id
  if (id) {
    let res = await store.detail(id)
    if (res.errcode == '0') info.value = res.data
  }
}
// 查看
const toView = (item) => {
  router.push({ path: '/base/detail', query: { id: item.id || item._id } })
}
const getUrl = (item) => {
  if (item) return `${import.meta.env.VITE_APP_HOST}${item}`
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'cooperate') res = isUseList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 地区
const getArea = (data) => {
  if (data) return data.join('-')
  else return '暂无地区'
}
const toCollect = async () => {
  if (user.value.id) {
    info.value.is_collection = !info.value.is_collection
    let res
    let message
    const data = {
      user: user.value.id,
      source: info.value.id,
      type: 'incubator',
      time: moment().format('YYYY-MM-DD')
    }
    if (info.value.is_collection) {
      message = '收藏成功'
      res = await collectionStore.create(data)
    } else {
      message = '取消收藏成功'
      res = await collectionStore.cancel(data)
    }
    if (res.errcode === 0) {
      ElMessage({ message, type: 'success' })
      await search()
    }
  } else ElMessage({ message: '未登录！', type: 'error' })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    padding-bottom: 40px;
    background: #f9faff url(/images/fw-det-bg.jpg) center top no-repeat;
    .info_1 {
      padding: 30px 0;
    }
    .info_2 {
      background-color: #fff;
      box-shadow: 0 0 13px 0 rgba(14, 5, 10, 0.16);
      padding: 27px;
      margin-bottom: 20px;
      .top {
        display: flex;
        .info_left {
          width: 460px;
          height: 260px;
          .image {
            height: 100%;
            width: 100%;
          }
        }
        .info_right {
          margin-left: 40px;
          width: 740px;
          .info_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;

            .name {
              color: #22284e;
              font-size: $global-font-size-26;
              line-height: 26px;
            }
            .collect {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              width: 35%;
              font-size: $global-font-size-20;
              color: #929292;
              cursor: default;
              span {
                margin: 0 0 0 5px;
              }
            }
            .iscollect {
              color: #1073ff;
            }
          }
          .other_1 {
            font-size: $global-font-size-18;
            margin: 10px 0;
            span {
              color: #686f7b;
              margin-left: 0;
              margin-right: 15px;
            }
          }
        }
      }
      .center {
        margin: 20px 0 0 0;
        .title {
          color: #000;
          display: inline-block;
          margin-right: 80px;
          padding-bottom: 20px;
          font-size: $global-font-size-20;
          color: #000000;
          border-bottom: 5px solid #378cff;
          cursor: pointer;
        }
        .content {
          padding: 20px;
          font-size: $global-font-size-16;
        }
      }
      .bottom {
        margin: 20px 0 0 0;
        .title {
          color: #000;
          display: inline-block;
          margin-right: 80px;
          padding-bottom: 20px;
          font-size: $global-font-size-20;
          color: #000000;
          border-bottom: 5px solid #378cff;
          cursor: pointer;
        }
        .content {
          padding: 20px 0;
          .list {
            float: left;
            width: 565px;
            height: 159px;
            border: solid 1px #cedbe7;
            background: url(/images/bg-teclist.jpg) no-repeat right;
            padding: 25px 0 0;
            margin: 10px 5px;
            .name {
              font-size: $global-font-size-20;
              font-weight: bold;
              display: inline-block;
              margin: 0 0 20px 7px;
            }

            .name:hover {
              color: #2374ff;
              cursor: pointer;
            }
            .other {
              .other_1 {
                margin: 10px 0;
                width: 100%;
                font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial, sans-serif;
                font-size: $global-font-size-18;
                font-weight: normal;
                color: #666;
              }

              .other_1:hover {
                color: #2374ff;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>