qjd-shell-uniapp/pagesMain/evaluateForm.vue

<template>
	<view class="container">
		<view class="assess-row">
			<cover-image class="assess-head" :src="evaluateData.headimg"></cover-image>
			<view class="assess-info">
				<view class="assess-name">{{evaluateData.nickname}}</view>
				<view class="assess-date">{{evaluateData.evaluateTime}}</view>
				<view class="assess-sore-box">
					<u-rate v-model="evaluateData.score" active-color="#FFAE21"></u-rate>
				</view>
				<view class="assess-text">{{evaluateData.evaluateContent}}</view>
				<view class="assess-img-box">
					<cover-image class="img-col" v-for="site in evaluateData.evaluateImgs" :key="site" :src="site.imgUrl"></cover-image>
				</view>
			</view>
		</view>
		<u-cell-group class="form-info">
			<u-field type="textarea" placeholder="请对买家进行回复" v-model="replyContent" label-width="0"></u-field>
		</u-cell-group>
		<view class="form-handle">
			<u-button type="success" shape="circle" :ripple="true" @click="submitData" class="handle-custom">提交</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				evaluateData: {
					nickname: '',
					evaluateContent: '',
					evaluateTime: '',
					score: 5,
					evaluateImgs: [],
				},
				replyContent: '',
				orderId: '',
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			NET.request(API.getOrderDetail, {
				flag: 2,
				orderId: options.orderId,
				orderStatus: 5,
			}, 'GET').then(res => {
				if (res.data.evaluateResVO) {
					this.evaluateData = res.data.evaluateResVO
					this.evaluateData.nickname = res.data.nickname
				}
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.data.msg,
					type: 'warning',
				})
			})
		},
		methods: {
			//  提交数据
			submitData() {
				NET.request(API.evaluateOrder, {
					mid: uni.getStorageSync("userData").userId,
					orderId: this.orderId,
					replyContent: this.replyContent,
				}, 'POST').then(res => {
					this.$refs.uTips.show({
						title: '回复评价成功',
						type: 'success',
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pagesMain/orderList?type=5'
						});
					}, 1000)
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding-bottom: 70px;
		overflow-y: auto;

		.form-info {
			width: 100%;
			float: left;
			margin-top: 20px;

			/deep/.u-label-text {
				color: #333333;
			}

			/deep/.u-cell_title {
				color: #333333;
			}
		}

		.assess-row {
			width: calc(100% - 30px);
			margin: 0 15px;
			float: left;
			padding: 12px 0;
			display: flex;

			.assess-head {
				width: 50px;
				height: 50px;
				object-fit: cover;
				border-radius: 50%;
			}

			.assess-info {
				width: calc(100% - 62px);
				margin-left: 12px;

				.assess-name {
					height: 18px;
					float: left;
					line-height: 18px;
					font-size: 15px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #343434;
				}

				.assess-date {
					height: 18px;
					float: right;
					line-height: 18px;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
				}

				.assess-sore-box {
					width: 100%;
					height: 16px;
					float: left;
					margin: 6px 0;
				}

				.assess-text {
					width: 100%;
					float: left;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
					line-height: 16px;
					margin: 8px 0 10px 0;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
				}

				.assess-img-box {
					width: 100%;
					float: left;
					display: flex;

					.img-col {
						height: 60px;
						width: 60px;
						object-fit: cover;
						margin: 0 10px 10px 0;
					}
				}
			}
		}

		.form-handle {
			width: calc(100% - 30px);
			height: 40px;
			position: fixed;
			bottom: 20px;
			left: 15px;

			.handle-custom {
				background-color: #51A539;
			}
		}
	}
</style>