zhywpt-sp/subpackage/orders/editAddress.vue

<template>
	<view class="form">
		<u-form label-width="132rpx" :model="state.formData" ref="uForm">
			<u-form-item label="收货人">
				<u-input placeholder="名字" :customStyle="btnGetCode" v-model="state.formData.consignee" maxlength="20" />
			</u-form-item>
			<u-form-item label="手机号">
				<u-input placeholder="手机号" :customStyle="btnGetCode" type="number" v-model="state.formData.consigneeTel"
					maxlength="11" />
			</u-form-item>
			<u-form-item label="所在地区">
				<picker mode="region" :value="state.formData.region" @change="regionConfirm">
					<view class="choice-picker">{{state.formData.region?state.formData.region:"请选择"}}</view>
				</picker>
			</u-form-item>

			<u-form-item label="详细地址">
				<u-input placeholder="小区楼栋/乡村名称" :customStyle="textareaStyle" v-model="state.formData.address" maxlength="50" />
			</u-form-item>
			<u-form-item v-if="!state.orderNo" label="邮政编码">
				<u-input placeholder="邮政编码" :customStyle="btnGetCode" v-model="state.formData.postalCode" type="number"
					maxlength="6" />
			</u-form-item>
			<view v-if="!state.orderNo" class="form-item forn-switch">
				<label>设置默认收货地址</label>
				<switch :checked="state.formData.defaultAddress==1" color="#004576" style="transform:scale(0.75)"
					@change="changeSwitch"></switch>
			</view>
		</u-form>

		<view class="action">
			<button type="default" class="btns" @click="savaHandle()">保存</button>
			<button v-if="!state.orderNo" type="default" class="btns del" @click="deleteHandle()">删除</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		addressAdd,
		addressDeleteNew,
		upAdressQuery,
		updateAdress
	} from "@/utils/network/api.js";
	import {
		request, requestNew
	} from "@/utils/network/request.js";
	import {
		getItem,
		StorageKeys
	} from "@/utils/storage";
	import {
		msg
	} from "@/utils/utils";
	const btnGetCode = {
		background: "#F1F1F1",
		"border-radius": "20rpx",
		padding: "10rpx 20rpx",
		height: "40px",
	};

	const textareaStyle = {
		background: "#F1F1F1",
		"border-radius": "20rpx",
		padding: "20rpx 10rpx",
	};

	const state = reactive({
		formData: {
			consignee: "",
			consigneeTel: "",
			region: "",
			address: "",
			postalCode: "",
			defaultAddress: 2,
			openId: undefined,
			id: undefined,
		},
		orderNo: ''
	});
	//switch 事件
	const changeSwitch = (e : any) => {
		console.log(e);
		state.formData.defaultAddress = e.detail.value ? 1 : 2;
		console.log(state.formData);
	};

	// 选择地区回调
	const regionConfirm = (e : any) => {
		state.formData.region = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
	};

	const savaHandle = () => {
		state.formData.openId = getItem(StorageKeys.OpenId);
		if (state.orderNo) {
			editAddressFromOrder();
		} else {
			queryAddOrEditAddress(addressAdd, state.formData);
		}
	};

	const deleteHandle = () => {
		if (getItem(StorageKeys.OpenId)) {
			state.formData.openId = getItem(StorageKeys.OpenId);
			const options = {
				type: 2,
				data: state.formData,
				method: "POST",
				showLoading: true,
			};
			console.log(options, '删除请求参数');
			requestNew(addressDeleteNew, options).then((res) => {
				console.log(res, '删除');
				msg("删除地址成功");
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
					});
				}, 1500)
			});
		} else {
			uni.navigateTo({
				url: `/subpackage/orders/essential-information?del=1`
			});
		}
	}
	
	// 从订单点击修改地址进入
	const editAddressFromOrder = () => {
		const options = {
			type: 2,
			data: {
				address: state.formData.address,
				consignee: state.formData.consignee,
				consigneeTel: state.formData.consigneeTel,
				region: state.formData.region,
				orderNo: state.orderNo,
			},
			method: "POST",
			showLoading: true,
		};
		requestNew(updateAdress, options).then((res) => {
			msg("编辑地址成功");
			setTimeout(() => {
				uni.navigateBack({
					delta: 1,
				});
			}, 1500)
		});
	}

	/* 新增/编辑收货地址 */
	const queryAddOrEditAddress = (code, data) => {
		if (getItem(StorageKeys.OpenId)) {
			const options = {
				type: 2,
				data: data,
				method: "POST",
				showLoading: true,
			};
			requestNew(code, options).then((res) => {
				msg("编辑地址成功");
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
					});
				}, 1500)
			});
		} else {
			uni.$emit('updateData', state.formData)
			uni.navigateBack({
				delta: 1,
			});
		}
	};
	onLoad((option) => {
		if (option.content) {
			state.formData = JSON.parse(option.content);
		} else if (option.orderNo) {
			state.orderNo = option.orderNo;
			const options = {
				type: 2,
				data: {
					orderNo: option.orderNo
				},
				method: "POST",
				showLoading: true,
			};
			requestNew(upAdressQuery, options).then((res) => {
				const data = res;
				state.formData = res;
			});
		}
	});
</script>

<style lang="scss" scoped>
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		padding: 20rpx 0;
	}

	.form {
		padding: 30rpx;
	}

	.action {
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;

		.button::after {
			border: none;
		}

		.button-default::after {
			border: none;
		}


		.btns {
			height: 80rpx;
			background: radial-gradient(at 0% 0%, #01243A 0%, #004576 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
			width: 670rpx;
			margin: 0 auto;
			box-sizing: border-box;

			&.del {
				background: #fff;
				border: 2rpx solid #DCDCDC;
				color: #666666;
				margin-top: 30rpx;
			}
		}

		.button-default {
			height: 80rpx;
			background: rgba(0, 179, 139, .1);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #00B38B;
			line-height: 80rpx;
			width: 45%;
		}
	}

	.white-action {
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;

		.button {
			height: 80rpx;
			border-radius: 40rpx;
			background: #ffffff;
			box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
			line-height: 80rpx;
		}
	}

	.choice-picker {
		background: #F1F1F1;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		height: 40px;
		color: black;
	}
</style>