|
|
@@ -15,39 +15,69 @@
|
|
|
{{ registered === 1 ? '已报名' : '报名' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="info-box">
|
|
|
- <div style="margin-bottom: 20px;" class="sk-info">
|
|
|
- <div class="img-box">
|
|
|
- <img :src="actInfo.posterSas" alt="">
|
|
|
- </div>
|
|
|
- <p style="text-align: center; font-size: 20px;font-weight: bold; margin: 20px 0;">
|
|
|
- <span>{{ $tools.formatTime(actInfo.stime, 'yyyy-MM-dd') }}</span> - <span>{{ $tools.formatTime(actInfo.etime, 'yyyy-MM-dd') }}</span>
|
|
|
- </p>
|
|
|
- <p>主题：{{ actInfo.subject || '-' }}</p>
|
|
|
- <p>简介：{{ actInfo.description || '-' }}</p>
|
|
|
- <p>地点：{{ actInfo.address || '-' }}</p>
|
|
|
- <p>主办：
|
|
|
- <span v-for="(item, index) in actInfo.zb" :key="index">{{ item || '-' }}</span>
|
|
|
- </p>
|
|
|
- <p>承办：
|
|
|
- <span v-for="(item, index) in actInfo.zb" :key="index">{{ item || '-' }}</span>
|
|
|
- </p>
|
|
|
- <p>免责声明：{{ actInfo.mzsm || '-' }}</p>
|
|
|
- <div style="display: flex; margin: 10px;">
|
|
|
- <p style="min-width: 50px;">附件：</p>
|
|
|
- <div v-if="actInfo.attachment.length">
|
|
|
- <p v-for="item in actInfo.attachment" :key="item.blob" @click="onPreview(item)" class="attach-name">{{ item.name }}</p>
|
|
|
+ <div style="height: 94%">
|
|
|
+ <el-scrollbar>
|
|
|
+ <div class="info-box">
|
|
|
+ <div class="sk-info">
|
|
|
+ <div class="img-box">
|
|
|
+ <img :src="actInfo.posterSas" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="activity-info">
|
|
|
+ <h1 class="title-time">
|
|
|
+ <span>活动信息</span>
|
|
|
+ <span style="font-size: 16px; color: #205bd0;">
|
|
|
+ <span>{{ $tools.formatTime(actInfo.stime, 'yyyy-MM-dd') }}</span> - <span>{{ $tools.formatTime(actInfo.etime, 'yyyy-MM-dd') }}</span>
|
|
|
+ </span>
|
|
|
+ </h1>
|
|
|
+ <div class="detail-info">
|
|
|
+ <p>主题：{{ actInfo.subject || '-' }}</p>
|
|
|
+ <p>简介：{{ actInfo.description || '-' }}</p>
|
|
|
+ <p>地点：{{ actInfo.address || '-' }}</p>
|
|
|
+ <p>主办：
|
|
|
+ <span v-for="(item, index) in actInfo.zb" :key="index">{{ item || '-' }}</span>
|
|
|
+ </p>
|
|
|
+ <p>承办：
|
|
|
+ <span v-for="(item, index) in actInfo.zb" :key="index">{{ item || '-' }}</span>
|
|
|
+ </p>
|
|
|
+ <p>免责声明：{{ actInfo.mzsm || '-' }}</p>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <p style="min-width: 50px;">附件：</p>
|
|
|
+ <div v-if="actInfo.attachment.length">
|
|
|
+ <p v-for="item in actInfo.attachment" :key="item.blob" @click="onPreview(item)" class="attach-name">{{ item.name }}</p>
|
|
|
+ </div>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="actInfo.modules">
|
|
|
+ <div v-if="actInfo.modules.includes('Contest')" class="activity-info">
|
|
|
+ <h1 class="title-time">赛课活动</h1>
|
|
|
+ <div class="detail-info">
|
|
|
+ <el-steps :active="contestStep" align-center>
|
|
|
+ <el-step v-for="(item, index) in contest.modules" :key="index" :title="skModuleList[index]">
|
|
|
+ <template v-slot:icon>
|
|
|
+ <el-icon v-show="item === 'sign'" size="20"><Edit /></el-icon>
|
|
|
+ <el-icon v-show="item === 'upload'" size="20"><Folder /></el-icon>
|
|
|
+ <el-icon v-show="item === 'review'" size="20"><Finished /></el-icon>
|
|
|
+ <el-icon v-show="item === 'score'" size="20"><CircleCheck /></el-icon>
|
|
|
+ </template>
|
|
|
+ <template v-slot:description>
|
|
|
+ <span>
|
|
|
+ {{ $tools.formatTime(contest[item].stime, 'yyyy-MM-dd') }}
|
|
|
+ -
|
|
|
+ {{ $tools.formatTime(contest[item].etime, 'yyyy-MM-dd') }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
- <span v-else>-</span>
|
|
|
</div>
|
|
|
- <p v-if="actInfo.modules">
|
|
|
- <el-tag effect="dark" v-if="actInfo.modules.includes('Contest')">
|
|
|
- 赛课模块
|
|
|
- </el-tag>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <!-- <el-button type="success" @click="joinBtn">报名</el-button> -->
|
|
|
+ </el-scrollbar>
|
|
|
</div>
|
|
|
+ <!-- <el-button type="success" @click="joinBtn">报名</el-button> -->
|
|
|
<el-drawer v-model="joinDra">
|
|
|
<template #header>
|
|
|
<h4>活动报名</h4>
|
|
|
@@ -153,11 +183,25 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-drawer>
|
|
|
+ <div v-if="previewStatus" class="image-viewer">
|
|
|
+ <div style="width:fit-content;position:relative;margin:auto;" v-if="previewFile.type != 'image'">
|
|
|
+ <el-icon class="close-icon" @click="previewStatus = false"><CloseBold /></el-icon>
|
|
|
+ <video v-if="previewFile.type == 'video'" id="previewVideo" :src="previewFile.urlShow" width="870"
|
|
|
+ controls="controls" style="max-height: 800px;">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ <audio v-else-if="previewFile.type === 'audio'" controls>
|
|
|
+ <source :src="previewFile.urlShow">
|
|
|
+ 您的浏览器不支持 audio 元素。
|
|
|
+ </audio>
|
|
|
+ </div>
|
|
|
+ <el-image-viewer v-else hide-on-click-modal @close="previewStatus = false" :url-list="[previewFile.urlShow]" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ArrowLeft, WarningFilled, Search, CircleCheck, CircleClose, CaretBottom, CaretRight, Message } from '@element-plus/icons-vue'
|
|
|
+import { ArrowLeft, WarningFilled, Search, CircleCheck, CircleClose, CaretBottom, CaretRight, Message, Edit, Finished, Folder, CloseBold } from '@element-plus/icons-vue'
|
|
|
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
|
|
|
import { useStore } from "@/pinia/common"
|
|
|
import { reactive, ref, onMounted, watch, toRaw, getCurrentInstance } from 'vue'
|
|
|
@@ -172,7 +216,9 @@ let skModule = ref(true)
|
|
|
let yxModule = ref(true)
|
|
|
let jyModule = ref(true)
|
|
|
let codeSearch = ref(true) //搜索标识码
|
|
|
+let previewStatus = ref(false)
|
|
|
let registered = ref(0) //是否可以报名 0:可以 1:已经报名 2:所在学校未被邀请 3:不在报名时间
|
|
|
+let contestStep = ref(0)
|
|
|
let schoolIndex = ref('')
|
|
|
let contest = ref({})
|
|
|
let research = ref({})
|
|
|
@@ -181,6 +227,7 @@ const infoId = ref(route.params.info)
|
|
|
const actInfo = ref({attachment: []})
|
|
|
let teamMembers = ref([])
|
|
|
let rules = ref({})
|
|
|
+let previewFile = ref({})
|
|
|
let enrollForm = ref(null)
|
|
|
|
|
|
let loading = reactive({
|
|
|
@@ -203,6 +250,7 @@ const enrollData = reactive({
|
|
|
type: null, //1团队。0个人
|
|
|
enrollInfos: [],
|
|
|
})
|
|
|
+const skModuleList = ref(['报名', '上传', '评审', '公示'])
|
|
|
|
|
|
const validateInfo = (rule, value, callback) => {
|
|
|
let info = enrollData.enrollInfos.find(item => item.code === rule.field)
|
|
|
@@ -234,7 +282,7 @@ function getListInfo() {
|
|
|
if(res.code === 200) {
|
|
|
res.activity.posterSas = !res?.activity.poster ? require('@/assets/img/no-poster-cn.png') : res?.activity.url + res?.activity.poster + '?' + res?.activity.sas
|
|
|
res?.activity.attachment.forEach(item => {
|
|
|
- item.urlSas = res?.activity.url + item.url + '?' + res?.activity.sas
|
|
|
+ item.urlShow = res?.activity.url + item.url + '?' + res?.activity.sas
|
|
|
})
|
|
|
actInfo.value = res.activity
|
|
|
// 公开 && 未指定学校 可以参加
|
|
|
@@ -253,6 +301,12 @@ function getListInfo() {
|
|
|
}
|
|
|
|
|
|
let nowTime = Date.parse(new Date())
|
|
|
+ res.contest.modules.forEach((item, index) => {
|
|
|
+ res.contest[item].actState = nowTime < res.contest[item].stime ? 'notStart' : (nowTime > res.contest[item].etime ? 'finish' : 'going')
|
|
|
+ if(res.contest[item].actState === 'going') {
|
|
|
+ contestStep = index === 1 ? (res.contest.sign.actState === 'going' ? 0 : 1) : index
|
|
|
+ }
|
|
|
+ })
|
|
|
contest.value = res.contest
|
|
|
enrollData.type = res.contest.sign.type
|
|
|
registered.value = nowTime > res.contest.sign.stime && nowTime < res.contest.sign.etime ? 0 : 3
|
|
|
@@ -459,6 +513,24 @@ function openDraw() {
|
|
|
joinDra.value = true
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+/* 预览 */
|
|
|
+async function onPreview(item) {
|
|
|
+ let url = item.urlShow
|
|
|
+ console.log('gr5e4gt4h', url);
|
|
|
+ if (proxy.$tools.getSuffix(item.name) === 'pdf') {
|
|
|
+ window.open('https://www.teammodel.cn/web/viewer.html?file=' + encodeURIComponent(url));
|
|
|
+ } else if(item.type === 'doc') {
|
|
|
+ window.open('https://view.officeapps.live.com/op/view.aspx?src=' + escape(url));
|
|
|
+ // } else if(item.type === 'image') {
|
|
|
+ // $hevueImgPreview(url)
|
|
|
+ } else if(item.type === 'link') {
|
|
|
+ window.open(/^(http:|https:)/i.test(url) ? url : "http://" + url)
|
|
|
+ } else {
|
|
|
+ previewFile.value = item
|
|
|
+ previewStatus.value = true
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
@@ -484,4 +556,20 @@ function openDraw() {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.detail-info {
|
|
|
+ .el-step__head.is-finish,
|
|
|
+ .el-step__title.is-finish,
|
|
|
+ .el-step__description.is-finish {
|
|
|
+ color: #85bc73;
|
|
|
+ border-color: #9cba92;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-step__head.is-process,
|
|
|
+ .el-step__title.is-process,
|
|
|
+ .el-step__description.is-process {
|
|
|
+ color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
