wangluohuoyun-huozhuapp/pages/release/editAddress.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" :rules="rules" 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'>
							<image src="../../static/right.png" style="width: 22rpx;height: 22rpx;"></image>
							{{addressInfo.area?((addressInfo.province?addressInfo.province:'')+addressInfo.city+addressInfo.area):'选择所属区域 '}}
						</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" maxlength="10" inputAlign="right" 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: ""
				},
				rules: {
					// 'addressInfo.name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
				},

			};
		},
		onLoad(options) {
			console.log(options)
			this.addressInfo = options
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			confirmClick() {
				this.$request.baseRequest('post', '/cargoOwnerAddressInfo/api/editCargoOwnerAddress', 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: 'wgs84',
					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
				}
				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>15) {
					this.$refs.uToast.show({
						type: 'error',
						message: "详细地址4-15个字符！",
					})
					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/.u-textarea{
		padding:9px 0;
	}
	/deep/.u-textarea__field{
		color:#000;
		text-align:right;
	}
</style>