medicine-xcx/pages/my/address/addressEdit.vue

<template>
	<view class="wrap flex-1">
		<view class="top">
			<u-form :model="form"  ref="uForm">
				<u-form-item prop="name" :border-bottom="false">
					<view class="item">
						<view class="left">收货人</view>
						<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="form.name" />
					</view>
				</u-form-item>
				<u-form-item prop="phone" :border-bottom="false">
					<view class="item">
						<view class="left">手机号码</view>
						<input type="text" placeholder-class="line" maxlength="11" placeholder="请填写收货人手机号" v-model="form.phone" />
					</view>
				</u-form-item>
				<u-form-item prop="shippingAddress" :border-bottom="false">
					<view class="item" @tap="showRegionPicker">
						<view class="left">所在地区</view>
						<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" v-model="form.shippingAddress" />
					</view>
				</u-form-item>
				<u-form-item prop="addressDetail" :border-bottom="false">
					<view class="item address">
						<view class="left">详细地址</view>
						<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="form.addressDetail" />
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right"><u-switch active-color="#01AEEA" v-model="form.defaultFlag" /></view>
			</view>
		</view>
		
		<view class="p-l-20 p-r-20">
			<view class="m-b-20">
				<u-button type="primary" shape="circle" @click="save">保存</u-button>
			</view>
			<u-button type="error" shape="circle" @click="delShow = true" v-if="options.type == 'edit'">删除</u-button>
		</view>
		
		<u-picker mode="region" ref="uPicker" v-model="show" @confirm="getSelectAddress"/>
		
		<u-modal v-model="delShow" show-cancel-button confirm-color="#fa3534" @confirm="delAddress" content="您确定要删除该地址吗？" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				id: '',
				addressDetail: '',
				defaultFlag: false,
				name: '',
				phone: '',
				shippingAddress: '',
			},
			rules: {
				name: [
					{
						message: '请输入收货人',
					},
					{
						validator: (rule, value, callback) => {
							let username = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,99}$/;
							return username.test(value);
						},
						message: '请输入正确格式的收货人',
						trigger: ['blur','change']
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur']
					},
					{
						message: '请输入正确格式的手机号码',
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						}
					}
				],
				shippingAddress: [
					{
						required: true, 
						message: '请选择所在地区',
						trigger: ['change', 'blur']
					}
				],
				addressDetail: [
					{
						required: true, 
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}
				],
			},
			show: false,
			delShow: false,
			options: {},
			checked: false,
			id:null,
			uid: null
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(options) {
		// 判断是从那来的 默认首页
		
		if(Object.keys(options).length>0){
			uni.setNavigationBarTitle({
				title: options.title
			})
			let info = options.info && JSON.parse(decodeURIComponent(options.info))
			this.options = { ...options, info}
			for (let key in this.form) {
				this.form[key] = info[key]
			}
		}
		// if(Object.keys(options).length>0){
		// 	const info = JSON.parse(options.info)
		// 	console.log(info);
		// 	this.name= info.name; 
		// 	this.phone= info.phone;
		// 	this.address= info.shippingAddress;
		// 	this.address_detele= info.addressDetail;
		// 	this.checked= info.defaultFlag == 0? false: true;
		// 	this.id = info.id;
		// }
		
	},
	methods: {
		save() {
			const that = this
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(that.options)
					if(that.options.type === 'add' || that.options.type === 'setting') {
						that.add();
					}else {
						that.edit();
					}
				} else {
					console.log(that.options)
					console.log('验证失败');
				}
			});
			
		},
		edit() {
			uni.showLoading({
				title: '保存中...'
			})
			let params = { ...this.form, defaultFlag: this.form.defaultFlag ? 1 : 0, id: this.options.info.id}
			this.$api('editAddress',params).then(res => {
				let { code, result, message } = res
				uni.hideLoading()
				if(code == 200) {
					uni.$emit('editAddress', params)
					this.$Toast(message);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					},1500)
				}else{
					this.$Toast(message);
				}
			}).catch(err => {
				uni.hideLoading()
				this.$Toast(err.message);
			})
		},
		add () {
			uni.showLoading({
				title: '保存中...'
			})
			let params = { ...this.form, defaultFlag: this.form.defaultFlag ? 1 : 0}
			delete params.id;
			this.$api('addAddress', params).then(res => {
				let { code, result, message } = res
				uni.hideLoading()
				if(code == 200) {
					if (this.options.type === 'add') {
						uni.$emit('addAddress')
					} else if (this.options.type === 'setting') {
						uni.$emit('uploadAddress')
					}
					this.$Toast(message);
					const pageList = getCurrentPages();
					if(pageList.length == 1 && pageList.length == 2) {
						setTimeout(()=> {
							uni.switchTab({
								url: '/pages/home/home'
							})
						},1000)
					}else{
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						},1000)
					}
					
				}else{
					this.$Toast(message);
				}
			}).catch(err => {
				uni.hideLoading()
				this.$Toast(err.message);
			})
		},
		getSelectAddress(res) {
			console.log(res)
			this.form.shippingAddress = res.province.label+'-'+res.city.label+'-'+res.area.label;
		},
		delAddress () {
			let params = { ...this.form, isDel: 1, id: this.options.id}
			this.$api('deleteAddress', params).then(res => {
				let { code, result, message } = res
				if(code == 200) {
					uni.$emit('delAddress', params)
					this.$Toast(message);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					},1500)
				}else{
					this.$Toast(message);
				}
			}).catch(err => {
				console.log(err);
				this.$Toast(err.message);
			})
		},
		showRegionPicker() {
			this.show = true;
		}
	}
};
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item{
		padding: 0 !important;
		margin: 0 !important;
	}
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		padding: 40rpx;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
</style>