jd_logistics/jd_logistics-app/pages/address/edit1.vue

<template>
	<view class="container">
		<scroll-view class="scroll-content" scroll-y>
			<!-- 基本信息区域 -->
			<view class="section-card">

				<!-- 联系人 -->
				<view class="form-item">
					<view class="label required">姓名</view>
					<view class="input-area">
						<u-input v-model="formData.shopContacts" placeholder="请输入联系人" border="none" clearable
							@blur="validateField('shopContacts')" input-align="right" />
						<view class="error-msg" v-if="errors.shopContacts">{{ errors.shopContacts }}</view>
					</view>
				</view>

				<!-- 联系电话 -->
				<view class="form-item">
					<view class="label required">联系电话</view>
					<view class="input-area">
						<u-input v-model="formData.shopContactInfo" placeholder="请输入联系电话" border="none" clearable
							@blur="validateField('shopContactInfo')" input-align="right" />
						<view class="error-msg" v-if="errors.shopContactInfo">{{ errors.shopContactInfo }}</view>
					</view>
				</view>

				<!-- 位置 -->
				<view class="form-item  time-picker-item" @click="showAreaPicker = true">
					<view class="label required">所在省市区</view>
					<view class="input-area">
						<view class="time-display">
							{{ formData.shopLocation || '请选择省市区' }}
							<u-icon name="arrow-right" color="#c0c4cc" class="time-arrow"></u-icon>
						</view>
						<view class="error-msg" v-if="errors.shopLocation">{{ errors.shopLocation }}</view>
					</view>
				</view>

				<!-- 详细地址 -->
				<!-- 	<view class="form-item">
				<view class="label">详细地址</view>
				<view class="input-area">
					<u-input v-model="formData.shopLocationLine" placeholder="请输入详细地址" border="none" clearable
						input-align="right" />
				</view>
			</view> -->

				<!-- 详细地址 -->
				<view class="upload-section">
					<view class="form-label required">详细地址</view>
					<u-textarea class="textarea" v-model="formData.goodsOverview" placeholder="请填写详细地址" maxlength="200"
						height="160" count></u-textarea>
				</view>
			</view>
			<!-- 占位元素，确保内容不被底部按钮遮挡 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>

		<view class="add-btn-container">
			<button class="add-btn" @click="handleSave">
				<text class="add-btn-text">保存</text>
			</button>
		</view>



		<!-- 省市区选择器组件 -->
		<AreaPickerCustommer :show="showAreaPicker" @update:show="showAreaPicker = $event"
			@confirm="handleAreaConfirm" />

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app' // 导入 UniApp 的生命周期
	import AreaPickerCustommer from '@/components/AreaPickerCustommer.vue';



	const tenantId = ref('')
	// 表单数据 - 根据UI设计图预填数据
	const formData = reactive({
		id: '',
		shopImage: [],
		shopAvatar: undefined,
		shopLocation: '',
		shopLocationLine: '',
		shopContacts: '',
		shopContactInfo: '',
		wechatId: '',
		goodsOverview: '',
		approvalType: '0' //0:门店审批 1:无需审批
	})
	// {
	// 	"locationLng": 112.45,
	// 	"locationLat": 34.61
	// }

	// 错误信息
	const errors = reactive({
		shopLocation: '',
		shopContacts: '',
		shopContactInfo: ''
	})

	// 头像上传
	const avatarList = ref([])

	// 海报上传
	const posterList = ref([])
	// 地区选择器
	const showAreaPicker = ref(false);
	// 时间选择器
	const showTimePicker = ref(false)

	const filterNumber = (value) => {
		// 移除所有非数字字符，包括小数点（如果不需要小数点可以这样）
		// 如果允许小数点，可以使用 /[^\d.]/g，但注意只能有一个小数点
		// 这里我们只需要整数，所以移除非数字
		formData.value.shopPromotionProportion = value.replace(/\D/g, '');
	};

	onLoad((option) => {
		tenantId.value = option.tenantId
	})

	onMounted(() => {
		getAddressInfo()
	})


	const getAddressInfo = () => {
		const params = {
			tenantId: tenantId.value
		}
		// getAddressApi(params).then(res => {
		// 	if (res.code == 200) {
		// 		if (res.data.length == 0) {
		// 			uni.showToast({
		// 				title: '未查询到店铺信息',
		// 				icon: 'success'
		// 			})
		// 			return
		// 		}
		// 		const shopItemTemp = res.data[0]
		// 		Object.assign(formData, shopItemTemp)
		// 		if (!shopItemTemp.approvalType) {
		// 			formData.approvalType = '0'
		// 		}

		// 		// if (formData.businessHoursStart && formData.businessHoursEnd) {
		// 		// 	formData.businessHours = `${formData.businessHoursStart}-${formData.businessHoursEnd}`
		// 		// }
		// 		formData.shopAvatar = shopItemTemp.shopAvatar
		// 		if (shopItemTemp.shopAvatarUrl) {
		// 			avatarList.value.push({
		// 				url: shopItemTemp.shopAvatarUrl,
		// 				status: 'success'
		// 			})
		// 		}

		// 		formData.shopImage = []
		// 		const imageIdList = shopItemTemp.shopImage.split(",")
		// 		formData.shopImage = imageIdList
		// 		const imageList = shopItemTemp.shopImageUrl.split(",")

		// 		if (shopItemTemp.shopImageUrl) {
		// 			imageList.map(it => {
		// 				posterList.value.push({
		// 					url: it,
		// 					status: 'success'
		// 				})
		// 			})
		// 		}
		// 	}
		// })
	}

	// 表单验证
	const validateField = (field) => {
		switch (field) {
			case 'shopContacts':
				errors.shopContacts = formData.shopContacts.trim() ? '' : '联系人不能为空'
				break
			case 'shopContactInfo':
				if (!formData.shopContactInfo) {
					errors.shopContactInfo = '联系电话不能为空'
				} else if (!/^1[3-9]\d{9}$/.test(formData.shopContactInfo)) {
					errors.shopContactInfo = '请输入正确的手机号码'
				} else {
					errors.shopContactInfo = ''
				}
				break
			case 'shopLocation':
				errors.shopLocation = formData.shopLocation.trim() ? '' : '店铺位置不能为空'
				break
		}
	}




	// 时间选择确认
	const timeConfirm = (event) => {
		const start = event.value[0] ? event.value[0]?.label : '00:00'
		const end = event.value[1] ? event.value[1]?.label : '00:00'
		formData.businessHoursStart = start
		formData.businessHoursEnd = end
		formData.businessHours = `${start}-${end}`
		showTimePicker.value = false
		validateField('businessHours')
	}

	// 处理地区选择确认
	const handleAreaConfirm = (areaData) => {
		console.log('选择的地区数据:', areaData);
		// 更新表单数据
		const district = areaData.district ? areaData.district.name : '';
		const province = areaData.province ? areaData.province.name : '';
		const city = areaData.city ? areaData.city.name : '';
		formData.shopLocation = province + city + district;
		// 触发地区字段验证
		validateField('shopLocation');
	};

	//0:门店审批 1:无需审批
	const checkApprovalType = (type) => {
		formData.approvalType = type
	}
	// 保存处理
	const handleSave = () => {
		// 验证所有必填字段
		validateField('shopName')
		validateField('shopLocation')
		validateField('shopContacts')
		validateField('shopContactInfo')
		validateField('businessHours')

		// 检查是否有错误
		const hasErrors = Object.values(errors).some(error => error !== '')

		if (hasErrors) {
			return
		}
		if (!formData.shopAvatar) {
			uni.showToast({
				icon: 'none',
				title: "请上传店铺头像~"
			})
			return
		}

		const params = {
			...formData
		}
		params.shopImage = params.shopImage.join(",")
		editShopInfoApi(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: "修改成功~",
					icon: "success"
				})
				uni.navigateBack()
			}
		})

	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F5F7FA;
	}

	.page-header {
		padding: 32rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		flex-shrink: 0;

		.page-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.scroll-content {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 160rpx;
		/* 为底部按钮留出空间 */
	}

	.section-card {
		padding: 16rpx;



		.form-label {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		.form-label.required::before {
			content: "*";
			color: #fa3534;
			margin-right: 8rpx;
		}

		/* 上传区域样式 */
		.upload-section {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			padding: 16rpx;
			
			
			/* 确保上传的头像预览也是圆形 */
			:deep(.u-textarea) {
				background-color: #F5F7FA;
				border: none;
				padding: 16rpx;
				font-size: 28rpx;
			}
			
			:deep(.u-textarea__count) {
				background-color: #F5F7FA;
			}
			
			

		}

		.textarea {
			background-color: #F5F7FA;
			border: none;
			padding: 16rpx;
			font-size: 28rpx;
		}

		.column {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			padding: 16rpx;

			&:last-child {
				border-bottom: none;
			}

			.label {
				width: 260rpx;
				font-size: 28rpx;
				color: #333;
				flex-shrink: 0;

				&.required::before {
					content: '*';
					color: #ff4444;
					margin-right: 8rpx;
				}
			}
		}

		.form-item {
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			padding: 16rpx;
			display: flex;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			.label {
				width: 260rpx;
				font-size: 28rpx;
				color: #333;
				flex-shrink: 0;

				&.required::before {
					content: '*';
					color: #ff4444;
					margin-right: 8rpx;
				}
			}

			.input-area {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.error-msg {
					font-size: 24rpx;
					color: #ff4444;
					margin-top: 8rpx;
					width: 100%;
					text-align: right;
				}
			}

			.textarea {
				background-color: #F5F7FA;
				border: none;
				padding: 16rpx;
				font-size: 28rpx;
			}
		}


		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 16rpx;
			height: 48rpx;
			line-height: 48rpx;
		}

		.upload-desc {
			font-size: 24rpx;
			color: #999;
			margin-top: 16rpx;
		}
	}

	/* 营业时间选择项 - 整个横排可点击 */
	.time-picker-item {
		cursor: pointer;

		.time-display {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 100%;
			color: #333;

			.time-arrow {
				margin-left: 16rpx;
			}
		}
	}

	.avatar-upload {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.upload-avatar-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60rpx;
		height: 60rpx;
		border: 2rpx dashed #c0c4cc;
		/* 圆形头像 */
		background-color: #f8f8f8;


		/* 确保上传的头像预览也是圆形 */
		:deep(.u-upload__wrap) {
			.u-upload__wrap__preview {
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}


	.poster-upload-area {
		margin-top: 16rpx;
		display: flex;
		justify-content: flex-start;
	}

	.upload-poster-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 148rpx;
		height: 148rpx;
		border: 2rpx dashed #c0c4cc;
		border-radius: 8rpx;
		background-color: #f8f8f8;

		.upload-text {
			font-size: 24rpx;
			color: #999;
			margin-top: 12rpx;
		}
	}

	.radio-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 16rpx;

		.radio-item {
			margin-bottom: 24rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: left;
			font-size: 28rpx;
			color: #333;

			.radio-desc {
				font-size: 24rpx;
				color: #999;
				margin-top: 8rpx;
			}
		}
	}

	.bottom-placeholder {
		height: 40rpx;
	}

	.add-btn-container {
		padding: 32rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
	}

	.add-btn {
		height: 88rpx;
		background: #1B64F0;
		border-radius: 44rpx;
	}

	.add-btn-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		height: 88rpx;
		line-height: 88rpx;
	}

	/* 按钮激活效果 */
	.add-btn:active {
		opacity: 0.8;
	}
</style>