recycle-mobile/src/pages/mine/address/form.vue

<template>
	<zj-page-layout :hasFooter="true">
		<view class="form-container">
			<view class="clipboard">
				<view class="box">
					<u--textarea v-model="clipboard" border="none" :confirmType="'done'" placeholder="试试粘贴“收件人姓名，手机号，详细地址”，可快速识别您的用户及地址信息"></u--textarea>
					<view class="btns">
						<u-button text="清空" size="small" @click="clipboard = ''"></u-button>
						<u-button type="primary" text="识别" size="small" @click="shibie"></u-button>
					</view>
				</view>
			</view>
			<view class="row">
				<view class="title">联系人</view>
				<view class="right input"><input type="text" placeholder="请输入联系人" v-model="formData.name"></view>
			</view>
			<view class="row">
				<view class="title">手机号码</view>
				<view class="right input"><input type="number" placeholder="请输入手机号码" v-model="formData.phone"></view>
			</view>
			<view class="row">
				<view class="title">所在地区</view>
				<view class="right">
					<picker @change="onRegionChange" v-model="regionValue" mode="region">
						<view class="picker">
							<view v-if="regionValue.length">{{regionValue[0] + '/' +regionValue[1] + '/' +regionValue[2]}}</view>
							<view v-else style="color: #666666;">请选择省/市/区</view>
							<text class="iconfont icon-jinru"></text>
						</view>
					</picker>
				</view>
			</view>
			<view class="row">
				<view class="title">所在街道</view>
				<view class="right">
					<picker @change="onStreetChange" :value="streetValue" :range="streetList" range-key="name" mode="selector" :disabled="!regionValue[2]">
						<view class="picker">
							<view v-if="streetValue !== ''">{{streetList[streetValue].name}}</view>
							<view v-else style="color: #666666;">请选择街道</view>
							<text class="iconfont icon-jinru"></text>
						</view>
					</picker>
				</view>
			</view>

			<view class="row">
				<view class="title">详细地址</view>
				<view class="right textarea">
					<textarea placeholder="请输入详细地址" auto-height v-model="formData.address"></textarea>
					<view class="r" @tap="getLocation"><text class="iconfont icon-dingwei1"></text>定位</view>
				</view>
			</view>
			<!-- <view class="row">
				<view class="title">门牌号</view>
				<view class="right input"><input type="text" placeholder="请输入门牌号" maxlength="15" v-model="formData.houseNo"></view>
			</view> -->
			<view class="row mt20">
				<view class="title">设为默认</view>
				<view class="right default"><switch @change="switchChange" color="#01C30B" v-model="formData.defaultAddr" :checked="formData.defaultAddr" style="transform:scale(0.7)" /></view>
			</view>
		</view>

		<template slot="footer">
			<view class="footer-btn-group">
				<u-button text="删除" @click="handleDelete" v-if="editId"></u-button>
				<u-button text="保存" type="primary" @click="submitForm"></u-button>
			</view>
		</template>
	</zj-page-layout>
</template>

<script>
	import {getArea} from '@/common/utils/util.js';

	export default {
		data() {
			return {
				editId: null, // 编辑的id
				regionValue: [], // 省市区值
				streetList: [],
				streetValue: '',
				formData: { // 表单数据
					name: '',
					phone: '',
					province: '',
					city: '',
					area: '',
					street: '',
					address: '',
					// houseNo: '',
					defaultAddr: false,
				},
				canClickSave: true, // 能否点击提交
				clipboard: '',
			}
		},
		onLoad({id, addressData}) {
			this.editId = id;
			if(id) {
				uni.setNavigationBarTitle({
				　　title: '编辑地址'
				})
				this.getAddressData();
			}
			if(addressData) {
				addressData = JSON.parse(addressData);
				this.formData = {
					name: addressData.name,
					phone: addressData.phone,
					province: addressData.province,
					city: addressData.city,
					area: addressData.area,
					address: addressData.address,
					// houseNo: addressData.houseNo,
					defaultAddr: addressData.defaultAddr,
				}
				this.regionValue = [addressData.province, addressData.city, addressData.area];
				this.getStreetList();
			}
		},
		methods: {
			async getRegion(address) {
				const result = new Promise((resolve, reject) => {
					this.$api.post('/lbs/amap/region/query2', {
						address
					}).then(res => {
						resolve(res.data);
					})
				})
				return result;
			},

			async shibie() {
				// 莫阿宝，13686123158，广东省广州市天河区棠下街道天河软件园
				// console.log(this.smart(this.clipboard));
				const data = this.smart(this.clipboard);

				this.formData.name = data.name || '';
				this.formData.phone = data.phone || '';

				if(data.address) {
					let addressData = await this.getRegion(data.address);
					this.formData.province = addressData.provinceName || '';
					this.formData.city = addressData.cityName || '';
					this.formData.area = addressData.areaName || '';
					this.formData.address = data.address.replace(`${addressData.provinceName || ''}${addressData.cityName || ''}${addressData.areaName || ''}${addressData.name || ''}`, '') || '';
					this.regionValue = [addressData.provinceName || '', addressData.cityName || '', addressData.areaName || ''];
					addressData.name && this.getStreetList(addressData.name);
				}
			},

			smart(data) {
				data = this.stripscript(data); //过滤特殊字符

				let obj = {};
				let copyData = JSON.parse(JSON.stringify(data)).split(" ");

				copyData.forEach((item, index) => {
					if (item) {
						let addressObj = this.smartData(item);
						console.log(addressObj)

						obj = Object.assign(obj, addressObj);
					}
				});
				return obj;
			},

			smartData(data) {
				let smartObj = {};
				//address=  data.replace(/\s/g, ''); //去除空格

				// 手机号匹配（提取出手机号）
				let phone = data.match(/(86-[1][0-9]{10}) | (86[1][0-9]{10})|([1][0-9]{10})/g);

				// 如果存在手机号
				if (phone) {
					smartObj.phone = phone[0];

					if(data != phone[0]) {
						// 如果手机号是开头或结尾
						if(data.startsWith(phone[0]) || data.endsWith(phone[0])) {
							let remainData = data.replace(phone[0], ''); // 除了手机号，剩下的内容
							// 如果还有剩下的内容
							if(remainData) {
								if (new RegExp(/省|市|区/).test(remainData)) {
									smartObj.address = remainData;
								} else {
									smartObj.name = remainData;
								}
							}
						}

						// 如果手机号在中间
						else {
							let remainDatas = data.replace(phone[0], '&&').split('&&'); // 除了手机号，剩下的内容
							for(let i = 0; i < remainDatas.length; i++) {
								if(new RegExp(/省|市|区/).test(remainDatas[i])) {
									smartObj.address = remainDatas[i];
								}else {
									smartObj.name = remainDatas[i];
								}
							}
						}
					}
				}

				// 如果不存在手机号
				else {
					if (new RegExp(/省|市|区/).test(data)) {
						smartObj.address = data;
					}
					else {
						smartObj.name = data;
					}
				}

				return smartObj;
			},

			// 过滤特殊字符
			stripscript(s) {
				s = s.replace(/(\d{3})-(\d{4})-(\d{4})/g, "$1$2$3");
				s = s.replace(/(\d{3}) (\d{4}) (\d{4})/g, "$1$2$3");
				var pattern = new RegExp(
					"[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“’。，、？-]"
				);
				var rs = "";
				for (var i = 0; i < s.length; i++) {
					rs = rs + s.substr(i, 1).replace(pattern, " ");
				}
				rs = rs.replace(/[\r\n]/g, "");
				return rs;
			},

			// 获取地址信息
			getAddressData() {
				this.$api.get('/user/address/detail', {
					userAddressId: this.editId
				}).then(res => {
					this.formData = {
						name: res.data.name,
						phone: res.data.phone,
						province: res.data.province,
						city: res.data.city,
						area: res.data.area,
						address: res.data.address,
						// houseNo: res.data.houseNo,
						defaultAddr: res.data.defaultAddr,
					}
					this.regionValue = [res.data.province, res.data.city, res.data.area];
					this.getStreetList(res.data.street);
				})
			},


			// 地图选点
			getLocation() {
				let that = this;
				uni.chooseLocation({
				    success: function (res) {
				        console.log(res);
						let SSQ_value = getArea(res.address);
						if(!SSQ_value.Province) {
							SSQ_value.Province = SSQ_value.City;
						}
						that.formData.province = SSQ_value.Province;
						that.formData.city = SSQ_value.City;
						that.formData.area = SSQ_value.Country;
						let regionValue = [];
						regionValue.push(SSQ_value.Province);
						regionValue.push(SSQ_value.City);
						regionValue.push(SSQ_value.Country);
						that.regionValue = regionValue;
						that.formData.address = res.address.slice(res.address.indexOf(SSQ_value.Country) + SSQ_value.Country.length) + res.name;
						that.getStreetList();
						that.streetValue = '';
						that.formData.street = '';
				    },
					fail: function(res) {
						uni.getSetting({
							success: function(res) {
								if (!res.authSetting['scope.userLocation']) {
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												uni.openSetting({
													success: function(data) {
														if (data.authSetting["scope.userLocation"] === true) {
															that.$successToast('授权成功');
															setTimeout(() => {
																that.getLocation();
															}, 1000)
														}
													}
												})
											}
										}
									})
								}
							}
						})
					}
				});
			},

			// 切换省市区
			onRegionChange(e) {
				console.log(e.detail);
				this.regionValue = e.detail.value;
				this.formData.province = this.regionValue[0];
				this.formData.city = this.regionValue[1];
				this.formData.area = this.regionValue[2];
				this.getStreetList();
				this.streetValue = '';
			},

			// 获取街道列表
			getStreetList(street) {
				this.$api.get('/user/address/street', {
          province: this.regionValue[0],
          city: this.regionValue[1],
          area: this.regionValue[2],
				}).then(res => {
					this.streetList = res.data;
					if(street) {
						let index = this.findElem(this.streetList, 'name', street);
						this.streetValue = index;
						this.formData.street = street;
					}
				})
			},

			// 切换街道
			onStreetChange(e) {
				console.log(e.detail.value);
				this.streetValue = e.detail.value;
				this.formData.street = this.streetList[this.streetValue].name;
			},

			findElem(array, attr, val) {
			    for (var i = 0; i < array.length; i++) {
			        if (array[i][attr] == val) {
			            return i; //返回当前索引值
			        }
			    }
			    return -1;
			},

			switchChange(e) {
				console.log(e.detail.value);
				this.formData.defaultAddr = e.detail.value;
			},

			// 验证数据
			vailateData() {
				if(!this.formData.name) {
					this.$toast('请填写姓名');
					return false;
				}
				if(!this.formData.phone) {
					this.$toast('请填写手机号码');
					return false;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.formData.phone))) {
					this.$toast('请填写正确的手机号码');
					return false;
				}
				if(!this.formData.province) {
					this.$toast('请选择所在地区');
					return false;
				}
				if(!this.formData.street) {
					this.$toast('请选择所在街道');
					return false;
				}
				if(!this.formData.address) {
					this.$toast('请填写详细地址');
					return false;
				}
				return true;
			},

			// 提交表单
			submitForm() {
				if (!this.canClickSave) return false;
				this.canClickSave = false;
				setTimeout(() => { this.canClickSave = true }, 3000)
				if(!this.vailateData())return;

				let params = this.formData;
				params.userId = this.$store.state.user.userId;
				let url = '';
				if(this.editId) {
					params.userAddressId = this.editId;
					url = '/user/address/update';
				}else {
					url = '/user/address/save';
				}
				this.$api.post(url, params).then(res => {
					this.$successToast(this.editId? '编辑成功':'添加成功');
					this.$backPage(1, 1000);
				})
			},

			// 删除
			handleDelete() {
				this.$modal({
					content: '确定要删除该地址吗？',
				}).then(() => {
					this.$api.post('/user/address/del', {
						userAddressId: this.editId
					}).then(res => {
						this.$successToast('删除成功');
						this.$backPage(1, 1000);
					})
				}).catch(() => {})
			}
		}
	}
</script>

<style lang="scss">
	.form-container {
		.clipboard {
			padding: 20rpx;
			background: #FFFFFF;
			.box {
				background: #f5f5f5;
				::v-deep .u-textarea {
					background: none !important;
				}
				.btns {
					padding: 20rpx;
					display: flex;
					justify-content: flex-end;
					::v-deep .u-button {
						width: 100rpx;
						margin-left: 30rpx;
						margin-right: 0;
					}
				}
			}
		}
		.row {
			background: #FFFFFF;
			min-height: 88rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f5f5f5;
			.title {
				flex-shrink: 0;
				width: 160rpx;
				font-size: 28rpx;
				color: #333333;
			}
			.right {
				flex: 1;
				width: 0;
				input {
					font-size: 28rpx;
				}
				.picker {
					display: flex;
					align-items: center;
					justify-content: space-between;
					image {
						width: 16rpx;
						height: 28rpx;
					}
				}
			}
			.textarea {
				display: flex;
				justify-content: space-between;
				align-items: center;
				textarea {
					padding: 10rpx 0;
				}
				.r {
					display: flex;
					align-items: center;
					flex-shrink: 0;
					font-size: 24rpx;
					color: #666666;
					margin-left: 15rpx;
					.iconfont {
						font-size: 36rpx;
						color: #999999;
						margin-right: 4rpx;
					}
				}
			}
			.default {
				display: flex;
				justify-content: flex-end;
				switch {
					margin-right: -20rpx;
				}
			}
		}
	}
</style>