qingyuan/components/template/evaluateItem.vue

<template>
	<view class="evaluateItem">
		<view class="dis-flex evaluate-title">
			<image :src="evaItem.avatar" mode=""></image>
			<view class="flex-box">
				<view class="f-28 col-3 f-w">{{evaItem.nickname}}</view>
				<view class="f-24 col-9 p-top-10">{{evaItem.createtime}}</view>
			</view>
			<!-- #ifdef H5 -->
			<view class="f-24 col-9 dis-flex" style="position: relative;top: -25upx;">
				<tui-rate :current="evaItem.star" :disabled="true" :score="1" active="#ff4444"></tui-rate>
				<view style="line-height: 90upx;padding-left: 5upx;">{{evaItem.star == 5 || evaItem.star == 4?'好评':evaItem.star == 3?'中评':'差评'}}</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="f-24 col-9 dis-flex" style="">
				<tui-rate :current="evaItem.star" :disabled="true" :score="1" active="#ff4444"></tui-rate>
				<view style="line-height: 45upx;padding-left: 5upx;">{{evaItem.star == 5 || evaItem.star == 4?'好评':evaItem.star == 3?'中评':'差评'}}</view>
			</view>
			<!-- #endif -->
		</view>
		<view style="padding-left: 110upx;">
			<view class="col-3 f-28 p-top-20">{{evaItem.text}}</view>
			<view class="img-flex" style="padding-top: 30upx;" v-if="evaItem.pic.length > 0">
				<image
					v-for="(item, index) in evaItem.pic" :key="index"
					:src="item"
					@click="lookImg(evaItem.pic,index)"
					mode=""
				></image>
			</view>
			<view class="dis-flex condition f-28 col-3 f-w" >
				<view  @click="like">
					<image :src="imgfixUrls + 'homemakingImg/weidianzan.png'" v-if="evaItem.praiseflag == 0" mode=""></image>
					<image :src="imgfixUrls + 'homemakingImg/yidianzan.png'" v-else mode=""></image>
					<view class="text">{{evaItem.praisetotal}}</view>
				</view>
				<view  style="padding-left: 50upx;" @click="openComm" v-if="hidereply == 0">
					<image :src="imgfixUrls + 'homemakingImg/huifukuang.png'" mode=""></image>
					<view class="text">{{evaItem.replytotal}}</view>
				</view>
			</view>
			<view class="criticList" v-if="evaItem.replylist.length != 0 || evaItem.replytextone">
				<view class="criticItem f-24 col-3 " v-if="evaItem.replytextone">
					<text class="f-w" style="color: #007AFF;">商家回复：</text>
					<text>{{evaItem.replytextone}}</text>
				</view>
				<view class="criticItem f-24 col-3 " v-for="(item,index) in evaItem.replylist">
					<text class="f-w">{{item.nickname}}：</text>
					<text>{{item.content}}</text>
				</view>
			</view>
			<view class="f-28 col-3 f-w t-r" style="padding-top: 20upx;" @click="open" v-if="evaItem.replytotal != evaItem.replylist.length - 1 && evaItem.replylist.length != 0">
				{{evaItem.replytotal>5?'展开':''}}
			</view>
		</view>
		<PopManager :show="commShow" :type="'center'" :overlay="'false'" :showOverlay="'false'" @clickmask="close">
			<view class="commBox">
				<textarea value="" v-if="commShow" v-model="textCom" class="textarea" placeholder="回复:" />
				<view class="commBtn" @click="reply">
					回复
				</view>
			</view>
		</PopManager>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import tuiRate from '@/components/template/rate.vue';
import PopManager from '@/components/template/PopManager';
export default {
	data() {
		return {
			onnumber:5,
			commShow:false,
			textCom:''
		};
	},
	components: {
		tuiRate,
		PopManager
	},
	props:{
		evaItem:{
			type:Object,
			default:{}
		},
		hidereply:{
			type:Number,
			default:0
		}
	},
	methods:{
		lookImg(imgs,index){
			uni.previewImage({
				current:imgs[index],
				urls: imgs
			})
		},
		like(){
			App._post_form(
				`&p=housekeep&do=clickPraise`,
				{cid:this.evaItem.id},
				res => {
					console.log(res);
					uni.showToast({
						title: res.message
					});
					this.$emit('getData');
				},
				false,
				() => {}
			);
		},
		reply(){
			let data = {
				content:this.textCom,
				cid:this.evaItem.id
			}
			App._post_form(
				`&p=housekeep&do=leaveMessage`,
				data,
				res => {
					console.log(res);
					uni.showToast({
						title: res.message
					});
					this.$emit('getData');
					this.textCom = '';
					this.commShow = false;
				},
				false,
				() => {}
			);
		},
		openComm(){
			this.commShow = true;
		},
		close(){
			this.commShow = false;
			this.textCom = ''
		},
		open(){
			this.$emit('getmoreCom',this.evaItem.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.evaluateItem {
	padding: 30upx 0;
	.evaluate-title {
		image {
			width: 90upx;
			height: 90upx;
			border-radius: 50%;
			margin-right: 20upx;
			// border: 1upx solid #707070;
		}
	}
	.commBox{
		width: 450upx;
		background-color: #FFFFFF;
		border-radius: 30upx;
		padding: 30upx;
		.textarea{
			width: 100%;
			height: 200upx;
			font-size: 28upx;
		}
		.commBtn{
			width: 200upx;
			height: 60upx;
			line-height: 60upx;
			border-radius: 60upx;
			text-align: center;
			font-size: 28upx;
			font-weight: bold;
			background-color: #72AAFD;
			color: #FFFFFF;
			margin: auto;
		}
	}
	.img-flex:after{
		content:'';
		width:187upx;
	}
	.img-flex {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		// padding-top: 20upx;
		image {
			// flex: 0 0 30%;
			width: 187upx;
			height: 187upx;
			margin-top: 20upx;
			border-radius: 20upx;
		}
	}
	.condition{
		// padding-left: 110upx;
		padding: 40upx 0 40upx;
		// border-bottom: 1upx solid #EEEEEE;
		image{
			width: 34upx;
			height: 34upx;
			vertical-align: bottom;
		}
		.text{
			display: inline-block;
			vertical-align: bottom;
			line-height: 34upx;
			padding-left: 10upx;
		}
	}
	.criticList{
		padding: 20upx 0;
		border-top: 1upx solid #EEEEEE;
		.criticItem{
			padding-bottom: 10upx;
		}
	}
}
</style>