high-mini/pages/address/addNewAddress/addNewAddress.vue

<template>
	<view class="page-bottom-fixed backcor9">
		<form @submit="form_submit" class="form-container">
			<view class="pd-main height100">
				<view class="form-gorup  backcolorfff">
					<view class="form-gorup-item-left">
						<view class="form-gorup-title marb10">联系人<text class="form-group-tips-must">*</text></view>
						<input type="text" name="name" v-model="userAddress.name" maxlength="5"
							placeholder-class="fcor666" class="fcor666 " placeholder="联系人2~5个字符">
					</view>
					<view class="form-gorup-item-right">
						<view class="form-gorup-title marb10">联系电话<text class="form-group-tips-must">*</text></view>
						<input type="number" name="tel" v-model="userAddress.tel" maxlength="11"
							placeholder-class="fcor666" class="fcor666" placeholder="手机号">
					</view>
				</view>

				<view class="form-gorup backcolorfff">

					<!-- <view> -->
						<!-- <view class="form-gorup-title">省市区<text class="form-group-tips-must">必选</text></view> -->
						<!-- <view class="dis-flex flex-sp" @click="chooseAddress">
							<input type='text' placeholder='请选择地址' :disabled="true" name='region'
								:value='userAddress.region' class="fcor666 flex-1">
							<view class="icon-ymt to-right font14 fcor666">

							</view>
							
							
							
						</view> -->
						<!--  -->
						<view class="">
							<pick-regions :defaultRegion="defaultRegionCode"  @getRegion="handleGetRegion">
								<view class="dis-flex flex-sp form-gorup-title">
									<view class=" flex-1">点击选择省市区<text class="form-group-tips-must">必选</text></view>
									<!-- <input type='text' placeholder='请选择地址' :disabled="false" name='region'
										v-model='userAddress.region' class=" flex-1 fcor333" placeholder-class="fcor333" style="font-size: 16px;">
										 -->
									<view class="icon-ymt to-right font14 fcor666">
									
									</view>
								</view>
								
							</pick-regions>
							<view class="font15 fcor666" style="height: 20px;line-height: 20px;">{{userAddress.region || '请选择'}}</view>
						</view>
						

					<!-- </view> -->

					<view style="clear: both;">
						<view class="form-gorup-title">详细地址<text class="form-group-tips-must">*</text>

						</view>
						<input type="text" name="address" v-model="userAddress.address" maxlength="40"
							placeholder-class="fcor666" :class="'fcor666 bs-bb '" placeholder="详细地址1~40个字符">

					</view>

				</view>

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

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


		</form>
		
	</view>
</template>
<script>
	
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	
	import {insertDeliveryAddress,findDeliveryAddressById,updateDeliveryAddress } from '@/Utils/physicalObject.js'
	export default {
		data() {
			return {
				userAddress: {
					name: "",
					tel: "",
					region: '',
					address: "",
					is_default: false,
				},
				dataParams: null,
				// 
				region: [],
				regionId:'',
				//没用上
				defaultRegion: ['北京市', '市辖区', '东城区'],
				defaultRegionCode: '120101',
				
			
			};
		},

		components: {
			pickRegions

		},

		onLoad(params) {
			this.dataParams = params
		},
		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() {
			uni.setNavigationBarTitle({
			    title: '地址'+(((this.dataParams.id || null) == null) ? '添加' : '编辑')
			});
			if(this.dataParams.id){
				this.findAddressById(this.dataParams.id)
			}

		},



		methods: {
			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) {
				this.region = region;
				this.userAddress.region = this.region.map(item => item.name).join(',');
				this.regionId = this.region[2].code;
				console.log(this.userAddress.region,"获取选择的地区")
			},
			// 获取数据
			init() {
				
			},
			
			


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



			// 数据提交
			form_submit() {
				// 数据校验
				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() {
				let pages = getCurrentPages(); // 当前页面        
				let beforePage = pages[pages.length - 2]; // 上一页        
				uni.navigateBack({
					success:function(){
						beforePage.$vm.initData();
						// console.log("返回成功!");
					}
				})
			},
			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: 0;
		bottom: 0;
		border: none;
		width: 100%;
		box-sizing: border-box;
		z-index: 2;
	}

	.page-bottom-fixed {
		height: 100vh;
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}

	/*表单*/
	.form-container {
		height: 100%;

		.form-gorup {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: auto;

			input {
				border-radius: 0;
				box-sizing: border-box;
				font-size: 28rpx;
				height: 70rpx;
				line-height: 70rpx;
			}

		}

		.form-gorup-title {
			padding: 20rpx 0;
			margin-bottom: 5rpx;
			font-weight: 500;
			font-size: 16px;
		}
	}

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

	.form-group-tips-must {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #f00;
	}

	/*
   * 三级联动
   */
	// .select-address {
	//     box-sizing: border-box;
	//     height: 70rpx;
	//     line-height: 70rpx;
	//     padding: 0 10rpx;
	//  height: auto;
	//  overflow: auto;
	//  .fl{
	//  		   float: left;
	//  }
	// }
	// .select-address .section {
	//     width: 33.33%;
	//     box-sizing: border-box;

	// }
	// .select-address .section:not(:first-child) {
	//     padding: 0 5rpx;
	// }

	/**
    * 地址信息
    */
	// .default-checkbox image {
	//     width: 35rpx;
	//     height: 35rpx !important;
	// }
	// .address-value {
	//     padding-right: 110rpx;
	// }
	// .map-icon {
	//     bottom: 0;
	//     right: 0;
	//     width: 90rpx;
	//     height: 80rpx;
	//     line-height: 80rpx;
	// }
	// .auto-discern {
	//     bottom: 20rpx;
	//     right: 20rpx;
	//     z-index: 2;
	// }
	// .auto-discern button {
	//     line-height: inherit;
	//     padding: 5rpx 20rpx !important;
	// }

	/*
   * 身份信息
   */
	// .idcard-container {
	//     background: #e6e6e6;
	// }
	// .idcard-container .form-upload-data .item image {
	//     width: 256rpx;
	//     height: 170rpx;
	//     border: 1px dashed #c2c2c2;
	// }
</style>