zh_order_food_xcx/pages-address/edit-add.vue

<template>
	<view class="edit-add-index flex-common-css box-border-box iPhone-bottom">
		<Nav :title="fromData.id?'编辑地址':'新增地址'"></Nav>

		<view class="scroll-view-css box-border-box p-24">

			<view class="box-card box-border-box p-24 mb-20">
				<EnInput label="收货人" placeholder="请输入收货人姓名" v-model="fromData.consignee"></EnInput>
				<EnInput label="电话号码" type="number" placeholder="请输入电话号码" v-model="fromData.phone"></EnInput>

				<EnSelect v-if="schoolList.length > 0" label="收货学校" placeholder="请选择收货学校"
					v-model="fromData.dorm_school_id" :localData="schoolList" :valueType="'1'" @upValue=upValue>
				</EnSelect>

				<EnSelect label="楼栋" placeholder="请选择楼栋" v-if="isDorm" v-model="fromData.dorm_id" :localData="builList"
					:valueType="'1'"></EnSelect>

				<EnInput label="详细地址" placeholder="请输入详细地址" v-model="fromData.address"></EnInput>
			</view>

			<view class="box-card box-border-box p-24 flex-justify-space">
				<view class="">
					<view class="fs-30 mb-16">设为默认地址</view>
					<view class="fs-24 fc-9">提醒：下单会优先使用该地址</view>
				</view>
				<view class="r-right" @click="fromData.is_default == 1?fromData.is_default=0:fromData.is_default=1"
					:class="fromData.is_default == 0?'n-r':'s-r'">
					<view class="r-y"></view>
				</view>
			</view>
		</view>

		<view class="box-border-box p-24 bgc-f ">
			<view class="add-box text-align-center fs-34 fc-f mb-20" @click="save()">确定</view>
			<view v-if="fromData.id" class="add-box-1 text-align-center fs-34 fc-41ABF5" @click="del()">删除</view>
		</view>
	</view>
</template>

<script>
	import {
		getAddressInfo,
		saveAddress,
		delAddress,
		getAddressSchool,
		getAddressDorm
	} from '@/api/member.js'
	import tools from "@/service/tools.js";
	import EnSelect from "@/components/en-from/en-select/en-select";
	import EnInput from "@/components/en-from/en-input/en-input";
	export default {
		components: {
			EnInput,
			EnSelect,
		},
		data() {
			return {
				radioData: [{
						'id': '0',
						'name': '否'
					},
					{
						'id': '1',
						'name': '是'
					}
				],
				fromData: {
					id: '',
					address: '',
					is_default: 0,
					consignee: '',
					phone: '',
					dorm_id: '',
					dorm_school_id: '',
					school_name: '',
				},
				schoolList: [],
				builList: [],
				isAJAX: false,
				isDorm: false,
				time: '',
				selectId: false,
				a: 1
			}
		},
		onLoad(e) {
			if (e.id) {
				this.selectId = true
				this.getInfo(e.id)
			} else {
				this.fromData.id = '';
				this.getAddressSchool();
			}
		},
		watch: {
			'fromData.dorm_school_id': {
				handler(newval, old) {
					console.log(old, 'old');
					console.log(newval, 'newval');
					if (newval != old && !this.selectId) {
						this.fromData.dorm_id = ''
					}
					this.getAddressDorm()
				},
				immediate: true, // 立即执行
			}
		},
		methods: {
			upValue(val) {
				// if (this.selectId) {
				// this.fromData.dorm_id = ''
				// this.fromData.dorm_id = val+ ''
				// }
				// this.getAddressDorm()
			},
			getInfo(id) {
				getAddressInfo({
					id: id
				}).then((res) => {
					if (res.code === 1) {
						this.fromData.id = res.data.id;
						this.fromData.address = res.data.address;
						this.fromData.consignee = res.data.consignee;
						this.fromData.is_default = res.data.is_default;
						this.fromData.phone = res.data.phone;
						this.fromData.school_name = res.data.school_name;
						this.fromData.dorm_school_id = res.data.school_id + '';
						this.fromData.dorm_id = res.data.dorm_id + '';
						this.getAddressSchool();
					}
				})
			},
			getAddressSchool() {
				let operate_id = uni.getStorageSync('operate_id');
				getAddressSchool({
					operate_id: operate_id
				}).then((res) => {
					if (res.code === 1) {
						this.schoolList = res.data.map(obj => {
							const {
								school_id,
								school_name
							} = obj;
							return {
								value: school_id + '',
								text: school_name
							};
						});
					}
				})
			},
			getAddressDorm() {
				getAddressDorm({
					dorm_school_id: this.fromData.dorm_school_id
				}).then((res) => {
					if (res.code === 1) {
						this.builList = res.data.map(obj => {
							const {
								dorm_id,
								name,
								type_str
							} = obj;
							return {
								value: dorm_id + '',
								text: name + '(' + type_str + ')'
							};
						});
						this.isDorm = true
						this.selectId = false
					}
				})
			},
			save() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				saveAddress(this.fromData).then((res) => {
					if (res.code === 1) {
						tools.success('操作成功');
						this.isAJAX = false;
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
							let addressData = {
								flag: true,
								is_default: this.fromData.is_default,
								id: this.fromData.id
							}
							uni.setStorageSync('isConfirmAddressFlag', addressData);
						}, 1500)
					} else {
						tools.error(res.msg);
						this.isAJAX = false;
					}
				})
			},
			del() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				delAddress({
					id: this.fromData.id
				}).then((res) => {
					if (res.code === 1) {
						tools.success('操作成功');
						this.isAJAX = false;
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages-address/address'
							})
						}, 1500)
					} else {
						tools.error(res.msg);
						this.isAJAX = false;
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.edit-add-index {
		.add-box {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #2F80ED;
			border-radius: 200rpx;
		}

		.add-box-1 {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFFFFF;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			box-sizing: border-box;
			border: 2rpx solid #41ABF5;
		}

		.box-card {
			width: 1005;
			min-height: 152rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}

		.r-right {
			margin-top: 24rpx;
			width: 88rpx;
			height: 52rpx;
			border-radius: 200rpx;
			position: relative;

			.r-y {
				width: 44rpx;
				height: 44rpx;
				background: #FFFFFF;
				border-radius: 200rpx;
				position: absolute;
				top: 4rpx;
			}
		}

		.s-r {
			background-color: #41ABF5;
			transition: all 1s;

			.r-y {
				right: 4rpx !important;
				transition: all 1s;
			}
		}

		.n-r {
			background-color: #ccc;
			transition: all 1s;

			.r-y {
				left: 4rpx !important;
				transition: all 1s;
			}
		}
	}
</style>