|
|
@@ -1,149 +1,297 @@
|
|
|
<template>
|
|
|
- <div id="collection-list">
|
|
|
- <el-row>
|
|
|
- <el-col :md="12">
|
|
|
- <div class="category-btn">
|
|
|
- <el-button
|
|
|
- v-for="(item, index) in videoFavlist"
|
|
|
- :key="index"
|
|
|
- type="warning"
|
|
|
- size="mini"
|
|
|
- :plain="currentFavlistId !== item.favlistId"
|
|
|
- @click="chooseVideoFavlist(item)"
|
|
|
- >{{ item.favlistName }}
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <el-container>
|
|
|
+ <el-header height="220">
|
|
|
+ <el-row style="margin-top: 10px">
|
|
|
+ <el-select
|
|
|
+ v-model="queryInfo.postType"
|
|
|
+ clearable
|
|
|
+ placeholder="稿件类型"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ @change="onSelectChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in allPostTypes"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-button type="plain" icon="el-icon-plus" style="margin-left: 5px" @click="createAlbumDiaglog = true">创建合集</el-button>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ fixed="left"
|
|
|
+ label="No"
|
|
|
+ type="index"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="coverUrl"
|
|
|
+ label="相册封面"
|
|
|
+ width="90"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.coverUrl">
|
|
|
+ <el-image
|
|
|
+ lazy
|
|
|
+ fit="cover"
|
|
|
+ class="coverImg"
|
|
|
+ :src="scope.row.coverUrl"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <!-- <span class="el-icon-plus"></span>-->
|
|
|
+ <el-image
|
|
|
+ lazy
|
|
|
+ fit="cover"
|
|
|
+ class="coverImg"
|
|
|
+ src="/img/icon/not-result.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createdAt"
|
|
|
+ label="发布时间"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="albumName"
|
|
|
+ label="相册名字"
|
|
|
+ width="180"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <router-link style="text-decoration-line: none" target="_blank" :to="`/image/album/${scope.row.albumId}`">
|
|
|
+ <span>{{ scope.row.albumName }}</span>
|
|
|
+ </router-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="postType"
|
|
|
+ label="合集类型"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="scope"
|
|
|
+ label="可见范围"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tooltip class="item" effect="dark" content="点击修改可见范围" placement="top-end">
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.scope === 1"
|
|
|
+ size="mini"
|
|
|
+ @click="handleScope(scope.$index, scope.row)"
|
|
|
+ >本人可见</el-button>
|
|
|
+ <el-button
|
|
|
+ v-else-if="scope.row.scope === 2"
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="handleScope(scope.$index, scope.row)"
|
|
|
+ >所有人可见</el-button>
|
|
|
+ <el-button
|
|
|
+ v-else-if="scope.row.scope === 3"
|
|
|
+ size="mini"
|
|
|
+ type="warning"
|
|
|
+ @click="handleScope(scope.$index, scope.row)"
|
|
|
+ >VIP 可见</el-button>
|
|
|
+ <el-button
|
|
|
+ v-else
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleScope(scope.$index, scope.row)"
|
|
|
+ >验证码可见</el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleEdit(scope.$index, scope.row)"
|
|
|
+ >编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ hide-on-single-page
|
|
|
+ :small="screenWidth <= 768"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @prev-click="handleCurrentChange"
|
|
|
+ @next-click="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </el-main>
|
|
|
|
|
|
- <!--搜索结果面包屑-->
|
|
|
- <el-breadcrumb
|
|
|
- v-if="currentFavlistName !== null"
|
|
|
- class="bread"
|
|
|
- separator-class="el-icon-arrow-right"
|
|
|
+ <!-- 创建相册对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="createAlbumDiaglog"
|
|
|
+ width="30%"
|
|
|
+ center
|
|
|
>
|
|
|
- <el-breadcrumb-item>
|
|
|
- <span class="reslut">{{ currentFavlistName }}</span> 中共有 <span class="reslut">{{ totalSize }}</span> 条数据
|
|
|
- </el-breadcrumb-item>
|
|
|
- </el-breadcrumb>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>创建相册</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="onCreateAlbum">确定</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
+ <el-form-item label="相册名">
|
|
|
+ <el-input v-model="form.albumName" style="width: 70%; padding-right: 2px" placeholder="相册名不能超过 50 个字符" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="稿件类型">
|
|
|
+ <el-select v-model="form.postType" placeholder="选择稿件类型">
|
|
|
+ <el-option label="图片" value="1" />
|
|
|
+ <el-option label="视频" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="可见范围">
|
|
|
+ <el-select v-model="form.scope" placeholder="选择可见范围">
|
|
|
+ <el-option label="本人可见" value="1" />
|
|
|
+ <el-option label="所有人可见" value="2" />
|
|
|
+ <el-option label="VIP 可见" value="3" />
|
|
|
+ <el-option label="验证码可见" value="4" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
- <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" />
|
|
|
+ <!-- 修改可见范围对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showEditScopeDialog"
|
|
|
+ width="30%"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>修改相册可见范围</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
|
|
|
</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>
|
|
|
+ <div class="text item">
|
|
|
+ <el-select v-model="form.scope" placeholder="选择可见范围">
|
|
|
+ <el-option label="本人可见" value="1" />
|
|
|
+ <el-option label="所有人可见" value="2" />
|
|
|
+ <el-option label="VIP 可见" value="3" />
|
|
|
+ <el-option label="验证码可见" value="4" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-dialog>
|
|
|
+ </el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import VideoCard from '@/components/card/VideoCard'
|
|
|
import {
|
|
|
- deleteFavlist, collectItem, getUserFavlist, getVideoFavlist
|
|
|
-} from '@/api/collect'
|
|
|
+ updateAlbumScope,
|
|
|
+ deleteAlbum,
|
|
|
+ getUserAlbums,
|
|
|
+ createAlbum,
|
|
|
+ getAlbumTypes, getUserAlbums1
|
|
|
+} from '@/api/image'
|
|
|
|
|
|
export default {
|
|
|
- name: 'FavlistVideo',
|
|
|
- components: { VideoCard },
|
|
|
+ name: 'ImagePost',
|
|
|
data() {
|
|
|
return {
|
|
|
+ allPostTypes: [],
|
|
|
+ queryInfo: {
|
|
|
+ postType: null,
|
|
|
+ pn: 1
|
|
|
+ },
|
|
|
// 屏幕宽度, 为了控制分页条的大小
|
|
|
screenWidth: document.body.clientWidth,
|
|
|
currentPage: 1,
|
|
|
pageSize: 12,
|
|
|
totalSize: 0,
|
|
|
dataList: [],
|
|
|
- currentFavlistId: 0,
|
|
|
- currentFavlistName: null,
|
|
|
- videoFavlist: []
|
|
|
+ // **********************************************************************
|
|
|
+ showEditScopeDialog: false,
|
|
|
+ form: {
|
|
|
+ albumId: null,
|
|
|
+ postType: '1',
|
|
|
+ scope: '1'
|
|
|
+ },
|
|
|
+ createAlbumDiaglog: false
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- getUserFavlist().then(resp => {
|
|
|
- if (resp.code === 0) {
|
|
|
- this.videoFavlist = resp.data
|
|
|
- }
|
|
|
- })
|
|
|
- document.title = '视频收藏夹'
|
|
|
+ document.title = '稿件合集'
|
|
|
+ this.getData()
|
|
|
},
|
|
|
methods: {
|
|
|
+ onSelectChange() {
|
|
|
+ getUserAlbums1(this.queryInfo).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.dataList = resp.data.list
|
|
|
+ this.totalSize = resp.data.totalSize
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
handleCurrentChange(pageNumber) {
|
|
|
this.currentPage = pageNumber
|
|
|
- this.dataList = []
|
|
|
- this.getVideoFavlistWrapper(this.currentFavlistId, this.currentPage)
|
|
|
+ this.getData()
|
|
|
// 回到顶部
|
|
|
scrollTo(0, 0)
|
|
|
},
|
|
|
- chooseVideoFavlist(item) {
|
|
|
- this.currentFavlistId = item.favlistId
|
|
|
- this.currentFavlistName = item.favlistName
|
|
|
- this.currentPage = 1
|
|
|
- this.getVideoFavlistWrapper(this.currentFavlistId, this.currentPage)
|
|
|
- },
|
|
|
- getVideoFavlistWrapper(favlistId) {
|
|
|
- this.currentFavlistId = favlistId
|
|
|
- getVideoFavlist(favlistId, this.currentPage).then(resp => {
|
|
|
+ getData() {
|
|
|
+ getAlbumTypes().then(resp => {
|
|
|
if (resp.code === 0) {
|
|
|
- const respData = resp.data
|
|
|
- this.dataList = respData.list
|
|
|
- this.totalSize = respData.totalSize
|
|
|
+ this.allPostTypes = resp.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.dataList = []
|
|
|
+ getUserAlbums(this.currentPage).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.dataList = resp.data.list
|
|
|
+ this.totalSize = resp.data.totalSize
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: resp.msg,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- // 移除收藏
|
|
|
- removeCollection(item) {
|
|
|
- this.$confirm('确认删除本收藏?', '提示', {
|
|
|
+ handleScope(index, row) {
|
|
|
+ this.form.albumId = row.albumId
|
|
|
+ this.form.scope = '' + row.scope
|
|
|
+ this.showEditScopeDialog = true
|
|
|
+ },
|
|
|
+ handleEdit(index, row) {
|
|
|
+ const path = '/post/edit/album/' + row.albumId
|
|
|
+ this.$router.push(path)
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ this.$confirm('确定要删除 ' + row.albumName + ' 相册?', '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
- const jsonData = {}
|
|
|
- jsonData.contentType = 1001
|
|
|
- jsonData.contentId = item.imageFileId
|
|
|
- jsonData.collected = false
|
|
|
- collectItem(jsonData).then(res => {
|
|
|
+ deleteAlbum(row.albumId).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '移除成功!'
|
|
|
+ this.$notify({
|
|
|
+ title: '相册稿件已删除',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
})
|
|
|
- this.$router.go(0)
|
|
|
+ // this.$router.go(0)
|
|
|
}
|
|
|
})
|
|
|
}).catch(() => {
|
|
|
@@ -153,28 +301,53 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- // 删除收藏夹
|
|
|
- removeFavlist() {
|
|
|
- // 移除所有收藏
|
|
|
- this.$confirm('确认要删除收藏夹?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- deleteFavlist(this.currentFavlistId).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '收藏夹已清空!'
|
|
|
- })
|
|
|
-
|
|
|
- this.$router.go(0)
|
|
|
- }
|
|
|
+ onCreateAlbum() {
|
|
|
+ this.createAlbumDiaglog = false
|
|
|
+ createAlbum(this.form).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.info('合集已创建')
|
|
|
+ this.$router.go(0)
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: res.msg,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: error.message,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
})
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onUpdateScope() {
|
|
|
+ this.showEditScopeDialog = false
|
|
|
+ updateAlbumScope(this.form).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: res.msg,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: res.msg,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: error.message,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
@@ -182,81 +355,34 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style>
|
|
|
/*处于手机屏幕时*/
|
|
|
-@media screen and (max-width: 768px){
|
|
|
- .movie-list {
|
|
|
- padding-top: 8px;
|
|
|
- padding-left: 0.5%;
|
|
|
- padding-right: 0.5%;
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .tit {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 12px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ font-size: 10px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-size: 9px;
|
|
|
+ padding-top: 3px;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ margin-top: 2px;
|
|
|
+ line-height: 7px;
|
|
|
}
|
|
|
-
|
|
|
.coverImg {
|
|
|
height: 120px !important;
|
|
|
}
|
|
|
-
|
|
|
- .category-btn {
|
|
|
- padding-left: 0.5%;
|
|
|
- padding-right: 0.5%;
|
|
|
- padding-top: 3%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.movie-list {
|
|
|
- padding-top: 15px;
|
|
|
- padding-left: 6%;
|
|
|
- padding-right: 6%;
|
|
|
}
|
|
|
|
|
|
.coverImg {
|
|
|
width: 100%;
|
|
|
- height: 320px;
|
|
|
+ height: 90px;
|
|
|
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;
|
|
|
-}
|
|
|
-
|
|
|
-.category-btn {
|
|
|
- padding-left: 14%;
|
|
|
- padding-right: 6%;
|
|
|
- padding-top: 20px;
|
|
|
-}
|
|
|
</style>
|