hongze_yb_xcx/components/questionComment/questionComment.vue

<!-- 问答评论区 --> 

<template>
	<view class="question-comment-box">
		<!-- 第一条评论 -->
		<view class="first-comment" v-if="data.comment_list.length>0">
			<!-- <img :src="comment_img" alt="" class="icon"> -->
			<view class="comment">
				<template v-for="(item,index) in data.comment_list">
					<image class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="false" :key="index"/>
					<text :key="index">{{item.comment}}</text>
				</template>
			</view>
		</view>	
			
		<!--  -->
		<view class="question-comment-wrapper">
			<view class="commetn-item-wrap" @click.stop="setLikeHandle(1)">
				<img :src="data.op_type===1?like_act_img:like_img" alt="" class="icon">
				<text v-if="data.like_total">{{data.like_total}}</text>
			</view>
			<view class="commetn-item-wrap" @click.stop="setLikeHandle(2)" style="justify-content:center;">
				<img :src="data.op_type===2?tease_act_img:tease_img" alt="" class="icon">
				<text v-if="data.tease_total">{{data.tease_total}}</text>
			</view>
			<view class="commetn-item-wrap" @click.stop="openCommentHandle" style="justify-content:flex-end;">
				<img :src="comment_img" alt="" class="icon"> 
				<text v-if="data.comment_total">{{data.comment_total}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
   import * as $api from '@/api/question.js'
	export default {
		props: {
			item: {
				type: Object,
			}
		},
		data() {
			return {
            data: this.item,
				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'),
			};
		},
		methods: {
			openCommentHandle() {
				this.$emit('show_comment',this.data)
			},
         
         /* 吐槽/点赞 */
         async setLikeHandle(type) {
            const { community_question_id } = this.data;
            const { data, code } = await $api.apiSetLike({
               op_type: type,
               community_question_id: community_question_id,
               enable: type === 1 ? Number(this.data.op_type!==1) : Number(this.data.op_type!==2)
            })
            
            if(code !== 200) return
            
            const { enabled,op_type,like_total,tease_total } = data;
            this.data.tease_total = tease_total;
            this.data.like_total = like_total;
            this.data.op_type = enabled === 0 ? 0 : op_type ;
            uni.showToast({
               title: enabled === 0 ? '取消成功' : op_type=== 1 ? '点赞成功' : '吐槽成功'
            })
         },
         
         
		}
	}
</script>

<style lang="scss" scoped>
.first-comment {
   background-color: #f4f4f4;
   padding: 10rpx;
	.comment {
		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;
		}
		// display: flex;
		// flex-wrap: wrap;
		// .commenter {
		// 	color: #000;
		// }
		// .avatar{
		// 	width: 56rpx;
		// 	height: 56rpx;
		// 	margin-right: 20rpx;
		// 	flex-shrink: 0;
		// 	border-radius: 50%;
		// }
		// view{
		// 	flex: 1;
		// 	position: relative;
		// }
	}
}
.question-comment-wrapper {
	color: #999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
	.commetn-item-wrap {
		display: flex;
		align-items: center;
      flex: 1;
		.icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}
	}
}

</style>