GuangYuYuan-app/pages/my/add_address.vue

<template>
	<view class="addAddress">
		<view class="form">
			<view class="head">
				<span>地址信息</span>
				<view class="checked_box" @click="goExhibits">
					<!-- <view class="checked" v-if="item.type == 0"></view> -->
					<view class="select" v-if="type == 0">
						<image src="../../static/identify/round.png" mode=""></image>
					</view>
					<view class="select" v-else>
						<image src="../../static/identify/select.png" mode=""></image>
					</view>
					默认地址
				</view>
			</view>
			<view class="item">
				<view class="title">
					姓名
				</view>
				<view class="inp">
					<input class="weui-input" name="input" v-model="form.userName" placeholder="输入您的姓名" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					手机号
				</view>
				<view class="inp">
					<input class="weui-input" placeholder="手机号" v-model="form.phone" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					所在地区
				</view>
				<view class="inp" @click="getAddress" v-if="form.address !== ''">
					<!-- 	<input class="weui-input" name="input" v-model="form.userName" placeholder="姓名(必填)" /> -->
					{{form.address}}{{form.name}}
				</view>
				<view class="inp street" @click="getAddress" v-else>
					省、市、区、街道
				</view>
			</view>
			<view class="item">
				<view class="title">
					详细地址
				</view>
				<view class="inp">
					<input class="weui-input" name="input" v-model="form.atlasAdd" placeholder="列：1号楼一层101室" />
				</view>
			</view>
		</view>
		<view class="addbtn">
			<button type="primary" @click="save">{{btnName}}</button>
		</view>
	</view>
</template>
<script>
	import {
		addUpdate,
		addDetails,
		updateAdd,
		addList,
		defaultAdd
	} from '../../api/index'
	export default {
		data() {
			return {
				btnName: '保存',
				type: 0,
				form: {
					userName: '',
					phone: '',
					atlasAdd: '',
					openid: '',
					type: 0,
					latitude: '',
					longitude: '',
					name: '',
					address: '',
				},
				pos_name: '',
				latitude: '',
				longitude: '',
				requestBody: {},
				err: '',
				saveAddress: {
					latitude: '',
					longitude: '',
					name: '',
					address: '',
				},
			}
		},
		methods: { //设为默认地址
			goExhibits() {
				// this.checkedIndex = index
				var id = {
					id: this.id,
					openid: uni.getStorageSync('wx_copenid'),
				}
				defaultAdd(id).then(res => {
					if (res.data.code == 200) {
						this.getList()
						uni.showToast({
							title: '设置默认地址成功！',
							icon: 'none'
						})
					}
				})
			},
			getAddress() {
				uni.chooseLocation({
					success: res => {
						this.form.name = res.name;
						this.form.latitude = res.latitude;
						this.form.longitude = res.longitude;
						this.form.address = res.address
					}
				});
			},
			save() {
				this.form.openid = uni.getStorageSync('wx_copenid')
				// this.form.address = JSON.stringify(this.saveAddress)
				if (this.form.userName === '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.form.address == '') {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					});
					return;
				}
				if (this.btnName == '修改地址') {
					// this.form.type = 
					updateAdd(this.form).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '修改成功',
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 500)
						}
					})
				} else {
					this.form.type = this.type
					// this.requestBody = this.form
					addUpdate(this.form).then(res => {
						// console.log(res,"添加成功之后的数据")
						if (res.data.code == 200) {
							uni.showToast({
								title: '添加成功',
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 500)
						} else {

							this.err = res.msg
						}
					})
				}


			}
			// onChooseLocation() {
			// 	uni.navigateTo({
			// 		url: './select_position'
			// 	})
			// },
		},
		mounted() {},
		onShow() {
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {}
			});
		},
		onLoad(options) {

			this.type = options.type
			if (options.id) {
				addDetails({
					id: options.id
				}).then(res => {
					this.form = res.data.data,
						// this.saveAddress = JSON.parse(res.data.data.address),
						// this.address = JSON.parse(res.data.data.address),
						this.btnName = '修改地址',
						console.log(this.saveAddress)
				})
			} else {}

		},
	}
</script>

<style lang="scss" scoped>
	.addAddress {
		background-color: #f8f8f8;
		height: 100vh;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;

		.checked_box {
			width: 128rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.select {
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}

		}
	}

	.form {
		background: #FFFFFF;
		box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.05);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx 24rpx;

		.item {
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			margin-bottom: 20rpx;

			.title {
				width: 104rpx;
				color: #333333;
				margin-right: 20rpx;
			}

			.inp {
				flex: 1;
				height: 64rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #EEEEEE;
				padding-left: 24rpx;

			}

			.street {
				font-size: 26rpx;
				color: #999999;
				line-height: 64rpx;
			}
		}
	}

	.addbtn {
		position: fixed;
		bottom: 30px;
		width: 100%;
		// background-color: #fff;
		// border-top: 1px solid #ccc;
		padding-top: 15px;
		padding-bottom: 10px;

		button {
			margin: 0 50px;
			background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
			border-radius: 106rpx;
		}
	}

	::v-deep.weui-input {
		height: 100%;
		font-size: 26rpx;
	}
</style>