zd/pages/user/reportForRepair/status1.vue

<template>
	<view class="content">
		<view class="listBox">
			<view class="list">
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">当前车辆</text>
					</view>
					<view class="right flex">
						{{cartInfo.car_name}}
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">维修地点</text>
					</view>
					<view class="right flex" @click="getAddress">
						<view class="input">
							{{address}}
						</view>
						<image class="img" src="../../../static/icon/location.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">联系电话</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="phone" type="text" placeholder="请填写联系电话"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="listItem">
					<view class="flex titleBox">
						<text class="title">故障简述</text>
					</view>
					<view class="right flex">
						<textarea class="textarea_text" placeholder="简单的描述下故障。" v-model="content" maxlength='300'
							name="" id="" cols="30" rows="10"></textarea>
						<view class="maxShow">
							{{content.length}}/300
						</view>
					</view>
				</view>
				<view class="listItem">
					<view class="flex titleBox">
						<text class="title">图片上传</text>
					</view>
					<view class="right flex imgList">
						<view class="position-relative margin-r-20" v-if="imgList.length>0"
							v-for="(item,index) in imgList">
							<image class="upImg" :src="item" mode="scaleToFill"></image>
							<image class="topExit" src="../../../static/icon/goodsExit.png" mode="scaleToFill"
								@click="delImg(index)"></image>
						</view>
						<view class="position-relative margin-r-20">
							<image class="upImg" src="../../../static/image/upImg.png" mode="scaleToFill"
								@click="upImg()"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="base-buttom" @click="confirm">
			申请报修
		</view>
	</view>
</template>

<script>
	import {
		create_question
	} from '@/api/user.js';
	import {
		upload
	} from '@/api/order.js';
	export default {
		props: {
			cartInfo: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				content: '', //提交内容
				cartName: '车辆编号asdsfqdqwew',
				phone: '', //手机号
				address: '', //定位
				lat: '', //经度
				lon: '', //纬度
				imgList: [],
			};
		},
		created() {
			// console.log('调用方法1');
		},
		methods: {
			// 提交审核
			confirm() {
				if (!this.phone || this.phone.length != 11) {
					uni.showModal({
						title: '提示',
						content: '请填写正确的手机号',
						showCancel: false,
					});

					return
				}
				if (!this.content || !(this.content.trim())) {
					uni.showModal({
						title: '提示',
						content: '请填写故障描述',
						showCancel: false,
					});
				}
				if (this.imgList.length < 1) {
					uni.showModal({
						title: '提示',
						content: '请上传故障图片',
						showCancel: false,
					});
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});

				create_question({
					car_number: this.cartInfo.car_number,
					phone: this.phone,
					content: this.content,
					images: this.imgList.join(','),
					longitude: this.lon,
					'latitude': this.lat,
					address: this.address
				}).then((e) => {
					uni.showModal({
						title: '提示',
						content: e.msg,
						showCancel: false,
					});
					this.$emit("request");
					uni.hideLoading()
				}).catch((e) => {
					uni.hideLoading()
				})
			},

			// 上传修理图片
			upImg(type = 'add', index) {
				// console.log(type,index,'上传');
				let that = this;
				upload({
					filename: ''
				}).then(data => {
					// console.log(type == 'add');
					if (type == 'add') {
						that.imgList = that.imgList.concat([data[0].url]);
					}
					if (type == "edit") {
						that.imgList[index] = data[0].url;
					}
				})
			},
			// 获取用户地址信息
			getAddress() {
				let that = this;
				uni.getLocation({
					type:'gcj02',
					success(res) {
						// console.log(res, '返回的位置数据');
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(re) {
								that.lat = re.latitude;
								that.lon = re.longitude;
								that.address = re.address;
								// console.log(re, '当前位置');
							},
							fail(e) {
								console.log(e, 'cw');
							}
						})
					}
				})
			},
			// 删除上传图片
			delImg(index) {
				this.imgList.splice(index, 1)
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.listBox {
		margin: $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.list {
		.input {
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
			width: 100%;
		}

		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;

			.imgList {
				margin-top: 30rpx;
				justify-content: flex-start;

				.topExit {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;
			position: relative;

			.img {
				width: 26rpx;
			}

			.upImg {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
			}

			.textarea_text {
				background-color: $page-color-base;
				width: 100%;
				margin-top: 30rpx;
				border-radius: 20rpx;
				padding: 30rpx;
			}

			.maxShow {
				position: absolute;
				bottom: 10rpx;
				right: 20rpx;
				font-size: 24rpx;
			}

		}

		.titleBox {
			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}
</style>