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 label="收货学校" placeholder="请选择收货学校" v-model="fromData.school_id" 
				:localData="schoolList" :valueType="'1'" ></EnSelect>
				
				<EnSelect label="楼栋" placeholder="请选择楼栋" v-if="fromData.school_id" 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:'',
					school_id:'',
					
					dorm_name:'',
					school_name:'',
				},

				schoolList: [],
				builList:[],
				isAJAX: false,
			}
		},
		onLoad(e) {
			if (e.id) {
				this.getInfo(e.id)
			} else {
				this.fromData.id = '';
			}
			this.getAddressSchool();
		},
		watch:{
			'fromData.school_id'(val){
				this.getAddressDorm()
			},
		},
		methods: {
			getInfo(id) {
				getAddressInfo({id:id}).then((res)=>{
					if(res.code === 1){
						this.fromData = res.data;
						this.fromData.school_id = res.data.school_id + ''
						this.fromData.dorm_id = res.data.dorm_id + ''
					}
				})
			},
			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({school_id:this.fromData.school_id}).then((res)=>{
					if(res.code === 1){
						this.builList = res.data.map(obj =>{
							const {dorm_id,name} = obj;
							return {value:dorm_id,text:name};
						});
					}
				})
			},
			save() {
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				saveAddress(this.fromData).then((res)=>{
					if(res.code === 1){
						tools.success('操作成功');
						this.isAJAX = false;
						setTimeout(()=>{
							uni.reLaunch({
								url: '/pages-address/address'
							})
						},1500)
					}else{
						tools.success('操作失败');
						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.success('操作失败');
						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>