|
@@ -12,15 +12,15 @@
|
|
|
<div style="display: flex; align-items: center">
|
|
<div style="display: flex; align-items: center">
|
|
|
<div class="user-avatar"></div>
|
|
<div class="user-avatar"></div>
|
|
|
<div class="user-details">
|
|
<div class="user-details">
|
|
|
- <div class="user-name">作者名称</div>
|
|
|
|
|
- <div class="publish-time">2025-07-25 10:17</div>
|
|
|
|
|
|
|
+ <div class="user-name">{{ itemData.resourceCreaterUserName }}</div>
|
|
|
|
|
+ <div class="publish-time">{{ itemData.uploadTime }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div style="display: flex; align-items: center">
|
|
<div style="display: flex; align-items: center">
|
|
|
<div class="metrics">
|
|
<div class="metrics">
|
|
|
<div class="metric-item">
|
|
<div class="metric-item">
|
|
|
- <span>100000</span>
|
|
|
|
|
|
|
+ <span>{{ itemData.viewCount }}</span>
|
|
|
<span>播放量</span>
|
|
<span>播放量</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="liene"></div>
|
|
<div class="liene"></div>
|
|
@@ -36,13 +36,13 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div style="width: 10px"></div>
|
|
<div style="width: 10px"></div>
|
|
|
<div class="actions">
|
|
<div class="actions">
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
|
|
|
|
+ <div style="display: flex; align-items: center; cursor: pointer" @click="handlerShareDialog">
|
|
|
<ExportOutlined />
|
|
<ExportOutlined />
|
|
|
<div style="width: 10px"></div>
|
|
<div style="width: 10px"></div>
|
|
|
<button class="share-btn">分享资源</button>
|
|
<button class="share-btn">分享资源</button>
|
|
|
</div>
|
|
</div>
|
|
|
<div style="width: 10px"></div>
|
|
<div style="width: 10px"></div>
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
|
|
|
|
+ <div style="display: flex; align-items: center; cursor: pointer" @click="handlerCollection">
|
|
|
<StarOutlined />
|
|
<StarOutlined />
|
|
|
<div style="width: 10px"></div>
|
|
<div style="width: 10px"></div>
|
|
|
<button class="favorite-btn">收藏资源</button>
|
|
<button class="favorite-btn">收藏资源</button>
|
|
@@ -52,9 +52,9 @@
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 课程信息部分 -->
|
|
<!-- 课程信息部分 -->
|
|
|
<div class="course-info">
|
|
<div class="course-info">
|
|
|
- <p>
|
|
|
|
|
- 课程信息:瑞幸即将展开裁员,裁员名单已经确定。瑞幸裁员的消息早在一周前传出。裁员过后,瑞幸的员工或许并不好找工作,瑞幸在厦门的待遇比较高,这些简历其他企业比较难接下。
|
|
|
|
|
- </p>
|
|
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {{ itemData.resourceDesc }}
|
|
|
|
|
+ </span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -110,12 +110,24 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <ShareDialog ref="ShareDialogRef"></ShareDialog>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref } from 'vue'
|
|
import { ref } from 'vue'
|
|
|
import { Tag, Typography, Space } from 'ant-design-vue'
|
|
import { Tag, Typography, Space } from 'ant-design-vue'
|
|
|
|
|
+ import ShareDialog from './ShareDialog.vue'
|
|
|
|
|
+ import { addViewCount, detail, add, cancel, queryList } from '@/api/portal'
|
|
|
|
|
+ import { useRoute } from 'vue-router'
|
|
|
|
|
+ // const props = defineProps({
|
|
|
|
|
+ // itemData: {
|
|
|
|
|
+ // type: Object,
|
|
|
|
|
+ // default: () => {}
|
|
|
|
|
+ // }
|
|
|
|
|
+ // })
|
|
|
|
|
+ const itemData = ref({})
|
|
|
|
|
+ const ShareDialogRef = ref(null)
|
|
|
const resName = ref('资源名称')
|
|
const resName = ref('资源名称')
|
|
|
|
|
|
|
|
const teacherName = ref('王某某')
|
|
const teacherName = ref('王某某')
|
|
@@ -130,24 +142,59 @@
|
|
|
'“我们正步入一个数据或许比软件更重要的新时代。——Tim O’ Reilly” 运用数据是精准刻画事物、呈现发展规律的主要手段,分析数据展示规律,把思想变得更精细!——“弹指之间·享受创新”,通过4周学习,你将掌握利用Python语言表示、清洗、统计和展示数据的能力。'
|
|
'“我们正步入一个数据或许比软件更重要的新时代。——Tim O’ Reilly” 运用数据是精准刻画事物、呈现发展规律的主要手段,分析数据展示规律,把思想变得更精细!——“弹指之间·享受创新”,通过4周学习,你将掌握利用Python语言表示、清洗、统计和展示数据的能力。'
|
|
|
)
|
|
)
|
|
|
const tags = ref(['标签名称1', '标签名称2', '标签名称3', '标签名称4', '标签名称5'])
|
|
const tags = ref(['标签名称1', '标签名称2', '标签名称3', '标签名称4', '标签名称5'])
|
|
|
-
|
|
|
|
|
|
|
+ const route = useRoute()
|
|
|
const emit = defineEmits(['selectTab'])
|
|
const emit = defineEmits(['selectTab'])
|
|
|
const listUnpublishedView = ref(null)
|
|
const listUnpublishedView = ref(null)
|
|
|
|
|
|
|
|
- const onQuery = (form) => {
|
|
|
|
|
- console.log('查询内容', form)
|
|
|
|
|
- //....
|
|
|
|
|
|
|
+ const handlerShareDialog = () => {
|
|
|
|
|
+ console.log('打开分享弹窗')
|
|
|
|
|
+ ShareDialogRef.value.open(itemData.value)
|
|
|
|
|
+ }
|
|
|
|
|
+ const handlerCollection = () => {
|
|
|
|
|
+ console.log('打开收藏', itemData.value)
|
|
|
|
|
|
|
|
- // listUnpublishedView.value.setData(tableData.value)
|
|
|
|
|
|
|
+ add({ resourceId: itemData.value.id })
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ console.log('收藏成功')
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch((err) => {
|
|
|
|
|
+ console.log(err)
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const getList = () => {
|
|
const getList = () => {
|
|
|
//....
|
|
//....
|
|
|
// listUnpublishedView.value.setData(tableData.value)
|
|
// listUnpublishedView.value.setData(tableData.value)
|
|
|
}
|
|
}
|
|
|
|
|
+ const setData = (data) => {
|
|
|
|
|
+ itemData.value = data
|
|
|
|
|
+ }
|
|
|
|
|
+ const getData = (item) => {
|
|
|
|
|
+ detail({ id: item.id })
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
|
+ itemData.value = res.data
|
|
|
|
|
|
|
|
|
|
+ // VideoDetailsRef.value.setData(res.data)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch((err) => {})
|
|
|
|
|
+ }
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
getList()
|
|
getList()
|
|
|
|
|
+ const id = route.query.id
|
|
|
|
|
+ if (id != undefined && id != '') {
|
|
|
|
|
+ queryList({ resourceId: id })
|
|
|
|
|
+ .then((res) => {})
|
|
|
|
|
+ .catch((err) => {
|
|
|
|
|
+ console.log(err)
|
|
|
|
|
+ })
|
|
|
|
|
+ getData({ id: item.id })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ defineExpose({
|
|
|
|
|
+ setData
|
|
|
})
|
|
})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
@@ -251,6 +298,8 @@
|
|
|
.course-info {
|
|
.course-info {
|
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
|
line-height: 1.6;
|
|
line-height: 1.6;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ width: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.liene {
|
|
.liene {
|