BD-LDBD-UNI/pages/preCarWash/washOrder/serviceEvaluation/index.vue

<template>
	<view class="serveEva">
		<view class="card">
			<view class="title">
				服务态度
			</view>
			<view class="star">
				<view v-for="(subItem, indexs) in starList" :key="indexs" @click="changemanner(indexs)">
					<image :src="manner==indexs+0.5?subItem.half:(indexs+1)<=manner?subItem.stary:subItem.starsg"
						alt="">
				</view>

			</view>
		</view>
		<view class="card">
			<view class="title">
				服务质量
			</view>
			<view class="star">
				<view v-for="(subItem, indexs) in starList" :key="indexs" @click="changequality(indexs)">
					<image :src="quality==indexs+0.5?subItem.half:(indexs+1)<=quality?subItem.stary:subItem.starsg"
						alt="">
				</view>
			</view>
		</view>
		<view class="body">
			<view class="card">
				<view class="title">
					综合服务
				</view>
				<view class="star">
					<view v-for="(subItem, indexs) in starList" :key="indexs" @click="changezonghe(indexs)">
						<image :src="zonghe==indexs+0.5?subItem.half:(indexs+1)<=zonghe?subItem.stary:subItem.starsg"
							alt="">
					</view>
				</view>
			</view>
			<view class="content">
				<!-- 描述详情 -->
				<textarea class="textarea" placeholder="请输入车辆遇到的问题/状况描述" v-model="content"
					placeholder-class="classTextarea" maxlength="-1"></textarea>
				<!-- 上传图片 -->
				<view class="uploadFile">
					<view class="uploadView" v-for="(item, index) in uploadFileList" :key="index">
						<image @click="del(index)" class="uploadDelete"
							:src="require('../../../../static/uploadDelete.png')" alt="">
							<image class="uploadImg" :src="item" alt="">

					</view>
					<view class="uploadView">
						<image @click="upload" class="uploadImg" :src="require('../../../../static/upload-pic.png')"
							alt="">
					</view>
				</view>
			</view>
		</view>
		<view class="buttomBtn" @click="evaluateAdd">
			立即评价
		</view>
	</view>
</template>

<script>
	import {
		orderEvaluate
	} from "@/api/maintain.js"
	export default {
		components: {},
		data: function() {
			return {
				clickName: false,
				manner: 0,
				quality: 0,
				zonghe: 0,
				content: "",
				starList: [{
						starsg: require('../../../../static/star-s-g.png'),
						half: require('../../../../static/half.png'),
						stary: require('../../../../static/star-y.png'),
					},
					{
						starsg: require('../../../../static/star-s-g.png'),
						half: require('../../../../static/half.png'),
						stary: require('../../../../static/star-y.png'),
					},
					{
						starsg: require('../../../../static/star-s-g.png'),
						half: require('../../../../static/half.png'),
						stary: require('../../../../static/star-y.png'),
					},
					{
						starsg: require('../../../../static/star-s-g.png'),
						half: require('../../../../static/half.png'),
						stary: require('../../../../static/star-y.png'),
					},
					{
						starsg: require('../../../../static/star-s-g.png'),
						half: require('../../../../static/half.png'),
						stary: require('../../../../static/star-y.png'),
					}
				],
				uploadFileList: [],
				type: 0,
				detailId: "",
				imgContent: ""
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.detailId = options.detailId;
		},
		methods: {
			evaluateAdd() {
				if (!this.clickName) {
					// 第一次点击
					let data = {
						type: this.type,
						detailId: this.detailId,
						serviceScore: this.manner,
						satisfiedScore: this.quality,
						sumScore: this.zonghe,
						content: this.content,
						imgContent: this.imgContent
					}
					orderEvaluate(data).then((res) => {
						if (res.code == "00000") {
							if (this.type == 1) {
								uni.$emit('maintainEvaluateOver', {
									data: "评价完成"
								})
							}
							uni.navigateBack({
								delta: 1
							})
						}
					})
					this.clickName = true;
					
				} else {
					console.log(this.clickName);
				}



			},
			changemanner(index) {
				if (this.manner == index + 0.5) {
					this.manner = index + 1;
				} else if (this.manner >= index + 1) {
					this.manner = index
				} else if (this.manner == index + 1) {
					this.manner--
				} else {
					this.manner = index + 0.5;
				}
			},
			changequality(index) {
				if (this.quality == index + 0.5) {
					this.quality = index + 1;
				} else if (this.quality >= index + 1) {
					this.quality = index
				} else if (this.quality == index + 1) {
					this.quality--
				} else {
					this.quality = index + 0.5;
				}
			},
			changezonghe(index) {
				if (this.zonghe == index + 0.5) {
					this.zonghe = index + 1;
				} else if (this.zonghe >= index + 1) {
					this.zonghe = index
				} else if (this.zonghe == index + 1) {
					this.zonghe--
				} else {
					this.zonghe = index + 0.5;
				}
			},
			// 删除图片
			del(index) {
				this.uploadFileList.splice(index, 1);
				console.log(this.uploadFileList);
			},
			upload() {
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: res => {
						console.log(res);
						if (res.tempFilePaths.length != 0) {
							this.uploadFileList.push(res.tempFilePaths[0]);
						}
						console.log(JSON.stringify(res.tempFilePaths));
						var tempFilePaths = res.tempFilePaths;
						var tempFiles = res.tempFiles;
						console.log(tempFilePaths);
						console.log(tempFilePaths[0]);
						uni.uploadFile({
							url: 'https://api.biaodianfuhao.net/api/common/sysFileInfo/upload',
							fileType: 'image',
							filePath: tempFilePaths[0],
							file: tempFiles[0],
							name: 'file',
							success: uploadFileRes => {
								console.log('上传图片', JSON.parse(uploadFileRes.data));
								if (that.imgContent == "") {
									that.imgContent = JSON.parse(uploadFileRes.data).data
								}
								that.imgContent = that.imgContent + "," + JSON.parse(uploadFileRes
									.data).data
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.buttomBtn {
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(0deg, #008EFF 0%, #0036FF 100%);
		border-radius: 45rpx;
		margin-left: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 90rpx;
		margin-top: 282rpx;

	}

	.body {
		margin-top: 20rpx;
		background: #FFFFFF;
		padding-bottom: 30rpx;

		.content {
			height: 404rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			margin: 6rpx 30rpx 30rpx 30rpx;

			.textarea {
				height: 150rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
				padding-left: 20rpx;
				padding-top: 40rpx;
			}
		}

		.uploadFile {
			width: 665rpx;
			height: 146rpx;
			display: flex;
			overflow-x: auto;
			margin-left: 20rpx;

			.uploadView {
				position: relative;

				.uploadImg {
					width: 146rpx;
					height: 146rpx;
					background: #FFFFFF;
					border-radius: 8px;
					margin-right: 17rpx;
					margin-bottom: 21rpx;
				}

				.uploadDelete {
					width: 26rpx;
					height: 26rpx;
					border-radius: 0 8px 0 0;
					position: absolute;
					top: 0;
					right: 17rpx;
					z-index: 9;
				}
			}

		}
	}

	.classTextarea {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BFBFBF;
		line-height: 34rpx;
	}

	.serveEva {
		.card {
			background: #FFFFFF;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 31rpx 0 31rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
			}

			.star {
				display: flex;
				margin-top: 12rpx;

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