cbz-sj/pages/mine/service/address/add.vue

<template>
	<view class="content vflex jbetween">
		<view class="form">
			<view class="hflex acenter jbetween item">
				<view class="left">收货人</view>
				<u-input v-model="name" border="none" placeholder="请填写收货人姓名"></u-input>
			</view>
			<view class="hflex acenter jbetween item">
				<view class="left">手机号码</view>
				<u-input v-model="phone" border="none" placeholder="请填写收货人手机号码"></u-input>
			</view>
			<view class="hflex acenter jbetween item" @click="selectmap">
				<view class="left">所在地区</view>
				<!-- <comp-select-address :addressStr="areas" class="address" @selectAddress="selectAddress">
					
				</comp-select-address> -->
				<u-input v-model="areas" border="none" disabled disabledColor="#fff" placeholder="请选择所在地区"></u-input>
				<u-icon name="map-fill" color="#506DFF" size="13"></u-icon>
			</view>
			
			<view class="hflex jbetween item">
				<view class="left">详细地址</view>
				<u-textarea v-model="address" border="none" placeholder="请输入街道、楼牌号"></u-textarea>
			</view>
			<!-- <view class="hflex acenter jbetween item">
				<view class="left">设为默认地址</view>
				<u-switch v-model="is_active" activeColor="#506dff" @change="change"></u-switch>
			</view> -->
		</view>
		<view class="btn" v-if="is_edit == 0" @click="addAddress">保存</view>
		<view class="bottom hflex acenter jbetween" v-else>
			<view class="del_btn" @click="deleteAdd">删除</view>
			<view class="save_btn" @click="editAddress">保存</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				name: '',
				phone: '',
				province: '',
				city: '',
				// area: '',
				areas: '',
				address: '',
				is_active: false,
				is_edit: 0,
				id: '',
				latitude: 0,
				longitude: 0,
				mapKey: '24f36a47991198151dae0d0168c154fe'
			}
		},
		onLoad(options) {
			that = this
			if(options.index) {
				that.getPredata(options.index)
				that.id = options.id
			}
		},
		methods: {
			getPredata(index) {
				that.is_edit = 1
				var pages = getCurrentPages()
				var prePage = pages[pages.length - 2]
				var data = prePage.$vm.pageList[index]
				that.name = data.name
				that.phone = data.phone
				that.province = data.province
				that.city = data.city
				that.area = data.area
				that.areas = that.province + that.city + that.area
				that.address = data.address
				
				that.id = data.id
				// if(data.type) {
				// 	that.is_active = true
				// } else {
				// 	that.is_active = false
				// }
			},
			selectAddress(e) {
				console.log('地图地址',e);
				that.province = e[0]
				that.city = e[1]
				that.area = e[2]
			},
			// 选择地区
			bindPickerChange(e) {
				console.log(e);
				that.province = e.detail.value[0]
				that.city = e.detail.value[1]
				that.area = e.detail.value[2]
				that.areas = e.detail.value[0] + e.detail.value[1] + e.detail.value[2]
			},
			// 设置默认地址
			change(e) {
				that.is_active = e
			},
			// 添加收获地址
			addAddress() {
				if($api.formCheck(that.name,'required') && $api.formCheck(that.phone,'phone') && $api.formCheck(that.area,'required') && $api.formCheck(that.address,'required')) {
					$api.req({
						url: '/data/api.business.User/add_address',
						method: 'POST',
						data: {
							// type: that.is_active?1:0,
							name: that.name,
							phone: that.phone,
							province: that.province,
							city: that.city,
							area: that.area,
							address: that.address
						}
					}, function(res) {
						$api.info(res.info)
						if(res.code == 1) {
							if(that.is_active) {
								uni.setStorageSync('address_id',that.id)
							}
							$api.jump(1,-1)
						}
					})
				}
				
			},
			// 修改地址
			editAddress() {
				if($api.formCheck(that.name,'required') && $api.formCheck(that.phone,'phone') && $api.formCheck(that.area,'required') && $api.formCheck(that.address,'required')) {
					$api.req({
						url: '/data/api.business.User/address_edit',
						method: 'POST',
						data: {
							address_id: that.id,
							// type: that.is_active?1:0,
							name: that.name,
							phone: that.phone,
							province: that.province,
							city: that.city,
							area: that.area,
							address: that.address
						}
					}, function(res) {
						$api.info(res.info)
						if(res.code == 1) {
							if(that.is_active) {
								uni.setStorageSync('address_id',that.id)
							}
							$api.jump(1,-1)
						}
					})
				}
			},
			deleteAdd() {
				$api.req({
					url: '/data/api.User/del_address',
					method: 'POST',
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						var address_id = uni.getStorageSync('address_id')
						if(that.id == address_id) {
							uni.removeStorageSync('address_id')
						}
						$api.info(res.info)
						$api.jump(-1)
					}
				})
			},
			selectmap() {
				uni.chooseLocation({
					success: function (res) {
						console.log(res);
						// that.areas = res.name
						that.address = res.address
						that.longitude = res.longitude
						that.latitude = res.latitude
						uni.request({
							url:'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location='+res.longitude+','+ res.latitude +'&key=' + that.mapKey + '&radius=1000&extensions=all',
							method: 'GET',
							success(res) {
								let data = res.data.regeocode.addressComponent
								that.province = data.province
								if(typeof(data.city) == 'string') {
									that.city = data.city
								} else {
									that.city = data.province
								}
								that.area = data.district
								that.areas = that.province + that.city + that.area
							},
							fail(error) {
								console.log(error);
							}
						});
					},
					fail: (err) => {
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		padding: 0 30rpx;
		.form {
			margin-top: 22rpx;
			.item {
				padding: 26rpx 0;
				.u-textarea {
					padding: 0 !important;
				}
			}
			.left {
				width: 200rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}
			.address {
				width: 490rpx;
				font-size: 30rpx !important;
			}
		}
		.btn {
			width: 100%;
			height: 84rpx;
			background: #506DFF;
			border-radius: 42rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 84rpx;
			margin-bottom: 66rpx;
		}
		.bottom {
			width: 100%;
			margin-bottom: 66rpx;
			.del_btn {
				width: 230rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 1px solid #506DFF;
				text-align: center;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #506DFF;
			}
			.save_btn {
				width: 430rpx;
				height: 88rpx;
				background: #506DFF;
				border-radius: 44rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>