caimei-applets-mcare/pages/user/address/addressManage.vue

<template>
	<view class="container clearfix">
		<view class="add-content">
			<view class="input-row b-b">
				<view class="label">收货人:</view>
				<input class="input" type="text" v-model="addressData.receiver" @input="onShouHuoRen" placeholder="请输入收货人姓名" placeholder-class="placeholder" />
			</view>
			<view class="input-row b-b">
				<view class="label">手机号:</view>
				<input class="input" type="number" maxlength="11" v-model="addressData.mobile"  @input="onMobile" placeholder="请输入手机号码" placeholder-class="placeholder" />
			</view>
			<view class="input-row b-b" @click="showMulLinkageThreePicker">
				<view class="label address">所在地区:</view>
				<text class="input" :style="addressData.allAddress=='请选择收货地区'?'color:#b2b2b2':''">
					{{addressData.allAddress}}
				</text>		
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="text-textarea b-b"> 
				<view class="textarea show" v-if="isShowInput">
					{{addressData.address ? addressData.address :'详细地址：如道路、门牌号、小区、楼房号、单元室等'}}
				</view>
				<textarea 	v-else
							class="textarea" 
							type="text" 
							v-model="addressData.address" 
							placeholder="详细地址：如道路、门牌号、小区、楼房号、单元室等" 
							placeholder-class="placeholder"
							maxlength="50"
							@input="onTextareaInput"
							:class="isShowInput ? '':''"
				/>
			</view>
			<view class="text-input default-row">
				<text class="tit">设为默认地址</text>
				<switch :checked="switchDefault" color="#F3B574" @change="switchChange" style="transform:scale(0.8)" />
			</view>
			<button class="add-btn" :disabled="isConfirm" :class="[isConfirm == true ? 'disabled':'']" @click="confirm">{{buttonText}}</button>
		</view>
		<mpvue-city-picker :themeColor="themeColor" 
							ref="mpvueCityPicker" 
						    :pickerValueDefault="cityPickerValueDefault"
							@onCancel="onCancel" 
							@onConfirm="onConfirm">
		</mpvue-city-picker>

	</view>
</template>

<script>	
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import authorize from '@/common/config/authorize.js'	
	export default {
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				buttonText:'保存',
				addType:1,				//记录添加地址的类型
				isConfirm:true,
				isShowInput:false,
				switchDefault:false,
				addressData:{
					addressId:'',
					allAddress:'请选择收货地区',
					userId: '',			//用户id ,只在新增收货地址时传
					receiver: '',		//收货人
					mobile:'',			//收货人手机
					townId:'',			//区ID
					address: '',	//地址
					defaultFlag:0,		//是否默认收货地址(0 不是默认,1 默认)
				},
				params:{}				//参数
			}
		},
		onLoad(option){
			let title = '添加新地址'
			if(option.type==='edit'){
				title = '编辑收货地址'
				this.isConfirm = false;
				this.addType = 2;			
				let optionData = JSON.parse(option.data)
				this.addressData.allAddress = `${optionData.province}-${optionData.city}-${optionData.town}`
				this.addressData.address = optionData.address?optionData.address:''
				this.addressData.defaultFlag = optionData.defaultFlag;
				this.addressData.userId = optionData.userId;
				this.addressData.mobile = optionData.mobile;
				this.addressData.townId = optionData.townId;
				this.addressData.addressId = optionData.addressId;
				this.addressData.receiver = optionData.receiver;
				if(this.addressData.defaultFlag == 1){
					this.switchDefault = true
				}else{
					this.switchDefault = false
				}
			}
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {			
			switchChange(e){
				if(e.detail.value== true){
					this.addressData.defaultFlag = '1';
				}else{
					this.addressData.defaultFlag = '0';
				}
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.isShowInput = true
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				console.log(e)
				this.addressData.allAddress = e.name;
				this.addressData.townId = e.townCode;	
				this.initInput();
			},			
			//提交
			confirm(){
				let data = this.addressData;
				if(!data.receiver){
					this.$util.msg('请填写收货人');
				}
				if(data.address =='所在地区'){
					this.$util.msg('请选择所在地区');
				}
				if(!/(^1[0-9][0-9]{9}$)/.test(data.mobile)){
					this.$util.msg('请输入正确的手机号码');
					return;
				}
				if(this.addType ==1){
					this.params ={
							userId:data.userId  ,		//用户id ,只在新增收货地址时传
							receiver:data.receiver ,//收货人
							townId:data.townId,			//区ID
							address:data.address,//地址
							mobile:data.mobile,			//手机
							defaultFlag:data.defaultFlag//是否默认收货地址(0 不是默认,1 默认)
						}
					this.postAddressData(this.params)	
				}else{
					this.params =  this.addressData;
					this.postAddressData(this.params)
				}
			},
			postAddressData(params){
				this.btnText(true)
				this.UserService.AddressSave(params).then( response=>{
					this.$util.msg('保存成功',1500,true,'success')
					this.btnText(false)
					setTimeout(()=>{
						uni.navigateBack();
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
					this.btnText(false)
				})
			},
			btnText(flg){
				if(flg){
					this.isConfirm = true;
					this.buttonText = '保存中...'
				}else{
					this.isConfirm = false;
					this.buttonText = '保存'
				}
			},
			onShouHuoRen(e){
			   this.addressData.receiver = e.detail.value
			   this.initInput();
			},
			onMobile(e){
			   this.addressData.mobile = e.detail.value
			   this.initInput();
			},
			onTextareaInput(e){
			   this.addressData.address = e.detail.value
			   this.initInput();
			},
			initInput(){
				if(this.addressData.receiver !== "" && this.addressData.mobile !=="" && this.addressData.address !=="" && this.addressData.townId!==""){
					this.isConfirm =false;
				}else{
					this.isConfirm =true;
				}
			}
		},
		onShow() {
			this.$api.getStorage().then((resolve) =>{
				this.addressData.userId = resolve.userId ? resolve.userId : 0
			})
		}
	}
</script>

<style lang="scss">
	page{
		height: auto;
		background: $bg-color;
		// border-top: 1px solid #EBEBEB;
	}
	.placeholder{color: #b2b2b2;}
	.add-content{
		width: 702rpx;
		padding:0 24rpx;
		.input-row{
			align-items: center;
			position: relative;
			width: 702rpx;
			height: 88rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #e1e1e1;
			.label{
				width:100rpx ;
				line-height: 88rpx;
				color: #666666;
				font-size: $font-size-28;
				float: left;
				&.address{
					width: 120rpx;
				}
			}
			.input{
				width: 500rpx;
				height: 100%;
				font-size: $font-size-28;
				line-height: 88rpx;
				display: inline-block;
				color: #333333;
				float: left;
				padding-left: 20rpx;
			}
			&.b-b{
				margin: 20rpx 0;
			}
		}
	}
	.icon-xiangyou{
		font-size: 36rpx;
		color: #b2b2b2;
		position: absolute;
		right: 0;
		top: 10rpx;
	}
	.text-textarea{
		width: 654rpx;
		height: 147rpx;
		padding: 24rpx;
		// background: #F7F7F7;
		border-bottom: 2rpx solid #e1e1e1;
		.textarea{
			width: 100%;
			height: 100%;
			font-size: $font-size-28;
			color: $text-color;
			z-index: 1;
		}
		.textarea.hide{
			opacity: 0;
		}
		.textarea.show{
			color: #999999;
		}
	}
	.default-row{
		background: #FFFFFF;
		margin-top: 16upx;
		.tit{
			font-size: $font-size-28;
			line-height: 40rpx;
			color: #333333;
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		width: 702rpx;
		height:90rpx;
		font-size: $font-size-30;
		line-height: 90rpx;
		color: #FFFFFF;
		margin: 0 auto;
		text-align: center;
		background: $btn-confirm;
		border-radius: 45rpx;
		border-radius: 44rpx;
		margin-top: 80rpx;
	}
	.add-btn.disabled{
		background: #F8F8F8;
		border-radius: 44rpx;
	}
</style>