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: '',
			// 订单的Id
			recordId: ''
		}
	},
	onLoad(options) {
		this.recordId = options.recordId
	},
	methods: {
		// 评分改变回调
		onChange(e) {
			// console.log(e)
			this.score = e.value
		},
		// 确认提交按钮回调
		async handleSub() {
			if (this.score === 0) {
				uni.showToast({
					title: '请您给此次服务评分',
					icon: 'none'
				})
				return
			}
			// if (!this.textareaValue) {
			// 	uni.showToast({
			// 		title: '请输入服务评价',
			// 		icon: 'none'
			// 	})
			// 	return
			// }

			const res = await this.$myRequest_repairs({
				url: '/repairEvaluate/insertRepairEvaluate',
				method: 'post',
				data: {
					recordId: this.recordId,
					star: this.score,
					content: this.textareaValue
				}
			})
			// console.log(res)
			if (res.code === '200') {
				uni.showToast({
					title: '评价成功',
					icon: 'success'
				})
				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>