caimei-applets-caimei/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-xiayibu"></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="#5FB00A" @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: {} ,//参数
			isSelect:false
		}
	},
	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
			}
		}
		if (option.type == 'select') {
			this.isSelect = true
		}
		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)
			}
		},
		async postAddressData(params) {
			try{
				this.btnText(true)
				const res = await this.UserService.AddressSave(params)
				const data = res.data
				this.$util.msg('保存成功', 1500, true, 'success')
				this.btnText(false)
				if(this.isSelect){
					uni.setStorageSync('selectAddress', data)
					let pages = getCurrentPages()
					let prevPage = pages[pages.length - 2] //上一个页面
					prevPage.setData({ select: 'select' })
				}
				uni.navigateBack()
			}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-xiayibu {
	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(0.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>