jzmall_uni/pages/ucenter/addressAdd/addressAdd.vue

<template>
	<view class="add-address">
		<view class="add-form">
			<view class="form-item">
				<view class="label">联系人</view>
				<view class="content special-content">
					<input class="input" @input="bindinputName" placeholder="姓名" :value="address.name" auto-focus
						placeholder-style="color:#999;font-size:26rpx;" />
					<view class="gender-wrapper">
						<view class="male" @tap="maleSelect">
							<image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-select.png" mode="aspectFit"
								v-if="gender == 1"></image>
							<image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-unselect.png" mode="aspectFit"
								v-else></image>
							<text>先生</text>
						</view>
						<view class="female" @tap="femaleSelect">
							<image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-select.png" mode="aspectFit"
								v-if="gender == 2"></image>
							<image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-unselect.png" mode="aspectFit"
								v-else></image>
							<text>女士</text>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">电 话</view>
				<view class="content">
					<input class="input" @input="bindinputMobile" :value="address.tel" type="number" placeholder="手机号码"
						maxlength="11" placeholder-style="color:#999;font-size:26rpx;" />
				</view>
			</view>
			<view class="form-item" @tap="goMap">
				<view class="label">地址</view>
				<view class="content" style="flex-direction: column; align-items: flex-start; justify-content: center">
					<text class="name">{{ address.addressName }}</text>
					<text class="detail">{{ address.address }}</text>
				</view>

				<image src="/static/images/arrow.png" style="width: 12rpx; height: 20rpx; margin-right: 10rpx"></image>
			</view>
			<view class="form-item">
				<view class="label">门牌号</view>
				<view class="content">
					<input class="input" @input="bindinputAddress" maxlength="20" :value="address.detail"
						placeholder="例：9号楼1505室" placeholder-style="color:#999;font-size:26rpx;" />
				</view>
			</view>
		</view>

		<view class="form-default">
			<view class="switch-wrapper">
				<text class="title">设为默认地址</text>
				<switch class="switch" color="#00C0FF" :checked="address.isDefault == 1" @change="bindIsDefault" />
			</view>
		</view>
		<view class="des">*每次下单会默认推荐使用该地址</view>
		<view class="btns" v-if="address.id > 0">
			<!-- <button class="cannel" bindtap="cancelAddress">取消</button> -->
			<button class="cannel" :data-address-id="address.id" @tap="deleteAddress">删除地址</button>
			<button class="save" @tap="saveAddress">确认修改</button>
		</view>
		<view v-else class="btns add-btn">
			<button class="save" @tap="saveAddress">保存地址</button>
		</view>
	</view>
</template>

<script>
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	var check = require('../../../utils/check.js');
	var area = require('../../../utils/area.js');
	var map = require('../../../utils/map.js');
	var app = getApp();
	export default {
		data() {
			return {
				overDistinctTips1: false,
				overDistinctTips2: false,
				gender: '1',
				selectAddress: '',
				isChange: 0,

				address: {
					id: 0,
					areaCode: 0,
					address: '',
					name: '',
					tel: '',
					isDefault: 0,
					province: '',
					city: '',
					county: '',
					latitude: '',
					longitude: '',
					addressDetail: '',
					detail: '',
					addressName: ''
				},

				addressId: 0,
				openSelectRegion: false,

				selectRegionList: [{
						code: 0,
						name: '省份'
					},
					{
						code: 0,
						name: '城市'
					},
					{
						code: 0,
						name: '区县'
					}
				],

				regionType: 1,
				regionList: [],
				selectRegionDone: false,
				addressShow: false
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			//console.log(options)
			if (options.id && options.id != 0) {
				this.setData({
					addressId: options.id
				});
				this.getAddressDetail();
			}
			app.globalData.mapSelectFinish = false;

			//地址授权
			map.getUserLocation()
				.then(() => {})
				.catch(() => {
					uni.showToast({
						title: '授权失败 无法新增地址',
						icon: 'none',
						duration: 1000
					});
				});
		},
		onShow: function() {
			let that = this;
			if (app.globalData.mapSelectFinish) {
				let poi = app.globalData.mapSelectPoi;
				let location = poi.location;
				let address = that.address;
				address.lng = location.split(',')[0];
				address.lat = location.split(',')[1];
				address.addressName = poi.name;
				address.address = poi.address;
				address.areaCode = poi.areaCode;
				address.province = poi.province;
				address.city = poi.city;
				address.county = poi.county;
				if (!address.city) {
					that.getAreaCode(address.lat, address.lng)
						.then((res) => {
							address.areaCode = res.areaCode;
							address.province = res.province;
							address.city = res.city;
							address.county = res.county;
							that.setData({
								address: address,
								selectAddress: poi.address
							});
						})
						.catch(() => {
							uni.showToast({
								title: '获取地区码失败',
								icon: 'none',
								duration: 3000
							});
						});
				} else {
					that.setData({
						address: address,
						selectAddress: poi.address
					});
				}
			} else {
				//这里分2种情况 1，有城市 标识选中原有地址进来 保持不变
				//2，新增地址 初始化进入此页面时 需要调用getlocation2
				if (that.addressId) {
					return;
				} //从已有地址进入

				map.getLocation2().then(() => {
					that.getAreaCode(app.globalData.lat, app.globalData.lng)
						.then((res) => {
							res.isDefault = that.address.isDefault;
							// console.log('globalData',app.globalData.lat,app.globalData.lng)
							// console.log('areaCode',res)
							that.setData({
								address: res,
								selectAddress: res.address
							});
						})
						.catch((err) => {
							uni.showToast({
								title: '获取地区码失败',
								icon: 'none',
								duration: 3000
							});
						});
				});
			}
		},
		onHide: function() {
			// 页面隐藏
		},
		onUnload: function() {
			// 页面关闭
			// chooseLocation.setLocation(null);
		},
		methods: {
			onOverDiaClose() {
				this.setData({
					overDistinctTips1: false,
					overDistinctTips2: false
				});
			},

			continueModifyAddress() {
				//继续修改地址
				console.info(this.overDistinctTips1);
				if (this.overDistinctTips1) {
					this.setData({
						overDistinctTips1: false,
						overDistinctTips2: true
					});
				} else {
					this.setData({
						overDistinctTips2: false
					});
					this.submitAddress();
				}
			},

			bindinputMobile(event) {
				let address = this.address;
				address.tel = event.detail.value;
				this.setData({
					address: address
				});
			},

			bindinputName(event) {
				let address = this.address;
				address.name = event.detail.value;
				this.setData({
					address: address
				});
			},

			bindinputAddress(event) {
				let address = this.address;
				address.detail = event.detail.value.replace(/[,，]/g, '');
				this.setData({
					address: address
				});
				// return value.replace(/[,，]/g,'');
			},

			bindAddressDetail(event) {
				let address = this.address;
				address.address = event.detail.value.replace(/[,，]/g, '');
				this.setData({
					address: address
				});
			},

			bindIsDefault() {
				let address = this.address;
				address.isDefault = !address.isDefault;
				this.setData({
					address: address
				});
			},

			getAddressDetail() {
				let that = this;
				util.request(api.AddressDetail, {
					id: that.addressId
				}).then(function(res) {
					if (res.errno === 0) {
						if (res.data) {
							that.setData({
								address: res.data,
								gender: res.data.gender
							});
							let addressDetailList = res.data.addressDetail.split(',');
							let address = that.address;
							address.address = addressDetailList[0];
							address.detail = addressDetailList.length > 1 ? addressDetailList[1] : '';
							address.address = addressDetailList.length > 1 ? addressDetailList[0] : '';
							that.setData({
								address: address,
								selectAddress: addressDetailList[0]
							});
						}
					}
				});
			},

			cancelAddress() {
				uni.navigateBack();
			},

			saveAddress() {
				console.log(this.address);
				let address = this.address;
				if (address.name == '' || address.name == undefined) {
					util.showErrorToast('请输入姓名');
					return false;
				}
				if (this.gender == null || this.gender == '') {
					util.showErrorToast('请选择性别');
					return false;
				}
				if (address.tel == '' || address.tel == undefined) {
					util.showErrorToast('请输入手机号码');
					return false;
				}
				if (address.areaCode == 0) {
					util.showErrorToast('请输入省市区');
					return false;
				}
				if (address.address == '') {
					util.showErrorToast('请输入详细地址');
					return false;
				}
				if (address.detail == '' || address.detail == undefined) {
					util.showErrorToast('请输入门牌号');
					return false;
				}
				if (!check.isValidPhone(address.tel)) {
					util.showErrorToast('手机号不正确');
					return false;
				}
				this.submitAddress();
			},

			submitAddress() {
				let that = this;
				util.request(api.AddressSave, this.getAddressInfo(), 'POST').then(function(res) {
					if (res.errno === 0) {
						//返回之前，先取出上一页对象，并设置addressId
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2];
						console.log(prevPage);
						if (prevPage.route == 'pages/index/index') {
							var city = address.city.indexOf('市') < 0 ? address.province : address.city;
							var addresInfo = {
								city: city,
								lng: res.data.lng,
								lat: res.data.lat,
								shopId: res.data.shopId,
								address: res.data.addressDetail
							};
							uni.setStorageSync('addressInfo', addresInfo);
						} else if (prevPage.route == 'pages/checkout/checkout') {
							// ||prevPage.route == "pages/ucenter/appointOrder/appointOrder"
							prevPage.setData({
								addressId: res.data.id
							});
							try {
								uni.setStorageSync('addressId', res.data);
								uni.setStorageSync('addressName', addressString);
							} catch (e) {
								console.log('CatchClause', e);
								console.log('CatchClause', e);
							}
							console.log('set address');
						} else if (prevPage.route == 'pages/ucenter/appointOrder/appointOrder') {
							prevPage.setData({
								addressShow: true
							});
						}
						uni.navigateBack();
					} else {
						uni.showModal({
							title: '提醒',
							showCancel: false,
							content: res.errmsg
						});
					}
				});
			},

			getAddressInfo() {
				let address = this.address;
				let addressString = (address.detail == '' ? address.address : (address.address + ',' + (address.detail ?
					address.detail : '')));
				return {
					gender: this.gender,
					id: address.id,
					name: address.name,
					tel: address.tel,
					province: address.province,
					city: address.city,
					county: address.county,
					areaCode: address.areaCode,
					addressDetail: addressString,
					addressName: address.addressName,
					isDefault: address.isDefault,
					lat: Number(address.lat).toFixed(5),
					lng: Number(address.lng).toFixed(5),
					// isChange: this.isChange
				};
			},

			deleteAddress(event) {
				console.log(event.target);
				let that = this;
				uni.showModal({
					title: '',
					content: '确定要删除地址？',
					success: function(res) {
						if (res.confirm) {
							let addressId = event.target.dataset.addressId;
							util.request(
								api.AddressDelete, {
									id: addressId
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									uni.navigateBack({
										delta: 1,
										success: function() {}
									});
									// that.getAddressList();
									// wx.removeStorage({
									//   key: 'addressId',
									//   success: function(res) {},
									// })
								}
							});

							console.log('用户点击确定');
						}
					}
				});
				return false;
			},

			goMap() {
				app.globalData.mapSelectFinish = false;
				if (this.address.lng && this.address.lat) {
					let city = this.address.city == '市辖区' ? this.address.province : this.address.city;
					uni.navigateTo({
						url: '/pages/map/mapContent/mapContent?lng=' + this.address.lng + '&lat=' + this.address
							.lat + '&addressname=' + this.address.address + '&city=' + city
					});
				} else {
					uni.navigateTo({
						url: '/pages/map/mapContent/mapContent'
					});
				}
			},

			maleSelect() {
				this.setData({
					gender: 1
				});
			},

			femaleSelect() {
				this.setData({
					gender: 2
				});
			},

			getAreaCode(lat, lng) {
				return new Promise(function(resolve, reject) {
					let param = {
						location: lng + ',' + lat,
						extensions: 'all',
						key: api.gdKey,
						radius: 3000
					};
					uni.request({
						url: api.gdUrl,
						data: param,
						method: 'GET',
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							console.log(res);
							if (res.data.infocode == '10000') {
								if (res.data.info == 'OK') {
									console.info(res.data.regeocode);
									let regeocode = res.data.regeocode.addressComponent;
									let cityName = regeocode.city == null || regeocode.city.length ==
										0 ? regeocode.province : regeocode.city;
									let district = regeocode.district == null || regeocode.district
										.length == 0 ? '' : regeocode.district;
									let address = {
										lat: lat,
										lng: lng,
										areaCode: regeocode.adcode,
										province: regeocode.province,
										city: cityName,
										county: district,
										address: res.data.regeocode.formatted_address,
										addressName: regeocode.township //纯粹做显示
									};

									resolve(address);
								} else {
									reject(false);
								}
							} else {
								reject(false);
							}
						},
						fail: function(err) {
							reject(false);
						}
					});
				});
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
		background: #f4f4f4;
		padding: 30rpx;
	}

	.add-address .add-form {
		background: #fff;
		width: 680rpx;
		height: auto;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.add-address .form-item {
		height: 88rpx;
		padding-left: 30rpx;
		display: flex;
		align-items: center;
		padding-right: 28rpx;
	}

	.add-address .input {
		flex: 1;
		height: 44rpx;
		line-height: 44rpx;
		overflow: hidden;
	}

	.add-address .label {
		font-size: 30rpx;
		color: #333;
		margin-right: 28rpx;
		width: 126rpx;
		text-align: left;
		font-weight: 500;
	}

	.add-address .content {
		border-bottom: 2rpx solid #f2f2f2;
		height: 88rpx;
		line-height: 88rpx;
		align-content: center;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.add-address .content .name {
		line-height: 15px;
		height: 15px;
	}

	.add-address .content .detail {
		line-height: 14px;
		height: 14px;
		color: #999;
		font-size: 12px;
		margin-top: 1px;
	}

	.add-address .form-default {
		height: 100rpx;
		background: #fff;
		margin-top: 30rpx;
		border-radius: 10rpx;
		width: 680rpx;
	}

	.switch-wrapper {
		width: 680rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.switch-wrapper .switch {
		font-size: 24rpx;
	}

	.add-address .form-default .title {
		font-size: 30rpx;
		color: #333;
	}

	.add-address .des {
		color: #999;
		line-height: 44rpx;
		height: 44rpx;
		font-size: 22rpx;
		padding-left: 30rpx;
		margin-top: 10rpx;
	}

	.add-address .form-default .van-checkbox .van-icon {
		color: #fff;
	}

	.add-address .btns {
		position: fixed;
		bottom: 50rpx;
		left: 30rpx;
		right: 30rpx;
		overflow: hidden;
		display: flex;
		height: 88rpx;
	}

	.add-address .cannel,
	.add-address .save {
		flex: 1;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 30rpx;
		color: #fff;
		border: none;
		border-radius: 10rpx;
		outline: none;
		position: static;
	}

	.add-address .cannel::after,
	.add-address .save::after {
		border: none;
	}

	.add-address .cannel {
		color: #333;
		margin-right: 18rpx;
		border: 2rpx solid #999999;
		border-radius: 10rpx;
	}

	.add-address .save {
		background: #00c0ff;
	}

	.region-select {
		width: 100%;
		height: 600rpx;
		background: #fff;
		position: fixed;
		z-index: 10;
		left: 0;
		bottom: 0;
	}

	.region-select .hd {
		height: 108rpx;
		width: 100%;
		border-bottom: 1px solid #f4f4f4;
		padding: 46rpx 30rpx 0 30rpx;
	}

	.region-select .region-selected {
		float: left;
		height: 60rpx;
		display: flex;
	}

	.region-select .region-selected .item {
		max-width: 140rpx;
		margin-right: 30rpx;
		text-align: left;
		line-height: 60rpx;
		height: 100%;
		color: #333;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.region-select .region-selected .item.disabled {
		color: #999;
	}

	.region-select .region-selected .item.selected {
		color: #b4282d;
	}

	.region-select .done {
		float: right;
		height: 60rpx;
		width: 60rpx;
		border: none;
		background: #fff;
		line-height: 60rpx;
		text-align: center;
		color: #333;
		font-size: 28rpx;
	}

	.region-select .done.disabled {
		color: #999;
	}

	.region-select .bd {
		height: 492rpx;
		width: 100%;
		padding: 0 30rpx;
	}

	.region-select .region-list {
		height: 492rpx;
	}

	.region-select .region-list .item {
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		text-align: left;
		color: #333;
		font-size: 28rpx;
	}

	.region-select .region-list .item.selected {
		color: #b4282d;
	}

	.bg-mask {
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8;
	}

	.add-address .form-item:last-child .content {
		border-bottom: none;
	}

	.add-address .btns.add-btn {
		height: 100rpx;
	}

	.add-address .btns.add-btn .save {
		height: 100rpx;
		border-radius: 100rpx;
		border: none;
		outline: none;
	}

	.add-address .btns.add-btn .save::after {
		border: none;
	}

	.gender-wrapper image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.gender-wrapper {
		display: flex;
		align-items: center;
		height: 96rpx;
		justify-content: space-between;
		width: 220rpx;
	}

	.male,
	.female {
		display: flex;
		align-items: center;
		height: 96rpx;
	}

	/* 弹框地址超过2公里 */
	.goods-info-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.goods-info-popup {
		width: 622rpx;
		border-radius: 24rpx;
		background: #fff;
		overflow: hidden;
	}

	.popup-title {
		height: 94rpx;
		line-height: 94rpx;
		text-align: center;
		color: #ffffff;
		font-size: 34rpx;
		background: url('https://mall.zhaijieshi.cc/file/jzmall-dy/verify-dy-title.png') no-repeat center center;
		background-size: 100% 100%;
		background-color: #008dff;
	}

	.tips-title {
		height: 180rpx;
		line-height: 40rpx;
		padding: 34rpx 32rpx;
		font-weight: 600;
		color: #191919;
		font-size: 28rpx;
	}

	.goods-info-popup .goods {
		display: flex;
		padding: 24rpx 20rpx 22rpx 22rpx;
	}

	.goods .img image {
		height: 168rpx;
		width: 168rpx;
		overflow: hidden;
		border-radius: 8rpx;
	}

	.goods .info {
		height: 168rpx;
		flex: 1;
		padding-left: 18rpx;
	}

	.info-main {
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: space-between;
	}

	.info .sku-name {
		color: #666666;
		font-size: 24rpx;
		margin: 12rpx 0;
		height: 34rpx;
		line-height: 34rpx;
	}

	.product-name {
		line-height: 40rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 310rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.9);
	}

	.info-main .price {
		color: rgba(0, 0, 0, 0.9);
		font-size: 24rpx;
		font-weight: bold;
	}

	.info .other-info {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 34rpx;
	}

	.popup-bottom {
		height: 106rpx;
		padding: 14rpx 104rpx 34rpx;
		display: flex;
		justify-content: space-between;
	}

	.btn-cancel {
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 58rpx;
		width: 162rpx;
		text-align: center;
		color: #0091ff;
		font-size: 24rpx;
		border: 2rpx solid #0091ff;
	}

	.btn-conf {
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 58rpx;
		width: 162rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		background: linear-gradient(270deg, #00baff 0%, #008dff 100%);
	}
</style>