deming/components/mine/address-active/index.vue

<template>
	<view class="address-active">
		<view class="user-info">
			<view>
				<input type="text" placeholder="收货人" v-model="name" />
			</view>
			<view>
				<input type="text" placeholder="手机号" maxlength="11" v-model="phone" />
			</view>
			<view class="area" @click="show=true">
				<input type="text" placeholder="省市区" v-model="address" disabled />
				<view>
					<image src="/static/image/mine/24.png"></image>
					<text>定位</text>
				</view>
			</view>
			<view>
				<input type="text" placeholder="详细地址" v-model="area" />
			</view>
			<view class="set-default">
				<view>设为默认地址</view>
				<view>
					<u-switch v-model="checked" active-color="#FF770F" inactive-color="#A9A7A7" size="35"></u-switch>
				</view>
			</view>
		</view>
		<view class="edit-btn" @click="confirmBtn">保存地址</view>
		<u-select v-model="show" 
				mode="mutil-column-auto" 
				:list="areaList" 
				value-name="area_id" 
				label-name="area_name" 
				child-name="_child" 
				@confirm="setArea">
		</u-select>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {
			show: false,
			areaList: [],
			checked: false, // 是否设为默认地址
			name: '',
			phone: '',
			address: '', // 选择地址
			area: '', // 详细地址
			area_id: '', // 地区id 省
			city_id: '', // 城市id
		}
	},
	props: {
		info: Object
	},
	mounted() {
		this.getAreaData();
	},
	created() {
		// console.log(this.info);
		this.initAddressInfo();
	},
	methods: {
		// 判断是不是编辑页面 数据初始化
		initAddressInfo() {
			if(this.info) {
				[this.name, this.phone, this.address, this.area, this.area_id, this.city_id] = [
					this.info.address_realname,
					this.info.address_mob_phone,
					this.info.area_info,
					this.info.address_detail,
					this.info.area_id,
					this.info.city_id
				]
				this.checked = this.info.address_is_default == '0' ? false : true;
			}
		},
		//　判断是不是编辑页面 调用接口
		confirmBtn() {
			this.info ? this.editAddress() : this.addAddress();
		},
		// 验证
		validateValue() {
			if(this.$u.test.isEmpty(this.name)) {
				this.showToast('姓名不能为空', 'warning');
				return false;
			}
			if(this.$u.test.isEmpty(this.phone)) {
				this.showToast('手机号不能为空', 'warning');
				return false;
			}
			if(!this.$u.test.mobile(this.phone)) {
				this.showToast('手机号错误', 'warning');
				return false;
			}
			if(this.$u.test.isEmpty(this.address)) {
				this.showToast('地址不能为空', 'warning');
				return false;
			}
			if(this.$u.test.isEmpty(this.area)) {
				this.showToast('详细地址不能为空', 'warning');
				return false;
			}
			return true;
		},
		addAddress() {
			if(!this.validateValue()) return false;
			this.$u.api.addressAdd({
				area_id: this.area_id,
				city_id: this.city_id,
				is_default: this.checked ? 1 : 0,
				area_info: this.address,
				address: this.area,
				true_name: this.name,
				mobile_phone: this.phone,
				// longitude,
				// latitude,
			}).then((res)=>{
				if (res.errCode == 0) {
					uni.redirectTo({
						url: '/pageE/more/Address'
					});
					// this.$refs.uToast.show({
					// 	title: res.message,
					// 	type: 'success',
					// 	// url: '/pageE/more/Address',
					// 	callback() {
					// 		uni.redirectTo({
					// 			url: '/pageE/more/Address'
					// 		});
					// 	}
					// })
				} else {
					this.showToast(res.message, 'warning');
				}
			})
		},
		editAddress() {
			if(!this.validateValue()) return false;
			this.$u.api.addressEdit({
				address_id: this.info.address_id,
				area_id: this.area_id,
				city_id: this.city_id,
				is_default: this.checked ? 1 : 0,
				area_info: this.address,
				address: this.area,
				true_name: this.name,
				mobile_phone: this.phone,
				// longitude,
				// latitude,
			}).then((res)=>{
				if (res.errCode == 0) {
					uni.redirectTo({
						url: '/pageE/more/Address'
					});
					// this.$refs.uToast.show({
					// 	title: res.message,
					// 	type: 'success',
					// 	// url: '/pageE/more/Address',
					// 	callback() {
					// 		uni.redirectTo({
					// 			url: '/pageE/more/Address'
					// 		});
					// 	}
					// })
				} else {
					this.showToast(res.message, 'warning');
				}
			})
		},
		getAreaData() {
			this.$u.api.getArea().then((res)=>{
				if (res.errCode == 0) {
					this.areaList = res.data;
				}
			})
		},
		setArea(area) {
			// console.log(area);
			this.area_id = area[0].value;
			this.city_id = area[1].value;
			let temp = '';
			area.forEach(e => {
				temp += e.label;
			});
			this.address = temp;
		},
		showToast(message, type) {
			this.$refs.uToast.show({
				title: message,
				type: type,
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.address-active {
	.user-info {
		border-top: 1rpx solid rgba(235,235,235,1);
		> view {
			height: 98rpx;
			padding: 30rpx;
			border-bottom: 2rpx solid rgba(235,235,235,1);
			> input {
				font-size: 30rpx;
				outline: none;
			}
		}
		.set-default {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			color: rgba(51,51,51,1);
		}
		.area {
			padding: 0 30rpx;
			display: flex;
			> input {
				padding: 30rpx 0;
				flex: 1;
			}
			> view {
				margin-left: 30rpx;
				width: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: rgba(255,120,15,1);
				> image {
					width: 26rpx;
					height: 32rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.edit-btn {
		margin: 122rpx auto 0;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,119,15,1);
		border-radius: 49rpx;
		font-size: 36rpx;
		color:rgba(255,255,255,1);
		line-height: 98rpx;
		text-align: center;
	}
}
</style>