|
|
@@ -4,7 +4,50 @@
|
|
|
<div style="height: 25px"></div>
|
|
|
<div class="user-info-container">
|
|
|
<div class="video-info" style="width: 850px">
|
|
|
- <div style="width: 850px; height: 350px; background-color: aqua"></div>
|
|
|
+ <div
|
|
|
+ v-if="videoFormat == 'jpg' || videoFormat == 'bmp' || videoFormat == 'png' || videoFormat == 'jepg'"
|
|
|
+ style="width: 850px; height: 350px"
|
|
|
+ >
|
|
|
+ <!-- <img :src="imgs + itemData.coverImagePath" style="width: 100%; height: 100%" /> -->
|
|
|
+ <!-- <img :v-lazy="imagess" style="width: 100%; height: 100%" /> -->
|
|
|
+ <a-image width="850px" height="350px" :src="resSrc" :preview="true" />
|
|
|
+ <!-- <image :src="resSrc" style="object-fit: cover" /> -->
|
|
|
+ </div>
|
|
|
+ <!-- "wmv","avi","flv","mpeg","mpg","rmvb","mov","mkv" -->
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ videoFormat == 'mkv' ||
|
|
|
+ videoFormat == 'mp4' ||
|
|
|
+ videoFormat == 'wmv' ||
|
|
|
+ videoFormat == 'avi' ||
|
|
|
+ videoFormat == 'flv' ||
|
|
|
+ videoFormat == 'mpeg' ||
|
|
|
+ videoFormat == 'mpg' ||
|
|
|
+ videoFormat == 'rmvb' ||
|
|
|
+ videoFormat == 'mov'
|
|
|
+ "
|
|
|
+ style="width: 850px; height: 350px"
|
|
|
+ >
|
|
|
+ <video :src="resSrc" controls style="width: 100%; height: 100%" />
|
|
|
+ </div>
|
|
|
+ <!-- "doc","docx","ppt","pptx","xls","xlsx" -->
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ videoFormat == 'docx' ||
|
|
|
+ videoFormat == 'doc' ||
|
|
|
+ videoFormat == 'ppt' ||
|
|
|
+ videoFormat == 'pptx' ||
|
|
|
+ videoFormat == 'xls' ||
|
|
|
+ videoFormat == 'xlsx'
|
|
|
+ "
|
|
|
+ style="width: 850px; height: 350px"
|
|
|
+ >
|
|
|
+ <!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
|
|
|
+
|
|
|
+ <a-image width="200px" height="220px" :src="pdf" :preview="false" @click="handleDownload(resSrc)" />
|
|
|
+ <!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
<div style="height: 20px"></div>
|
|
|
<!-- 用户信息部分 -->
|
|
|
<div class="user-info" style="display: flex; flex-direction: column">
|
|
|
@@ -43,7 +86,8 @@
|
|
|
</div>
|
|
|
<div style="width: 10px"></div>
|
|
|
<div style="display: flex; align-items: center; cursor: pointer" @click="handlerCollection">
|
|
|
- <StarOutlined />
|
|
|
+ <StarOutlined v-if="starTag == false" />
|
|
|
+ <StarFilled v-if="starTag == true" />
|
|
|
<div style="width: 10px"></div>
|
|
|
<button class="favorite-btn">收藏资源</button>
|
|
|
</div>
|
|
|
@@ -64,12 +108,12 @@
|
|
|
<span style="display: block; font-weight: bold">课程信息</span>
|
|
|
</div>
|
|
|
<div style="display: flex; justify-content: center; align-items: center; height: 40px">
|
|
|
- <span style="display: block; font-weight: bold">资源名称</span>
|
|
|
+ <span style="display: block; font-weight: bold">{{ resName }}</span>
|
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
+ <!-- <div style="display: flex; align-items: center">
|
|
|
<span style="font-weight: bold; margin-right: 10px">授课老师: </span>
|
|
|
<span style="display: block">{{ teacherName }}</span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div style="display: flex; align-items: center">
|
|
|
<span style="font-weight: bold; margin-right: 10px">所属院系: </span>
|
|
|
<span style="display: block">{{ department }}</span>
|
|
|
@@ -86,7 +130,7 @@
|
|
|
<span style="font-weight: bold; margin-right: 10px">课件格式: </span>
|
|
|
<span style="display: block">{{ videoFormat }}</span>
|
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
+ <div style="display: flex; align-items: center" v-if="videoFormat != 'jpg'">
|
|
|
<span style="font-weight: bold; margin-right: 10px">视频时长: </span>
|
|
|
<span style="display: block">{{ videoDuration }}</span>
|
|
|
</div>
|
|
|
@@ -98,11 +142,11 @@
|
|
|
<span style="font-weight: bold; margin-right: 10px">发布时间: </span>
|
|
|
<span style="display: block">{{ releaseTime }}</span>
|
|
|
</div>
|
|
|
- <div style="display: flex; flex-direction: column">
|
|
|
+ <!-- <div style="display: flex; flex-direction: column">
|
|
|
<span style="font-weight: bold; margin-right: 10px">课程介绍: </span>
|
|
|
<br />
|
|
|
<span style="display: block">{{ courseDescription }}</span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<br />
|
|
|
<span>资源标签</span>
|
|
|
<div style="display: flex; width: 100%; flex-wrap: wrap">
|
|
|
@@ -116,10 +160,14 @@
|
|
|
|
|
|
<script setup>
|
|
|
import { ref } from 'vue'
|
|
|
- import { Tag, Typography, Space } from 'ant-design-vue'
|
|
|
+ // import PDF from 'vue-pdf'
|
|
|
+ import { Tag, Typography, Space, message } from 'ant-design-vue'
|
|
|
import ShareDialog from './ShareDialog.vue'
|
|
|
import { addViewCount, detail, add, cancel, queryList } from '@/api/portal'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
+ import sysConfig from '@/config/index'
|
|
|
+ import pdf from '@/assets/images/pdf.png'
|
|
|
+
|
|
|
// const props = defineProps({
|
|
|
// itemData: {
|
|
|
// type: Object,
|
|
|
@@ -127,7 +175,9 @@
|
|
|
// }
|
|
|
// })
|
|
|
const itemData = ref({})
|
|
|
+ const starTag = ref(false)
|
|
|
const ShareDialogRef = ref(null)
|
|
|
+ const resSrc = ref('')
|
|
|
const resName = ref('资源名称')
|
|
|
|
|
|
const teacherName = ref('王某某')
|
|
|
@@ -138,28 +188,43 @@
|
|
|
const videoDuration = ref('59:34')
|
|
|
const videoSize = ref('598M')
|
|
|
const releaseTime = ref('2025-10-01 11:33:59')
|
|
|
- const courseDescription = ref(
|
|
|
- '“我们正步入一个数据或许比软件更重要的新时代。——Tim O’ Reilly” 运用数据是精准刻画事物、呈现发展规律的主要手段，分析数据展示规律，把思想变得更精细！——“弹指之间·享受创新”，通过4周学习，你将掌握利用Python语言表示、清洗、统计和展示数据的能力。'
|
|
|
- )
|
|
|
+ // const courseDescription = ref(
|
|
|
+ // '“我们正步入一个数据或许比软件更重要的新时代。——Tim O’ Reilly” 运用数据是精准刻画事物、呈现发展规律的主要手段，分析数据展示规律，把思想变得更精细！——“弹指之间·享受创新”，通过4周学习，你将掌握利用Python语言表示、清洗、统计和展示数据的能力。'
|
|
|
+ // )
|
|
|
const tags = ref(['标签名称1', '标签名称2', '标签名称3', '标签名称4', '标签名称5'])
|
|
|
const route = useRoute()
|
|
|
const emit = defineEmits(['selectTab'])
|
|
|
const listUnpublishedView = ref(null)
|
|
|
-
|
|
|
+ const handleDownload = (src) => {
|
|
|
+ window.open(src)
|
|
|
+ }
|
|
|
const handlerShareDialog = () => {
|
|
|
console.log('打开分享弹窗')
|
|
|
ShareDialogRef.value.open(itemData.value)
|
|
|
}
|
|
|
- const handlerCollection = () => {
|
|
|
+ const handlerCollection = async () => {
|
|
|
console.log('打开收藏', itemData.value)
|
|
|
-
|
|
|
- add({ resourceId: itemData.value.id })
|
|
|
- .then((res) => {
|
|
|
- console.log('收藏成功')
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
+ const id = route.query.id
|
|
|
+ if (id != undefined && id != '') {
|
|
|
+ if (starTag.value == true) {
|
|
|
+ await cancel({ resourceId: id })
|
|
|
+ message.success('取消收藏')
|
|
|
+ } else {
|
|
|
+ await add({ resourceId: id })
|
|
|
+ message.success('收藏成功')
|
|
|
+ }
|
|
|
+ queryList({ resourceId: id })
|
|
|
+ .then((ress) => {
|
|
|
+ if (ress.data == true) {
|
|
|
+ starTag.value = true
|
|
|
+ } else {
|
|
|
+ starTag.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const getList = () => {
|
|
|
@@ -174,8 +239,20 @@
|
|
|
.then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
itemData.value = res.data
|
|
|
+ courseType.value = itemData.value.resourceTypeName
|
|
|
+ department.value = itemData.value.collegeAllIdName
|
|
|
+ teacherName.value = itemData.value.resourceCreaterUserName
|
|
|
+ resName.value = itemData.value.fileName
|
|
|
|
|
|
- // VideoDetailsRef.value.setData(res.data)
|
|
|
+ videoFormat.value = itemData.value.suffix
|
|
|
+ releaseTime.value = itemData.value.uploadTime
|
|
|
+ videoSize.value = itemData.value.FILESIZE + 'b'
|
|
|
+
|
|
|
+ resSrc.value = sysConfig.FILE_URL + itemData.value.priviewFileUrl
|
|
|
+ // imagess.value = ''+itemData.value.coverImagePath
|
|
|
+ // imagess.value = 'http://192.168.1.245:10005/education/' + itemData.value.priviewFileUrl
|
|
|
+
|
|
|
+ // VideoDetailsRef.value.setData(res.sdata)
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {})
|
|
|
@@ -185,11 +262,17 @@
|
|
|
const id = route.query.id
|
|
|
if (id != undefined && id != '') {
|
|
|
queryList({ resourceId: id })
|
|
|
- .then((res) => {})
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data == true) {
|
|
|
+ starTag.value = true
|
|
|
+ } else {
|
|
|
+ starTag.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
.catch((err) => {
|
|
|
console.log(err)
|
|
|
})
|
|
|
- getData({ id: item.id })
|
|
|
+ getData({ id: id })
|
|
|
}
|
|
|
})
|
|
|
|
于添
