Homestay_manage_app/packageShang/pages/user/order/order-evaluate.vue

<template>
	<view class="">
		<!-- 商品区 -->
		<view class="padding margin-lr margin-tb-sm bg-main border-radius">
			<view class="goods-area" v-for="(item, index) in order_detail" :key="index">
				<view class="dflex">
					<view class="img">
						<image :src="item.goodsMasterImg"></image>
					</view>
					<view class="margin-left-sm">
						<text class="clamp-2">{{ item.goodsName }}</text>
						<view class="ft-dark fs-xs padding-top-xs">
							<text class="margin-right">× {{ item.goodsCount }}</text>
							{{ item.goodsAttr || '&nbsp;&nbsp;' }}
						</view>
						<view class="margin-top-sm">
							<text class="price">{{ order_data.orderActualPrice }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评分 -->
		<view class="evaluate-kps">
			<view class="padding margin-lr margin-tb-sm bg-main border-radius dflex-b">
				<view>
					<text>总体评分</text>
					<text class="margin-left ft-base fs-xs">
						{{postData.review_type}}
					</text>
				</view>
				<use-rate @change="rateChange" value="5"></use-rate>
			</view>
		</view>

		<!-- 评价区 -->
		<view class="evaluate-area">
			<view class="padding margin-lr margin-tb-sm bg-main border-radius">
				<!-- 评价内容 -->
				<textarea class="ft-black w-full fs-sm" v-model="postData.review_content"
					placeholder="请输入评价内容"></textarea>

				<!-- 上传图片 -->
				<use-upload class="pos-r" @upload="uploadImgs"></use-upload>
			</view>
		</view>

		<!-- 是否匿名评价 -->
		<view>
			<view class="padding margin-lr margin-tb-sm bg-main border-radius dflex-b">
				<text>提交评价的图片{{ anonymity ? '不可见' : '可见' }}</text>
				<view>
					<!-- <text class="ft-dark">匿名</text> -->
					<switch color="#FF6A6C" @change="switchChange" />
				</view>
			</view>
		</view>

		<!-- 提交操作 -->
		<view class="padding w-full margin-top">
			<view class="dflex-b border-radius-big">
				<view class="tac padding-tb-sm flex1 bg-base-ping" @click="submit">提交评价</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		orderinfo,
		comment,
	} from '../../../utils/api_order.js'
	import useUpload from '../../../components/use-upload/use-upload.vue'
	import useRate from '../../../components/use-rate/use-rate.vue'
	export default {
		components:{
			useUpload,
			useRate
		},
		data() {
			return {
				// 商品数据
				order_detail: [],
				// 订单数据
				order_data: {},
				// 订单ID
				order_id: '',
				postData: {
					orderId: '',
					review_cnt: 5,
					review_type: '好评',
					review_content: '',
					review_imgs: '',
					review_anonymity: '0',
					
				},
				now_date:'',//当前时间
			};
		},
		onLoad(options) {
			this.order_id = options.id;
			if (!this.order_id) {
				this.$api.msg('订单编号不存在');
			}
			this.loadData();
		},
		methods: {
			loadData() {
				let _this = this;
				// 订单详情
				var data=_this.order_id
				orderinfo(data).then((res) => {
					if(res.success){
						_this.order_data = res.data;
						_this.order_detail = res.data.orderDetails;
						return
					}
					_this.$api.msg(res.msg);
				})
			},
			uploadImgs(options) {
				let imgs = [];

				options.forEach((_) => {
					imgs.push(_);
				});

				if (imgs.length > 0) this.postData.review_imgs = imgs;

			},
			submit() {
				this.getNowDate()
				let _this = this;
				if (!_this.postData.review_content) {
					_this.$api.msg('请填写评价内容');
					return;
				}
				if (_this.issubmit) return;
				if(_this.postData.review_type=='差评'){
					var type=1
				}else if(_this.postData.review_type=='中评'){
					var type=2
				}else if(_this.postData.review_type=='好评'){
					var type=3
				}

				_this.issubmit = true;
				_this.postData.orderId = _this.order_id;
				var imgshu=this.postData.review_imgs.toString()
				uni.showModal({
					title: '提示',
					content: '提交评价',
					success: function(res) {
						if (res.confirm) {
							var data={
								"orderId": _this.postData.orderId,
								"goodsId": _this.order_detail[0].goodsId,
								"skuId":_this.order_detail[0].skuId,
								"reviewContent": _this.postData.review_content,
								"reviewType": type,//1差评 2中评 3好评
								"reviewCnt": _this.postData.review_cnt,//1-5
								"reviewImgs": imgshu,
								"state": _this.postData.review_anonymity,//0隐藏 1显示
								"createTime": _this.now_date,
								"skuId": _this.order_detail[0].skuId,
							}
							comment(data).then((res) => {
								if(res.success){
									_this.$api.msg('提交成功');
									_this.issubmit = false;
									uni.navigateBack({});
									return
								}
								_this.$api.msg(res.msg);
								_this.issubmit = false;
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//获取当前时间
			getNowDate() {
			  var _this = this;
			  // this.timer = setInterval(function() {
				var aData = new Date();
				var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1;
				var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
				var date2 = aData.getDate() <= 9 ? "0" + (aData.getDate()-1) : (aData.getDate()-1);
				var Hour = aData.getHours() <= 9 ? "0" + (aData.getHours()) : aData.getHours();
				var Miunte = aData.getMinutes() <= 9 ? "0" + (aData.getMinutes()) : aData.getMinutes();
				var Seconds = aData.getSeconds() <= 9 ? "0" + (aData.getSeconds()) : aData.getSeconds();
				// console.log(aData.getTime())
				_this.now_date = aData.getFullYear() + "-" + month + "-" + date + ' '+ Hour +":"+ Miunte +":"+ Seconds;
				// console.log(aData.getFullYear() + "-" + month + "-" + date2)昨天
			  // }, 86400000);
			},
			switchChange(options) {
				this.postData.review_anonymity = options.detail.value ? '1' : '0';
			},
			rateChange(options) {
				switch (options.value) {
					case 1:
						this.postData.review_type = '差评';
						break;
					case 2:
					case 3:
						this.postData.review_type = '中评';
						break;
					case 4:
					case 5:
						this.postData.review_type = '好评';
						break;
				}
				this.postData.review_cnt = options.value;
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
	
	@import url('/packageShang/components/iconfont/iconfont.css');
	@import url('/packageShang/common/common.scss');

	/* 商品区 */
	.goods-area {
		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 180rpx;
			height: 180rpx;
		}
	}
</style>