front/pages/user/address/add.vue

<template>
	<view class="content bg-drak ft-main">
	  <use-tabbar :tabbar="false"></use-tabbar>
	  <view class="gap"></view>
	
	  <view class="row dflex padding-lr">
	    <text class="tit">收货人</text>
	    <input class="input" placeholder="请输入收货人姓名" maxlength="140" v-model="fetch.name"/>
	  </view>
	
	  <view class="row dflex padding-lr">
	    <text class="tit">手机号</text>
	    <input class="input" placeholder="请输入手机号码" maxlength="140" type="number" pattern="[0-9]*" v-model="fetch.phone"/>
	  </view>
	
	  <view class="row dflex padding-left">
	    <text class="tit">所在地区</text>
	    <view class="dflex-b flex1">
	      <view class="flex1 input_t" @click="openAddress">{{ fetch.area_string }}</view>
	      <sx-address-picker v-model="address" :selected="fetch.area" @confirm="addressConfirm"/>
	    </view>
	  </view>
	
	  <view class="use-area margin-lr-sm">
	    <view class="tit">详细地址</view>
	    <textarea class="bg-drak w-full border-radius-sm margin-top-sm padding" placeholder="请输入详细地址" maxlength="120" style="min-height: 70px; height: auto;" v-model="fetch.address"/>
	  </view>
	
	  <view class="gap"></view>
	
	  <view class="row dflex-b padding-lr">
	    <u-subsection :list="type" :current="fetch.type" @change="setType" mode="button"></u-subsection>
	  </view>
	
	  <view class="padding w-full margin-top-big" @click="save">
	    <view class="dflex-b border-radius-big">
	      <view class="tac padding-tb-sm flex1 bg-base">提交</view>
	    </view>
	  </view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				type: [],
				address:false,
				
				fetch: {
					id:-1,
					province_id:0,
					city_id:0,
					county_id:0,
					town_id:0,
					address:'',
					name:'',
					phone:'',
					type:0,
					area:['CN', '11', '1101', '110107', '110107005'],
					area_string: '请选择地址',
				}
			};
		},
		onLoad(options) {
			this.type = ['默认地址', '普通地址'];
			if (options) {
				if (options.temp == 1) {
					this.type.push('临时地址');
				}
				if (options.id) {
					this.fetch.id = options.id;
				}
			}
			this.loadData();
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, 'address.getInfo', {id:this.fetch.id});
			},
			setType(index) {
				this.fetch.type = index;
			},
			save() {
				if (!this.fetch.name) {
					return this.Dever.alert('请输入收货人姓名');
				}
				if (!this.fetch.phone) {
					return this.Dever.alert('请输入手机号');
				}
				
				if (!/^1\d{10}$/.test(this.fetch.phone)) {
					return this.Dever.alert('请输入有效手机号');
				}
				
				if (!this.fetch.province_id) {
					return this.Dever.alert('请选择省份');
				}
				if (!this.fetch.city_id) {
					return this.Dever.alert('请选择城市');
				}
				if (!this.fetch.county_id) {
					return this.Dever.alert('请选择区县');
				}
				if (!this.fetch.town_id) {
					return this.Dever.alert('请选择街道');
				}
				if (!this.fetch.address) {
					return this.Dever.alert('请输入详细地址');
				}
				
				this.DeverApi.post('address.up', this.fetch, res => {
					this.Dever.success('提交成功', () => {
						this.Dever.back('user/address/list');
					});
				});
			},
			openAddress() {
				this.address = true
			},
			// 选择地址
			addressConfirm(res) {
				var name = [];
				res.forEach((item, index) => {
					if (index > 0) {
						if (name != '市辖区') {
							name.push(item.name)
						}
						if (index == 1) {
							this.fetch.province_id = item.code;
						} else if (index == 2) {
							this.fetch.city_id = item.code;
						} else if (index == 3) {
							this.fetch.county_id = item.code;
						} else if (index == 4) {
							this.fetch.town_id = item.code;
						}
					}
				});
				this.fetch.area_string = name.join('-')
			},
		}
	};
</script>

<style lang="scss">
	.row {
		background: #fff;
		position: relative;
		height: 104rpx;
		margin: 18rpx;
		border-radius: 18rpx;
	
		.input {
			flex: 1;
			font-size: 28rpx;
			padding-left: 0;
		}
	
		.tit {
			flex-shrink: 0;
			width: 144rpx;
		}
	}
	
	.use-area {
		border-radius: 18rpx;
		background: #fff;
		padding: 28rpx;
		margin-top: 18rpx;
	}


</style>