moxuan_takeaway_user/my/address/add.vue

<template>
	<view class="" v-if="XCXIsSelect=='是'">
		<form>
			<view class="cu-form-group">
				<view class="title">联系人</view>
				<input placeholder="请输入联系人" name="input" v-model="form.userName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">联系电话</view>
				<input placeholder="请输入联系电话" name="input" v-model="form.userPhone" maxlength="11"></input>
			</view>
			
			<view v-if="form.isInner">
				<view class="cu-form-group">
					<view class="title">选择校区</view>
					<view style="width: 50vw;text-align: end;">
						<picker style="padding-right: 0;" @change="bindPickerChange_station" :value="stationIndex" range-key="stationName" :range="stationList">
							<view :style="stationIndex==null?'color:#aaa':''">
								{{stationIndex==null?"请选择校区":stationList[stationIndex].stationName}}
							</view>
						</picker>
					</view>
				</view>
				
				<view class="cu-form-group">
					<view class="title">选择地址</view>
					<view style="width: 50vw;text-align: end;">
						<picker style="padding-right: 0;" @change="bindPickerChange" :value="addressIndex" range-key="addressDetail" :range="addressList">
							<view :style="addressIndex==null?'color:#aaa':''">
								{{addressIndex==null?"请选择地址":addressList[addressIndex].addressDetail}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-form-group" v-if="form.insideDeliveryFee">
					<view class="title">当前特殊地址跑腿费:</view>
					<view style="color: #5E9289;">
						¥{{form.insideDeliveryFee}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">备注信息</view>
					<view style="width: 60vw;height: 200rpx;border-radius: 12rpx;background-color: #F5F5F5;">
						<textarea v-model="form.remark" style="margin: 0; padding: 12rpx;height: 200rpx;"/>
					</view>
				</view>
			</view>
			
			<view v-else>
				<view class="cu-form-group" @click="pickerShow">
					<view class="title">所在地区</view>
					<input placeholder="请选择地区" name="input" disabled v-model="form.address"></input>
					<text class='cuIcon-locationfill text-orange'></text>
				</view>
				<view class="cu-form-group">
					<view class="title">详细地址</view>
					<input placeholder="请输入详细地址" name="input" v-model="form.addressDetail"></input>
				</view>
			</view>
			
			
			<view class="cu-form-group">
				<view class="title">设为默认</view>
				<switch @change="SwitchA" :class="form.addressDefault?'checked':''"
					:checked="form.addressDefault?true:false"></switch>
			</view>
		</form>

		<view class="btn" v-if="!id">
			<view class="address_push" @click="submit">保存</view>
		</view>
		<view class="btn" v-if="id">
			<view class="address_push" @click="updata">修改</view>
		</view>
	</view>
	<view v-else>
		<view style="font-size: 28upx;" v-html="content"></view>
	</view>
</template>

<script>
	import {
		requestAndroidPermission,
		gotoAppPermissionSetting
	} from '@/components/permission.js'
	export default {
		data() {
			return {
				form: {
					addressId: '',
					userName: '',
					userPhone: '',
					address: '',
					addressDetail: '',
					addressDefault: 0, //默认地址 0不默认 1默认
					lng: '',
					lat: '',
					isInner:false,
					insideAddressId:'',
					insideDeliveryFee:0,
					remark:""
				},
				region: '',

				id: '',
				latitude: '',
				longitude: '',
				XCXIsSelect: '是',
				content: '',
				addressList: [],
				addressIndex: null,
				stationList: [],
				stationIndex: null,
				stationId:'',
				deliveryFee:0
			}
		},
		onLoad(option) {
			this.XCXIsSelect = this.$queue.getData('XCXIsSelect') ? this.$queue.getData('XCXIsSelect') : '是';
			if (this.XCXIsSelect == '否') {
				this.getGuize()
				uni.setNavigationBarTitle({
					title: '隐私政策'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '添加地址'
				});
			}
			this.getSetData()
			this.getStationData()
			this.id = option.id
			if (option.id) {
				this.getAddressDet(option.id)
				uni.setNavigationBarTitle({
					title: "修改地址"
				})
			}
		},
		methods: {
			getSetData(){
				this.$Request.get("/app/common/type/442").then(res => {
					if(res.code == 0){
						if(res.data.value == '1'){
							this.form.isInner = true
						}else{
							this.form.isInner = false
						}
					}
				});
			},
			getStationData(){
				this.$Request.get("/app/riderStation/stationList").then(res => {
					// console.log(res);
					if(res.code == 0){
						this.stationList = res.data
					}
				});
			},
			bindPickerChange_station(e){
				this.stationIndex = e.detail.value
				this.stationId = this.stationList[this.stationIndex].id
			    this.form.address =this.stationList[this.stationIndex].stationName
				this.getAddress(this.stationId ,false)
			},
			getAddress(stationId ,type){
				this.$Request.get(`/app/inside-address/list/${stationId}`).then(res => {
					// console.log(res);
					if(res.code == 0){
						this.addressList = res.data
						
						if(type){
							this.addressIndex = this.addressList.findIndex((ele)=>ele.id == this.form.insideAddressId)
						}
					}
				});
			},
			bindPickerChange(e){
				this.addressIndex = e.detail.value
				this.form.lng = this.addressList[this.addressIndex].lng
				this.form.lat = this.addressList[this.addressIndex].lat
				
				this.form.province = this.addressList[this.addressIndex].province
				this.form.city = this.addressList[this.addressIndex].city
				this.form.district = this.addressList[this.addressIndex].district
				this.form.addressDetail = this.form.province + this.form.city + this.form.district + this.addressList[this.addressIndex].addressDetail
				this.form.insideAddressId =  this.addressList[this.addressIndex].id
				this.form.insideDeliveryFee = this.addressList[this.addressIndex].deliveryFee
			},
			getGuize() {
				this.$Request.getT('/app/common/type/237').then(res => {
					if (res.code == 0) {
						this.content = res.data.value;
						// this.tit = res.data.min
					}
				});
			},
			pickerShow() {
				let that = this
				// An highlighted block
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						let latitude = res.latitude; //纬度
						let longitude = res.longitude; //经度
						that.form.lng = longitude
						that.form.lat = latitude

						that.form.addressDetail = res.name

						let data = {
							lat: latitude,
							lng: longitude
						}
						that.$Request.get("/app/address/selectCity", data).then(res => {
							if (res.code == 0) {
								that.form.province = res.data.province
								that.form.city = res.data.city
								that.form.district = res.data.district
								that.form.address = res.data.province + res.data.city + res.data.district
							}
						});
					},fail(e) {
						console.log(e)
						uni.showModal({
							title: '温馨提示',
							content: '您的定位权限未开启，请开启后再来刷新操作吧！',
							showCancel: true,
							cancelText: '取消',
							confirmText: '确认',
							success: res => {
								if(res.confirm){
									// #ifdef MP-WEIXIN
									uni.openSetting({ // 打开设置页
										success(rea) {
											console.log(rea.authSetting)
										}
									});
									// #endif
									// #ifdef APP-PLUS
									gotoAppPermissionSetting()
									// #endif
								}
							}
						});
					}
				});
			},
			SwitchA(e) {
				// console.log(e.detail.value)
				this.form.addressDefault = e.detail.value
			},
			// 选择地区回调
			regionConfirm(e) {
				console.log(e)
				this.form.province = e.province.label
				this.form.city = e.city.label
				this.form.area = e.area.label
				this.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
				console.log(this.region)
			},
			// 提交
			submit() {
				if (!this.form.userName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.form.userPhone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return
				}
				
				let phonereg = /^1[3-9]\d{9}$/
				if (!phonereg.test(this.form.userPhone)) {
					uni.showToast({
						title: '请输入正确联系电话',
						icon: 'none'
					})
					return
				}
				
				if(this.form.isInner){
					if (!this.form.address) {
						uni.showToast({
							title: '请选择骑手站点',
							icon: 'none'
						})
						return
					}
					if (!this.form.addressDetail) {
						uni.showToast({
							title: '请选择详细地址',
							icon: 'none'
						})
						return
					}
				}else{
					if (!this.form.address) {
						uni.showToast({
							title: '请选择所在地区',
							icon: 'none'
						})
						return
					}
					if (!this.form.addressDetail) {
						uni.showToast({
							title: '请输入详细地址',
							icon: 'none'
						})
						return
					}
				}
				
				this.form.addressDefault = this.form.addressDefault ? 1 : 0
				console.log(this.form);
				this.$Request.postJson("/app/address/insertAddress", this.form).then(res => {
					console.log(res,'地址')
					if (res.code == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					}
				});
			},
			// 修改
			updata() {
				if (!this.form.userName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.form.userPhone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
					return
				}
				if (!this.form.addressDetail) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}

				let data = {
					addressId: this.form.addressId,
					userName: this.form.userName,
					userPhone: this.form.userPhone,
					province: this.form.province,
					city: this.form.city,
					district: this.form.district,
					address: this.form.address,
					addressDetail: this.form.addressDetail,
					addressDefault: this.form.addressDefault ? 1 : 0,
					lng: this.form.lng,
					lat: this.form.lat,
					insideAddressId:this.form.insideAddressId
				}
				console.log(data);
				this.$Request.postJson("/app/address/updateAddress", data).then(res => {
					console.log(res);
					if (res.code == 0) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1500)
					}
				});
			},
			// 根据id获取地址详情
			getAddressDet(e) {
				let data = {
					addressId: e,
				}
				this.$Request.get("/app/address/selectAddressById",data).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.form.addressId = res.data.addressId
						this.form.userName = res.data.userName
						this.form.userPhone = res.data.userPhone
						this.form.address = res.data.province + res.data.city + res.data.district
						this.form.addressDetail = res.data.addressDetail
						this.form.lng = res.data.lng
						this.form.lat = res.data.lat
						this.form.addressDefault = res.data.addressDefault
						this.form.province = res.data.province
						this.form.city = res.data.city
						this.form.district = res.data.district
						this.form.insideAddressId = res.data.insideAddressId
						this.form.insideDeliveryFee = res.data.insideDeliveryFee
						this.form.remark = res.data.remark
						
						this.stationIndex = this.stationList.findIndex((ele)=>ele.id == res.data.stationId)
						if(this.stationIndex){
							this.getAddress(res.data.stationId ,true)
						}
					}
				});
			}

		}

	}
</script>

<style>
	page {
		background-color: #fff !important;
	}

	/* 添加收货地址 */
	.btn {
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: white;
		margin-top: 30rpx;
	}

	.address_push {
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		border-radius: 100rpx;
		color: white;
		text-align: center;
		line-height: 80rpx;
		font-size: 35rpx;
		background: linear-gradient(90deg, #5D9188 0%, #71A296 100%);
	}
</style>