zhywpt-sp/subpackage/orders/addAddress.vue

<template>
	<view class="form">
		<u-form label-width="132rpx" :model="state.formData" ref="uForm" :label-style='labelStyle'>
			<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" :height="80" maxlength="50" type='textarea' :auto-height="true"/>
			</u-form-item>
			<u-form-item label="邮政编码">
				<u-input placeholder="邮政编码" :customStyle="btnGetCode" v-model="state.formData.postalCode" maxlength="6"
					type="number" />
			</u-form-item>
			<view class="form-item forn-switch">
				<label>设置默认收货地址</label>
				<switch :checked="state.isDefault" color="#004576" style="transform:scale(0.75)" @change="changeSwitch">
				</switch>
			</view>

		</u-form>

		<view class="action">
			<button type="default" class="btns" @click="savaHandle()">保存</button>
		</view>
	</view>
</template>

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

	const state = reactive({
		formData: {
			consignee: "",
			consigneeTel: "",
			region: "",
			address: "",
			postalCode: "",
			defaultAddress: 2,
			openId: '',
			orderId: '',
			whetherToMail:true,
		},
		isDefault: 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) => {
		console.log("e", e.detail.value)
		state.formData.region = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
	};

	const savaHandle = () => {
		if (!state.formData.consignee) {
			msg('请输入收货人姓名');
			return;
		}
		if (!checkStr(state.formData.consigneeTel, 'mobile')) {
			msg('请输入正确手机号');
			return;
		}
		if (!state.formData.region) {
			msg('请输选择省市区');
			return;
		}
		if (!state.formData.address) {
			msg('请输入正确详细地址');
			return;
		}
		state.formData.openId = getItem(StorageKeys.OpenId);

		queryAddOrEditAddress(addressAdd, state.formData);
	};

	/* 新增/编辑收货地址 */
	const queryAddOrEditAddress = (code, data) => {
		if (state.formData.orderId) {
			console.log(data);
			let options = {
				type: 2,
				data: data,
				method: "POST",
				showLoading: true,
			};
			requestNew(code, options).then((res) => {
				let options2 = {
					type: 2,
					data: state.formData,
					method: "POST",
					showLoading: true,
				};
				requestNew(updateReceive, options2).then((res) => {
					console.log(res);
					uni.redirectTo({
						url: `/subpackage/orders/release-products?orderId=${state.formData.orderId}&clientFee=${getItem('clientFee')}&&id=${getItem('productId')}`,
					});
				})
			})
				.catch((err) => {
					console.log(err);
				});

		} else if (!getItem(StorageKeys.OpenId)) {
			console.log("1111", data)
			uni.$emit('updateData', data)
			msg("新增地址成功");
			uni.navigateBack({
				delta: 1,
			});
		} else {
			const options = {
				type: 2,
				data: data,
				method: "POST",
				showLoading: true,
			};
			requestNew(code, options)
				.then((res) => {
					msg("新增地址成功");
					uni.navigateBack({
						delta: 1,
					});
				})
				.catch((err) => {
					console.log(err);
				});
		}

	};

	onLoad((option) => {
		state.formData.orderId = option.orderId
	});
</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;

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

	.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: rgb(135, 135, 135);
	}
</style>