绿满眶商城微信小程序-uniapp
peng
2025-07-02 be80b22a4a0fcd33e1b17ebdb86eba91cc7de4d2
pages/video/video-play.vue
@@ -127,31 +127,35 @@
           </view>
          </view>
          
          <!-- 右侧互动按钮 -->
         <view class="action-buttons">
            <view class="avatar-container">
               <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image>
               <!-- 关注图标 - 使用绝对定位 -->
               <view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)">
                <text class="iconfont">&#xe629;</text>
               </view>
            </view>
            <view class="action-item" @click="toggleCollect(item, index)">
            <text class="iconfont" v-if="item.collected">&#xe605;</text>
            <text class="iconfont" v-else>&#xe601;</text>
            <text style="font-size: 10px;font-weight: lighter;">{{item.collectNum}}</text>
            </view>
           <view class="action-item" @click="showComments(item)">
              <text class="iconfont">&#xe7f7;</text>
              <text style="font-size: 10px;font-weight: lighter;">{{item.commentNum}}</text>
            </view>
           <view class="action-item">
              <button open-type="share" class="custom-share-btn" :data-obj="item">
                    <text class="iconfont">&#xe602;</text>
                  </button>
           </view>
          </view>
        <!-- 右侧互动按钮 -->
        <view class="action-buttons">
         <view class="avatar-container">
            <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image>
            <!-- 关注图标 - 使用绝对定位 -->
            <view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)">
             <text class="iconfont">&#xe629;</text>
            </view>
         </view>
           <view class="action-item" @click="toggleThumbsUp(item, index)">
                 <text class="iconfont" v-if="item.thumbsUp">&#xe605;</text>
                 <text class="iconfont" v-else>&#xe601;</text>
                 <text style="font-size: 10px;font-weight: lighter;">{{item.thumbsUpNum}}</text>
           </view>
          <view class="action-item" @click="showComments(item)">
             <text class="iconfont">&#xe7f7;</text>
             <text style="font-size: 10px;font-weight: lighter;">{{item.commentNum}}</text>
           </view>
           <view class="action-item" @click="toggleCollect(item, index)">
             <text class="iconfont" v-if="item.collected">&#xeb9d;</text>
             <text class="iconfont" v-else>&#xe603;</text>
             <text style="font-size: 10px;font-weight: lighter;">{{item.collectNum}}</text>
            </view>
           <view class="action-item">
              <button open-type="share" class="custom-share-btn" :data-obj="item">
               <text class="iconfont">&#xe602;</text>
              </button>
           </view>
         </view>
         
        </swiper-item>
      </swiper>
@@ -239,7 +243,16 @@
</template>
<script>
import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment, thubmsUpComment, cancelThubmsUpComment } from "@/api/video.js";
import {
   getRecommendVideos,
   savePlayRecord,
   subscribe,
   getVideoComments,
   addVideoComment,
   thubmsUpComment,
   cancelThubmsUpComment,
   changeThumbsUp,
} from "@/api/video.js";
import { changeCollect } from "@/api/collect.js";
import { saveShare } from "@/api/share.js";
import storage from "@/utils/storage.js";
@@ -318,7 +331,8 @@
         pageNumber: 1,
         pageSize: 10,
         authorId: '',
         videoFrom: ''
         videoFrom: '',
         keyword: ''
      },
      marginBottom: 0, // 底部安全区域
      windowHeight: 0 // 可使用屏幕高度
@@ -337,6 +351,7 @@
  },
  onUnload() {
     uni.removeStorageSync("playInfo");
     uni.removeStorageSync("searchPlayInfo");
  },
  onReady() {
     
@@ -344,11 +359,11 @@
  onLoad(option) {
     this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
     this.windowHeight = uni.getSystemInfoSync().windowHeight
     const playInfo = uni.getStorageSync("playInfo", playInfo);
     const playInfo = uni.getStorageSync("playInfo");
     const searchPlayInfo = uni.getStorageSync("searchPlayInfo");
     if(playInfo) {
        this.currentIndex = playInfo.playIndex;
        this.videoList = playInfo.videoList;
        console.log("拿到数据了",playInfo);
        this.videoQuery.pageNumber = playInfo.pageNumber;
        this.videoNoMore = playInfo.nomore;
        this.videoQuery.authorId = option.authorId;
@@ -357,6 +372,18 @@
        this.$nextTick(() => {
           const videoContext = uni.createVideoContext(`video${this.currentIndex}`, this);
           videoContext.play()
        })
     } else if (searchPlayInfo) { // 搜索页跳转过来的数据略有不同
        this.currentIndex = searchPlayInfo.playIndex;
        this.videoList = searchPlayInfo.videoList;
        this.videoQuery.pageNumber = searchPlayInfo.pageNumber;
        this.videoNoMore = searchPlayInfo.nomore;
        this.videoQuery.keyword = searchPlayInfo.keyword;
        this.videoQuery.videoFrom = option.videoFrom;
        this.currentVideoIsPlaying = true;
        this.$nextTick(() => {
                   const videoContext = uni.createVideoContext(`video${this.currentIndex}`, this);
                   videoContext.play()
        })
     } else {
        this.videoQuery.videoFrom = 'recommend';
@@ -827,6 +854,28 @@
        }
     })
    },
   // 点赞/取消点赞
   toggleThumbsUp(item, index) {
     let data = {
             refId: item.id,
             thumbsUpType: 'video'
     }
     const beforeThumbsUp = item.thumbsUp
     const beforeThumbsUpNum = item.thumbsUpNum
     if(item.thumbsUp) {
             this.videoList[index].thumbsUp = false
             this.videoList[index].thumbsUpNum -= 1
     } else {
             this.videoList[index].thumbsUp = true
             this.videoList[index].thumbsUpNum += 1
     }
     changeThumbsUp(data).then(res => {
             if(res.data.code !== 200) {
                this.videoList[index].thumbsUp = beforeThumbsUp
                this.videoList[index].thumbsUpNum = beforeThumbsUpNum
             }
     })
   },
    // 单击屏幕:暂停或继续播放
   togglePlay(index) {
      console.log("单击视频", index);
@@ -1327,7 +1376,7 @@
   .progress-text {
     margin-top: 10px;
     font-size: 14px;
     color: #666;
     color: #fff;
   }
   .swiper-box {
     width: 100%;