dajiankang-uniapp/pages/address/add.vue

<template>
	<view class="address-add">
		<wd-navbar title="新增地址" safeAreaInsetTop left-arrow @click-left="back"></wd-navbar>

		<view class="from-address">
			<view class="title">收货人</view>
			<view class="content">
				<wd-input type="text" no-border v-model="from.receiverName" placeholder="请输入收货人姓名" />
			</view>
		</view>
		<view class="from-address">
			<view class="title">手机号</view>
			<view class="content">
				<wd-input type="number" no-border v-model="from.receiverPhone" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="from-address">
			<view class="title">所在地区</view>
			<view class="content">
				<wd-input type="text" no-border v-model="from.receiverArea" placeholder="请输入省市区" />
			</view>
		</view>
		<view class="from-address">
			<view class="title">详细地址</view>
			<view class="content">
				<wd-input type="text" no-border v-model="from.receiverAddress" placeholder="请输入详细地址" />
			</view>
		</view>
		<view class="from-address" style="margin-top: 30rpx; justify-content: space-between">
			<view class="title" style="width: 300rpx">设置为默认地址</view>
			<view>
				<wd-switch v-model="from.isDefault" size="20px" />
				<!-- <up-switch v-model="from.is_default" size="20" activeColor="#7ADE77" :activeValue="1" :inactiveValue="0"></up-switch> -->
			</view>
		</view>
		<view class="bottom-btn">
			<view class="button-a" @click="add_Address">保存</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import api from '@/api/index';
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

onLoad((options) => {
	if(options.id){
		api.addressInfo({ id: options.id }).then((res) => {
			// 1. 处理接口返回数据（假设有效数据在 res.data 中）
			const resData = res || {}; // 避免空数据报错
			resData.isDefault = resData.isDefault ? true : false;
		
			// 2. 筛选：只取 from 中已有的字段
			const formKeys = Object.keys(from.value); // from 的所有键（如 receiverName、receiverPhone 等）
			const updateData = {};
			formKeys.forEach((key) => {
				if (resData.hasOwnProperty(key)) {
					// 仅当接口数据有该字段时才取
					updateData[key] = resData[key];
				}
			});
			// 3. 合并到 from.value（覆盖已有字段，保留默认值）
			Object.assign(from.value, updateData);
		});
	}
	

});

const from = ref({
	receiverName: '',
	receiverPhone: '',
	receiverArea: '',
	receiverAddress: '',
	isDefault: true,
	status: 0,
	id: ''
});

const add_Address = () => {
	let data = JSON.parse(JSON.stringify(from.value));
	data.isDefault = data.isDefault ? 1 : 0;
	
	if(data.id){
		api.addressUp(data).then((res) => {
			uni.navigateBack();
		});
	}else{
		api.addressAdd(data).then((res) => {
			uni.navigateBack();
		});
	}
	
	
};

const back = () => {
	uni.navigateBack();
};
// export default {
// 	data() {
// 		return {
// 			value: '',
// 			styles: {
// 				color: '#2979FF',
// 				borderColor: '#fff'
// 			},
// 			classes: '请选择',
// 			dataTree: [],
// 			from: {
// 				realName: '',
// 				phone: '',
// 				city: '',
// 				detail: '',
// 				is_default: 0
// 			},
// 			type: null
// 		};
// 	},
// 	onLoad(option) {
// 		if (option.type == 'edit') {
// 			this.type = option.type;
// 			this.$http
// 				.get_user_address_detail({
// 					address_id: option.id
// 				})
// 				.then((res) => {
// 					this.from.address_id = res.id;
// 					this.from.name = res.name;
// 					this.from.city = res.city;
// 					this.from.is_default = Number(res.is_default);
// 					this.from.phone = res.phone;
// 					this.from.address = res.address;
// 					console.log(res);
// 				});
// 		}
// 	},
// 	methods: {
// 		handleGetRegion(region) {
// 			this.from.city = region[0].name + '/' + region[1].name + '/' + region[2].name;
// 			console.log(region);
// 		},
// 		back() {
// 			uni.navigateBack();
// 		},
// 		from_mo(data) {
// 			console.log(data);
// 			this.from = {
// 				name: data.name,
// 				phone: data.phone,
// 				province: data.province,
// 				city: data.city,
// 				area: data.area,
// 				address: data.address,
// 				status: parseInt(data.status),
// 				code: data.code,
// 				address_id: data.id
// 			};
// 		},
// 		add_Address() {
// 			if (uni.$u.test.mobile(this.from.phone) != true) {
// 				uni.showToast({
// 					title: '手机号格式错误',
// 					icon: 'none'
// 				});
// 				return;
// 			}
// 			if (this.type == 'edit') {
// 				this.$http.edit_user_address(this.from).then((res) => {
// 					this.$http.show('保存成功');
// 					setTimeout(() => {
// 						uni.navigateBack();
// 					}, 2000);
// 				});
// 			} else {
// 				this.$http.add_user_address(this.from).then((res) => {
// 					this.$http.show('保存成功');
// 					// uni.$emit('Addaddress', e)
// 					setTimeout(() => {
// 						uni.navigateBack();
// 					}, 2000);
// 				});
// 			}
// 		},
// 		onchange(e) {
// 			const value = e.detail.value;
// 			this.from.province = value[0].text;
// 			this.from.city = value[1].text;
// 			this.from.area = value[2].text;
// 			this.from.code = value[2].value;
// 		},
// 		onnodeclick(node) {}
// 	}
// };
</script>

<style scoped lang="scss">
.address-add {
	width: 100%;
	padding: 00rpx 0 180rpx;

	.from-address {
		background-color: #fff;
		height: 110rpx;
		padding: 0rpx 20rpx;
		display: flex;
		align-items: center;

		.title {
			width: 150rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.content {
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f6f6f6;
		}
	}

	.bottom-btn {
		width: 100%;
		height: 150rpx;
		padding: 30rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		border-radius: 20rpx 20rpx 0 0;
		box-shadow: 0px 6rpx 16rpx 2rpx rgba(170, 170, 170, 0.35);
		display: flex;
		align-items: center;
		justify-content: center;

		.button-a {
			width: 690rpx;
			height: 90rpx;
			background: #799675;
			border-radius: 15rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 90rpx;
		}
	}
}
</style>