waterElectricityMinApp/pagesRepairs/evaluate/evaluate.vue

<template>
	<view class="container">
		<!-- 处理时效区域 -->
		<view class="score">
			<text>处理时效</text>
			<uni-rate activeColor="#FF5733" allowHalf size="30" value="0" @change="onChange" />
		</view>

		<!-- 服务评价区域 -->
		<view class="evaluate">
			服务评价
			<textarea placeholder-style="color:#CCCCCC" placeholder="您宝贵的评价对我们很重要哦" v-model="textareaValue"></textarea>
		</view>

		<!-- 确认提交区域 -->
		<view class="btn" @click="handleSub">确认提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			score: 0,
			textareaValue: ''
		}
	},
	methods: {
		onChange(e) {
			console.log(e)
			this.score = e.value * 2
		},
		handleSub() {
			if (this.score === 0) {
				uni.showToast({
					title: '请您给此次服务评分',
					icon: 'none'
				})
				return
			}
			if (!this.textareaValue) {
				uni.showToast({
					title: '请输入服务评价',
					icon: 'none'
				})
				return
			}
			console.log(this.score)
			console.log(this.textareaValue)
			uni.showToast({
				title: '评价成功',
				icon: 'none'
			})
			setTimeout(() => {
				uni.redirectTo({
					url: '/pagesRepairs/box/box'
				})
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	padding-left: 30rpx;
	width: 100vw;
	height: 100vh;

	.score {
		display: flex;
		align-items: center;
		height: 172rpx;
		font-size: 28rpx;

		text {
			margin-right: 25rpx;
		}
	}

	.evaluate {
		display: flex;
		font-size: 28rpx;

		textarea {
			box-sizing: border-box;
			margin-left: 28rpx;
			padding: 14rpx 20rpx;
			width: 550rpx;
			height: 298rpx;
			font-size: 28rpx;
			border-radius: 11rpx;
			border: 1rpx solid #e6e6e6;
		}
	}

	.btn {
		position: absolute;
		left: 30rpx;
		bottom: 65rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 12rpx;
		background-color: #6fb6b8;
	}
}
</style>