zhibo/pages_user/user/addAddress.vue

<template>
	<view class="content">
		<view class="inner">
			<view class="address-box">
				<textarea class="textarea" v-model="content"
					placeholder="请粘贴或输入文本,点击'识别'自动识别姓名、电话、地址,格式:深圳市龙岗区坂田街道长坑路西2巷2号202 黄大大 18888888888" />
				<view class="btns">
					<view class="btn parse" @click="parseAddress()">识别</view>
				</view>
			</view>
			<view class="form-box">

				<view class="form-item">
					<text class="label">联系人</text>
					<input type="text" v-model="form.realName" maxlength="10" placeholder="姓名" class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input type="number" v-model="form.phone" maxlength="11" placeholder="手机号" class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">所在地区</text>
					<picker :value="multiIndex" class="birth-picker" mode="multiSelector" range-key="n"
						:range="addressList" @change="pickerChange" @columnchange="pickerColumnchange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" v-model="form.address" placeholder="请选择" class="form-input"
									disabled="disabled" />
							</view>
							<image class="arrow" src="../../static/images/arrow_gray.png" mode=""></image>
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">详细地址</text>
					<textarea class="form-textarea" v-model="form.detail" placeholder="请输入详细地址" />
				</view>
			</view>
			<!-- 设为默认地址 -->
			<view class="setting-box">
				<text class="label">设为默认地址</text>
				<evan-switch v-model="isDefault" activeColor="#2BC7B9" inactiveColor="rgba(0, 0, 0, 0.1)"></evan-switch>
			</view>
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">保存地址</view>
		</view>
	</view>
</template>

<script>
	import {
		parseAddress,
		getCity,
		getCitys,
		getAddressById,
		addAddress,
		editAddress
	} from '@/api/address'
	import EvanSwitch from '@/components/evan-switch/evan-switch.vue'
	export default {
		components: {
			EvanSwitch
		},
		data() {
			return {
				content: null,
				type: null,
				id: null,
				isDefault: false,
				addressList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				address: [],
				form: {
					realName: null,
					phone: null,
					detail: null,
					address: null,
					isDefault: 0,
				}
			}
		},
		onLoad(option) {
			this.getCitys()
			this.type = option.type;
			if (this.type == 'edit') {
				uni.setNavigationBarTitle({
					title: "修改收货地址"
				})
				this.id = option.id;
				this.getAddressById();
			} else {
				uni.setNavigationBarTitle({
					title: "新增收货地址"
				})
			}

		},
		methods: {
			parseAddress() {
				if (this.content == null || this.content == "") {
					uni.showToast({
						icon: 'none',
						title: '请输入地址信息',
					});
					return;
				}
				var data = {
					content: this.content
				};
				parseAddress(data).then(
					res => {
						if (res.code == 200) {
							this.form.realName = res.data.name
							this.form.phone = res.data.mobile
							this.form.address = res.data.provinceName + res.data.cityName + res.data.expAreaName
							this.form.province = res.data.provinceName
							this.form.city = res.data.cityName
							this.form.district = res.data.expAreaName
							this.form.detail = res.data.streetName + res.data.address
							this.form.detail = this.form.detail.replace(/\s+/g, "");
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getAddressById() {
				var data = {
					id: this.id
				};
				getAddressById(data).then(
					res => {
						if (res.code == 200) {
							this.form = res.data;
							this.isDefault = this.form.isDefault == 1 ? true : false;
							this.form.address = this.form.province + this.form.city + this.form.district
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			submit() {
				if (this.type == "add") {
					this.addAddress()
				} else if (this.type == "edit") {
					this.editAddress()
				}

			},
			editAddress() {
				this.form.isDefault = this.isDefault ? 1 : 0
				editAddress(this.form).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							setTimeout(function() {
								uni.$emit('refreshAddress');
								uni.navigateBack({
									delta: 1
								})
							}, 500);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			addAddress() {
				this.form.isDefault = this.isDefault ? 1 : 0
				addAddress(this.form).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							setTimeout(function() {
								uni.$emit('refreshAddress');
								uni.navigateBack({
									delta: 1
								})
							}, 500);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 地区选择
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// 获取一级类目
				// 获取二级类目
				// 获取三级类目
				this.form.address = this.addressList[0][this.multiIndex[0]].n + this.addressList[1][this.multiIndex[1]].n +
					this.addressList[2][this.multiIndex[2]].n
				this.form.province = this.addressList[0][this.multiIndex[0]].n
				this.form.city = this.addressList[1][this.multiIndex[1]].n
				this.form.district = this.addressList[2][this.multiIndex[2]].n
				this.form.cityId = this.addressList[1][this.multiIndex[1]].v;


			},
			pickerColumnchange(e) {
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// console.log('第一列滑动');
					this.addressList[1] = this.address[this.multiIndex[0]].c;
					this.addressList[2] = this.address[this.multiIndex[0]].c[0].c
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.addressList[2] = this.address[this.multiIndex[0]].c[this.multiIndex[1]].c
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},
			getCitys() {
				getCitys().then(
					res => {
						if (res.code == 200) {
							this.address = res.data
							for (var i = 0; i < this.address.length; i++) {
								this.addressList[0].push(this.address[i])
							}
							for (var i = 0; i < this.address[0].c.length; i++) {
								this.addressList[1].push(this.address[0].c[i])
							}
							for (var i = 0; i < this.address[0].c[0].c.length; i++) {
								this.addressList[2].push(this.address[0].c[0].c[i])
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			}
		}
	}
</script>

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

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.inner {
			height: calc(100% - 120upx);
			padding: 20upx;

			.address-box {
				padding: 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				margin-bottom: 20upx;
				position: relative;

				.textarea {
					width: 100%;
					height: 200upx;
					font-size: 30upx;
					color: #999999;
					padding-bottom: 100rpx;
				}

				.btns {
					right: 10rpx;
					bottom: 10rpx;
					position: absolute;

					.btn {
						width: 155upx;
						height: 64upx;
						line-height: 64upx;
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						text-align: center;
						border-radius: 32upx;

						&.parse {
							background: #2BC7B9;
							color: #FFFFFF;
						}
					}
				}
			}

			.form-box {
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;

				.form-item {
					padding: 30upx 0;
					display: flex;
					align-items: flex-start;
					border-bottom: 1px solid #F1F1F1;

					&:last-child {
						border-bottom: none;
					}

					.label {
						width: 180upx;
						text-align: left;
						font-size: 30upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}

					input {
						text-align: left;
					}

					.form-input {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: left;
					}

					.form-textarea {
						font-size: 30upx;
						color: #999999;
						height: 100upx;
						padding: 4upx 0;
					}

					.birth-picker {
						flex: 1;
						display: flex;
						align-items: center;

						.right-box {
							width: 100%;
							display: flex;
							align-items: center;

							.input-box {
								width: 470upx;
							}

							.arrow {
								width: 13upx;
								height: 23upx;
								margin-left: 20upx;
							}
						}
					}
				}
			}

			.setting-box {
				height: 88upx;
				background: #FFFFFF;
				border-radius: 16upx;
				margin-top: 20upx;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.label {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
				}
			}
		}

		.btn-box {
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;

			.sub-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #2BC7B9;
				border-radius: 44upx;
			}
		}
	}
</style>