antissoft / antissoft.shangten.wechar

<template>
	<view>
		<image src="../../static/beijing.png" class="background" mode=""></image>
		<!-- 头部 -->
		<view class="commentView" v-for="(item,index) in commentList" :key="index">
			<view class="head">
				<!-- 图片 -->
				<view class="headPortrait">
					<image class="headPortraitImg" :src="item.UserImg" mode=""></image>
				</view>
				<!-- 名称 和id-->
				<view class="userName">
					<!-- 用户名称 -->
					<view class="userName-1" style="font-size:25rpx;">
						{{item.UserName}}
					</view>
					<!-- 用户id -->
					<view class="userName-1" style="font-size:20rpx;">
						ID:{{item.UserId}}
					</view>
				</view>
			</view>
			<!-- 评论 评分-->
			<view class="commentScore" >
				<!-- 评论 -->
				<view class="comment">
					<view class="commentChart">
						<!-- <image src="../../static/shiliang.png" mode=""></image> -->
					</view>
					<view class="commentText">
						评论:{{item.commentContent}}
					</view>
				</view>
				<!-- 评分 -->
				<view class="score">
					<view class="scoreText">评分:</view>
					<rate  class="onChange" :value="item.commetNum" disabled></rate>
				</view>
			</view>
			<!-- 图片 -->
			<view class="commentImg" v-if="item.commentSendImg[0] !=''">
				<view class="commentImg-1">
					<!-- @click="previewImg(item.commentSendImg)" -->
					<image class="commentImg-1-1" :src='BASE_URL+items' mode="" v-for="(items,index) in item.commentSendImg" :key="index" ></image>
				<!-- 	<image class="commentImg-1-1" src="" mode=""></image>
					<image class="commentImg-1-1" src="" mode=""></image>
					<image class="commentImg-1-1" src="" mode=""></image> -->
				</view>
			</view>
			<!-- 养护管家回复 -->
			<view class="replyFromCarMaintenanceHousekeeper" v-if="item.ReturnName==null?false:true">
				{{item.ReturnName}}：{{item.ReturnContent}}
			</view>
		</view>
	</view>

</template>

<script>
	import rate from '../../components/rate.vue';
	import BASE_URL from '../../common/config.js'
	export default {
		name: 'evaluate',
		data() {
			return {
				BASE_URL,
				// 评论列表
				commentList: [],
				comentModel: {
					"UserId": 0,
					"Type": 1,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "add_time",
						"Type": 1
					}]
				},
				// 用户评论图片数据
				// commentImgList:[]
			}
		},
		onLoad() {
			this.ShowComment()
		},
		onShow() {
			// this.IsLogin()
		},
		methods: {
			previewImg(itemarray){
				let url='https://shangten.yiqituancity.com'
				let _this = this;
				let imgsArray = [];
				itemarray.forEach((itesm,index)=>{
					imgsArray.push(url+itesm);
				})
				uni.previewImage({
				urls: imgsArray,
				indicator: 'number',
				loop: true
				});
				
			},
			ce(){
				uni.navigateTo({
					url:'resultEvaluate/resultEvaluate',
				})
			},
			onChange(d) {
				console.log(d)
			},
			// 查询所有经过审核的评论
			ShowComment(){
				this.API.GetCommentList(this.comentModel).then(res=>{
					console.log('数据',res)
					res.data.data.rows.forEach((item,index)=>{
						item.commentSendImg=item.commentSendImg.split(',')
						if(item.UserImg.startsWith('https')==false){
							item.UserImg='https://shangten.yiqituancity.com'+item.UserImg
						}
					})
					// console.log('上传图片数据',this.commentImgList)
					this.commentList=res.data.data.rows
					console.log('评论数据',this.commentList)
					this.comentModel.TotalCount=res.data.data.total
				})
			},
			// 判断是否授权登录
			IsLogin() {
				let jsonstorage = uni.getStorageSync('userinfo')
				if (jsonstorage == undefined || jsonstorage == '' || jsonstorage == null) {
					uni.redirectTo({
						url: '../login/login',
					})
					return
				}
			},
		},
		components: {
			rate
		}
	}
</script>

<style>
	.commentView{
		border-bottom: 1px solid rgb(242, 226, 172,0.5);
	}
	/* 背景图片 */
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	/* 头部 */
	.head {
		width: 700rpx;
		height: 130rpx;
		display: flex;
		margin: 0 auto;
	}

	/* 图片 */
	.headPortrait {
		width: 80rpx;
		height: 80rpx;
		margin-top: 47rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.headPortraitImg {
		width: 100%;
		height: 100%;
	}

	/* 名称和id */
	.userName {
		width: 50%;
		height: 80rpx;
		margin-top: 47rpx;
		margin-left: 37rpx;
		display: flex;
		flex-direction: column;
	}

	.userName-1 {
		width: 100%;
		height: 50%;
		color: #ffffff;
		display: flex;
		align-items: center;
	}

	/* 评论 评分 */

	.commentScore {
		width: 700rpx;
		min-height: 50rpx;
		margin: 0 auto;
		/* border: #008000 solid 2rpx; */
		display: flex;
		margin-top: 15rpx;
	
	}

	.comment {
		width: 50%;
		height: 100%;
		/* background-color: #007AFF; */
		display: flex;
		align-items: center;
		
	}

	.commentChart {
		/* background-color: #AD1212; */
		width: 30rpx;
		height: 30rpx;
		background-image: url(../../static/shiliang.png);
		background-size: 100%;
	}

	.commentText {
		width: 300rpx;
		height: 30rpx;
		margin-left: 8rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		/* overflow: auto; */
		text-overflow: ellipsis;
	}

	/* 评分 */

	.score {
		width: 50%;
		height: 100%;
		/* background-color: #8A6DE9; */
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.scoreText {
		width: 80rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.onChange {
		width: 200rpx;
		height: 40rpx;
		/* background-color: #007AFF; */
		display: flex;
		align-items: center;
	}

	/* 评论图片 */
	.commentImg {
		width: 700rpx;
		height: 100%;
		/* background-color: #007AFF; */
		margin: 10rpx auto;
		display: flex;
		margin-top: 10px;
	}

	.commentImg-1-1 {
		/* width: 100%;
			height: 100%; */
		width: 148rpx;
		height: 148rpx;
		margin-right: 28rpx;
	}

	/* 汽车养护管家回复 */
	.replyFromCarMaintenanceHousekeeper {
		width: 700rpx;
		height: 100%;
		margin: 12rpx auto;
		/* border: #008000 solid 2rpx; */
		font-size: 23rpx;
		color: #f9c777;
		line-height: 40rpx;
	}
</style>