准备验证

src/views/stuwork/activityinfo/detail.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-dialog 
+    title="查看详情" 
+    v-model="visible" 
+    :close-on-click-modal="false" 
+    draggable
+    width="800px">
+    <div v-loading="loading" class="detail-container" v-if="detailData">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="活动主题" :span="2">
+          {{ detailData.activityTheme || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="活动说明" :span="2">
+          {{ detailData.remarks || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="活动兼报数">
+          {{ detailData.maxSub !== undefined && detailData.maxSub !== null ? detailData.maxSub : '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="开始时间">
+          {{ parseTime(detailData.startTime, '{y}-{m}-{d}') }}
+        </el-descriptions-item>
+        <el-descriptions-item label="结束时间">
+          {{ parseTime(detailData.endTime, '{y}-{m}-{d}') }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visible = false">关 闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="ActivityInfoDetailDialog">
+import { ref } from 'vue'
+import { getDetail } from '/@/api/stuwork/activityinfo'
+import { parseTime } from '/@/utils/formatTime'
+import { useMessage } from '/@/hooks/message'
+
+// 定义变量内容
+const visible = ref(false)
+const loading = ref(false)
+const detailData = ref<any>({})
+
+// 打开弹窗
+const openDialog = async (id: string) => {
+  visible.value = true
+  loading.value = true
+  detailData.value = {}
+  
+  try {
+    const res = await getDetail(id)
+    if (res.data) {
+      detailData.value = res.data
+    }
+  } catch (err: any) {
+    useMessage().error(err.msg || '获取详情失败')
+    visible.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+// 暴露方法
+defineExpose({
+  openDialog
+})
+</script>
+
+<style scoped lang="scss">
+.detail-container {
+  padding: 20px 0;
+}
+</style>
+