zh-wx/pages/goods/comment/add-comment.vue

<!-- 添加评论 -->
<template>
	<view class="commont-from-wrap">
		<!-- 评价商品 -->
		<view class="goods-card">
			<shopro-mini-card :title="goodsDetail.goods_title" :image="goodsDetail.goods_image">
				<template #describe>
					<view class="order-sku u-ellipsis-1">
						<text class="order-num">数量:{{ goodsDetail.goods_num || 0 }};</text>
						{{ goodsDetail.goods_sku_text ? goodsDetail.goods_sku_text : '' }}
					</view>
				</template>
				<template #cardBottom>
					<view class="order-price-box u-flex ">
						<text class="order-price font-OPPOSANS">￥{{ goodsDetail.goods_price || 0 }}</text>
						<button class="u-reset-button status-btn" v-if="goodsDetail.status_name">{{ goodsDetail.status_name }}</button>
					</view>
				</template>
			</shopro-mini-card>
		</view>

		<view class="form-item">
			<view class="star-box u-flex">
				<view class="star-title u-m-r-40">{{ starTip }}</view>
				<u-rate v-model="star" minCount="1"></u-rate>
			</view>
			<view class="area-box">
				<textarea class="inp-area" v-model="message" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧~" placeholder-class="pl-style" />
				<view class="img-box">
					<u-upload
						:showProgress="false"
						@on-uploaded="uploadSuccess"
						@on-remove="uploadRemove"
						:action="`${$API_URL}index/upload`"
						width="138"
						height="138"
						maxCount="9"
					></u-upload>
				</view>
			</view>
		</view>
		<view class="foot_box u-flex u-row-center u-col-center u-m-t-60"><button class="u-reset-button post-btn" @tap="subComment">发布</button></view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			imgList: [],
			star: 5,
			message: '',
			goodsDetail: {}
		};
	},
	computed: {
		starTip() {
			let text = '';
			if (this.star <= 1) {
				text = '差评';
			}
			if (this.star > 1 && this.star <= 3) {
				text = '中评';
			}
			if (this.star >= 4) {
				text = '好评';
			}
			return text;
		}
	},
	onLoad() {
		this.getOrderItemDetail();
	},
	methods: {
		// 订单详情
		getOrderItemDetail() {
			let that = this;
			that.$http('order.itemDetail', {
				id: that.$Route.query.orderId,
				order_item_id: that.$Route.query.orderItemId
			}).then(res => {
				if (res.code === 1) {
					that.goodsDetail = res.data;
				}
			});
		},

		// 上传图片成功
		uploadSuccess(e) {
			this.imgList = [];
			e.forEach(item => {
				this.imgList.push(item.response.data.url);
			});
		},

		// 移除图片
		uploadRemove(index) {
			this.imgList.splice(index, 1);
		},

		subComment() {
			let that = this;
			that.$http('order.comment', {
				id: that.$Route.query.orderId,
				order_item_id: that.goodsDetail.id,
				level: that.star,
				content: that.message,
				images: that.imgList
			}, '提交中...').then(res => {
				if (res.code === 1) {
					that.$u.toast('评论发表成功');
					that.$Router.back();
				}
			});
		}
	}
};
</script>

<style lang="scss">
// 评价商品
.goods-card {
	margin: 10rpx 0;
	padding: 20rpx;
	background: #fff;
	.order-sku {
		font-size: 24rpx;
		
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		width: 450rpx;
		margin-bottom: 20rpx;
		.order-num {
			margin-right: 10rpx;
		}
	}
	.order-price-box {
		.status-btn {
			height: 32rpx;
			border: 1rpx solid rgba(207, 169, 114, 1);
			border-radius: 15rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(168, 112, 13, 1);
			padding: 0 10rpx;
			margin-left: 20rpx;
			background: rgba(233, 183, 102, 0.16);
		}
		.order-price {
			font-size: 26rpx;
			
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}
	}
}

// 评论，选择图片
.form-item {
	background: #ffff;
	padding-bottom: 30rpx;
	.star-box {
		height: 100rpx;
		padding: 0 25rpx;
	}
	.star-title {
		font-weight: 600;
	}
}
.area-box {
	width: 690rpx;
	min-height: 306rpx;
	background: rgba(249, 250, 251, 1);
	border-radius: 20rpx;
	padding: 28rpx;
	margin: auto;
	.pl-style {
		font-size: 26rpx;
		
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 42rpx;
	}
	.inp-area {
		font-size: 26rpx;
		
		font-weight: 500;
		color: #333;
		line-height: 50rpx;
		width: 100%;
	}
	.img-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
}
.post-btn {
	width: 690rpx;
	line-height: 80rpx;
	background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
	border-radius: 40rpx;
	color: rgba(#fff, 0.9);
	margin-bottom: 30rpx;
}
</style>