cxyy-web2/src/views/detail/projectDetail.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="info_left">
            <div class="inose_top">
              <div class="img">
                <el-image class="image" :src="biao_1" fit="fill"></el-image>
              </div>
              <div class="ba_tile">
                项目来源：
                <span class="hui_text textMore">{{ info.source || '暂无' }}</span>
              </div>
              <div class="ba_tile">
                所属产业：
                <span class="hui_text textMore">{{ info.industry || '暂无' }}</span>
              </div>
              <div class="ba_tile">
                跟踪支持单位：
                <span class="hui_text textMore">{{ info.track_unit || '暂无' }}</span>
              </div>
              <div class="ba_tile">
                项目主体：
                <span class="hui_text textMore">{{ info.main || '暂无' }}</span>
              </div>
              <div class="ba_tile">
                项目进展：
                <span class="hui_text textMore">{{ info.progress || '暂无' }}</span>
              </div>
            </div>
            <div class="inose_top">
              <div class="img">
                <el-image class="image" :src="biao_2" fit="fill"></el-image>
              </div>
              <div class="other_1">
                <div class="name">{{ info.person || '暂无' }}</div>
                <div class="button" @click="toChat">预约对接</div>
              </div>
            </div>
            <div class="inose_top">
              <div class="img">
                <el-image class="image" :src="biao_3" fit="fill"></el-image>
              </div>
              <div class="wenbe_text">
                <span v-if="is_show">{{ info.brief || '暂无' }}</span>
                <span v-else>{{ truncateString(info.brief, 100) }}</span>
                <span v-if="info.brief && info.brief.length > 100">
                  <span v-if="!is_show" class="anniu_btn" @click="is_show = true">《点击查看更多》</span>
                  <span v-else class="anniu_btn" @click="is_show = false">《点击收起更多》</span>
                </span>
              </div>
            </div>
          </div>
          <div class="info_right">
            <div class="right_title">
              <div class="type">{{ info.progress || '暂无' }}</div>
              <div class="title textOne">项目商业计划书</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>
            <div class="pdf_item" :class="['image' + num]">
              <div class="pdf_type textOne">{{ info.industry || '暂无' }}</div>
              <div class="title">
                <p class="ellipsis-3">{{ info.name || '暂无' }}</p>
              </div>
              <div class="address">
                <el-icon color="#595959"><Location /></el-icon>
                <span class="textOne">{{ info.main || '暂无' }}</span>
              </div>
              <div class="biaoqian textOne">
                <span v-if="info.technology">{{ info.technology }}</span>
                <span v-if="info.sell">{{ info.sell }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="info_4" v-if="info.file && info.file.length > 0">
          <div class="title">项目附件</div>
          <div class="file">
            <el-link :href="info.file[0].url" target="_blank">{{ info.file[0].name }}</el-link>
          </div>
        </div>
        <div class="info_3">
          <div class="right_1">
            <div class="title">
              <div class="title_1">成果推荐</div>
              <div class="title_2" @click="toMore('0')">更多></div>
            </div>
            <div class="content_2">
              <div class="list" v-for="(item, index) in achievementList" :key="index" @click="toView(item, '0')">
                <div class="name">
                  <el-image class="image" :src="liIcon" fit="fill"></el-image>
                  <span>{{ item.name || '暂无' }}</span>
                </div>
                <span>{{ item.source || '暂无' }}</span>
              </div>
            </div>
          </div>
          <div class="right_1">
            <div class="title">
              <div class="title_1">项目推荐</div>
              <div class="title_2" @click="toMore('1')">更多></div>
            </div>
            <div class="content_2">
              <div class="list" v-for="(item, index) in projectList" :key="index" @click="toView(item, '1')">
                <div class="name">
                  <el-image class="image" :src="liIcon" fit="fill"></el-image>
                  <span>{{ item.name || '暂无' }}</span>
                </div>
                <span>{{ item.source || '暂无' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
import liIcon from '/images/li-icon.png'
import biao_1 from '/images/biao_1.png'
import biao_2 from '/images/biao_2.png'
import biao_3 from '/images/biao_3.png'

// 接口
import { ProjectStore } from '@/store/api/platform/project'
import { AchievementStore } from '@/store/api/platform/achievement'
import { ContactApplyStore } from '@/store/api/user/contactApply'
const store = ProjectStore()
const achievementStore = AchievementStore()
const contactApplyStore = ContactApplyStore()
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 is_show = ref(false)
const num = ref(Math.floor(Math.random() * 8))
// 路由
const route = useRoute()
const router = useRouter()
const info = ref({})
const achievementList = ref([])
const projectList = ref([])

// 请求
onMounted(async () => {
  loading.value = true
  await search()
  await searchAchievement()
  await searchAchieve()
  loading.value = false
})
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 searchAchieve = async () => {
  const data = { skip: 0, limit: 3, is_use: '0', status: '1', industry: info.value.industry }
  const res = await store.list(data)
  if (res.errcode == '0') projectList.value = res.data
}
const searchAchievement = async () => {
  const data = { skip: 0, limit: 3, status: '1' }
  const res = await achievementStore.query(data)
  if (res.errcode == '0') achievementList.value = res.data
}
// 查看
const truncateString = (str, length) => {
  if (!str) return '暂无'
  if (str.length <= length) {
    return str // 如果字符串长度小于等于所需长度，直接返回
  } else {
    return str.substring(0, length) + '...' // 否则返回前length个字符并加上省略号
  }
}
// 查看详情
const toView = (item, type) => {
  if (user.value.id) {
    if (type == '0') router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
    else if (type == '1')
      router.push({ path: '/project/detail', query: { id: item.id || item._id } }).then(() => {
        // 重新刷新页面
        location.reload()
      })
  } else ElMessage({ message: '未登录！', type: 'error' })
}
// 查看更多
const toMore = (type) => {
  if (type == '0') router.push({ path: '/expert' })
  else if (type == '1') router.push({ path: '/project' })
}
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: 'project',
      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' })
}
const toChat = () => {
  if (user.value.id) {
    ElMessageBox.confirm(`您确认要预约对接?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
      .then(async () => {
        let source_id = route.query.id
        let source = 'project'
        let apply_user = user.value.id
        const obj = { source_id, source, apply_user }
        const res = await contactApplyStore.create(obj)
        $checkRes(res,`预约对接成功等待消息通知`,res.errmsg)
      })
      .catch(() => {})
  } else ElMessage({ message: '未登录！', type: 'error' })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    padding-bottom: 40px;
    background: #f9faff url(/images/bg-gjsxm.jpg) center top no-repeat;
    .info_1 {
      padding: 30px 0;
    }
    .info_4 {
      padding: 0 50px 30px 50px;
      background: #fff;
      .title {
        color: #000;
        display: inline-block;
        margin-right: 80px;
        padding-bottom: 20px;
        font-size: $global-font-size-30;
        color: #000000;
        border-bottom: 5px solid #378cff;
        cursor: pointer;
      }
      .file {
        margin: 20px 0 0 0;
        .el-link {
          font-size: $global-font-size-20;
        }
      }
    }
    .info_2 {
      display: flex;
      border-radius: 5px;
      padding-right: 30px;
      padding: 50px;
      background: #fff;
      .info_left {
        width: 390px;
        .inose_top {
          font-size: $global-font-size-16;
          line-height: 30px;
          color: #3e3e3e;
          margin-bottom: 35px;
          .img {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .ba_tile {
            display: flex;
            .hui_text {
              color: #8a91b0;
              width: 268px;
              margin-left: 10px;
            }
          }
          .anniu_btn {
            font-size: $global-font-size-16;
            color: #2171f6;
            cursor: pointer;
          }
          .other_1 {
            display: flex;
            align-items: center;
            flex-direction: column;
            .name {
              font-size: $global-font-size-18;
            }
            .button {
              cursor: default;
              margin-top: 20px;
              justify-content: center;
              display: flex;
              align-items: center;
              width: 136px;
              height: 44px;
              color: #fff;
              font-size: $global-font-size-16;
              background-image: linear-gradient(90deg, #0455da 0%, #378cff 100%), linear-gradient(#0455da, #0455da);
              background-blend-mode: normal, normal;
              border-radius: 4px;
            }
          }
          .wenbe_text {
            font-size: $global-font-size-16;
            line-height: 26px;
            color: #8a91b0;
          }
        }
      }
      .info_right {
        text-align: center;
        min-width: 770px;
        margin-left: 35px;
        min-height: 417px;
        position: relative;
        .right_title {
          font-size: 20px;
          line-height: 45px;
          color: #303030;
          max-width: 530px;
          margin: 0 auto;
          .type {
            position: absolute;
            left: 0;
            top: 9px;
            width: 83px;
            height: 30px;
            background-image: linear-gradient(#fff 0%, #fff9e7 100%), linear-gradient(#fff 0%, #fff9e7 100%);
            border: 1px solid #ff6600;
            font-size: 16px;
            line-height: 30px;
            color: #ff6600;
            text-align: center;
          }
          .collect {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: $global-font-size-20;
            color: #929292;
            cursor: default;
            span {
              margin: 0 0 0 5px;
            }
          }
          .iscollect {
            color: #1073ff;
          }
        }
        .pdf_item {
          position: relative;
          width: 770px;
          height: 464px;
          margin: 10px 0 0 0;
          .pdf_type {
            text-align: left;
            font-size: 23px;
            line-height: 44px;
            color: #414141;
            padding-left: 78px;
            padding-top: 34px;
          }
          .title {
            padding: 0px 66px 0 88px;
            height: 74px;
            font-size: 30px;
            font-weight: bold;
            line-height: 38px;
            letter-spacing: 0px;
            color: #ffffff;
            margin-top: 68px;
            .ellipsis-3 {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              -webkit-line-clamp: 3;
            }
          }
          .address {
            margin-top: 138px;
            padding: 0 65px 0 0;
            font-size: 26px;
            color: #282828;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
          .biaoqian {
            padding: 20px 70px 0 5px;
            text-align: right;
            overflow: hidden;
            span {
              padding: 0 5px;
              background-color: #f5f8ff;
              border-radius: 3px;
              border: solid 1px #d2daec;
              font-size: $global-font-size-18;
              line-height: 26px;
              color: #7d8aaa;
              margin-right: 2px;
            }
          }
        }
        .image0 {
          background: url(/images/project/item_1.jpg) no-repeat;
        }
        .image1 {
          background: url(/images/project/item_2.jpg) no-repeat;
        }
        .image2 {
          background: url(/images/project/item_3.jpg) no-repeat;
        }
        .image3 {
          background: url(/images/project/item_4.jpg) no-repeat;
        }
        .image4 {
          background: url(/images/project/item_5.jpg) no-repeat;
        }
        .image5 {
          background: url(/images/project/item_6.jpg) no-repeat;
        }
        .image6 {
          background: url(/images/project/item_7.jpg) no-repeat;
        }
        .image7 {
          background: url(/images/project/item_9.jpg) no-repeat;
        }
      }
    }
    .info_3 {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      .right_1 {
        width: 50%;
        background-color: #ffffff;
        box-shadow: 0px 0px 16px 0px rgba(14, 5, 10, 0.11);
        border: solid 1px #e1e6f0;
        border-radius: 5px;
        .title {
          padding: 0 28px 0 24px;
          height: 52px;
          line-height: 52px;
          background-image: linear-gradient(90deg, #2070f6 0%, #629bf5 100%), linear-gradient(#1e6fff, #1e6fff);
          background-blend-mode: normal, normal;
          color: #fff;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          .title_1 {
            float: left;
            font-size: $global-font-size-16;
          }
          .title_2 {
            float: right;
            font-size: $global-font-size-14;
          }
        }
        .content_2 {
          margin: 10px 0;
          .list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            margin: 10px 12px;
            padding: 12px 10px;
            border-bottom: 1px solid #e1e6f0;
            transition: 0.3s ease-in-out;
            font-size: $global-font-size-16;
            cursor: default;
            .name {
              display: flex;
              align-items: center;
              .image {
                margin: 6px 5px 0 0;
              }
            }
          }
          .list:hover {
            box-shadow: 0 0 10px rgb(186, 196, 240); /* 阴影效果 */
          }
        }
      }
      .right_1:last-child {
        margin-left: 35px !important;
      }
    }
  }
}
</style>