hz-zhhq-app/pages/malfunc-repair/malfunc-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 {
				evContent: '',
				items: [{
						value: '0',
						name: '非常满意'
					},
					{
						value: '1',
						name: '满意',
						checked: 'true'
					},
					{
						value: '2',
						name: '一般'
					}
				],
				current: 0,
				type: 6,
				submitFlag: true
			};
		},
		onLoad(option) {
			this.type = option.type || 6;
			this.typeId = option.typeId;
			this.spareId = option.spareId;
		},
		methods: {
			selectRadio: function(v) {
				this.current = v
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			submit() {
				if (!this.submitFlag) {
					return;
				}
				this.submitFlag = false;
				var data = {
					method: saveHaircutComment,
					data: {
						detailId: this.typeId,
						userId: getStorage('userInfo').id,
						applicantName: getStorage('userInfo').username,
						commentContent: this.evContent,
						satisfiedLevel: this.current,
						type: this.type
					}
				};
				callbackRequest(data).then(res => {
					if (res.data.returnCode == 1) {
						alertTip('评价成功');
						setTimeout(res => {
							// uni.redirectTo({
							// 	url: '/pages/malfunc-repair/malfunc-repair?currentTabIndex=1'
							// });
							this.submitFlag = true;
							uni.navigateBack(1);
						}, 1500);
					} else {
						this.submitFlag = true;
						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>