sct/pagesT/address/addressManage.vue

<template>
	<view :class="['qn-page-' + theme]" class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<!-- #ifdef MP -->
			<input class="input" type="number" @input="mobileInput" :value="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
			<!-- #endif -->
		</view>
		<!-- <view class="row b-b">
			<text class="tit">地址</text>
			<text @click="chooseLocation" class="input">
				{{addressData.addressName}}
			</text>
			<text class="yticon icon-shouhuodizhi"></text>
		</view> -->

		<RegionSel @getRegionName="getRegionName" @pickerRegionChange="pickerRegionChange" :provinceCode="provinceCode" :cityCode="cityCode" :districtCode="districtCode">
			<view class="row b-b clearfix" style="border-bottom:1rpx solid #E4E7ED;">
				<view class="tit float_left">地址</view>
				<view class="float_right">
					<span v-if="region_name" style="font-size: 28rpx;">{{ region_name }}</span>
					<span v-else style="color: #999;font-size: 28rpx;">请选择</span>
				</view>
			</view>
		</RegionSel>
		<view class="row b-b">
			<text class="tit">门牌号</text>
			<input class="input" type="button" v-model="addressData.address" placeholder="楼号、门牌" placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="defaule" color="#45A418" @change="switchChange" />
		</view>

		<button class="add-btn primary-bg" @click="confirm">提交</button>
	</view>
</template>

<script>
import RegionSel from '../components/region/RegionSel.vue';
export default {
	components: {
		RegionSel
	},
	data() {
		return {
			provinceCode: 0,
			cityCode: 0,
			districtCode: 0,
			region_name: '',
			// 地址部分
			height: '500px',
			address: [],
			defaule: false,
			// 修改地址的id
			coustrom_id: '',
			manageType: '', //路由地址
			addressData: {
				name: '',
				mobile: '',
				defaultStatus: 4,
				provinceCode: '',
				cityCode: '',
				districtCode: '',
				addressName: '',
				address: '',
				area: ''
			}
		};
	},
	onLoad(option) {
		// 获取当前是增加页面还是编辑
		this.manageType = option.type;
		if (this.manageType != 'add') {
			this.coustrom_id = this.manageType;
			this.getShippingAddressInfo();
			uni.setNavigationBarTitle({
				title: '修改地址'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '新增地址'
			});
		}
	},
	methods: {
		mobileInput(e) {
			// #ifdef MP
			let val = e.detail.value;
			if (val.length === 3 || val.length === 8) {
				val += ' ';
			}
			this.$nextTick(() => {
				this.addressData.mobile = val;
			});
			// #endif
		},
		switchChange(val) {
			// 添加地址传
			this.defaule = val.detail.value;
			if (this.defaule) {
				this.addressData.defaultStatus = 5;
			} else {
				this.addressData.defaultStatus = 4;
			}
		},
		getRegionName(name) {
			this.region_name = name;
		},
		pickerRegionChange(row) {
			this.addressData.provinceCode = row[0].value;
			this.addressData.cityCode = row[1].value || '';
			this.addressData.districtCode = row[2].value || '';
			this.region_name = row[0].label + (row[1].label ? '-' + row[1].label + (row[2].label ? '-' + row[2].label : '') : '');
		},
		// 点击提交Annie
		confirm() {
			if (this.coustrom_id) {
				this.updateShippingAddress();
			} else {
				this.addShippingAddress();
			}
		},
		//添加
		addShippingAddress() {
			if (!this.addressData.name) {
				this.$api.msg('请填写收货人姓名');
				return;
			}
			const mobile = this.$_utils.mobileRe(this.addressData.mobile);
			if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(mobile)) {
				this.$api.msg('请输入正确的手机号码');
				return;
			}
			if (!this.addressData.address) {
				this.$api.msg('请填写门牌号信息');
				return;
			}
			// 发送请求

			this.$u.api
				.addShippingAddress({
					...this.addressData,
					mobile: mobile,
					defaultStatus: this.defaule ? 5 : 4
				})
				.then(res => {
					this.$api.msg('添加成功');
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
				});
		},
		// 获取地址的详情
		getShippingAddressInfo() {
			this.$u.api.getShippingAddressInfo(this.coustrom_id).then(data => {
				this.addressData = data.data;
				this.addressData.mobile = this.$_utils.mobileFormat(data.data.mobile);
				this.provinceCode = this.addressData.provinceCode;
				this.cityCode = this.addressData.cityCode;
				this.districtCode = this.addressData.districtCode;
				// 获取地址显示页面
				this.defaule = data.data.defaultStatus === 5;
			});
		},
		// 修改地址
		updateShippingAddress() {
			if (!this.addressData.name) {
				this.$api.msg('请填写收货人姓名');
				return;
			}
			const mobile = this.$_utils.mobileRe(this.addressData.mobile);
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(mobile)) {
				this.$api.msg('请输入正确的手机号码');
				return;
			}
			// if(!addressData.addressName){
			// 	this.$api.msg('请选择所在位置');
			// 	return;
			// }
			if (!this.addressData.address) {
				this.$api.msg('请填写门牌号信息');
				return;
			}

			this.$u.api
				.updateShippingAddress(this.coustrom_id, {
					name: this.addressData.name,
					mobile: mobile,
					provinceCode: this.addressData.provinceCode,
					cityCode: this.addressData.cityCode,
					districtCode: this.addressData.districtCode,
					address: this.addressData.address,
					defaultStatus: this.addressData.defaultStatus
				})
				.then(res => {
					this.$api.msg('修改成功');
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
		color: $font-color-dark;
	}

	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}

	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}

.default-row {
	margin-top: 16upx;

	.tit {
		flex: 1;
	}

	switch {
		transform: translateX(16upx) scale(0.9);
	}
}

.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	border-radius: 10upx;
}
.add-btn:after {
	border: 0 none;
}
</style>