qzw_xcx/pages/myOrder/adressManger.vue

<template>
	<view class="content">
		<view class="row b-b"  @click="changeshow">
			<input class="input"  id="box" type="text" :disabled="true" v-model="addressData.addressName" placeholder="省,城市,区县" placeholder-class="placeholder" />
		</view>
		
		<view class="row b-b">
			<input class="input" type="text" v-model="addressData.area" placeholder="详细地址,如街道,楼牌号等" placeholder-class="placeholder" />
		</view>
		
		<view class="row b-b">
			<input class="input" type="text" v-model="addressData.name" placeholder="姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<input class="input" type="number" v-model="addressData.mobile" placeholder="电话" placeholder-class="placeholder" />
		</view>
		<button class="add-btn" @click="confirm">保存</button>
	     <view  v-if="show" class="over"></view>
		<view   v-if="show" class="overadress"  style="position: fixed;bottom:0;width: 100%;height: 50%;background-color: #fff;">
			<view style="display: flex;flex-direction: row;justify-content: space-between;padding:40upx 32upx;">
				<view>请选择</view>
				<view>{{adress}}</view>
				<view @click="cancelCity">确定</view>
			</view>
			<scroll-view style="height: 100%;"  :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
			  refresher-enabled="true">
				<view style="padding: 30upx 34upx;border-bottom: 1px solid #eee;" v-for="(item,index) in areaList" 
				 @click="chosecity(item)"
				 :key="index">
					{{item.area_name}}
				</view>
			</scroll-view>
		</view>
	<!-- 	<van-area v-if="show" class="overadress" @confirm="choseCity" @cancel="cancelCity" :area-list="areaList" /> -->
		</view>
</template>

<script>
	import mpvueCityPicker from '@/component/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				address_id:'',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				area_id:　'',
				addressData: {
					addressName: '',
					mobile: '',
					name: '',
					area: '',
					default: false
				},
				adress:'',
				show: false,
				province_list:{},
				areaList:[]
			}
		},
		onLoad(option){
			
			let title = '新增收货地址';
			if(option.type==='edit'){
				title = '编辑收货地址'
				let data = JSON.parse(option.data);
				this.addressData.addressName = data.area_info;
				this.addressData.mobile = data.address_mob_phone;
				this.addressData.name = data.address_realname;
				this.addressData.area = data.address_detail;
				this.address_id = data.address_id;
				this.area_id = data.area_id;
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			});
			this.getadress();
		},
		methods: {
			chosecity(item){
				this.adress += item.area_name;
				this.area_id = item.area_id;
				this.getadress();
			},
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				console.log("底部")
			},
			
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			getadress() {
				this.request({
					url:'/v2/entry/areaList',
					method: 'get',
					data: {
						area_parent_id: this.area_id
					},
					success: (res) => {
						this.areaList = res.data.data.area_list;
						if(this.areaList.length == 0 &&　this.area_id != '' && this.manageType != 'edit') {
							this.addressData.addressName = this.adress;
							this.show = false;
						}
					}
				})
			},
			switchChange(e){
				this.addressData.default = e.detail;
			},
			changeshow() {
				
				this.adress = '';
				this.area_id = '';
				this.getadress();
				this.show = !this.show;
				
			},
			
		    
			cancelCity() {
				this.show = false;
			},
			// choseCity(e) {
			// 	console.log(e);
			// 	this.show = false;
			// },
			
			//提交
			confirm(){ 
				let data = this.addressData;
				if(!data.addressName){
					this.$msg('请选择省市区');
					return;
				}
				if(!data.area){
					this.$msg('请输入详细地址');
					return;
				}
				if(!data.name){
					this.$msg('请输入姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)){
					this.$msg('请输入正确的手机号码');
					return;
				}
				let url = '';
				let params = {};
				params.area_id = this.area_id;
				params.address_detail= data.area; // 详细地址
				params.address_mob_phone= data.mobile;
				params.address_realname= data.name;
				params.area_info= data.addressName;
				params.is_free=0;
				if(this.manageType == 'edit') {
					url = '/v1/member/address_edit';
					params.address_id = this.address_id;
				}else {
					url = '/v2/address/add';
				}
				this.request({
					url: url,
					method: 'post',
					data: params,
					success: (res) => {
						uni.$emit('refeshadress')
						setTimeout(()=>{
						 	uni.navigateBack();
						 }, 800)
					}
				})
				
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				// this.$api.prePage().refreshList(data, this.manageType);
				// this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
				// setTimeout(()=>{
				// 	uni.navigateBack()
				// }, 800)
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: #D9332E;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	.over {
		    position:absolute;left:0px;top:0px;
		    background:rgba(0, 0, 0, 0.4);
		    width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
		    height:100%;
		    filter:alpha(opacity=60);  /*设置透明度为60%*/
		    opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
		    z-Index:100;  
	}
	.overadress {
		position: fixed;
	    bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
	}
</style>