weapp-v1/pages/addressadd/addressadd.vue

<template>
	<view class="addressadd">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		
		<view class="content">
			<view class="form">
				<view class="name item">
					<text>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</text>
					<input type="text" maxlength="12" placeholder="请输入姓名" v-model="name"/>
					
					<text v-if="name" class="cuIcon-roundclosefill" @tap="clearName"></text>
				</view>
				<view class="line"></view>
				<view class="tel item">
					<text>联系电话：</text>
					<input type="text" maxlength="11" placeholder="请输入联系电话" v-model="tel"/>
					<text v-if="tel" class="cuIcon-roundclosefill" @tap="clearTel"></text>
				</view>
				<view class="line"></view>
				<view class="address1 item">
					<text>所在地区：</text>
					<picker mode="region" @change="RegionChange" :value="region">
						<view class="picker">
							{{region[0]}}  {{region[1]}}  {{region[2]}}
						</view>
					</picker>
					<text class="cuIcon-right"></text>
				</view>
				<view class="line"></view>
				<view class="address2 item">
					<text>详细地址：</text>
					<input type="text" placeholder="请输入详细地址" v-model="address"/>
					<text v-if="address" class="cuIcon-roundclosefill" @tap="clearAddress"></text>
				</view>
			</view>
			<label class="default item" for="checkoutbox">
				<text>设为默认</text>
				<switch class="base"  id="checkoutbox" @change="Switch" :class="setDefault ? 'checked' : '' " :checked="setDefault ? true : false" color="#FA6342"></switch>
			</label>
			<view class="save" @tap="save">保存地址</view>
		</view>
	</view>
</template>

<script>
	import { api_addAddress } from '../../api.js'
	export default {
		data() {
			return {
				pageTitle: '新增地址',
				region: ['河南省', '郑州市', '金水区'],
				setDefault: true,
				name: '',
				tel: '',
				address: ''
			};
		},
		methods: {
			RegionChange(e) {
				this.region = e.detail.value
			},
			Switch(e) {
				this.setDefault = e.detail.value
			},
			clearName () {
				this.name = ''
			},
			clearTel () {
				this.tel = ''
			},
			clearAddress () {
				this.address = ''
			},
			save () {
				if (this.name && this.tel && this.address) {  //首先所有的input 不能为空
					if (this.tel.match(/^1\d{10}$/)) {  //校验手机号
						let address = ''
						this.region.forEach(e => {  //取出piacker 中的地址
							address = address + e + ' '
						})
						this.$ajax.post(api_addAddress, {
							name: this.name,
							tel: this.tel,
							address: address + '-' +this.address,
							status: this.setDefault ? 1 : 0
						}).then(([ , { data: res }]) => {
							if (+res.code === 200) {
								uni.$emit('MESSAGE', '地址添加成功')
								uni.navigateBack()
							} else {
								this.$refs.toast.hover('添加失败')
							}
						})
					} else {
						this.$refs.toast.hover('手机号格式不正确，请重新输入')
					}
				} else {
					this.$refs.toast.hover('请将个人信息填写完整')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addressadd {
		@include page();
		.content {
			background: $custom-nav-borderbot-color;
			.form {
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					input {
						flex: 1;
						height: 100%;
						box-sizing: border-box;
						text-align: left;
					}
					.cuIcon-roundclosefill {
						font-size: 40rpx;
						color: #AAAAAA;
					}
					picker {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 1;
						line-height: 90rpx;
						text-align: center;
					}
				}
				border-top: 10rpx solid $custom-nav-borderbot-color;
				box-sizing: border-box;
				padding: 0 30rpx;
				background: #FFFFFF;
				view {
					height: 90rpx;
					&.line {
						height: 2rpx;
						background: $custom-nav-borderbot-color;
					}
				}
			}
			.default {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				margin-top: 20rpx;
				background: #FFFFFF;
				height: 90rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
			}
			.save {
				width: 400rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: rgba(250,99,66,1);
				color: #FFFFFF;
				margin: 138rpx auto 0;
				box-shadow: 0px 2rpx 4rpx 0px rgba(51,51,51,0.15);
				border-radius: 35rpx;
			}
		}
	}
</style>