zhywpt-sp/subpackage/personal-center/remind/components/evaluate-issue-item.vue

<!-- 发行评价列表 Item -->
<template>
	<view class="item-box" v-for="(item,index) in dataList" :key="index">
		<view class="top as-layout-horizontal as-gravity-center-start">
			<view class="as-layout-horizontal as-gravity-center-start">
				<image :src="`${$imgUrl}order/icon-star-green.png`"></image>
				<text>{{item.productName}}</text>
			</view>
			<view class="time">{{item.insertTime}}</view>
		</view>

		<view class="center">
			<!-- <view class="as-layout-horizontal as-gravity-center-start">
				<image :src="`${$imgUrl}user/icon-avatar.png`"></image>
				<text>{{item.customerName}}</text>
			</view> -->
			<view class="content">{{item.suggestion}}</view>
			<view class="images" v-if="item.pictureUrlArr && item.pictureUrlArr.length>0">
				<image class="img" mode="aspectFill" v-for="(itemChild,index) in item.pictureUrlArr" :src="itemChild"
					:key="index" @click="see(index,item.pictureUrlArr)" />
			</view>
		</view>

		<view class="bottom">
			<view class="text good" v-if="item.evaluate === '好评'">好评</view>
			<view class="text middle" v-if="item.evaluate === '中评'">中评</view>
			<view class="text bad" v-if="item.evaluate === '差评'">差评</view>
			<view class="score">{{item.score}}分</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	defineProps({
		//数据列表
		dataList: {
			type: Array,
			default: () => {
				return [];
			}
		}
	})
	const see = (index, pictureUrlArr) => {
		uni.previewImage({
			current: index,
			urls: pictureUrlArr,
		});
	}
</script>

<style lang="scss" scoped>
	.item-box {
		background: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin-bottom: 30rpx;

		.top {
			min-height: 88rpx;
			padding: 0rpx 30rpx;
			border-bottom: 1rpx solid #DCDCDC;

			image {
				width: 48rpx;
				height: 53rpx;
			}

			text {
				margin-left: 12rpx;
				font-size: 30rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
			}

			.time {
				font-size: 26rpx;
				color: #999999;
				text-align: right;
			}
		}

		.center {
			padding: 28rpx 30rpx;
			border-bottom: 1rpx solid #DCDCDC;

			image {
				width: 50rpx;
				height: 50rpx;
				background: #B2EEE1;
				border-radius: 50%;
			}

			text {
				font-size: 26rpx;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				margin-left: 22rpx;
			}

			.content {
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				line-height: 46rpx;
				margin-top: 30rpx;
			}
		}

		.bottom {
			padding: 15rpx 30rpx;
			text-align: right;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.text {
				width: 97rpx;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 18rpx;
				font-size: 26rpx;
				text-align: center;
			}

			.good {
				background: #FBD9D0;
				color: #DD523E;
			}

			.middle {
				background: #FBECD0;
				color: #FF9600;
			}

			.bad {
				background: #E1E1E1;
				color: #999999;
			}

			.score {
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				margin-left: 17rpx;
			}
		}
	}

	.images {
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: -30rpx;
		margin-bottom: -30rpx;

		.img {
			width: 130rpx;
			height: 130rpx;
			margin-right: 30rpx;
			background: #F3F3F3;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
		}
	}
</style>