cbz/page_shop/pages/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.stop="openmap">
				<view class="left">所在地区</view>
				<u-input v-model="addressObj.province + addressObj.city + addressObj.area" border="none" disabled disabledColor="#fff" placeholder="请选择所在地区"></u-input>
				<u-icon name="map-fill" color="#506DFF" size="13"></u-icon>
			</view>
			<view class="hflex acenter jbetween item">
				<view class="left">详细地址</view>
				<u-input v-model="addressObj.address" border="none" placeholder="请输入街道、楼牌号"></u-input>
			</view>
			<view class="hflex acenter jbetween item">
				<view class="left">设为默认地址</view>
				<u-switch v-model="is_active" activeColor="#506dff" inactiveColor="rgb(230, 230, 230)" @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: '',
				addressObj: {}
			}
		},
		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.addressObj.province = data.province
				that.addressObj.city = data.city
				that.addressObj.area = data.area
				that.addressObj.areas = data.province + that.city + that.area
				that.addressObj.address = data.address
				
				that.id = data.id
				if(data.type) {
					that.is_active = true
				} else {
					that.is_active = false
				}
			},
			
			// 选择地区
			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]
			},
			openmap() {
				console.log('选择地址');
				uni.getLocation({
					type: 'wgs84',
					success: (res)=>{
						console.log(res);
						if(res.longitude && res.latitude){
							$api.jump('/pages/user/map?lng='+res.longitude+'&lat='+res.latitude)
						}
					},
					fail:()=>{
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if(!status['scope.userLocation']){
									uni.showModal({
										title:"是否授权当前位置",
										content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success:(tip)=>{
											if(tip.confirm){
												uni.openSetting({
													success:(data)=>{
														if(data.authSetting['scope.userLocation']===true){
															uni.showToast({
																title:"授权成功",
																icon:"success",
																duration:1000
															})
															uni.getLocation({
																type: 'wgs84',
																success: (res)=>{
																	console.log('当前位置的经度：' + res.longitude);
																	console.log('当前位置的纬度：' + res.latitude);
																	$api.jump('/pages/user/map?lng='+res.longitude+'&lat='+res.latitude)
																}
															})
														}else{
															uni.showToast({
																title:"授权失败",
																icon:"none",
																duration:1000
															})
														}
													}
												})
											}
										}
									})
								}else{
									uni.getLocation({
										type: 'wgs84',
										success: (res)=>{
											console.log('当前位置的经度：' + res.longitude);
											console.log('当前位置的纬度：' + res.latitude);
											$api.jump('/pages/user/map?lng='+res.longitude+'&lat='+res.latitude)
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title:"调用授权窗口失败",
									icon:"none",
									duration:1000
								})
							}
						})
					}
				})
			},
			// 设置默认地址
			change(e) {
				that.is_active = e
			},
			// 添加收获地址
			addAddress() {
				uni.showLoading({
					title: '添加中',
					mask:true
				})
				if($api.formCheck(that.name,'required') && $api.formCheck(that.phone,'phone') && $api.formCheck(that.addressObj.address,'required')) {
					$api.req({
						url: '/data/api.User/add_address',
						method: 'POST',
						data: {
							type: that.is_active?1:0,
							name: that.name,
							phone: that.phone,
							province: that.addressObj.province,
							city: that.addressObj.city,
							area: that.addressObj.area,
							address: that.addressObj.address
						}
					}, function(res) {
						$api.info(res.info)
						if(res.code == 1) {
							uni.hideLoading()
							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.User/save_address',
						method: 'POST',
						data: {
							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)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
		.form {
			margin-top: 22rpx;
			.item {
				padding: 26rpx 0;
			}
			.left {
				width: 200rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}
		}
		.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>