ykz-wx/pages/address/add.vue

<template>
	<view class="address-new">
		<pub-loading-view :loaded="loaded" height="100%">
			<view class="address-new-section" v-if="formData">
				<uni-forms ref="formRef" :modelValue="formData" :rules="formRules" label-position="top" label-width="200px">
					<view class="address-new-title">联系人信息</view>
					<uni-forms-item label="收件人姓名" name="shrxm">
						<uni-easyinput class="pub-input" :inputBorder="false" trim="all" v-model="formData.shrxm"
							placeholder="请输入"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="联系电话" name="shrsjh">
						<uni-easyinput class="pub-input" :inputBorder="false" trim="all" v-model="formData.shrsjh"
							placeholder="请输入"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="省市区" name="province">
						<view class="form-address" @click="pickerAddressRef?.openPop">
							<!-- todo 没值显示请选择，有值显示 省 市 区，样式用checked -->
							<view class="form-address-input" :class="popupText?'checked':''">
								{{ popupText ? popupText : '请选择'}}
							</view>
							<view><text class="iconfont checkbox">&#xe656;</text></view>
						</view>
						<!-- 地址级联选中的字体要比不选中的要大，用picker没法实现 -->
						<PickerAddress ref="pickerAddressRef" :province="formData.province" :city="formData.city"
							:area="formData.area" @change="onChangeArea" />
					</uni-forms-item>
					<uni-forms-item label="详细地址（例如**街**号）" name="shrdzxxdz">
						<uni-easyinput class="pub-input" :inputBorder="false" trim="all" v-model="formData.shrdzxxdz"
							placeholder="请输入"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<view class="address-new-default">
					<view class="row" @click="onDefault">
						<text class="iconfont checkbox is-active" v-if="formData.isDefaulted">&#xe63b;</text>
						<text class="iconfont checkbox" v-else>&#xe8bb;</text>
						默认收件地址
					</view>
					<view @click="onClear">清空</view>
				</view>
			</view>
		</pub-loading-view>
		<view class="pub-button is-bg large" @click="onConfirm">确定</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType, onMounted, computed, reactive } from 'vue'
	import { aesEncrypt, aesDecrypt } from "@/lib/encryption";
	import rest from '@/stores/rest'
	import dlg from '@/lib/dlg.ts'
	import * as link from '@/lib/link'
	import { onLoad } from "@dcloudio/uni-app";
	import PickerAddress from './PickerAddress.vue'
import { ConsigneeInfoVO } from '../../lib/type';

	const formRules = reactive({
		shrxm: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		shrsjh: {
			rules: [{
				required: true,
				errorMessage: '请填写手机号码',
			}, {
				validateFunction: function (rule, value, data, callback) {
					let iphoneReg = (
						/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[0-9])\d{8}$/
					); //手机号码
					if (!iphoneReg.test(value)) {
						callback('手机号码格式不正确，请重新填写')
					}
				}
			}]
		},
		province: {
			rules: [{
				required: true,
				errorMessage: '省市区不能为空'
			}]
		},
		shrdzxxdz: {
			rules: [{
				required: true,
				errorMessage: '详细地址不能为空'
			}]
		}
	})


	const pickerAddressRef = ref()
	const uniType = ref('add')
	const formRef = ref()
	const popupText = ref()
	const loaded = ref(false)
	const formData = ref({
		shrxm: '',
		shrsjh: '',
		province: '',
		city: '',
		area: '',
		shrdzxxdz: '',
		shrxxid: null,
		hzid: '',
		isDefaulted: false
	})

	// 默认地址
	const onDefault = () => {
		formData.value.isDefaulted = !formData.value.isDefaulted
	}
	const onChangeArea = (e) => {
		formData.value.province = e.province
		formData.value.city = e.city
		formData.value.area = e.area
		popupText.value = e.province + ' ' + e.city + ' ' + e.area
	}
	// 清除
	const onClear = () => {
		popupText.value = null
		formData.value = {
			shrxm: '',
			shrsjh: '',
			province: '',
			city: '',
			area: '',
			shrdzxxdz: '',
			shrxxid: null,
			hzid: '',
			isDefaulted: false
		}
	}


	const onConfirm = async () => {
		// 校验表单
		formRef.value.validate().then(async res => {
			// 提交请求
			try {
				if (uniType.value == 'add') {
					await rest.post('/default/consignee-info/create', formData.value)
					dlg.success('新增地址管理成功！')
				} else if (uniType.value == 'edit') {
					await rest.put('/default/consignee-info/update', formData.value)
					dlg.success('修改地址管理成功！')
				}
				link.back()
			} catch (e) {
				dlg.error(e)
			}
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}
	
	const getInfo = async (shrxxid:string)=> {
		try {
			let res = await rest.get('/default/consignee-info/get', {id:shrxxid}) as ConsigneeInfoVO
			formData.value.shrxm = res.shrxm
			formData.value.shrsjh = res.shrsjh
			formData.value.province = res.province
			formData.value.city = res.city
			formData.value.area = res.area
			formData.value.shrdzxxdz = res.shrdzxxdz
			formData.value.hzid = res.hzid
			formData.value.shrxxid = res.shrxxid
			popupText.value = res.province + res.city + res.area
			console.log("内容",formData.value)
		} catch (e) {
			dlg.error(e)
		}
	}


	onLoad((data) => {
		formData.value.hzid = aesDecrypt(data.hzid)
		if (data.shrxxid){
			let shrxxid = aesDecrypt(data.shrxxid)
			let defaulted = aesDecrypt(data.defaulted)
			console.log("内容",defaulted)
			uni.setNavigationBarTitle({
				title: '编辑地址'
			})
			uniType.value = 'edit'
			formData.value.isDefaulted = defaulted == "true" ? true : false
			getInfo(shrxxid)
		}
	})
</script>

<style lang="scss" scoped>
	.address-new {
		padding: $uni-spacing-col-s3 $page-row-spacing 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100%;

		// position: relative;
		:deep(.pub-loading) {
			flex: 1;
		}

		.address-new-section {
			background: #fff;
			border-radius: 16rpx;
			padding: $uni-spacing-col-s4 $page-row-spacing $uni-spacing-col-s3;

			.address-new-title {
				font-size: $uni-font-size-lg;
				line-height: $uni-line-height-lg;
				font-weight: 800;
				margin-bottom: 24rpx;
			}

			.form-address {
				@include flex-between;
				border-bottom: 1px solid $uni-border-color;
				// height: 70rpx;
				padding: 8rpx 0 24rpx;
				// todo 模拟校验出错
				font-size: $uni-font-size-lg;
				line-height: $uni-line-height-lg;
				color: $uni-text-color-light;

				.form-address-input.checked {
					color: $uni-text-color;
				}
			}

			:deep(.uni-forms-item__label) {
				color: $uni-text-color-grey;
				padding: 0rpx 0 0rpx 0; //12,4
				font-size: $uni-font-size-base;
				line-height: $uni-line-height-base;
				height: auto;
			}

			:deep(.uni-easyinput__content) {
				border-bottom: 1px solid $uni-border-color;

				.uni-easyinput__content-input {
					padding-left: 0 !important;
					height: 70rpx;

					.uni-input-wrapper {
						.uni-input-placeholder {
							font-size: $uni-font-size-lg;
							line-height: $uni-line-height-lg;
							color: $uni-text-color-light;
						}

						.uni-input-input {
							font-size: $uni-font-size-lg;
							line-height: $uni-line-height-lg;
							color: $uni-text-color;
						}
					}
				}
			}

			.address-new-default {
				// border-top: 1px solid $uni-border-color;
				// margin-top: 24rpx;
				// padding-top: 16rpx;
				@include flex-between;
				font-size: $uni-font-size-sm;
				line-height: $uni-line-height-sm;

				.row {
					@include flex;
				}

				.iconfont {
					font-size: 36rpx;
					margin-right: 8rpx;

					&.checkbox {
						margin-right: 16rpx;
						color: $uni-text-color-disable;
					}

					&.is-active {
						color: $uni-color-primary;
					}
				}
			}
		}
	}
</style>