technique_web2/src/views/innovation/detail.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-row :span="24" class="list">
              <div class="join" :class="[info.match_status == '0' ? 'join0' : 'join1']">
                {{ getDict(info.match_status, 'status') }}
              </div>
              <el-col :span="4" class="left">
                <el-image
                  v-if="info.file && info.file.length > 0"
                  class="image"
                  :src="info.file[0].url"
                  fit="fill"
                />
                <el-image v-else class="image" :src="news" fit="fill" />
              </el-col>
              <el-col :span="20" class="right">
                <el-col :span="24" class="right_1">
                  <span class="type">{{ getDict(info.form, 'form') }}</span>
                  <span class="title">{{ info.name || '暂无比赛名称' }}</span>
                </el-col>
                <el-col :span="24" class="right_2">
                  组织单位：{{ info.organization || '暂无组织单位' }}
                </el-col>
                <el-col :span="24" class="right_3">
                  <el-col :span="20" class="right_3Left">
                    比赛日期：{{ getTime(info.time) }}
                  </el-col>
                  <el-col :span="4" class="right_3Right">
                    {{ info.money || '免费' }}
                  </el-col>
                </el-col>
                <el-col :span="24" class="right_4">
                  <el-tag type="primary">{{ getDict(info.type, 'type') }}</el-tag>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" class="two">
            <el-row class="two_1">
              <el-col :span="22" class="twoLeft">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                  <el-tab-pane label="赛制规则" name="first"></el-tab-pane>
                  <el-tab-pane label="数据与评测" name="second"></el-tab-pane>
                  <el-tab-pane label="常见问题" name="third"></el-tab-pane>
                </el-tabs>
              </el-col>
              <el-col :span="2" class="twoRight">
                <a-button type="primary" @click="toSign"> 报名参赛 </a-button>
              </el-col>
            </el-row>
            <el-row class="two_2" v-if="activeName === 'first'">
              <el-container style="height: 500px">
                <el-aside width="200px">
                  <el-menu default-active="rules1" class="el-menu" @select="selectOpen">
                    <el-menu-item
                      :index="item.label"
                      v-for="(item, index) in menuList"
                      :key="index"
                    >
                      <el-icon><Opportunity /></el-icon>
                      <span>{{ item.title }}</span>
                    </el-menu-item>
                  </el-menu>
                </el-aside>
                <el-main>
                  <el-col :span="24">
                    <h2>{{ rulesInfo.title }}</h2>
                    <div class="rich-text-container" v-html="rulesInfo.content"></div>
                  </el-col>
                </el-main>
              </el-container>
            </el-row>
            <el-row class="two_2" v-if="activeName === 'second'"> 数据与评测 </el-row>
            <el-row class="two_2" v-if="activeName === 'third'">
              <div v-html="info.brief"></div>
            </el-row>
          </el-col>
          <el-col :span="24" class="thr">
            <el-col :span="24" class="thr_1"> 相关推荐 </el-col>
            <el-col :span="24" class="thr_2"> 1111 </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog" title="报名参赛" :destroy-on-close="true" @close="toClose">
      <data-form></data-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { get, cloneDeep } from 'lodash-es'
const $checkRes = inject('$checkRes')
// 组件
import dataForm from './parts/index.vue'
// 接口
import { DictDataStore } from '@/store/api/system/dictData'
import { MatchStore } from '@/store/api/platform/match'
const store = MatchStore()
const dictDataStore = DictDataStore()
// 图片引入
import news from '@/assets/news.png'
// 路由
const route = useRoute()
// 加载中
const loading = ref(false)
const info = ref({})
const rulesInfo = ref({})
const activeName = ref('first')
// 字典表
const statusList = ref([])
const typeList = ref([])
const formList = ref([])
const menuList = ref([
  { title: '大赛背景', label: 'rules1' },
  { title: '大赛主题和目标', label: 'rules2' },
  { title: '大赛基本情况介绍', label: 'rules3' },
  { title: '赛题任务', label: 'rules4' },
  { title: '赛程安排', label: 'rules5' },
  { title: '赛制阶段', label: 'rules6' },
  { title: '参赛资格', label: 'rules7' },
  { title: '参赛报名', label: 'rules8' },
  { title: '奖项设置与奖励办法', label: 'rules9' },
  { title: '组织单位', label: 'rules10' },
  { title: '赛事联络', label: 'rules11' },
  { title: '赛事交流', label: 'rules12' }
])
// 弹框
const form = ref({})
const rules = reactive({
  name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
  field: [{ required: true, message: '请选择行业领域', trigger: 'change' }],
  urgent: [{ required: true, message: '请选择需求紧急度', trigger: 'change' }],
  method: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
  money: [{ required: true, message: '请输入价格', trigger: 'blur' }],
  area: [{ required: true, message: '请选择需求地区', trigger: 'change' }],
  time: [{ required: true, message: '请选择起始时间', trigger: 'change' }],
  is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
  brief: [{ required: true, message: '请输入简介', trigger: 'blur' }]
})
const dialog = ref(false)
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  loading.value = false
})
const searchOther = async () => {
  let result
  // 类型
  result = await dictDataStore.query({ code: 'matchType', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
  // 类别
  result = await dictDataStore.query({ code: 'matchForm', is_use: '0' })
  if ($checkRes(result)) formList.value = result.data
  // 赛事状态
  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.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
      rulesInfo.value = { title: '大赛背景', key: 'rules1', content: res.data.rules.rules1 }
    }
  }
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'status') res = statusList.value.find((f) => f.value == data)
  else if (model == 'type') res = typeList.value.find((f) => f.value == data)
  else if (model == 'form') res = formList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 时间
const getTime = (data) => {
  if (data) return `${data[0]} - ${data[1]}`
}
const selectOpen = (key, keyPath) => {
  const res = menuList.value.find((f) => f.label == key)
  if (res) {
    rulesInfo.value = { title: get(res, 'title'), key, content: get(info.value.rules, key) }
  }
}
// 报名参赛
const toSign = () => {
  dialog.value = true
}
const toClose = () => {
  dialog.value = false
  form.value = {}
}
// 报名
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = cloneDeep(form.value)
      console.log(data)
    } else {
      console.log('error submit!', fields)
    }
  })
}
// provide
provide('form', form)
provide('rules', rules)
provide('submitForm', submitForm)
</script>
<style scoped lang="scss">
.main {
  background: rgb(248, 248, 248);
  .one {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;

    .list {
      display: flex;
      align-items: center;
      min-height: 150px;
      width: 100%;
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;
      border: 1px solid #f5f5f5;
      .left {
        display: flex;
        align-items: center;
        justify-content: center;
        .image {
          width: 180px;
          height: 120px;
        }
      }
      .right {
        .right_1 {
          padding: 10px 0 0 0;
          .type {
            padding-left: 4px;
            padding-right: 4px;
            height: 22px;
            line-height: 20px;
            background: #f8f9fc;
            border-radius: 1px;
            border: 1px solid #dde2e7;
            font-size: 12px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #a9b2c6;
            text-align: center;
            vertical-align: top;
            display: inline-block;
            margin-right: 8px;
          }
          .title {
            max-width: 88%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 16px;
            font-family:
              PingFangSC-Medium,
              PingFang SC;
            font-weight: 500;
            color: #222;
            line-height: 22px;
          }
        }
        .right_2 {
          padding: 5px 0;
          font-size: 12px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #666;
        }
        .right_3 {
          padding: 5px 0;
          display: flex;
          justify-content: space-between;
          .right_3Left {
            font-size: 12px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #949fb8;
          }
          .right_3Right {
            text-align: right;
            font-size: 16px;
            font-family:
              PingFangSC-Semibold,
              PingFang SC;
            font-weight: 600;
            color: #ff5602;
          }
        }
        .right_4 {
          padding-top: 10px;
          border-top: 1px solid #f3f3f3;
        }
      }
      .join {
        position: absolute;
        right: -23px;
        top: 10px;
        font-size: 12px;
        font-family:
          PingFangSC-Normal,
          PingFang SC;
        color: #fff;
        line-height: 21px;
        height: 21px;
        width: 100px;
        text-align: center;
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        padding-left: 9px;
      }
      .join0 {
        background: #e6f4fe;
        color: #638aa5;
      }
      .join1 {
        background: #ededed;
        color: #666c7d;
      }
    }
  }
  .two {
    margin: 20px 0;
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;
    .two_1 {
      border-bottom: 1px solid #e4e7ed;
      :deep(.el-tabs__nav-wrap:after) {
        background-color: transparent !important;
      }
    }
    .two_2 {
      padding: 15px;
      min-height: 500px;
      :deep(.el-aside)::-webkit-scrollbar {
        display: none;
      }
      h2 {
        padding-bottom: 0.3em;
        border-bottom: 1px solid #eaecef;
      }
      .rich-text-container {
        :deep(table) {
          border-collapse: collapse;
        }
        :deep(table) {
          border: 1px solid black;
        }
        :deep(th) {
          border: 1px solid black;
        }
        :deep(td) {
          border: 1px solid black;
        }
      }
    }
  }
  .thr {
    margin: 20px 0;
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;
    .thr_1 {
      padding: 10px;
      font-family: PingFangSC-Semibold;
      font-size: 18px;
      color: #383b40;
      letter-spacing: 0;
      line-height: 18px;
      font-weight: 600;
    }
  }
}
</style>