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%;' class='flex flex-space-between' @click='toMap' :class="addressInfo.area?'':'select-color'">
							<view>{{addressInfo.area?(addressInfo.province+addressInfo.city+addressInfo.area):'选择所属区域 '}}</view>
							<image src="../../static/right.png" style="width: 22rpx;height: 22rpx;"></image>
						</view>
					</u-form-item>
					<u-form-item label="详细地址" prop="addressInfo.detailedAddress" ref="item1" borderBottom>
						<u--textarea v-model="addressInfo.detailedAddress" border="none"  placeholder="详细地址" autoHeight  maxlength="30"></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" border="none" placeholder="联系人">></u--input>
					</u-form-item>
					<u-form-item label="联系电话" prop="addressInfo.contactPhone" ref="item1">
						<u--input v-model="addressInfo.contactPhone" 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(), 5000)">提交</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: ""
				},
				// rules: {
				// 	// 'addressInfo.name': {
				// 	// 	type: 'string',
				// 	// 	required: true,
				// 	// 	message: '请填写姓名',
				// 	// 	trigger: ['blur', 'change']
				// 	// },
				// },

			};
		},
		onLoad(options) {
			console.log(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
				// this.isShowMap = true
				uni.getLocation({
					type: 'gcj02',
					geocode:true,
					altitude:true,
					isHighAccuracy:true,
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							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)
								console.log('----------------------------')
								console.log(_address)
								that.addressInfo.latitude = res.latitude
								that.addressInfo.longitude = res.longitude
								that.addressInfo.detailedAddress = _address.Village
								that.addressInfo.province = _address.Province
								that.addressInfo.city = _address.City
								that.addressInfo.area = _address.Country
								that.addressInfo.commonId = that.userInfo.id
								that.$forceUpdate()
							},
							fail(err) {
								console.log(err)
							},
							complete(res1) {
								console.log(res1)
							}
						});
					}
				})
				
				// 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
				}
			},
			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>