caimei-applets-weisha/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.shouHuoRen"
					@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">收货地址</view>
				<text class="input"> {{ addressData.allAddress }} </text>
				<text class="iconfont icon-chakangengduo"></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="#333333"
					@change="switchChange"
					style="transform:scale(0.6)"
				/>
			</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 ,只在新增收货地址时传
				shouHuoRen: '', //收货人
				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)
			console.log(optionData)
			// 设置默认值
			this.addressData.allAddress = `${optionData.provinceName}-${optionData.cityName}-${
				optionData.townName
			}`
			this.addressData.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.shouHuoRen = optionData.shouHuoRen
			this.addressData.addressId = optionData.addressId
			if (optionData.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) {
			this.addressData.allAddress = e.name
			this.addressData.townId = e.townCode
			console.log(e)
			this.initInput()
		},
		//提交
		confirm() {
			if (!this.addressData.shouHuoRen) {
				this.$util.msg('请填写收货人')
			}
			if (this.addressData.address == '请选择所在地区') {
				this.$util.msg('请选择所在地区')
			}
			if (!/(^1[0-9][0-9]{9}$)/.test(this.addressData.mobile)) {
				this.$util.msg('请输入正确的手机号码')
				return
			}
			if (this.addType == 1) {
				this.params = {
					// 测试id
					// userId:'13914',
					userId: this.addressData.userId, //用户id ,只在新增收货地址时传
					shouHuoRen: this.addressData.shouHuoRen, //收货人
					townId: this.addressData.townId, //区ID
					address: this.addressData.address, //地址
					mobile: this.addressData.mobile, //手机
					defaultFlag: this.addressData.defaultFlag //是否默认收货地址(0 不是默认,1 默认)
				}
				this.postAddressData(this.params)
			} else {
				this.params = this.addressData
				this.postAddressData(this.params)
			}
		},
		postAddressData(res) {
			this.btnText(true)
			// 保存地址
			this.UserService.AddNewAddress(res)
				.then(response => {
					this.$util.msg('保存成功', 2000, true, 'success')
					this.btnText(false)
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
					setTimeout(function() {
						uni.switchTab({
							url: '/seller/pages/index/index'
						})
					}, 1000)
				})
		},
		btnText(flg) {
			if (flg) {
				this.isConfirm = true
				this.buttonText = '保存中...'
			} else {
				this.isConfirm = false
				this.buttonText = '保存'
			}
		},
		onShouHuoRen(e) {
			this.addressData.shouHuoRen = 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.shouHuoRen !== '' &&
				this.addressData.mobile !== '' &&
				this.addressData.address !== '' &&
				this.addressData.townId !== ''
			) {
				this.isConfirm = false
			} else {
				this.isConfirm = true
			}
		}
	},
	onShow() {
		this.$api.getComStorage('clubInfo').then(resolve => {
			this.addressData.userId = resolve.userId
		})
	}
}
</script>

<style lang="scss">
page {
	height: auto;
	background: $bg-color;
}
.add-content {
	width: 702rpx;
	padding: 0 24rpx;
	.input-row {
		display: flex;
		align-items: center;
		position: relative;
		width: 702rpx;
		height: 88rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #e1e1e1;
		.label {
			font-size: $font-size-28;
			color: #666666;
			line-height: 88rpx;
			flex: 2;
		}
		.input {
			height: 100%;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #333333;
			flex: 7;
			box-sizing: border-box;
			padding-left: 20rpx;
		}
		&.b-b {
			margin: 20rpx 0;
		}
	}
}
.icon-chakangengduo {
	font-size: 36rpx;
	color: #b2b2b2;
	position: absolute;
	right: 0;
}
.text-textarea {
	width: 100%;
	height: 146rpx;
	border-bottom: 2rpx solid #e1e1e1;
	.textarea {
		width: 100%;
		height: 100%;
		font-size: $font-size-28;
		color: $text-color;
		z-index: 1;
		line-height: 32rpx;
	}
	.textarea.hide {
		opacity: 0;
	}
	.textarea.show {
		color: #999999;
	}
}
.default-row {
	background: #ffffff;
	margin-top: 16upx;
	padding: 24rpx 24rpx 24rpx 0;
	.tit {
		font-size: $font-size-28;
		line-height: 40rpx;
		color: #666666;
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	width: 600rpx;
	height: 90rpx;
	font-size: $font-size-28;
	line-height: 90rpx;
	color: #ffffff;
	margin: 0 auto;
	text-align: center;
	background: $btn-confirm;
	border-radius: 45rpx;
	margin-top: 80rpx;
}
.add-btn.disabled {
	background: #e1e1e1;
	border-radius: 45rpx;
}
</style>