pet-front/otherPages/orderTakingManage/evaluate/index.vue

<template>
	<!-- <div>我的评价</div> -->
	<view class="box">
		<view class="level">
			<view class="form-title">
				我的评价
			</view>
			<view class="text1">
				（{{ list.length }}条）
			</view>
		</view>
		
		<view v-for="item in list" :key="item.id" class="item box-size level">
			<view class="img" :style="{borderRadius:'75rpx'}">
				<image src="" mode="" style="width: 132rpx;height: 132rpx;" :style="{borderRadius:'75rpx'}"></image>
			</view>
			<view class="vertical">
				<view class="level flex-2">
					<view class="name">
						猫小姐
					</view>
					<view >
						<up-rate :count="count" v-model="value" active-color="#FFBF60" gutter="6"></up-rate>
					</view>
				</view>
				<view class="time">
					{{ item.createTime }}
				</view>
				<view >
					{{ item.comment }}
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import { appletCommentList } from "@/api/myFlow/index.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	
	onShow(() => {
		getAppletCommentList()
	})

	const count = ref(5);
	const value = ref(2);
	const list = ref([]);
	
	const getAppletCommentList = async() => {
		let response = await appletCommentList();
		if(response.code == 200 && response.data) {
			list.value = response.data;
		}
	}
</script>

<style lang="scss">
	.box {
		width: 100vw;
		height: 100vh;
		font-weight: 0 !important;


		.text1 {
			margin-top: 45rpx;
			color: #C7C7C7;
			font-size: 22rpx;
		}

		.item {
			width: 750rpx;
			height: 180rpx;
			padding: 3% 4%;
			// background-color: pink;
			// border: 0.5rpx solid #707070;
			margin-top: 25rpx;
			font-size: 28rpx;
			position: relative;

			&::before {
				position: absolute;
				top: 10rpx;
				left: 0;
				content: "";
				width: 750rpx;
				height: 1rpx;
				border-radius: 9rpx;
				background-color: #707070;
			}

			.img {
				width: 132rpx;
				height: 132rpx;
				background: red;
				margin-right: 15rpx;
			}

			.flex-2 {
				width: 550rpx;
				justify-content: space-between;
			}

			.name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.time {
				color: grey;
			}
		}
	}

	.box-size {
		box-sizing: border-box;
	}

	.level {
		display: flex;
	}

	.vertical {
		display: grid;
		justify-content: space-between;
	}
</style>