uview组件和uniapp组件冲突问题、视频评论

xiangpei

2025-05-27 117b18ca111f2be41aec49961dc98db1769ca39f

 pages/tabbar/index/home.vue

@@ -89,18 +89,74 @@
            <text style="font-size: 10px;font-weight: lighter;">{{item.commentNum}}</text>
          </view>
        </view>
		
      </swiper-item>
    </swiper>
	
   <!-- 评论弹窗 -->
   <uni-popup ref="commentPopup" type="bottom" :is-mask-click="true" @maskClick="closeCommentPopup">
     <view class="comment-popup">
       <view class="popup-header">
         <text class="popup-title">评论({{comments.length}})</text>
         <text class="iconfont close-icon" @click="closeCommentPopup">&#xe675;</text>
       </view>
	    
       <scroll-view class="comment-list" scroll-y>
         <view v-if="commentLoading" class="loading">
           <uni-load-more status="loading"></uni-load-more>
         </view>
	      
         <view v-else-if="comments.length === 0" class="empty">
           暂无评论，快来发表第一条评论吧~
         </view>
	      
         <view v-else class="comment-item" v-for="comment in comments" :key="comment.id">
           <image class="avatar" :src="comment.user.avatar || '/static/default-avatar.png'"></image>
           <view class="comment-content">
             <text class="nickname">{{comment.user.nickname}}</text>
             <text class="content">{{comment.content}}</text>
             <text class="time">{{formatTime(comment.createTime)}}</text>
           </view>
         </view>
       </scroll-view>
	    
       <view class="comment-input-area">
         <input 
           class="comment-input" 
           v-model="commentForm.commentContent" 
           placeholder="写下你的评论..." 
           placeholder-class="placeholder"
         />
         <button class="submit-btn" @click="submitComment">发送</button>
       </view>
     </view>
   </uni-popup>
	
	
   <custom-tabbar bgColor="#333333" selected="index" selectedTextColor="#ffffff"></custom-tabbar>
  </view>
</template>

<script>
import { getRecommendVideos, savePlayRecord, subscribe } from "@/api/video.js";
import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment } from "@/api/video.js";
import { changeCollect } from "@/api/collect.js";
export default {
  data() {
    return {
      commentQuery: {
         pageNumber: 1,
         pageSize: 5,
         videoId: '',
         masterCommentId: ''
      },
      commentForm: { // 评论表单数据
         id: null,
         videoId: null,
         commentContent: '',
         replyId: null
      },
      comments: [],            // 评论列表
      commentLoading: false,   // 评论加载状态
      startHidenTime: 0, // 记录切换至其它页面的时间，用于计算视频观看时间减去的部分
      totalHidenTime: 0, // 总共隐藏页面的时间
      startPauseTime: 0, // 开始暂停的时间
@@ -142,6 +198,85 @@
    this.initVideoContexts();
  },
  methods: {
      // 格式化时间
       formatTime(time) {
         const date = new Date(time);
         const now = new Date();
         const diff = Math.floor((now - date) / 1000); // 秒
	      
         if (diff < 60) return '刚刚';
         if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`;
         if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`;
	      
         return `${date.getMonth() + 1}月${date.getDate()}日`;
       },
      // 提交评论
       async submitComment() {
         if (!this.commentForm.commentContent.trim()) {
           uni.showToast({
             title: '评论内容不能为空',
             icon: 'none'
           });
           return;
         }
        // 发表评论
         addVideoComment(this.commentForm).then(res => {
           if(res.data.code === 200) {
              this.commentForm = {
                         id: null,
                         videoId: null,
                         commentContent: '',
                         replyId: null
              }
              this.comments.unshift(res.data.data);
              uni.showToast({
                title: '评论成功'
              });
              // 当前视频评论数加一
              this.videoList[this.currentIndex].commentNum += 1;
           } else {
              uni.showToast({
                      title: res.data.msg,
                      icon: 'none'
                    });
           }
        }).catch(() => {
           uni.showToast({
                   title: '评论失败',
                   icon: 'none'
                 });
        })
       },
       // 关闭评论弹窗
       closeCommentPopup() {
         console.log("触发了");
        this.$refs.commentPopup.close()
         this.showCommentPopup = false;
         this.comments = [];
         this.commentForm = {
           id: null,
           videoId: null,
           commentContent: '',
           replyId: null
        }
       },
       // 显示评论弹窗
       async showComments(item) {
         this.commentForm.videoId = item.id;
         this.$refs.commentPopup.open();
         this.commentLoading = true;
         this.commentQuery.videoId = item.id
        getVideoComments(this.commentQuery).then(res => {
           this.comments = res.data.data
        }).catch(() => {
           uni.showToast({
             title: '获取评论失败',
             icon: 'none'
           });
        }).finally(() => {
           this.commentLoading = false;
        })
       },
     // 关注作者
     subscribeAuth(index, authorId) {
      this.videoList.forEach(video => {
@@ -480,5 +615,110 @@
     font-size: 26rpx;
     font-weight: bold;
   }
   /* 评论弹窗样式 */
   .comment-popup {
     background-color: #fff;
     border-radius: 20rpx 20rpx 0 0;
     padding-bottom: env(safe-area-inset-bottom);
     height: 50vh;
     display: flex;
     flex-direction: column;
   }

   .popup-header {
     padding: 30rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1rpx solid #f5f5f5;
   }

   .popup-title {
     font-size: 32rpx;
     font-weight: bold;
   }

   .close-icon {
     /* font-size: 36rpx; */
     color: #999;
   }

   .comment-list {
     flex: 1;
     padding: 20rpx;
     box-sizing: border-box;
   }

   .comment-item {
     display: flex;
     padding: 20rpx 0;
     border-bottom: 1rpx solid #f5f5f5;
   }

   .avatar {
     width: 80rpx;
     height: 80rpx;
     border-radius: 50%;
     margin-right: 20rpx;
   }

   .comment-content {
     flex: 1;
   }

   .nickname {
     font-size: 26rpx;
     color: #666;
     display: block;
     margin-bottom: 10rpx;
   }

   .content {
     font-size: 30rpx;
     color: #333;
     display: block;
     margin-bottom: 10rpx;
   }

   .time {
     font-size: 24rpx;
     color: #999;
   }

   .comment-input-area {
     display: flex;
     padding: 20rpx 30rpx;
     align-items: center;
   }

   .comment-input {
     flex: 1;
     background-color: #fff;
     height: 80rpx;
     border: 1px solid #dcdcdc;
     border-radius: 40rpx;
     padding: 0 30rpx;
     font-size: 28rpx;
   }

   .placeholder {
     color: #ccc;
   }

   .submit-btn {
     margin-left: 20rpx;
     background-color: #07c160;
     color: #fff;
     border-radius: 40rpx;
     padding: 0 30rpx;
     height: 80rpx;
     line-height: 80rpx;
     font-size: 28rpx;
   }

   .loading, .empty {
     padding: 40rpx 0;
     text-align: center;
     color: #999;
   }
</style>