zhywpt-sp/subpackage/service/remind/components/evaluate-equity-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.equityName}}</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`" class="avatar"></image>
				<text>{{item.customerName}}</text>
			</view> -->
			<view class="content">{{item.suggestion}}</view>
			<view class="images">
				<image class="img" mode="aspectFill" v-for="(itemChild,index) in item.pictureUrl" :src="`${$imgUrl}${itemChild}`" />
			</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 [];
			}
		}
	})
</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;
			display: flex;
			justify-content: flex-end;
			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;
			.avatar{
				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;
			}
			
			.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;
				}
			}
		}
		
		.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;
			}
		}
	}
</style>