cxyy-web/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">{{ info.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">
              <el-image class="images" :src="getUrl(info.file, 'array')" fit="fill"></el-image>
            </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>
    </el-col>
  </custom-layout>
  <el-dialog v-model="dialog" title="活动报名" :destroy-on-close="true" @close="toClose">
    <data-form></data-form>
  </el-dialog>
</template>

<script setup>
import moment from 'moment'
import { get, cloneDeep } from 'lodash-es'
const $checkRes = inject('$checkRes')
// 组件
import dataForm from './parts/index.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 { SignStore } from '@/store/api/platform/sign'
const dictDataStore = DictDataStore()
const store = MatchStore()
const signStore = SignStore()

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

// 加载中
const loading = ref(false)
// 路由
const route = useRoute()
const info = ref({})
// 弹框
const cardTypeList = ref([])
const typeList = ref([])
const statusList = ref([])
const ruleFormRef = ref()
const form = 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
}
const search = async () => {
  let id = route.query.id
  if (id) {
    let res = await store.fetch(id)
    if (res.errcode == '0') info.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)
    return get(res, 'label')
  }
}
// 报名参赛
const toSign = () => {
  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 getUrl = (item, type) => {
  if (item) {
    if (type == 'array') return `${import.meta.env.VITE_APP_HOST}${get(item, '0.uri')}`
    else return `${import.meta.env.VITE_APP_HOST}${get(item, 'uri')}`
  }
}
// 报名
const submitForm = async (formEl) => {
  if (user.value.id) {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        const data = cloneDeep(form.value)
        const other = {
          match: info.value.id,
          user: user.value.id,
          time: moment().format('YYYY-MM-DD')
        }
        let res = await signStore.create({ ...data, ...other })
        if ($checkRes(res, true)) toClose()
      } else {
        console.log('error submit!', fields)
      }
    })
  } else {
    ElMessage.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: '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' })
}
// provide
provide('form', form)
provide('rules', rules)
provide('ruleFormRef', ruleFormRef)
provide('cardTypeList', cardTypeList)
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;
      }
      .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 {
        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 {
          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;
  }
}
</style>