You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
503 lines
12 KiB
503 lines
12 KiB
<!--教研管理-详情-->
|
|
<template>
|
|
<view class="dark-theme">
|
|
<view class="main_section">
|
|
<view class="section_1">
|
|
<view class="title">{{ infoData.title }}</view>
|
|
<view class="meta-info">
|
|
<text class="category">{{ getTableType(infoData.table_type) }}</text>
|
|
<text class="date">{{ infoData.create_time }}</text>
|
|
</view>
|
|
<view class="content" v-html="infoData.content"></view>
|
|
|
|
<!-- 附件区域 -->
|
|
<view v-if="infoData.url" class="attachment-section">
|
|
<view class="attachment-title">附件</view>
|
|
|
|
<!-- 图片类型 -->
|
|
<view v-if="attachmentType === 'image'" class="image-attachment">
|
|
<image
|
|
:src="getFullUrl(infoData.url)"
|
|
mode="aspectFit"
|
|
@click="previewImage(getFullUrl(infoData.url))"
|
|
class="attachment-image"
|
|
/>
|
|
<text class="attachment-tip">点击图片可放大预览</text>
|
|
</view>
|
|
|
|
<!-- 视频类型 -->
|
|
<view v-if="attachmentType === 'video'" class="video-attachment">
|
|
<video
|
|
:src="getFullUrl(infoData.url)"
|
|
controls
|
|
class="attachment-video"
|
|
poster=""
|
|
></video>
|
|
</view>
|
|
|
|
<!-- 文档类型 -->
|
|
<view v-if="attachmentType === 'document'" class="document-attachment">
|
|
<view class="document-info">
|
|
<view class="document-icon">📄</view>
|
|
<view class="document-details">
|
|
<text class="document-name">{{ getFileName(infoData.url) }}</text>
|
|
<text class="document-size">{{ getFileExtension(infoData.url).toUpperCase() }} 文件</text>
|
|
</view>
|
|
</view>
|
|
<button class="download-btn" @click="downloadFile(getFullUrl(infoData.url))">
|
|
下载文件
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 考试按钮 -->
|
|
<view v-if="infoData.exam_papers_id && infoData.exam_papers_id != 0" class="exam-section">
|
|
<button class="exam-btn" @click="goTake(infoData.exam_papers_id, infoData.id)">
|
|
开始考试
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view v-if="loading" class="loading">加载中...</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
articleId: '',
|
|
infoData: {
|
|
title: '',
|
|
content: '',
|
|
table_type: '',
|
|
create_time: '',
|
|
exam_papers_id: 0,
|
|
type: 1,
|
|
url: ''
|
|
},
|
|
tableTypeName: {
|
|
'1': "课程教学大纲",
|
|
'2': "跳绳教案库",
|
|
'3': "增高教案库",
|
|
'4': "篮球教案库",
|
|
'5': "强化教案库",
|
|
'6': "空中忍者教案库",
|
|
'7': "少儿安防教案库",
|
|
'8': "体能教案库",
|
|
'9': "热身动作库",
|
|
'10': "体能动作库",
|
|
'11': "趣味游戏库",
|
|
'12': "放松动作库",
|
|
'13': "训练内容",
|
|
'14': "训练视频",
|
|
'15': "课后作业",
|
|
'16': "优秀一堂课",
|
|
'17': "空中忍者",
|
|
'18': "篮球动作",
|
|
'19': "跳绳动作",
|
|
'20': "跑酷动作",
|
|
'21': "安防动作",
|
|
'22': "标准化动作",
|
|
'23': "3-6岁体测",
|
|
'24': "7+体测",
|
|
'25': "3-6岁体测讲解—解读",
|
|
'26': "7+岁体测讲解—解读",
|
|
'27': "互动游戏",
|
|
'28': "套圈游戏",
|
|
'29': "鼓励方式"
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
// 根据type字段判断附件类型
|
|
attachmentType() {
|
|
if (!this.infoData.url) return null;
|
|
|
|
const type = this.infoData.type;
|
|
// type: 1=文档, 2=文档, 3=图片, 4=视频
|
|
if (type === 3) {
|
|
return 'image';
|
|
} else if (type === 4) {
|
|
return 'video';
|
|
} else if (type === 1 || type === 2) {
|
|
return 'document';
|
|
}
|
|
|
|
// 如果type不明确，根据文件扩展名判断
|
|
const ext = this.getFileExtension(this.infoData.url).toLowerCase();
|
|
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
|
|
return 'image';
|
|
} else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'm3u8'].includes(ext)) {
|
|
return 'video';
|
|
} else {
|
|
return 'document';
|
|
}
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
this.articleId = options.id;
|
|
this.getInfo();
|
|
},
|
|
|
|
methods: {
|
|
// 获取教研管理文章详情
|
|
async getInfo() {
|
|
try {
|
|
this.loading = true;
|
|
const res = await apiRoute.teachingResearchInfo(this.articleId);
|
|
|
|
if (res.code === 1) {
|
|
this.infoData = res.data;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || '获取详情失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('获取教研管理详情失败:', error);
|
|
uni.showToast({
|
|
title: '网络错误，请稍后重试',
|
|
icon: 'none'
|
|
});
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
// 获取表类型名称
|
|
getTableType(type) {
|
|
return this.tableTypeName[type] || '未知类型';
|
|
},
|
|
|
|
// 跳转到考试页面
|
|
goTake(examId, articleId) {
|
|
uni.navigateTo({
|
|
url: '/pages-coach/coach/my/gotake_exam?id=' + examId + '&zid=' + articleId
|
|
});
|
|
},
|
|
|
|
// 获取完整URL（相对路径转绝对路径）
|
|
getFullUrl(url) {
|
|
if (!url) return '';
|
|
if (url.startsWith('http://') || url.startsWith('https://')) {
|
|
return url;
|
|
}
|
|
// 如果是相对路径，添加基础URL
|
|
return 'http://localhost:20080' + (url.startsWith('/') ? url : '/' + url);
|
|
},
|
|
|
|
// 图片预览
|
|
previewImage(url) {
|
|
uni.previewImage({
|
|
urls: [url],
|
|
current: url
|
|
});
|
|
},
|
|
|
|
// 文件下载
|
|
downloadFile(url) {
|
|
uni.showLoading({
|
|
title: '下载中...'
|
|
});
|
|
|
|
uni.downloadFile({
|
|
url: url,
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
// 获取文件扩展名
|
|
const extension = this.getFileExtension(url);
|
|
const fileName = this.getFileName(url);
|
|
|
|
// 保存到相册或文档
|
|
if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension.toLowerCase())) {
|
|
// 图片文件保存到相册
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
});
|
|
},
|
|
fail: (error) => {
|
|
console.error('保存图片失败:', error);
|
|
uni.showToast({
|
|
title: '保存失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
// 其他文件类型，打开文档
|
|
uni.openDocument({
|
|
filePath: res.tempFilePath,
|
|
showMenu: true,
|
|
success: () => {
|
|
console.log('打开文档成功');
|
|
},
|
|
fail: (error) => {
|
|
console.error('打开文档失败:', error);
|
|
uni.showToast({
|
|
title: '无法打开文件',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '下载失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
fail: (error) => {
|
|
console.error('下载失败:', error);
|
|
uni.showToast({
|
|
title: '下载失败',
|
|
icon: 'none'
|
|
});
|
|
},
|
|
complete: () => {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 获取文件名
|
|
getFileName(url) {
|
|
if (!url) return '';
|
|
const parts = url.split('/');
|
|
const fileName = parts[parts.length - 1];
|
|
return fileName.split('?')[0]; // 移除查询参数
|
|
},
|
|
|
|
// 获取文件扩展名
|
|
getFileExtension(url) {
|
|
if (!url) return '';
|
|
const fileName = this.getFileName(url);
|
|
const lastDotIndex = fileName.lastIndexOf('.');
|
|
return lastDotIndex !== -1 ? fileName.substring(lastDotIndex + 1) : '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dark-theme {
|
|
background-color: #121212;
|
|
color: #ffffff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.main_section {
|
|
padding: 20rpx 30rpx;
|
|
padding-bottom: 150rpx;
|
|
}
|
|
|
|
.section_1 {
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-bottom: 20rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.meta-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx solid #333;
|
|
|
|
.category {
|
|
color: #00d18c;
|
|
font-size: 24rpx;
|
|
background: rgba(0, 209, 140, 0.1);
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.date {
|
|
color: #b0b0b0;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
line-height: 1.8;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
|
|
// 处理内容中的图片
|
|
:deep(img) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8rpx;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
// 处理内容中的段落
|
|
:deep(p) {
|
|
margin: 20rpx 0;
|
|
line-height: 1.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.exam-section {
|
|
margin-top: 40rpx;
|
|
text-align: center;
|
|
|
|
.exam-btn {
|
|
background: linear-gradient(45deg, #00d18c, #00a374);
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 25rpx;
|
|
padding: 20rpx 60rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 209, 140, 0.3);
|
|
|
|
&:active {
|
|
transform: translateY(2rpx);
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 209, 140, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40rpx 0;
|
|
color: #b0b0b0;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
// 附件区域样式
|
|
.attachment-section {
|
|
margin-top: 30rpx;
|
|
padding: 30rpx;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 16rpx;
|
|
border: 1rpx solid #333;
|
|
|
|
.attachment-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #00d18c;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&::before {
|
|
content: '📎';
|
|
margin-right: 10rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
// 图片附件样式
|
|
.image-attachment {
|
|
text-align: center;
|
|
|
|
.attachment-image {
|
|
max-width: 100%;
|
|
max-height: 400rpx;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.attachment-tip {
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #b0b0b0;
|
|
}
|
|
}
|
|
|
|
// 视频附件样式
|
|
.video-attachment {
|
|
.attachment-video {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
border-radius: 12rpx;
|
|
background: #000;
|
|
}
|
|
}
|
|
|
|
// 文档附件样式
|
|
.document-attachment {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 12rpx;
|
|
border: 1rpx solid #444;
|
|
|
|
.document-info {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.document-icon {
|
|
font-size: 48rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.document-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.document-name {
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
word-break: break-all;
|
|
margin-bottom: 8rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.document-size {
|
|
font-size: 24rpx;
|
|
color: #b0b0b0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.download-btn {
|
|
background: linear-gradient(45deg, #00d18c, #00a374);
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 20rpx;
|
|
padding: 16rpx 32rpx;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 209, 140, 0.3);
|
|
min-width: 120rpx;
|
|
|
|
&:active {
|
|
transform: translateY(2rpx);
|
|
box-shadow: 0 1rpx 4rpx rgba(0, 209, 140, 0.3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|