baiyuchengpin/pages_user/user/addAddress.vue

<template>
	<view class="content">
		<view class="inner">
			<view class="address-box">
				<textarea class="textarea" v-model="content"  placeholder="请粘贴或输入文本,点击'识别'自动识别姓名、电话、地址,格式:深圳市龙岗区坂田街道长坑路西2巷2号202 黄大大 18888888888"   />
				<view  class="btns" >
					<view  class="btn parse" @click="parseAddress()">识别</view>
				</view>
			</view>
			<view class="form-box">
				
				<view class="form-item">
					<text class="label">联系人</text>
					<input type="text" v-model="form.realName" maxlength="10" placeholder="姓名" class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input type="number" v-model="form.phone" maxlength="11"  placeholder="手机号" class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">所在地区</text>
					<picker :value="multiIndex"  class="birth-picker"  mode="multiSelector" range-key="n" :range="addressList" @change="pickerChange"  @columnchange="pickerColumnchange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" v-model="form.address" placeholder="请选择" class="form-input" disabled="disabled" />
							</view>
							<image class="arrow" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/arrow_gray.png" mode=""></image>
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">详细地址</text>
					<textarea class="form-textarea" v-model="form.detail" placeholder="请输入详细地址"   />
				</view>
			</view>
			<!-- 设为默认地址 -->
			<view class="setting-box">
				<text class="label">设为默认地址</text>
				<evan-switch v-model="isDefault" activeColor="#FF233C" inactiveColor="rgba(0, 0, 0, 0.1)"></evan-switch>
			</view>
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">保存地址</view>
		</view>
	</view>
</template>

<script>
	import {parseAddress,getCity,getCitys,getAddressById,addAddress,editAddress,getCityId} from '@/api/address'
	import EvanSwitch from '@/components/evan-switch/evan-switch.vue'
	export default {
		components: {
			EvanSwitch
		},
		data() {
			return {
				content:null,
				type:null,
				id:null,
				isDefault: false,
				addressList:[[],[],[]],
				multiIndex:[0,0,0],
				address:[],
				form: {
					realName:null,
					phone:null,
					detail:null,
					address: null,
					isDefault: 0,
				}
			}
		},
		onLoad(option) {
			this.type=option.type;
			if(this.type=='edit'){
				uni.setNavigationBarTitle({
				　　title:"修改收货地址"
				})
				this.id=option.id;
				this.getAddressById();
				 uni.hideShareMenu({
				      menus: ["shareAppMessage", "shareTimeline"]
				    })
			}
			else{
				uni.setNavigationBarTitle({
				　　title:"新增收货地址"
				})
				uni.showShareMenu({
					withShareTicket: true,
					//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
				})
			}
			this.getCitys()
		},
		//发送给朋友
		onShareAppMessage(res) {
			if (this.utils.isLogin()) {
				var user = JSON.parse(uni.getStorageSync('userInfo'))
				return {
					title: '邀请您填写地址，下单更方便',
					path: '/pages_user/user/addAddress?type='+this.type,
					imageUrl: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/address-share.jpg' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			if (this.utils.isLogin()) {
				var user = JSON.parse(uni.getStorageSync('userInfo'))
				return {
					title: '邀请您填写地址，下单更方便',
					query: 'type='+this.type, //页面参数
					imageUrl: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/address-share.jpg' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
		
		},
		methods: {
			parseAddress(){
				if(this.content==null||this.content==""){
					uni.showToast({	icon:'none',title: '请输入地址信息'});
					return;
				}
				var data={content:this.content};
				parseAddress(data).then(
					res => {
						if(res.code==200){
							this.form.realName=res.data.name
							this.form.phone=res.data.mobile
							this.form.address=res.data.provinceName+res.data.cityName+res.data.expAreaName
							this.form.province=res.data.provinceName
							this.form.city=res.data.cityName
							this.form.district=res.data.expAreaName
							this.form.detail=res.data.streetName+res.data.address
							this.getCityId(this.form.province,this.form.city,this.form.district)
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getAddressById(){
				var data={id:this.id};
				getAddressById(data).then(
					res => {
						if(res.code==200){
							  this.form=res.data;
							  this.isDefault=this.form.isDefault==1?true:false;
							  this.form.address=this.form.province+this.form.city+this.form.district
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 获得cityId
			getCityId(province, city, district) {
				getCityId({
					province: province,
					city: city,
					district: district
				}).then(res => {
						if (res.code == 200) {
							this.form.cityId = res.cityId
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},
			submit(){
				if(this.type=="add"){
					this.addAddress()
				}
				else if(this.type=="edit"){
					this.editAddress()
				}
				
			},
			editAddress(){
				this.form.isDefault=this.isDefault?1:0
				editAddress(this.form).then(
					res => {
						if(res.code==200){
							 uni.showToast({
							 	icon:'success',
							 	title: "操作成功",
							 });
							 setTimeout(function() {
								 uni.$emit('refreshAddress');
								 uni.navigateBack({
								 	delta: 1,
								 	fail: () => {
								 		uni.redirectTo({
								 			url: "/pages_user/user/address"
								 		});
								 	}
								 });
							 }, 500);
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			addAddress(){
				this.form.isDefault=this.isDefault?1:0
				addAddress(this.form).then(
					res => {
						if(res.code==200){
							 uni.showToast({
							 	icon:'success',
							 	title: "操作成功",
							 });
							 setTimeout(function() {
								 uni.$emit('refreshAddress');
								uni.navigateBack({
									delta: 1,
									fail: () => {
										uni.redirectTo({
											url: "/pages_user/user/address"
										});
									}
								});
							 }, 500);
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 地区选择
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// 获取一级类目
				// 获取二级类目
				// 获取三级类目
				this.form.address=this.addressList[0][this.multiIndex[0]].n+this.addressList[1][this.multiIndex[1]].n+this.addressList[2][this.multiIndex[2]].n
				this.form.province=this.addressList[0][this.multiIndex[0]].n
				this.form.city=this.addressList[1][this.multiIndex[1]].n
				this.form.district=this.addressList[2][this.multiIndex[2]].n
				this.form.cityId=this.addressList[1][this.multiIndex[1]].v;
				
				 
			},
			pickerColumnchange(e){
				// 第一列滑动
				if(e.detail.column === 0){
					this.multiIndex[0] =  e.detail.value
					// console.log('第一列滑动');
					this.addressList[1] = this.address[this.multiIndex[0]].c;
					this.addressList[2] = this.address[this.multiIndex[0]].c[0].c
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if(e.detail.column === 1){
					this.multiIndex[1] =  e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.addressList[2] = this.address[this.multiIndex[0]].c[this.multiIndex[1]].c
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if(e.detail.column === 2){
					this.multiIndex[2] =  e.detail.value
				}
			},
			getCitys(){
				getCitys().then(
					res => {
						if(res.code==200){
							this.address=res.data
							for(var i=0; i<this.address.length; i++){
								this.addressList[0].push(this.address[i])
							}
							for(var i=0; i<this.address[0].c.length; i++){
								this.addressList[1].push(this.address[0].c[i])
							}
							for(var i=0; i<this.address[0].c[0].c.length; i++){
								this.addressList[2].push(this.address[0].c[0].c[i])
							}
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.inner{
			height: calc(100% - 120upx);
			padding: 20upx;
			.address-box{
				padding: 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				margin-bottom: 20upx;
				position: relative;
				.textarea{
					width: 100%;
					height: 200upx;
					font-size: 30upx;
					color: #999999;
					padding-bottom:100rpx;
				}
				.btns{
					right:10rpx;
					bottom:10rpx;
					position: absolute;
					.btn{
						width: 155upx;
						height: 64upx;
						line-height: 64upx;
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						text-align: center;
						border-radius: 32upx;
						&.parse{
							background: #FF233C;
							color: #FFFFFF;
						}
					}
				}
			}
			.form-box{
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				.form-item{
					padding: 30upx 0;
					display: flex;
					align-items: flex-start;
					border-bottom: 1px solid #F1F1F1;
					&:last-child{
						border-bottom: none;
					}
					.label{
						width: 180upx;
						text-align: left;
						font-size: 30upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}
					input{
						text-align: left;
					}
					.form-input{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: left;
					}
					.form-textarea{
						font-size: 30upx;
						color: #999999;
						height: 100upx;
						padding: 4upx 0;
					}
					 
					.birth-picker {
						flex: 1;
						display: flex;
						align-items: center;
						
						.right-box{
							width: 100%;
							display: flex;
							align-items: center;
							.input-box{
								width: 470upx;
							}
							.arrow{
								width: 13upx;
								height: 23upx;
								margin-left: 20upx;
							}
						}
					}
				}
			}
			.setting-box{
				height: 88upx;
				background: #FFFFFF;
				border-radius: 16upx;
				margin-top: 20upx;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
				}
			}
		}
		.btn-box{
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			.sub-btn{
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #FF233C;
				border-radius: 44upx;
			}
		}
	}
</style>