|
|
@@ -1,302 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-row class="movie-list">
|
|
|
- <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-card class="box-card" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>播放列表 - <span style="color: blue">{{ albumName }}</span></span>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-row>
|
|
|
- <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-col :md="24">
|
|
|
- <div v-if="dataList.length === 0" align="center">
|
|
|
- <img src="@/assets/img/icon/not-result.png">
|
|
|
- <div>还没有收藏呢~</div>
|
|
|
- </div>
|
|
|
- <div v-if="dataList.length !== 0">
|
|
|
- <el-col
|
|
|
- v-for="(item, index) in dataList"
|
|
|
- :key="index"
|
|
|
- :md="6"
|
|
|
- :sm="12"
|
|
|
- :xs="12"
|
|
|
- style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px"
|
|
|
- >
|
|
|
- <el-card :body-style="{ padding: '0px' }" class="card">
|
|
|
- <div v-if="postType === 1" class="imgs">
|
|
|
- <el-image
|
|
|
- lazy
|
|
|
- fit="cover"
|
|
|
- class="coverImg"
|
|
|
- :src="item.thumbnailUrl"
|
|
|
- @click="showImages(index)"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div v-if="postType === 2" class="imgs" style="cursor: pointer" :title="item.title">
|
|
|
- <router-link target="_blank" :to="`/video/${item.videoId}`">
|
|
|
- <el-image
|
|
|
- lazy
|
|
|
- fit="cover"
|
|
|
- class="coverImg"
|
|
|
- :src="item.coverUrl"
|
|
|
- />
|
|
|
- <span style="position: absolute; top: 0; left: 60%; color:white"> {{ item.duration }} </span>
|
|
|
- <span style="position: absolute; bottom: 0; left: 0; color:white">
|
|
|
- <i v-if="item.horizontal" class="el-icon-monitor" />
|
|
|
- <i v-else class="el-icon-mobile-phone" />
|
|
|
- </span>
|
|
|
- <span style="position: absolute; bottom: 0; left: 10%; color:white">
|
|
|
- <i class="el-icon-video-play">{{ getVisited(item.view) }}</i>
|
|
|
- </span>
|
|
|
- <span style="position: absolute; bottom: 0; left: 40%; color:white">
|
|
|
- <i class="el-icon-s-comment">{{ getVisited(item.comment) }}</i>
|
|
|
- </span>
|
|
|
- </router-link>
|
|
|
- </div>
|
|
|
- <div v-if="postType === 2" style="padding: 14px">
|
|
|
- <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${item.videoId}`">
|
|
|
- <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
|
|
|
- </router-link>
|
|
|
- </div>
|
|
|
- <div v-if="postType === 2" style="padding: 14px">
|
|
|
- <span style="left: 0;margin-bottom: 0px;color: black;">
|
|
|
- <router-link target="_blank" :to="`/user/${item.user.userId}`">
|
|
|
- <i class="el-icon-user"> {{ item.user.screenName | ellipsisUsername }} </i></router-link> • {{ item.pubDateStr }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-pagination
|
|
|
- :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"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-row>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import {
|
|
|
- collectItem, getAlbumItems
|
|
|
-} from '@/api/collect'
|
|
|
-import { handleVisited } from '@/assets/js/utils'
|
|
|
-import { getUserInfo } from '@/api/user'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'PostAlbumView',
|
|
|
- filters: {
|
|
|
- ellipsis(value) {
|
|
|
- if (!value) return ''
|
|
|
- const max = 20
|
|
|
- if (value.length > max) {
|
|
|
- return value.slice(0, max) + '...'
|
|
|
- }
|
|
|
- return value
|
|
|
- },
|
|
|
- ellipsisUsername(value) {
|
|
|
- if (!value) return ''
|
|
|
- const max = 10
|
|
|
- if (value.length > max) {
|
|
|
- return value.slice(0, max) + '...'
|
|
|
- }
|
|
|
- return value
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 屏幕宽度, 为了控制分页条的大小
|
|
|
- screenWidth: document.body.clientWidth,
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 12,
|
|
|
- totalSize: 0,
|
|
|
- dataList: [],
|
|
|
- favlistId: 1,
|
|
|
- contentType: 1001,
|
|
|
- albumId: null,
|
|
|
- albumName: null,
|
|
|
- postType: null,
|
|
|
- user: null
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- document.title = '播放列表'
|
|
|
- this.albumId = this.$route.params.albumId
|
|
|
- this.getAlbumItemsWrapper()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleCurrentChange(pageNumber) {
|
|
|
- this.currentPage = pageNumber
|
|
|
- this.dataList = []
|
|
|
- this.getAlbumItemsWrapper()
|
|
|
- // 回到顶部
|
|
|
- scrollTo(0, 0)
|
|
|
- },
|
|
|
- getAlbumItemsWrapper() {
|
|
|
- getAlbumItems(this.currentPage, this.albumId).then(resp => {
|
|
|
- if (resp.code === 0) {
|
|
|
- const respData = resp.data
|
|
|
- this.albumName = respData.albumName
|
|
|
- this.postType = respData.postType
|
|
|
- this.dataList = respData.pageList.list
|
|
|
- this.totalSize = respData.pageList.totalSize
|
|
|
-
|
|
|
- getUserInfo(respData.createBy).then(resp => {
|
|
|
- if (resp.code === 0) {
|
|
|
- this.user = resp.data
|
|
|
- document.title = this.user.screenName + '的播放列表'
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- onReturnAlbum() {
|
|
|
- this.$router.push('/post/album')
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getVisited(visited) {
|
|
|
- return handleVisited(visited)
|
|
|
- },
|
|
|
- onSetCover(item) {
|
|
|
- const jsonData = {}
|
|
|
- jsonData.albumId = this.albumId
|
|
|
- if (this.postType === 1) {
|
|
|
- jsonData.postId = item.imageFileId
|
|
|
- } else if (this.postType === 2) {
|
|
|
- jsonData.postId = item.videoId
|
|
|
- }
|
|
|
-
|
|
|
- jsonData.action = 3
|
|
|
- collectItem(jsonData).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '封面已更新!'
|
|
|
- })
|
|
|
- this.$router.go(0)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 移除收藏
|
|
|
- onDeleteItem(item) {
|
|
|
- this.$confirm('确认删除本收藏？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- const jsonData = {}
|
|
|
- jsonData.albumId = this.albumId
|
|
|
- if (this.postType === 1) {
|
|
|
- jsonData.postId = item.imageFileId
|
|
|
- } else if (this.postType === 2) {
|
|
|
- jsonData.postId = item.videoId
|
|
|
- }
|
|
|
-
|
|
|
- jsonData.action = 2
|
|
|
- collectItem(jsonData).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: 130px;
|
|
|
- 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>
|
