cxyy-web2/src/views/detail/friendDetail.vue

<template>
  <custom-layout class="main">
    <el-col :span="24" class="elimage">
      <el-image class="image" :src="lists" fit="fill" />
    </el-col>
    <div class="w_1300">
      <el-col :span="24" class="one">
        <el-descriptions size="large" border>
          <el-descriptions-item align="center" label="名称">{{ info.name || '暂无' }}</el-descriptions-item>
          <el-descriptions-item align="center" label="LOGO">
            <el-image class="image" :src="getUrl(info.file)" fit="fill" />
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="24" class="two">
        <div class="title">上级合作伙伴简介</div>
        <div class="content">
          <div v-if="info.brief" v-html="info.brief"></div>
        </div>
      </el-col>
      <el-col :span="24" class="thr">
        <el-collapse v-model="activeName" @change="handleChange" accordion>
          <el-collapse-item :title="item.name" :name="item.id" v-for="(item, index) in list" :key="index">
            <div v-if="item.brief" v-html="item.brief"></div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </div>
  </custom-layout>
</template>

<script setup>
// 图片引入
import lists from '/images/company.png'
// 接口
import { FriendStore } from '@/store/api/platform/friend'
const friendStore = FriendStore()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 加载中
const loading = ref(false)
// 路由
const route = useRoute()

const list = ref([])
const info = ref({})
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  await searchOther()
  loading.value = false
})
const search = async () => {
  if (route.query.code) {
    const data = { skip: 0, limit: 5, is_use: '0', code: route.query.code }
    const res = await friendStore.list(data)
    if (res.errcode == '0') info.value = res.data[0]
  }
}
const searchOther = async () => {
  const info = { is_use: '0', parent_code: route.query.code }
  const res = await friendStore.list(info)
  if (res.errcode == '0') {
    list.value = res.data
    if (res.total > 0) activeName.value = res.data[0].id
  }
}
const getUrl = (item) => {
  if (item && item.length > 0) return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
}
const activeName = ref('1')
const handleChange = (val) => {
  console.log(val)
}
</script>
<style scoped lang="scss">
.main {
  .elimage {
    .image {
      width: 100%;
      height: 350px;
    }
  }
  .one {
    margin: 30px 0;
    .image {
      width: 200px;
      height: 140px;
    }
  }
  .two {
    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-18;
    }
  }
  .thr {
    margin: 30px 0;
  }
}
</style>