zhywpt-sp/applyCard/editAddress.vue

<template>
	<view class="form">
		<u-form label-width="120rpx" :model="state.formData" ref="uForm">
			<u-form-item label="收货人">
				<u-input placeholder="名字" :customStyle="btnGetCode" v-model="state.formData.consignee" />
			</u-form-item>
			<u-form-item label="手机号">
				<u-input placeholder="手机号" :customStyle="btnGetCode" type="number"
					v-model="state.formData.consigneeTel" />
			</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" type="textarea"
					v-model="state.formData.address" />
			</u-form-item>
			<u-form-item label="邮政编码">
				<u-input placeholder="邮政编码" :customStyle="btnGetCode" v-model="state.formData.postalCode" />
			</u-form-item>
			<u-form-item label-width="240rpx" label="设置默认收货地址">
				<u-switch v-model="state.formData.defaultAddress" active-color="#25D8C9" :active-value="1"
					:inactive-value="2"></u-switch>
			</u-form-item>
		</u-form>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">保存</button>
			<button style="margin-top: 30rpx;" type="default" class="button-default" @click="deleteHandle()">删除</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,
	});
	// 选择地区回调
	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 = () => {
		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,
			});
		});
	}

	/* 新增/编辑收货地址 */
	const queryAddOrEditAddress = (code, data) => {
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		request(code, options).then((res) => {
			msg("编辑地址成功");
			uni.navigateBack({
				delta: 1,
			});
		});
	};




	onLoad((option) => {
		state.formData = JSON.parse(option.content);
	});
</script>

<style lang="scss" scoped>
	.form {
		padding: 30rpx;
	}

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

		.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;
		}
		.button-default {
			height: 80rpx;
			background: #ccc;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #333;
			line-height: 80rpx;
		}
	}

	.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>