资源收藏功能

闫增涛

2024-06-21 5f2ecc015066a06a068e9eddc2138b413134f5df

 src/views/readerPages/webHome.vue

@@ -117,6 +117,11 @@
              <div>教师资源</div>
              <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" />
            <div class="tabItem hover" @click="selectResourceType('collect')">
              <div>收藏资源</div>
              <div :class="resourceType == 'collect' ? 'text' : 'line'"></div>
            </div>
          </div>
          <div v-if="activeMenu == '题库'" class="resourceTab">
            <div
@@ -126,6 +131,15 @@
            >
              <div>习题</div>
              <div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('additional')"
              v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"
            >
              <div>附加题</div>
              <div :class="exercisesType == 'additional' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1" />
            <div
@@ -142,7 +156,7 @@
              @click="selectExercisesType('collection')"
              v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"
            >
              <div>收藏</div>
              <div>收藏夹</div>
              <div :class="exercisesType == 'collection' ? 'text' : 'line'"></div>
            </div>
          </div>
@@ -408,6 +422,12 @@
                            "
                            ><Download
                          /></el-icon>
                          <!-- 收藏按钮 -->
                           <img 
                            :src="collectResourceList.findIndex(citem => citem.id == item.id) > -1 ? isHeart : heart  " 
                            class="icon hover" 
                            style="width: 15px;" 
                            @click="handleCollectResource(item.id,item.md5 ? item.md5 : '',item.resourcePath ? item.resourcePath : '',item.resourceType,item.resourceType == '视频' || '音频' ? 'bits' : 'json',item.resourceName)" />
                        </div>
                      </div>
                    </div>
@@ -473,7 +493,10 @@
          </div>
        </div>
        <div class="questionList" v-if="activeMenu == '题库'" v-loading="listLoading">
          <div class="resourceSearchBox">
          <div
            class="resourceSearchBox"
            v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'"
          >
            <div class="inputBox">
              <el-input
                class="custom-input"
@@ -494,14 +517,20 @@
              <div v-for="(item, index) in questionList" :key="index" class="reMarkItem">
                <div
                  class="questionCon hover"
                  @click="JumpPosition(item)"
                  @click="clickQuestion(exercisesType, item)"
                  :title="item.resourceName"
                >
                  {{ item.resourceName }}
                </div>
              </div>
            </div>
            <div v-else>
            <div
              v-if="
                questionList.length == 0 &&
                exercisesType !== 'collection' &&
                exercisesType !== 'wrong'
              "
            >
              <el-empty :image-size="60" description="暂无数据" />
            </div>
          </div>
@@ -1200,12 +1229,23 @@
      <wrongQuestion />
    </div>
  </el-dialog>
  <!-- 答题器 -->
  <examination
    ref="examinationRef"
    :activeBook="bookConfig"
    :info="examinationData.info"
    :type="examinationData.type"
    :infoType="examinationData.infoType"
  />
</template>

<script setup lang="ts">
import heart from '@/assets/images/examination/collectIcon.png'
import isHeart from '@/assets/images/examination/collectClickIcon.png'
import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useClipboard from 'vue-clipboard3'
import examination from '../examination/index.vue'
const { toClipboard } = useClipboard()
const MG: any = inject('MG')
const toolClass = inject('toolClass')
@@ -1315,6 +1355,7 @@

import { loadMicroApp } from 'qiankun'
import { microApps } from '@/child.ts'
import { open } from 'fs'
let token = localStorage.getItem('token')
const canvasWith = ref(1000)
const canvasheight = ref(3000)
@@ -1564,7 +1605,8 @@
      isShow:
        bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 ||
        bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 ||
        bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1
        bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 ||
        bookConfig.value.textbookComponents.indexOf('A4821F71') > -1
    }
  ]
  teachToolsMenuData = [
@@ -1780,6 +1822,7 @@
const showHandle = ref(null)
const playIndex = ref(null) //音频播放
const audioPlayer = ref(null)
const collectResourceList = ref([])
const getResourceData = () => {
  if (token) {
    imgPreviewList.value = []
@@ -1964,6 +2007,8 @@
      })
      .catch(function (error) {
        console.log(error)
        resourceDataList.value = []
        classifySelectList.value = []
        listLoading.value = false
      })
  } else {
@@ -2033,7 +2078,6 @@

//资源跳转到指定位置
const JumpPosition = (data) => {
  console.log(data, '跳转')
  if (window.qiankunState && window.qiankunState.gotoPage) {
    window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
  }
@@ -2043,14 +2087,23 @@
const selectResourceType = (type) => {
  resourceType.value = type
  searchText.value = ''
  getResourceData()
  if (type == 'collect') {
    getCollectResource()
  } else {
    getResourceData()
  }
}
//资源类型图片/视频/音频/习题/其他
const classifyClick = (item) => {
  activeClassify.value = item.key
  resourceDataList.value = []
  searchText.value = ''
  getResourceData()
  if(resourceType.value == 'collect') {
    getCollectResource()
  } else {
    getResourceData()
  }
  
}
const searchBtn = () => {
  if (searchShow.value) {
@@ -2060,9 +2113,150 @@
  }
}

// 获取收藏的资源
const getCollectResource = () => {
  if(token) {
    MG.identity
    .getUserKey({
      domain: 'collectResource',
      keys: [bookConfig.value.bookId]
    })
    .then((res) => {
      if (res.length) {
        collectResourceList.value = JSON.parse(res[0].value)
        console.log('收藏资源列表', collectResourceList.value)
        if(collectResourceList.value.length > 0) {
            let imgCount = 0
            let audioCount = 0
            let videoCount = 0
            let exercisesCount = 0
            let otherCount = 0
            resourceDataList.value = []
            collectResourceList.value.forEach((resItem) => {
              if (resItem.resourceType == '图片') {
                if (resItem.resourcePath) {
                  resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath
                } else {
                  resItem.resourcePath =
                    bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5
                }

                imgPreviewList.value.push(resItem.resourcePath)
                if (activeClassify.value == 'image') {
                  resourceDataList.value.push(resItem)
                }
                imgCount++
              } else if (resItem.resourceType == '音频') {
                if (activeClassify.value == 'audio') {
                  resourceDataList.value.push(resItem)
                }
                audioCount++
              } else if (resItem.resourceType == '视频') {
                if (activeClassify.value == 'video') {
                  resourceDataList.value.push(resItem)
                }
                videoCount++
              } else {
                if (activeClassify.value == 'other') {
                  resourceDataList.value.push(resItem)
                }
                otherCount++
              }
            })
            classifySelectList.value = []
            if (imgCount > 0) {
              classifySelectList.value.push({
                title: '图片',
                count: imgCount,
                key: 'image'
              })
            }
            if (audioCount > 0) {
              classifySelectList.value.push({
                title: '音频',
                count: audioCount,
                key: 'audio'
              })
            }
            if (videoCount > 0) {
              classifySelectList.value.push({
                title: '视频',
                count: videoCount,
                key: 'video'
              })
            }
            if (otherCount > 0) {
              classifySelectList.value.push({
                title: '其他',
                count: otherCount,
                key: 'other'
              })
            }
            if (!activeClassify.value) {
              activeClassify.value = classifySelectList.value[0].key
              collectResourceList.value.forEach((resItem1) => {
                if (resItem1.resourceType == classifySelectList.value[0].title) {
                  resourceDataList.value.push(resItem1)
                }
              })
            }
        }
      }
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
}
// 收藏按钮
const handleCollectResource = (id,md5,resourcePath,resourceType,source,resourceName) => {
    if(collectResourceList.value.findIndex(item => item.id == id) > -1) {
      collectResourceList.value = collectResourceList.value.filter(item => item.id != id)
    } else {
      collectResourceList.value.push({
        id,
        md5,
        resourcePath:resourcePath.replace(bookConfig.value.resourceUrl + '/',''),
        resourceType,
        source,
        resourceName
      })
    }
    MG.identity.setUserKey({
    setKeyRequests: [
      {
        domain: "collectResource",
        key:bookConfig.value.bookId,
        value: JSON.stringify(collectResourceList.value),
      },
    ],
  })
}

//习题
const exercisesType = ref('exercises') //习题类型
const questionList = ref([])
const examinationRef = ref() // 答题器实例
const examinationData = reactive({
  type: '', // 答题类型  option 测试
  infoType: '', // 数据来源  bits 比特后台  json  假数据
  info: {} // 这套题的信息
})
// 获取习题
const getExercisesList = () => {
  if (token) {
    listLoading.value = true
@@ -2111,6 +2305,38 @@
  }
}

// 获取附加题
const getAdditionalList = () => {
  if (token) {
    listLoading.value = true
    questionList.value = []
    axios
      .get(bookConfig.value.resourceUrl + '/bits-question.json')
      .then((res) => {
        // 处理获取到的json数据
        if (res.data.data.length > 0) {
          questionList.value = res.data.data
          examinationData.infoType = res.data.type
        }
        listLoading.value = false
      })
      .catch(() => {
        listLoading.value = false
      })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}

//错题本
const wrongQuestionVisble = ref(false)
const selectExercisesType = (type) => {
@@ -2118,12 +2344,36 @@
  searchText.value = ''
  if (type == 'exercises') {
    getExercisesList()
  } else if (type == 'additional') {
    getAdditionalList()
  } else if (type == 'wrong') {
    openExaminationDialog(true, {}, 'errorQuestion')
    questionList.value = []
  } else {
    openExaminationDialog(true, {}, 'collectQuestion')
    questionList.value = []
  }
}
// 题列表点击
const clickQuestion = (type: string, data: any) => {
  switch (type) {
    case 'exercises':
      JumpPosition(data)
      break
    case 'additional':
      openExaminationDialog(true, data, 'option')
      break
    default:
      break
  }
}
const openExaminationDialog = (isSHow: boolean, data: any, type: string) => {
  if (examinationRef.value) {
    examinationRef.value.handleExaminationDialog(isSHow)
    examinationData.type = type
    examinationData.info = data
  }
}

// 选中菜单
const activeMenu = ref('目录')