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.id" :localData="schoolList" :valueType="'1'"></EnSelect>
				<EnSelect label="楼栋" placeholder="请选择楼栋" v-model="fromData.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 " @click="save()">
			<view class="add-box text-align-center fs-34 fc-f mb-20">确定</view>
			<view class="add-box-1 text-align-center fs-34 fc-41ABF5">删除</view>
		</view>
	</view>
</template>

<script>
	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: '',
					city_names: '',
					phone: '',
					province: '',
					city: '',
					area: '',
					lon: '',
					lat: '',
				},

				schoolList: [
					{
						value:1,
						text:'学校1',
					},
					{
						value:2,
						text:'学校2',
					}
				],
				builList:[
					{
						value:1,
						text:'楼栋1',
					},
					{
						value:2,
						text:'楼栋2',
					}
				],
				isAJAX: false,
			}
		},
		onLoad(e) {
			if (e.id) {
				this.getInfo(e.id)
			} else {
				this.fromData.id = '';
			}
		},
		mounted() {
			
		},
		methods: {
			getInfo(id) {
				
			},
			save() {
				
			},
		},
	}
</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>