| | |
| | | <view class="user-header"> |
| | | <view class="user-avatar-container"> |
| | | <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image> |
| | | <view class="edit-icon" @click="editProfile" v-if="isSelf"> |
| | | <uni-icons type="compose" size="20" color="#666"></uni-icons> |
| | | </view> |
| | | </view> |
| | | <view class="user-info"> |
| | | <view class="user-name">{{userInfo.nickName}}</view> |
| | |
| | | {{userInfo.hasSub ? '取消关注' : '关注'}} |
| | | </button> |
| | | </view> |
| | | |
| | | <view class="edit-icon" @click="editInfo" v-if="userInfo.self"> |
| | | <uni-icons type="compose" size="20" color="#666"></uni-icons>编辑主页信息 |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 作品/喜欢切换 --> |
| | |
| | | class="video-item" |
| | | v-for="(item, index) in videoList" |
| | | :key="item.id" |
| | | @click="playVideo(index)" |
| | | > |
| | | <image class="video-cover" :src="item.coverUrl" mode="aspectFill"></image> |
| | | <image class="video-cover" @click="playAuthorVideo(index)" :src="item.videoContentType === 'video' ? item.coverUrl : item.imgs[0]" mode="aspectFill"></image> |
| | | <view class="video-info"> |
| | | <view class="video-stats"> |
| | | <view class="stat"> |
| | | <uni-icons type="heart" size="16" color="#fff"></uni-icons> |
| | | <text>{{item.collectNum}}</text> |
| | | <view class="more-op" v-if="userInfo.self"> |
| | | <dropdown-menu |
| | | :options="item.options" |
| | | :data="{id: item.id, title: item.title}" |
| | | placement="top" |
| | | theme-color="#07C160" |
| | | @change="handleChange" |
| | | ></dropdown-menu> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'likes' && collectVideoList.length > 0"> |
| | |
| | | class="video-item" |
| | | v-for="(item, index) in collectVideoList" |
| | | :key="item.id" |
| | | @click="playVideo(index)" |
| | | @click="playCollectVideo(index)" |
| | | > |
| | | <image class="video-cover" :src="item.coverUrl" mode="aspectFill"></image> |
| | | <image class="video-cover" :src="item.videoContentType === 'video' ? item.coverUrl : item.imgs[0]" mode="aspectFill"></image> |
| | | <view class="video-info"> |
| | | <view class="video-stats"> |
| | | <view class="stat"> |
| | |
| | | <!-- <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image> --> |
| | | <text class="empty-text">还没有点赞作品哦~</text> |
| | | </view> |
| | | |
| | | <!-- 删除视频提醒框 --> |
| | | <uni-popup ref="delDialog" type="dialog"> |
| | | <uni-popup-dialog type="error" cancelText="取消" confirmText="删除" title="提醒" :content="`您正在删除:${opVideo.title}`" @confirm="deleteVideo" |
| | | @close="dialogClose"></uni-popup-dialog> |
| | | </uni-popup> |
| | | |
| | | <!-- 下架视频提醒框 --> |
| | | <uni-popup ref="downDialog" type="dialog"> |
| | | <uni-popup-dialog type="error" cancelText="取消" confirmText="下架" title="提醒" :content="`您正在下架:${opVideo.title}`" @confirm="downVideo" |
| | | @close="dialogClose"></uni-popup-dialog> |
| | | </uni-popup> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import DropdownMenu from '@/components/dropdown-menu.vue' |
| | | |
| | | import {getAuthorInfo, getAuthorVideoPage, getAuthorCollectVideoPage} from '@/api/user.js' |
| | | import {subscribe, unSubscribe} from '@/api/video.js' |
| | | import {subscribe, unSubscribe, delVideo, updateVideo, userDownVideo} from '@/api/video.js' |
| | | export default { |
| | | components: {DropdownMenu}, |
| | | data() { |
| | | return { |
| | | options: [ |
| | | { command: 1, label: '北京' }, |
| | | { command: 2, label: '上海' }, |
| | | { command: 3, label: '广州' } |
| | | ], |
| | | opVideo: { // 正在操作的视频 |
| | | id: '', |
| | | title: '' |
| | | }, |
| | | currentTab: 'works', // works: 作品, likes: 喜欢 |
| | | authorId: '', |
| | | userInfo: { |
| | |
| | | nomoreCollectVideo: false |
| | | } |
| | | }, |
| | | onShow() { |
| | | this.getAuthorInfo(); |
| | | }, |
| | | onLoad(option) { |
| | | this.authorId = option.authorId; |
| | | this.getAuthorInfo(); |
| | | this.getAuthorVideoPage(); |
| | | }, |
| | | methods: { |
| | | dialogClose() { |
| | | this.opVideo = { |
| | | id: '', |
| | | title: '' |
| | | } |
| | | }, |
| | | // 下架视频 |
| | | downVideo() { |
| | | userDownVideo(this.opVideo.id).then(res => { |
| | | uni.showToast({ |
| | | title: '下架成功', |
| | | duration: 2000 |
| | | }); |
| | | // 刷新数据 |
| | | this.videoList = []; |
| | | this.videoQuery.pageNumber = 1; |
| | | this.getAuthorVideoPage(); |
| | | }) |
| | | }, |
| | | // 删除视频 |
| | | deleteVideo() { |
| | | delVideo(this.opVideo.id).then(res => { |
| | | uni.showToast({ |
| | | title: '删除成功', |
| | | duration: 2000 |
| | | }); |
| | | // 刷新数据 |
| | | this.videoList = []; |
| | | this.videoQuery.pageNumber = 1; |
| | | this.getAuthorVideoPage(); |
| | | }) |
| | | }, |
| | | // 触发视频操作 |
| | | handleChange(value, data) { |
| | | console.log('选中值:', value) |
| | | this.opVideo.id = data.id; |
| | | this.opVideo.title = data.title; |
| | | if (value === 'DELETE') { |
| | | this.$refs.delDialog.open() |
| | | } else if (value === 'DOWN') { |
| | | this.$refs.downDialog.open() |
| | | } else if (value === 'EDIT') { |
| | | // 跳转编辑视频页面 |
| | | uni.navigateTo({ |
| | | url: `/pages/video/video-edit?id=${this.opVideo.id}` |
| | | }); |
| | | } |
| | | }, |
| | | getPage() { |
| | | if(this.currentTab === 'works') { |
| | | if(this.nomoreVideo) { |
| | |
| | | getAuthorVideoPage(this.videoQuery).then(res => { |
| | | this.videoList = res.data.data |
| | | this.videoTotal = res.data.total |
| | | if(res.data.data.length < this.videoQuery.pageSize) { |
| | | this.nomoreVideo = true; |
| | | } |
| | | }) |
| | | }, |
| | | // 获取作品信息 |
| | | // 切换关注状态 |
| | | toggleFollow() { |
| | | if(this.userInfo.hasSub) { |
| | |
| | | this.collectVideoQuery.authorId = this.authorId |
| | | getAuthorCollectVideoPage(this.collectVideoQuery).then(res => { |
| | | this.collectVideoList = res.data.data |
| | | if(res.data.data.length < this.collectVideoQuery.pageSize) { |
| | | this.nomoreCollectVideo = true; |
| | | } |
| | | }) |
| | | }, |
| | | // 播放视频 |
| | | playVideo(index) { |
| | | const videoItem = this.videoList[index]; |
| | | // 播放作者视频 |
| | | playAuthorVideo(index) { |
| | | const playInfo = { |
| | | videoList: this.videoList, |
| | | nomore: this.nomoreVideo, |
| | | pageNumber: this.videoQuery.pageNumber, |
| | | playIndex: index |
| | | } |
| | | uni.setStorageSync("playInfo", playInfo) |
| | | uni.navigateTo({ |
| | | url: `/pages/video/play?id=${videoItem.id}` |
| | | url: `/pages/video/video-play?authorId=${this.authorId}&videoFrom=author` |
| | | }); |
| | | }, |
| | | |
| | | // 编辑个人资料 |
| | | editProfile() { |
| | | // 播放收藏视频 |
| | | playCollectVideo(index) { |
| | | const playInfo = { |
| | | videoList: this.collectVideoList, |
| | | nomore: this.nomoreCollectVideo, |
| | | pageNumber: this.collectVideoQuery.pageNumber, |
| | | playIndex: index |
| | | } |
| | | uni.setStorageSync("playInfo", playInfo) |
| | | uni.navigateTo({ |
| | | url: '/pages/user/edit' |
| | | url: `/pages/video/video-play?authorId=${this.authorId}&videoFrom=collect` |
| | | }); |
| | | }, |
| | | // 编辑个人资料 |
| | | editInfo() { |
| | | uni.navigateTo({ |
| | | url: `/pages/video/home-page-edit?authorId=${this.authorId}&avatar=${this.userInfo.avatar}&motto=${this.userInfo.motto || ''}&nickName=${this.userInfo.nickName}` |
| | | }); |
| | | }, |
| | | |
| | |
| | | |
| | | .edit-icon { |
| | | position: absolute; |
| | | right: 0; |
| | | bottom: 0; |
| | | right: 30rpx; |
| | | top: 30rpx; |
| | | background-color: #fff; |
| | | border-radius: 50%; |
| | | width: 40rpx; |
| | | height: 40rpx; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .user-info { |
| | |
| | | } |
| | | |
| | | .video-list { |
| | | width: calc(100% - 20rpx); |
| | | padding: 0 10rpx; |
| | | height: calc(100vh - 554rpx); |
| | | background-color: #fff; |
| | | width: 100%; |
| | | padding: 0 10rpx; |
| | | height: calc(100vh - 554rpx); |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .video-container { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .video-item { |
| | | width: 50%; |
| | | padding: 10rpx; |
| | | box-sizing: border-box; |
| | | width: 49%; |
| | | margin-bottom: 20rpx; |
| | | position: relative; |
| | | } |
| | | |
| | |
| | | |
| | | .video-info { |
| | | position: absolute; |
| | | bottom: 20rpx; |
| | | left: 20rpx; |
| | | right: 20rpx; |
| | | color: #fff; |
| | | font-size: 24rpx; |
| | | bottom: 10rpx; |
| | | left: 0; |
| | | right: 0; |
| | | padding: 0 10rpx; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .video-title { |
| | |
| | | |
| | | .video-stats { |
| | | display: flex; |
| | | width: 100%; |
| | | } |
| | | |
| | | .stat { |
| | | display: flex; |
| | | width: 100%; |
| | | align-items: center; |
| | | margin-right: 20rpx; |
| | | text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.5); |
| | | position: relative; |
| | | } |
| | | |
| | | .more-op { |
| | | position: absolute; |
| | | right: 0; |
| | | } |
| | | |
| | | .stat text { |
| | | margin-left: 5rpx; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .empty-state { |
| | |
| | | } |
| | | } |
| | | |
| | | /* 如果是自己的主页,隐藏关注按钮 */ |
| | | .user-header { |
| | | position: relative; |
| | | } |
| | | |
| | | .video-container { |
| | | display: flex; |
| | | flex-wrap: wrap |
| | | } |
| | | </style> |