门户改版代码提交

src/apis/user.js

@@ -17,3 +17,73 @@ export const userInfoAPI = () => {
     url: '/system/user/getInfo'
   })
 }
+
+export const myUploadList = (params) => {
+  return request({
+    url: '/person/oss/pageList',
+    params
+  })
+}
+
+export const myUploadInfo = (id) => {
+  return request({
+    url: `/oss/person/${id}`
+  })
+}
+
+export function personPreview(id) {
+  return request({
+    url: `/oss/person/preview/${id}`,
+    method: 'post',
+  });
+}
+
+export function deleteMyUpload(id) {
+  return request({
+    url: `/oss/person/${id}`,
+    method: 'delete',
+  });
+}
+
+export const myLikeList = (params) => {
+  return request({
+    url: '/person/like/pageList',
+    params
+  })
+}
+
+export const myCollectList = (params) => {
+  return request({
+    url: '/person/collect/pageList',
+    params
+  })
+}
+
+export const myRecordList = (params) => {
+  return request({
+    url: '/person/record/pageList',
+    params
+  })
+}
+
+export const doLike = (data) => {
+  return request({
+    url: '/portal/textbook/like',
+    method: 'POST',
+    data
+  })
+}
+
+export const doCollect = (data) => {
+  return request({
+    url: '/portal/textbook/collect',
+    method: 'POST',
+    data
+  })
+}
+
+export const headerNumList = () => {
+  return request({
+    url: '/person/record/num',
+  })
+}

src/components/MyHeader/index.vue

@@ -7,13 +7,13 @@
 
       <ul class="app-header-nav">
         <li class="home">
-          <RouterLink to="myUpload">我的上传（29）</RouterLink>
+          <RouterLink to="myUpload">我的上传（{{ uploadNum?.value }}）</RouterLink>
         </li>
         <li class="home">
-          <RouterLink to="myLike">我的点赞（102）</RouterLink>
+          <RouterLink to="myLike">我的点赞（{{ likeNum?.value }}）</RouterLink>
         </li>
         <li class="home">
-          <RouterLink to="myCollect">我的收藏（1）</RouterLink>
+          <RouterLink to="myCollect">我的收藏（{{ collectNum?.value }}）</RouterLink>
         </li>
         <li class="home">
           <RouterLink to="myRecord">浏览记录</RouterLink>
@@ -45,10 +45,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useTenantStore } from '@/stores/tenantStore'
 import { useUserStore } from '@/stores/userStore';
 import { useRouter } from 'vue-router';
+import { headerNumList } from '@/apis/user';
 
 const router = useRouter()
 
@@ -78,6 +79,28 @@ const handleCommand = (command) => {
     commandMap[command]();
   }
 }
+
+const headerNumArr = ref([])
+const headerNumListData = async () => {
+  const { data } = await headerNumList()
+  headerNumArr.value = data
+}
+
+const uploadNum = computed(() => {
+  return headerNumArr.value.find(item => item.name == 'upload')
+})
+
+const likeNum = computed(() => {
+  return headerNumArr.value.find(item => item.name == 'like')
+})
+
+const collectNum = computed(() => {
+  return headerNumArr.value.find(item => item.name == 'collect')
+})
+
+onMounted(() => {
+  headerNumListData()
+})
 </script>
 
 <style lang="scss" scoped>

src/components/PreviewFile/index.vue

@@ -7,6 +7,7 @@ import { ref, watchEffect } from 'vue'
 import { textbookPreview } from '@/apis/textbook'
 import { resourcePreview } from '@/apis/catalogResource'
 import { Base64 } from 'js-base64'
+import { personPreview } from '@/apis/user';
 
 const props = defineProps({
   id: Number,
@@ -27,7 +28,10 @@ const previewFile = async () => {
     fileRes = await resourcePreview(props.id)
     url.value = `${preViewUrl}?url=${encodeURIComponent(Base64.encode(fileRes.data))}`
   }
-  console.log(url.value);
+  if (props.type == 'person') {
+    fileRes = await personPreview(props.id)
+    url.value = `${preViewUrl}?url=${encodeURIComponent(Base64.encode(fileRes.data))}`
+  }
 
 }
 

src/router/index.js

@@ -19,6 +19,10 @@ const router = createRouter({
       path: '/myUpload',
       component: () => import('@/views/MyUpload/index.vue')
     },
+    {
+      path: '/myUploadDetail',
+      component: () => import('@/views/MyUploadDetail/index.vue')
+    },
     {
       path: '/myLike',
       component: () => import('@/views/MyLike/index.vue')

src/views/MyCollect/index.vue

@@ -1,10 +1,10 @@
 <template>
   <MyHeader></MyHeader>
   <div class="container">
-    <el-card>
+    <el-card v-loading="loading" element-loading-text="数据加载中...">
-      <div class="book-grid">
+      <div class="book-grid" v-if="resourceList.length > 0">
-        <el-card v-for="item in resourceList" @click="goto(item)">
+        <el-card v-for="item in resourceList">
-          <div class="book-content">
+          <div class="book-content" @click="goto(item)">
             <img class="file-type" src="@/assets/images/word.png" alt="">
             <img src="@/assets/images/book.png" alt="">
           </div>
@@ -13,22 +13,21 @@
             <div class="book-title">{{ item.fileName }}</div>
             <div class="book-des">
               <div class="book-teacher">
-                <span>{{ item.createBy }}</span>&nbsp;|&nbsp;<span>{{ item.createDept }}</span>
+                <el-space spacer="|">
+                  <span>{{ item.createBy }}</span>
+                  <span>{{ item.createDept }}</span>
+                </el-space>
               </div>
               <div class="book-view">
-                <el-space wrap>
+                <el-icon @click="handleCollect(item)">
-                  <el-icon>
+                  <Pointer :color="item.isCollect ? '#FE4A4B' : ''" />
-                    <Star />
                 </el-icon>
-                  <el-icon>
-                    <Pointer />
-                  </el-icon>
-                </el-space>
               </div>
             </div>
           </template>
         </el-card>
       </div>
+      <el-empty v-else description="暂无数据" />
       <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
         @current-change="handleCurrentChange" @size-change="handleSizeChange" />
     </el-card>
@@ -39,8 +38,8 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Star, Pointer } from '@element-plus/icons-vue'
+import { Pointer } from '@element-plus/icons-vue'
-import { getResourceList } from '@/apis/catalogResource'
+import { doCollect, myCollectList } from '@/apis/user'
 import MyHeader from '@/components/MyHeader/index.vue'
 
 const router = useRouter()
@@ -50,31 +49,48 @@ const queryParams = ref({
   pageSize: 8
 })
 
+const loading = ref(false)
 const resourceList = ref([])
 const total = ref(0)
-const getResourceListData = async () => {
+const myCollectListData = async () => {
-  const res = await getResourceList(queryParams.value)
+  loading.value = true
+  const res = await myCollectList(queryParams.value)
   resourceList.value = res.rows
   total.value = res.total
+  loading.value = false
 }
 
 onMounted(() => {
-  getResourceListData()
+  myCollectListData()
 })
 
 const handleCurrentChange = (val) => {
   queryParams.value.pageNum = val
-  getResourceListData()
+  myCollectListData()
 }
 
 const handleSizeChange = (val) => {
   queryParams.value.pageSize = val
-  getResourceListData()
+  myCollectListData()
 }
 
 const goto = (item) => {
   router.push({ path: 'subjectDetail', query: { id: item.id } })
 }
+
+const handleCollect = async (item) => {
+  const { isCollect, ossTextbookId } = item
+
+  const res = await doCollect({
+    ossTextbookId,
+    operate: isCollect ? 0 : 1
+  })
+  ElMessage({
+    message: res.msg,
+    type: 'success',
+  })
+  myCollectListData()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/MyLike/index.vue

@@ -1,10 +1,10 @@
 <template>
   <MyHeader></MyHeader>
   <div class="container">
-    <el-card>
+    <el-card v-loading="loading" element-loading-text="数据加载中...">
-      <div class="book-grid">
+      <div class="book-grid" v-if="resourceList.length > 0">
-        <el-card v-for="item in resourceList" @click="goto(item)">
+        <el-card v-for="item in resourceList">
-          <div class="book-content">
+          <div class="book-content" @click="goto(item)">
             <img class="file-type" src="@/assets/images/word.png" alt="">
             <img src="@/assets/images/book.png" alt="">
           </div>
@@ -13,22 +13,21 @@
             <div class="book-title">{{ item.fileName }}</div>
             <div class="book-des">
               <div class="book-teacher">
-                <span>{{ item.createBy }}</span>&nbsp;|&nbsp;<span>{{ item.createDept }}</span>
+                <el-space spacer="|">
+                  <span>{{ item.createBy }}</span>
+                  <span>{{ item.createDept }}</span>
+                </el-space>
               </div>
               <div class="book-view">
-                <el-space wrap>
+                <el-icon @click="handleLike(item)">
-                  <el-icon>
+                  <Star :color="item.isLike ? '#FE4A4B' : ''" />
-                    <Star />
                 </el-icon>
-                  <el-icon>
-                    <Pointer />
-                  </el-icon>
-                </el-space>
               </div>
             </div>
           </template>
         </el-card>
       </div>
+      <el-empty v-else description="暂无数据" />
       <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
         @current-change="handleCurrentChange" @size-change="handleSizeChange" />
     </el-card>
@@ -39,8 +38,8 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Star, Pointer } from '@element-plus/icons-vue'
+import { Star } from '@element-plus/icons-vue'
-import { getResourceList } from '@/apis/catalogResource'
+import { doLike, myLikeList } from '@/apis/user'
 import MyHeader from '@/components/MyHeader/index.vue'
 
 const router = useRouter()
@@ -50,31 +49,48 @@ const queryParams = ref({
   pageSize: 8
 })
 
+const loading = ref(false)
 const resourceList = ref([])
 const total = ref(0)
-const getResourceListData = async () => {
+const myLikeListData = async () => {
-  const res = await getResourceList(queryParams.value)
+  loading.value = true
+  const res = await myLikeList(queryParams.value)
   resourceList.value = res.rows
   total.value = res.total
+  loading.value = false
 }
 
 onMounted(() => {
-  getResourceListData()
+  myLikeListData()
 })
 
 const handleCurrentChange = (val) => {
   queryParams.value.pageNum = val
-  getResourceListData()
+  myLikeListData()
 }
 
 const handleSizeChange = (val) => {
   queryParams.value.pageSize = val
-  getResourceListData()
+  myLikeListData()
 }
 
 const goto = (item) => {
   router.push({ path: 'subjectDetail', query: { id: item.id } })
 }
+
+const handleLike = async (item) => {
+  const { isLike, ossTextbookId } = item
+
+  const res = await doLike({
+    ossTextbookId,
+    operate: isLike ? 0 : 1
+  })
+  ElMessage({
+    message: res.msg,
+    type: 'success',
+  })
+  myLikeListData()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/MyRecord/index.vue

@@ -1,38 +1,30 @@
 <template>
   <MyHeader></MyHeader>
   <div class="container">
-    <el-card class="news-card">
+    <el-card v-loading="loading" element-loading-text="数据加载中...">
-      <template #header>
+      <div class="book-grid" v-if="resourceList.length > 0">
-        <div class="card-header">
+        <el-card v-for="item in resourceList">
-          <div class="header-search">
+          <div class="book-content" @click="goto(item)">
-            <el-space wrap>
+            <img class="file-type" src="@/assets/images/word.png" alt="">
-              <span>名称</span>
+            <img src="@/assets/images/book.png" alt="">
-              <el-input v-model="queryParams.title" style="width: 300px" placeholder="请输入关键词" clearable
+          </div>
-                @clear="handleClear" />
 
-              <span>格式</span>
+          <template #footer>
-              <el-select v-model="queryParams.fileSuffix" placeholder="请选择格式" style="width: 300px"
+            <div class="book-title">{{ item.fileName }}</div>
-                @keyup.enter="handleQuery">
+            <div class="book-des">
-                <el-option v-for="item in formatOptions" :key="item.value" :label="item.label" :value="item.value" />
+              <div class="book-teacher">
-              </el-select>
+                <el-space spacer="|">
-              <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                  <span>{{ item.createBy }}</span>
+                  <span>{{ item.createDept }}</span>
                 </el-space>
               </div>
             </div>
           </template>
-
+        </el-card>
-      <el-table @row-click="handleRowClick" :data="tableData" class="table" stripe>
+      </div>
-        <el-table-column prop="title" label="课件名称" />
+      <el-empty v-else description="暂无数据" />
-        <el-table-column prop="createTime" label="课件格式" />
+      <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
-        <el-table-column prop="createTime" label="课件大小" />
-        <el-table-column prop="createTime" label="目录" />
-        <el-table-column prop="createTime" label="创建时间" width="200" />
-      </el-table>
-
-      <template #footer>
-        <el-pagination class="footer" background layout="prev, pager, next, sizes,jumper" :total="total"
         @current-change="handleCurrentChange" @size-change="handleSizeChange" />
-      </template>
     </el-card>
   </div>
   <MyFooter></MyFooter>
@@ -41,121 +33,84 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Search } from '@element-plus/icons-vue'
+import { Star } from '@element-plus/icons-vue'
-import { getTrendAPI } from '@/apis/home'
+import { doLike, myRecordList } from '@/apis/user'
+import MyHeader from '@/components/MyHeader/index.vue'
 
 const router = useRouter()
 
-const formatOptions = [
-  {
-    value: '.doc',
-    label: 'doc',
-  },
-  {
-    value: '.docx',
-    label: 'docx',
-  },
-  {
-    value: '.xls',
-    label: 'xls',
-  },
-  {
-    value: '.xlsx',
-    label: 'xlsx',
-  },
-  {
-    value: '.ppt',
-    label: 'ppt',
-  },
-  {
-    value: '.pptx',
-    label: 'pptx',
-  },
-  {
-    value: '.pdf',
-    label: 'pdf',
-  },
-  {
-    value: '.txt',
-    label: 'txt',
-  }
-]
-
 const queryParams = ref({
-  title: '',
-  fileSuffix: '',
   pageNum: 1,
-  pageSize: 10
+  pageSize: 8
 })
-const tableData = ref([])
+
+const loading = ref(false)
+const resourceList = ref([])
 const total = ref(0)
-const getTrendData = async () => {
+const myRecordListData = async () => {
-  const res = await getTrendAPI(queryParams.value)
+  loading.value = true
-  tableData.value = res.rows
+  const res = await myRecordList(queryParams.value)
+  resourceList.value = res.rows
   total.value = res.total
+  loading.value = false
 }
 
 onMounted(() => {
-  getTrendData()
+  myRecordListData()
 })
 
 const handleCurrentChange = (val) => {
   queryParams.value.pageNum = val
-  getTrendData()
+  myRecordListData()
 }
 
 const handleSizeChange = (val) => {
   queryParams.value.pageSize = val
-  getTrendData()
+  myRecordListData()
 }
 
-const handleQuery = () => {
+const goto = (item) => {
-  if (!queryParams.value.title) {
+  router.push({ path: 'subjectDetail', query: { id: item.id } })
-    ElMessage.error('请输入查询关键字！')
-    return
-  }
-  getTrendData()
-}
-
-const handleClear = () => {
-  queryParams.value.title = ''
-  getTrendData()
-}
-
-const goTarget = (url) => {
-  window.open(url, '__blank');
-}
-
-const handleRowClick = (row) => {
-  if (row.type == 1) {
-    goTarget(row.url)
-  } else {
-    router.push(`news/${row.trendId}`)
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .container {
-  .news-card {
+  .book-grid {
-    margin-top: 20px;
+    margin-top: 10px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 7px;
 
-    .card-header {
+    .book-content {
+      position: relative;
+
+      .file-type {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 25px;
+      }
+    }
+
+    .book-title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .book-des {
       display: flex;
       justify-content: space-between;
-
+      color: #919DA3;
-      .title {
+      padding: 5px 0;
-        font-size: 20px;
-        font-weight: bold;
-        margin-bottom: 5px;
     }
   }
 
-    .footer {
+  .book-page {
+    margin-top: 20px;
     display: flex;
-      justify-content: end;
+    justify-content: end
   }
-  }
-
 }
 </style>

src/views/MyUpload/index.vue

@@ -1,7 +1,14 @@
 <template>
   <MyHeader></MyHeader>
   <div class="container">
-    <el-card class="news-card">
+    <div class="bread-container">
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item :to="{ path: '/myUpload' }">个人中心</el-breadcrumb-item>
+        <el-breadcrumb-item>我的上传</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <el-card class="news-card" v-loading="loading" element-loading-text="数据加载中...">
       <template #header>
         <div class="card-header">
           <div class="header-search">
@@ -21,18 +28,35 @@
         </div>
       </template>
 
-      <el-table @row-click="handleRowClick" :data="tableData" class="table" stripe>
+      <el-table v-if="tableData.length > 0" @row-click="handleRowClick" :data="tableData" class="table" stripe>
-        <el-table-column prop="title" label="课件名称" />
+        <el-table-column prop="fileName" label="课件名称" align="center" />
-        <el-table-column prop="createTime" label="课件格式" />
+        <el-table-column prop="fileSuffix" label="课件格式" align="center" />
-        <el-table-column prop="createTime" label="课件大小" />
+        <el-table-column prop="volume" label="课件大小" align="center" />
-        <el-table-column prop="createTime" label="目录" />
+        <el-table-column prop="filePath" label="目录" align="center" width="320" />
-        <el-table-column prop="createTime" label="创建时间" width="200" />
+        <el-table-column prop="createTime" label="创建时间" align="center" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button link type="primary" @click="preview(scope.row)">预览</el-button>
+            <el-button link type="primary" @click="downloadFile(scope.row)">下载</el-button>
+
+            <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
+              title="确认删除吗?" @confirm="handleDelete(scope.row)">
+              <template #reference>
+                <el-button link type="danger">删除</el-button>
+              </template>
+            </el-popconfirm>
+
+          </template>
+        </el-table-column>
       </el-table>
+      <el-empty v-else description="暂无数据" />
 
       <template #footer>
         <el-pagination class="footer" background layout="prev, pager, next, sizes,jumper" :total="total"
           @current-change="handleCurrentChange" @size-change="handleSizeChange" />
       </template>
+
+
     </el-card>
   </div>
   <MyFooter></MyFooter>
@@ -41,8 +65,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Search } from '@element-plus/icons-vue'
+import { Search, InfoFilled } from '@element-plus/icons-vue'
-import { getTrendAPI } from '@/apis/home'
+import { deleteMyUpload, myUploadList } from '@/apis/user'
+import { download } from '@/utils/utils'
 
 const router = useRouter()
 
@@ -81,6 +106,7 @@ const formatOptions = [
   }
 ]
 
+const loading = ref(false)
 const queryParams = ref({
   title: '',
   fileSuffix: '',
@@ -89,24 +115,26 @@ const queryParams = ref({
 })
 const tableData = ref([])
 const total = ref(0)
-const getTrendData = async () => {
+const myUploadListData = async () => {
-  const res = await getTrendAPI(queryParams.value)
+  loading.value = true
+  const res = await myUploadList(queryParams.value)
   tableData.value = res.rows
   total.value = res.total
+  loading.value = false
 }
 
 onMounted(() => {
-  getTrendData()
+  myUploadListData()
 })
 
 const handleCurrentChange = (val) => {
   queryParams.value.pageNum = val
-  getTrendData()
+  myUploadListData()
 }
 
 const handleSizeChange = (val) => {
   queryParams.value.pageSize = val
-  getTrendData()
+  myUploadListData()
 }
 
 const handleQuery = () => {
@@ -114,12 +142,12 @@ const handleQuery = () => {
     ElMessage.error('请输入查询关键字！')
     return
   }
-  getTrendData()
+  myUploadListData()
 }
 
 const handleClear = () => {
   queryParams.value.title = ''
-  getTrendData()
+  myUploadListData()
 }
 
 const goTarget = (url) => {
@@ -133,10 +161,40 @@ const handleRowClick = (row) => {
     router.push(`news/${row.trendId}`)
   }
 }
+
+const preview = (item) => {
+  router.push({ path: '/myUploadDetail', query: { id: item.id } })
+}
+
+const downloadFile = (item) => {
+  download(`/oss/person/download/${item.id}`, {}, item.fileName)
+}
+
+const handleDelete = async (row) => {
+  await deleteMyUpload(row.id);
+  ElMessage({
+    message: '删除成功',
+    type: 'success',
+  })
+  await myUploadListData();
+}
 </script>
 
 <style lang="scss" scoped>
 .container {
+  .bread-container {
+    padding: 25px 0;
+
+    :deep(.el-breadcrumb__inner) {
+      color: #fff;
+      font-size: 16px;
+    }
+
+    :deep(.el-breadcrumb__separator) {
+      color: #fff;
+    }
+  }
+
   .news-card {
     margin-top: 20px;
 

src/views/MyUploadDetail/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <MyHeader></MyHeader>
+  <div class="container">
+    <div class="bread-container">
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item :to="{ path: '/myUpload' }">个人中心</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/myUpload' }">我的上传</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ info.fileName }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="textbook-card">
+      <div class="textbook-top">
+        <div class="left">
+          <h1>{{ info.fileName }}</h1>
+          <p class="textbook-info">
+            <span>上传者：{{ info.createBy }}</span>
+            <span>上传时间：{{ info.createTime }}</span>
+          </p>
+        </div>
+
+        <div class="right">
+          <el-button :icon="Download" type="primary" @click="downloadFile">下载</el-button>
+        </div>
+      </div>
+      <div class="textbook-content">
+        <PreviewFile :id="id" type="person" :fileSuffix="fileSuffix"></PreviewFile>
+      </div>
+    </div>
+  </div>
+  <MyFooter></MyFooter>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { myUploadInfo } from '@/apis/user'
+import { Download } from '@element-plus/icons-vue'
+import PreviewFile from '@/components/PreviewFile/index.vue'
+import { download } from '@/utils/utils'
+
+const route = useRoute()
+const id = route.query.id
+const fileSuffix = ref('')
+
+const info = ref({})
+const getTextbookInfoData = async () => {
+  const res = await myUploadInfo(id)
+  info.value = res.data
+  fileSuffix.value = res.data.fileSuffix
+}
+
+const downloadFile = () => {
+  download(`/portal/textbook/preview/${id}`, {}, info.value.fileName)
+}
+
+onMounted(() => {
+  getTextbookInfoData()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .bread-container {
+    padding: 25px 0;
+
+    :deep(.el-breadcrumb__inner) {
+      color: #fff;
+      font-size: 16px;
+    }
+
+    :deep(.el-breadcrumb__separator) {
+      color: #fff;
+    }
+  }
+
+  .textbook-card {
+    margin-top: 20px;
+    padding: 20px;
+
+    min-height: 600px;
+    background-color: #E2F1F8;
+    border-radius: 10px;
+
+    .textbook-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .textbook-info {
+        line-height: 60px;
+        color: #A9A19B;
+
+        span:nth-child(1) {
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .textbook-content {
+      margin: 0 50px;
+    }
+
+  }
+
+}
+</style>

src/views/TextbookDetail/index.vue

@@ -12,8 +12,28 @@
         <div class="left">
           <h1>{{ info.fileName }}</h1>
           <p class="textbook-info">
+            <el-space size="large">
               <span>上传者：{{ info.createBy }}</span>
+
+              <span>|</span>
+
               <span>上传时间：{{ info.createTime }}</span>
+
+              <el-icon @click="handleLike">
+                <Star :color="isLike ? '#FE4A4B' : ''" />
+              </el-icon>
+
+              <el-icon @click="handleCollect">
+                <Pointer :color="isCollect ? '#FE4A4B' : ''" />
+              </el-icon>
+
+              <span>
+                <el-icon>
+                  <View />
+                </el-icon>
+                {{ info.previewNum }}
+              </span>
+            </el-space>
           </p>
         </div>
 
@@ -32,19 +52,24 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { getTextbookInfoAPI } from '@/apis/textbook'
-import { Download } from '@element-plus/icons-vue'
+import { Star, Pointer, View, Download } from '@element-plus/icons-vue'
 import PreviewFile from '@/components/PreviewFile/index.vue'
 import { download } from '@/utils/utils'
+import { doLike, doCollect } from '@/apis/user'
 
 const route = useRoute()
 const id = route.query.id
 const fileSuffix = ref('')
 
 const info = ref({})
+const isLike = ref(false)
+const isCollect = ref(false)
 const getTextbookInfoData = async () => {
   const res = await getTextbookInfoAPI(id)
   info.value = res.data
   fileSuffix.value = res.data.fileSuffix
+  isLike.value = res.data.isLike
+  isCollect.value = res.data.isCollect
 }
 
 const downloadFile = () => {
@@ -55,6 +80,33 @@ onMounted(() => {
   getTextbookInfoData()
 })
 
+const handleLike = async () => {
+  isLike.value = !isLike.value
+
+  const res = await doLike({
+    ossTextbookId: info.value.id,
+    operate: isLike.value ? 1 : 0
+  })
+  ElMessage({
+    message: res.msg,
+    type: 'success',
+  })
+}
+
+const handleCollect = async () => {
+  isCollect.value = !isCollect.value
+
+  const res = await doCollect({
+    ossTextbookId: info.value.id,
+    operate: isCollect.value ? 1 : 0
+  })
+
+  ElMessage({
+    message: res.msg,
+    type: 'success',
+  })
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -88,10 +140,6 @@ onMounted(() => {
       .textbook-info {
         line-height: 60px;
         color: #A9A19B;
-
-        span:nth-child(1) {
-          margin-right: 20px;
-        }
       }
     }