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

<template>
	<view class="address">
		<custom-toast ref='toast'></custom-toast>
		<view>
			<w-picker ref="Selector" mode="region" :defaultVal="pickerDefaultVal" themeColor="#F76454"
				@confirm="onConfirm" />
			<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" style="font-size: 17px;" @tap="choosePicker">
						<text
							:style="{ color: adsInfo && adsInfo.area ? '#333' : '#999' }">{{region.length==0?'请点击选择地址':region[0]+'-'+region[1]+'-'+region[2]}}</text>
						<text class="iconfont iconzhcc_xiangxiajiantou"></text>
					</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 WPicker from '@/components/w-picker/w-picker.vue';
	import cityData from '@/components/citypicker/city-data/city.js';
	import areaData from '@/components/citypicker/city-data/area.js';
	import provinceData from '@/components/citypicker/city-data/province.js';
	import {
		api_getAddress,
		api_UpdateAddAddress
	} from '../../apis/zbs.js' //添加地址接口
	export default {
		components: {
			WPicker
		},
		data() {
			return {
				region: [],
				adsInfo: {
					username: '',
					mobile: '',
					province: '',
					city: '',
					area: '',
					address: '',
				},
				pickerDefaultVal: ['河南省', '郑州市', '金水区'],
				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
						if (province !== '' && city !== '' && area != '') {
							this.region = [province, city, area]
						}

						console.log(this.adsInfo, 'info')
					}
				} else {
					uni.showToast({
						title: res.msg || '获取地址失败',
						duration: 2333,
						icon: 'none'
					})
				}
			})
		},
		methods: {
			//选择地址
			choosePicker() {
				// 显示地址选择器
				this.$refs.Selector.show();
			},
			onConfirm(e) {
				// 选择地址选择器
				this.region = [e.checkArr[0], e.checkArr[1], e.checkArr[2]]
				this.adsInfo.province = e.checkArr[0];
				this.adsInfo.city = e.checkArr[1];
				this.adsInfo.area = e.checkArr[2];
			},
			//保存地址
			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}$/)) {
					uni.showToast({
						title: '真实姓名不符合要求',
						duration: 2333,
						icon: 'none'
					})
					return
				}
				if (!mobile || mobile.length != 11) {
					uni.showToast({
						title: '手机号格式不正确',
						duration: 2333,
						icon: 'none'
					})
					return
				}
				if (this.region.length === 0) {
					uni.showToast({
						title: '请选择地址',
						duration: 2333,
						icon: 'none'
					})
					return
				}
				if (!address) {
					uni.showToast({
						title: '详细地址不能为空',
						duration: 2333,
						icon: 'none'
					})
					return
				}
				this.isPoint = false;
				this.adsInfo.user_id = this.userServerInfo.id
				api_UpdateAddAddress(this.adsInfo).then(res => {
						if (+res.code === 200) {
							uni.showToast({
								title: '保存成功',
								duration: 2333,
								icon: 'none'
							})

							this.isAdd = false
							this.pageTitle = '地址管理'
							uni.navigateBack();
						} else {
							uni.showToast({
								title: res.msg || '保存失败',
								duration: 2333,
								icon: 'none'
							})
						}
					}).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>