BD-LDBD-UNI/pages/maintenance/evaluate/index.vue

<template>
	<view class="eva-body">
		<!-- 页头step -->
		<view class="step">
			<view class="step1">
				<image :src="require('../../../static/1..png')" alt="">
					<view class="span">提交车辆故障信息</view>
			</view>
			<image :src="require('../../../static/tiaozhuan.png')" alt="">
				<view class="step2">
					<image :src="require('../../../static/2..png')" alt="">
						<view class="span">专业师傅评估报价</view>
				</view>
		</view>
		<!-- 选择车辆 -->
		<navigator url="/pages/preCarWash/chooseCar/index" class="chooseCar">
			<view class="carsMsg">
				<image :src="cardMsg.brandLogo?baseImagePath+cardMsg.brandLogo: carImg" alt="">
					<view v-if="cardMsg.brandLogo" class="carNa">
						{{cardMsg.brandName}} {{cardMsg.carSeriesName}}
					</view>
					<view v-else class="carNa" style="color: #666666;">
						{{carTitle}}
					</view>
			</view>
			<image :src="require('../../../static/choose.png')" alt="">
		</navigator>
		<!-- 描述详情 -->
		<view
			style="background-color: #FFFFFF;width: 710rpx;position: relative;left: calc(50% - 355rpx);border-radius: 8px;">
			<view class="eva-detail">
				<textarea class="textarea" :value="textData" @input="textInput" placeholder="请输入车辆遇到的问题/状况描述"
					placeholder-class="classTextarea" maxlength="-1"></textarea>
			</view>
			<!-- 上传图片 -->
			<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 class="uploadFile" style="padding-bottom: 46rpx;">
				<view class="uploadView">
					<image v-if="videoFilePath!=''" @click="delvideo()" class="uploadDelete"
						:src="require('../../../static/uploadDelete.png')" alt="">
						<image v-if="videoFilePath==''" @click="chooseVideo" class="uploadImg"
							:src="require('../../../static/upload-video.png')" alt="">
							<video v-else class="uploadImg" :src="videoFilePath"></video>
				</view>
			</view>
		</view>
		<!-- 提交 -->
		<view class="submit" @click="submit()">
			提交
		</view>
		<!-- 历史估价记录 -->
		<view @click="topath()" class="history">
			历史估价记录
		</view>
	</view>
</template>

<script>
	import {
		getUserCar
	} from "@/api/shop.js"
	import {
		setEvaluationAdd
	} from "@/api/maintain.js"
	export default {
		data: function() {
			return {
				carImg: require("../../../static/morentu.png"),
				carTitle: "请选择车辆",
				carData: {
					id: 1,
					carImg: require("../../../static/qiche.png"),
					carTitle: "奥迪a6l 2017款 30 fsi  技术型 fsi 技术型"
				},
				baseImagePath: this.baseImagePath,
				textData: "",
				uploadFileList: [

				],
				imgUrls: "",
				videoUrl: "",
				videoFilePath: "",
				cardMsg: {}
			}
		},
		onLoad() {
			this.getUserCar()
		},
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			let that = this;
			uni.$on('chooseCar', function(data) {
				that.cardMsg = data;
			})
		},
		methods: {
			getUserCar() {
				console.log('-------------------------------------------------------------');
				getUserCar().then(res => {
					console.log(res, '返回');
					this.cardMsg = res.data;
				})
			},
			textInput(e) {
				this.textData = e.detail.value;
			},
			topath() {
				this.$yrouter.push({
					path: "/pages/maintenance/evaluate/history/index"
				});

			},
			submit() {
				if (!this.carData.id) {
					uni.showToast({
						icon: "none",
						title: '请选择您的车辆'
					})
				} else if (!this.textData) {
					uni.showToast({
						icon: "none",
						title: '请输入估计内容'
					})
				} else if (!this.imgUrls) {
					uni.showToast({
						icon: "none",
						title: '请输至少上传一张图片'
					})
				} else {
					setEvaluationAdd({
						carId: this.carData.id,
						describes: this.textData,
						imgUrls: this.imgUrls,
						videoUrl: this.videoUrl
					}).then(res => {
						if (res.code == "00000") {
							uni.showToast({
								title: '预约成功',
								icon: 'none',
								duration: 3000
							});
							setTimeout(res => {
								uni.navigateBack({
									delta: 1 //返回两层页面
								});
							}, 3000)
						}
					})
				}

			},
			upload() {
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: res => {
						if (res.tempFilePaths.length != 0) {
							this.uploadFileList.push(res.tempFilePaths[0]);
						}
						var tempFilePaths = res.tempFilePaths;
						var tempFiles = res.tempFiles;
						uni.uploadFile({
							url: 'https://api.biaodianfuhao.net/api/common/sysFileInfo/upload',
							fileType: 'image',
							filePath: tempFilePaths[0],
							file: tempFiles[0],
							name: 'file',
							success: uploadFileRes => {
								let uploadRes = JSON.parse(uploadFileRes.data);
								if (that.imgUrls == "") {
									that.imgUrls = uploadRes.data;
								} else {
									that.imgUrls = that.imgUrls + "," + uploadRes.data
								}

							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
			chooseVideo() {
				let that = this;
				// 上传视频
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					camera: 'back',
					sourceType: ['album', 'camera'],
					success: (responent) => {
						this.videoFilePath = responent.tempFilePath;
						let videoFile = responent.tempFile;
						uni.uploadFile({
							url: 'https://api.biaodianfuhao.net/api/common/sysFileInfo/upload',
							fileType: 'video',
							filePath: this.videoFilePath,
							file: videoFile,
							name: 'file',
							success: uploadFileRes => {
								let uploadRes = JSON.parse(uploadFileRes.data);
								that.videoUrl = uploadRes.data;
							},
							fail(err) {
								console.log(err);
							}
						});
						// this.src = responent.tempFilePath;  //头条
					}
				})
			},

			// 删除图片
			del(index) {
				this.uploadFileList.splice(index, 1);
				console.log(this.uploadFileList);
			},
			delvideo() {
				this.videoFilePath = "";
			}
		}
	}
</script>

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

	.history {
		width: 600rpx;
		height: 90rpx;
		background: #FFFFFF;
		border: 1px solid #0063FF;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0063FF;
		text-align: center;
		line-height: 90rpx;
		margin: 50rpx 75rpx 0 75rpx;
	}

	.submit {
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		margin: 60rpx 75rpx 0 75rpx;

	}

	.uploadFile {
		width: 630rpx;
		height: 146rpx;
		display: flex;
		background: #ffffff;
		overflow-x: auto;
		padding: 0 40rpx 21rpx 40rpx;

		.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;
			}
		}

	}

	.eva-body {
		.step {
			width: 100%;
			height: 70rpx;
			background: #E9F3FF;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.step1 {
				display: flex;
				align-items: baseline;

				image {
					width: 24rpx;
					height: 27rpx;
				}

				.span {
					margin-left: 14rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #006AFF;
					line-height: 31rpx;
				}
			}

			image {
				width: 11rpx;
				height: 19rpx;
			}

			.step2 {
				display: flex;
				align-items: baseline;

				image {
					width: 24rpx;
					height: 27rpx;
				}

				.span {
					margin-left: 14rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #006AFF;
					line-height: 31rpx;
				}
			}
		}
	}

	.chooseCar {
		width: 710rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 15rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.carsMsg {
			display: flex;
			align-items: center;

			image {
				width: 118rpx;
				height: 118rpx;
				padding-left: 26rpx;
			}

			.carNa {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 42rpx;
				padding: 0 33rpx 0 33rpx;
			}
		}

		image {
			width: 15rpx;
			height: 27rpx;
			padding-right: 28rpx;
		}
	}

	.eva-detail {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0 0;
		margin: 20rpx 20rpx 0 0rpx;

		.textarea {
			width: 630rpx;
			height: 150rpx;
			padding: 40rpx;
		}
	}

	.classTextarea {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BFBFBF;
		line-height: 34rpx
	}
</style>