用户地址编辑

api/userSettings.js

@@ -8,3 +8,20 @@ export function useraDdressData(data) {
         data: data
     })
 }
+
+//查询收服务地址
+export function addressList() {
+    return request({
+        url: `/core/user/address/list`,
+        method: 'get',
+    })
+}
+
+// 修改受服务地址
+export function useraDdress(data) {
+    return request({
+        url: `/core/user/address`,
+        method: 'put',
+		data: data
+    })
+}

pages.json

@@ -173,6 +173,18 @@
 					"style": {
 						"navigationBarTitleText": "设置"
 					}
+				},
+				{
+					"path": "selectAddress/index",
+					"style": {
+						"navigationBarTitleText": "服务地址"
+					}
+				},
+				{
+					"path": "selectAddress/edit",
+					"style": {
+						"navigationBarTitleText": "服务地址修改"
+					}
 				}
 			]
 		},

pages/mine.vue

@@ -217,6 +217,7 @@ const userList = ref(
 	{
 		name: '地址',
 		iconName: 'kefu-ermai',
+		page: '/pages_mine/pages/selectAddress/index'
 	},
 	{
 		name: '志愿者',
@@ -262,7 +263,6 @@ const getDetails = async () => {
 }
 
 const handLsetTing = () => {
-		console.log('123')
 		uni.navigateTo({
 			url: '/pages_mine/pages/setupUser/index'
 		})
@@ -272,13 +272,8 @@ const handLsetTing = () => {
 
 const geUserInfo = () => {
 	console.log(store.state, '>>>>99');
-	// userInfo.value = store.state.user
 	store.dispatch('GetInfo').then((res) => {
 		userInfo.value = store.state.user
-		console.log(store.state.user, '>>>>99');
-		
-		
-
 	});
 }
 

pages_mine/pages/selectAddress/edit.vue

@@ -0,0 +1,304 @@
+<template>
+	<view>
+		<up-form labelPosition="left" :model="modelForm" :rules="rulesForm" ref="formRef">
+			<up-form-item label="姓名" prop="name" borderBottom labelWidth="70">
+				<up-input v-model="modelForm.name" border="none" placeholder="请输入姓名"></up-input>
+			</up-form-item>
+			<up-form-item label="性别" prop="sex" borderBottom @click="() => (sexFlag = true)" labelWidth="70">
+				<up-input v-model="displaySex" disabled disabledColor="#ffffff" placeholder="请选择性别"
+					border="none"></up-input>
+				<template #right>
+					<up-icon name="arrow-right"></up-icon>
+				</template>
+			</up-form-item>
+			<up-form-item label="关系" prop="label" borderBottom @click="() => labelFlag = true" labelWidth="70">
+				<up-input v-model="modelForm.label" disabled disabledColor="#ffffff" placeholder="请选择关系"
+					border="none"></up-input>
+				<template #right>
+					<up-icon name="arrow-right"></up-icon>
+				</template>
+			</up-form-item>
+			<up-form-item label="年龄" prop="age" borderBottom labelWidth="70">
+				<up-input v-model="modelForm.age" border="none" placeholder="请输入年龄"></up-input>
+			</up-form-item>
+			<up-form-item label="手机号" prop="telephone" borderBottom
+				:style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }" labelWidth="70">
+				<up-input v-model="modelForm.telephone" border="none" placeholder="请输入手机号"></up-input>
+			</up-form-item>
+			<up-form-item label="是否有传染疾病" prop="isContagion" borderBottom labelWidth="150">
+				<up-radio-group v-model="modelForm.isContagion" placement="row" @change="handleContagionChange">
+					<up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in isContagionOption"
+						:key="index" :label="item.name" :name="item.key"></up-radio>
+				</up-radio-group>
+			</up-form-item>
+			<up-form-item v-show="showContagionContent" label="传染病内容" prop="haveContagion" borderBottom
+				labelWidth="100">
+				<up-input v-model="modelForm.haveContagion" border="none" placeholder="请输入传染病内容"></up-input>
+			</up-form-item>
+			<up-form-item label="地区" prop="area" borderBottom @click="()=> addressShow = true" labelWidth="70">
+				<pickerAddress @change="addressChange"
+					:selectValue="[ modelForm.provinceInd, modelForm.cityInd, modelForm.districtInd ]">
+					<view class="inp"
+						:class="modelForm.provinceName&&modelForm.cityName&&modelForm.districtName?'':'address-inp'">
+						{{modelForm.provinceName ? modelForm.provinceName:'省'}} /
+						{{modelForm.cityName ? modelForm.cityName:'市'}} /
+						{{modelForm.districtName ? modelForm.districtName:'区'}}
+					</view>
+				</pickerAddress>
+				<template #right>
+					<up-icon name="arrow-right"></up-icon>
+				</template>
+			</up-form-item>
+			<up-form-item label="地址" prop="address" borderBottom labelWidth="70">
+				<up-input v-model="modelForm.address" border="none" placeholder="请输入地址"></up-input>
+			</up-form-item>
+		</up-form>
+		<up-action-sheet :show="sexFlag" :actions="sexOptions" @select="sexSelect"
+			@close="sexFlag = false"></up-action-sheet>
+		<up-action-sheet :show="labelFlag" :actions="relaTionsHip" @select="sexSelectsHip"
+			@close="labelFlag = false"></up-action-sheet>
+		<up-button type="primary" @click="handleSubmit" text="编辑" style="margin: 30rpx;" />
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		computed,
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		useraDdress,
+	} from "@/api/userSettings.js"
+	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue' // 地区选择器组件
+	const formRef = ref(null)
+
+	// 获取页面传递的参数
+	// 获取页面传递的参数
+	onLoad((options) => {
+	    console.log(options, '》》》》》》》》》》》》// 检查传递的参数');
+	
+	    // 对每个字段进行解码（如果编码过两次）
+	    if (options) {
+	        options.cityName = decodeURIComponent(decodeURIComponent(options.cityName || ''));
+	        options.districtName = decodeURIComponent(decodeURIComponent(options.districtName || ''));
+	        options.label = decodeURIComponent(decodeURIComponent(options.label || ''));
+	        options.provinceName = decodeURIComponent(decodeURIComponent(options.provinceName || ''));
+			options.name = decodeURIComponent(decodeURIComponent(options.name || ''));
+			options.address = decodeURIComponent(decodeURIComponent(options.address || ''));
+			options.haveContagion = decodeURIComponent(decodeURIComponent(options.haveContagion || ''));
+	        modelForm.value = {
+	            ...modelForm.value,
+	            ...options,
+	            sex: options.sex ? Number(options.sex) : '',
+	            age: options.age ? Number(options.age) : '',
+	            isContagion: options.isContagion ? Number(options.isContagion) : '',
+	            provinceName: options.provinceName || '',
+	            cityName: options.cityName || '',
+	            districtName: options.districtName || '',
+	        };
+	        showContagionContent.value = options.isContagion === 1;
+	    }
+	});
+
+	const modelForm = ref({
+		name: '',
+		sex: '',
+		label: '',
+		age: '',
+		telephone: '',
+		isContagion: '',
+		haveContagion: '',
+
+		provinceName: '', // 省
+		provinceCode: '',
+		provinceInd: 0,
+
+		cityName: '', // 市
+		cityCode: '',
+		cityInd: 0,
+
+		districtName: '',
+		districtCode: '',
+		districtInd: 0,
+
+		address: ''
+	})
+	// 回显把provinceName,cityName,districtName字段拼接
+	const rulesForm = ref({
+		name: {
+			type: 'string',
+			required: true,
+			message: '请填写姓名',
+			trigger: ['blur', 'change'],
+		},
+		sex: {
+			type: 'number',
+			required: true,
+			message: '请选择性别',
+			trigger: ['change']
+		},
+		label: {
+			type: 'string',
+			required: true,
+			message: '请选择关系',
+			trigger: ['change'],
+		},
+		userInfo: {
+			type: 'string',
+			required: true,
+			message: '请填写年龄',
+			trigger: ['blur', 'change'],
+		},
+		telephone: {
+			type: 'string',
+			required: true,
+			message: '请填写手机号',
+			trigger: ['blur', 'change'],
+		},
+	})
+
+	let sexFlag = ref(false)
+	let labelFlag = ref(false)
+	let addressShow = ref(false)
+	let index = ref(0)
+	// 新增一个响应式变量，控制传染病内容的显示
+	const showContagionContent = ref(false);
+
+	const sexOptions = ref([{
+		name: '男',
+		value: 0,
+	}, {
+		name: '女',
+		value: 1,
+	}, ]);
+
+	const isContagionOption = ref([{
+			name: '是',
+			key: 1,
+			disabled: false,
+		},
+		{
+			name: '否',
+			key: 0,
+			disabled: false,
+		}
+	])
+	const relaTionsHip = ref([{
+			name: '父母'
+		}, {
+			name: '子女'
+		},
+		{
+			name: '兄弟'
+		},
+		{
+			name: '朋友'
+		},
+		{
+			name: '同学'
+		},
+		{
+			name: '同事'
+		},
+		{
+			name: '配偶'
+		}
+	]);
+
+	const displaySex = computed({
+		get() {
+			const option = sexOptions.value.find(item => item.value === modelForm.value.sex)
+			return option ? option.name : ''
+		},
+		set(newValue) {
+			const option = sexOptions.value.find(item => item.name === newValue)
+			if (option) {
+				modelForm.value.sex = option.value
+			}
+		}
+	})
+	// 性别选择处理
+	function sexSelect(e) {
+		modelForm.value.sex = e.value; // 确保是 0 或 1
+		console.log('Selected sex:', e.value, 'Model sex:', modelForm.value.sex);
+		sexFlag.value = false;
+		// 手动触发验证
+		formRef.value.validateField('sex');
+	}
+
+	function sexSelectsHip(e) {
+		modelForm.value.label = e.name;
+		labelFlag.value = false;
+	}
+
+	function addressChange(info) {
+
+		console.log(info, '>>>>data');
+
+		const {
+			data,
+			code,
+			index
+		} = info
+
+		modelForm.value.provinceName = data[0]
+		modelForm.value.provinceCode = code[0]
+		modelForm.value.provinceInd = index[0]
+
+		modelForm.value.cityName = data[1]
+		modelForm.value.cityCode = code[1]
+		modelForm.value.cityInd = index[1]
+
+		modelForm.value.districtName = data[2]
+		modelForm.value.districtCode = code[2]
+		modelForm.value.districtInd = index[2]
+	}
+
+	// 提交编辑
+	async function handleSubmit() {
+		try {
+			// 验证表单
+			await formRef.value.validate();
+
+			// 准备提交数据
+			const submitData = {
+				...modelForm.value,
+				// 确保提交的数据格式正确
+				sex: modelForm.value.sex,
+				isContagion: modelForm.value.isContagion,
+				// 其他需要处理的数据...
+			};
+
+			// 调用编辑接口
+			const response = await useraDdress(submitData);
+
+			// 处理响应
+			if (response.code === 200) {
+				uni.showToast({
+					title: '编辑成功',
+					icon: 'success'
+				});
+				// 返回上一页或其他操作
+				uni.navigateBack();
+			} else {
+				uni.showToast({
+					title: response.msg || '编辑失败',
+					icon: 'none'
+				});
+			}
+		} catch (error) {
+			console.error('编辑失败', error);
+			uni.showToast({
+				title: '编辑失败',
+				icon: 'none'
+			});
+		}
+	}
+</script>
+
+<style>
+</style>

pages_mine/pages/selectAddress/index.vue

@@ -0,0 +1,132 @@
+<template>
+	<view class="address-list">
+		<view v-for="(item, index) in dataList" :key="index" class="address-item">
+			<!-- 左侧单选框 -->
+			<view class="radio-group">
+				<up-radio-group v-model="value">
+					<up-radio shape="circle"></up-radio>
+				</up-radio-group>
+			</view>
+
+			<!-- 中间内容区（自动伸缩） -->
+			<view class="content-wrapper">
+				<view class="address-line">
+					<text class="address-text">
+						{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}
+					</text>
+				</view>
+				<view class="contact-info">
+					<text class="name">{{ item.name }}</text>
+					<text class="phone">{{ item.telephone }}</text>
+				</view>
+			</view>
+
+			<!-- 右侧编辑图标（固定宽度） -->
+			<view class="edit-icon" @click="hadlClickTo(item)">
+				<up-icon name="edit-pen" size="16"></up-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		ref
+	} from 'vue'
+	import {
+		addressList
+	} from "@/api/userSettings.js"
+
+	const value = ref('')
+	const dataList = ref([])
+	const total = ref(0)
+	const addressId = ref('')
+	const getListData = async () => {
+		const res = await addressList()
+		dataList.value = res.rows
+		total.value = res.total
+	}
+
+	const hadlClickTo = (item) => {
+		const {
+			address,
+			addressId,
+			age,
+			cityName,
+			districtName,
+			label,
+			name,
+			provinceName,
+			sex,
+			telephone,
+			haveContagion
+		} = item; 
+
+		// 手动构建查询参数
+		const params =
+			`address=${encodeURIComponent(address)}&addressId=${encodeURIComponent(addressId)}&age=${encodeURIComponent(age)}&cityName=${encodeURIComponent(cityName)}&districtName=${encodeURIComponent(districtName)}&label=${encodeURIComponent(label)}&name=${encodeURIComponent(name)}&provinceName=${encodeURIComponent(provinceName)}&sex=${encodeURIComponent(sex)}&telephone=${encodeURIComponent(telephone)}&haveContagion=${encodeURIComponent(haveContagion)}`;
+
+		// 使用拼接的查询参数进行页面跳转
+		uni.navigateTo({
+			url: `/pages_mine/pages/selectAddress/edit?${params}`
+		});
+	};
+
+
+	onMounted(() => {
+		getListData()
+	})
+</script>
+
+<style scoped>
+	.address-list {
+		padding: 20rpx;
+	}
+
+	.address-item {
+		display: flex;
+		align-items: flex-start;
+		padding: 24rpx 0;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+
+	.radio-group {
+		flex-shrink: 0;
+		/* 禁止压缩 */
+		margin-right: 20rpx;
+	}
+
+	.content-wrapper {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.edit-icon {
+		flex-shrink: 0;
+		margin-left: 20rpx;
+		padding: 8rpx;
+	}
+
+	.address-text {
+		display: inline-block;
+		max-width: 100%;
+		font-size: 32rpx;
+		font-weight: 500;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.contact-info {
+		display: flex;
+		gap: 20rpx;
+		margin-top: 8rpx;
+	}
+
+	.name,
+	.phone {
+		font-size: 28rpx;
+		color: #666;
+	}
+</style>

pages_mine/pages/setupUser/Address.vue

@@ -3,8 +3,6 @@
 		<template v-for="(item, index) in addInfoArr" :key="index">
 			<add-component ref="addComponentRef"></add-component>
 		</template>
-		
-	
 		<view>
 			<up-button type="error" text="确定" @click="handlOk" style="Button-btn"></up-button>
 		</view>