guzijian / garbage-removal · Files

<template>
	<view class="wrap">
		<view class="wrap-from-container">
			<city-select v-model="cityPikerShowFlag" @city-change="handleCityChange"></city-select>
			<u--form :labelStyle="{ color: '#303133' }" labelWidth="140" labelPosition="top" :model="addressInfo"
				ref="addressFrom">
				<u-form-item :required="true" label="所在地区" prop="addressArea" borderBottom>
					<view @click.stop="showRegionPicker" hover-class="click-box" style="width: 100%;">
						<u--input border="none" readonly style="pointer-events:none" type="text" v-model="addressInfo.addressArea"
							placeholder-class="line" placeholder="请选着所在地区"></u--input>
					</view>
				</u-form-item>
				<u-form-item :required="true" label="详细地址" prop="addressDetail" borderBottom>
					<view @click.stop="chooseAddressDetail" class="wrap-from-container-address-details"
						style="color:#606266;font-size: 28rpx;width: 100%;" hover-class="click-box">
						<view style="pointer-events: none; width: 100%;">
							<up-textarea :disabled="true" color="#606266" border="none" autoHeight style="pointer-events:none"
								v-model="addressInfo.addressDetail" placeholder="请选择详细地址"></up-textarea>
						</view>
					</view>
				</u-form-item>
				<u-form-item :required="true" label="联系人" prop="contactPerson" borderBottom>
					<u--input color="#606266" border="none" type="text" v-model="addressInfo.contactPerson"
						placeholder-class="line" placeholder="联系人"></u--input>
				</u-form-item>
				<u-form-item :required="true" label="联系电话" prop="contactIphoneNumber" borderBottom>
					<u--input color="#606266" border="none" type="text" v-model="addressInfo.contactIphoneNumber"
						placeholder-class="line" placeholder="联系电话"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置成默认地址</view>
				</view>
				<view class="right">
					<u-switch v-model="addressInfo.defaultFlag" size="40" activeColor="#19a97c"></u-switch>
				</view>
			</view>
		</view>
		<view class="submit-button">
			<view v-if="addFlag" @click="submit" class="add" hover-class="click-box">新增地址</view>
			<view v-else class="update-box">
				<view class="del" @click="handleDeleteClick" hover-class="click-box">删除地址</view>
				<view class="update" @click="handleUpdateClick" hover-class="click-box">保存地址</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { addAddress, deleteAddress, updateAddress } from '@/apis/address.js';
import { onLoad } from '@dcloudio/uni-app';
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import citySelect from './citySelect/u-city-select.vue';
const { proxy } = getCurrentInstance();
const cityPikerShowFlag = ref(false)
const addFlag = ref(true)
const addressInfo = reactive({
	addressArea: "",
	addressDetail: "",
	contactPerson: "",
	contactIphoneNumber: "",
	defaultFlag: false
});

const rules = reactive({
	'addressArea': {
		type: 'string',
		required: true,
		message: '请选择区域',
		trigger: ['blur', 'change']
	},
	'addressDetail': {
		type: 'string',
		required: true,
		message: '请输入详细地址',
		trigger: ['blur', 'change']
	},
	'contactPerson': {
		type: 'string',
		required: true,
		message: '请输入联系人',
		trigger: ['blur', 'change']
	},
	'contactIphoneNumber': [{
		type: 'string',
		required: true,
		message: '手机号码不正确',
		trigger: ['blur', 'change']
	}, {
		validator: (rule, value, callback) => {
			return uni.$u.test.mobile(value);
		},
		message: '手机号码不正确',
		// 触发器可以同时用blur和change
		trigger: ['change', 'blur'],
	}]
})

const showRegionPicker = () => {
	cityPikerShowFlag.value = true;
}

const handleCityChange = (e) => {
	addressInfo.addressArea = e.province.label + '-' + e.city.label + '-' + e.area.label;
}

const handleDeleteClick = () => {
	uni.showModal({
		title: '',
		content: '是否确认删除这个地址',
		success: function (res) {
			if (res.confirm) {
				deleteAddress(addressInfo.garAddressId).then(res => {
					if (res.data.success) {
						uni.$u.toast(res.data.msg)
						jumpAddressList()
					}
				})
			} else if (res.cancel) {
			}
		}
	});

}

const handleUpdateClick = () => {
	updateAddress(addressInfo).then(res => {
		console.log(res);
		uni.$u.toast(res.data.msg)
		if (res.data.success) {
			setTimeout(() => {
				jumpAddressList();
			}, 200);
		}
	})
}

const jumpAddressList = () => {
	reset();
	uni.$u.route({
		type: 'navigateBack',
		url: `pages/home-info/address/index`,
	})
}

const submit = () => {
	proxy.$refs.addressFrom.validate().then(res => {
		addAddress(addressInfo).then(res => {
			uni.$u.toast(res.data.msg)
			if (res.data.success) {
				setTimeout(() => {
					jumpAddressList();
				}, 200);
			}
		})
	}).catch(errors => {
		uni.$u.toast('请填写正确信息！')
	})
}

/**
 * 打开地图选择地址
 */
const chooseAddressDetail = () => {
	console.log('打开地图选择地址');
  takeLocation();

	// 创建选择方式的模态框
	const choiceContainer = document.createElement('div');
	choiceContainer.id = 'choiceContainer';
	choiceContainer.style.cssText = `		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
	`;

	const choiceBox = document.createElement('div');
	choiceBox.style.cssText = `		background: white;
		padding: 20px;
		border-radius: 8px;
		text-align: center;
		width: 80%;
		max-width: 300px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	`;

	const title = document.createElement('h3');
	title.innerText = '请选择地址输入方式';
	title.style.cssText = `		margin-top: 0;
		color: #333;
		font-size: 18px;
	`;

	const mapBtn = document.createElement('button');
	mapBtn.innerText = '地图选择';
	mapBtn.style.cssText = `		display: block;
		width: 100%;
		padding: 12px;
		margin: 10px 0;
		background: #19a97c;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
		transition: background 0.3s;
	`;

	mapBtn.onmouseover = function() {
		mapBtn.style.background = '#13966a';
	};

	mapBtn.onmouseout = function() {
		mapBtn.style.background = '#19a97c';
	};

	const manualBtn = document.createElement('button');
	manualBtn.innerText = '手动输入';
	manualBtn.style.cssText = `		display: block;
		width: 100%;
		padding: 12px;
		margin: 10px 0;
		background: #409eff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
		transition: background 0.3s;
	`;

	manualBtn.onmouseover = function() {
		manualBtn.style.background = '#3388e6';
	};

	manualBtn.onmouseout = function() {
		manualBtn.style.background = '#409eff';
	};

	const cancelBtn = document.createElement('button');
	cancelBtn.innerText = '取消';
	cancelBtn.style.cssText = `		display: block;
		width: 100%;
		padding: 12px;
		margin: 10px 0;
		background: #ff4d4f;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
		transition: background 0.3s;
	`;

	cancelBtn.onmouseover = function() {
		cancelBtn.style.background = '#e63939';
	};

	cancelBtn.onmouseout = function() {
		cancelBtn.style.background = '#ff4d4f';
	};

	choiceBox.appendChild(title);
	choiceBox.appendChild(mapBtn);
	choiceBox.appendChild(manualBtn);
	choiceBox.appendChild(cancelBtn);
	choiceContainer.appendChild(choiceBox);
	document.body.appendChild(choiceContainer);

	// 地图选择按钮事件
	mapBtn.onclick = function() {
		document.body.removeChild(choiceContainer);

		// 地图选择方式
		let coordinate = 'gcj02';

		// 创建一个模态框来显示地图
		const mapContainer = document.createElement('div');
		mapContainer.id = 'mapContainerWrapper';
		mapContainer.style.cssText = `			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: white;
			z-index: 9999;
		`;

		// 创建顶部工具栏
		const toolbar = document.createElement('div');
		toolbar.style.cssText = `			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 50px;
			background: #fff;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			z-index: 10000;
			display: flex;
			align-items: center;
			padding: 0 15px;
			box-sizing: border-box;
		`;

		const titleText = document.createElement('div');
		titleText.innerText = '请选择地址';
		titleText.style.cssText = `			flex: 1;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			color: #333;
		`;

		// 创建关闭按钮
		const closeBtn = document.createElement('button');
		closeBtn.innerText = '✕';
		closeBtn.style.cssText = `			width: 30px;
			height: 30px;
			background: #ff4d4f;
			color: white;
			border: none;
			border-radius: 50%;
			cursor: pointer;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		`;

		toolbar.appendChild(titleText);
		toolbar.appendChild(closeBtn);

		// 创建地图容器
		const mapElement = document.createElement('div');
		mapElement.id = 'mapContainer';
		mapElement.style.cssText = `			width: 100%;
			height: 100%;
			margin-top: 50px;
		`;

		mapContainer.appendChild(toolbar);
		mapContainer.appendChild(mapElement);
		document.body.appendChild(mapContainer);

		// 加载腾讯地图API
		const script = document.createElement('script');
		script.src = 'https://map.qq.com/api/js?v=2.exp&key=XICBZ-ALWKT-2KPXZ-VCBL7-XMRYO-2QFS4&callback=initMap';

		// 定义全局回调函数
		window.initMap = function() {
			// 初始化地图，设置默认位置为长沙
			const center = new qq.maps.LatLng(28.198265, 112.984353); // 长沙市坐标
			const map = new qq.maps.Map(mapElement, {
				center: center,
				zoom: 15
			});
      window.currentMapInstance = map;
      // 地图初始化完成后自动获取当前位置
      setTimeout(() => {
        takeLocation();
      }, 500);

			// 添加点击事件监听器
			qq.maps.event.addListener(map, 'click', function(event) {
				const lat = event.latLng.getLat();
				const lng = event.latLng.getLng();

				// 使用腾讯地图逆解析API获取地址信息
				const key = "XICBZ-ALWKT-2KPXZ-VCBL7-XMRYO-2QFS4";
				const url = `https://apis.map.qq.com/ws/geocoder/v1/?key=${key}&location=${lat},${lng}&output=jsonp`;

				// 创建script标签实现JSONP
				const jsonpScript = document.createElement('script');
				const callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());

				// 定义全局回调函数
				window[callbackName] = function(data) {
					// 清理
					delete window[callbackName];
					document.body.removeChild(jsonpScript);

					if (data.status === 0) {
						const component = data.result.address_component;
						const address = data.result.address;

						// 创建确认选择的模态框
						const confirmContainer = document.createElement('div');
						confirmContainer.style.cssText = `							position: fixed;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background: rgba(0, 0, 0, 0.5);
							z-index: 10001;
							display: flex;
							justify-content: center;
							align-items: center;
						`;

						const confirmBox = document.createElement('div');
						confirmBox.style.cssText = `							background: white;
							padding: 20px;
							border-radius: 8px;
							text-align: center;
							width: 80%;
							max-width: 300px;
							box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
						`;

						const confirmTitle = document.createElement('h3');
						confirmTitle.innerText = '确认地址';
						confirmTitle.style.cssText = `							margin-top: 0;
							color: #333;
						`;

						const confirmText = document.createElement('p');
						confirmText.innerText = address;
						confirmText.style.cssText = `							color: #666;
							font-size: 14px;
							line-height: 1.5;
							margin: 10px 0;
						`;

						const confirmBtn = document.createElement('button');
						confirmBtn.innerText = '确认';
						confirmBtn.style.cssText = `							display: inline-block;
							width: 45%;
							padding: 10px;
							margin: 5px;
							background: #19a97c;
							color: white;
							border: none;
							border-radius: 4px;
							cursor: pointer;
							font-size: 14px;
						`;

						const cancelConfirmBtn = document.createElement('button');
						cancelConfirmBtn.innerText = '取消';
						cancelConfirmBtn.style.cssText = `							display: inline-block;
							width: 45%;
							padding: 10px;
							margin: 5px;
							background: #ff4d4f;
							color: white;
							border: none;
							border-radius: 4px;
							cursor: pointer;
							font-size: 14px;
						`;

						confirmBox.appendChild(confirmTitle);
						confirmBox.appendChild(confirmText);
						confirmBox.appendChild(confirmBtn);
						confirmBox.appendChild(cancelConfirmBtn);
						confirmContainer.appendChild(confirmBox);
						document.body.appendChild(confirmContainer);

						// 确认按钮事件
						confirmBtn.onclick = function() {
							addressInfo.garLongitude = lng;
							addressInfo.garLatitude = lat;
							addressInfo.garCoordinate = coordinate;

							if (component.province == "湖南省") {
								addressInfo.addressDetail = address.replace(component.province + component.city + component.district, "");
								addressInfo.addressArea = component.province + '-' + component.city + '-' + component.district;
							} else {
								addressInfo.addressDetail = address;
							}

							// 关闭所有模态框
							document.body.removeChild(confirmContainer);
							document.body.removeChild(mapContainer);
							// 清理全局函数
							delete window.initMap;
						};

						// 取消确认按钮事件
						cancelConfirmBtn.onclick = function() {
							document.body.removeChild(confirmContainer);
						};
					} else {
						// 创建错误提示的模态框
						const errorContainer = document.createElement('div');
						errorContainer.style.cssText = `							position: fixed;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background: rgba(0, 0, 0, 0.5);
							z-index: 10001;
							display: flex;
							justify-content: center;
							align-items: center;
						`;

						const errorBox = document.createElement('div');
						errorBox.style.cssText = `							background: white;
							padding: 20px;
							border-radius: 8px;
							text-align: center;
							width: 80%;
							max-width: 300px;
							box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
						`;

						const errorTitle = document.createElement('h3');
						errorTitle.innerText = '提示';
						errorTitle.style.cssText = `							margin-top: 0;
							color: #333;
						`;

						const errorText = document.createElement('p');
						errorText.innerText = '地址解析失败，请重新选择';
						errorText.style.cssText = `							color: #666;
							font-size: 14px;
							margin: 10px 0;
						`;

						const okBtn = document.createElement('button');
						okBtn.innerText = '确定';
						okBtn.style.cssText = `							display: inline-block;
							width: 100%;
							padding: 10px;
							margin: 5px 0;
							background: #409eff;
							color: white;
							border: none;
							border-radius: 4px;
							cursor: pointer;
							font-size: 14px;
						`;

						errorBox.appendChild(errorTitle);
						errorBox.appendChild(errorText);
						errorBox.appendChild(okBtn);
						errorContainer.appendChild(errorBox);
						document.body.appendChild(errorContainer);

						// 确定按钮事件
						okBtn.onclick = function() {
							document.body.removeChild(errorContainer);
						};
					}
				};

				// 设置错误处理
				jsonpScript.onerror = function() {
					// 清理
					delete window[callbackName];
					document.body.removeChild(jsonpScript);

					// 创建错误提示的模态框
					const errorContainer = document.createElement('div');
					errorContainer.style.cssText = `						position: fixed;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.5);
						z-index: 10001;
						display: flex;
						justify-content: center;
						align-items: center;
					`;

					const errorBox = document.createElement('div');
					errorBox.style.cssText = `						background: white;
						padding: 20px;
						border-radius: 8px;
						text-align: center;
						width: 80%;
						max-width: 300px;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
					`;

					const errorTitle = document.createElement('h3');
					errorTitle.innerText = '提示';
					errorTitle.style.cssText = `						margin-top: 0;
						color: #333;
					`;

					const errorText = document.createElement('p');
					errorText.innerText = '地址解析失败，请重新选择';
					errorText.style.cssText = `						color: #666;
						font-size: 14px;
						margin: 10px 0;
					`;

					const okBtn = document.createElement('button');
					okBtn.innerText = '确定';
					okBtn.style.cssText = `						display: inline-block;
						width: 100%;
						padding: 10px;
						margin: 5px 0;
						background: #409eff;
						color: white;
						border: none;
						border-radius: 4px;
						cursor: pointer;
						font-size: 14px;
					`;

					errorBox.appendChild(errorTitle);
					errorBox.appendChild(errorText);
					errorBox.appendChild(okBtn);
					errorContainer.appendChild(errorBox);
					document.body.appendChild(errorContainer);

					// 确定按钮事件
					okBtn.onclick = function() {
						document.body.removeChild(errorContainer);
					};
				};

				jsonpScript.src = url + '&callback=' + callbackName;
				document.body.appendChild(jsonpScript);
			});

			// 添加当前位置定位功能
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(
					(position) => {
						const lat = position.coords.latitude;
						const lng = position.coords.longitude;
						const pos = new qq.maps.LatLng(lat, lng);
						map.setCenter(pos);
					},
					(error) => {
						console.log('获取当前位置失败', error);
					}
				);
			}
		};

		// 关闭按钮事件
		closeBtn.onclick = function() {
			document.body.removeChild(mapContainer);
			// 清理全局函数
			delete window.initMap;
		};

		document.body.appendChild(script);
	};

	// 手动输入按钮事件
	manualBtn.onclick = function() {
		document.body.removeChild(choiceContainer);

		// 创建自定义输入框模态框
		const inputContainer = document.createElement('div');
		inputContainer.style.cssText = `			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 9999;
			display: flex;
			justify-content: center;
			align-items: center;
		`;

		const inputBox = document.createElement('div');
		inputBox.style.cssText = `			background: white;
			padding: 20px;
			border-radius: 8px;
			text-align: center;
			width: 80%;
			max-width: 300px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		`;

		const inputTitle = document.createElement('h3');
		inputTitle.innerText = '请输入详细地址';
		inputTitle.style.cssText = `			margin-top: 0;
			color: #333;
		`;

		const inputField = document.createElement('input');
		inputField.type = 'text';
		inputField.placeholder = '请输入详细地址';
		inputField.style.cssText = `			width: 100%;
			padding: 10px;
			margin: 10px 0;
			border: 1px solid #ddd;
			border-radius: 4px;
			box-sizing: border-box;
			font-size: 14px;
		`;

		const submitBtn = document.createElement('button');
		submitBtn.innerText = '确定';
		submitBtn.style.cssText = `			display: inline-block;
			width: 45%;
			padding: 10px;
			margin: 5px;
			background: #19a97c;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
		`;

		const cancelInputBtn = document.createElement('button');
		cancelInputBtn.innerText = '取消';
		cancelInputBtn.style.cssText = `			display: inline-block;
			width: 45%;
			padding: 10px;
			margin: 5px;
			background: #ff4d4f;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
		`;

		inputBox.appendChild(inputTitle);
		inputBox.appendChild(inputField);
		inputBox.appendChild(submitBtn);
		inputBox.appendChild(cancelInputBtn);
		inputContainer.appendChild(inputBox);
		document.body.appendChild(inputContainer);

		// 确定按钮事件
		submitBtn.onclick = function() {
			const manualAddress = inputField.value.trim();
			if (manualAddress) {
				addressInfo.addressDetail = manualAddress;
				document.body.removeChild(inputContainer);
			} else {
				// 创建提示模态框
				const tipContainer = document.createElement('div');
				tipContainer.style.cssText = `					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.5);
					z-index: 10000;
					display: flex;
					justify-content: center;
					align-items: center;
				`;

				const tipBox = document.createElement('div');
				tipBox.style.cssText = `					background: white;
					padding: 20px;
					border-radius: 8px;
					text-align: center;
					width: 80%;
					max-width: 300px;
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
				`;

				const tipText = document.createElement('p');
				tipText.innerText = '请输入详细地址';
				tipText.style.cssText = `					color: #666;
					font-size: 14px;
					margin: 10px 0;
				`;

				const okBtn = document.createElement('button');
				okBtn.innerText = '确定';
				okBtn.style.cssText = `					display: inline-block;
					width: 100%;
					padding: 10px;
					margin: 5px 0;
					background: #409eff;
					color: white;
					border: none;
					border-radius: 4px;
					cursor: pointer;
					font-size: 14px;
				`;

				tipBox.appendChild(tipText);
				tipBox.appendChild(okBtn);
				tipContainer.appendChild(tipBox);
				document.body.appendChild(tipContainer);

				// 确定按钮事件
				okBtn.onclick = function() {
					document.body.removeChild(tipContainer);
				};
			}
		};

		// 取消按钮事件
		cancelInputBtn.onclick = function() {
			document.body.removeChild(inputContainer);
		};

		// 回车键确认
		inputField.addEventListener('keypress', function(e) {
			if (e.key === 'Enter') {
				submitBtn.click();
			}
		});

		// 聚焦到输入框
		setTimeout(() => {
			inputField.focus();
		}, 100);
	};

	// 取消按钮事件
	cancelBtn.onclick = function() {
		document.body.removeChild(choiceContainer);
	};
}

// 定义定位回调函数
const takeLocationCallBack = (lngLat) => {
  const ll = lngLat.split(",");
  console.log("定位结果:", ll);

  if (ll.length >= 2) {
    const longitude = parseFloat(ll[0]);
    const latitude = parseFloat(ll[1]);

    // 在地图上定位到当前位置
    const mapContainer = document.getElementById('mapContainer');
    if (mapContainer && window.qq && qq.maps && window.currentMapInstance) {
      const pos = new qq.maps.LatLng(latitude, longitude);
      window.currentMapInstance.setCenter(pos);
      window.currentMapInstance.setZoom(17); // 放大一些以便更好地查看位置

      // 清除之前的标记（如果有的话）
      if (window.currentLocationMarker) {
        window.currentLocationMarker.setMap(null);
      }

      // 添加新的当前位置标记
      window.currentLocationMarker = new qq.maps.Marker({
        position: pos,
        map: window.currentMapInstance
      });

      // 创建或更新信息窗口
      if (!window.currentLocationInfoWindow) {
        window.currentLocationInfoWindow = new qq.maps.InfoWindow({
          map: window.currentMapInstance
        });
      }

      // 设置信息窗口内容并打开
      window.currentLocationInfoWindow.setContent('<div style="padding:10px;">您的当前位置</div>');
      window.currentLocationInfoWindow.setPosition(pos);
      window.currentLocationInfoWindow.open();
    }
  } else {
    uni.showToast({
      title: '定位结果异常',
      icon: 'none'
    });
  }
}

const takeLocation = () => {
  // 调用原生接口获取定位
  if (window.JsInterface && typeof window.JsInterface.takeLocation === 'function') {
    window.JsInterface.takeLocation();
  } else {
    // 如果没有原生接口，使用uni.getLocation作为备选方案
    uni.getLocation({
      type: 'gcj02',
      success: function (res) {
        // 直接处理结果
        handleLocationResult(res.longitude, res.latitude);
      },
      fail: function (err) {
        console.error('定位失败:', err);
        uni.showToast({
          title: '定位失败',
          icon: 'none'
        });
      }
    });
  }
}

onMounted(() => {
	proxy.$refs.addressFrom.setRules(rules)
  window.takeLocationCallBack = takeLocationCallBack
})

onLoad((options) => {
	if (options.addressObj) {
		let addressObj = JSON.parse(options.addressObj);
		addressInfo.addressArea = addressObj.garUserAddress;
		addressInfo.contactPerson = addressObj.garUserContactName;
		addressInfo.contactIphoneNumber = addressObj.garUserContactTel;
		addressInfo.defaultFlag = addressObj.garUserDefault == 1 ? true : false;
		addressInfo.addressDetail = addressObj.garRemark;
		addressInfo.garAddressId = addressObj.garAddressId
		addressInfo.garLongitude = addressObj.garLongitude
		addressInfo.garLatitude = addressObj.garLatitude
		addFlag.value = false;
	}

	if(options.defaultFlag && 'true' == options.defaultFlag){
		addressInfo.defaultFlag = true;
	}
})
const reset = () => {
	addressInfo.addressArea = ''
	addressInfo.contactPerson = ''
	addressInfo.contactIphoneNumber = ''
	addressInfo.defaultFlag = false
	addressInfo.addressDetail = ''
	addressInfo.garAddressId = ''
	addressInfo.garLongitude = ''
	addressInfo.garLatitude = ''
	addFlag.value = true
}
</script>

<style lang="scss" scoped>
::v-deep .u-textarea {
	width: 100%;
	padding: 0px !important;
	background: white !important;
}

.wrap {
	box-sizing: border-box;
	padding: 15rpx;
	// background-color: $u-info-light;
	height: 100%;
	width: 100%;
	background: linear-gradient(to bottom, #19a97c, $u-info-light, $u-info-light, $u-info-light);

	.wrap-from-container {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
	}

	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		background-color: #ffffff;
		font-size: 28rpx;
		border-radius: 15rpx;

		color: #909399;

		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;

			.tips {
				font-size: 20rpx;
			}

			.right {}
		}
	}




	.submit-button {
		display: flex;
		margin: auto;
		width: 80%;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 10%;
		font-size: 30rpx;
		color: #ffffff;

		.add {
			background-color: #19a97c;
			border-radius: 60rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.update-box {
			width: 100%;
			display: flex;
			justify-content: space-around;

			.del {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 60rpx;
				background-color: $u-error-disabled;
				margin-right: 30rpx;
			}

			.update {
				width: 100%;
				background-color: #19a97c;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.click-box {
	@include handleClick;
}
</style>