cxyy-web/src/views/detail/demandDetail.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="area">
            <el-icon color="#0085f5"><Location /></el-icon>
            <span>{{ getArea(info.area) }}</span>
          </div>
          <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="other">
            <span class="other_1">{{ getDict(info.urgent, 'urgent') || '暂无' }}</span>
            <div class="other_2">
              <p>
                资金预算：<span class="moeny">{{ info.money || '面议' }}</span>
              </p>
              <p>
                应用行业：<span>{{ info.field || '暂无' }} </span>
              </p>
              <p>
                截止时间：<span class="time">{{ getTime(info.time) || '暂无' }}</span>
              </p>
              <p>
                所属地区 ：<span> {{ getArea(info.area) || '暂无' }}</span>
              </p>
              <p>
                所属企业 ：<span>{{ info.company || '暂无' }}</span>
              </p>
              <p v-if="user && user.id">
                联 系 人 ：<span>{{ info.contacts || '暂无' }}</span>
              </p>
              <!-- <p v-if="user && user.id">
                联系电话：<span>{{ info.tel || '暂无' }}</span>
              </p> -->
            </div>
          </div>
          <div class="state">待解决</div>
        </div>
        <div class="title"><i></i>联系方式</div>
        <div class="infoButton">
          <div class="button" @click="toChat">获取联系方式</div>
        </div>
        <div class="title"><i></i>需求描述</div>
        <div class="info_3">
          <p>{{ info.brief || '暂无' }}</p>
        </div>
        <div class="title"><i></i>相关需求</div>
        <div class="info_4">
          <div class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
            <h2 class="name textMore">
              <span>{{ item.name || '暂无' }}</span>
            </h2>
            <div class="other">
              <span class="other_1">{{ getDict(item.urgent, 'urgent') || '暂无' }}</span>
              <div class="other_2">
                <span>应用行业：</span>
                {{ item.field || '暂无' }}
              </div>
              <div class="other_2">
                <span>资金预算：</span>
                {{ item.money || '面议' }}
              </div>
              <div class="other_2 textOne">
                <el-icon color="#0085f5"><Location /></el-icon>
                {{ getArea(item.area) }}
                <span class="state">{{ getDict(item.status, 'status') || '未解决' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
import { get } from 'lodash-es'
import { DictDataStore } from '@/store/api/system/dictData'
import { DemandStore } from '@/store/api/platform/demand'
const store = DemandStore()
const dictDataStore = DictDataStore()
// 收藏
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 $checkRes = inject('$checkRes')
// 加载中
const loading = ref(false)
// 路由
const route = useRoute()
const router = useRouter()
const info = ref({})
const list = ref([])
// 字典表
const fieldList = ref([])
const attributeList = ref([])
const matureList = ref([])
const sellList = ref([])
const technologyList = ref([])
const urgentList = ref([])
const statusList = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  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',
    field: info.value.field
  }
  const res = await store.list(data)
  if (res.errcode == '0') list.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
  // 需求紧急度
  result = await dictDataStore.query({ code: 'urgent', is_use: '0' })
  if ($checkRes(result)) urgentList.value = result.data
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'mature') res = matureList.value.find((f) => f.value == data)
  else if (model == 'status') res = statusList.value.find((f) => f.value == data)
  else if (model == 'sell') res = sellList.value.find((f) => f.value == data)
  else if (model == 'field') res = fieldList.value.find((f) => f.value == data)
  else if (model == 'attribute') res = attributeList.value.find((f) => f.value == data)
  else if (model == 'technology') res = technologyList.value.find((f) => f.value == data)
  else if (model == 'urgent') res = urgentList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 地区
const getArea = (data) => {
  if (data) return data.join('-')
  else return '暂无地区'
}
// 时间
const getTime = (data) => {
  if (data) return data.join('-')
  else return '暂无'
}
// 查看详情
const toView = (item) => {
  router.push({ path: '/demand/detail', query: { id: item.id || item._id } }).then(() => {
    // 重新刷新页面
    location.reload()
  })
}
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: 'demand',
      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 () => {
        ElMessage({ message: `获取联系方式成功等待消息通知`, type: 'success' })
      })
      .catch(() => {})
  } else ElMessage({ message: '未登录！', type: 'error' })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    background: url(/images/bg-need-detail.jpg) no-repeat;
    background-position: center top;
    padding-bottom: 30px;
    .info_1 {
      padding: 30px 0;
    }
    .info_2 {
      position: relative;
      padding: 0 40px;
      background-color: #fff;
      box-shadow: 0 0 13px 0 rgba(5, 88, 219, 0.18);
      .area {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 15px;
        font-size: $global-font-size-16;
        span {
          margin: 0 0 0 5px;
        }
      }
      .info_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          margin-top: 15px;
          font-size: $global-font-size-24;
          width: 90%;
          line-height: 36px;
          color: #2b2b2b;
        }
        .collect {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 10%;
          font-size: $global-font-size-20;
          color: #929292;
          cursor: default;
          span {
            margin: 0 0 0 5px;
          }
        }
        .iscollect {
          color: #1073ff;
        }
      }

      .other {
        margin-top: 25px;
        .other_1 {
          padding: 0 10px;
          height: 25px;
          background-color: #e6f2fd;
          border-radius: 2px;
          border: solid 1px #cae0f5;
          font-size: $global-font-size-14;
          line-height: 25px;
          color: #0085f5;
        }
        .other_2 {
          margin: 20px 0 0 0;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          p {
            margin-right: 20px;
            width: 45%;
            font-size: $global-font-size-18;
            color: #666;
            .moeny {
              font-family: keyifont;
              color: #f60;
            }
            span {
              color: #2b2b2b;
            }
          }
        }
      }
      .state {
        background: url(/images/icon-hzxq-state2.png);
        position: absolute;
        left: -36px;
        top: 0;
        padding: 17px 10px 0;
        width: 36px;
        height: 94px;
        color: #fff;
        font-size: $global-font-size-16;
      }
    }
    .infoButton {
      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;
      }
    }
    .title {
      margin-top: 30px;
      font-size: $global-font-size-20;
      line-height: 26px;
      color: #333;
      i {
        display: inline-block;
        vertical-align: middle;
        margin-right: 20px;
        width: 7px;
        height: 22px;
        background-color: #0085f5;
        border-radius: 3px;
      }
    }
    .info_3 {
      margin-top: 20px;
      padding: 40px;
      background-color: #fff;
      border: solid 1px #dedede;
      font-size: $global-font-size-16;
      line-height: 30px;
      color: #333;
    }
    .info_4 {
      display: flex;
      margin-top: 20px;
      .list {
        position: relative;
        margin-right: 30px;
        width: 380px;
        height: 233px;
        box-shadow: 0 0 13px 0 rgba(5, 88, 219, 0.18);
        .name {
          padding: 10px 20px;
          width: 380px;
          height: 71px;
          background-color: #dce5ff;
          font-size: 16px;
          line-height: 24px;
          color: #0d0d0d;
          display: flex;
          align-items: center;
        }
        .other {
          height: 162px;
          padding: 10px 20px 0 20px;
          .other_1 {
            padding: 0 10px;
            height: 25px;
            background-color: #e6f2fd;
            border-radius: 2px;
            border: solid 1px #cae0f5;
            font-size: $global-font-size-14;
            line-height: 25px;
            color: #0085f5;
          }
          .other_2 {
            display: flex;
            align-items: center;
            margin-top: 15px;
            font-size: $global-font-size-16;
            span {
              color: #909090;
            }
            .state {
              position: absolute;
              right: 20px;
              bottom: 15px;
              display: inline-block;
              vertical-align: middle;
              padding: 0 20px;
              height: 30px;
              line-height: 30px;
              background-image: linear-gradient(90deg, #ff8a00 0, #ff5a00 100%), linear-gradient(#ff7800, #ff7800);
              background-blend-mode: normal, normal;
              border-radius: 14px;
              border: solid 1px #e5e5e5;
              color: #fff;
            }
          }
        }
      }
      .list:hover {
        box-shadow: 0 0 5px 0 $global-color-107;
        .name {
          background-color: $global-color-107;
          color: $global-color-fff;
        }
      }
    }
  }
}
</style>