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 style="font-size: 26rpx;">{{tuoming(item.orderId)}}</text>
			</view>
			<view class="time">{{item.insertTime}}</view>
		</view>

		<view class="center">
			<!-- <view class="type">这里是业务办理</view> -->
			<view class="content">{{item.suggestion}},{{item.message}}</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 [];
			}
		}
	})
	function tuoming(str) {
		var start = str.substring(0, 5); // 提取前5个字符
		var end = str.substring(20); // 提取剩余的字符
		var mask = '*****'; // 星号替换字符串
		return start + mask + end; // 返回结果字符串
	}
</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>