cxyy-web/src/views/detail/expertDetail.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="infoName">
            <el-image class="image" :src="userLogo" fit="fill" />
            <div class="other_1">
              <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>
              <div class="brief">
                <span>{{ info.title || '暂无' }}</span>
                <span v-if="info.area">{{ info.area || '暂无' }}</span>
              </div>
            </div>
          </div>
          <div class="infoButton">
            <div class="button" @click="toChat">获取联系方式</div>
          </div>
          <div class="infoBrief">
            <div class="Brief_1">
              <span>所属产业:</span>
              <span>{{ info.industry || '暂无' }}</span>
            </div>
            <div class="Brief_2" v-if="info.work">
              <span>工作单位:</span>
              <span>{{ info.work || '暂无' }}</span>
            </div>
            <div class="Brief_2" v-if="info.direction">
              <span>研究方向:</span>
              <span>{{ info.direction || '暂无' }}</span>
            </div>
          </div>
          <div class="infoOther">
            <div class="title">合作信息</div>
            <div class="content">
              <el-table :data="tableData" stripe style="width: 100%" :header-cell-style="{ backgroundColor: 'rgba(194, 209, 225, 0.5)', color: '#ffffff', fontSize: '16px', textAlign: 'center' }" :cell-style="{ fontSize: '16px', textAlign: 'center' }" :row-style="{ fontSize: '16px', textAlign: 'center' }">
                <el-table-column prop="company" label="合作单位" />
                <el-table-column prop="num" label="合作论文数量" />
              </el-table>
            </div>
          </div>
          <div class="infoOther">
            <div class="title">荣誉&成就</div>
            <div class="content">{{ info.title || '暂无' }}</div>
          </div>
          <div class="infoOther">
            <div class="title">科研成果</div>
            <div class="content">
              <div class="content_1">
                <div class="menu" :class="[active == '1' ? 'menuTrue' : '']" @click="toActive('1')">
                  <span>期刊论文</span>
                </div>
                <div class="menu" :class="[active == '2' ? 'menuTrue' : '']" @click="toActive('2')">
                  <span>科技成果</span>
                </div>
                <div class="menu" :class="[active == '3' ? 'menuTrue' : '']" @click="toActive('3')">
                  <span>专利</span>
                </div>
              </div>
              <div class="content_2">
                <div class="brief">
                  {{ info.brief || '暂无' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
import userLogo from '/images/userLogo.png'
import { ExpertStore } from '@/store/api/user/expert'
const store = ExpertStore()

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

import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 加载中
const loading = ref(false)
// 路由
const route = useRoute()
const tableData = ref([
  // { company: '中国科学院固定物理研究所', num: '45' },
  // { company: '中国汽车工程学会', num: '30' },
  // { company: '清华大学车辆与运载学院', num: '27' },
  // { company: '原一汽技术中心技术中心', num: '23' }
])
const active = ref('1')
const info = ref({})
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  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 searchOther = async () => {
  // let result
  // // 成熟度
  // result = await dictDataStore.query({ code: 'mature', is_use: '0' })
  // if ($checkRes(result)) matureList.value = result.data
  // // 出让方式
  // result = await dictDataStore.query({ code: 'sell', is_use: '0' })
  // if ($checkRes(result)) sellList.value = result.data
  // // 技术领域
  // result = await dictDataStore.query({ code: 'field', is_use: '0' })
  // if ($checkRes(result)) fieldList.value = result.data
  // // 属性
  // result = await dictDataStore.query({ code: 'attribute', is_use: '0' })
  // if ($checkRes(result)) attributeList.value = result.data
  // // 技术分类
  // result = await dictDataStore.query({ code: 'technology', is_use: '0' })
  // if ($checkRes(result)) technologyList.value = result.data
}
const toActive = (item) => {
  active.value = item
}
const toChat = () => {
  if (user.value.id) {
    ElMessageBox.confirm(`您确认要获取联系方式?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
      .then(async () => {
        ElMessage({ message: `获取联系方式成功等待消息通知`, type: 'success' })
      })
      .catch(() => {})
  } else ElMessage({ message: '未登录！', type: 'error' })
}
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: 'expert',
      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 {
    background: url(/images/expertBg.png) no-repeat;
    background-position: center top;
    .info_1 {
      padding: 30px 0;
    }
    .info_2 {
      border-radius: 5px;
      padding-right: 30px;
      padding: 50px;
      background: url(/images/userbg.png) no-repeat;
      background-position: center top;
      .infoName {
        display: flex;
        align-items: center;
        justify-content: center;
        .other_1 {
          margin: 0 0 0 10px;

          .info_title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .name {
              font-size: $global-font-size-22;
              font-weight: bold;
            }
            .collect {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              font-size: $global-font-size-20;
              width: 45%;
              color: #929292;
              cursor: default;
              span {
                margin: 0 0 0 5px;
              }
            }
            .iscollect {
              color: #1073ff;
            }
          }
          .brief {
            font-size: $global-font-size-18;
            color: $global-color-595;
            margin: 5px 0 0 0;
            span {
              margin: 0 5px 0 0;
            }
          }
        }
      }
      .infoButton {
        display: flex;
        justify-content: center;
        margin: 10px 0 0 0;
        .button {
          width: 152px;
          height: 36px;
          background: #3278f4;
          border-radius: 18px;
          font-size: $global-font-size-14;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
          line-height: 36px;
          cursor: pointer;
        }
      }

      .infoBrief {
        background: rgba(194, 209, 225, 0.5);
        padding: 20px;
        margin: 20px 0;
        border-radius: 5px;
        font-size: $global-font-size-18;
        .Brief_1 {
          margin: 10px 0;
          span:first-child {
            margin: 0 5px 0 0;
          }
          span:last-child {
            color: #dc4900;
            margin: 0 5px 0 0;
          }
        }
        .Brief_2 {
          margin: 10px 0;
          span:first-child {
            margin: 0 5px 0 0;
          }
          span:last-child {
            margin: 0 5px 0 0;
          }
        }
      }
      .infoOther {
        margin: 20px 0;
        border-radius: 5px;
        padding: 10px;
        background: #ffffff;
        box-shadow: 0 2px 5px 0 rgba(159, 158, 158, 0.3);
        .title {
          margin: 10px 0 10px;
          padding-left: 10px;
          height: 18px;
          line-height: 18px;
          font-size: 16px;
          font-weight: bold;
          color: #1073ff;
          border-left: 3px solid #1073ff;
        }
        .content {
          padding: 20px;
          font-size: $global-font-size-18;
          .content_1 {
            display: flex;
            align-items: center;
            .menu {
              padding: 10px 20px;
              margin: 0 10px 0 0;
              color: #666666;
              border: 1px solid #bbbbbb;
              cursor: default;
            }
            .menuTrue {
              color: $global-color-fff;
              background: #1073ff;
              border: none;
              cursor: default;
            }
          }
          .content_2 {
            margin: 10px 0;
            .brief {
              margin: 10px 0;
            }
          }
        }
      }
    }
  }
}
</style>