xc-app/pages/mine/addAddress.vue

<template>
	<view class="new-address-page">
		<HeaderCom></HeaderCom>
		<view class="main">
			<view class="item">
				<view class="label">收货人</view>
				<input type="text" class="value" placeholder-class="value-place" v-model="form.receiver" placeholder="请填写收货人">
			</view>
			<view class="item">
				<view class="label">联系电话</view>
				<input type="text" class="value" placeholder-class="value-place" v-model="form.phone" placeholder="请填写收货人电话号码">
			</view>
			<view class="item ">
				<view class="label">所在地区</view>
				<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion" style="width: 500rpx;height: 30rpx;z-index: 99;"></pick-regions>
				<input type="text" class="value address-value" disabled v-model="regionName" placeholder="请选择所在地区" placeholder-class="value-place">
			</view>
			<view class="item borderBottom">
				<view class="label">详细地址</view>
				<input type="text" class="value" placeholder-class="value-place" v-model="form.address" placeholder="请填写详细地址">
			</view>
		</view>
		<view class="main">
			<view class="item borderBottom" style="justify-content: space-between">
				<view class="label">设为默认地址</view>
				<image src="@/static/new/address/kg.png" mode="aspectFit" class="status-icon" v-if="form.isDefault === 1" @click="setDefault"></image>
				<image src="@/static/new/address/kg-n.png" mode="aspectFit" class="status-icon" v-if="form.isDefault === 0" @click="setDefault"></image>
			</view>
		</view>
		<view class="footer">
			<view class="footer-btn" @click="save">保存</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/addAddress"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { addAddress,addressDetail,editAddress } from '@/API/user.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import HeaderCom from '@/pages/components/header.vue'
	export default{
	mixins: [myMixins],
		data(){
			return {
				visible:false,
				id:"",
				region: [],
				defaultRegion: ['北京市', '市辖区', '东城区'],
				defaultRegionCode: '',
				form:{
					receiver:"",//收货人
					phone:"",//联系电话
					province:"",//省份
					city:"",//城市
					area:"",//城区
					address:"",//详细地址
					isDefault:0,//是否默认{0:否,1:是
				}
			}
		},
		components:{pickRegions,HeaderCom},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.join('-')
			},
			regionNameList() {
				// 转为字符串
				return this.region
			},
		},
		onLoad(opation) {
			console.log(opation)
			this.id = opation.id ? opation.id : ''
			// 有id时获取详情
			if(this.id){
				this.getDetail()
			}
		},
		methods:{
			// 获取详情
			getDetail(){
				uni.showLoading()
				addressDetail(this.id).then(res => {
					uni.hideLoading()
					console.log(res)
					if(res.code === 200){
						this.region = [res.data.province,res.data.city,res.data.area]
						this.form = res.data
					}else{
						this.$api.msg(res.message)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 设置默认地址
			setDefault(){
				if(this.form.isDefault === 0){
					this.form.isDefault = 1;
				}else{
					this.form.isDefault = 0;
				}
			},
			// 保存收货地址
			save(){
				if(!this.form.receiver){
					this.$api.msg('请输入收货人');
					return;
				}
				if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.form.phone))) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				if(this.region.length > 0){
					this.form.province = this.region[0]
					this.form.city = this.region[1]
					this.form.area = this.region[2]
				}else{
					this.$api.msg('请选择地址');
					return;
				}
				if(!this.form.address){
					this.$api.msg('请输入详细地址');
					return;
				}
				uni.showLoading()
				if(this.id){
					editAddress(this.id,this.form).then(res => {
						uni.hideLoading()
						console.log(res)
						if(res.code === 200){
							uni.navigateBack()
						}else{
							this.$api.msg(res.message)
						}
					}).catch(() => {
						uni.hideLoading()
					})
				}else{
					addAddress(this.form).then(res => {
						uni.hideLoading()
						console.log(res)
						if(res.code === 200){
							uni.navigateBack()
						}else{
							this.$api.msg(res.message)
						}
					}).catch(() => {
						uni.hideLoading()
					})
				}
				
			},
			// 获取选择的地区
			handleGetRegion(region) {
				// debugger
				this.region = region.map(({
					name
				}) => name);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.new-address-page{
		padding: 112rpx 32rpx 32rpx 32rpx;
		.main{
			background-color: #fff;
			margin-bottom: 24rpx;
			border-radius: 24rpx;
			padding: 0 32rpx;
			.item{
				display: flex;
				align-items: center;
				height: 102rpx;
				border-bottom: 1px solid #F2F2F2;
				position: relative;
				.label{
					// font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					width: 192rpx;
				}
				.value{
					// font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}
				.address-value{
					position: absolute;
					top: 30rpx;
					left: 190rpx;
				}
				.value-place{
					// font-weight: 500;
					font-size: 32rpx;
					color: #CCCCCC;
				}
				.status-icon{
					width: 80rpx;
					height: 40rpx;
				}
			}
			.borderBottom{
				border: none;
			}
		}
		.footer{
			width: 100%;
			height: 144rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			.footer-btn{
				width: 686rpx;
				height: 96rpx;
				background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 16rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>