|
|
@@ -0,0 +1,269 @@
|
|
|
+<template>
|
|
|
+ <view class="video-comment-wrap">
|
|
|
+ <view class="flex action-wrap">
|
|
|
+ <view class="item">
|
|
|
+ <image :src="like_img" mode="aspectFill"/>
|
|
|
+ <text></text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <image :src="tease_img" mode="aspectFill"/>
|
|
|
+ <text>10</text>
|
|
|
+ </view>
|
|
|
+ <view class="item" @click="showComment">
|
|
|
+ <image :src="comment_img" mode="aspectFill"/>
|
|
|
+ <text>10</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-commnet-box" v-if="false">
|
|
|
+ <view class="item" v-for="(item,index) in list" :key="index">
|
|
|
+ <image class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="false" :key="index"/>
|
|
|
+ <text :key="index">{{item.comment}}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 评论弹窗 -->
|
|
|
+ <van-action-sheet
|
|
|
+ :show="isShowComment"
|
|
|
+ title="视频评论"
|
|
|
+ @close="closeCommentHandle"
|
|
|
+ @clickOverlay="isShowComment=false"
|
|
|
+ >
|
|
|
+ <view class="comment-cont" @touchmove.stop>
|
|
|
+ <view class="commment-top">
|
|
|
+ <text class="title">{{comment_obj.title}} {{comment_obj.total}}</text>
|
|
|
+ <view class="comment-top-right">
|
|
|
+ <text :class="select_comment_type === 1 && 'act'" @click="changeCommentTypeHandle(1)">全部</text>
|
|
|
+ <text :class="select_comment_type === 2 && 'act'" @click="changeCommentTypeHandle(2)">我的</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="comment-list-cont" v-if="comment_obj.total" scroll-y>
|
|
|
+ <view class="comment-list-item" v-for="(item,index) in commentList" :key="item.community_question_comment_id">
|
|
|
+ <view class="flex comment">
|
|
|
+ <image class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="true"/>
|
|
|
+ <view style="display:flex;align-items:center">{{item.content}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="del" v-if="select_comment_type === 2" @click="delCommentHandle(item,index)">删除该评论</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="nodata" v-else>
|
|
|
+ <image src="@/static/nodata.png"></image>
|
|
|
+ <view>暂无评论</view>
|
|
|
+ </view>
|
|
|
+ <view class="write-wrap" :style="{bottom: writeBottom+'px'}">
|
|
|
+ <textarea
|
|
|
+ v-model="comment_cont"
|
|
|
+ placeholder="发布一条友善的评论"
|
|
|
+ auto-height
|
|
|
+ :adjust-position="false"
|
|
|
+ :show-confirm-bar="false"
|
|
|
+ :cursor-spacing="20"
|
|
|
+ class="write-ipt"
|
|
|
+ @blur="setWritePosition(50)"
|
|
|
+ @focus="checkNickHandle"
|
|
|
+ />
|
|
|
+ <view class="confirm-btn" @click="publishMessageHandle">发布</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-action-sheet>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props:{
|
|
|
+ videoInfo:{}
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tease_img: require('@/static/question/tease.png'),
|
|
|
+ tease_act_img: require('@/static/question/tease_act.png'),
|
|
|
+ like_img: require('@/static/question/like.png'),
|
|
|
+ like_act_img: require('@/static/question/like_act.png'),
|
|
|
+ comment_img: require('@/static/question/comment.png'),
|
|
|
+
|
|
|
+ isShowComment: false,
|
|
|
+ comment_cont: '',
|
|
|
+ writeBottom: 50,
|
|
|
+ select_comment_type:1,//默认全部
|
|
|
+ select_question_item: {},
|
|
|
+ comment_obj: {
|
|
|
+ title: '全部评论',
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ comment_total: 0,
|
|
|
+ commentList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 关闭评论弹窗 */
|
|
|
+ closeCommentHandle() {
|
|
|
+ this.isShowComment = false;
|
|
|
+ this.select_question_item = {};
|
|
|
+ this.comment_cont = '';
|
|
|
+ this.select_comment_type = 1;//默认全部
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 切换评论类型*/
|
|
|
+ changeCommentTypeHandle(type) {
|
|
|
+ if(type === this.select_comment_type) return
|
|
|
+ this.commentList = [];
|
|
|
+ this.select_comment_type = type;
|
|
|
+ // this.getComment();
|
|
|
+ },
|
|
|
+
|
|
|
+ showComment(){
|
|
|
+ this.isShowComment=true
|
|
|
+ },
|
|
|
+
|
|
|
+ setWritePosition(val=50) {
|
|
|
+ console.log(val)
|
|
|
+ this.writeBottom = val < 50 ? 50 : val-8;
|
|
|
+ },
|
|
|
+
|
|
|
+ checkNickHandle(e){
|
|
|
+ this.setWritePosition(e.detail.height);
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.video-comment-wrap{
|
|
|
+ .action-wrap{
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 56rpx;
|
|
|
+ .item{
|
|
|
+ min-width: 80rpx;
|
|
|
+ image{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.list-commnet-box{
|
|
|
+ margin-top: 34rpx;
|
|
|
+ background-color: #F9F9F9;
|
|
|
+ padding: 20rpx;
|
|
|
+ .item{
|
|
|
+ color: #666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ .avatar{
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 14rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ vertical-align: middle;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.comment-cont {
|
|
|
+ height: calc(100vh - 250rpx);
|
|
|
+ border-top: 4rpx solid #F4F4F4;
|
|
|
+ position: relative;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ overflow: hidden;
|
|
|
+ .commment-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .comment-top-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ border: 1px solid #F6F6F6;
|
|
|
+ color: #666;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ text {
|
|
|
+ padding: 0 12rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ &.act {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .comment-list-cont {
|
|
|
+ height: calc(100vh - 550rpx);
|
|
|
+ overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ .comment-list-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .comment {
|
|
|
+ color: #666;
|
|
|
+ .avatar{
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ view{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .del {
|
|
|
+ color: #D80000;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ margin-left: 76rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .write-wrap {
|
|
|
+ padding: 0 24rpx;
|
|
|
+ border-top: 4rpx solid #F4F4F4;
|
|
|
+ position: absolute;
|
|
|
+ // bottom: 50px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 99;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-bottom: calc(5px + constant(safe-area-inset-bottom));
|
|
|
+ padding-bottom: calc(5px + env(safe-area-inset-bottom));
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .write-ipt {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .confirm-btn {
|
|
|
+ width: 100rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ color: #E3B377;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.nodata {
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+</style>
|
