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

<template>
	<view class="center">
		<view class="flex row form_css">
			<view class="left-text">发货城市</view>
			<view class="right-text">
				<!-- <regionPicker :multiIndex_="selections1" @region_="regionChange1" custom_="请选择"
					@selecteRegion_="selecteRegion1" title_="全国" /> -->
				<view @click="show1 = true">{{title1 ? title1 : "请选择地址"}}</view>
				<Linkage @conceal="conceal1" class="flex" v-if="show1" ref="uDropdown"></Linkage>
			</view>
		</view>
		<view class="flex row form_css">
			<view class="left-text">到货城市</view>
			<view class="right-text">
				<!-- <regionPicker :multiIndex_="selections2" @region_="regionChange2" custom_="请选择"
					@selecteRegion_="selecteRegion2" title_="全国" /> -->
				<view @click="show2 = true">{{title2 ? title2 : "请选择地址"}}</view>
				<Linkage @conceal="conceal2" class="flex" v-if="show2" ref="uDropdown"></Linkage>
			</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'

	export default {
		components: {
			regionPicker,
			Linkage
		},
		data() {
			return {
				id: "",
				routeData: {},
				selections1: [],
				selections2: [],
				driverData: {},
				avatarUrl: "",
				sendregion: [],
				unloaddregion: [],
				title1: "",
				title2: "",
				show1: false,
				show2: false,
			}
		},
		onShow() {},
		onLoad(options) {
			this.driverData = uni.getStorageSync('firstAuthentication')
			this.avatarUrl = uni.getStorageSync("userInfo").avatarUrl
			this.id = options.id
			if (this.id) { //修改
				wx.setNavigationBarTitle({
					title: '编辑路线'
				})
				this.getList()
			}
		},
		methods: {
			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
							// this.selections1 = res.data.sendNum.split(",")
							// this.selections2 = res.data.unloadNum.split(",")
						}
					})
					.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;
	}

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