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="所在地区">
				<u-input :customStyle="btnGetCode" type="select" :select-open="state.show"
					v-model="state.formData.region" placeholder="省 市 区" @click="state.show = true"></u-input>
			</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 label="邮政编码">
				<u-input placeholder="邮政编码" :customStyle="btnGetCode" v-model="state.formData.postalCode" type="number"
					maxlength="6" />
			</u-form-item>
			<view class="form-item forn-switch">
				<label>设置默认收货地址</label>
				<switch :checked="state.formData.defaultAddress==1" color="#43a1e0" style="transform:scale(0.75)"
					@change="changeSwitch"></switch>
			</view>
		</u-form>

		<view class="action">
			<button type="default" class="button-default" @click="deleteHandle()">删除</button>
			<button type="default" class="button" @click="savaHandle()">保存</button>
		</view>
		<u-picker mode="region" v-model="state.show" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		addOrEditAddressQuery,
		addressDelete
	} from "@/utils/network/api.js";
	import {
		request
	} 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,
		},
		show: false,
	});
	//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.province.name + e.city.name + e.area.name;
	};

	const savaHandle = () => {
		state.formData.openId = getItem(StorageKeys.OpenId);
		queryAddOrEditAddress(addOrEditAddressQuery, 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,
			};
			request(addressDelete, options).then((res) => {
				msg("删除地址成功");
				uni.navigateBack({
					delta: 1,
				});
			});
		} else {
			uni.navigateTo({
				url: `/subpackage/orders/essential-information?del=1`
			});
		}
	}

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




	onLoad((option) => {
		state.formData = JSON.parse(option.content);
	});
</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;
		display: flex;
		width: 90%;
		justify-content: space-between;

		.button::after {
			border: none;
		}

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

		.button {
			height: 80rpx;
			background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
			width: 45%;
		}

		.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;
		}
	}
</style>