high-mini/physical-merchants/address/addNewAddress/addNewAddress.vue

<template>
	<view class="page-bottom-fixed backcor9" >
		<form @submit="form_submit" class="form-container">
			<view class="pd-main border-box height100" :style="'overflow-y: auto;transform: translateY(-0px);'" >
				<view class="form-gorup  backcolorfff">
					<view class="dis-flex">
						<view class="form-gorup-title marRight10">收货人:
						</view>
						<input type="text" name="name" v-model="userAddress.name" placeholder-class="corf6"
							class=" flex-1 bs-bb" placeholder="名字">
					</view>


					<view class="width100 mart10 border-b">

					</view>

					<view class="dis-flex">
						<view class="form-gorup-title marRight10">手机号码:
						</view>
						<input type="number" name="tel" v-model="userAddress.tel" maxlength="11"
							placeholder-class="corf6" class=" flex-1" placeholder="手机号">
					</view>


					<!--  -->
				</view>

				<view class="form-gorup backcolorfff">
					<view class="">
						<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
							<view class="dis-flex  ">
								<view class=" form-gorup-title">所在地区:</view>
								<view class="dis-flex flex-1 flex-end">
									<view class=" pickRes ">{{userAddress.region || '请选择'}}</view>
									<view class="icon-ymt to-right font14 fcor666"></view>
								</view>
							</view>

						</pick-regions>

					</view>

					<view class="width100 mart10  border-b">

					</view>


					<!-- <view style="clear: both;"> -->
						<view class="dis-flex scrol-t mart10">
							<view class="form-gorup-title marRight10">详细地址:</view>
							
							<uni-combox :height="height" @focus="focusMethod" @blur="blurMethod" :cursorSpacing="50" placeholderClass="corf6" :candidates="candidates" class="flex-1" :isAddress="true" :isShowIcon="false" placeholder="请输入详细地址" v-model="userAddress.address">
								
									<view  class="selector-item" v-for="(item,index) in candidates"  :key="index" @click="getSelect(item)">
										<view class="text1 name">
											{{item.name}}
										</view>
										<view class="text1 address mart5">
											{{item.address}}
										</view>
									</view>
								
								
							</uni-combox>
							<!-- <input type="text" name="address" v-model="userAddress.address" maxlength="40"
								placeholder-class="corf6" :class="'fcor666 bs-bb flex-1'" placeholder="详细地址1~40个字符"> -->
						</view>
						

					<!-- </view> -->

				</view>

				<view class="default-checkbox " @click="defaultChange">
					<radio :checked="userAddress.is_default" style="transform:scale(1.1)" color="#FF1A34" />
					<text class="font18">设为默认地址</text>
				</view>

				
			</view>

			<view class="bottom-fixed ">
				<button class="btn " type="default" form-type="submit">保存</button>
			</view>

		</form>

	</view>
</template>
<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import UniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
	
	import {
		insertDeliveryAddress,
		findDeliveryAddressById,
		updateDeliveryAddress,
		baiduApiMapSearch
	} from '@/Utils/physicalObject.js'
	let app = getApp();
	export default {
		data() {
			return {
				userAddress: {
					name: "",
					tel: "",
					region: '',
					address: "",
					is_default: false,
					
				},
				dataParams: null,
				// 
				region: [],
				regionId: '',
				//没用上
				// defaultRegion: ['北京市', '市辖区', '东城区'],
				defaultRegionCode: '',
				
				candidates:[
					// {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",},
					// {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",},
					// {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",}
				],
				top:0,
				top1:0,
				height:0,


			};
		},

		components: {
			pickRegions,
			"uni-combox":UniCombox

		},

		onLoad(params) {
			// console.log(params)
			this.dataParams = params
		},
		watch: {
			'userAddress.name': {
				handler(n) {
					if (n.length > 5) {
						setTimeout(() => {
							this.userAddress.name = this.userAddress.name.substr(0, 5)
						}, 0)
					}
				},
			},
		},
		computed: {

			// regionName() {
			// 	// 转为字符串
			// 	// console.log('==============='+this.region.map(item => item))
			// 	// this.userAddress.region = this.region.map(item => item.name).join(',')
			// 	return this.region.map(item => item.name).join(',')
			// }
		},
		onReady() {
			let str = ""
			if (this.dataParams && this.dataParams.id) {
				str = "地址编辑"
			} else {
				str = "地址添加"
			}
			uni.setNavigationBarTitle({
				title: str,
			});
			if (this.dataParams && this.dataParams.id) {
				this.findAddressById(this.dataParams.id)
			}

		},

		
		async mounted() {
		await	this.getRect('.scrol-t').then(res => {
			       
					this.top = res.top;
					
			        })
				await	this.getRect('.bottom-fixed').then(res => {
					        
							this.top1 = res.top;
							
					        }) 
							
							this.height = this.top1 - this.top - 120;
							
							// console.log(this.top1,this.top,this.height)
		},

		methods: {
			
			focusMethod(){
				
				
			},
			blurMethod(){
				
				this.baiduApiMap(this.userAddress.address)
			},
			getRect(selector, all) {
			            return new Promise(resolve => {
			                uni.createSelectorQuery()
			                    .in(this)
			                    [all ? 'selectAll' : 'select'](selector)
			                    .boundingClientRect(rect => {
			                        if (all && Array.isArray(rect) && rect.length) {
			                            resolve(rect);
			                        }
			                        if (!all && rect) {
			                            resolve(rect);
			                        }
			                    })
			                    .exec();
			            });
			        },
			findAddressById(id) {
				let params = {
					id: id
				}
				findDeliveryAddressById(params).then(res => {
					if (res.return_code == '000000') {
						let resData = res.return_data;
						this.userAddress = {
							name: resData.consignee,
							tel: resData.phone,
							region: resData.regionName,
							address: resData.address,
							is_default: resData.whetherDefault,
						}
						// console.log(this.defaultRegionCode)
						this.defaultRegionCode = resData.regionId;
						this.regionId = resData.regionId;
						// console.log(this.defaultRegionCode)

					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},

			// 获取选择的地区
			handleGetRegion(region) {
				
				// let region = JSON.parse(JSON.stringify(reg))
				this.region = region;
				this.regionId = this.region[2].code;
				if (region[0].code == region[1].code && region[0].code == region[2].code) {
					this.userAddress.region = this.region[0].name
				} else {
					this.userAddress.region = this.region.map(item => item.name).join(',');
				}

				// console.log(this.userAddress.region, "获取选择的地区", this.regionId, this.region)
			},
			// 获取数据
			init() {

			},
			
			//监听详细地址的onInput事件
			location(n){
				// this.userAddress.address = this.userAddress.address.replace(/\s+/g, "")
			},
			
			
			baiduApiMap(query){
				query = query.replace(/\s+/g, "")
				let params={
					query:query
				}
				// console.log(params,"params")
				baiduApiMapSearch(params).then(res=>{
					
					console.log(res)
					if (res.return_code == '000000') {
					                    
					    if(res.return_data&&res.return_data.length>0){
							this.candidates = res.return_data;
							
					    }else{
							this.candidates=[]
						}
					
					}else{
						this.candidates=[]
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
					
				})
			},
			// 点击获取的详细地址
			getSelect(desc){
				
				// console.log(desc)
				this.defaultRegionCode = desc.adcode ;
				this.userAddress.address = desc.address;
				uni.showToast({
					icon:'none',
					title:"所在地区同步修改"
				})
			},

			// 默认地址设置改变
			defaultChange(e) {
				this.userAddress.is_default = !this.userAddress.is_default
			},



			// 数据提交
			form_submit() {

				this.userAddress.name = this.userAddress.name.replace(/\s+/g, "")
				this.userAddress.tel = this.userAddress.tel.replace(/\s+/g, "")
				this.userAddress.address = this.userAddress.address.replace(/\s+/g, "")
				// 数据校验
				var validation = [{
						fields: "name",
						msg: "请填写联系人"
					},
					{
						fields: "tel",
						msg: "请填写联系电话",
						vali: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					},
					{
						fields: "region",
						msg: "请选择省市区"
					},
					{
						fields: "address",
						msg: "请填写详细地址"
					}
				];

				this.fields_check(this.userAddress, validation)

				let isVali = this.fields_check(this.userAddress, validation);
				if (isVali) {
					if (this.dataParams.id) {
						this.updateAddress(this.dataParams.id)
					} else {
						this.addAddress()
					}


				}

			},
			updateAddress(id) {
				let _this = this;
				let params = {
					"id": id,
					"address": _this.userAddress.address,
					"consignee": _this.userAddress.name,
					"phone": _this.userAddress.tel,
					"regionId": _this.regionId,
					"regionName": _this.userAddress.region,
					"whetherDefault": _this.userAddress.is_default
				}
				updateDeliveryAddress(params).then(res => {
					let title;
					if (res.return_code == '000000') {
						title = res.return_data;
					} else {
						title = res.return_msg;
					}
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 2000
					})
					//调用上一个页面中的方法
					this.backPageRefresh();
				})
			},
			backPageRefresh() {
				uni.navigateBack({})
			},
			addAddress() {
				let _this = this;
				let params = {
					"address": _this.userAddress.address,
					"consignee": _this.userAddress.name,
					"phone": _this.userAddress.tel,
					"regionId": _this.regionId,
					"regionName": _this.userAddress.region,
					"whetherDefault": _this.userAddress.is_default
				}
				// console.log(params,this.userAddress)
				insertDeliveryAddress(params).then(res => {
					let title;
					if (res.return_code == '000000') {
						title = res.return_data;
					} else {
						title = res.return_msg;
					}
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 2000
					})

					//调用上一个页面中的方法
					_this.backPageRefresh()


				})
			},

			/**
			 * 字段数据校验
			 * data           待校验的数据, 一维json对象
			 * validation     待校验的字段, 格式 [{fields: 'mobile', msg: '请填写手机号码', is_can_zero: 1(是否可以为0)}, ...]
			 */
			fields_check(data, validation) {

				for (var i in validation) {
					var temp_value = data[validation[i]["fields"]];
					if (!temp_value) {
						uni.showToast({
							title: validation[i]['msg'],
							duration: 1000,
							icon: 'none'
						});
						return false;
					}

					if (validation[i]["vali"]) {
						// console.log(validation[i]["vali"].test(this.userAddress.tel),this.userAddress.tel)
						if (!(validation[i]["vali"].test(this.userAddress.tel))) {
							uni.showToast({
								title: "请输入正确格式的手机号码",
								duration: 1000,
								icon: 'none'
							});
							return false;
						}
					}

				}
				return true;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.padding-main {
		padding: 20rpx;
	}

	.bottom-fixed {
		position: fixed;
		left: 10%;
		bottom: var(--window-bottom);
		border: none;
		width: 80%;
		box-sizing: border-box;
		z-index: 2;

		.btn {
			height: 60px;
			border-radius: 30px;
			background-color: #3da7e7;
			margin-bottom: 15px;
			color: #ffffff;
			line-height: 60px;
			font-size: 18px;
		}
	}


	.page-bottom-fixed {
		height: calc(100vh - var(--window-top));
		padding-bottom: 75px;
		box-sizing: border-box;
		overflow-y: auto;
	}

	/*表单*/
	.form-container {
		height: 100%;
		/* display: flex;
		flex-direction: column; */
		.form-gorup {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			// overflow: auto;

			.pickRes,
			input {
				border-radius: 0;
				box-sizing: border-box;
				font-size: 18px;
				// height: 30px;
				// min-height: 60px;
				// line-height: 30px;
				// padding: 8px 0;
			}

		}

		.form-gorup-title {
			padding: 20rpx 0;
			margin-bottom: 5rpx;
			font-weight: 500;
			font-size: 18px;
			width: 74px;
			white-space: nowrap;
			text-align: right;
		}
	}

	.form-gorup-item-left {
		float: left;
		padding-right: 20rpx;
	}

	.form-group-tips-must {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #f00;
	}
	
	
	.selector-item {
		
		font-size: 16px;
		text-align: center;
		border-bottom: solid 1px #DDDDDD;
		padding: 10px;
		cursor: pointer;
		text-align: left;
		.name{
			height: 18px;
			line-height: 18px;
			color: #3da7e7;
			font-size: 16px;
			font-weight: bold;
			
		}
		.address{
			font-size: 14px;
			height: 16px;
			line-height: 16px;
			color: #666666;
			
		}
	}
	
</style>