front-end/mobile-code/src/pages/order/comment.vue

<template>
	<div class="app-content">
		<div class="order-det">
			<div class="order-det-left">
				<img src alt="商品图片" mode="center" />
			</div>
			<div class="order-det-right">
				<div class="app-size-28 app-color-2">{{ data.orderSn }}</div>
				<div class="app-color-3">{{ data.addTime | formatTime }}</div>
				<div class="app-size-28 app-bold">¥{{ data.prePrice }}</div>
			</div>
		</div>
		<!-- separae -->
		<div class="separae-wrap">欢迎您对本次服务作出评价</div>
		<!-- comment -->
		<div class="comment-wrap">
			<div class="comment-textarea">
				<textarea v-model="form.evaluate" class="textarea-wrap" placeholder-class="textarea-place" name="evaluate" placeholder="您的关注，是我们前进的动力" />
			</div>
			<div class="comment-star">
				<div class="star-list" v-for="(item, index) in rateData" :key="index">
					<span class="star-label">{{ item.name }}</span>
					<rate-module :current="form[item.key]" @change="changeRateFn($event, item)"></rate-module>
				</div>
			</div>
		</div>
		<!-- button -->
		<div class="btn-wrap">
			<button class="button-com red big" @click="commnetFn">提交</button>
		</div>
	</div>
</template>

<script>
import RateModule from '@/components/plugin/rate'
// api
import { getDetail, comment } from '@/api/order'
export default {
	name: 'order-comment',
	components: {
		RateModule
	},
	data() {
		return {
			data: {},
			form: {
				grade: 1,
				gradeService: 1,
				gradeQuality: 1,
				gradeSend: 1,
				evaluate: ''
			},
			rateData: [
				{
					name: '整体评分',
					key: 'grade'
				},
				{
					name: '服务态度',
					key: 'gradeService'
				},
				{
					name: '鲜花品质',
					key: 'gradeQuality'
				},
				{
					name: '配送服务',
					key: 'gradeSend'
				}
			]
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this.data = uni.getStorageSync('orderDetialComment') || {}
		},
		commnetFn() {
			// this.form = {
			// 	grade: 1,
			// 	gradeService: 1,
			// 	gradeQuality: 1,
			// 	gradeSend: 1,
			// 	evaluate: ''
			// }
			comment({
				id: this.data.id,
				...this.form
			}).then(res => {
				this.$msg('评价成功！')
				setTimeout(() => {
					uni.removeStorageSync('orderDetialComment')
					this.$util.pageTo({
						url: '/pages/callback/index',
						query: {
							pagestatus: 4,
							orderSn: this.data.orderSn
						},
						type: 2
					})
				}, 1000)
			})
		},
		// operate
		changeRateFn(e, item) {
			this.form[item.key] = e.index
		}
	}
}
</script>

<style lang="scss" scoped>
	.order-det {
		background-color: #fff;
		@include disFlex(center, flex-start);
		padding: 30px;
		width: calc(100% - 60px);
		.order-det-left {
			width: 140px;
		}
		.order-det-right {
			width: calc(100% - 160px);
			margin-left: 20px;
			& > div {
				margin-bottom: 12px;
			}
			.app-bold {
				margin-top: 30px;
				margin-bottom: 0;
			}
		}
	}
	.separae-wrap {
		color: $fontColor3;
		padding: 30px 30px 20px 30px;
	}
	.comment-wrap {
		padding: 20px 30px;
		background-color: #fff;
		.comment-textarea {
			border-bottom: 1px solid $borderColor;
			.textarea-wrap {
				width: 100%;
				height: 340px;
			}
			/deep/.textarea-place {
				font-size: 28px;
				color: #ccc;
			}
		}
		.comment-star {
			padding-bottom: 20px;
			.star-list {
				margin-top: 20px;
				@include disFlex(center, flex-start);
				.star-label {
					font-size: 26px;
					margin-right: 108px;
				}
			}
		}
	}
	// button
	.btn-wrap {
		width: 90%;
		margin: 90px auto 0;
		.button-com {
			width: 100%;
		}
	}
</style>