lanan-app/pages/rescue/initiate.vue

<!-- 发起订单 -->
<template>
	<view class="content">
		<VNavigationBarVue :title="title"></VNavigationBarVue>
		<view class="dil">
			<view style="color: #000;font-size: 34rpx;font-weight:bold;padding: 24rpx 0;">救援地址</view>
			<!-- 发起救援 头部-->
			<view class="top">
				<view style="flex: 1;width: 0;">
					<!-- 起 -->
					<view class="top-box">
						<view class="tb-left">
							<image class="uicon" src="@/static/icons/initiate/start.png" mode="aspectFit"></image>
							<view @click="getmap()" style="width: 100%;">
								<view class="text1" v-show="four == ''" v-if="rescueType != 5">请选择救援地址</view>
								<view class="text1" v-show="four == ''" v-if="rescueType == 5">请选择扣车地址</view>
								<view class="text1" v-show="four != ''">{{province}}{{city}}{{area}}</view>
								<view class="hong1" v-show="four == ''">*必填，请填写详细地址</view>
								<view class="hong2" v-show="four != ''">
									<input type="text" style="width: 100%;" :placeholder="four">
								</view>
							</view>
						</view>
						<!-- 					<view class="tb-right" @click="getmap()">
											<image src="../../static/dingwei.png" mode=""></image>
										</view> -->
					</view>
					<!-- 终 -->
					<view class="top-box" v-if="rescueType == 1" style="border-top:1px solid #EAEAEA;">
						<view class="tb-left">
							<image class="uicon" src="@/static/icons/initiate/end.png" mode="aspectFit"></image>
							<view @click="getmap1()" style="width: 100%; overflow: hidden; ">
								<view class="text1" v-show="four1 == ''">请选择终点地址</view>
								<view class="text1" v-show="four1 != ''">{{province1}}{{city1}}{{area1}}</view>
								<!--<view class="hong1" v-show="four1 == ''">*必填，请填写详细地址</view>-->
								<view class="hong2" v-show="four1 != ''">
									<input type="text" :placeholder="four1">
								</view>
							</view>
						</view>
						<!-- 					<view class="tb-right" @click="getmap1()">
											<image src="../../static/dingwei.png" mode=""></image>
										</view> -->
					</view>
				</view>
				<image v-if="rescueType == 1" class="start-end" src="@/static/icons/initiate/qiehuan.png"
					mode="aspectFit">
				</image>
			</view>
			<view style="color: #000;font-size: 34rpx;font-weight: bold;padding: 24rpx 0;">救援信息</view>
			<!-- 填空 -->
			<view class="jyxx">
				<view class="jyxx-tinput" @click="show = true" v-if="isAppointment == 1">
					<view class="text1"> <text class="hong1">*</text> 预约时间</view>
					<view class="you">
						<text>{{rescueTime}}</text>
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">联系人</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入联系人"
							v-model="connectionName">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1"> 手机号</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入手机号"
							v-model="connectionPhone">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">车牌号</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车牌号"
							v-model="licenseNum">
					</view>
				</view>
				<view class="jyxx-tinput" @click="shows = true" v-if="rescueType == 5">
					<view class="text1"> <text class="hong1">*</text> 扣车地点</view>
					<view class="you">
						<text>{{kcname || ''}}</text>
					</view>
				</view>
			</view>
			<view class="xinput">
				<view class="text1"> <text class="hong1">*</text> 路段选择</view>
				<view class="xz" style="flex-wrap: wrap;row-gap: 20rpx">
					<view :class="{'xlan': seletedRoad.includes(item.id)}" class="kuang"
						v-for="(item,index) in roadOptions" :key="index" @click="chooseRoad(index,item.id)">
						<view class="">{{item.label}}</view>
					</view>
				</view>
			</view>
			<view class="xinput">
				<view class="text1"> <text class="hong1">*</text> 车辆类型</view>
				<view class="xz">
					<view :class="{'xlan':carzhi == index}" class="kuang" v-for="(item,index) in car" :key="index"
						@click="getzhi(index,item.value)">
						<view class="">{{item.label}}</view>
					</view>
				</view>
			</view>
			<view class="xinput">
				<view class="text1"> <text class="hong1">*</text> 收费类型</view>
				<view class="xz">
					<view :class="{'xlan':maneizhi == index}" class="kuang" v-for="(item,index) in manei" :key="index"
						@click="getzhi2(index,item.value)">
						<view class="">{{item.label}}</view>
					</view>
				</view>
			</view>

			<view class="tinput">
				<view class="text1"> 现场图片</view>
				<view class="you">
					<!-- <input type="text" placeholder="请输入现场图片"> -->
					<!-- 上传图片 -->
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10">
						<view style="display: flex;align-items: center;justify-content: center;height: 100%;">
							<text style="color: #929292;font-size: 24rpx">上传图片</text>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="tinput">
				<view class="text1" style="flex-shrink: 0;"> 备注</view>
				<view class="you">
					<input type="text" placeholder-style="color: #929292;font-size: 24rpx" placeholder="添加备注"
						v-model="rescueDetail">
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" @confirm="confirms" @cancel="cancels"
				mode="datetime"></u-datetime-picker>


			<view class="anniu" @click="postadd()">
				<text>发起救援</text>
			</view>
			<view style="width: 100%; height: 60px;"></view>
		</view>
		<view class="">
			<u-picker :show="shows" :columns="columns" @confirm="confirmm" @cancel="cancelm" keyName="label"></u-picker>
		</view>
		<view class="">
			<u-picker :show="roadVisible" :columns="roadOptions" @confirm="roadConfirm" @cancel="roadCancel"
				keyName="dictValue"></u-picker>
		</view>
		<tabBar msg="1"></tabBar>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import VNavigationBarVue from '../../components/VNavigationBar.vue'
	import request from '../../utils/request'
	import config from '@/config'
	import upload from '@/utils/upload.js'
	import {
		getTenantId,
		hasRole
	} from "@/utils/auth";
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				rescueLongitude: '',
				rescueLatitude: '',
				connectionName: '',
				connectionPhone: '',
				rescuePosition: '',
				rescueDetail: '',
				rescueType: '',
				baseUrl: this.$baseUrl,
				carType: 1,
				feeType: 1,
				licenseNum: '',
				isAppointment: 0,
				fileList1: [],
				imageList: [],
				rescueSceneImage: [],
				rescueTime: '请选择约定时间',
				carzhi: 0,
				car: [{
						text: '大',
						id: 1
					},
					{
						text: '中',
						id: 2
					},
					{
						text: '小',
						id: 3
					}
				],
				maneizhi: 1,
				manei: [{
						text: '现金',
						id: 1
					},
					{
						text: '签单',
						id: 2
					},

				],
				province: '',
				city: '',
				area: '',
				four: '',
				province1: '',
				city1: '',
				area1: '',
				four1: '',
				shows: false,
				kcname: '',
				columns: [

				],
				title: '救援',
				roadOptions: [],
				seletedRoad: [],
				roadVisible: false
			}
		},
		onLoad(option) {
			this.rescueType = option.id
			switch (option.id) {
				case '1':
					this.title = '拖车'
					break;
				case '2':
					this.title = '送油'
					break;
				case '3':
					this.title = '搭电'
					break;
				case '4':
					this.title = '换胎'
					break;
				case '5':
					this.title = '扣车'
					break;
				default:
					break;
			}
			this.newtwo()
			this.isAppointment = option.isAppointment

			if (hasRole('jjdd')) {
				this.kcdd()
			}
		},
		components: {
			tabBar,
			VNavigationBarVue
		},
		methods: {
			newtwo() {
				// request({
				// 	url: '/system/dict-data/page?pageNo=1&pageSize=100&dictType=fee_type',
				// 	method: 'get'
				// }).then(res => {
				// 	console.log('res: ', res);
				// 	if (res.data && res.data.list && res.data.list.length > 0) {
				// 		this.manei = res.data.list.map(m => {
				// 			return {
				// 				dictValue: m.value,
				// 				dictLabel: m.label
				// 			}
				// 		})
				// 	}
				// })
				request({
					url: '/rescue/dict/data/type/fee_type',
					method: 'get',

				}).then((res) => {
					this.manei = res.data
					console.log(res);
				})
				request({
					url: '/rescue/dict/data/type/rescue_car_type',
					method: 'get',

				}).then((res) => {
					this.car = res.data
					console.log(res);
				})

				request({
					url: '/rescue/dict/data/type/kcRescueRoad-' + getTenantId(),
					method: 'get'
				}).then(res => {
					this.roadOptions = res.data
					console.log(res);
				})
			},
			kcdd() {
				request({
					url: '/system/rescueInfo/getKcPosition',
					method: 'get',

				}).then((res) => {
					this.columns.push(res.data)
					console.log(this.columns);
				})
			},
			confirmm(e) {
				console.log(e);
				this.kcname = e.value[0].label
				this.shows = false
			},
			cancelm() {
				this.shows = false
			},
			roadConfirm(e) {
				console.log('e: ', e);
				this.roadVisible = false
			},
			roadCancel() {
				this.roadVisible = false
			},

			confirms(e) {
				console.log(e);
				const timestamp = e.value
				const date = new Date(timestamp);

				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');

				this.rescueTime = `${year}-${month}-${day} ${hours}:${minutes}`
				console.log(this.rescueTime);
				this.show = false
			},
			cancels() {
				this.show = false
			},
			postadd() {
				this.rescueSceneImage = this.imageList.join(",")
				if (typeof this.rescueTime === "number") {} else {
					this.rescueTime = ''
				}
				if (this.isAppointment == 'undefined') {
					this.isAppointment = 0
				}
				if (this.rescueLongitude == "" || this.rescueLatitude == "") {
					uni.showToast({
						title: '起点位置不能为空',
						icon: 'none'
					})

					return
				}
				// if (this.connectionName == "") {
				// 	uni.showToast({
				// 		title: '联系人不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.connectionPhone == "") {
				// 	uni.showToast({
				// 		title: '手机号不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (!this.licenseNum) {
				//   uni.showToast({
				//     title: '车牌号不能为空',
				//     icon: 'none'
				//   })
				//   return
				// }
				// if (this.seletedRoad.length === 0) {
				//   uni.showToast({
				//     title: '未选择路段',
				//     icon: 'none'
				//   })
				//   return
				// }
				console.log('this.seletedRoad: ', this.seletedRoad);

				let data = {
					rescueLongitude: this.rescueLongitude,
					rescueLatitude: this.rescueLatitude,
					destinationLongitude: this.destinationLongitude,
					destinationLatitude: this.destinationLatitude,
					connectionName: this.connectionName,
					connectionPhone: this.connectionPhone,
					rescuePosition: this.rescuePosition,
					destinationInfo: this.destinationInfo,
					licenseNum: this.licenseNum,
					roadIds: this.seletedRoad,
					isAppointment: this.isAppointment,
					rescueTime: this.rescueTime,
					rescueDetail: this.rescueDetail,
					rescueSceneImage: this.rescueSceneImage,
					rescueType: this.rescueType,
					carType: this.carType,
					feeType: this.feeType,
					kcPosition: this.kcname
				}
				request({
					url: '/app/rescueInfo/add',
					method: 'post',
					data: data
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							})
						}, 2000);
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log('执行了', event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					console.log('路径', lists[i].url);
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {

				uni.compressImage({
					src: url,

					success: res => {
						upload({
							url: '/common/upload',
							filePath: res.tempFilePath,
						}).then((res) => {
							console.log('res.fileName', res.data.url)
							this.imageList.push(this.$baseImageUrl + res.data.url)
							console.log('this.imageList', this.imageList)
							console.log(res);
						})

					}
				})


			},
			// 以下为重点
			// 起点经纬
			getmap() {
				let that = this
				console.log('选择位置')
				uni.getLocation({
					type: 'wgs84',
					success: function(getres) {
						console.log('当前位置的经度：' + getres.longitude);
						console.log('当前位置的纬度：' + getres.latitude);
						
						uni.chooseLocation({
							latitude: getres.latitude,
							longitude: getres.longitude,
							success: function(res) {
								console.log(res)
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
								that.rescueLongitude = res.longitude
								that.rescueLatitude = res.latitude
						
								that.rescuePosition = res.address
								var address = res.address;
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								let addressList = address.match(reg).toString().split(",");
								if (addressList[0] == '重庆市' || addressList[0] == '北京市' || addressList[0] == '天津市' ||
									addressList[0] == '上海市') {
									that.province = addressList[0];
									that.city = '市辖区';
									that.area = addressList[1];
									that.four = address.replace(that.province, '').replace(that.city, '').replace(that
										.area, '');
								} else {
									that.province = addressList[0];
									that.city = addressList[1];
									that.area = addressList[2];
									that.four = address.replace(that.province, '').replace(that.city, '').replace(that
										.area, '');
								};
								console.log(that.four.indexOf(res.name));
								if (that.four.indexOf(res.name) < 0) {
									that.four = that.four + res.name
									that.rescuePosition = that.rescuePosition + res.name
								}
						
							},
							fail: (err) => {
								console.log(err, 'err')
							},
							complete(res) {
								console.log(res, 'cpmplete')
							}
						});
					}
				});
				

			},

			getmap1() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(getres) {
						console.log('当前位置的经度：' + getres.longitude);
						console.log('当前位置的纬度：' + getres.latitude);

						uni.chooseLocation({
							latitude: getres.latitude,
							longitude: getres.longitude,
							success: function(res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
								console.log(res)
								that.destinationLongitude = res.longitude
								that.destinationLatitude = res.latitude
								that.destinationInfo = res.address
								var address = res.address;
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								let addressList = address.match(reg).toString().split(",");
								if (addressList[0] == '重庆市' || addressList[0] == '北京市' ||
									addressList[0] ==
									'天津市' ||
									addressList[0] == '上海市') {
									that.province1 = addressList[0];
									that.city1 = '市辖区';
									that.area1 = addressList[1];
									that.four1 = address.replace(that.province, '').replace(that
											.city, '')
										.replace(that
											.area, '');
								} else {
									that.province1 = addressList[0];
									that.city1 = addressList[1];
									that.area1 = addressList[2];
									that.four1 = address.replace(that.province, '').replace(that
											.city, '')
										.replace(that
											.area, '');
								};
								console.log(that.four1);

							}
						});
					}
				});


			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			getzhi(index, id) {
				this.carType = id
				this.carzhi = index
			},
			getzhi2(index, id) {
				this.feeType = id
				this.maneizhi = index
			},
			/**
			 * 路段选择事件
			 * @param index
			 * @param id
			 */
			chooseRoad(index, id) {
				if (this.seletedRoad.includes(id)) {
					const findIndex = this.seletedRoad.indexOf(id)
					this.seletedRoad.splice(findIndex, 1)
				} else {
					this.seletedRoad.push(id)
				}
			}

		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: #F7F8FC;
		display: flex;
		flex-direction: column;
		row-gap: 10rpx;
	}

	.dil {
		flex: 1;
		height: 0;
		overflow: auto;
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px;
	}

	.top {
		box-sizing: border-box;
		padding: 0px 15px;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid rgba(50, 125, 251, 0.05);
		display: flex;
		align-items: center;
		column-gap: 28rpx;

		.start-end {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20px 0px;
	}

	.tb-left {
		height: 100%;
		width: 85%;
		display: flex;
		align-items: flex-start;
	}

	.uicon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 6px;
	}

	.tb-right {
		width: 20px;
		height: 26px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.text1 {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
	}

	.hong1 {
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;
		color: #D42424;
	}

	.hong2 {
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;
		width: 100%;
		overflow: hidden;

		input {
			width: 100%;
		}
	}

	.jyxx {
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid rgba(50, 125, 251, 0.05);
		padding: 14rpx 38rpx;
	}

	.jyxx-tinput {
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: 12rpx;
		padding: 24rpx 0;
		border-bottom: 2rpx solid rgba(151, 151, 152, 0.20);

		&:last-child {
			border: none;
		}

		.text1 {
			font-size: 28rpx;
			color: #000;
			font-weight: bold;
		}

		.you {
			flex: 1;
			width: 0;
		}
	}

	.tinput {
		width: 100%;
		display: flex;
		background: white;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 16px;
		margin-top: 14px;
	}

	.xinput {
		width: 100%;
		box-sizing: border-box;
		padding: 36rpx;
		margin-top: 14px;

		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid rgba(50, 125, 251, 0.05);
	}

	.you {
		text-align: right;
	}

	.xz {
		margin-top: 10px;
		display: flex;
		align-items: center;
	}

	.kuang {
		width: 92rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #327DFB;
		border-radius: 5px;
		border: 2rpx solid #327DFB;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 24rpx;
		border-radius: 24rpx;
	}

	.xlan {
		background: #327DFB;
		border: 2rpx solid #327DFB;
		color: #fff;
	}

	.anniu {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin-top: 30rpx;

		background: #327DFB;
		border-radius: 12rpx;
	}
</style>