GuangYuYuan-app/pages/order/comment.vue

<template>
	<view class="comment">
		<!-- <navbar pageName="评论"></navbar> -->
		<view class="content">
			<view class="text" v-if="title == '商户'">
				<textarea v-model="text" placeholder="请输入您的评论" />
			</view>
			<view class="text" v-else>
				<textarea v-model="comment" placeholder="请输入您的评论" />
			</view>

			<view class="fast">
				<view class="title">
					<text></text>
					点击下方一键评论
				</view>
				<view class="tag" v-if="title == '商户'">
					<view class="word" v-for="(item,index) in jstag" :key="index" @click="addJsComment(item)">
						{{item.value}}
					</view>
				</view>
				<view class="tag" v-else>
					<view class="word" v-for="(item,index) in tag" :key="index" @click="addComment(item)">
						{{item.value}}
					</view>
				</view>
				<!-- <view class="star" v-if="title !== '商户'">
					评分：
					<u-rate :count="count" v-model="nStar" :colors="colors" :icons="icons" inactive-icon="thumb-up"></u-rate>
				</view> -->

			</view>
			<view class="btn_box" v-if="title == '商户'">
				<view class="btn" @click="jsSubmit">提交评价</view>
			</view>
			<view class="btn_box" v-else>
				<view class="btn" @click="submit">提交</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		commentOrder,
		tCommentUser
	} from '../../api/index.js'
	export default {
		data() {
			return {
				comment: '',
				text: '',
				orderNo: '',
				jsId: '',
				orderId: '',
				openId: '',
				name: '',
				count: 5,
				nStar: 0,
				title: '',
				colors: ['#ffc454', '#ffb409', '#ff9500'],
				icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'],
				jstag: [{
						value: '素质高'
					},
					{
						value: '年轻'
					},
					{
						value: '素质低'
					},
					{
						value: '好说话'
					},
				],
				tag: [{
						value: '手法好'
					},
					{
						value: '专业'
					},
					{
						value: '态度好'
					},
					{
						value: '服务很满意'
					},
				]
			}
		},
		methods: {
			addComment(item) {
				this.comment = this.comment + ' ' + ' ' + item.value
			},
			addJsComment(item) {
				this.text = this.text + ' ' + ' ' + item.value
			},
			submit() {
				let data = {}
				if (this.comment.trim() == '') {
					return
				}
				data.cText = this.comment.trim(),
					data.orderId = this.orderId,
					data.cJsid = this.jsId,
					data.orderNo = this.orderNo,
					data.name = this.name,
					data.nStar = this.nStar,
					commentOrder(data).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '评论成功',
							})
							setTimeout(() => {
								// uni.switchTab({
								// 	url: '/pages/order/order'
								// })
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
							})
						}
					})
			},
			//商户评价客户
			jsSubmit() {
				let data = {}
				data.text = this.text.trim(),
					data.jsId = this.jsId,
					data.orderNo = this.orderNo,
					data.name = this.name,
					data.openId = this.openId
				tCommentUser(data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '评论成功',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.msg,
						})
					}
				})
			}
		},
		onLoad(options) {
			this.orderNo = options.orderNo,
				this.jsId = options.cJsId,
				this.orderId = options.cId,
				this.name = options.cNickName
			this.title = options.title
			this.openId = options.cOpenId
		},
		watch: {
			txt(txt) {
				if (txt.indexOf('\n') != -1) { //敲了回车键了
					uni.hideKeyboard() //收起软键盘
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment {
		width: 100vw;
		height: 100vh;
		background: #F7FFFF;

		.content {
			// padding: 30rpx;

			.text {
				margin-bottom: 28rpx;
				padding: 30rpx;

				background: linear-gradient(90deg, #E7FDFD 0%, #D3FBF9 100%);
			}

			textarea {
				border: 1px solid #dcdcdc;
				width: calc(100% - 40rpx);
				padding: 20rpx;
				border-radius: 16rpx;
				background: #FEFEFE;
				font-size: 26rpx
			}

			.fast {
				width: 686rpx;
				margin: 0 auto;
				background: linear-gradient(35deg, #FFFFFF 0%, #E4FFFD 100%);
				box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
				border-radius: 16rpx;
				padding: 24rpx;
				box-sizing: border-box;

				.title {
					display: flex;
					align-items: center;
					font-weight: 600;

					text {
						display: inline-block;
						width: 6rpx;
						height: 34rpx;
						background: #20CBC2;
						margin-right: 12rpx;
					}
				}

				.tag {
					width: 100%;
					margin-top: 24rpx;
					display: flex;
					flex-wrap: wrap;

					// justify-content: space-between;
					.word {
						// margin: 0px 24rpx;
						// height: 48px;
						margin-right: 24rpx;
						margin-bottom: 24rpx;
						padding: 4rpx 20rpx;
						box-sizing: border-box;
						background: rgba(32, 203, 194, 0.1);
						box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
						border-radius: 8rpx;
						font-size: 28rpx;
					}
				}
			}



			.star {
				margin-top: 40rpx;
			}

			.btn_box {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
				height: 116rpx;
				background: #FFFFFF;

				.btn {
					width: 670rpx;
					height: 76rpx;
					background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
					border-radius: 106rpx;
					color: #fff;
					margin: 20rpx auto;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	::v-deep.u-rate {
		// width: 100%;
		// margin-top: 30rpx;
		// padding: 0px 25% ;
		.u-star-wrap {
			margin: 0px 10rpx !important;
		}

		.u-icon {
			font-size: 50rpx !important;

		}
	}
</style>