cxyy-web/src/views/detail/serviceDetail.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.file" :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.field || '暂无服务领域' }}
              </el-col>
              <el-col :span="24" class="other_1">
                <span>登记时间：</span>
                {{ info.time || '暂无运营主体' }}
              </el-col>
            </div>
          </div>
          <div class="center">
            <div class="title">简介</div>
            <div class="content">{{ info.brief || '暂无' }}</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="12" class="other_1">
                        <span>服务领域：</span>
                        {{ item.field || '暂无服务领域' }}
                      </el-col>
                      <el-col :span="12" class="other_1">
                        <span>登记时间：</span>
                        {{ item.time || '暂无运营主体' }}
                      </el-col>
                    </el-col>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
// 接口
import { SupportStore } from '@/store/api/platform/support'
const store = SupportStore()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
const route = useRoute()

const info = ref({})
// 列表
const list = 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_use: '0'
  }
  let res
  res = await store.query(data)
  if (res.errcode == '0') list.value = res.data
}
const search = async () => {
  let id = route.query.id
  if (id) {
    let res = await store.fetch(id)
    if (res.errcode == '0') info.value = res.data
  }
}
// 查看
const toView = (item) => {
  router.push({ path: '/service/detail', query: { id: item.id || item._id } })
}
const getUrl = (item) => {
  if (item) return `${import.meta.env.VITE_APP_HOST}${item}`
}
const toCollect = async () => {
  if (user.value.id) {
    info.value.is_collection = !info.value.is_collection
  } 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 50px 7px;
            }

            .name:hover {
              color: #2374ff;
              cursor: pointer;
            }
            .other {
              display: flex;
              .other_1 {
                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>