reservation-uniapp-250509/service-uniapp-client/pages/order/evaluate.vue

<template>
	<view class="eval">
		<mNavbar title="服务评价"
		:leftClick="leftClick"/>
		
		<view class="box">
			<view class="line">
				<view class="text">
					服务评价
				</view>
				<view class="rate">
					<van-rate
					  v-model="evaluate.serviceNum"
					  :size="15"
					  color="#ffb54c"
					  void-icon="star"
					  void-color="#eee"
					/>
					<view class="t">
						{{ text[evaluate.serviceNum - 1] }}
					</view>
				</view>
			</view>
			
			<view class="box-detail">
				<view class="info">
					~具体说说看~
				</view>
				
				<view class="line">
					<view class="text">
						专业性
					</view>
					<view class="rate">
						<van-rate
						  v-model="evaluate.responseNum"
						  :size="15"
						  color="#ffb54c"
						  void-icon="star"
						  void-color="#eee"
						/>
						<view class="t">
							{{ text[evaluate.responseNum - 1] }}
						</view>
					</view>
				</view>
				<view class="line">
					<view class="text">
						服务态度
					</view>
					<view class="rate">
						<van-rate
						  v-model="evaluate.attitudeNum"
						  :size="15"
						  color="#ffb54c"
						  void-icon="star"
						  void-color="#eee"
						/>
						<view class="t">
							{{ text[evaluate.attitudeNum - 1] }}
						</view>
					</view>
				</view>
				<view class="line">
					<view class="text">
						服务响应速度
					</view>
					<view class="rate">
						<van-rate
						  v-model="evaluate.majorNum"
						  :size="15"
						  color="#ffb54c"
						  void-icon="star"
						  void-color="#eee"
						/>
						<view class="t">
							{{ text[evaluate.majorNum - 1] }}
						</view>
					</view>
				</view>
			
				<view class="info">
					~选择或自定义任意标签~
				</view>
				
				<view class="select">
					<view class="item"
					:key="index"
					@click="selectTags(item)"
					:class="{item : true, act : select.includes(item)}"
					v-for="(item,index) in tags">
						{{ item }}
					</view>
				</view>
			
				<view class="input">
					<textarea placeholder="说点什么吧..." cols="30" rows="10" v-model="evaluate.content"></textarea>
				</view>
			</view>
		</view>
		
		<view class="btn">
			<van-button 
			style="width: 80%;margin-left: 10%;background: 
			linear-gradient(178deg, #4FD3BC, #60C285);;" 
			type="primary" round block @click="submit">提交</van-button>
		</view>
	</view>
</template>

<script>
import mNavbar from '@/components/base/m-navbar.vue'
	export default {
		components : {
			mNavbar,
		},
		data() {
			return {
				evaluate : {
					serviceNum : 5,//服务评价
					responseNum : 5,//专业性
					attitudeNum : 5,//服务态度
					majorNum : 5,//服务响应速度
					content : ''
				},
				text : ['非常差', '很差', '一般', '很好', '非常好'],
				tags: ['专业性强', '态度谦和', '手法精湛', '力道恰好', '声音甜美', '耐心十足', '沟通顺畅', '注重细节'],
				select : []
			}
		},
		methods: {
			leftClick(){
				uni.navigateBack(-1)
			},
			selectTags(item){
				let i = this.select.indexOf(item)
				if(i == -1){
					this.select.push(item)
				}else{
					this.select.splice(i, 1)
				}
			},
			submit(){
				this.$api('evaluateVipOrder', {
					...this.evaluate,
					labelText : this.select.join(','),
					type : 0,
					orderId : this.$route.query.id,
					shopId : this.$route.query.projectId
				}, res => {
					if(res.code == 200){
						uni.showToast({
							mask: true,
							duration: 1000,
							title: res.message,
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/order'
							})
						}, 500)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
body{
	background-color: #f3f3f3;
	font-family: PingFang SC;
}
.box{
	padding: 20rpx;
	font-size: 28rpx;
	.line{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		
		.rate{
			font-size: 24rpx;
			color: #999;
			display: flex;
			align-items: center;
			.t{
				width: 90rpx;
				text-align: right;
			}
		}
	}
	.box-detail{
		margin: 20rpx 0;
		border-radius: 10rpx;
		background-color: #fff;
		.info{
			text-align: center;
			padding: 40rpx;
			color: #999;
			font-size: 26rpx;
		}
		.select{
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			.item{
				width: calc(25% - 80rpx);
				padding: 10rpx 20rpx;
				margin: 20rpx;
				font-size: 24rpx;
				background-color: #f3f3f3;
				color: #777;
				border-radius: 24rpx;
			}
			.act{
				background-color: var(--van-primary-color);
				color: #fff;
			}
		}
		.input{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			textarea{
				background-color: #f7f7f7;
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 20rpx;
				font-size: 26rpx;
			}
		}
	}
}
</style>