web-app-v1/pages/zbs-addAddress/addAddress.vue

<template>
	<view class="address">
		<custom-toast ref='toast'></custom-toast>
		<view>
			<view class="form">
				<view class="form_item">
					<view class="label">
						<text>收货人</text>
						<text class="star">*</text>
					</view>
					<input v-model="adsInfo.username" type="text" placeholder="请填写真实姓名" />
				</view>
				<view class="form_item">
					<view class="label">
						<text>手机号</text>
						<text class="star">*</text>
					</view>
					<input type="text" placeholder="请填写手机号" v-model="adsInfo.mobile" maxlength="11">
				</view>
				<view class="form_item">
					<view class="label">
						<text>省市县区</text>
						<text class="star">*</text>
					</view>
					<view class="picker_box">
						<picker mode="region" @change="RegionChange" :value="region">
							<view class="picker">
								<text :style="{ color: adsInfo && adsInfo.area ? '#333' : '#999' }">{{region.length==0?'请点击选择地址':region[0]+'-'+region[1]+'-'+region[2]}}</text>
								<text class="cuIcon-right"></text>
							</view>
						</picker>
					</view>

				</view>
				<view class="form_item">
					<view class="label">
						<text>详细地址</text>
						<text class="star">*</text>
					</view>
					<input type="text" placeholder="请填写详细地址" v-model="adsInfo.address">
				</view>
			</view>
			<view class="sub_btn" @click="saveAds">保存地址</view>
		</view>
		<!-- <view class="ads_box" v-else>
			<view class="box_item" v-if="adsInfo.username">
				<view>
					<text class="user_name">{{adsInfo.username}}</text>
					<text class="user_phone">{{adsInfo.mobile}}</text>
				</view>
				<view class="user_ads" v-if="adsInfo.province">
					{{adsInfo.province}}{{adsInfo.city}}{{adsInfo.area}}{{adsInfo.address}}
				</view>
				<view class="opera_box">
					<view @click="isAdd=true">编辑</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		api_getAddress,
		api_UpdateAddAddress
	} from '../../apis/zbs.js' //添加地址接口
	export default {
		data() {
			return {
				region: [],
				adsInfo: {
					username: '',
					mobile: '',
					province: '',
					city: '',
					area: '',
					address: ''
				},
				isAdd: false,
				isPoint: true, //防连点
			};
		},
		computed: {
			userServerInfo() {
				//用户服务器信息
				return this.$store.state.userinfo;
			}
		},
		onShow() {
			//获取地址
			api_getAddress({ user_id: this.userServerInfo.id }).then(res => {
				if (res.code === 200) {
					if (res.data && res.data != 'null') {
						const {
							province,
							city,
							area
						} = res.data
						this.adsInfo = res.data
						console.log(this.adsInfo,'info')
						this.region = [province, city, area]
					}
				} else {
					this.$refs.toast.hover(res.msg || '获取地址失败')
				}
			})
		},
		methods: {
			//选择地址
			RegionChange(e) {
				this.region = e.detail.value
			},
			//保存地址
			saveAds() {
				let _this = this;
				console.log('提交')
				if (!this.isPoint) {
					uni.showModal({
						content: '请稍后重试~',
						showCancel: false
					});
					return
				}
				const {
					username,
					mobile,
					address
				} = _this.adsInfo
				if (!username.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) {
					this.$refs.toast.hover('真实姓名不符合要求')
					return
				}
				if (!mobile || mobile.length != 11) {
					this.$refs.toast.hover('手机号格式不正确')
					return
				}
				if (this.region.length === 0) {
					this.$refs.toast.hover('请选择地址')
					return
				}
				if (!address) {
					this.$refs.toast.hover('详细地址不能为空')
					return
				}
				this.isPoint = false;
				this.adsInfo.province = this.region[0]
				this.adsInfo.city = this.region[1]
				this.adsInfo.area = this.region[2]
				this.adsInfo.user_id = this.userServerInfo.id
				api_UpdateAddAddress(this.adsInfo).then(res => {
					if (+res.code === 200) {
							this.$refs.toast.hover('保存成功')
							this.isAdd = false
							this.pageTitle = '地址管理'
						} else {
							this.$refs.toast.hover(res.msg || '保存失败')
						}
					}).catch(err => {
						this.isPoint = true;
						uni.hideLoading();
					})
					.finally(() => {
						uni.hideLoading();
						setTimeout(() => {
							this.isPoint = true;
						}, 2000);
					});
			},

		},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.address {
		// @include page();
		width: 100%;
		height: 100%;
		.form {
			width: 100%;
			margin-top: 30rpx;


			.form_item {
				width: 690rpx;
				margin: 0 auto;

				.star {
					color: #f00;
					margin-left: 10rpx;
				}

				.label {
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 24rpx;
				}

				input {
					width: 100%;
					height: 88rpx;
					font-size: 34rpx;
					border-bottom: 2rpx solid #E9E9E9;
					color: #333;
				}

				.picker_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #E9E9E9;
					min-height: 88rpx;

					picker {
						width: 100%;
						.cuIcon-right {
							font-size: 45rpx;
							color: #999;
						}
						.picker {
							width:100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 34rpx;
						}
					}

					

					

				}
			}
		}

		.sub_btn {
			width: 570rpx;
			height: 88rpx;
			margin: 60rpx auto;
			background: linear-gradient(93deg, #F97C55 0%, #F44545 100%);
			opacity: 1;
			border-radius: 44rpx;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 88rpx;
		}

		.ads_box {
			margin-top: 30rpx;

			.box_item {
				padding: 24rpx;
				box-sizing: border-box;
				background: #fff;
				width: 702rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin: 24rpx auto 0;

				.user_name {
					font-size: 34rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}

				.user_phone {
					font-size: 32rpx;
					color: #999;
				}

				.user_ads {
					margin: 24rpx 0;
					font-size: 32rpx;
					color: #333;
				}

				.opera_box {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					view {
						width: 120rpx;
						height: 60rpx;
						background: #F8F8F8;
						border-radius: 30rpx;
						opacity: 1;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}


			}
		}
	}
</style>