绿满眶商城微信小程序-uniapp
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,7 +66,7 @@
              class="video-item" 
              v-for="(item, index) in videoList" 
              :key="item.id"
              @click="playVideo(index)"
              @click="playAuthorVideo(index)"
            >
              <image class="video-cover" :src="item.coverUrl" mode="aspectFill"></image>
              <view class="video-info">
@@ -85,7 +86,7 @@
              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>
              <view class="video-info">
@@ -148,6 +149,9 @@
     nomoreVideo: false,
     nomoreCollectVideo: false
    }
  },
  onShow() {
    this.getAuthorInfo();
  },
  onLoad(option) {
   this.authorId = option.authorId;
@@ -212,9 +216,11 @@
      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) {
@@ -260,20 +266,41 @@
      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() {
    // 播放收藏视频
    playAuthorVideo(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}`
      });
    },
    
@@ -328,16 +355,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 {
@@ -516,11 +540,6 @@
    background-color: #f5f5f5;
    color: #666;
  }
}
/* 如果是自己的主页,隐藏关注按钮 */
.user-header {
  position: relative;
}
.video-container {