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

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one" v-loading="loading">
      <div class="w_1300">
        <div class="info_1">
          <h3 class="name">{{ info.name || '暂无' }}</h3>
          <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>
          <p class="brief">{{ getDict(info.industry, 'industry') || '暂无行业' }}</p>
          <p class="money" v-if="info.money">奖金：{{ info.money || '暂无奖金' }}</p>
          <div class="other" v-if="info.match_type">
            <span>活动类型：</span>
            <span class="type">{{ getDict(info.match_type, 'type') || '暂无活动类型' }}</span>
          </div>
          <div class="other" v-if="info.match_status">
            <span>赛事状态：</span>
            <span class="status" :class="[info.match_status == '0' ? 'status0' : info.match_status == '1' ? 'status1' : 'status2']">
              {{ getDict(info.match_status, 'status') || '暂无赛事状态' }}
            </span>
          </div>
          <div class="time">
            <el-image class="image" :src="time" fit="fill"></el-image>
            <span>{{ info.start_time || '暂无开始时间' }} ~ {{ info.end_time || '暂无结束时间' }}</span>
          </div>
          <div class="button" @click="toSign" v-if="info.match_status == '1'">活动报名</div>
        </div>
        <div class="info_2">
          <div class="title">活动介绍</div>
          <div class="content">
            <!-- 正文 -->
            <div class="content_1">
              <div v-if="info.brief" v-html="info.brief"></div>
              <div v-else>暂无简介</div>
            </div>
            <div class="image" v-if="info.video">
              <template v-for="i in info.video" :key="i.uri">
                <video :src="i.uri" style="width: 331px; height: 182px" muted="muted" autoplay="autoplay" loop></video>
              </template>
            </div>
          </div>
        </div>
        <div class="info_3">
          <div class="title">活动说明</div>
          <div class="content">
            <div class="thr_cont" v-if="info.rules && info.rules.rules1">
              <div class="thr_1">大赛背景</div>
              <div class="thr_2">
                <div v-html="info.rules.rules1"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules2">
              <div class="thr_1">大赛主题和目标</div>
              <div class="thr_2">
                <div v-html="info.rules.rules2"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules3">
              <div class="thr_1">大赛基本情况介绍</div>
              <div class="thr_2">
                <div v-html="info.rules.rules3"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules4">
              <div class="thr_1">赛题任务</div>
              <div class="thr_2">
                <div v-html="info.rules.rules4"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules5">
              <div class="thr_1">赛程安排</div>
              <div class="thr_2">
                <div v-html="info.rules.rules5"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules6">
              <div class="thr_1">赛制阶段</div>
              <div class="thr_2">
                <div v-html="info.rules.rules6"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules7">
              <div class="thr_1">参赛资格</div>
              <div class="thr_2">
                <div v-html="info.rules.rules7"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules8">
              <div class="thr_1">参赛报名</div>
              <div class="thr_2">
                <div v-html="info.rules.rules8"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules9">
              <div class="thr_1">奖项设置与奖励办法</div>
              <div class="thr_2">
                <div v-html="info.rules.rules9"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules10">
              <div class="thr_1">组织单位</div>
              <div class="thr_2">
                <div v-html="info.rules.rules10"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules11">
              <div class="thr_1">赛事联络</div>
              <div class="thr_2">
                <div v-html="info.rules.rules11"></div>
              </div>
            </div>
            <div class="thr_cont" v-if="info.rules && info.rules.rules12">
              <div class="thr_1">赛事交流</div>
              <div class="thr_2">
                <div v-html="info.rules.rules12"></div>
              </div>
            </div>
            <div class="button" v-if="info.match_status == '1'" @click="toSign">活动报名</div>
          </div>
        </div>
        <div class="info_3" v-if="info.form == '3' && info.match_status == '3' && signList.length > 0">
          <div class="title">参演方信息</div>
          <div class="list" v-for="i in signList" :key="i.id">
            <el-card class="box-card">
              <template v-slot:header>
                <div class="clearfix">
                  <span>{{ i.company || '暂无' }}</span>
                  <el-button v-if="info.is_show == '1'" style="float: right; padding: 3px 0" type="text" @click="toChat(i)">获取联系方式</el-button>
                </div>
              </template>
              <div class="box-content">
                <div class="content_1"><span>路演名称：</span>{{ i.project_name || '暂无' }}</div>
                <div class="content_1"><span>路演介绍：</span>{{ i.project_brief || '暂无' }}</div>
                <div class="content_1" v-if="info.is_show == '0'"><span>联系方式：</span>{{ i.phone || '暂无' }}</div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="info_3" v-if="info.form == '4' && info.ext_status == '3'">
          <div class="title">初审结果公示</div>
          <div class="content_1" style="margin: 20px 0 0 0">
            <el-table :data="preliminaryList" :header-cell-style="{ backgroundColor: '#edf3ff' }">
              <template #empty>
                <el-empty description="暂无数据" />
              </template>
              <el-table-column align="center" prop="no" label="编号" width="100" />
              <el-table-column align="center" prop="user_name" label="姓名" />
              <el-table-column align="center" prop="start_time" label="初审时间" />
            </el-table>
          </div>
        </div>
        <div class="info_3" v-if="info.form == '4' && info.ext_status == '5'">
          <div class="title">决赛结果公示</div>
          <div class="content_1" style="margin: 20px 0 0 0">
            <el-table :data="finalsList" :header-cell-style="{ backgroundColor: '#edf3ff' }">
              <template #empty>
                <el-empty description="暂无数据" />
              </template>
              <el-table-column align="center" prop="no" label="编号" width="100" />
              <el-table-column align="center" prop="user_name" label="姓名" />
              <el-table-column align="center" prop="final_start_time" label="决赛时间" />
            </el-table>
          </div>
        </div>
      </div>
    </el-col>
  </custom-layout>
  <el-dialog v-model="dialog" title="活动报名" :destroy-on-close="true" @close="toClose">
    <form1 v-if="info.form != '3'"></form1>
    <form2 v-else></form2>
  </el-dialog>
</template>

<script setup>
import moment from 'moment'
import { get, cloneDeep } from 'lodash-es'
const $checkRes = inject('$checkRes')
// 组件
import form1 from './parts/form-1.vue'
import form2 from './parts/form-2.vue'
import time from '/images/time.png'
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 接口
import { DictDataStore } from '@/store/api/system/dictData'
import { MatchStore } from '@/store/api/platform/match'
import { ContactApplyStore } from '@/store/api/user/contactApply'
import { SignStore } from '@/store/api/platform/sign'
const dictDataStore = DictDataStore()
const store = MatchStore()
const signStore = SignStore()
const contactApplyStore = ContactApplyStore()
import { MatchExtStore } from '@/store/api/platform/matchExt'
const matchExtStore = MatchExtStore()
// 收藏
import { CollectionStore } from '@/store/api/platform/collection'
const collectionStore = CollectionStore()

// 加载中
const loading = ref(false)
// 路由
const route = useRoute()
// 路由
const router = useRouter()
const info = ref({})
// 报名
const signList = ref([])
// 弹框
const cardTypeList = ref([])
const typeList = ref([])
const statusList = ref([])
const industryList = ref([])
const signTypeList = ref([])
const ruleFormRef = ref()
const form = ref({})

// 初审公示
const preliminaryList = ref([])
// 决赛公示
const finalsList = ref([])

const validatePhoneNumber = (rule, value, callback) => {
  const reg = /^1[3-9]\d{9}$/
  if (!value) {
    return callback(new Error('手机号不能为空'))
  }
  if (!reg.test(value)) {
    return callback(new Error('请输入正确的手机号'))
  }
  callback()
}
const validateCardNumber = (rule, value, callback) => {
  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!value) {
    return callback(new Error('证件号码不能为空'))
  }
  if (!reg.test(value)) {
    return callback(new Error('请输入正确的证件号码'))
  }
  callback()
}
const rules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
  cardType: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
  card: [{ required: true, validator: validateCardNumber, trigger: 'change' }],
  remark: [{ 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: 'cardType', is_use: '0' })
  if ($checkRes(result)) cardTypeList.value = result.data
  // 赛事类型
  result = await dictDataStore.query({ code: 'activeType', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
  // 赛事状态
  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 行业
  result = await dictDataStore.query({ code: 'matchIndustry', is_use: '0' })
  if ($checkRes(result)) industryList.value = result.data
  // 报名类型
  result = await dictDataStore.query({ code: 'signType', is_use: '0' })
  if ($checkRes(result)) signTypeList.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
      if (res.data.form == '3') {
        const arr = await signStore.query({ match: res.data.id, status: '1', type: '1' })
        if (arr.errcode == '0') signList.value = arr.data
      }
      if (res.data.form == '4' && res.data.ext_status == '3') {
        await searchStep3()
      }
      if (res.data.form == '4' && res.data.ext_status == '5') {
        await searchStep5()
      }
    }
  }
}
// 查询初审公示名单
const searchStep3 = async () => {
  let id = route.query.id
  let res = await matchExtStore.step3Name(id)
  if (res.errcode == '0') {
    preliminaryList.value = res.data
  }
}
// 查询决赛公示名单
const searchStep5 = async () => {
  let id = route.query.id
  let res = await matchExtStore.step5Name(id)
  if (res.errcode == '0') {
    finalsList.value = res.data
  }
}
// 字典数据转换
const getDict = (data, model) => {
  if (data) {
    let res
    if (model == 'type') res = typeList.value.find((f) => f.value == data)
    else if (model == 'status') res = statusList.value.find((f) => f.value == data)
    else if (model == 'industry') res = industryList.value.find((f) => f.value == data)
    return get(res, 'label')
  }
}
// 报名参赛
const toSign = () => {
  if (info.value.form == '4') {
    router.push({ path: `/preliminary`, query: { id: info.value.id || info.value._id } })
  } else {
    if (info.value.match_type == '1') {
      window.open(info.value.href, '_blank') // 在新标签页中打开URL
    } else 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)
      const other = {
        match: info.value.id,
        time: moment().format('YYYY-MM-DD')
      }
      if (user.value.id) other.user = user.value.id
      let res = await signStore.create({ ...data, ...other })
      if ($checkRes(res, true)) toClose()
    } else {
      console.log('error submit!', fields)
    }
  })
}
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: 'match',
      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 = (item) => {
  if (user.value.id) {
    ElMessageBox.confirm(`您确认要获取联系方式?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
      .then(async () => {
        let source_id = item.id
        let source = 'sign'
        let apply_user = user.value.id
        const obj = { source_id, source, apply_user }
        const res = await contactApplyStore.signCreate(obj)
        if (res.errcode == 0) {
          ElMessage({ message: '申请联系方式等待消息通知', type: 'success' })
        } else {
          ElMessageBox.confirm(res.errmsg, '提示', { confirmButtonText: '确定', type: 'warning', showCancelButton: false, center: true })
            .then(() => {})
            .catch(() => {})
        }
      })
      .catch(() => {})
  } else ElMessage({ message: '未登录！', type: 'error' })
}
// provide
provide('form', form)
provide('rules', rules)
provide('ruleFormRef', ruleFormRef)
provide('cardTypeList', cardTypeList)
provide('signTypeList', signTypeList)
provide('submitForm', submitForm)
</script>
<style scoped lang="scss">
.main {
  .one {
    background: url(/images/matchBg.jpg) no-repeat;
    background-position: center top;
    .info_1 {
      padding: 90px 80px 0 80px;
      .name {
        font-size: $global-font-size-36;
        width: 70%;
        font-weight: bold;
      }
      .collect {
        display: flex;
        align-items: center;
        width: 35%;
        font-size: $global-font-size-20;
        color: #929292;
        cursor: default;
        span {
          margin: 0 0 0 5px;
        }
      }
      .iscollect {
        color: #1073ff;
      }
      .brief {
        font-size: $global-font-size-20;
        margin-top: 25px;
        color: #000;
      }
      .money {
        font-size: $global-font-size-20;
        margin-top: 25px;
        color: red;
      }
      .other {
        display: flex;
        align-items: center;
        margin: 10px 0;
        font-size: $global-font-size-18;
        .type {
          font-size: $global-font-size-12;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 70px;
          height: 25px;
          border-radius: 4px;
          text-align: center;
          line-height: 25px;
          font-weight: 700;
          color: #2a78ff;
          background: #eaf1ff;
        }
        .status {
          font-size: $global-font-size-12;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 70px;
          height: 25px;
          border-radius: 4px;
          text-align: center;
          line-height: 25px;
          font-weight: 700;
        }
        .status0 {
          color: #ff9407;
          background-color: #fff2e1;
        }
        .status1 {
          color: #2a78ff;
          background: #eaf1ff;
        }
        .status2 {
          color: #4f5050;
          background: #dcdcdd;
        }
      }

      .time {
        display: flex;
        margin-top: 60px !important;
        color: #666;
        font-size: $global-font-size-16;
        .image {
          width: 18px;
          height: 18px;
          margin: 0 5px 0 0;
        }
      }
      .button {
        cursor: pointer;
        margin-top: 70px !important;
        justify-content: center;
        display: flex !important;
        align-items: center;
        width: 136px;
        height: 44px;
        color: #fff;
        font-size: 16px;
        background-image: linear-gradient(90deg, #0455da 0%, #378cff 100%), linear-gradient(#0455da, #0455da);
        background-blend-mode: normal, normal;
        border-radius: 4px;
      }
    }
    .info_2 {
      padding: 0 80px;
      margin-top: 70px !important;
      .title {
        color: #000;
        display: inline-block;
        padding-bottom: 20px;
        font-size: $global-font-size-30;
        border-bottom: 5px solid #378cff;
        cursor: pointer;
      }
      .content {
        display: flex;
        margin-top: 50px;
        .content_1 {
          height: 200px;
          width: 630px;
          text-indent: 2em;
          font-size: 16px;
          line-height: 36px;
          color: #333333;
          overflow: hidden;
        }
        .image {
          margin-left: 66px;
          width: 331px;
          height: 182px;
        }
      }
    }
    .info_3 {
      padding: 80px !important;
      margin-top: 50px !important;
      background: #fff;
      .title {
        color: #000;
        display: inline-block;
        padding-bottom: 20px;
        font-size: $global-font-size-30;
        border-bottom: 5px solid #378cff;
        cursor: pointer;
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .thr_cont {
          text-align: center;
          margin: 10px 0;
          width: 100%;
          .thr_1 {
            color: #000;
            display: inline-block;
            padding-bottom: 10px;
            border-bottom: 5px solid #378cff;
            font-size: $global-font-size-20;
            cursor: pointer;
          }
          .thr_2 {
            padding: 20px;
          }
        }
        .button {
          cursor: pointer;
          margin-top: 70px !important;
          justify-content: center;
          display: flex !important;
          align-items: center;
          width: 136px;
          height: 44px;
          color: #fff;
          font-size: 16px;
          background-image: linear-gradient(90deg, #0455da 0%, #378cff 100%), linear-gradient(#0455da, #0455da);
          background-blend-mode: normal, normal;
          border-radius: 4px;
        }
        :deep(table) {
          border-collapse: collapse !important;
          width: 100% !important;
          text-align: center !important;
        }

        :deep(th) {
          border: 1px solid #ddd !important;
          padding: 8px !important;
        }

        :deep(td) {
          border: 1px solid #ddd !important;
          padding: 8px !important;
        }
        :deep(table tr:nth-child(even)) {
          background-color: #f2f2f2 !important;
        }

        :deep(table tr:hover) {
          background-color: #ddd !important;
        }
      }
      .list {
        margin: 20px 0 30px 0;
        font-size: $global-font-size-20;
        .box-card {
          .clearfix {
            span {
              font-weight: bold;
            }
          }
          .box-content {
            .content_1 {
              margin: 5px 0 15px 0;
              span {
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
</style>