hz-zhhq-app/pages/order-form/evaluate.vue

<template>
	<view class="hzIndex">
		<hzHeader title="评价"></hzHeader>
		<view class="hzContent">
			<view class="formTop" style="margin-bottom:20upx">
				<view class="formTit">请对本次服务做出评价</view>
				<view class="formCont">
					<view class="radio" v-for="(item, index) in items" :key="item.value">
						<image @click="selectRadio(item.value)" v-if="index == current" src="@/static/haircut/eck.png"
							mode=""></image>
						<image @click="selectRadio(item.value)" v-else src="@/static/haircut/nEck.png" mode=""></image>
						<text>{{ item.name }}</text>
					</view>
				</view>
				<view class="formBottom">
					<view class="bottomTit">评价描述</view>
					<textarea style="border: 1px solid #e5e5e5;border-radius: 10upx;font-size: 28upx;padding: 10upx;"
						value="" placeholder="请输入评价内容" maxlength="100" v-model="evContent" />
				</view>

			</view>
		</view>

		<view class="sub-btn">
			<view class="btn" @click="submit()">提交</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	import {
		submitEvaluate,
		saveHaircutComment
	} from '@/common/api.js';
	import {
		callbackRequest,
		getStorage,
		alertTip,
		sureAlterTip
	} from '@/common/util.js';
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				type: null, //评价类型 1 订单，2 食堂，3 推荐菜 4理发 5洗车
				typeId: null, //评价类型Id
				spareId: '', //如果评价订单 id为食堂 , 如果评价食堂 id为订单
				userInfo: getStorage('userInfo'),
				evContent: '', //评价内容
				grade: 5,
				items: [{
						value: '0',
						name: '非常满意'
					},
					{
						value: '1',
						name: '满意',
						checked: 'true'
					},
					{
						value: '2',
						name: '一般'
					}
				],
				current: 0
			};
		},
		onLoad(option) {
			this.type = option.type;
			this.typeId = option.typeId;
			this.spareId = option.spareId;
		},
		methods: {
			selectRadio: function(v) {
				this.current = v
			},
			changeGrade(e) {
				this.grade = e.value;
			},
			submit() {
				if (!this.evContent) {
					alertTip('请输入评价内容');
					return false;
				}
				let data;
				if (this.type == 4 || this.type == 5) {
					data = {
						method: saveHaircutComment,
						data: {
							detailId: this.typeId,
							userId: this.userInfo.id,
							commentContent: this.evContent,
							satisfiedLevel: this.current,
							type: this.type == 4 ? 1 : 2
						}
					};
				} else {
					data = {
						method: submitEvaluate,
						data: {
							type: this.type,
							typeId: this.typeId,
							userId: this.userInfo.id,
							evContent: this.evContent,
							grade: this.grade,
							bak1: this.spareId
						}
					};
				}
				callbackRequest(data).then(res => {
					if (res.data.returnCode == 1) {
						sureAlterTip('', '评价成功', false).then(_ => {
							// if (this.type == 4) {
							// 	uni.redirectTo({
							// 		url: '/pages/haircut/haircut?currentTabIndex=1'
							// 	});
							// } else if (this.type == 5) {
							// 	uni.redirectTo({
							// 		url: '/pages/washcar/washCarReservation?currentTabIndex=1'
							// 	});
							// } else {
							// 	// uni.redirectTo({
							// 	// 	url:'/pages/order-form/order-form'
							// 	// })
							// 	uni.navigateBack({
							// 		delta: 1
							// 	});
							// }
							uni.navigateBack(1);
						});
					} else {
						alertTip(res.data.returnMsg);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.sub-btn {
		width: 100%;
		height: 120upx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		color: #fff;
		font-size: 32upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 94%;
			height: 88upx;
			border-radius: 44upx;
			text-align: center;
			line-height: 88upx;
			background-image: linear-gradient(to right, #5BCE9D, #00ADA6);
		}

	}

	.hzContent {
		padding: 20upx;

		.formTop {
			width: 100%;
			background-color: #fff;
			padding: 20upx;
			border-radius: 20upx;

			image {
				width: 40upx;
				height: 40upx;
			}

			.formTit {
				font-weight: bold;
				font-size: 16px;
				color: #333333;
			}

			.formCont {
				width: 80%;
				display: flex;
				justify-content: space-between;
				margin-top: 50upx;

				.radio {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28upx;
					color: #555555;

					text {
						margin-left: 20upx;
					}
				}
			}

			.formBottom {
				margin-top: 30upx;
				width: 100%;

				.bottomTit {
					font-weight: 600;
					font-size: 28upx;
					color: #555555;
				}

				textarea {
					margin-top: 20upx;
					width: 100%;
					height: 220upx;
					background: #F2F6FA;
					border-radius: 16upx;
				}
			}

		}
	}
</style>