|
|
@@ -1,340 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-row>
|
|
|
-<!-- <el-col :md="4">
|
|
|
- <el-menu
|
|
|
- :default-active="this.$route.path"
|
|
|
- router
|
|
|
- class="el-menu-vertical-demo"
|
|
|
- >
|
|
|
- <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
|
|
|
- <i :class="item.icon" />
|
|
|
- <span slot="title">{{ item.name }}</span>
|
|
|
- </el-menu-item>
|
|
|
- </el-menu>
|
|
|
- </el-col>-->
|
|
|
- <el-col :md="20">
|
|
|
- <div id="collection-list">
|
|
|
- <!--搜索结果面包屑-->
|
|
|
- <el-breadcrumb
|
|
|
- class="bread"
|
|
|
- separator-class="el-icon-arrow-right"
|
|
|
- >
|
|
|
- <el-breadcrumb-item>我的收藏：共 <span class="reslut">{{ totalSize }}</span> 条</el-breadcrumb-item>
|
|
|
- </el-breadcrumb>
|
|
|
-
|
|
|
- <el-row v-if="totalSize !== 0" class="movie-list">
|
|
|
- <el-col style="text-align: right">
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-delete"
|
|
|
- @click="removeFavlist"
|
|
|
- >删除收藏夹</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col v-for="(item,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
|
|
|
- <div v-if="contentType === 1001">
|
|
|
- <el-card :body-style="{ padding: '0px' }" class="card">
|
|
|
- <div class="imgs">
|
|
|
- <el-image
|
|
|
- lazy
|
|
|
- fit="cover"
|
|
|
- class="coverImg"
|
|
|
- :src="item.thumbnailUrl"
|
|
|
- @click="showImages(index)"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- <div v-else-if="contentType === 1002">
|
|
|
- <video-card :video="item" />
|
|
|
- </div>
|
|
|
- <div v-else-if="contentType === 1003" />
|
|
|
- <div v-else-if="contentType === 1004" />
|
|
|
- <div v-else>
|
|
|
- <span>未知 {{ contentType }}</span>
|
|
|
- </div>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-delete"
|
|
|
- title="删除本收藏"
|
|
|
- @click.stop="removeCollection(item)"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col class="pagination">
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- :small="screenWidth <= 768"
|
|
|
- hide-on-single-page
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="pageSize"
|
|
|
- :current-page="currentPage"
|
|
|
- :total="totalSize"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- @prev-click="handleCurrentChange"
|
|
|
- @next-click="handleCurrentChange"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row v-else class="not-result">
|
|
|
- <el-col :span="12" :offset="6">
|
|
|
- <img src="@/assets/img/icon/not-collection.png">
|
|
|
- <div>你还没有收藏任何东西呢</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import VideoCard from '@/components/card/VideoCard'
|
|
|
-import {
|
|
|
- deleteFavlist,
|
|
|
- getUserFavlist,
|
|
|
- getFavlist,
|
|
|
- collectItem
|
|
|
-} from '@/api/collect'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'Collection',
|
|
|
- components: { VideoCard },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- navList: [],
|
|
|
- // 屏幕宽度, 为了控制分页条的大小
|
|
|
- screenWidth: document.body.clientWidth,
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 12,
|
|
|
- totalSize: 0,
|
|
|
- dataList: [],
|
|
|
- favlist: null,
|
|
|
- contentType: 1001
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- /* const myfavlist = localStorage.getItem('myfavlist')
|
|
|
- if (myfavlist !== undefined) {
|
|
|
- const myfavlist1 = JSON.parse(myfavlist)
|
|
|
- this.navList = []
|
|
|
- for (const item of myfavlist1) {
|
|
|
- this.navList.push(item)
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.getUserFavlistWrapper()
|
|
|
- }*/
|
|
|
- const page = this.$route.query.page
|
|
|
- if (page !== undefined) {
|
|
|
- this.currentPage = parseInt(page)
|
|
|
- }
|
|
|
-
|
|
|
- const type = this.$route.query.contentType
|
|
|
- if (type !== undefined) {
|
|
|
- this.contentType = parseInt(type)
|
|
|
- }
|
|
|
-
|
|
|
- const favlistId1 = this.$route.query.favlistId
|
|
|
- if (favlistId1 === undefined) {
|
|
|
- // this.$router.push(this.navList[0].path)
|
|
|
- this.getUserFavlistWrapper()
|
|
|
- } else {
|
|
|
- const myfavlist = localStorage.getItem('myfavlist')
|
|
|
- const myfavlist1 = JSON.parse(myfavlist)
|
|
|
- this.navList = []
|
|
|
- for (const item of myfavlist1) {
|
|
|
- this.navList.push(item)
|
|
|
- }
|
|
|
-
|
|
|
- this.favlistId = favlistId1
|
|
|
- this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
|
|
|
- }
|
|
|
-
|
|
|
- document.title = '我的收藏夹'
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleCurrentChange(pageNumber) {
|
|
|
- this.currentPage = pageNumber
|
|
|
- this.dataList = []
|
|
|
- // 回到顶部
|
|
|
- scrollTo(0, 0)
|
|
|
- },
|
|
|
- getFavlistWrapper(favlistId, conentType, page) {
|
|
|
- getFavlist(favlistId, conentType, page).then(resp => {
|
|
|
- if (resp.code === 0) {
|
|
|
- const respData = resp.data
|
|
|
- this.dataList = respData.list
|
|
|
- this.totalSize = respData.totalSize
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getUserFavlistWrapper() {
|
|
|
- getUserFavlist().then(resp => {
|
|
|
- if (resp.code === 0) {
|
|
|
- const respData = resp.data
|
|
|
- this.navList = []
|
|
|
- for (const item of respData) {
|
|
|
- const contentType = item.contentType
|
|
|
- if (contentType === 1001) {
|
|
|
- this.navList.push({
|
|
|
- path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
|
|
|
- name: item.favlistName,
|
|
|
- icon: 'el-icon-picture' })
|
|
|
- } else if (contentType === 1002) {
|
|
|
- this.navList.push({
|
|
|
- path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
|
|
|
- name: item.favlistName,
|
|
|
- icon: 'el-icon-film' })
|
|
|
- } else if (contentType === 1003) {
|
|
|
- this.navList.push({
|
|
|
- path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
|
|
|
- name: item.favlistName,
|
|
|
- icon: 'el-icon-headset' })
|
|
|
- } else if (contentType === 1004) {
|
|
|
- this.navList.push({
|
|
|
- path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
|
|
|
- name: item.favlistName,
|
|
|
- icon: 'el-icon-document' })
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- localStorage.setItem('myfavlist', JSON.stringify(this.navList))
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- showImages(index) {
|
|
|
- const imageUrls = []
|
|
|
- for (const i of this.dataList) {
|
|
|
- imageUrls.push(i.originalUrl)
|
|
|
- }
|
|
|
-
|
|
|
- this.$viewerApi({
|
|
|
- images: imageUrls,
|
|
|
- options: {
|
|
|
- initialViewIndex: index,
|
|
|
- movable: true,
|
|
|
- fullscreen: false,
|
|
|
- keyboard: true
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 移除收藏
|
|
|
- removeCollection(item) {
|
|
|
- this.$confirm('确认删除本收藏？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- const jsonData = {}
|
|
|
- jsonData.contentType = 1001
|
|
|
- jsonData.contentId = item.imageFileId
|
|
|
- jsonData.collected = false
|
|
|
- collectItem(jsonData).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '移除成功!'
|
|
|
- })
|
|
|
- this.$router.go(0)
|
|
|
- }
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消'
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 删除收藏夹
|
|
|
- removeFavlist() {
|
|
|
- // 移除所有收藏
|
|
|
- this.$confirm('确认要删除收藏夹？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- deleteFavlist(this.favlistId).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '收藏夹已清空!'
|
|
|
- })
|
|
|
-
|
|
|
- this.$router.go(0)
|
|
|
- }
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消'
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-/*处于手机屏幕时*/
|
|
|
-@media screen and (max-width: 768px){
|
|
|
- .movie-list {
|
|
|
- padding-top: 8px;
|
|
|
- padding-left: 0.5%;
|
|
|
- padding-right: 0.5%;
|
|
|
- }
|
|
|
-
|
|
|
- .coverImg {
|
|
|
- height: 120px !important;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.movie-list {
|
|
|
- padding-top: 15px;
|
|
|
- padding-left: 6%;
|
|
|
- padding-right: 6%;
|
|
|
-}
|
|
|
-
|
|
|
-.coverImg {
|
|
|
- width: 100%;
|
|
|
- height: 320px;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.card {
|
|
|
- margin-bottom: 20px;
|
|
|
- transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
|
|
|
-}
|
|
|
-
|
|
|
-.imgs {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-#collection-list {
|
|
|
- padding-left: 6%;
|
|
|
- padding-right: 6%;
|
|
|
- padding-top: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.bread {
|
|
|
- font-size: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.movie-list {
|
|
|
- padding-top: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.reslut {
|
|
|
- color: red;
|
|
|
-}
|
|
|
-
|
|
|
-.not-result {
|
|
|
- padding-top: 100px;
|
|
|
- padding-bottom: 100px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.remove-slot {
|
|
|
- position: absolute;
|
|
|
- right: 5px;
|
|
|
- bottom: 2px;
|
|
|
-}
|
|
|
-</style>
|
