wangluohuoyun-app/pages/mine/often/addRoute.vue

<template>
	<view class="center">
		<view class="route_site">
			<view class="out_site">
				<span class="blueDot dot"></span>
				请选择发货城市
				<view class="site_change" @click="selectAddress(1)" v-if="!title1">
					 选择
				</view>
				<view class="site" @click="selectAddress(1)" v-else>{{title1 ? title1 : ""}}</view>
				<itmister-address-picker ref="addressElone" @confirmChange="confirmChangeOne"></itmister-address-picker>
			</view>
			<view class="in_site">
				<span class="redDot dot"></span>
				请选择卸货城市
				<view class="site_change" @click="selectAddress(2)" v-if="!title2">
					 选择
				</view>
				<view class="site" @click="selectAddress(2)"  v-else>{{title2 ? title2 : ""}}</view>
				<itmister-address-picker-other ref="addressEltwo" @confirmChange="confirmChangeTwo"></itmister-address-picker-other>
			</view>
		</view>
		<!-- <view class="flex row form_css">
			<view class="left-text">发货城市</view>
			<view class="right-text">
				<view @click="selectAddress(1)">{{title1 ? title1 : "请选择地址"}}</view>
				<itmister-address-picker ref="addressElone" @confirmChange="confirmChangeOne"></itmister-address-picker>
			</view>
		</view>
		<view class="flex row form_css">
			<view class="left-text">到货城市</view>
			<view class="right-text">
				<view @click="selectAddress(2)">{{title2 ? title2 : "请选择地址"}}</view>
				<itmister-address-picker-other ref="addressEltwo" @confirmChange="confirmChangeTwo"></itmister-address-picker-other>
			</view>
		</view> -->
		<view class="text_css">注：常用路线用于展示给其他司机和货主查看。</view>
		<view class="btn_css">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	// import regionPicker from "@/components/region/region-picker";
	// import Linkage from '@/components/gaojianghua-linkage/linkage.vue'
	import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue'
	import itmisterAddressPickerOther from '@/components/itmister-address-picker/itmister-address-picker-other.nvue'

	export default {
		components: {
			// regionPicker,
			// Linkage,
			itmisterAddressPicker,
			itmisterAddressPickerOther
		},
		data() {
			return {
				id: "",
				routeData: {},
				// selections1: [],
				// selections2: [],
				driverData: {},
				avatarUrl: "",
				// sendregion: [],
				// unloaddregion: [],
				title1: "",
				title2: "",
			}
		},
		onShow() {},
		onLoad(options) {
			this.driverData = uni.getStorageSync('firstAuthentication')
			this.avatarUrl = uni.getStorageSync("userInfo").avatarUrl
			this.id = options.id
			if (this.id) { //修改
				uni.setNavigationBarTitle({
					title: '编辑路线'
				})
				this.getList()
			}
		},
		methods: {
			selectAddress(num) {
				if(num == 1){
					this.$refs.addressElone.show();
				}else{
					this.$refs.addressEltwo.show();
				}
			},
			// 确认选中
			confirmChangeOne(address) {
				this.routeData.sendProvince = address.province ? address.province : ''
				this.routeData.sendCity = address.city ? address.city : ''
				this.routeData.sendArea = address.area ? address.area : ''
				if(address.city == '全省'){
					this.title1 = address.province
					this.routeData.sendCity = ""
					this.routeData.sendArea = ""
				}else if(address.area == '全市'){
					this.title1 = address.province  + address.city
					this.routeData.sendArea = ""
				}else{
					this.title1 = address.province  + address.city + address.area;
				}
				
			},
			confirmChangeTwo(address) {
				this.routeData.unloadProvince = address.province ? address.province : ''
				this.routeData.unloadCity = address.city ? address.city : ''
				this.routeData.unloadArea = address.area ? address.area : ''
				
				if(address.city == '全省'){
					this.title2 = address.province
					this.routeData.unloadCity = ""
					this.routeData.unloadArea = ""
				}else if(address.area == '全市'){
					this.title2 = address.province  + address.city
					this.routeData.unloadArea = ""
				}else{
					if(address.province == '全国'){
						this.title2 = address.province
					}else{
						this.title2 = address.province  + address.city + address.area;
					}
					
				}
				
			},
			// conceal1(param) {
			// 	const {
			// 		chooseprovince,
			// 		choosecity,
			// 		choosearea
			// 	} = param
			// 	// 获取到传过来的 省 市 区 县数据
			// 	this.routeData.sendProvince = chooseprovince
			// 	this.routeData.sendCity = choosecity == '全部' ? "" : choosecity
			// 	this.routeData.sendArea = choosearea == '全部' ? "" : choosearea
			// 	this.title1 = chooseprovince + choosecity + choosearea
			// 	if (chooseprovince == '全国') {
			// 		this.succeed(1)
			// 	}
			// 	if (choosecity == '全部') {
			// 		this.succeed(1)
			// 	} else if (choosearea != '') {
			// 		this.succeed(1)
			// 	}
			// },
			// conceal2(param) {
			// 	const {
			// 		chooseprovince,
			// 		choosecity,
			// 		choosearea
			// 	} = param
			// 	// 获取到传过来的 省 市 区 县数据
			// 	this.routeData.unloadProvince = chooseprovince
			// 	this.routeData.unloadCity = choosecity == '全部' ? "" : choosecity
			// 	this.routeData.unloadArea = choosearea == '全部' ? "" : choosearea
			// 	this.title2 = chooseprovince + choosecity + choosearea
			// 	if (chooseprovince == '全国') {
			// 		this.succeed(2)
			// 	}
			// 	if (choosecity == '全部') {
			// 		this.succeed(2)
			// 	} else if (choosearea != '') {
			// 		this.succeed(2)
			// 	}
			// },
			//筛选框关闭
			// succeed(num) {
			// 	// this.$refs.uDropdown.close();
			// 	if (num == 1) {
			// 		this.show1 = false
			// 	} else if (num == 2) {
			// 		this.show2 = false
			// 	}
			// },
			getList() {
				this.$request.baseRequest('get', '/commonRoute/get', {
						id: this.id
					}).then(res => {
						if (res.code == 200) {
							this.routeData = res.data
							this.title1 = this.routeData.sendProvince + this.routeData.sendCity + this.routeData
								.sendArea
							this.title2 = this.routeData.unloadProvince + this.routeData.unloadCity + this.routeData
								.unloadArea
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			submit() {
				this.routeData.commonId = uni.getStorageSync("userInfo").id
				let name = this.driverData.driverCall.slice(0, 1)
				this.routeData.driverNickname = name + "师傅"
				this.routeData.driverPortrait = this.avatarUrl
				if (this.id) {
					this.$request.baseRequest('post', '/commonRoute/api/edit', this.routeData).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "修改成功！",
									complete() {
										uni.$u.route("pages/mine/often/oftenRoute")
									}
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				} else {
					this.$request.baseRequest('post', '/commonRoute/api/add', this.routeData).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "提交成功！",
									complete() {
										uni.$u.route("pages/mine/often/oftenRoute")
									}
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}
			},
			// regionChange1(value) {
			// 	this.sendregion = value
			// 	this.routeData.sendProvince = this.sendregion[0] == '请选择' ? '' : this.sendregion[0]
			// 	this.routeData.sendCity = this.sendregion[1] == '请选择' ? '' : this.sendregion[1]
			// 	this.routeData.sendArea = this.sendregion[2] == '请选择' ? '' : this.sendregion[2]
			// },
			// regionChange2(value) {
			// 	this.unloaddregion = value
			// 	this.routeData.unloadProvince = this.unloaddregion[0] == '请选择' ? '' : this.unloaddregion[0]
			// 	this.routeData.unloadCity = this.unloaddregion[1] == '请选择' ? '' : this.unloaddregion[1]
			// 	this.routeData.unloadArea = this.unloaddregion[2] == '请选择' ? '' : this.unloaddregion[2]
			// },
			// selecteRegion1(value) {
			// 	this.selections1 = value;
			// 	this.routeData.sendNum = this.selections1.toString()
			// },
			// selecteRegion2(value) {
			// 	this.selections2 = value;
			// 	this.routeData.unloadNum = this.selections2.toString()
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		// width: 100%;
		padding: 30rpx;
		background: #F2F4F7;
	}
	.route_site{
		background: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx;
		.out_site{
			border-bottom: 1px solid #E6E6E6;
			padding-bottom: 20rpx;
		}
		.in_site{
			margin-top: 30rpx;
		}
		.dot{
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			border-radius: 8rpx;
			margin: 20rpx 20rpx 0 0 ; 
		}
		.blueDot{
			background: #2772FB;
		}
		.redDot{
			background: #FE6300;
		}
		.site_change{
			margin-top: 20rpx;
			text-align: center;
			line-height: 64rpx;
			border: 1px solid #CFCFCF;
			width: 158rpx;
			height: 64rpx;
			border-radius: 32rpx;
			margin-left: 30rpx;
		}
		.site{
			color: #2772FB;
			margin-top: 20rpx;
			margin-left: 30rpx;
				height: 64rpx;
		}
	}
	.text_css{
		margin-top: 20rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.form_css {
		width: 100%;
		display: flex;
		margin: 20rpx 0;
		height: 60rpx;
		border-bottom: 1px solid #eeeeee;

		.left-text {
			width: 50%;
			text-align: left;
		}

		.right-text {
			width: 50%;
			justify-content: flex-end;
			display: flex;
			text-align: right;
		}
	}

	.btn_css {
		margin-top: 300rpx;
	}
</style>