zhywpt-sp/subpackage/personal-center/remind/components/evaluate-business-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}user/icon-avatar.png`"></image>
				<text>{{item.customerName}}</text>
			</view> -->
			<view class="time">{{item.insertTime}}</view>
		</view>
		
		<view class="center">
			<!-- <view class="type">这里是业务办理</view> -->
			<view class="content">{{item.suggestion}}</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: 50rpx;
				height: 50rpx;
				background: #B2EEE1;
				border-radius: 50%;
			}
			
			text{
				margin-left: 20rpx;
				font-size: 30rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
			}
			.time{
				font-size: 26rpx;
				color: #333333;
				text-align: right;
			}
		}
		
		.center{
			padding: 28rpx 30rpx;
			border-bottom: 1rpx solid #DCDCDC;
			
			.type{
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #999999;
			}
			.content{
				ffont-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;
			}
		}
	}
</style>