|
|
@@ -1,76 +1,71 @@
|
|
|
<template>
|
|
|
- <el-row>
|
|
|
- <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>
|
|
|
- <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 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>
|
|
|
+ <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-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>
|
|
|
+ </el-card>
|
|
|
+ </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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
deleteFavlist,
|
|
|
- getUserFavlist,
|
|
|
getFavlist,
|
|
|
collectItem
|
|
|
} from '@/api/collect'
|
|
|
@@ -79,50 +74,25 @@ export default {
|
|
|
name: 'FavlistImage',
|
|
|
data() {
|
|
|
return {
|
|
|
- navList: [],
|
|
|
// 屏幕宽度, 为了控制分页条的大小
|
|
|
screenWidth: document.body.clientWidth,
|
|
|
currentPage: 1,
|
|
|
pageSize: 12,
|
|
|
totalSize: 0,
|
|
|
dataList: [],
|
|
|
- favlist: null,
|
|
|
+ favlistId: 1,
|
|
|
contentType: 1001
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- 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 = '我的收藏夹'
|
|
|
+ this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
|
|
|
+ document.title = '图片收藏夹'
|
|
|
},
|
|
|
methods: {
|
|
|
handleCurrentChange(pageNumber) {
|
|
|
this.currentPage = pageNumber
|
|
|
this.dataList = []
|
|
|
+ this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
|
|
|
// 回到顶部
|
|
|
scrollTo(0, 0)
|
|
|
},
|
|
|
@@ -135,40 +105,6 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- 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) {
|
