|
|
@@ -0,0 +1,258 @@
|
|
|
+<template>
|
|
|
+ <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>
|
|
|
+ <video-card :video="item" />
|
|
|
+ </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 VideoCard from '@/components/card/VideoCard'
|
|
|
+import {
|
|
|
+ deleteFavlist,
|
|
|
+ getUserFavlist,
|
|
|
+ getFavlist,
|
|
|
+ collectItem
|
|
|
+} from '@/api/collect'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'FavlistVideo',
|
|
|
+ components: { VideoCard },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ navList: [],
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 12,
|
|
|
+ totalSize: 0,
|
|
|
+ dataList: [],
|
|
|
+ favlist: null,
|
|
|
+ favlistId: 5079734292480,
|
|
|
+ contentType: 1002
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ 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))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 移除收藏
|
|
|
+ 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>
|
