视频相关页面优化、功能bug

xiangpei

5 天以前 4e9d7c0e363d313a273700865afb8b0d665e6c69

 pages/video/home-page.vue

@@ -4,9 +4,6 @@
    <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>
@@ -38,6 +35,10 @@
          {{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>
    
        <!-- 作品/喜欢切换 -->
@@ -65,18 +66,25 @@
              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.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">
                     <dropdown-menu
                     :options="item.options"
                     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">
@@ -87,7 +95,7 @@
              :key="item.id"
              @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">
@@ -114,11 +122,19 @@
</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: {
@@ -149,12 +165,18 @@
     nomoreCollectVideo: false
    }
  },
  onShow() {
    this.getAuthorInfo();
  },
  onLoad(option) {
   this.authorId = option.authorId;
    this.getAuthorInfo();
   this.getAuthorVideoPage();
  },
  methods: {
     handleChange(value) {
           console.log('选中值:', value)
         },
   getPage() {
      if(this.currentTab === 'works') {
         if(this.nomoreVideo) {
@@ -281,7 +303,7 @@
      });
    },
    // 播放收藏视频
    playAuthorVideo(index) {
    playCollectVideo(index) {
      const playInfo = {
         videoList: this.collectVideoList,
         nomore: this.nomoreCollectVideo,
@@ -294,9 +316,9 @@
      });
    },
    // 编辑个人资料
    editProfile() {
    editInfo() {
      uni.navigateTo({
        url: '/pages/user/edit'
        url: `/pages/video/home-page-edit?authorId=${this.authorId}&avatar=${this.userInfo.avatar}&motto=${this.userInfo.motto || ''}&nickName=${this.userInfo.nickName}`
      });
    },
    
@@ -351,16 +373,13 @@

.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 {
@@ -443,16 +462,21 @@
}

.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;
}

@@ -465,11 +489,11 @@

.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 {
@@ -483,17 +507,25 @@

.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 {
@@ -541,13 +573,4 @@
  }
}

/* 如果是自己的主页，隐藏关注按钮 */
.user-header {
  position: relative;
}

.video-container {
   display: flex;
   flex-wrap: wrap
}
</style>