wardrobe/pages/pingjia/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="我的评价" :shadow="0" :showback="true"></tm-menubars>
		<div class="zhuti">
			<tm-sheet class="kuang" style="padding-bottom: 70px !important;">
				<view style="width: 94%;margin:0 auto;">
					<tm-cartCellListFood class="shangpin" :typeclick="typeclick" :mdata="item"
						:cart-num.sync="item.buy"></tm-cartCellListFood>
					<view class="tiyan">
						<text class="text-white mr-20">产品体验</text>
						<tm-rate v-model="rate1"></tm-rate>
						<text class="ml-20 text-size-s" v-if="rate1==5">非常满意</text>
						<text class="ml-20 text-size-s" v-if="rate1<=4&&rate1>3">比较满意</text>
						<text class="ml-20 text-size-s" v-if="rate1<=3&&rate1>0">一般满意</text>
					</view>
					<view class="tiyan">
						<text class="text-white mr-20">派送评价</text>
						<tm-rate v-model="rate2"></tm-rate>
						<text class="ml-20 text-size-s" v-if="rate2==5">非常满意</text>
						<text class="ml-20 text-size-s" v-if="rate2<=4&&rate2>3">比较满意</text>
						<text class="ml-20 text-size-s" v-if="rate2<=3&&rate2>0">一般满意</text>
					</view>
					<view class="tiyan">
						<text class="text-white mr-20">服务态度</text>
						<tm-rate v-model="rate3"></tm-rate>
						<text class="ml-20 text-size-s" v-if="rate3==5">非常满意</text>
						<text class="ml-20 text-size-s" v-if="rate3<=4&&rate3>3">比较满意</text>
						<text class="ml-20 text-size-s" v-if="rate3<=3&&rate3>0">一般满意</text>
					</view>
					<tm-input class="shuru" :height="150" title="" :maxlength="144" :border-bottom="false"
						placeholder="快来发表评论吧！" input-type="textarea" v-model="val_1" bg-color="grey-lighten-5" clear>
					</tm-input>
					<view class="mt-30">
						<view class="">
							<view class="cent-bottom-m">
								<view class="uploadImg">
									<view v-for="(el, index) in fileList" :key="index">
										<view class="uploadImg-image">
											<image @click="checkImgbox(fileList, index)" :src="imgUrl+el"
												mode="aspectFill" style="width: 100%;height: 100%;border-radius: 4px;">
											</image>
											<view class="jian" @click="popImg(index)">
												<tm-button class="shanchu" theme="white" size="s" icon="icon-times">
												</tm-button>
											</view>
										</view>
									</view>
									<view class="jia-btn" @click="openImagePage" v-if="uploadFlag">
										<view class="jia">
											<view>
												<tm-button theme="white" size="m" icon="icon-plus"></tm-button>
											</view>
											<view style="font-size: 12px;">上传图片</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <tm-upload :tips="false" :filelist.sync="filelist" max='5'></tm-upload> -->
					</view>
					<tm-button :round="24" class="sao" block @click="submit">提交</tm-button>
				</view>
			</tm-sheet>

		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>
<script>
	import {
		myRequest
	} from '@/api/request.js'
	export default {
		data() {
			return {
				item: {
					// img: '../../static/img/83.png',
					// title: '丝缎质感纹理风衣',
					// label: '黑色 - 6518/320',
					// size: 'S',
					// price: '1299',
					// id: 3,
					// buy: 0,
					// itemId: 0,
					// checked: false,
				},
				// typeclick:5,//1加入购物车，2购物车
				typeclick: 9, //1加入购物车，2购物车
				rate1: 0,
				rate2: 0,
				rate3: 0,
				val_1: '',
				fileList: [],
				imgUrl: "",
				sizeType: ['compressed'],
				imageList: [], // 申诉图片地址
				uploadFlag: true, // 申诉图片大于3张隐藏上传按钮
				orId: '',
				imgList: []
			};
		},
		onLoad(op) {
			console.log(op);
			if (op) {
				this.orId = op.id;
				this.getOrderDetail()
			}
		},
		created() {
			if (!uni.getStorageSync("token")) {
				uni.navigateTo({
					url: "/pages/login/index",
				})
			}
			this.sys = uni.getSystemInfoSync();
		},
		methods: {
			getOrderDetail() {
				let that = this;
				myRequest({
					url: '/api/Order/orderDetails',
					method: 'post',
					data: {
						id: that.orId
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.item = res.data.data.goods_details;
						this.item.title = res.data.data.goods_details.goods_name;
						this.item.img = res.data.data.goods_details.goods_img;
						this.item.price = res.data.data.goods_details.goods_price;
						this.item.buy = res.data.data.goods_details.buy_num;
						console.log(res.data.data.goods_details, '33');
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},

			openImagePage() {
				let that = this;
				if (that.fileList.length > 5) {
					uni.showToast({
						title: "最多支持5张图片",
						icon: "none"
					})
					return;
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						uni.showLoading({
							title: '图片上传中'
						});
						that.uploadImage(res.tempFilePaths)
					}
				});
			},
			uploadImage(tempFilePaths) {
				let _this = this;
				uni.uploadFile({
					url: 'http://yigui.liliju.com/common/uploads/upload', //接口地址
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						let data = JSON.parse(res.data);
						console.log(data);
						let url = data.data.yimg;
						console.log(url, 'url');
						// 选中图片
						if (_this.fileList.indexOf(url) == -1) {
							let uu = url.substr(24);
							_this.fileList.push(url);
							_this.imgList.push(uu)
							console.log(_this.fileList, 'haah');
						}
						uni.hideLoading();
						if (_this.fileList.length > 5) {
							_this.uploadFlag = false
						} else {
							_this.uploadFlag = true
						}
					}
				});
			},
			checkImgbox(fileList, index) { //放大图片
				console.log(fileList, index, 999)
				let arr = [];
				fileList.forEach((el) => {
					arr.push(this.imgUrl + el);
				})
				uni.previewImage({
					urls: arr,
					current: index
				});
			},
			popImg(index) { //删除图片
				this.fileList.splice(index, 1);
				this.imgList.splice(index, 1);
				if (this.fileList.length < 1) {
					this.uploadFlag = true
				}
			},

			aa(num) {
				if (num == 1) {
					this.checked1 = true;
					this.checked2 = false;
					this.checked3 = false;
				} else if (num == 2) {
					this.checked1 = false;
					this.checked2 = true;
					this.checked3 = false;
				} else if (num == 3) {
					this.checked1 = false;
					this.checked2 = false;
					this.checked3 = true;
				}
			},
			// 提交评价
			submit() {
				if (this.rate1 == 0 || this.rate2 == 0 || this.rate3 == 0) {
					uni.showToast({
						title: '请选择满意度',
						icon: 'none'
					})
				} else if (this.val_1 == '') {
					uni.showToast({
						title: '内容不能为空',
						icon: 'none'
					})
				} else {
					let that = this;
					myRequest({
						url: '/api/Order/orderEvaluate',
						method: 'post',
						data: {
							id: that.orId,
							experience_value: that.rate1,
							delivery_value: that.rate2,
							service_value: that.rate3,
							atlas: that.imgList.join(','),
							content: that.val_1
						}
					}).then(res => {
						if (res.data.code == 200) {
							console.log(res.data.data, 'pingjia1!!');
							that.$refs.toast.show({
								model: 'success',
								label: res.data.msg
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 800)
						} else {
							that.$refs.toast.show({
								model: 'error',
								label: res.data.msg
							})
						}
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body {
		background-color: #1b1b1b !important;
	}

	/deep/ .zhuti {
		padding: 10px 10px;
	}

	/deep/ .kuang,
	/deep/ .jia .tm-button-btn {
		margin: 0 !important;
		padding: 0px !important;
	}

	.uploadImg {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.uploadImg-image {
		width: 70px;
		height: 70px;
		margin: 0px 10px 10px 0px;
		position: relative;
	}

	.shanchu {
		position: absolute;
		right: -15px;
		top: -5px;
	}

	/deep/ .jia .tm-button-btn .px-12 {
		padding: 0 !important;
	}

	/deep/ .white {
		background: none !important;
	}

	/deep/ .jia .white,
	/deep/ .jian .white {
		color: #ffffff !important;
	}

	.sao {
		width: 90%;
		margin: 20px auto 0px;
	}

	/deep/ .shuliang .text-size-n {
		color: white !important;
	}

	/deep/ .shangpin .tm-cartCellListFood {
		margin: 5px 0px 20px !important;
		padding-bottom: 15px !important;
		border-bottom: 1px solid #1B1B1B;
	}

	/deep/ .kuang .border-t-1.bk {
		border-top: 1px solid #1b1b1b !important;
	}

	/deep/ .shangpin .title,
	/deep/ .shangpin .text-red {
		color: white !important;
	}

	/deep/ .shangpin .round-3 {
		width: 90px !important;
		height: 90px !important;
	}

	/deep/ .shangpin .tm-cartCellListFood-img {
		width: 90px !important;
		height: 90px !important;
	}

	/deep/ .shuliang .text-size-n {
		color: white !important;
	}

	.tiyan text {
		vertical-align: middle;
	}

	.tiyan {
		margin-top: 20px;
	}

	/deep/ .tiyan .text-primary.bk {
		color: #FFCC00 !important;
	}

	/deep/ .tiyan .opacity-6 {
		opacity: 1 !important;
	}

	/deep/ .shuru .grey-darken-4 {
		background: #0D0D0D !important;
	}

	.shuru {
		padding: 0px !important;
		margin-top: 20px !important;
	}

	.jia {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.jia-btn {
		width: 70px;
		height: 70px;
		border: 1px solid #eeeeee;
		border-radius: 4px;
	}
</style>