门户改版代码提交

src/components/MyHeader/index.vue

@@ -21,7 +21,8 @@
         <li class="home">
           <el-dropdown trigger="hover" @command="handleCommand">
             <div>
-              <img :src="userStore.userInfo?.user?.avatar" alt="">
+              <img v-if="userStore.userInfo?.user?.avatar" :src="userStore.userInfo?.user?.avatar" alt="">
+              <img v-else src="@/assets/images/teacher.png" alt="">
               <span class="nickname">{{ userStore.userInfo?.user?.nickName }}</span>
             </div>
 

src/components/Pagination/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div :class="{ 'hidden': hidden }" class="pagination-container">
+    <el-pagination :background="background" v-model:current-page="currentPage" v-model:page-size="pageSize"
+      :layout="layout" :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { scrollTo } from '@/utils/scroll-to'
+
+const props = defineProps({
+  total: {
+    required: true,
+    type: Number
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  limit: {
+    type: Number,
+    default: 20
+  },
+  pageSizes: {
+    type: Array,
+    default() {
+      return [10, 20, 30, 50]
+    }
+  },
+  // 移动端页码按钮的数量端默认值5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7
+  },
+  layout: {
+    type: String,
+    default: 'total, sizes, prev, pager, next, jumper'
+  },
+  background: {
+    type: Boolean,
+    default: true
+  },
+  autoScroll: {
+    type: Boolean,
+    default: true
+  },
+  hidden: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits();
+const currentPage = computed({
+  get() {
+    return props.page
+  },
+  set(val) {
+    emit('update:page', val)
+  }
+})
+const pageSize = computed({
+  get() {
+    return props.limit
+  },
+  set(val) {
+    emit('update:limit', val)
+  }
+})
+function handleSizeChange(val) {
+  if (currentPage.value * val > props.total) {
+    currentPage.value = 1
+  }
+  emit('pagination', { page: currentPage.value, limit: val })
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
+function handleCurrentChange(val) {
+  emit('pagination', { page: val, limit: pageSize.value })
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
+
+</script>
+
+<style scoped>
+.pagination-container {
+  display: flex;
+  justify-content: end;
+  background: #fff;
+  padding: 32px 16px;
+}
+
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/utils/scroll-to.js

@@ -0,0 +1,58 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}

src/views/CatalogResource/index.vue

@@ -7,14 +7,6 @@
       </el-breadcrumb>
     </div>
 
-    <div class="subject-banner">
-      <el-carousel height="500px" arrow="always">
-        <el-carousel-item v-for="item in 4">
-          <img src="@/assets/images/subject-banner.png" alt="">
-        </el-carousel-item>
-      </el-carousel>
-    </div>
-
     <el-card style="margin-top: 20px;">
       <div class="title">
         专题资源
@@ -32,8 +24,8 @@
           <div class="subject-top">{{ item.resourceNum }}个资源</div>
         </div>
       </div>
-      <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-        @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+        v-model:limit="queryParams.pageSize" @pagination="getResourceListData" />
     </el-card>
   </div>
 </template>
@@ -42,6 +34,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { getResourceCatalogList } from '@/apis/catalogResource'
+import pagination from '@/components/Pagination/index.vue';
 
 const router = useRouter()
 
@@ -64,16 +57,6 @@ const goTo = (item) => {
 onMounted(() => {
   getResourceListData()
 })
-
-const handleCurrentChange = (val) => {
-  queryParams.value.pageNum = val
-  getResourceListData()
-}
-
-const handleSizeChange = (val) => {
-  queryParams.value.pageSize = val
-  getResourceListData()
-}
 </script>
 
 <style lang="scss" scoped>

src/views/Layout/components/LayoutHeader.vue

@@ -54,7 +54,8 @@ const handleCommand = (command) => {
         <li class="home">
           <el-dropdown trigger="hover" @command="handleCommand">
             <div>
-              <img :src="userStore.userInfo?.user?.avatar" alt="">
+              <img v-if="userStore.userInfo?.user?.avatar" :src="userStore.userInfo?.user?.avatar" alt="">
+              <img v-else src="@/assets/images/teacher.png" alt="">
               <span class="nickname">{{ userStore.userInfo?.user?.nickName }}</span>
             </div>
 

src/views/MyCollect/index.vue

@@ -36,8 +36,11 @@
           </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" />
+        <template #footer>
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="myCollectListData" />
+        </template>
       </el-card>
     </div>
     <MyFooter></MyFooter>
@@ -50,6 +53,7 @@ import { useRouter } from 'vue-router'
 import { Pointer } from '@element-plus/icons-vue'
 import { doCollect, myCollectList } from '@/apis/user'
 import MyHeader from '@/components/MyHeader/index.vue'
+import pagination from '@/components/Pagination/index.vue';
 
 const router = useRouter()
 
@@ -73,16 +77,6 @@ onMounted(() => {
   myCollectListData()
 })
 
-const handleCurrentChange = (val) => {
-  queryParams.value.pageNum = val
-  myCollectListData()
-}
-
-const handleSizeChange = (val) => {
-  queryParams.value.pageSize = val
-  myCollectListData()
-}
-
 const goto = (item) => {
   // router.push({ path: 'subjectDetail', query: { id: item.id } })
 }

src/views/MyLike/index.vue

@@ -36,8 +36,11 @@
           </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" />
+        <template #footer>
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="myLikeListData" />
+        </template>
       </el-card>
     </div>
     <MyFooter></MyFooter>
@@ -50,6 +53,7 @@ import { useRouter } from 'vue-router'
 import { Star } from '@element-plus/icons-vue'
 import { doLike, myLikeList } from '@/apis/user'
 import MyHeader from '@/components/MyHeader/index.vue'
+import pagination from '@/components/Pagination/index.vue';
 
 const router = useRouter()
 
@@ -73,16 +77,6 @@ onMounted(() => {
   myLikeListData()
 })
 
-const handleCurrentChange = (val) => {
-  queryParams.value.pageNum = val
-  myLikeListData()
-}
-
-const handleSizeChange = (val) => {
-  queryParams.value.pageSize = val
-  myLikeListData()
-}
-
 const goto = (item) => {
   // router.push({ path: 'subjectDetail', query: { id: item.id } })
 }

src/views/MyRecord/index.vue

@@ -30,8 +30,11 @@
           </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" />
+        <template #footer>
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="myRecordListData" />
+        </template>
       </el-card>
     </div>
     <MyFooter></MyFooter>
@@ -44,6 +47,7 @@ import { useRouter } from 'vue-router'
 import { Star } from '@element-plus/icons-vue'
 import { doLike, myRecordList } from '@/apis/user'
 import MyHeader from '@/components/MyHeader/index.vue'
+import pagination from '@/components/Pagination/index.vue';
 
 const router = useRouter()
 
@@ -67,16 +71,6 @@ onMounted(() => {
   myRecordListData()
 })
 
-const handleCurrentChange = (val) => {
-  queryParams.value.pageNum = val
-  myRecordListData()
-}
-
-const handleSizeChange = (val) => {
-  queryParams.value.pageSize = val
-  myRecordListData()
-}
-
 const goto = (item) => {
   // router.push({ path: 'subjectDetail', query: { id: item.id } })
 }

src/views/MyUpload/index.vue

@@ -53,8 +53,8 @@
         <el-empty v-else description="暂无数据" />
 
         <template #footer>
-          <el-pagination class="footer" background layout="prev, pager, next, sizes,jumper" :total="total"
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-            @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+            v-model:limit="queryParams.pageSize" @pagination="myUploadListData" />
         </template>
       </el-card>
     </div>
@@ -68,6 +68,7 @@ import { useRouter } from 'vue-router'
 import { Search, InfoFilled } from '@element-plus/icons-vue'
 import { deleteMyUpload, myUploadList } from '@/apis/user'
 import { download } from '@/utils/utils'
+import pagination from '@/components/Pagination/index.vue';
 
 const router = useRouter()
 
@@ -127,16 +128,6 @@ onMounted(() => {
   myUploadListData()
 })
 
-const handleCurrentChange = (val) => {
-  queryParams.value.pageNum = val
-  myUploadListData()
-}
-
-const handleSizeChange = (val) => {
-  queryParams.value.pageSize = val
-  myUploadListData()
-}
-
 const handleQuery = () => {
   if (!queryParams.value.title) {
     ElMessage.error('请输入查询关键字！')

src/views/TextBook/index.vue

@@ -13,35 +13,35 @@
           <div style="position: absolute;right: 30px;font-size: 16px;">{{ activeNames == '1' ? '收起' : '展开' }}</div>
         </template>
         <el-form label-width="auto" style="padding-left: 20px;">
-          <el-form-item v-if="textbook2List && textbook2List.length" label="学段">
+          <el-form-item v-if="textbook2List && textbook2List.length > 0" label="学段">
             <el-radio-group v-model="radio2" @change="handle2Change">
               <el-radio-button v-for="item in textbook2List" :label="item.catalogName" :value="item.catalogId"
                 :key="item.catalogId" />
             </el-radio-group>
           </el-form-item>
 
-          <el-form-item v-if="textbook3List && textbook3List.length" label="年级">
+          <el-form-item v-if="textbook3List && textbook3List.length > 0" label="年级">
             <el-radio-group v-model="radio3" @change="handle3Change">
               <el-radio-button v-for="item in textbook3List" :label="item.catalogName" :value="item.catalogId"
                 :key="item.catalogId" />
             </el-radio-group>
           </el-form-item>
 
-          <el-form-item v-if="textbook4List && textbook4List.length" label="学科">
+          <el-form-item v-if="textbook4List && textbook4List.length > 0" label="学科">
             <el-radio-group v-model="radio4" @change="handle4Change">
               <el-radio-button v-for="item in textbook4List" :label="item.catalogName" :value="item.catalogId"
                 :key="item.catalogId" />
             </el-radio-group>
           </el-form-item>
 
-          <el-form-item v-if="textbook5List && textbook5List.length" label="版本">
+          <el-form-item v-if="textbook5List && textbook5List.length > 0" label="版本">
             <el-radio-group v-model="radio5" @change="handle5Change">
               <el-radio-button v-for="item in textbook5List" :label="item.catalogName" :value="item.catalogId"
                 :key="item.catalogId" />
             </el-radio-group>
           </el-form-item>
 
-          <el-form-item v-if="textbook6List && textbook6List.length" label="教材">
+          <el-form-item v-if="textbook6List && textbook6List.length > 0" label="教材">
             <el-radio-group v-model="radio6" @change="handle6Change">
               <el-radio-button v-for="item in textbook6List" :label="item.catalogName" :value="item.catalogId"
                 :key="item.catalogId" />
@@ -106,17 +106,17 @@
           <div class="book-grid">
             <el-card v-for="item in tableData" :key="item" @click="goto(item)">
               <div class="book-content">
-                <img v-if="item.fileSuffix.includes('doc')" src="@/assets/images/word.png" alt="" />
+                <img v-if="item?.fileSuffix.includes('doc')" src="@/assets/images/word.png" alt="" />
-                <img v-else-if="item.fileSuffix.includes('xls')" src="@/assets/images/excel.png" alt="" />
+                <img v-else-if="item?.fileSuffix.includes('xls')" src="@/assets/images/excel.png" alt="" />
-                <img v-else-if="item.fileSuffix.includes('pdf')" src="@/assets/images/pdf.png" alt="" />
+                <img v-else-if="item?.fileSuffix.includes('pdf')" src="@/assets/images/pdf.png" alt="" />
-                <img v-else-if="item.fileSuffix.includes('txt')" src="@/assets/images/txt.png" alt="" />
+                <img v-else-if="item?.fileSuffix.includes('txt')" src="@/assets/images/txt.png" alt="" />
                 <img v-else src="@/assets/images/book.png" alt="" />
               </div>
 
               <template #footer>
-                <div class="book-title">{{ item.fileName }}</div>
+                <div class="book-title">{{ item?.fileName }}</div>
                 <div class="book-des">
-                  <div class="book-teacher"><span>{{ item.createBy }}</span>&nbsp;|&nbsp;<span>{{ item.createDept
+                  <div class="book-teacher"><span>{{ item?.createBy }}</span>&nbsp;|&nbsp;<span>{{ item?.createDept
                       }}</span></div>
                   <div class="book-view">
                     <span style="margin-right: 5px;">
@@ -124,14 +124,14 @@
                         <View />
                       </el-icon>
                     </span>
-                    <span>{{ item.downloadNum }}</span>
+                    <span>{{ item?.downloadNum }}</span>
                   </div>
                 </div>
               </template>
             </el-card>
           </div>
-          <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-            @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+            v-model:limit="queryParams.pageSize" @pagination="getTextbookListData" />
         </el-card>
       </el-col>
     </el-row>
@@ -144,6 +144,15 @@ import { useRouter } from 'vue-router'
 import { View, Search } from '@element-plus/icons-vue'
 import { getTextbookAPI, getTextbookTreeAPI, getTextbookList } from '@/apis/textbook'
 import JzSort from '@/components/JzSort/index.vue'
+import pagination from '@/components/Pagination/index.vue';
+
+// 排序初始化数据
+const sortData = [
+  { label: '上传时间', key: 'createTime' },
+  { label: '浏览量', key: 'previewNum' },
+  { label: '下载量', key: 'downloadNum' }
+];
+const sortResult = ref({}); // 排序结果
 
 const router = useRouter()
 const queryParams = ref({
@@ -179,38 +188,64 @@ const textbook7List = ref([])
 const getTextbookData = async () => {
   const res = await getTextbookAPI()
   textbookList.value = res.data
-
+  // 学段
   textbook2List.value = filterListByType(2)
+  radio2.value = textbook2List.value[0].catalogId
+  // 年级
+  textbook3List.value = filterListByParentId(radio2.value)
+  radio3.value = textbook3List.value[0].catalogId
+  // 学科
+  textbook4List.value = filterListByParentId(radio3.value)
+  radio4.value = textbook4List.value[0].catalogId
+  // 版本
+  textbook5List.value = filterListByParentId(radio4.value)
+  radio5.value = textbook5List.value[0].catalogId
+  // 教材
+  textbook6List.value = filterListByParentId(radio5.value)
+  radio6.value = textbook6List.value[0].catalogId
+  // 目录
+  const treeData = await getTextbookTreeAPI({ parentId: radio6.value })
+  textbook7List.value = treeData.data
+  queryParams.value.catalogId = radio6.value
 }
 
 const handle2Change = (val) => {
-  textbook3List.value = filterListByParentId(val)
+  radio3.value = null
   textbook4List.value = []
+  radio4.value = null
   textbook5List.value = []
+  radio5.value = null
   textbook6List.value = []
+  radio6.value = null
   textbook7List.value = []
-  console.log(val);
+  textbook3List.value = filterListByParentId(val)
   queryParams.value.catalogId = val
 }
 
 const handle3Change = (val) => {
-  textbook4List.value = filterListByParentId(val)
+  radio4.value = null
   textbook5List.value = []
+  radio5.value = null
   textbook6List.value = []
+  radio6.value = null
   textbook7List.value = []
+  textbook4List.value = filterListByParentId(val)
   queryParams.value.catalogId = val
 }
 
 const handle4Change = (val) => {
-  textbook5List.value = filterListByParentId(val)
+  radio5.value = null
   textbook6List.value = []
+  radio6.value = null
   textbook7List.value = []
+  textbook5List.value = filterListByParentId(val)
   queryParams.value.catalogId = val
 }
 
 const handle5Change = (val) => {
-  textbook6List.value = filterListByParentId(val)
+  radio6.value = null
   textbook7List.value = []
+  textbook6List.value = filterListByParentId(val)
   queryParams.value.catalogId = val
 }
 
@@ -228,67 +263,44 @@ const filterListByParentId = (parentId) => {
   return textbookList.value.filter(item => item.parentId == parentId)
 }
 
-// 排序初始化数据
-const sortData = [
-  { label: '上传时间', key: 'createTime' },
-  { label: '浏览量', key: 'previewNum' },
-  { label: '下载量', key: 'downloadNum' }
-];
-const sortResult = ref({}); // 排序结果
-
 const getTextbookListData = async () => {
   const res = await getTextbookList(queryParams.value)
   tableData.value = res.rows
   total.value = res.total
 }
 
-const handleCurrentChange = (val) => {
-  queryParams.value.pageNum = val
-  getTextbookListData()
-}
-
-const handleSizeChange = (val) => {
-  queryParams.value.pageSize = val
-  getTextbookListData()
-}
-
 const handleRowClick = (val) => {
   queryParams.value.catalogId = val.id
 }
 
-watch(() => queryParams.value.catalogId, (oldVal, newVal) => {
-  getTextbookListData()
-})
-
-// 监听排序结果
 watchEffect(() => {
   queryParams.value.orderByColumn = sortResult.value.key
   queryParams.value.isAsc = sortResult.value.order
-
-  getTextbookListData()
 })
 
+watch(queryParams, (newVal, oldVal) => {
+  getTextbookListData()
+}, { deep: true })
+
 const goto = (item) => {
   router.push({ path: 'textBookDetail', query: { id: item.id } })
 }
 
-
 const handleQuery = () => {
   if (!queryParams.value.fileName) {
     ElMessage.error('请输入查询关键字！')
     return
   }
-  getShowData()
+  getTextbookListData()
 }
 
 const handleClear = () => {
   queryParams.value.fileName = ''
-  getShowData()
+  getTextbookListData()
 }
 
 onMounted(() => {
   getTextbookData()
-  getTextbookListData()
 })
 </script>