mplace_source/pages/my/add-address.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack :title="id?'编辑地址': '新增地址'">
			<block slot="content">{{id?'编辑地址': '新增地址'}}</block>
		</bar-title>
		
		<!--表单-->
		<view class="cu-form-group margin-top">
			<view class="title">收货人名</view>
			<input v-model="name" placeholder="您的姓名"/>
		</view>
		<view class="cu-form-group">
			<view class="title">手机号码</view>
			<input v-model="phone" placeholder="卖家和快递员联系您的方式"/>
		</view>
		<view class="cu-form-group">
			<view class="title">所在地区</view>
			<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="areasIndex" range-key="name" :range="areas" @change="multChange">
				<view class="picker">
					<block v-for="(item,index) in areas" :key="index" v-if="index < 3">
						{{areas[index] && areas[index][areasIndex[index]] && areas[index][areasIndex[index]].name}}
						<block v-if="index < areas.length - 1">，</block>
					</block>
				</view>
			  </picker>
		</view>
		<view class="cu-form-group">
			<view class="title">详细地址</view>
			<input v-model="address" placeholder="请输入详细的地址信息"/>
		</view>
		
		<view class="bg-white wecanui-footer-fixed foot-pb">
			<view class="flex flex-direction">
				<button class="cu-btn bg-red" @click="submit">提交保存</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle,
		},
		data() {
			return {
				name: '',
				phone: '',
				id: '',
				address: '',
				addressShow: false,
				areas: [[{name: '省份选择', value: '-1'}],[{name: '城市选择', value: '-1'}],[{name: '县区选择', value: '-1'}]],
				areasIndex: [0,0,0],
				roleDeep: 4,
				type: 2
			}
		},
		onLoad(options) {
			this.id = options.id || '';
			if(!this.id) {
				this.loadAreas(0, 1);
				return;
			}
			
			this.reqByuser({
				url: '?l=address.getInfo',
				data: {
					id: this.id
				},
				success: res => {
					if(res.data.status == 1) {
						let data = res.data.data;
						
						this.phone = data.phone;
						this.address = data.address;
						this.city = data.city;
						this.type = data.type;
						this.name = data.name;
						this.initAreasIndex([data.province_id, data.city_id, data.county_id])
					}
				}
			})
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			initAreasIndex(areas) {
				let _areas = [].concat(areas);
				let loop = (id, level) => {
					this.loadAreas(id, level, 0, res => {
						let index = res.findIndex(item => areas[level-1] == item.id);
						if(level == 1) {
							index++;
						}
						this.areasIndex[level-1] = Math.max(0, index);
						let nextId = _areas.shift();
						if(nextId && level<3) {
							loop(nextId, level+1)
						} else {}
					}, 1);
				}
				loop(0,1)
			},
			loadAreas(parent, level, next, callback) {
				if(level > 4) return;
				this.req({
					url: 'http://center.yuandaibao.com/package/area/?l=data.get',
					data: {
						level,
						parent,
					},
					success: res => {
						if(res.data.status == 1) {
							let data = res.data.data;
							if(level-1 < 3) {
								let list = data.list;
								if(parent == 0) {
									list = [{name: '省份选择', value: '-1'}, ...list]
								}
								this.areas.splice(level-1,1,list)
							}
							typeof callback == 'function' && callback(data.list)
							if(next && level < this.roleDeep - 1) {
								// let firstNode = data.list[0].value == -1 ? data.list[1] : data.list[0];
								let firstNode = data.list[0];
								if(firstNode.id !== -1) {
									this.loadAreas(firstNode.id, level + 1);
								}
							}
						}
					}
				});
			},
			multChange(e) {
				let area = this.areas.map((item, index) => {
					return item[e.detail.value[index]] && item[e.detail.value[index]].value
				}).join(',');
				area += ',' + this.streetAreas[this.streetIndex].value;
				if (this.areas.length == this.roleDeep && area.indexOf('-1') == -1) {
					const role = this.roles[this.roleIndex];
				}
			},
			bindMultiPickerColumnChange(e) {
				// 矫正下游select index
				let areasIndex = this.areasIndex.map((item, index) => {
					if(index == e.detail.column) {
						return e.detail.value
					}
					if(index < e.detail.column) {
						return item;
					}
					return 0;
				});
				this.$set(this, 'areasIndex', areasIndex);
				
				if(e.detail.column < this.roleDeep -1) {
					let value = this.areas[e.detail.column][e.detail.value].id;
					if(e.detail.column == 0) {
						this.areas.splice(2,1, [{name: '县区选择', value: '-1'}])
					}
					this.streetAreas = [{name: '街道选择', value: '-1'}];
					this.streetIndex = 0;
					if(value == -1) {
						let arr = [].concat(this.areas);
						arr.splice(e.detail.column+1, 5)
						this.areas = arr;
						return;
					}
					this.loadAreas(this.areas[e.detail.column][e.detail.value].id, e.detail.column+2, 1);
				}
			},
			// 打开窗口
			selectAddress(){
				this.$refs.addressEl.show();
			},
			// 确认选中
			confirmChange(address){
				console.log(address)
				this.address = address.province + '/' + address.city + '/' + address.area;
			},
			submit() {
				let { name, phone, type, id, address } = this;
				let area = this.areas.map((item, index) => item[this.areasIndex[index]].id).join(',');
				// let _address = this.areas.map((item, index) => item[this.areasIndex[index]].name).join('')
				
				// _address += address;
					
				if(!name) {
					uni.showToast({
						icon:'error',
						title:'请填写昵称'
					})
					return;
				}
				if(!phone) {
					uni.showToast({
						icon:'error',
						title:'请填写手机号'
					})
					return;
				}
				if(!/1\d{10}/.test(phone)) {
					uni.showToast({
						icon:'error',
						title:'手机号格式错误'
					})
					return;
				}
				if(!area || area.indexOf('-1') > -1) {
					uni.showToast({
						icon:'error',
						title:'请填写地址'
					})
					return;
				}
				if(!address) {
					uni.showToast({
						icon:'error',
						title:'请填写详细地址'
					})
					return;
				}
				
				let data = {
						name,  
						province: this.areas[0][this.areasIndex[0]].id,
						city: this.areas[1][this.areasIndex[1]].id, 
						county: this.areas[2][this.areasIndex[2]].id, 
						address,
						phone, type, id
					};
					
				this.reqByuser({
					url: '?l=address.up',
					data,
					success: res => {
						if(res.data.status == 1) {
							uni.showToast({
								icon: 'success',
								title: '提交成功'
							})
							uni.navigateBack({})
						}
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
	.wecanui-footer-fixed .flex-direction {
		padding: 18.18upx;
	}
</style>