crm-mobile/components/base/comment-list.vue

<template>
  <view class="comment-list">
    <view v-if="showIcon" class="icon-wrapper">
      <image
        :src="$static('images/oa/log_comment.png')"
        class="icon-pic" />
    </view>
		
    <view class="wrapper">
      <view
        v-for="item in replyList"
        :key="item.commentId"
        class="comment-item" 
        @click.stop="handleChoose(item, $event)">
        <template v-if="showAvatar">
          <view class="avatar-wrapper">
            <wk-avatar
              :avatar="item.user.img"
              :name="item.user.realname"
              :size="12"
              :preview="false"
              class="avatar" />
            <view class="username">
              {{ item.user.realname }}
            </view>
            <view class="time">
              {{ item.createTime | formatTime }}
            </view>
          </view>
          <view class="content-text">
            {{ item.content }}
          </view>
        </template>
				
        <template v-else>
          <view class="content">
            <text class="username">
              {{ item.user.realname }}：
            </text>
            <text class="content-text">
              {{ item.content }}
            </text>
          </view>
								
          <view class="time">
            {{ item.createTime | formatTime }}
          </view>
        </template>
				
        <view
          v-if="!$isEmpty(item.childCommentList)"
          class="child-comment">
          <view
            v-for="child in item.childCommentList"
            :key="child.commentId"
            class="comment-item"
            @click.stop="handleChoose(child, $event)">
            <view class="content">
              <text class="username">
                {{ child.user.realname }}
              </text>
              <text class="reply-text">
                回复
              </text>
              <text class="username">
                {{ child.replyUser.realname }}：
              </text>
              <text class="content-text">
                {{ child.content }}
              </text>
            </view>
						
            <view class="time">
              {{ child.createTime | formatTime }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import moment from 'moment'
	
  export default {
    name: 'CommentList',
    filters: {
      formatTime(data) {
        if (!data) return ''
        return moment(data).format('MM-DD HH:mm')
      }
    },
    props: {
      replyList: {
        type: Array,
        default: () => []
      },
      showIcon: {
        type: Boolean,
        default: true
      },
      showAvatar: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      handleChoose(item, evt) {
        this.$emit('choose', item, evt)
      }
    }
  }
</script>

<style lang="scss" scoped>
	.comment-list {
		position: relative;
		width: 100%;
		overflow: hidden;
		.icon-wrapper {
			position: absolute;
			top: 0;
			left: 0;
			.icon-pic {
				width: 36rpx;
				height: 36rpx;
				margin: 8rpx 0;
			}
		}
		
		.wrapper {
			width: 100%;
			overflow: hidden;
			padding-left: 50rpx;
			
			.comment-item {
				padding: 15rpx 0;
				&:first-child {
					padding-top: 0;
				}
				
				.content-text {
					color: $dark;
					font-size: $wk-font-base;
					word-wrap: break-word;
					white-space: pre-wrap;
				}
				
				.avatar-wrapper {
					margin-bottom: 20rpx;
					@include left;
					.avatar {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}
					.username {
						flex: 1;
						@include ellipsis;
					}
					.time {
						font-size: 24rpx;
						color: #AAAAAA;
						margin-left: 10rpx;
					}
				}
				
				.content {
					margin-bottom: 5rpx;
					.username {
						color: $theme-color;
						font-size: $wk-font-base;
					}
					.reply-text {
						color: $dark;
						font-size: $wk-font-base;
					}
				}
				.time {
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
			
			.child-comment {
				border-radius: 4rpx;
				background-color: #F5F5F5;
				padding: 15rpx 20rpx 0 50rpx;
				margin: 15rpx 0 0 -50rpx;
			}
		}
	
	}
</style>