<!-- 评价页面 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<!-- 导航 -->
		<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
			<view class="ss-flex-2 ss-col-center">
				<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
				<view style="margin-left: 15rpx; color: #3D444E; font-size: 28rpx">评价服务</view>
			</view>
			<view class="ss-flex-1"></view>
			<text class="textIcon icon-kefu icon-navigation"></text>
			<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
		</view>

		<view class="ss-flex-2 ss-col-center event-info-box">
			<view class="left-text">服务评价</view>
			<view class="ss-flex-1"></view>
			<view class="">
				<uni-rate v-model="rateValue" :margin="10" color="#bbb" active-color="#F9B62D" :readonly="false"
					size="24" />
			</view>
		</view>
		<view class="message-info-box">
			——&nbsp;具体说说看&nbsp;——
		</view>
		<view class="event-info-box">
			<view class="ss-flex-2 ss-col-center">
				<view class="left-text">个人形象</view>
				<view class="ss-flex-1"></view>
				<view class="">
					<uni-rate v-model="rateValue" :margin="10" color="#bbb" active-color="#F9B62D" :readonly="false"
						size="24" />
				</view>
			</view>
			<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;">
				<view class="left-text">服务态度</view>
				<view class="ss-flex-1"></view>
				<view class="">
					<uni-rate v-model="rateValue" :margin="10" color="#bbb" active-color="#F9B62D" :readonly="false"
						size="24" />
				</view>
			</view>
			<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;">
				<view class="left-text">专业水平</view>
				<view class="ss-flex-1"></view>
				<view class="">
					<uni-rate v-model="rateValue" :margin="10" color="#bbb" active-color="#F9B62D" :readonly="false"
						size="24" />
				</view>
			</view>
			<view class="message-info-box">
				——&nbsp;选择任意三种种标签&nbsp;——
			</view>
			<view class="term-box">
				<view class="term-item-box">身材好</view>
				<view class="term-item-box">很可爱</view>
				<view class="term-item-box">态度好</view>
				<view class="term-item-box">本人比照片好看</view>
				<view class="term-item-box">情商高</view>
				<view class="term-item-box">手法温柔</view>
				<view class="term-item-box">服务专业</view>
			</view>
			<uni-easyinput style="margin-top: 10rpx;" disabled type="textarea" v-model="termInfo" placeholder="说点什么吧......"></uni-easyinput>
		</view>
		
		<!-- 中部 -->
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view">
				</view>
			</scroll-view>
		</view>
		<!-- 底部按钮 -->
		<view class="bt-box ss-flex-2">
			<view class="ss-flex-1"></view>
			<view class="nim-box">匿名评价</view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();

	// 星星
	const rateValue=ref(2)

	const termInfo=ref('')
	// 返回首页
	const backPage = async () => {
		uni.navigateBack({
			url:'/pages/XDHome/orderInfoList/orderInfoList'
		});
	};

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.nim-box{
		font-size: 26rpx;
		color: #2AAFD4;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 10rpx;
		padding: 15rpx 50rpx;
		font-weight: 650;
	}
	.bt-box{
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		background-color: #2AAFD4;
	}
	.term-box{
		display: flex;
		flex-wrap: wrap;
	}
	.term-item-box{
		font-size: 20rpx;
		color: #898989;
		padding: 5rpx 25rpx;
		background-color: #EFEEF1;
		border-radius: 15rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}
	.message-info-box{
		width: 100%;
		height: 25rpx;
		line-height: 25rpx;
		text-align: center;
		font-size: 20rpx;
		color: #65696C;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.left-text{
		font-size: 26rpx;
		color: #444648;
	}
	.event-info-box{
		width: 95%;
		margin-left: 2.5%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: 100vh;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 10rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>