| | |
| | | |
| | | <!-- 视频列表 --> |
| | | <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'works' && videoList.length > 0"> |
| | | <view class="video-container"> |
| | | <view |
| | | class="video-item" |
| | | v-for="(item, index) in videoList" |
| | | :key="item.id" |
| | | @click="playAuthorVideo(index)" |
| | | > |
| | | <image class="video-cover" :src="item.coverUrl" mode="aspectFill"></image> |
| | | <image class="video-cover" @click="playAuthorVideo(index)" :src="item.coverUrl" 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"> |
| | | <dropdown-menu |
| | | :options="item.options" |
| | | placement="top" |
| | | theme-color="#07C160" |
| | | @change="handleChange" |
| | | ></dropdown-menu> |
| | | </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"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import DropdownMenu from '@/components/dropdown-menu.vue' |
| | | |
| | | import {getAuthorInfo, getAuthorVideoPage, getAuthorCollectVideoPage} from '@/api/user.js' |
| | | import {subscribe, unSubscribe} from '@/api/video.js' |
| | | export default { |
| | | components: {DropdownMenu}, |
| | | data() { |
| | | return { |
| | | options: [ |
| | | { command: 1, label: '北京' }, |
| | | { command: 2, label: '上海' }, |
| | | { command: 3, label: '广州' } |
| | | ], |
| | | currentTab: 'works', // works: 作品, likes: 喜欢 |
| | | authorId: '', |
| | | userInfo: { |
| | |
| | | this.getAuthorVideoPage(); |
| | | }, |
| | | methods: { |
| | | handleChange(value) { |
| | | console.log('选中值:', value) |
| | | }, |
| | | getPage() { |
| | | if(this.currentTab === 'works') { |
| | | if(this.nomoreVideo) { |
| | |
| | | } |
| | | |
| | | .video-info { |
| | | display: flex; |
| | | height: 60rpx; |
| | | align-items: center; |
| | | font-size: 24rpx; |
| | | width: 100%; |
| | | padding-right: 20rpx; |
| | | box-sizing: border-box; |
| | | position: absolute; |
| | | bottom: 20rpx; |
| | | left: 20rpx; |
| | | right: 20rpx; |
| | | color: #fff; |
| | | font-size: 24rpx; |
| | | } |
| | | |
| | | .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 { |