wangluohuoyun-huozhuapp/pages/release/addAddress.vue

<template>
	<view class="content">
		<view class="content1" v-if="!isShowMap">
			<view class="top">
				新增地址
			</view>
			<!-- 		<view class="row flex">
				<u-radio-group placement="row" class="select-type">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</view> -->
			<view class="">
				<u--form labelPosition="left" :model="addressInfo" ref="form1" labelWidth='100'>
					<u-form-item label="所属区域" ref="item1" borderBottom>
						<view style='width:100%;flex-direction:row-reverse;' class='flex align-center' @click='toMap'
							:class="addressInfo.area?'':'select-color'">
							<image src="../../static/right.png" style="width: 12px;height: 12px;margin-top: 2px;">
							</image>
							<view>
								{{addressInfo.area?(addressInfo.province+addressInfo.city+addressInfo.area):'选择所属区域 '}}
							</view>
						</view>
					</u-form-item>
					<u-form-item label="详细地址" prop="addressInfo.detailedAddress" ref="item1" borderBottom>
						<!-- <u--input v-model="addressInfo.detailedAddress" border="none" inputAlign="left"  placeholder="详细地址"></u--input> -->
						<u--textarea v-model="addressInfo.detailedAddress" border="none" inputAlign="left"
							placeholder="请输入详细地址" autoHeight maxlength="15"></u--textarea>
						<!-- <u--input v-model="addressInfo.detailedAddress" border="none" placeholder="详细地址"></u--input> -->
					</u-form-item>
					<u-form-item label="联系人" prop="addressInfo.contacts" ref="item1" borderBottom>
						<u--input v-model="addressInfo.contacts" maxlength="10" inputAlign="right" border="none"
							placeholder="请输入联系人">></u--input>
					</u-form-item>
					<u-form-item label="联系电话" prop="addressInfo.contactPhone" ref="item1">
						<u--input v-model="addressInfo.contactPhone" inputAlign="right" border="none"
							placeholder="请输入联系电话" maxlength="11">>
						</u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
		<view class="submit" @click="$u.throttle(submit(), 1000)">提交</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isShowAlert: false,
				alertTitle: '确定提交地址信息？',
				isShowMap: false,
				addressInfo: {
					commonId: "",
					province: "",
					city: "",
					area: "",
					detailedAddress: "",
					contacts: "",
					contactPhone: "",
					longitude: "",
					latitude: "",
					adCode: "",
				},
				// rules: {
				// 	// 'addressInfo.name': {
				// 	// 	type: 'string',
				// 	// 	required: true,
				// 	// 	message: '请填写姓名',
				// 	// 	trigger: ['blur', 'change']
				// 	// },
				// },

			};
		},
		onLoad(options) {
			this.$helper.formatLocation('辽宁省营口市鲅鱼圈区蝴蝶泉路红运小区')
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			confirmClick() {
				this.$request.baseRequest('post', '/cargoOwnerAddressInfo/api/addCargoOwnerAddress', this.addressInfo)
					.then(
						res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "提交成功",
									complete() {
										// uni.$u.route('/pages/release/selectAddress');
										uni.navigateBack({
											delta: 1
										})
									}
								})
							}
						})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
				this.isShowAlert = false
			},
			cancelClick() {
				this.isShowAlert = false
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			toMap() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						let _address = that.$helper.formatLocation(res.address)
						that.addressInfo.latitude = res.latitude
						that.addressInfo.longitude = res.longitude
						that.addressInfo.detailedAddress = _address.Village ? _address.Village : res.name
						that.addressInfo.province = _address.Province
						that.addressInfo.city = _address.City
						that.addressInfo.area = _address.Country
						that.addressInfo.commonId = that.userInfo.id
						uni.request({
							url: 'https://restapi.amap.com/v3/config/district?key=d29a9d10160efaca0dd616bbec936d7f&subdistrict=1&keywords=' +
								_address.City,
							success: (res) => {
								for (let i = 0; i < res.data.districts[0].districts.length; i++) {
									if (res.data.districts[0].districts[i].name == _address
										.Country) {
										that.addressInfo.adCode = res.data.districts[0].districts[
											i].adcode
										console.log("行政区划代码" + that.addressInfo.adCode)
										break
									}
								}
							}
						});
						that.$forceUpdate()
					},
					fail(err) {
						console.log(err)
					},
					complete(res1) {
						console.log(res1)
					}
				});

				// this.isShowMap = true
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	geocode: true,
				// 	altitude: true,
				// 	isHighAccuracy: true,
				// 	success: function(res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);

				// 	}
				// })

				// console.log(123)
				// uni.$u.route('/pages/release/map', {
				// 	id: 1,
				// });
			},
			validate() {
				if (this.addressInfo.contacts.length < 2 || this.addressInfo.contacts.length > 10) {
					this.$refs.uToast.show({
						type: 'error',
						message: "联系人姓名长度2-10个字符！",
					})
					return true
				}
				if (this.addressInfo.contactPhone.length < 7) {
					this.$refs.uToast.show({
						type: 'error',
						message: "联系人电话输入错误！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.addressInfo.contactPhone)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "联系电话不能为空！",
					})
					return true
				}
				if (this.addressInfo.detailedAddress.length < 4 || this.addressInfo.detailedAddress.length > 50) {
					this.$refs.uToast.show({
						type: 'error',
						message: "详细地址4-50个字符！",
					})
					return true
				}
			},
			submit() {
				if (this.validate()) return
				this.isShowAlert = true

			},
		}
	}
</script>

<style lang="scss" scoped>
	.select-color {
		color: #C6CBD5;
	}

	.content {
		background: white;
		height: calc(100vh - 90rpx);
	}

	.content1 {
		padding: 40rpx;

		.top {
			font-size: 42rpx;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.85);
		}
	}

	.submit {
		position: absolute;
		bottom: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		font-size: 36rpx;
		color: #FFFFFF;
		background: #2772FB;
		border-radius: 50rpx;
		padding: 20rpx 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	/deep/input {
		word-break: break-all;
	}

	/deep/.u-textarea {
		padding: 9px 0;
	}

	/deep/.u-textarea__field {
		color: #000;
		text-align: right;
	}
</style>