我的房屋流程对接接口，缴费页面功能修改一版

property-uniapp-project/manifest.json

@@ -54,6 +54,11 @@
         "setting" : {
             "urlCheck" : false
         },
+		"permission": {
+		  "scope.camera": {
+		    "desc": "用于扫码"
+		  }
+		},
         "usingComponents" : true
     },
     "mp-alipay" : {

property-uniapp-project/pageSubPack/api/apiSub.js

@@ -0,0 +1,90 @@
+import request, {
+	get,
+	post,
+	deleteMethod,
+	putMethod
+} from "./request.js"
+
+
+// =======公告列表========
+export const getResidentNoticeList = (data) => {
+	return get('/api/resident/notice/list', data)
+}
+// 我的房屋列表
+export const getMyHouseList = (data) => {
+	return get('/api/resident/my/house/list', data)
+}
+// 提交房屋注册认证申请
+export const myHouseApply = (data) => {
+	return post('/api/resident/my/house/apply', data)
+}
+// 查询小区列表
+export const getVillageList = (data) => {
+	return get('/api/resident/village/list', data)
+} // 查询楼栋列表
+export const getHouseBuildings = (data) => {
+	return get('/api/resident/house/buildings', data)
+}
+// 查询单元列表
+export const getHouseUnits = (data) => {
+	return get('/api/resident/house/units', data)
+}
+// 查询楼层列表
+export const getHouseFloors = (data) => {
+	return get('/api/resident/house/floors', data)
+}
+// 查询户号列表
+export const getHouseHouses = (data) => {
+	return get('/api/resident/house/houses', data)
+}
+// 房屋绑定手机获取验证码
+export const getHouseAuthSendSmsCode = (data) => {
+	return post('/api/resident/auth/sendSmsCode', data)
+}
+// 房屋详情
+export const getMyHouseDetail = (data) => {
+	return get(`/api/resident/my/house/${data.id}`, data)
+}
+// 删除房屋
+export const deleteMyHouse = (data) => {
+	return deleteMethod(`/api/resident/my/house/${data.id}`, data)
+}
+// 设置默认房屋
+export const setMyHouseDefault = (data) => {
+	return post(`/api/resident/my/house/default`, data)
+}
+// 获取当前用户登录信息
+export const getUserProfile = (data) => {
+	return get(`/api/resident/user/profile`, data)
+}
+// 发送新手机号验证码
+export const getAuthSendSmsCode = (data) => {
+	return post(`/api/resident/auth/sendSmsCode`, data)
+}
+// 更改手机号
+export const getUserChangePhone = (data) => {
+	return post(`/api/resident/user/changePhone`, data)
+}
+// 获取消息通知开关
+export const getUserNotify = (data) => {
+	return get(`/api/resident/user/notify`, data)
+}
+// 更新消息通知开关
+export const changeUserNotify = (data) => {
+	return post(`/api/resident/user/notify`, data)
+} // 修改密码(需登录)
+export const authChangePassword = (data) => {
+	return post(`/api/resident/auth/changePassword`, data)
+} // 退出登录
+export const authLogout = (data) => {
+	return post(`/api/resident/auth/logout`, data)
+}
+// 编辑房屋
+export const upDateMyHouse = (data) => {
+	return putMethod(`/api/resident/my/house/${data.id}`, data)
+}
+
+// 修改身份证照片
+export const uploadFileUploadImage = (data) => {
+	return post(`/api/resident/file/uploadImage`, data)
+}

property-uniapp-project/pageSubPack/api/request.js

@@ -1,25 +1,29 @@
-
+let baseUrl = '';
-let baseUrl = ''; 
 if (process.env.NODE_ENV === 'development') {
+	// http://192.168.1.215
+	// http://192.168.0.224
 	baseUrl = 'http://192.168.0.224:8080'; // 开发环境
 } else {
-	baseUrl = 'http://192.168.1.224:8080'; // 生产环境
+	baseUrl = 'http://192.168.0.224:8080'; // 生产环境
 }
 
 export default function request(url, data = {}, method = "GET") {
 	return new Promise((resolve, reject) => {
 		// 加载中提示（提升用户体验）
-		uni.showLoading({ title: '请求中...', mask: true });
+		uni.showLoading({
+			title: '请求中...',
+			mask: true
+		});
 
 		uni.request({
 			url: baseUrl + url,
 			data: data,
 			method: method,
 			header: {
-			      "Authorization": "Bearer " + (uni.getStorageSync("token") || ''),
+				"Authorization": "Bearer " + (uni.getStorageSync("token") || ''),
-			      "clientid": "resident",
+				"clientid": "resident",
-			      'content-type': 'application/json'
+				'content-type': 'application/json'
-			  },
+			},
 			// header: {
 			// 	"token": uni.getStorageSync("token") || '',
 			// 	'content-type': 'application/json'
@@ -30,9 +34,13 @@ export default function request(url, data = {}, method = "GET") {
 				// 处理HTTP状态码（网络层面）
 				if (res.statusCode !== 200) {
 					const errMsg = `请求失败（${res.statusCode}）`;
-					uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
+					uni.showToast({
+						title: errMsg,
+						icon: "none",
+						duration: 2000
+					});
 					reject(errMsg);
-					return; 
+					return;
 				}
 
 				// 处理业务状态码（后端返回的data里）
@@ -40,10 +48,16 @@ export default function request(url, data = {}, method = "GET") {
 
 				// 优先处理token过期（401）
 				if (resData.code === 401) {
-					uni.showToast({ title: '登录过期，请重新登录', icon: 'none', duration: 2000 });
+					uni.showToast({
+						title: '登录过期，请重新登录',
+						icon: 'none',
+						duration: 2000
+					});
 					uni.clearStorageSync('token');
 					setTimeout(() => {
-						uni.reLaunch({ url: '/pageSubPack/loginSub/pwd-login' });
+						uni.reLaunch({
+							url: '/pageSubPack/loginSub/pwd-login'
+						});
 					}, 1500);
 					reject('token 过期');
 					return;
@@ -56,20 +70,31 @@ export default function request(url, data = {}, method = "GET") {
 				// 业务失败（code=500）
 				else if (resData.code === 500) {
 					const errMsg = resData.msg || '请求失败';
-					uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
+					uni.showToast({
+						title: errMsg,
+						icon: "none",
+						duration: 2000
+					});
 					// resolve(null)
 					reject(errMsg);
-				}
+				} else {
-				else {
 					const errMsg = resData.msg || '业务异常';
-					uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
+					uni.showToast({
+						title: errMsg,
+						icon: "none",
+						duration: 2000
+					});
 					reject(errMsg);
 				}
 			},
 			fail: (err) => {
 				uni.hideLoading(); // 关闭加载提示
 				const errMsg = err.msg || '网络请求失败';
-				uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
+				uni.showToast({
+					title: errMsg,
+					icon: "none",
+					duration: 2000
+				});
 				reject(err);
 			}
 		});
@@ -77,5 +102,5 @@ export default function request(url, data = {}, method = "GET") {
 }
 export const get = (url, data) => request(url, data, 'GET');
 export const post = (url, data) => request(url, data, 'POST');
-
+export const deleteMethod = (url, data) => request(url, data, 'DELETE');
-
+export const putMethod = (url, data) => request(url, data, 'PUT');

property-uniapp-project/pageSubPack/api/useImageUpload.js

@@ -0,0 +1,173 @@
+// 服务器地址（与 request.js 保持一致）
+const baseUrl = 'http://192.168.0.224:8080';
+
+/**
+ * 图片上传 Hook
+ * 支持 uniapp 和微信小程序
+ * 解决编辑回显后重新上传的问题
+ */
+
+import { ref } from 'vue'
+
+/**
+ * @param {Object} options 配置
+ * @param {string} options.uploadUrl - 上传接口地址
+ * @param {string} options.fileKey - 上传文件的字段名，默认 'file'
+ * @returns {Object}
+ */
+export function useImageUpload(options = {}) {
+	const {
+		uploadUrl = '/api/resident/file/uploadImage',
+		fileKey = 'file'
+	} = options
+
+	// 当前显示的图片（前端展示用，支持 base64/blob URL/网络URL）
+	const previewUrl = ref('')
+	// 服务器返回的 URL（提交时使用）
+	const serverUrl = ref('')
+	// 临时的文件路径（重新上传时用）
+	const tempFilePath = ref(null)
+	// 上传状态
+	const uploading = ref(false)
+
+	/**
+	 * 设置回显图片（编辑时从后端获取）
+	 * @param {string} url - 后端返回的图片URL
+	 */
+	const setPreviewUrl = (url) => {
+		if (url) {
+			previewUrl.value = url
+			serverUrl.value = url
+			tempFilePath.value = null // 重置临时文件，表示没有重新上传
+		}
+	}
+
+	/**
+	 * 选择图片并预览（不上传）
+	 * @returns {Promise<string>} 返回临时文件路径
+	 */
+	const chooseImage = () => {
+		return new Promise((resolve, reject) => {
+			uni.chooseImage({
+				count: 1,
+				sizeType: ['compressed'],
+				sourceType: ['camera', 'album'],
+				success: (res) => {
+					const path = res.tempFilePaths[0]
+					// 设置预览
+					previewUrl.value = path
+					// 记录临时文件路径
+					tempFilePath.value = path
+					// 置空服务器URL，等实际上传后再获取
+					serverUrl.value = ''
+					resolve(path)
+				},
+				fail: (err) => {
+					reject(err)
+				}
+			})
+		})
+	}
+
+	/**
+	 * 上传图片到服务器
+	 * @returns {Promise<string>} 返回服务器上的URL
+	 */
+	const uploadImage = () => {
+		// 如果没有新选择临时文件，直接返回已有的服务器URL
+		if (!tempFilePath.value) {
+			return Promise.resolve(serverUrl.value)
+		}
+
+		// 如果已经有服务器URL且没有重新选择，也直接返回
+		if (serverUrl.value && !tempFilePath.value) {
+			return Promise.resolve(serverUrl.value)
+		}
+
+		uploading.value = true
+
+		return new Promise((resolve, reject) => {
+			uni.uploadFile({
+				url: baseUrl + uploadUrl,
+				filePath: tempFilePath.value,
+				name: fileKey,
+				header: {
+					'Authorization': 'Bearer ' + (uni.getStorageSync('token') || ''),
+					'clientid': 'resident'
+				},
+				success: (res) => {
+					try {
+						const data = JSON.parse(res.data)
+						if (data.code === 200 && data.data) {
+							// 更新服务器URL（确保存的是字符串）
+							const url = typeof data.data === 'string' ? data.data : (data.data?.url || '')
+							serverUrl.value = url
+							// 清空临时文件
+							tempFilePath.value = null
+							resolve(url)
+						} else {
+							uni.showToast({
+								title: data.msg || '上传失败',
+								icon: 'none'
+							})
+							reject(new Error(data.msg || '上传失败'))
+						}
+					} catch (e) {
+						uni.showToast({
+							title: '上传失败',
+							icon: 'none'
+						})
+						reject(e)
+					}
+				},
+				fail: (err) => {
+					uni.showToast({
+						title: err.message || '上传失败',
+						icon: 'none'
+					})
+					reject(err)
+				},
+				complete: () => {
+					uploading.value = false
+				}
+			})
+		})
+	}
+
+	/**
+	 * 获取最终可提交的URL
+	 * 如果有新上传的图片，先上传再返回URL
+	 * 如果没有新上传，直接返回已有的服务器URL
+	 * @returns {Promise<string>}
+	 */
+	const getSubmitUrl = async () => {
+		// 如果重新选择了新图片，先上传
+		if (tempFilePath.value) {
+			return await uploadImage()
+		}
+		// 否则返回已有的服务器URL
+		return serverUrl.value
+	}
+
+	/**
+	 * 重置状态
+	 */
+	const reset = () => {
+		previewUrl.value = ''
+		serverUrl.value = ''
+		tempFilePath.value = null
+		uploading.value = false
+	}
+
+	return {
+		previewUrl,    // 前端展示用
+		serverUrl,     // 提交时使用的URL
+		tempFilePath,  // 临时文件路径
+		uploading,     // 上传中状态
+		setPreviewUrl, // 设置回显图片（编辑时用）
+		chooseImage,   // 选择图片（预览用，不上传）
+		uploadImage,  // 上传到服务器
+		getSubmitUrl, // 获取最终可提交的URL（自动处理上传）
+		reset          // 重置
+	}
+}

property-uniapp-project/pageSubPack/my/houseDetail.vue

@@ -32,21 +32,23 @@
 				</view>
 				<view class="info-row">
 					<text class="info-label">小区</text>
-					<text class="info-value">{{form.community}}}</text>
+					<text class="info-value">{{form.villageName}}</text>
 				</view>
 				<view class="info-row">
 					<text class="info-label">房间号</text>
-					<text class="info-value">{{form.houseNumber}}</text>
+					<text class="info-value">{{form.houseNo}}</text>
 				</view>
 				<view class="info-row">
 					<text class="info-label">业主</text>
-					<text class="info-value">{{form.owner}}</text>
+					<text class="info-value">{{form.ownerName}}</text>
 				</view>
 				<view class="info-row">
 					<text class="info-label">房间状态</text>
-					<text class="info-value"
+					<text class="info-value" :style="{color: form.status === '0' ? '#00aaff' : form.status === '1' ? 
-						:style="{color: form.status === '自住' ? '#00aaff' : form.status === '闲置' ? 
+					'#FF700A' : form.status === '2' ? '#00aa00' :  form.status === '3' ? '#00557f' : '#999' }">{{
-					'#FF700A' : form.status === '租赁' ? '#00aa00' :  form.status === '其他' ? '#00557f' : '#999' }">{{form.status}}</text>
+						form.status === '0' ? '自住' : form.status === '1' ?
+						'闲置' : form.status === '2' ? '租赁' :  form.status === '3' ? '其他' : ''
+					}}</text>
 				</view>
 
 			</view>
@@ -59,35 +61,42 @@
 				</view>
 				<view class="info-row">
 					<text class="info-label">住户</text>
-					<text class="info-value">{{form.resident}}</text>
+					<text class="info-value">{{form.name}}</text>
 				</view>
 				<view class="info-row">
 					<text class="info-label">房间号</text>
-					<text class="info-value">{{form.gender}}</text>
+					<text class="info-value">{{form.houseNo}}</text>
 				</view>
 				<view class="info-row">
 					<text class="info-label">证件类型</text>
-					<text class="info-value">{{form.documentType}}</text>
+					<text
+						class="info-value">{{form.idCardType=='0'?'居民身份证':form.idCardType=='1'?'护照':form.idCardType=='2'?'其他':''}}</text>
 				</view>
 				<view class="info-row">
 					<text class="info-label">证件号码</text>
-					<text class="info-value">{{form.documentNumber}}</text>
+					<text class="info-value">{{form.idCard}}</text>
 				</view>
 				<view class="info-row">
 					<text class="info-label">与业主关系</text>
-					<text class="info-value">{{form.relationship}}</text>
+					<text
+						class="info-value">{{form.ownerRelationship=='0'?'本人':form.ownerRelationship=='1'?'配偶':form.ownerRelationship=='2'?'父母':form.ownerRelationship=='3'?'子女':form.ownerRelationship=='4'?'亲属':form.ownerRelationship=='5'?'租户':form.ownerRelationship=='6'?'其他':''}}</text>
 				</view>
 				<view class="info-row">
 					<text class="info-label">手机号码</text>
-					<text class="info-value">{{form.phoneNum}}</text>
+					<text class="info-value">{{form.phone}}</text>
 				</view>
 
 				<!-- 身份证照片区 -->
 				<view class="photo-row">
 					<text class="info-label" style="width: 200rpx;">本人身份证照片</text>
 					<view class="photo-list">
-						<view class="photo-item"></view>
+						<view class="photo-item"
-						<view class="photo-item"></view>
+							:style="{backgroundImage: `url(${form.cardImageFront||''})`,backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}">
+						</view>
+						<view class="photo-item"
+							:style="{backgroundImage: `url(${form.cardImageBack||''})`,backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}">
+						</view>
+
 					</view>
 				</view>
 			</view>
@@ -103,143 +112,149 @@
 			</button>
 		</view>
 	</view>
-
-
-
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		onReady: function(e) {},
+		ref,
-		components: {
+		onMounted,
+		computed
+	} from 'vue'
+	import {
+		onReachBottom,
+		onPullDownRefresh,
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app'
+	import {
+		getMyHouseDetail,
+		deleteMyHouse
+	} from '/pageSubPack/api/apiSub.js'
 
+	// 响应式数据
+	const statusBarHeight = ref(20)
+	const id = ref()
+	const currentStatus = ref('')
+	const stepList = ref(["房屋信息", "住户信息", "物业审核", "认证成功"])
+	const form = ref([])
+	const statusMap = ref({
+		success: {
+			title: "房屋认证成功",
+			iconClass: "icon-success",
+			iconText: "✓",
+			currentStep: 4,
 		},
-		computed: {
+		pending: {
-			// 动态计算当前状态配置
+			title: "房屋审核中，请耐心等待",
-			statusConfig() {
+			iconClass: "icon-pending",
-				return this.statusMap[this.currentStatus];
+			iconText: "⏳",
-			},
+			currentStep: 3,
-			// 动态计算当前步骤
-			currentStep() {
-				return this.statusConfig.currentStep;
-			},
-
 		},
-
+		fail: {
-		created() {
+			title: "房屋认证失败，请重新提交",
-
+			iconClass: "icon-fail",
+			iconText: "✕",
+			currentStep: 3,
 		},
-		onShow() {
+	})
 
-		},
+	// 计算属性
-		onLoad(option) {
+	const statusConfig = computed(() => {
-			this.id = option.id;
+		return statusMap.value[currentStatus.value]
-			this.currentStatus = option.statusClass;
+	})
+	const currentStep = computed(() => {
+		return statusConfig.value.currentStep
+	})
 
+	// 生命周期
+	onLoad((option) => {
+		id.value = option.id
+		currentStatus.value = option.certificationStatus == '0' ? 'pending' : option.certificationStatus == '1' ?
+			'success' : option.certificationStatus == '2' ? 'fail' : ''
 
-		},
+	})
-		mounted() {},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				// 可通过页面传参动态修改状态：success / pending / fail
-				id: undefined,
-				currentStatus: "",
-				stepList: ["房屋信息", "住户信息", "物业审核", "认证成功"],
-				form: {
-					community: '北境碧桂园小区小区',
-					houseNumber: '101栋2单元402',
-					owner: '张三',
-					status: '租赁',
-					resident: '蒋依依',
-					gender: '女',
-					documentType: '身份证',
-					documentNumber: '371100200001010888',
-					relationship: '亲属',
-					phoneNum: '16599999999',
-				},
-				// 状态配置表
-				statusMap: {
-					success: {
-						title: "房屋认证成功",
-						iconClass: "icon-success",
-						iconText: "✓",
-						currentStep: 4,
-					},
-					pending: {
-						title: "房屋审核中，请耐心等待",
-						iconClass: "icon-pending",
-						iconText: "⏳",
-						currentStep: 3,
-					},
-					fail: {
-						title: "房屋认证失败，请重新提交",
-						iconClass: "icon-fail",
-						iconText: "✕",
-						currentStep: 3,
-					},
-				},
 
+	onShow(() => {})
+	onMounted(() => {
+		getDetail()
+	})
 
-			}
+	const getDetail = async () => {
-		},
+		// 防重复请求
 
+		try {
+			const res = await getMyHouseDetail({
+				id: id.value
+			})
 
-		methods: {
+			const data = res.data
-			// 修改按钮事件（仅认证失败显示）
+			form.value = data
-			clickUpdate() {
+			console.log(form.value);
-				uni.setStorageSync('operationType', 'update')
+		} catch (err) {
-				uni.redirectTo({
+			uni.showToast({
-					url: '/pageSubPack/my/addHouse?id=' + this.id + '&sourcePage=' + 'addHouse',
+				title: `${err}`,
-					success: res => {},
+				icon: 'none'
-					fail: () => {},
+			})
-					complete: () => {}
+			console.error('列表接口报错：', err)
-				});
+		} finally {
-			},
 
-			// 删除按钮事件
+		}
-			onDelete() {
+	}
-				uni.showModal({
+	// 方法（函数名完全不变）
-					title: "确认删除",
+	const clickUpdate = () => {
-					content: "确认删除此房屋信息吗?",
+		uni.setStorageSync('operationType', 'update')
-					success: (res) => {
+		uni.redirectTo({
-						if (res.confirm) {
+			url: '/pageSubPack/my/addHouse?id=' + id.value + '&sourcePage=addHouse'
-							uni.showLoading({
+		})
-								title: '删除中...',
+	}
-								mask: true
+
+	const onDelete = () => {
+		uni.showModal({
+			title: "确认删除",
+			content: "确认删除此房屋信息吗?",
+			success: (res) => {
+				if (res.confirm) {
+					uni.showLoading({
+						title: '删除中...',
+						mask: true
+					})
+					deleteMyHouse({
+						id: id.value
+					}).then(res => {
+						if (res.code === 200) {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'success'
+							})
+							setTimeout(() => {
+								goBack()
+							}, 1000)
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'error'
 							});
-							setTimeout(() => {
-								uni.showToast({
-									title: '删除成功',
-									icon: 'success'
-								});
-							}, 1000);
-							setTimeout(() => {
-								// 提交成功后跳转列表页
-								uni.hideLoading();
-								this.goBack();
-							}, 2500);
-
-
 						}
-					},
-				});
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/my/myHouseIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
 
-		},
+					}).catch(err => {
+						uni.showToast({
+							title: err,
+							icon: 'error'
+						});
+					})
 
+				}
+			}
+		})
+	}
 
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/my/myHouseIndex'
+		})
 	}
 </script>
+
 <style lang="scss">
 	page {
 		background: #fff;
@@ -251,7 +266,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
 		background-color: #f5f7fa;
 	}
 
@@ -262,13 +276,10 @@
 		box-sizing: border-box;
 	}
 
-
-	/* 顶部状态区 */
 	.status-header {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-
 		padding: 20rpx 0px 20rpx;
 	}
 
@@ -284,17 +295,14 @@
 
 	.icon-success {
 		background-color: #2F77FD;
-		/* border: 4rpx solid #00b42a; */
 	}
 
 	.icon-pending {
 		background-color: #2F77FD;
-		/* border: 4rpx solid #1677ff; */
 	}
 
 	.icon-fail {
 		background-color: #E34D59;
-		/* border: 4rpx solid #f53f3f; */
 	}
 
 	.icon-text {
@@ -322,7 +330,6 @@
 		margin-bottom: 40rpx;
 	}
 
-	/* 步骤条 */
 	.step-bar {
 		display: flex;
 		align-items: center;
@@ -382,7 +389,6 @@
 		background-color: #1677ff;
 	}
 
-	/* 信息卡片 */
 	.info-card {
 		padding: 20rpx;
 		border: 1rpx solid #f0f0f0;
@@ -435,7 +441,6 @@
 		font-weight: 500;
 	}
 
-	/* 身份证照片区 */
 	.photo-row {
 		margin-top: 30rpx;
 		display: flex;
@@ -456,13 +461,10 @@
 		border-radius: 8rpx;
 	}
 
-	/* 底部按钮区 */
 	.bottom-btn-wrap {
 		padding: 20rpx 30rpx 40rpx;
 		display: flex;
 		gap: 20rpx;
-
-		/* background-color: #fff; */
 	}
 
 	.btn-modify {
@@ -491,7 +493,6 @@
 		flex: 1;
 	}
 
-	/* 成功提示弹窗 */
 	.toast-mask {
 		position: fixed;
 		top: 0;

property-uniapp-project/pageSubPack/my/myHouseIndex.vue

@@ -18,10 +18,12 @@
 					<!-- 标题 + 状态 -->
 					<view class="card-header">
 						<view class="title-box">
-							<text class="tag-default" v-if="item.isDefault">默认</text>
+							<text class="tag-default" v-if="item.isDefault==1">默认</text>
-							<text class="house-name">{{ item.houseName }}</text>
+							<text
+								class="house-name">{{ item.villageName+item.buildingName+item.unitNo+'单元'+item.floorNo+'楼' }}</text>
 						</view>
-						<text class="status-tag" :class="item.statusClass">{{ item.statusText }}</text>
+						<text class="status-tag"
+							:class="item.certificationStatus=='0'?'pending':item.certificationStatus=='1'?'success':item.certificationStatus=='2'?'fail':''">{{ item.certificationStatus=='0'?'未认证':item.certificationStatus=='1'?'认证成功':item.certificationStatus=='2'?'认证失败':'' }}</text>
 					</view>
 
 					<!-- 房屋信息 -->
@@ -29,21 +31,22 @@
 						<view class="row">
 							<text class="label">房间号</text>
 							<view class="value-box">
-								<text class="value">{{ item.roomNo }}</text>
+								<text class="value">{{ item.houseNo }}</text>
 							</view>
 						</view>
 						<view class="row">
 							<text class="label">业主</text>
-							<text class="value">{{ item.owner }}</text>
+							<text class="value">{{ item.name }}</text>
 						</view>
 						<view class="row">
 							<text class="label">房屋状态</text>
-							<text class="value">{{ item.houseStatus }}</text>
+							<text
+								class="value">{{ item.houseStatus==0?'自住':item.houseStatus==1?'闲置':item.houseStatus==2?'租赁':item.houseStatus==3?'其他':''}}</text>
 						</view>
-						<view class="defaultBox" v-if="item.statusText=='认证成功'&&!item.isDefault">
+						<view class="defaultBox" v-if="item.certificationStatus=='1'&&!item.isDefault==1">
 							<text class="set-default">设为默认</text>
-							<switch class="no-cross-switch" :checked="item.isDefault" color="#1677ff"
+							<switch class="no-cross-switch" :checked="item.isDefault==1" color="#1677ff"
-								@change="onSwitchChange($event,index)" @click.stop />
+								@change="onSwitchChange($event,item)" @click.stop />
 						</view>
 						<!-- <text v-if="item.showSetDefault" class="set-default"
 							@click="setDefault(item.id)">设为默认</text> -->
@@ -61,147 +64,166 @@
 
 
 </template>
+<script setup>
+	import {
+		ref,
+		onMounted,
 
-<script>
+	} from 'vue'
-	export default {
+	import {
-		onReady: function(e) {},
+		onReachBottom,
-		components: {
+		onPullDownRefresh
-
+	} from '@dcloudio/uni-app'
-		},
+	import {
-
+		getMyHouseList,
-		computed: {
+		setMyHouseDefault
+	} from '/pageSubPack/api/apiSub.js'
 
 
-		},
+	const houseList = ref([])
-		created() {
+	const loadingMore = ref(false)
+	const noMoreData = ref(false)
 
-		},
+	const pageNum = ref(1)
-		onShow() {
+	const pageSize = ref(10)
+	// ==================== 获取列表数据 ====================
+	const getList = async () => {
+		// 防重复请求
 
-		},
+		if (loadingMore.value || noMoreData.value) return
-		onUnload() {
-			// 页面卸载时清除定时器
-			if (this.timer) clearInterval(this.timer)
-		},
-		mounted() {},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				houseList: [{
-						id: 1,
-						houseName: "北境碧桂园小区（别墅）",
-						roomNo: "2号楼2层",
-						owner: "张三",
-						houseStatus: "自住",
-						isDefault: true,
-						statusText: "认证成功",
-						statusClass: "success",
-						showSetDefault: false,
-					},
-					{
-						id: 2,
-						houseName: "北境碧桂园小区（别墅）",
-						roomNo: "3号楼2层",
-						owner: "张三",
-						houseStatus: "自住",
-						isDefault: false,
-						statusText: "认证成功",
-						statusClass: "success",
-						showSetDefault: true,
-					},
-					{
-						id: 3,
-						houseName: "北境碧桂园小区（别墅）",
-						roomNo: "2号楼1层",
-						owner: "张三",
-						houseStatus: "闲置",
-						isDefault: false,
-						statusText: "认证失败",
-						statusClass: "fail",
-						showSetDefault: false,
-					},
-					{
-						id: 4,
-						houseName: "北境碧桂园小区（别墅）",
-						roomNo: "2号楼1层",
-						owner: "张三",
-						houseStatus: "闲置",
-						isDefault: false,
-						statusText: "认证中",
-						statusClass: "pending",
 
-						showSetDefault: false,
+		loadingMore.value = true
-					},
+		try {
-
+			const res = await getMyHouseList({
-				]
+				pageNum: pageNum.value,
+				pageSize: pageSize.value
+			})
 
+			const data = res
+			const newList = data.rows || []
 
+			// 第一页 → 覆盖数据
+			if (pageNum.value === 1) {
+				houseList.value = newList
+			} else {
+				// 后续页 → 追加数据
+				houseList.value = [...houseList.value, ...newList]
 			}
-		},
+			// 判断是否没有更多数据
+			if (newList.length < pageSize.value) {
+				noMoreData.value = true
+			} else {
+				pageNum.value++
+			}
+		} catch (err) {
+			uni.showToast({
+				title: '加载失败',
+				icon: 'none'
+			})
+			console.error('列表接口报错：', err)
+		} finally {
+			loadingMore.value = false
+			uni.stopPullDownRefresh() // 关闭下拉刷新
+		}
+	}
+
+	// ==================== 上拉加载更多（页面生命周期） ====================
+	onReachBottom(() => {
+		getList()
+	})
+
+	// ==================== 下拉刷新 ====================
+	const refresh = () => {
+		// 重置所有状态
+		pageNum = 1
+		pageSize = 10
+		noMoreData = false
+		houseList = []
+		loadingMore = false
+		getList()
+	}
+	onPullDownRefresh(() => {
+		refresh()
+	})
+
+	// 页面加载时请求第一页
+	onMounted(() => {
+		getList()
+	})
 
 
-		methods: {
-			// 开关切换
-			onSwitchChange(e, i) {
 
-				uni.showLoading({
+	const onSwitchChange = async (e, i) => {
-					title: '设置中...',
+		// uni.showLoading({
-					mask: true
+		// 	title: '设置中...',
+		// 	mask: true
+		// });
+
+		try {
+			const res = await setMyHouseDefault({
+				houseId: i.houseId
+			})
+			const data = res
+			if (data.code === 200) {
+				// uni.hideLoading();
+				loadingMore.value = false
+				noMoreData.value = false
+				getList()
+				uni.setStorageSync('houseIsDefault', e.detail.value)
+				uni.showToast({
+					title: '设置默认房屋成功',
+					icon: 'success'
 				});
-				setTimeout(() => {
+			} else {
-					uni.showToast({
+				// uni.hideLoading();
-						title: '设置默认房屋成功',
+				uni.showToast({
-						icon: 'success'
+					title: `${res.msg}`,
-					});
+					icon: 'error'
-				}, 1000);
-				setTimeout(() => {
-					this.houseList.forEach((item, index) => {
-						if (index != i) {
-							item.isDefault = false
-						} else {
-							this.houseList[i].isDefault = e.detail.value
-
-						}
-					})
-					uni.setStorageSync('houseIsDefault', e.detail.value)
-				}, 2500);
-			},
-			tapHouse(item) {
-				uni.redirectTo({
-					url: '/pageSubPack/my/houseDetail?id=' + item.id + '&statusClass=' + item.statusClass,
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-
-			addHouse() {
-				uni.setStorageSync('operationType', 'add');
-				uni.redirectTo({
-					url: '/pageSubPack/my/addHouse',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
 				});
+			}
+		} catch (err) {
+			// uni.hideLoading();
+			uni.showToast({
+				title: `${err}`,
+				icon: 'none'
+			})
+			console.error('列表接口报错：', err)
+		}
+	}
 
 
-			},
 
-			goBack() {
+	const tapHouse = (item) => {
-				uni.switchTab({
+		uni.redirectTo({
-					url: '/pages/myIndex/myIndex',
+			url: '/pageSubPack/my/houseDetail?id=' + item.id + '&certificationStatus=' + item.certificationStatus,
-					success: res => {},
+			success: res => {},
-					fail: () => {},
+			fail: () => {},
-					complete: () => {}
+			complete: () => {}
-				});
+		});
-			},
+	}
 
-		},
+	const addHouse = () => {
+		uni.setStorageSync('operationType', 'add');
+		uni.redirectTo({
+			url: '/pageSubPack/my/addHouse',
+			success: res => {},
+			fail: () => {},
+			complete: () => {}
+		});
 
 
 	}
+
+	const goBack = () => {
+		uni.switchTab({
+			url: '/pages/myIndex/myIndex',
+			success: res => {},
+			fail: () => {},
+			complete: () => {}
+		});
+	}
 </script>
+
 <style lang="scss">
 	page {
 		// background: #F3F8FD;
@@ -224,6 +246,7 @@
 		padding: 0px 40rpx;
 		box-sizing: border-box;
 	}
+
 	/* 空状态 */
 	.empty-state {
 		display: flex;
@@ -233,7 +256,7 @@
 		padding: 100rpx 0;
 		color: #ccc;
 	}
-	
+
 	.empty-text {
 		font-size: 32rpx;
 		color: #999;
@@ -273,19 +296,25 @@
 		display: flex;
 		align-items: center;
 		gap: 16rpx;
+		width: 100%;
+		overflow-x: hidden;
 	}
 
 	.house-name {
 		font-size: 32rpx;
 		font-weight: 600;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.tag-default {
 		background: #007aff;
 		color: #fff;
 		font-size: 24rpx;
-		padding:2rpx 16rpx;
+		padding: 2rpx 16rpx;
 		border-radius: 30rpx;
+		min-width: 48rpx;
 	}
 
 	/* 状态标签 */
@@ -294,6 +323,8 @@
 		padding: 6rpx 14rpx;
 		font-weight: 600;
 		border-radius: 6rpx;
+		min-width: 120rpx;
+		text-align: center;
 	}
 
 	.success {
@@ -345,7 +376,7 @@
 	}
 
 	.defaultBox {
-		margin-top:10rpx;
+		margin-top: 10rpx;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;

property-uniapp-project/pageSubPack/my/selectBuilding.vue

@@ -8,17 +8,17 @@
 		<scroll-view class="page" scroll-y>
 			<!-- 楼栋网格列表 -->
 
+			<view v-if="dataList.length === 0" class="empty-state">
+				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
+				<text class="empty-text">
+					{{ '暂无数据'}}
+				</text>
+			</view>
 			<view class="building-grid">
-				<view v-if="dataList.length === 0" class="empty-state">
-					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
-					<text class="empty-text">
-						{{ '暂无数据'}}
-					</text>
-				</view>
 				<view class="building-item"
 					:class="{ active:(checkType=='楼栋'&& selectedBuilding === item.id)||(checkType=='单元'&& selectedUnit === item.id)||(checkType=='楼层'&&selectedFloor === item.id) ||(checkType=='户号'&&selectedHouseNumber === item.id) }"
 					v-for="(item, index) in dataList" :key="index" @click="selectBuilding(item)">
-					<text class="building-text">{{ item.name }}</text>
+					<text class="building-text">{{item.name }}</text>
 				</view>
 			</view>
 		</scroll-view>
@@ -29,339 +29,209 @@
 
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		onReady: function(e) {},
+		ref,
-		components: {
+		onMounted,
+	} from 'vue'
+	import {
+		onUnload,
+		onShow
 
-		},
+	} from '@dcloudio/uni-app'
+	import {
+		getHouseBuildings,
+		getHouseUnits,
+		getHouseFloors,
+		getHouseHouses
+	} from '/pageSubPack/api/apiSub.js'
 
-		computed: {
+	// 状态栏高度
+	const statusBarHeight = ref(20)
 
-
+	// 从缓存获取类型
-		},
+	const checkType = ref(uni.getStorageSync('checkType') || '')
-		created() {
+	const dataList = ref([])
-
-		},
-		onShow() {
-
-		},
-		onUnload() {},
-		mounted() {
-
-			if (this.checkType == '楼栋') {
-				this.dataList = this.buildingList
-
-			} else if (this.checkType == '单元') {
-				this.dataList = this.unitList
-
-			} else if (this.checkType == '楼层') {
-				this.dataList = this.floorList
-
-			} else if (this.checkType == '户号') {
-				this.dataList = this.houseNumberList
-
-			}
-		},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				checkType: uni.getStorageSync('checkType'),
-				dataList: [],
-				// 楼栋列表（可动态生成/接口返回）
-				buildingList: [{
-						id: 1,
-						name: '01栋'
-					},
-					{
-						id: 2,
-						name: '02栋'
-					},
-					{
-						id: 3,
-						name: '03栋'
-					},
-					{
-						id: 4,
-						name: '04栋'
-					},
-					{
-						id: 5,
-						name: '05栋'
-					},
-					{
-						id: 6,
-						name: '06栋'
-					},
-					{
-						id: 7,
-						name: '07栋'
-					},
-					{
-						id: 8,
-						name: '08栋'
-					},
-					{
-						id: 9,
-						name: '09栋'
-					},
-					{
-						id: 10,
-						name: '10栋'
-					},
-					{
-						id: 11,
-						name: '11栋'
-					},
-					{
-						id: 12,
-						name: '12栋'
-					}
-				],
-
-				floorList: [{
-						id: 13,
-						name: '01层'
-					},
-					{
-						id: 14,
-						name: '02层'
-					},
-					{
-						id: 15,
-						name: '03层'
-					},
-					{
-						id: 16,
-						name: '04层'
-					}, {
-						id: 17,
-						name: '05层'
-					},
-					{
-						id: 18,
-						name: '06层'
-					},
-					{
-						id: 19,
-						name: '07层'
-					},
-					{
-						id: 20,
-						name: '08层'
-					}, {
-						id: 21,
-						name: '09层'
-					},
-					{
-						id: 22,
-						name: '10层'
-					},
-					{
-						id: 23,
-						name: '11层'
-					},
-					{
-						id: 24,
-						name: '12层'
-					}, {
-						id: 25,
-						name: '13层'
-					},
-					{
-						id: 26,
-						name: '14层'
-					},
-					{
-						id: 27,
-						name: '15层'
-					},
-					{
-						id: 28,
-						name: '16层'
-					},
-					{
-						id: 29,
-						name: '17层'
-					},
-					{
-						id: 30,
-						name: '18层'
-					},
-					{
-						id: 31,
-						name: '19层'
-					},
-					{
-						id: 32,
-						name: '20层'
-					},
-
-				],
-
-				unitList: [{
-						id: 33,
-						name: '01单元'
-					},
-					{
-						id: 34,
-						name: '02单元'
-					},
-					{
-						id: 35,
-						name: '03单元'
-					},
-					{
-						id: 36,
-						name: '04单元'
-					},
-
-				],
-				houseNumberList: [{
-						id: 37,
-						name: '01'
-					},
-					{
-						id: 38,
-						name: '02'
-					},
-					{
-						id: 39,
-						name: '03'
-					},
-					{
-						id: 40,
-						name: '04'
-					},
-
-				],
-				// 选中的楼栋
-				selectedBuilding: uni.getStorageSync('buildingId'),
-				// 选中的单元
-				selectedUnit: uni.getStorageSync('unitId'),
-				// 选中的楼层
-				selectedFloor: uni.getStorageSync('floorId'),
-				// 选中的户号
-				selectedHouseNumber: uni.getStorageSync('houseNumberId'),
-
-			}
-		},
-
-
-		methods: {
-			selectBuilding(item) {
-				let modalContent = '确认选择此' + this.checkType + '吗?'
-				uni.showModal({
-					title: "确认选择",
-					content: modalContent,
-					success: (res) => {
-						if (res.confirm) {
-							uni.showLoading({
-								title: '选择中...',
-								mask: true
-							});
 
 
 
+	// 选中项（从缓存读取）
+	const selectedBuilding = ref(uni.getStorageSync('buildingId') || '')
+	const selectedUnit = ref(uni.getStorageSync('unitId') || '')
+	const selectedFloor = ref(uni.getStorageSync('floorId') || '')
+	const selectedHouseNumber = ref(uni.getStorageSync('houseNumberId') || '')
 
-							if (this.checkType == '楼栋') {
+	// 页面挂载后赋值列表
-								this.selectedBuilding = item.id
+	onMounted(() => {
-								uni.setStorageSync('buildingId', item.id);
+		console.log(checkType);
-								uni.setStorageSync('buildingName', item.name);
+		if (checkType.value === '楼栋') {
-								uni.removeStorageSync('unitId');
+			getList('楼栋')
-								uni.removeStorageSync('unitName');
+		} else if (checkType.value === '单元') {
-								uni.removeStorageSync('floorId');
+			getList('单元')
-								uni.removeStorageSync('floorName');
+		} else if (checkType.value === '楼层') {
-								uni.removeStorageSync('houseNumberId');
+			getList('楼层')
-								uni.removeStorageSync('houseNumberName');
+		} else if (checkType.value === '户号') {
-								uni.setStorageSync('checkType', '单元');
+			getList('户号')
-							} else if (this.checkType == '单元') {
+		}
-								this.selectedUnit = item.id
-								uni.setStorageSync('unitId', item.id);
-								uni.setStorageSync('unitName', item.name);
-								uni.removeStorageSync('floorId');
-								uni.removeStorageSync('floorName');
-								uni.removeStorageSync('houseNumberId');
-								uni.removeStorageSync('houseNumberName');
-								uni.setStorageSync('checkType', '楼层');
-							} else if (this.checkType == '楼层') {
-								this.selectedFloor = item.id
-								uni.setStorageSync('floorId', item.id);
-								uni.setStorageSync('floorName', item.name);
-								uni.removeStorageSync('houseNumberId');
-								uni.removeStorageSync('houseNumberName');
-								uni.setStorageSync('checkType', '户号');
-							} else if (this.checkType == '户号') {
-								this.selectedHouseNumber = item.id
-								uni.setStorageSync('houseNumberId', item.id);
-								uni.setStorageSync('houseNumberName', item.name);
 
-							}
+	})
-							setTimeout(() => {
-								uni.showToast({
-									title: '选择成功',
-									icon: 'success'
-								});
-							}, 500);
-							setTimeout(() => {
-								// 提交成功后跳转列表页
-								uni.hideLoading();
-								this.goFreash();
-							}, 2000);
 
-
+	// 选择项方法
-
+	const selectBuilding = (item) => {
-						}
+		const modalContent = `确认选择此${checkType.value}吗?`
-					},
+		uni.showModal({
-				});
+			title: '确认选择',
-
+			content: modalContent,
-			},
+			success: (res) => {
-			goFreash() {
+				if (!res.confirm) return
-				console.log(this.checkType, '刷新页面');
+				uni.showLoading({
-				if (this.checkType != '户号') {
+					title: '选择中...',
-					uni.redirectTo({
+					mask: true
-						url: '/pageSubPack/my/selectBuilding',
+				})
-						success: res => {},
+				if (checkType.value === '楼栋') {
-						fail: () => {},
+					selectedBuilding.value = item.id
-						complete: () => {}
+					uni.setStorageSync('buildingId', item.id)
-					});
+					uni.setStorageSync('buildingName', item.name)
-				} else {
+					uni.removeStorageSync('unitId')
-					uni.redirectTo({
+					uni.removeStorageSync('unitName')
-						url: '/pageSubPack/my/addHouse',
+					uni.removeStorageSync('floorId')
-						success: res => {},
+					uni.removeStorageSync('floorName')
-						fail: () => {},
+					uni.removeStorageSync('houseNumberId')
-						complete: () => {}
+					uni.removeStorageSync('houseNumberName')
-					});
+					uni.setStorageSync('checkType', '单元')
-				}
+				} else if (checkType.value === '单元') {
-			},
+					selectedUnit.value = item.id
-			goBackAdd() {
+					uni.setStorageSync('unitId', item.id)
-				if (this.checkType == '楼栋') {
+					uni.setStorageSync('unitName', item.name)
-					uni.removeStorageSync('buildingId');
+					uni.removeStorageSync('floorId')
-					uni.removeStorageSync('buildingName');
+					uni.removeStorageSync('floorName')
-				} else if (this.checkType == '单元') {
+					uni.removeStorageSync('houseNumberId')
-					uni.removeStorageSync('unitId');
+					uni.removeStorageSync('houseNumberName')
-					uni.removeStorageSync('unitName');
+					uni.setStorageSync('checkType', '楼层')
-				} else if (this.checkType == '楼层') {
+				} else if (checkType.value === '楼层') {
-					uni.removeStorageSync('floorId');
+					selectedFloor.value = item.id
-					uni.removeStorageSync('floorName');
+					uni.setStorageSync('floorId', item.id)
-				} else if (this.checkType == '户号') {
+					uni.setStorageSync('floorName', item.name)
-					uni.removeStorageSync('houseNumberId');
+					uni.removeStorageSync('houseNumberId')
-					uni.removeStorageSync('houseNumberName');
+					uni.removeStorageSync('houseNumberName')
+					uni.setStorageSync('checkType', '户号')
+				} else if (checkType.value === '户号') {
+					selectedHouseNumber.value = item.id
+					uni.setStorageSync('houseNumberId', item.id)
+					uni.setStorageSync('houseNumberName', item.name)
 				}
 
-				uni.redirectTo({
+				setTimeout(() => {
-					url: '/pageSubPack/my/addHouse',
+					uni.showToast({
-					success: res => {},
+						title: '选择成功',
-					fail: () => {},
+						icon: 'success'
-					complete: () => {}
+					})
-				});
+				}, 500)
-			},
-
-		},
-
 
+				setTimeout(() => {
+					uni.hideLoading()
+					goFreash()
+				}, 2000)
+			}
+		})
 	}
+
+	// 刷新跳转
+	const goFreash = () => {
+		console.log(checkType.value, '刷新页面')
+		if (checkType.value !== '户号') {
+			uni.redirectTo({
+				url: '/pageSubPack/my/selectBuilding'
+			})
+		} else {
+			uni.redirectTo({
+				url: '/pageSubPack/my/addHouse'
+			})
+		}
+	}
+
+	// 返回新增
+	const goBackAdd = () => {
+		if (checkType.value === '楼栋') {
+			uni.removeStorageSync('buildingId')
+			uni.removeStorageSync('buildingName')
+		} else if (checkType.value === '单元') {
+			uni.removeStorageSync('unitId')
+			uni.removeStorageSync('unitName')
+		} else if (checkType.value === '楼层') {
+			uni.removeStorageSync('floorId')
+			uni.removeStorageSync('floorName')
+		} else if (checkType.value === '户号') {
+			uni.removeStorageSync('houseNumberId')
+			uni.removeStorageSync('houseNumberName')
+		}
+		uni.redirectTo({
+			url: '/pageSubPack/my/addHouse'
+		})
+	}
+	// 获取数据
+	const getList = async (type) => {
+		try {
+			if (type == '楼栋') {
+				const res = await getHouseBuildings({
+					villageId: uni.getStorageSync('communityId')
+				})
+				const newList = res.data.map(item => ({
+					id: item.id,
+					name: item.buildingName
+				}))
+
+				dataList.value = newList
+			} else if (type == '单元') {
+				const res = await getHouseUnits({
+					buildingId: selectedBuilding.value
+				})
+				const newList = res.data.map(item => ({
+					id: item,
+					name: item
+				}))
+
+				dataList.value = newList
+			} else if (type == '楼层') {
+				const res = await getHouseFloors({
+					buildingId: selectedBuilding.value,
+					unitNo: selectedUnit.value
+				})
+				const newList = res.data.map(item => ({
+					id: item,
+					name: item
+				}))
+
+				dataList.value = newList
+			} else if (type == '户号') {
+				const res = await getHouseHouses({
+					buildingId: selectedBuilding.value,
+					unitNo: selectedUnit.value,
+					floorNo: selectedFloor.value
+				})
+				const newList = res.data.map(item => ({
+					id: item.houseId,
+					name: item.houseNo
+				}))
+
+				dataList.value = newList
+			}
+
+		} catch (err) {
+			uni.showToast({
+				title: '加载失败',
+				icon: 'none'
+			})
+			console.error('列表接口报错：', err)
+		} finally {
+
+		}
+	}
+	// 生命周期
+	onShow(() => {
+
+	})
+	onUnload(() => {})
 </script>
 <style lang="scss">
 	page {

property-uniapp-project/pageSubPack/my/selectResidentialCommunity.vue

@@ -22,7 +22,7 @@
 				</view>
 				<view class="community-item" v-for="(item, index) in filteredList" :key="index"
 					@click="selectCommunity(item)">
-					<text class="community-name">{{ item.name }}</text>
+					<text class="community-name">{{ item.villageName }}</text>
 					<text class="item-arrow"></text>
 				</view>
 			</view>
@@ -33,147 +33,140 @@
 
 </template>
 
-<script>
-	export default {
-		onReady: function(e) {},
-		components: {
 
-		},
+<script setup>
-		computed: {
+	import {
-			// 过滤后的列表（搜索功能）
+		ref,
-			filteredList() {
+		onMounted,
-				if (!this.searchKey.trim()) {
+		computed
-					return this.communityList
+	} from 'vue'
-				}
+	import {
-				return this.communityList.filter(item =>
+		onReachBottom,
-					item.name.includes(this.searchKey.trim())
+		onPullDownRefresh,
-				)
+		onLoad
-			},
+	} from '@dcloudio/uni-app'
+	import {
+		getVillageList
+	} from '/pageSubPack/api/apiSub.js'
 
 
-		},
 
-		created() {
+	const sourcePage = ref('')
+	const searchKey = ref('')
+	const communityList = ref([])
+	// const refreshing = ref(false)
+	const filteredList = computed(() => {
+		if (!searchKey.value.trim()) {
+			return communityList.value
+		}
+		return communityList.value.filter(item =>
+			item.villageName.includes(searchKey.value.trim())
+		)
 
-		},
+	})
-
-		onShow() {
-
-		},
-		onUnload() {
-
-		},
-		onLoad(option) {
-			// addHouse
-			// addParkingSpace
-			this.sourcePage = option.sourcePage;
-
-		},
-		mounted() {},
-		data() {
-			return {
-
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				sourcePage: '',
-				searchKey: '',
-				communityList: [{
-						id: 1,
-						name: '北境碧桂园小区'
-					},
-					{
-						id: 2,
-						name: '东境碧桂园小区'
-					},
-					{
-						id: 3,
-						name: '南境碧桂园小区'
-					},
-					{
-						id: 4,
-						name: '西境碧桂园小区'
-					},
 
 
 
 
-				]
+	onLoad((option) => {
+		sourcePage.value = option.sourcePage;
+		getList()
+	})
+
+	// ==================== 获取列表数据 ====================
 
 
-			}
+	const getList = async () => {
-		},
 
 
-		methods: {
+		try {
-			// 搜索输入事件
+			const res = await getVillageList({
-			onSearch() {
-				// 实时过滤，computed 自动处理
-			},
 
-			// 选择小区
+			})
-			selectCommunity(item) {
+			console.log(res);
-				uni.setStorageSync('communityId', item.id);
+			const data = res
-				uni.setStorageSync('communityName', item.name);
+			communityList.value = data.data || []
-				uni.setStorageSync('checkType', '楼栋');
-				uni.removeStorageSync('buildingId');
-				uni.removeStorageSync('buildingName');
-				uni.removeStorageSync('unitId');
-				uni.removeStorageSync('unitName');
-				uni.removeStorageSync('floorId');
-				uni.removeStorageSync('floorName');
-				uni.removeStorageSync('houseNumberId');
-				uni.removeStorageSync('houseNumberName');
 
-				uni.removeStorageSync('bindHouseId');
+		} catch (err) {
-				uni.removeStorageSync('bindHouseName');
+			uni.showToast({
-				uni.removeStorageSync('parkingLotId');
+				title: '加载失败',
-				uni.removeStorageSync('parkingLotName');
+				icon: 'none'
-				uni.removeStorageSync('parkingSpaceId');
+			})
-				uni.removeStorageSync('parkingSpaceName');
+			console.error('列表接口报错：', err)
+		} finally {
 
-				if (this.sourcePage == 'addHouse') {
+		}
-					uni.redirectTo({
+	}
-						url: '/pageSubPack/my/selectBuilding',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} else if (this.sourcePage == 'addParkingSpace') {
-					uni.redirectTo({
-						url: '/pageSubPack/my/bindHouse',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} else {
 
-				}
+	// 搜索输入事件
+	const onSearch = () => {
+		// 实时过滤，computed 自动处理
+	}
 
-			},
+	// 选择小区
-			goBackAdd() {
+	const selectCommunity = (item) => {
-				uni.removeStorageSync('communityId');
+		uni.setStorageSync('communityId', item.villageId);
-				uni.removeStorageSync('communityName');
+		uni.setStorageSync('communityName', item.villageName);
-				if (this.sourcePage == 'addHouse') {
+		uni.setStorageSync('checkType', '楼栋');
-					uni.redirectTo({
+		uni.removeStorageSync('buildingId');
-						url: '/pageSubPack/my/addHouse',
+		uni.removeStorageSync('buildingName');
-						success: res => {},
+		uni.removeStorageSync('unitId');
-						fail: () => {},
+		uni.removeStorageSync('unitName');
-						complete: () => {}
+		uni.removeStorageSync('floorId');
-					});
+		uni.removeStorageSync('floorName');
-				} else if (this.sourcePage == 'addParkingSpace') {
+		uni.removeStorageSync('houseNumberId');
-					uni.redirectTo({
+		uni.removeStorageSync('houseNumberName');
-						url: '/pageSubPack/my/addParkingSpace',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} else {
 
-				}
+		uni.removeStorageSync('bindHouseId');
-			},
+		uni.removeStorageSync('bindHouseName');
-		},
+		uni.removeStorageSync('parkingLotId');
+		uni.removeStorageSync('parkingLotName');
+		uni.removeStorageSync('parkingSpaceId');
+		uni.removeStorageSync('parkingSpaceName');
+
+		if (sourcePage.value == 'addHouse') {
+			uni.redirectTo({
+				url: '/pageSubPack/my/selectBuilding',
+				success: res => {},
+				fail: () => {},
+				complete: () => {}
+			});
+		} else if (sourcePage.value == 'addParkingSpace') {
+			uni.redirectTo({
+				url: '/pageSubPack/my/bindHouse',
+				success: res => {},
+				fail: () => {},
+				complete: () => {}
+			});
+		} else {
+
+		}
+
+	}
+	const goBackAdd = () => {
+		uni.removeStorageSync('communityId');
+		uni.removeStorageSync('communityName');
+		if (sourcePage.value == 'addHouse') {
+			uni.redirectTo({
+				url: '/pageSubPack/my/addHouse',
+				success: res => {},
+				fail: () => {},
+				complete: () => {}
+			});
+		} else if (sourcePage.value == 'addParkingSpace') {
+			uni.redirectTo({
+				url: '/pageSubPack/my/addParkingSpace',
+				success: res => {},
+				fail: () => {},
+				complete: () => {}
+			});
+		} else {
+
+		}
 	}
 </script>
+
+
 <style lang="scss">
 	page {
 		background: #f6f6f6;

property-uniapp-project/pageSubPack/my/settingIndex.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="contentStyle" style="">
+	<view class="contentStyle">
 		<view class="status-bar"></view>
 		<uni-nav-bar title="设置" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
 		</uni-nav-bar>
@@ -8,7 +8,6 @@
 			<view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="onItemClick(item)">
 				<text class="item-title">{{ item.title }}</text>
 
-				<!-- 不同类型的右侧内容 -->
 				<view class="item-right" v-if="item.type === 'text'">
 					<text :class="item.valueClass || 'item-value'">{{ item.value }}</text>
 					<view class="item-arrow"></view>
@@ -20,251 +19,211 @@
 				<view class="item-arrow" v-else></view>
 			</view>
 		</scroll-view>
-		<!-- 底部下一步按钮 -->
+
 		<view class="bottom-btn">
 			<button class="logout-btn" @click="logout">退出登录</button>
 		</view>
-
-
 	</view>
-
-
-
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		onReady: function(e) {},
+		ref,
-		components: {
+		onMounted,
+		reactive
+	} from 'vue'
+	import {
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+	import {
+		authLogout
+	} from '/pageSubPack/api/apiSub.js'
 
+	// 
+	const statusBarHeight = ref(20)
+	const cacheSize = ref(0)
+	const settingList = ref([{
+			title: '更改手机号码',
+			type: 'arrow'
 		},
-
+		{
-		computed: {
+			title: '修改密码',
-
+			type: 'arrow'
-
 		},
-		created() {
+		{
-
+			title: '消息通知',
+			type: 'switch',
+			checked: false
 		},
-		onShow() {
+		{
-
+			title: '清除缓存',
+			type: 'text',
+			value: '9.2M'
 		},
-		onLoad() {
+		{
+			title: '升级版本',
+			type: 'text',
+			value: '当前版本 2.9.8',
+			valueClass: 'item-version'
+		}
+	])
 
-		},
+	// 
-		mounted() {},
+	const onItemClick = (item) => {
-		data() {
+		if (item.title == '更改手机号码') {
-			return {
+			uni.redirectTo({
-				message: '',
+				url: '/pageSubPack/my/changePhone'
-				/* 设定状态栏默认高度 */
+			});
-				statusBarHeight: 20,
+		} else if (item.title == '修改密码') {
-				cacheSize: 0,
+			uni.redirectTo({
-				settingList: [{
+				url: '/pageSubPack/my/changePwd'
-						title: '更改手机号码',
+			});
-						type: 'arrow'
+		} else if (item.title == '清除缓存') {
-					},
+			uni.clearStorageSync();
-					{
+			settingList.value[3].value = '0M'
-						title: '修改密码',
+			uni.showLoading({
-						type: 'arrow'
+				title: '清除中...',
-					},
+				mask: true
-					{
+			});
-						title: '消息通知',
+			setTimeout(() => {
-						type: 'switch',
+				uni.showToast({
-						checked: false
+					title: '清除成功',
-					},
+					icon: 'success'
-					{
+				});
-						title: '清除缓存',
+			}, 1000);
-						type: 'text',
+			setTimeout(() => {
-						value: '9.2M'
+				uni.hideLoading();
-					},
+			}, 2500);
-					{
+		}
-						title: '升级版本',
+	}
-						type: 'text',
-						value: '当前版本 2.9.8',
-						valueClass: 'item-version'
-					}
-				]
 
-
+	const logout = () => {
-			}
+		uni.showModal({
-		},
+			title: '提示',
-
+			content: '确定要退出当前账号吗?',
-
+			success: (res) => {
-		methods: {
+				if (res.confirm) {
-			onItemClick(item) {
-				// console.log('点击了：', item.title,item.title == '更改手机号码')
-				if (item.title == '更改手机号码') {
-					uni.redirectTo({
-						url: '/pageSubPack/my/changePhone',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} else if (item.title == '修改密码') {
-					uni.redirectTo({
-						url: '/pageSubPack/my/changePwd',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} else if (item.title == '清除缓存') {
-					uni.clearStorageSync();
-					this.message = '清除成功'
-					this.settingList[3].value = '0M'
 					uni.showLoading({
-						title: '清除中...',
+						title: '退出中...',
 						mask: true
 					});
-					setTimeout(() => {
+					authLogout().then(res => {
-						uni.showToast({
+						if (res.code === 200) {
-							title: '清除成功',
+							uni.hideLoading();
-							icon: 'success'
+							uni.showToast({
-						});
+								title: '退出成功',
-					}, 1000);
+								icon: 'success'
-					setTimeout(() => {
-						// 提交成功后跳转列表页
-						uni.hideLoading();
-
-					}, 2500);
-
-
-				}
-			},
-			logout() {
-				uni.showModal({
-					title: '提示',
-					content: '确定要退出当前账号吗?',
-					success: (res) => {
-						if (res.confirm) {
-							this.message = '退出成功'
-							uni.showLoading({
-								title: '退出中...',
-								mask: true
 							});
 							setTimeout(() => {
-								uni.showToast({
-									title: '退出成功',
-									icon: 'success'
-								});
-							}, 1000);
-							setTimeout(() => {
-								// 登出成功后跳转回登录页
 								uni.hideLoading();
-
 								uni.redirectTo({
-									url: '/pageSubPack/loginSub/pwd-login',
+									url: '/pageSubPack/loginSub/pwd-login'
-									success: res => {},
-									fail: () => {},
-									complete: () => {}
 								});
-
+							}, 1500);
-							}, 2500);
+						} else {
-
+							uni.showToast({
+								title: `${res.msg}`,
+								icon: 'error'
+							});
 						}
-					}
-				})
 
-			},
+					}).catch(err => {
-			onSwitchChange(item, e) {
+						console.log(err);
-				item.checked = e.detail.value
+						uni.showToast({
-			},
+							title: `${err}`,
-			goBack() {
+							icon: 'error'
-				uni.switchTab({
+						});
-					url: '/pages/myIndex/myIndex',
+					})
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
 
-		},
+				}
+			}
+		})
+	}
 
+	const onSwitchChange = (item, e) => {
+		item.checked = e.detail.value
+	}
 
+	const goBack = () => {
+		uni.switchTab({
+			url: '/pages/myIndex/myIndex'
+		});
 	}
 </script>
+
 <style lang="scss">
 	page {
 		background: #f9f9f9;
 	}
 </style>
+
 <style lang="scss" scoped>
 	.contentStyle {
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
 		background-color: #f9f9f9;
 	}
 
 	.page {
 		flex: 1;
 		overflow-y: auto;
-		padding: 0px 40rpx;
+		padding: 0 40rpx;
 		box-sizing: border-box;
 		background-color: #fff;
 	}
 
-	/* 底部按钮 */
 	.bottom-btn {
 		padding: 20rpx 30rpx 40rpx;
 		background-color: #fff;
 	}
 </style>
+
 <style scoped>
-	/* 列表项 */
 	.setting-item {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		background-color: #ffffff;
+		background-color: #fff;
-		padding: 30rpx 30rpx;
+		padding: 30rpx;
 		border-bottom: 2rpx solid #f0f0f0;
 	}
 
-	/* 标题文字 */
 	.item-title {
 		font-size: 32rpx;
-		color: #333333;
+		color: #333;
 		line-height: 1.4;
 	}
 
-	/* 右侧区域（文字+箭头） */
 	.item-right {
 		display: flex;
 		align-items: center;
 		gap: 10rpx;
 	}
 
-	/* 右侧数值/版本文字 */
 	.item-value {
 		font-size: 28rpx;
-		color: #333333;
+		color: #333;
 	}
 
 	.item-version {
 		font-size: 28rpx;
-		color: #999999;
+		color: #999;
 	}
 
-	/* 右侧箭头 */
 	.item-arrow {
-		display: inline-block;
 		width: 10rpx;
 		height: 10rpx;
 		border-top: 2rpx solid #999;
 		border-right: 2rpx solid #999;
 		transform: rotate(45deg);
 		margin-left: 10rpx;
-		margin-right: 10rpx;
 	}
 
-	/* 开关样式适配 */
-	/* switch {
-		transform: scale(0.8);
-	} */
-	/* 底部按钮 */
 	.logout-btn {
-
 		width: 100%;
 		height: 96rpx;
 		line-height: 96rpx;
@@ -273,31 +232,27 @@
 		border-radius: 12rpx;
 		color: #666;
 		background-color: #F3F3F3;
-
 		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
 	}
 
-	/* 按钮点击态 */
 	.logout-btn:active {
 		background-color: #f5f5f5;
 		opacity: 0.8;
 	}
 
-
 	.status-bar {
 		width: 100vw;
 		height: 46px;
 	}
 </style>
+
 <style>
 	::v-deep .uni-switch-input:before {
 		background-color: #cccccd !important;
 	}
 
-	/* 隐藏 switch 关闭状态的 × 号 */
 	.no-cross-switch::before {
 		display: none !important;
-
 	}
 
 	.no-cross-switch {

property-uniapp-project/pageSubPack/payment-list/addHydropower.vue

@@ -14,10 +14,14 @@
 					</image>
 					<text class="card-title">{{paymentType+'费'}}</text>
 				</view>
-
 				<!-- 分割线 -->
 				<view class="line"></view>
-
+				<view class="input-item">
+					<view class="input-label">缴费单位</view>
+					<text class="company-name">XXXXXXXX燃气有限公司</text>
+				</view>
+				<!-- 分割线 -->
+				<view class="line"></view>
 				<!-- 设备号输入项 -->
 				<view class="input-item">
 					<view class="input-label">缴费设备号</view>
@@ -26,8 +30,9 @@
 						<input class="input" placeholder="请输入设备号" placeholder-class="input-placeholder"
 							v-model="deviceNo" />
 						<!-- 右边扫码图标 text标签直接用 双端不乱码 -->
-						<image class="scanTheCodeIconStyle" src="http://47.104.199.163:9090/images/propertyImgs/scanTheCodeIcon.png"
+						<image class="scanTheCodeIconStyle"
-							@click="scanCode"></image>
+							src="http://47.104.199.163:9090/images/propertyImgs/scanTheCodeIcon.png" @click="scanCode">
+						</image>
 					</view>
 				</view>
 
@@ -38,13 +43,13 @@
 
 			<!-- 底部协议和提交按钮 -->
 			<view class="bottom-area">
-				<view class="agreement">
+				<!-- <view class="agreement">
 					<checkbox-group @change="handleAgreeChange">
 						<checkbox :checked="isAgree" />
 					</checkbox-group>
 					<text class="agreement-text">我已阅并同意</text>
 					<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
-				</view>
+				</view> -->
 
 
 				<button class="submit-btn" @click="goPay">
@@ -68,124 +73,124 @@
 
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		onReady: function(e) {},
+		ref,
-		components: {
+		onMounted,
+		computed
 
-		},
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
 
-		computed: {
+	// 响应式数据
+	const paymentType = ref(uni.getStorageSync('addPaymentType'))
+	const deviceNo = ref('')
+	const isAgree = ref(false)
+	const scanResult = ref('')
 
+	// 生命周期
+	onMounted(() => {})
 
+	// 协议勾选
+	const handleAgreeChange = (e) => {
+		isAgree.value = e.detail.value.length > 0
+	}
 
-
+	// 扫码
-		},
+	const scanCode = async () => {
-		created() {
+		try {
-
+			uni.showLoading({
-		},
+				title: '扫码中...',
-		onShow() {
+				mask: true
-
-		},
-
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
-
 			})
-		},
-		data() {
-			return {
-				paymentType: uni.getStorageSync('addPaymentType'),
-				deviceNo: '', // 设备号
-				isAgree: false, // 是否同意协议
 
+			const res = await uni.scanCode({
+				onlyFromCamera: false,
+				scanType: ['qrCode', 'barCode']
+			})
 
+			// 扫码成功，赋值
+			deviceNo.value = res.result
+			scanResult.value = res.result
+			uni.hideLoading()
+			uni.showToast({
+				title: '扫码成功',
+				icon: 'success'
+			})
+		} catch (err) {
+			uni.hideLoading()
+			console.log('扫码失败', err)
+			uni.showToast({
+				title: '扫码取消/失败',
+				icon: 'none'
+			})
+		}
+	}
 
+	// 提交缴费
+	const goPay = () => {
+		if (!deviceNo.value) {
+			uni.showToast({
+				title: '请输入设备号',
+				icon: 'none'
+			})
+			return
+		}
+		// if (!isAgree.value) {
+		// 	uni.showToast({
+		// 		title: '请同意协议',
+		// 		icon: 'none'
+		// 	})
+		// 	return
+		// }
 
+		uni.showModal({
+			title: '确认提交',
+			content: '确认要提交吗?',
+			success: (res) => {
+				if (res.confirm) {
+					uni.showLoading({
+						title: '提交中...',
+						mask: true
+					})
+
+					setTimeout(() => {
+						uni.showToast({
+							title: '提交成功',
+							icon: 'success'
+						})
+					}, 1000)
+
+					setTimeout(() => {
+						uni.hideLoading()
+						goNext()
+					}, 2500)
+				}
 			}
-		},
+		})
-
+	}
-
+	const handleProtocol = () => {
-		methods: {
-			handleAgreeChange(e) {
-				// e.detail.value 是数组，有值 = 选中，空 = 未选中
-				this.isAgree = e.detail.value.length > 0
-			},
-			// 扫码获取设备号 【uniapp+微信小程序双端兼容】
-			async scanCode() {
-				try {
-					const res = await uni.scanCode({
-						onlyFromCamera: false, // 允许相册+相机
-						scanType: ['qrCode', 'barCode'] // 支持二维码+条形码
-					})
-					// 扫码结果赋值给设备号输入框
-					this.deviceNo = res.result
-				} catch (err) {
-					console.log('扫码取消/失败', err)
-				}
-			},
-			// 缴费提交
-			goPay() {
-				if (!this.deviceNo) {
-					uni.showToast({
-						title: '请输入设备号',
-						icon: 'none'
-					})
-					return
-				}
-				if (!this.isAgree) {
-					uni.showToast({
-						title: '请同意协议',
-						icon: 'none'
-					})
-					return
-				}
-				uni.showModal({
-					title: '确认提交',
-					content: '确认要提交吗?',
-					success: (res) => {
-						if (res.confirm) {
-							uni.showLoading({
-								title: '提交中...',
-								mask: true
-							});
-							setTimeout(() => {
-								uni.showToast({
-									title: '提交成功',
-									icon: 'success'
-								});
-							}, 1000);
-							setTimeout(() => {
-								// 提交成功后跳转列表页
-								uni.hideLoading();
-								this.goNext()
-							}, 2500);
-						}
-					}
-				})
-			},
-			goNext() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/addPaymentSuccess',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-
-		},
 
+	}
+	// 跳转成功页
+	const goNext = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/addPaymentSuccess'
+		})
+	}
 
+	// 返回
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
 	}
 </script>
 <style lang="scss">

property-uniapp-project/pageSubPack/payment-list/addPayment.vue

@@ -13,8 +13,8 @@
  				<view class="header-card">
  					<view class="header-icon">
  						<image class="iconStyle"
-						:src="paymentType=='燃气'?'http://47.104.199.163:9090/images/propertyImgs/gas.png':'http://47.104.199.163:9090/images/propertyImgs/heating.png'">
+ 							:src="paymentType=='燃气'?'http://47.104.199.163:9090/images/propertyImgs/gas.png':'http://47.104.199.163:9090/images/propertyImgs/heating.png'">
-						></image>
+ 							></image>
  					</view>
  					<text class="header-title">{{paymentType+'费'}}</text>
  				</view>
@@ -87,130 +87,109 @@
 
  </template>
 
- <script>
+ <script setup>
- 	export default {
+ 	import {
- 		onReady: function(e) {},
+ 		ref,
- 		components: {
+ 		onMounted,
+ 		computed
 
- 		},
+ 	} from 'vue'
+ 	import {
+ 		onShow,
+ 		onReady,
+ 		onReachBottom,
+ 		onLoad,
+ 		onUnload,
+ 		onPullDownRefresh
+ 	} from '@dcloudio/uni-app'
+ 	// 响应式数据
+ 	const statusBarHeight = ref(20)
+ 	const paymentType = ref(uni.getStorageSync('addPaymentType'))
+ 	const userNo = ref('')
+ 	const isAgree = ref(false)
+ 	const showPopup = ref(false)
 
- 		computed: {
+ 	// 生命周期
+ 	onShow(() => {})
+ 	onMounted(() => {})
+ 	onReady(() => {
+ 		// nextTick 用法
+ 		// nextTick(() => {})
+ 	})
 
- 			style() {
+ 	// 勾选协议
- 				var statusBarHeight = this.statusBarHeight;
+ 	const handleAgreeChange = (e) => {
- 				return statusBarHeight;
+ 		isAgree.value = e.detail.value.length > 0
- 			},
+ 	}
 
+ 	// 协议链接点击
+ 	const handleProtocol = () => {
+ 		uni.navigateTo({})
+ 	}
 
- 		},
+ 	// 提交
- 		created() {
+ 	const handleSubmit = () => {
- 			let statusBarObj = this.getPhoneInfo()
+ 		if (!userNo.value) {
- 			this.statusBarHeight = statusBarObj.statusBarHeight
+ 			uni.showToast({
- 		},
+ 				title: '请输入户号',
- 		onShow() {
+ 				icon: 'none'
-
- 		},
-
- 		mounted() {},
-
- 		onReady() {
- 			this.$nextTick(() => {
-
  			})
- 		},
+ 			return
- 		data() {
+ 		}
- 			return {
+
- 				/* 设定状态栏默认高度 */
+ 		if (!isAgree.value) {
- 				statusBarHeight: 20,
+ 			uni.showToast({
- 				paymentType: uni.getStorageSync('addPaymentType'),
+ 				title: '请先同意协议',
- 				userNo: '',
+ 				icon: 'none'
- 				isAgree: false,
+ 			})
- 				showPopup: false, // 控制弹窗显示
+ 			return
+ 		}
+
+ 		uni.showModal({
+ 			title: '确认提交',
+ 			content: '确认要提交吗?',
+ 			success: (res) => {
+ 				if (res.confirm) {
+ 					uni.showLoading({
+ 						title: '提交中...',
+ 						mask: true
+ 					})
+
+ 					setTimeout(() => {
+ 						uni.showToast({
+ 							title: '提交成功',
+ 							icon: 'success'
+ 						})
+ 					}, 1000)
+
+ 					setTimeout(() => {
+ 						uni.hideLoading()
+ 						goNext()
+ 					}, 2500)
+ 				}
  			}
- 		},
+ 		})
+ 	}
 
- 		methods: {
+ 	// 跳转成功页
- 			handleAgreeChange(e) {
+ 	const goNext = () => {
- 				// e.detail.value 是数组，有值 = 选中，空 = 未选中
+ 		uni.redirectTo({
- 				this.isAgree = e.detail.value.length > 0
+ 			url: '/pageSubPack/payment-list/addPaymentSuccess'
- 			},
+ 		})
- 			// 处理协议链接点击
+ 	}
- 			handleProtocol() {
- 				uni.navigateTo({
-
- 				})
- 			},
- 			// 处理提交
- 			handleSubmit() {
- 				if (!this.userNo) {
- 					uni.showToast({
- 						title: '请输入户号',
- 						icon: 'none'
- 					})
- 					return
- 				}
- 				if (!this.isAgree) {
- 					uni.showToast({
- 						title: '请先同意协议',
- 						icon: 'none'
- 					})
- 					return
- 				}
- 				uni.showModal({
- 					title: '确认提交',
- 					content: '确认要提交吗?',
- 					success: (res) => {
- 						if (res.confirm) {
- 							uni.showLoading({
- 								title: '提交中...',
- 								mask: true
- 							});
- 							setTimeout(() => {
- 								uni.showToast({
- 									title: '提交成功',
- 									icon: 'success'
- 								});
- 							}, 1000);
- 							setTimeout(() => {
- 								// 提交成功后跳转列表页
- 								uni.hideLoading();
- 								this.goNext()
- 							}, 2500);
-
-
- 						}
- 					}
- 				})
-
- 			},
- 			goNext() {
- 				uni.redirectTo({
- 					url: '/pageSubPack/payment-list/addPaymentSuccess',
- 					success: res => {},
- 					fail: () => {},
- 					complete: () => {}
- 				});
- 			},
- 			goToChange() {
- 				// uni.redirectTo({
- 				// 	url: '/pageSubPack/payment-list/selectPaymentEntity',
- 				// 	success: res => {},
- 				// 	fail: () => {},
- 				// 	complete: () => {}
- 				// });
- 			},
- 			goBack() {
- 				uni.redirectTo({
- 					url: '/pageSubPack/payment-list/paymentIndex',
- 					success: res => {},
- 					fail: () => {},
- 					complete: () => {}
- 				});
- 			},
-
- 		},
 
+ 	// 切换（注释保留）
+ 	const goToChange = () => {
+ 		// uni.redirectTo({
+ 		//   url: '/pageSubPack/payment-list/selectPaymentEntity'
+ 		// })
+ 	}
 
+ 	// 返回
+ 	const goBack = () => {
+ 		uni.redirectTo({
+ 			url: '/pageSubPack/payment-list/paymentIndex'
+ 		})
  	}
  </script>
  <style lang="scss">

property-uniapp-project/pageSubPack/payment-list/addPaymentSuccess.vue

@@ -1,14 +1,12 @@
 <template>
 	<view class="contentStyle" style="">
 		<view class="status-bar"></view>
-		<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack"  backgroundColor="transparent"
+		<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
 			:border="false">
 		</uni-nav-bar>
-		
 
 		<!-- 表单区域 -->
 		<scroll-view class="page" scroll-y="true">
-
 			<view class="container">
 				<!-- 成功图标 -->
 				<view class="success-icon">
@@ -29,69 +27,43 @@
 					<button class="btn-back" @click="goBack">返回生活缴费</button>
 				</view>
 			</view>
-
 		</scroll-view>
 	</view>
-
-
-
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		onReady: function(e) {},
+		ref,
-		components: {
+		onMounted,
+		computed
 
-		},
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
 
-		computed: {
+	// 响应式数据
-
+	const statusBarHeight = ref(20)
-			 
+	const paymentType = ref(uni.getStorageSync('addPaymentType'))
-
-
-		},
-		created() {
-			 
-		},
-		onShow() {
-
-		},
-
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
-
-			})
-		},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				paymentType: uni.getStorageSync('addPaymentType'),
-
-
-
-			}
-		},
-
-
-		methods: {
-
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-
-		},
 
+	// 生命周期
+	onShow(() => {})
+	onMounted(() => {})
+	onReady(() => {})
 
+	// 方法
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
 	}
 </script>
+
 <style lang="scss">
 	page {
 		background: #f9f9f9;
@@ -103,19 +75,17 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
 		background-color: #f9f9f9;
 	}
-	
+
 	.page {
 		flex: 1;
 		overflow-y: auto;
 		padding: 0px 40rpx;
 		box-sizing: border-box;
-		
-		/* background-color: #fff; */
 	}
 </style>
+
 <style scoped>
 	/* 全局容器 */
 	.container {
@@ -183,7 +153,9 @@
 	/* 按钮默认样式重置（解决uni-app button默认样式问题） */
 	.btn-back::after {
 		border: none;
-	}.status-bar{
+	}
+
+	.status-bar {
 		width: 100vw;
 		height: 46px;
 	}

property-uniapp-project/pageSubPack/payment-list/arrearsPayment.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="contentStyle" style="">
 		<view class="status-bar"></view>
-		<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
+		<uni-nav-bar :title="arrearsPayment.value" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
 			:border="false">
 		</uni-nav-bar>
 
@@ -21,32 +21,9 @@
 					<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
 					<!-- 缴费信息 -->
 					<view class="info-section" style="">
-						<view v-if="arrearsPayment=='物业费'">
+
-							<view class="info-item">
+						<view>
-								<text class="info-label">户名</text>
+
-								<text class="info-value">桂花园（别墅）2号楼2层</text>
-							</view>
-							<view class="info-item">
-								<text class="info-label">户主</text>
-								<text class="info-value">周大声</text>
-							</view>
-							<view class="info-item">
-								<text class="info-label">缴费单位</text>
-								<text class="info-value">CT物业</text>
-							</view>
-							<view class="info-item">
-								<text class="info-label">可用余额</text>
-								<text class="info-value">0.00</text>
-							</view>
-							<!-- <view class="info-payAmountItem">
-								<text class="info-payAmount">{{'￥'+payAmount}}</text>
-							</view> -->
-						</view>
-						<view v-else>
-							<view class="info-item" v-if="arrearsPayment=='暖气费'">
-								<text class="info-label">房屋</text>
-								<text class="info-value">桂花园（别墅）2号楼2层</text>
-							</view>
 							<view class="info-item">
 								<text class="info-label">户号</text>
 								<text class="info-value">101123456</text>
@@ -68,10 +45,13 @@
 								</input>
 							</view>
 							<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
-							<view class="arrears-row">
+							<view class="arrears-row" v-if="outstandingPayment==true">
 								<text class="arrears-text">当前欠费金额¥{{ arrearsAmount }}元</text>
 								<text class="auto-fill-btn" @click="handleAutoFill">点击自动填入</text>
 							</view>
+							<view class="arrears-row" v-if="outstandingPayment==false">
+								<text class="arrears-text">暂未查询到欠费</text>
+							</view>
 						</view>
 					</view>
 
@@ -102,22 +82,14 @@
 						<view class="pay-way">
 							<text class="way-label">支付方式</text>
 							<view class="way-content">
-								<image class="bank-icon" src="http://47.104.199.163:9090/images/propertyImgs/bank-logo.png" mode="aspectFit">
+								<image class="bank-icon"
+									src="http://47.104.199.163:9090/images/propertyImgs/bank-logo.png" mode="aspectFit">
 								</image>
 								<text class="bank-name">建设银行储蓄卡(8888)</text>
 								<text class="arrow-icon">></text>
 							</view>
 						</view>
 
-						<!-- 银行卡选择列表 -->
-						<!-- <view v-if="showBankList" class="bank-list">
-							<view v-for="(item, index) in bankList" :key="index" class="bank-item"
-								@click="selectBank(item)">
-								<image class="bank-item-icon" :src="item.icon" mode="aspectFit"></image>
-								<text class="bank-item-name">{{ item.name }}</text>
-								<text v-if="selectedBank.id === item.id" class="check-icon">&#xe60c;</text>
-							</view>
-						</view> -->
 
 						<!-- 密码输入框 -->
 						<view class="password-input">
@@ -189,158 +161,198 @@
 
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		onReady: function(e) {},
+		ref
-		components: {
+	} from 'vue'
 
+	// 响应式数据
+	const statusBarHeight = ref(20)
+	const outstandingPayment = ref(true)
+	const arrearsPayment = ref(uni.getStorageSync('arrearsPayment'))
+	const currentStep = ref(1)
+	const payAmount = ref('1680.00')
+	const password = ref('')
+	const showBankList = ref(false)
+	const arrearsAmount = ref('21.21')
+	const payNum = ref('')
+
+	// 银行卡列表
+	const bankList = ref([{
+			id: 1,
+			name: '建设银行储蓄卡(8888)',
+			icon: '/static/bank-logo.png'
 		},
-
+		{
-		computed: {
+			id: 2,
-
+			name: '工商银行储蓄卡(6666)',
-
+			icon: '/static/icbc-logo.png'
-
-
 		},
-		created() {
+		{
+			id: 3,
+			name: '招商银行储蓄卡(9999)',
+			icon: '/static/cmb-logo.png'
+		}
+	])
 
-		},
+	// 默认选中的银行卡
-		onShow() {
+	const selectedBank = ref({
+		id: 1,
+		name: '建设银行储蓄卡(8888)',
+		icon: '/static/bank-logo.png'
+	})
 
-		},
+	// 自动填充欠费金额
+	const handleAutoFill = () => {
+		payNum.value = arrearsAmount.value
+		uni.vibrateShort({
+			type: 'light'
+		})
+	}
 
-		mounted() {},
+	// 返回
-
+	const goBack = () => {
-		onReady() {
+		uni.redirectTo({
-			this.$nextTick(() => {
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
+	}
 
+	// 立即缴费
+	const handlePay = () => {
+		if (!payAmount.value || Number(payAmount.value) <= 0) {
+			uni.showToast({
+				title: '请输入正确的缴费金额',
+				icon: 'none'
 			})
-		},
+			return
-		data() {
+		}
-			return {
+		requestPayOrder()
-				/* 设定状态栏默认高度 */
+		// 原支付注释
-				statusBarHeight: 20,
+		// currentStep.value = 2
-				outstandingPayment: true, //是否欠费
+	}
-				arrearsPayment: uni.getStorageSync('arrearsPayment'),
+	// 统一下单后后端返回的支付参数
-				currentStep: 1, // 1: 详情页 2: 密码弹窗 3: 成功页
+	const payInfo = ref({
-				payAmount: "1680.00", // 缴费金额
+		appId: '', // 公众号/小程序ID
-				password: "", // 输入的密码
+		timeStamp: '', // 时间戳
-				showBankList: false, // 是否显示银行卡列表
+		nonceStr: '', // 随机串
-				arrearsAmount: "21.21",
+		package: '', // 数据包 如 prepay_id=xxx
-				payNum: '',
+		signType: 'MD5', // 签名方式
-				// 银行卡列表
+		paySign: '' // 签名
-				bankList: [{
+	})
-						id: 1,
+
-						name: "建设银行储蓄卡(8888)",
+	// 1. 先请求后端接口生成预支付订单
-						icon: "/static/bank-logo.png"
+	const requestPayOrder = async () => {
-					},
+		try {
-					{
+			uni.showLoading({
-						id: 2,
+				title: '发起支付中'
-						name: "工商银行储蓄卡(6666)",
+			})
-						icon: "/static/icbc-logo.png"
+
-					},
+			const res = await getMyHouseList({
-					{
+				deviceNo: '设备号',
-						id: 3,
+				money: 0.01, // 金额
-						name: "招商银行储蓄卡(9999)",
+				openid: '用户openid'
-						icon: "/static/cmb-logo.png"
+			})
-					}
+
-				],
+
-				// 默认选中的银行卡
+			uni.hideLoading()
-				selectedBank: {
+
-					id: 1,
+			// 后端返回支付所需参数
-					name: "建设银行储蓄卡(8888)",
+			const data = res.data
-					icon: "/static/bank-logo.png"
+			if (data.code !== 0) {
-				}
+				uni.showToast({
+					title: data.msg || '下单失败',
+					icon: 'none'
+				})
+				return
 			}
-		},
 
+			// 赋值支付参数
+			payInfo.value = {
+				appId: data.appId,
+				timeStamp: data.timeStamp,
+				nonceStr: data.nonceStr,
+				package: data.package,
+				signType: data.signType,
+				paySign: data.paySign
+			}
 
-		methods: {
+			// 2. 调起微信支付
-			handleAutoFill() {
+			wx.requestPayment({
-				this.payNum = this.arrearsAmount;
+				...payInfo.value,
-				uni.vibrateShort({
+				success(res) {
-					type: "light"
+					console.log('支付成功', res)
-				});
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			// 点击立即缴费
-			handlePay() {
-				if (!this.payAmount || Number(this.payAmount) <= 0) {
 					uni.showToast({
-						title: "请输入正确的缴费金额",
+						title: '支付成功'
-						icon: "none"
+					})
-					});
+					currentStep.value == 3
-					return;
+				},
+				fail(err) {
+					console.log('支付失败', err)
+					uni.showToast({
+						title: '支付取消或失败',
+						icon: 'none'
+					})
 				}
-				this.currentStep = 2;
+			})
-			},
 
-			// 关闭密码弹窗
+		} catch (err) {
-			closePasswordModal() {
+			uni.hideLoading()
-				this.currentStep = 1;
+			console.log('请求异常', err)
-				this.password = "";
+			uni.showToast({
-				this.showBankList = false;
+				title: '支付请求异常',
-			},
+				icon: 'none'
+			})
+		}
+	}
+	// 关闭密码弹窗
+	const closePasswordModal = () => {
+		currentStep.value = 1
+		password.value = ''
+		showBankList.value = false
+	}
 
-			// 选择银行卡
+	// 选择银行卡
-			selectBank(item) {
+	const selectBank = (item) => {
-				this.selectedBank = item;
+		selectedBank.value = item
-				this.showBankList = false;
+		showBankList.value = false
-			},
+	}
 
-			// 输入密码
+	// 输入密码
-			inputPassword(num) {
+	const inputPassword = (num) => {
-				if (this.password.length >= 6) return;
+		if (password.value.length >= 6) return
-				this.password += num.toString();
+		password.value += num.toString()
 
-				// 密码满6位，自动提交
+		// 满6位自动提交
-				if (this.password.length === 6) {
+		if (password.value.length === 6) {
-					this.handleConfirmPay();
+			handleConfirmPay()
-				}
+		}
-			},
+	}
 
-			// 删除密码
+	// 删除密码
-			deletePassword() {
+	const deletePassword = () => {
-				this.password = this.password.slice(0, -1);
+		password.value = password.value.slice(0, -1)
-			},
+	}
 
-			// 确认支付
+	// 确认支付（模拟）
-			handleConfirmPay() {
+	const handleConfirmPay = () => {
-				// 这里模拟支付请求，实际项目中调用后端接口
+		uni.showLoading({
-				uni.showLoading({
+			title: '支付中...',
-					title: "支付中...",
+			mask: true
-					mask: true
+		})
-				});
-
-				setTimeout(() => {
-					uni.hideLoading();
-					// 支付成功，跳转到成功页
-					this.currentStep = 3;
-					this.password = "";
-					this.showBankList = false;
-				}, 1500);
-			},
-
-			// 返回生活缴费列表
-			handleBackToList() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			}
-
-		},
 
+		setTimeout(() => {
+			uni.hideLoading()
+			currentStep.value = 3
+			password.value = ''
+			showBankList.value = false
+		}, 1500)
+	}
 
+	// 返回缴费列表
+	const handleBackToList = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
 	}
 </script>
 <style lang="scss">

property-uniapp-project/pageSubPack/payment-list/noArrearsPayment.vue

@@ -5,14 +5,11 @@
 			:border="false">
 		</uni-nav-bar>
 
-
 		<!-- 表单区域 -->
 		<scroll-view class="page" scroll-y="true">
-
 			<view class="container">
 				<!-- 1. 物业费详情页 -->
 				<view class="pay-page">
-
 					<!-- 未欠费 -->
 					<view class="amount-section">
 						<image src="http://47.104.199.163:9090/images/propertyImgs/noArrears.png" class="background-image-style"></image>
@@ -22,7 +19,6 @@
 							<text class="lineStyle">{{'|'}}</text>
 							<text>{{'缴费金额：'+lastPayNum+'元'}}</text>
 						</view>
-
 					</view>
 
 					<!-- 缴费信息 -->
@@ -44,7 +40,6 @@
 								<text class="info-label">可用余额</text>
 								<text class="info-value">0.00</text>
 							</view>
-
 						</view>
 						<view v-else>
 							<view class="info-item" v-if="arrearsPayment=='暖气费'">
@@ -63,153 +58,58 @@
 								<text class="info-label">缴费单位</text>
 								<text class="info-value">HN热力有限公司</text>
 							</view>
-
 						</view>
 					</view>
-
-
 				</view>
-
 			</view>
-
-
-
-
-
-
-
 		</scroll-view>
 	</view>
-
-
-
 </template>
 
-<script>
+<script setup>
-	export default {
+import {
-		onReady: function(e) {},
+		ref,
-		components: {
+		onMounted,
+		computed
 
-		},
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
 
-		computed: {
+// 响应式数据
+const lastPayTime = ref('2022-11-29')
+const lastPayNum = ref('2022.00')
+const statusBarHeight = ref(20)
+const arrearsPayment = ref(uni.getStorageSync('arrearsPayment'))
 
+// 生命周期
+onShow(() => {})
+onMounted(() => {})
+onReady(() => {})
 
+// 方法
+const goBack = () => {
+	uni.redirectTo({
+		url: '/pageSubPack/payment-list/paymentIndex'
+	})
+}
 
-
+// 以下为原代码保留的方法（未使用但保持功能完整）
-		},
+const handlePay = () => {}
-		created() {
+const closePasswordModal = () => {}
-
+const selectBank = () => {}
-		},
+const inputPassword = () => {}
-		onShow() {
+const deletePassword = () => {}
-
+const handleConfirmPay = () => {}
-		},
+const handleBackToList = () => {}
-
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
-
-			})
-		},
-		data() {
-			return {
-				lastPayTime: '2022-11-29',
-				lastPayNum: '2022.00',
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				arrearsPayment: uni.getStorageSync('arrearsPayment'),
-
-
-
-
-			}
-		},
-
-
-		methods: {
-
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			// 点击立即缴费
-			handlePay() {
-				if (!this.payAmount || Number(this.payAmount) <= 0) {
-					uni.showToast({
-						title: "请输入正确的缴费金额",
-						icon: "none"
-					});
-					return;
-				}
-				this.currentStep = 2;
-			},
-
-			// 关闭密码弹窗
-			closePasswordModal() {
-				this.currentStep = 1;
-				this.password = "";
-				this.showBankList = false;
-			},
-
-			// 选择银行卡
-			selectBank(item) {
-				this.selectedBank = item;
-				this.showBankList = false;
-			},
-
-			// 输入密码
-			inputPassword(num) {
-				if (this.password.length >= 6) return;
-				this.password += num.toString();
-
-				// 密码满6位，自动提交
-				if (this.password.length === 6) {
-					this.handleConfirmPay();
-				}
-			},
-
-			// 删除密码
-			deletePassword() {
-				this.password = this.password.slice(0, -1);
-			},
-
-			// 确认支付
-			handleConfirmPay() {
-				// 这里模拟支付请求，实际项目中调用后端接口
-				uni.showLoading({
-					title: "支付中...",
-					mask: true
-				});
-
-				setTimeout(() => {
-					uni.hideLoading();
-					// 支付成功，跳转到成功页
-					this.currentStep = 3;
-					this.password = "";
-					this.showBankList = false;
-				}, 1500);
-			},
-
-			// 返回生活缴费列表
-			handleBackToList() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			}
-
-		},
-
-
-	}
 </script>
+
 <style lang="scss">
 	page {
 		background: #f9f9f9;
@@ -221,7 +121,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
 		background-color: #f9f9f9;
 	}
 
@@ -232,8 +131,6 @@
 		box-sizing: border-box;
 	}
 
-
-	/* 1. 物业费详情页 */
 	.pay-page {
 		width: 100%;
 	}
@@ -245,11 +142,9 @@
 		flex-direction: column;
 		align-items: center;
 		color: #999999;
-
 	}
 
 	.background-image-style {
-
 		width: 466rpx;
 		height: 250rpx;
 		margin-bottom: 140rpx;
@@ -268,11 +163,8 @@
 		font-weight: 600;
 	}
 
-	.info-section {}
-
 	.lineStyle {
 		margin: 0rpx 30rpx;
-
 	}
 
 	.info-item {
@@ -302,11 +194,10 @@
 		font-size: 50rpx;
 		color: #333;
 		font-weight: 600;
-
 	}
 
 	.input-section {
-		padding: 030rpx;
+		padding: 0 30rpx;
 		margin-bottom: 60rpx;
 	}
 
@@ -319,7 +210,7 @@
 	}
 
 	.btn-section {
-		padding: 030rpx;
+		padding: 0 30rpx;
 	}
 
 	.pay-btn {
@@ -334,7 +225,6 @@
 		outline: none;
 	}
 
-	/* 2. 支付密码弹窗 */
 	.modal-overlay {
 		position: fixed;
 		top: 0;
@@ -350,7 +240,7 @@
 	.password-modal {
 		width: 100%;
 		background-color: #fff;
-		border-radius: 24rpx24rpx 0 0;
+		border-radius: 24rpx 24rpx 0 0;
 		padding-bottom: 40rpx;
 	}
 
@@ -359,7 +249,7 @@
 		align-items: center;
 		justify-content: space-between;
 		height: 100rpx;
-		padding: 030rpx;
+		padding: 0 30rpx;
 		border-bottom: 2rpx solid #f0f0f0;
 	}
 
@@ -382,7 +272,7 @@
 	}
 
 	.pay-info {
-		padding: 40rpx30rpx;
+		padding: 40rpx 30rpx;
 		text-align: center;
 	}
 
@@ -434,9 +324,8 @@
 		color: #999;
 	}
 
-	/* 银行卡列表 */
 	.bank-list {
-		padding: 030rpx;
+		padding: 0 30rpx;
 		border-bottom: 2rpx solid #f0f0f0;
 	}
 
@@ -468,17 +357,15 @@
 		color: #007aff;
 	}
 
-	/* 密码输入框 */
 	.password-input {
 		display: flex;
 		justify-content: space-between;
-		padding: 40rpx30rpx;
+		padding: 40rpx 30rpx;
 	}
 
 	.password-item {
 		width: 100rpx;
 		height: 100rpx;
-		/* border: 2rpx solid #dcdcdc; */
 		background-color: #efefef;
 		border-radius: 8rpx;
 		display: flex;
@@ -493,7 +380,6 @@
 		border-radius: 50%;
 	}
 
-	/* 数字键盘 */
 	.keyboard {
 		width: 100%;
 	}
@@ -527,7 +413,6 @@
 		border: none;
 	}
 
-	/* 3. 缴费成功页 */
 	.success-page {
 		width: 100%;
 		min-height: 100vh;
@@ -544,7 +429,6 @@
 	}
 
 	.success-icon {
-		/* margin-top: 120rpx; */
 		margin-bottom: 40rpx;
 		width: 100px;
 		height: 100px;
@@ -553,12 +437,8 @@
 		background-color: #007aff;
 		color: #fff;
 		border-radius: 50%;
-
-
 	}
 
-	.success-icon .iconfont {}
-
 	.success-text {
 		font-size: 40rpx;
 		font-weight: 600;

property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue

@@ -11,13 +11,13 @@
 		<scroll-view class="page" scroll-y="true">
 			<view class="container">
 				<!-- 已缴费/欠费列表 -->
-				<view class="bill-list">
+				<view class="bill-list" v-if="paymentList.length != 0">
-					<view v-if="paymentList.length === 0" class="empty-state">
+					<!-- <view v-if="paymentList.length === 0" class="empty-state">
 						<uni-icons type="info" size="60" color="#ccc"></uni-icons>
 						<text class="empty-text">
 							{{ '暂无数据'}}
 						</text>
-					</view>
+					</view> -->
 					<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
 						<image class="billIcon" :src="item.icon"></image>
 						<view class="bill-info">
@@ -29,8 +29,6 @@
 
 						<view class="arrow"></view>
 					</view>
-
-
 				</view>
 
 				<!-- 新增缴费区域 -->
@@ -41,7 +39,6 @@
 					</view>
 
 					<view class="grid-list">
-						
 						<view class="grid-item" v-for="(item, index) in addList" :key="index" @click="goToAdd(item)">
 							<view class="icon-box" :class="item.iconClass">
 								<image class="iconStyle" :src="item.icon"></image>
@@ -53,185 +50,141 @@
 				<view style="width: 100%;height: 30rpx;"></view>
 			</view>
 		</scroll-view>
-
 	</view>
-
-
-
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		onReady: function(e) {
+		ref,
-			// console.log('onReady')
+		onMounted,
+		computed
+	
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+	// 响应式数据
+	const statusBarHeight = ref(20)
+
+	const paymentList = ref([{
+			id: 1,
+			name: '物业费',
+			status: '已欠费',
+			address: '桂花园（别墅）2号楼2层',
+			icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
 		},
-		components: {
+		{
-
+			id: 2,
-
+			name: '暖气费',
+			status: '',
+			address: '山东省日照市东港区桂花园（别墅）2号楼2层',
+			icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
 		},
-		computed: {
+		{
-
+			id: 3,
+			name: '电费',
+			status: '已欠费',
+			address: '山东省日照市东港区桂花园（别墅）2号楼2层',
+			icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
+		}
+	])
 
+	const addList = ref([{
+			name: "燃气",
+			type: "gas",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
+			iconClass: "gas"
 		},
-		created() {
+		{
-
+			name: "水",
+			type: "water",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
+			iconClass: "water"
 		},
-		onShow() {
+		{
-
+			name: "物业",
-
+			type: "property",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
+			iconClass: "property"
 		},
-		onLoad() {
+		{
-
+			name: "电",
+			type: "electric",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
+			iconClass: "electric"
 		},
-		mounted() {},
+		{
-		data() {
+			name: "暖气",
-			return {
+			type: "heating",
-				/* 设定状态栏默认高度 */
+			icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
-				statusBarHeight: 20,
+			iconClass: "heating"
-				paymentList: [{
-						id: 1,
-						name: '物业费',
-						status: '已欠费',
-						address: '桂花园（别墅）2号楼2层',
-						icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
-
-					},
-					{
-						id: 2,
-						name: '暖气费',
-						status: '',
-						address: '山东省日照市东港区桂花园（别墅）2号楼2层',
-						icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
-
-					},
-					{
-						id: 3,
-						name: '电费',
-						status: '已欠费',
-						address: '山东省日照市东港区桂花园（别墅）2号楼2层',
-						icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
-
-					}
-				],
-				// 新增缴费列表数据
-				addList: [{
-						name: "燃气",
-						type: "gas",
-						icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
-						iconClass: "gas"
-					},
-					{
-						name: "水",
-						type: "water",
-						icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
-						iconClass: "water"
-					},
-					{
-						name: "物业",
-						type: "property",
-						icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
-						iconClass: "property"
-					},
-					{
-						name: "电",
-						type: "electric",
-						icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
-						iconClass: "electric"
-					},
-					{
-						name: "暖气",
-						type: "heating",
-						icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
-						iconClass: "heating"
-					},
-					{
-						name: "车位",
-						type: "parking",
-						icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
-						iconClass: "parking"
-					}
-				]
-
-			}
 		},
+		{
+			name: "车位",
+			type: "parking",
+			icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
+			iconClass: "parking"
+		}
+	])
 
+	// 生命周期
+	onReady(() => {})
+	onShow(() => {})
+	onLoad(() => {})
 
-		methods: {
+	// 方法
-			// 跳转到缴费
+	const goToBill = (item) => {
-			goToBill(item) {
+		uni.setStorageSync('arrearsPayment', item.name)
-				uni.setStorageSync('arrearsPayment', item.name)
+		if (item.status == '已欠费') {
-				if (item.status == '已欠费') {
+			uni.redirectTo({
-					uni.redirectTo({
+				url: '/pageSubPack/payment-list/arrearsPayment'
-						url: '/pageSubPack/payment-list/arrearsPayment',
+			})
-						success: res => {},
+		} else {
-						fail: () => {},
+			uni.redirectTo({
-						complete: () => {}
+				url: '/pageSubPack/payment-list/noArrearsPayment'
-					});
+			})
-				} else {
+		}
-					uni.redirectTo({
+	}
-						url: '/pageSubPack/payment-list/noArrearsPayment',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				}
-			},
-			// 跳转到缴费记录
-			goToRecord() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentRecord',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			// 跳转到新增缴费
-			goToAdd(type) {
-				if (type.name == '燃气' || type.name == '暖气') {
-					uni.redirectTo({
-						url: '/pageSubPack/payment-list/selectPaymentEntity',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} else if (type.name == '水' || type.name == '电') {
-					uni.redirectTo({
-						url: '/pageSubPack/payment-list/addHydropower',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				}
-				uni.setStorageSync('addPaymentType', type.name)
 
-			},
+	const goToRecord = () => {
-			goBack() {
+		uni.redirectTo({
-				console.log(uni.getStorageSync('sourcePage'));
+			url: '/pageSubPack/payment-list/paymentRecord'
-				if (uni.getStorageSync('sourcePage') == 'serviceIndex') {
+		})
-					uni.switchTab({
+	}
-						url: '/pages/serviceIndex/serviceIndex',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} else if (uni.getStorageSync('sourcePage') == 'index') {
-					uni.switchTab({
-						url: '/pages/index/index',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				}
-				uni.removeStorageSync('sourcePage');
-
-
-
-			},
-		},
 
+	const goToAdd = (type) => {
+		if (type.name == '燃气' || type.name == '暖气') {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/selectPaymentEntity'
+			})
+		} else if (type.name == '水' || type.name == '电') {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/addHydropower'
+			})
+		}
+		uni.setStorageSync('addPaymentType', type.name)
+	}
 
+	const goBack = () => {
+		console.log(uni.getStorageSync('sourcePage'))
+		if (uni.getStorageSync('sourcePage') == 'serviceIndex') {
+			uni.switchTab({
+				url: '/pages/serviceIndex/serviceIndex'
+			})
+		} else if (uni.getStorageSync('sourcePage') == 'index') {
+			uni.switchTab({
+				url: '/pages/index/index'
+			})
+		}
+		uni.removeStorageSync('sourcePage')
 	}
 </script>
+
 <style lang="scss">
 	page {
 		background: linear-gradient(180deg, #dfedfd, #F6FAFF);
@@ -243,7 +196,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
 		background: linear-gradient(180deg, #dfedfd, #F6FAFF);
 	}
 
@@ -252,7 +204,6 @@
 		overflow-y: auto;
 		padding: 0px 40rpx;
 		box-sizing: border-box;
-		/* background-color: #fff; */
 	}
 
 	.topbox {
@@ -277,11 +228,8 @@
 		bottom: -140rpx;
 	}
 
-	.container {
+	.container {}
-		/* padding:30rpx; */
-	}
 
-	/* ===================== 欠费列表 ===================== */
 	.bill-list {
 		margin-bottom: 40rpx;
 		background-color: #fff;
@@ -289,7 +237,6 @@
 		border-radius: 10rpx;
 	}
 
-	/* 空状态 */
 	.empty-state {
 		display: flex;
 		flex-direction: column;
@@ -339,7 +286,6 @@
 	}
 
 	.bill-desc {
-
 		font-size: 28rpx;
 		font-weight: 600;
 		color: #999;
@@ -348,7 +294,6 @@
 		text-overflow: ellipsis;
 	}
 
-	/* 已欠费标签 */
 	.bill-status {
 		padding: 2rpx 16rpx;
 		border-radius: 30rpx;
@@ -359,7 +304,6 @@
 		margin-left: 10rpx;
 	}
 
-	/* 右侧箭头 */
 	.arrow {
 		width: 12rpx;
 		height: 12rpx;
@@ -368,7 +312,6 @@
 		transform: rotate(-45deg);
 	}
 
-	/* ===================== 新增缴费区域 ===================== */
 	.add-section {
 		background-color: #fff;
 		padding: 30rpx;
@@ -393,7 +336,6 @@
 		color: #1677ff;
 	}
 
-	/* 网格列表 */
 	.grid-list {
 		display: flex;
 		flex-wrap: wrap;
@@ -412,16 +354,13 @@
 		flex-direction: column;
 	}
 
-	/* 图标容器 */
 	.icon-box {
 		width: 88rpx;
 		height: 88rpx;
 		border-radius: 50%;
-		/* background-color: #e6f0ff; */
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		/* margin-right: 24rpx; */
 		font-size: 40rpx;
 	}
 

property-uniapp-project/pageSubPack/payment-list/paymentRecord.vue

@@ -4,7 +4,6 @@
 		<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
 		</uni-nav-bar>
 
-
 		<!-- 表单区域 -->
 		<scroll-view class="page" scroll-y="true">
 
@@ -14,8 +13,6 @@
 					<view class="total-title">累计缴费</view>
 					<view class="total-price">¥800.00</view>
 				</view>
-				<!-- 折线图 Canvas -->
-				<!-- <canvas canvas-id="chargeChart" class="chart-canvas"></canvas> -->
 
 				<view class="chart-box">
 					<view v-if="chartData.length === 0" class="empty-state">
@@ -66,235 +63,213 @@
 				</view>
 			</view>
 
-
-
 		</scroll-view>
 	</view>
-
-
-
 </template>
 
-<script>
+<script setup>
-	export default {
+	import {
-		onReady: function(e) {},
+		ref,
-		components: {
+		onMounted,
+		computed
 
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+
+	// 响应式数据
+	const statusBarHeight = ref(20)
+
+	const chartData = ref([{
+			month: '1月',
+			price: 250
 		},
-
+		{
-		computed: {
+			month: '2月',
-
+			price: 130
-
-			// 自动按月份分组
-			monthGroups() {
-				let map = {}
-				this.billList.forEach(bill => {
-					if (!map[bill.month]) {
-						map[bill.month] = {
-							month: bill.month,
-							total: 0,
-							list: []
-						}
-					}
-					map[bill.month].list.push(bill)
-					map[bill.month].total += bill.amount
-				})
-				return Object.values(map).sort((a, b) => b.month - a.month)
-			}
 		},
-		created() {
+		{
-
+			month: '3月',
+			price: 220
 		},
-		onShow() {
+		{
-
+			month: '4月',
+			price: 250
 		},
-
+		{
-		mounted() {},
+			month: '5月',
-
+			price: 100
-		onReady() {
-			this.$nextTick(() => {
-
-				this.drawLineChart();
-			})
 		},
-		data() {
+		{
-			return {
+			month: '6月',
-				/* 设定状态栏默认高度 */
+			price: 130
-				statusBarHeight: 20,
+		}
-				// 完全对应你图片的数据
+	])
-				chartData: [{
-						month: '1月',
-						price: 250
-					},
-					{
-						month: '2月',
-						price: 130
-					},
-					{
-						month: '3月',
-						price: 220
-					},
-					{
-						month: '4月',
-						price: 250
-					},
-					{
-						month: '5月',
-						price: 100
-					},
-					{
-						month: '6月',
-						price: 130
-					}
-				],
-				maxPrice: 250, // 最大值（基准高度）
-				barMaxHeight: 300, // 柱子最大高度rpx
-				// canvas折线图数据
-				chart: {
-					months: ['1月', '2月', '3月', '4月', '5月', '6月'],
-					values: [100, 140, 230, 100, 130, 100]
-				},
 
-				billList: [
+	const maxPrice = ref(250)
-					// 5月数据
+	const barMaxHeight = ref(300)
-					{
-						id: 1,
-						month: 5,
-						name: '燃气费',
-						account: '123123123123',
-						amount: 25,
-						icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
-					},
-					{
-						id: 2,
-						month: 5,
-						name: '水费',
-						account: '123123123123',
-						amount: 25,
-						icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
-					},
 
-					// 6月数据
+	const chart = ref({
-					{
+		months: ['1月', '2月', '3月', '4月', '5月', '6月'],
-						id: 3,
+		values: [100, 140, 230, 100, 130, 100]
-						month: 6,
+	})
-						name: '燃气费',
-						account: '123123123123',
-						amount: 30,
-						icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
-					},
-					{
-						id: 4,
-						month: 6,
-						name: '水费',
-						account: '123123123123',
-						amount: 10,
-						icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
-					},
-					{
-						id: 5,
-						month: 6,
-						name: '电费',
-						account: '123123123123',
-						amount: 30,
-						icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
-					}
-				]
 
-
+	const billList = ref([{
-			}
+			id: 1,
+			month: 5,
+			name: '燃气费',
+			account: '123123123123',
+			amount: 25,
+			icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png"
 		},
+		{
+			id: 2,
+			month: 5,
+			name: '水费',
+			account: '123123123123',
+			amount: 25,
+			icon: "http://47.104.199.163:9090/images/propertyImgs/water.png"
+		},
+		{
+			id: 3,
+			month: 6,
+			name: '燃气费',
+			account: '123123123123',
+			amount: 30,
+			icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png"
+		},
+		{
+			id: 4,
+			month: 6,
+			name: '水费',
+			account: '123123123123',
+			amount: 10,
+			icon: "http://47.104.199.163:9090/images/propertyImgs/water.png"
+		},
+		{
+			id: 5,
+			month: 6,
+			name: '电费',
+			account: '123123123123',
+			amount: 30,
+			icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png"
+		}
+	])
 
-
+	// 计算属性 —— 月份分组
-		methods: {
+	const monthGroups = computed(() => {
-			// 计算每个柱子自适应高度（按金额比例换算）
+		let map = {}
-			barHeight(price) {
+		billList.value.forEach(bill => {
-				const height = (price / this.maxPrice) * this.barMaxHeight
+			if (!map[bill.month]) {
-				return `${height}rpx`
+				map[bill.month] = {
-			},
+					month: bill.month,
-			drawLineChart() {
+					total: 0,
-				const ctx = uni.createCanvasContext('chargeChart', this)
+					list: []
-				const canvasPage = uni.getSystemInfoSync();
-				const w = canvasPage.windowWidth - 30;
-				const h = canvasPage.windowHeight * 0.3;
-
-				const padding = 40
-				const stepX = (w - 60) / (this.chart.months.length - 1)
-				const maxVal = 250
-
-				ctx.setFillStyle('#999')
-				ctx.setFontSize(12)
-				ctx.setTextAlign('center')
-
-				// 绘制网格
-				ctx.beginPath()
-				ctx.setStrokeStyle('#d8d8d8')
-				ctx.setLineWidth(1)
-				for (let i = 0; i <= 5; i++) {
-					let y = padding + (h - padding * 2) * (1 - i / 5)
-					ctx.moveTo(40, y)
-					ctx.lineTo(w - 20, y)
-					ctx.fillText(i * 50 + '元', 20, y + 4)
 				}
-				ctx.stroke()
+			}
+			map[bill.month].list.push(bill)
+			map[bill.month].total += bill.amount
+		})
+		return Object.values(map).sort((a, b) => b.month - a.month)
+	})
 
-				// 绘制X轴月份
+	// 生命周期
-				this.chart.months.forEach((m, i) => {
+	onShow(() => {})
-					let x = 40 + i * stepX
+	onMounted(() => {})
-					ctx.fillText(m, x, h - 20)
+	onReady(() => {
-				})
+		drawLineChart()
+	})
 
-				// 绘制折线
+	// 方法
-				let points = []
+	const barHeight = (price) => {
-				this.chart.values.forEach((val, i) => {
+		const height = (price / maxPrice.value) * barMaxHeight.value
-					let x = 40 + i * stepX
+		return `${height}rpx`
-					let y = padding + (h - padding * 2) * (1 - val / maxVal)
+	}
-					points.push({
-						x,
-						y
-					})
-				})
 
-				ctx.beginPath()
+	const drawLineChart = () => {
-				ctx.setStrokeStyle('#4080FF')
+		// #ifdef MP-WEIXIN
-				ctx.setLineWidth(2)
+		const ctx = uni.createCanvasContext('chargeChart')
-				points.forEach((p, i) => {
+		// #endif
-					if (i === 0) ctx.moveTo(p.x, p.y)
+		// #ifndef MP-WEIXIN
-					else ctx.lineTo(p.x, p.y)
+		const ctx = uni.createCanvasContext('chargeChart', this)
-				})
+		// #endif
-				ctx.stroke()
 
-				// 绘制圆点
+		const canvasPage = uni.getSystemInfoSync();
-				points.forEach((p, i) => {
+		const w = canvasPage.windowWidth - 30;
-					ctx.beginPath()
+		const h = canvasPage.windowHeight * 0.3;
-					ctx.arc(p.x, p.y, 3, 0, 2 * Math.PI)
+		const padding = 40
-					ctx.setFillStyle('#fff')
+		const stepX = (w - 60) / (chart.value.months.length - 1)
-					ctx.fill()
+		const maxVal = 250
-					ctx.setStrokeStyle('#4080FF')
-					ctx.setLineWidth(2)
-					ctx.stroke()
 
-					ctx.setFillStyle('#4080FF')
+		ctx.setFillStyle('#999')
-					ctx.setFontSize(13)
+		ctx.setFontSize(12)
-					ctx.fillText(this.chart.values[i] + '元', p.x, p.y - 10)
+		ctx.setTextAlign('center')
-				})
 
-				ctx.draw()
+		ctx.beginPath()
-			},
+		ctx.setStrokeStyle('#d8d8d8')
-			goBack() {
+		ctx.setLineWidth(1)
-				uni.redirectTo({
+		for (let i = 0; i <= 5; i++) {
-					url: '/pageSubPack/payment-list/paymentIndex',
+			let y = padding + (h - padding * 2) * (1 - i / 5)
-					success: res => {},
+			ctx.moveTo(40, y)
-					fail: () => {},
+			ctx.lineTo(w - 20, y)
-					complete: () => {}
+			ctx.fillText(i * 50 + '元', 20, y + 4)
-				});
+		}
-			},
+		ctx.stroke()
 
-		},
+		chart.value.months.forEach((m, i) => {
+			let x = 40 + i * stepX
+			ctx.fillText(m, x, h - 20)
+		})
 
+		let points = []
+		chart.value.values.forEach((val, i) => {
+			let x = 40 + i * stepX
+			let y = padding + (h - padding * 2) * (1 - val / maxVal)
+			points.push({
+				x,
+				y
+			})
+		})
 
+		ctx.beginPath()
+		ctx.setStrokeStyle('#4080FF')
+		ctx.setLineWidth(2)
+		points.forEach((p, i) => {
+			if (i === 0) ctx.moveTo(p.x, p.y)
+			else ctx.lineTo(p.x, p.y)
+		})
+		ctx.stroke()
+
+		points.forEach((p, i) => {
+			ctx.beginPath()
+			ctx.arc(p.x, p.y, 3, 0, 2 * Math.PI)
+			ctx.setFillStyle('#fff')
+			ctx.fill()
+			ctx.setStrokeStyle('#4080FF')
+			ctx.setLineWidth(2)
+			ctx.stroke()
+
+			ctx.setFillStyle('#4080FF')
+			ctx.setFontSize(13)
+			ctx.fillText(chart.value.values[i] + '元', p.x, p.y - 10)
+		})
+
+		ctx.draw()
+	}
+
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
 	}
 </script>
+
 <style lang="scss">
 	page {
 		// background: #f2f1f6;
@@ -306,7 +281,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
 		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
 	}
 
@@ -315,15 +289,12 @@
 		overflow-y: auto;
 		padding: 0px 40rpx;
 		box-sizing: border-box;
-		/* background-color: #fff; */
 	}
 
-
 	.total-box {
 		margin-bottom: 30rpx;
 	}
 
-	/* 空状态 */
 	.empty-state {
 		display: flex;
 		flex-direction: column;
@@ -399,7 +370,6 @@
 	.bill-icon {
 		width: 80rpx;
 		height: 80rpx;
-		/* background: #e6efff; */
 		border-radius: 50%;
 		display: flex;
 		align-items: center;
@@ -440,19 +410,17 @@
 		height: 46px;
 	}
 </style>
+
 <style scoped>
-	/* 图表外层容器 横向排列 */
 	.chart-box {
 		width: 100%;
 		height: 444rpx;
 		display: flex;
 		align-items: flex-end;
 		justify-content: space-around;
-		/* padding: 40rpx 20rpx; */
 		box-sizing: border-box;
 	}
 
-	/* 单个柱子单元：垂直排列 文字+柱子+月份 */
 	.chart-item {
 		display: flex;
 		flex-direction: column;
@@ -462,22 +430,18 @@
 		font-size: 24rpx;
 	}
 
-	/* 顶部金额标签 */
 	.chart-label {
 		font-size: 32rpx;
 		color: #333;
 		margin-bottom: 20rpx;
 	}
 
-	/* 蓝色圆角柱子 完全还原原图顶部圆角 */
 	.chart-bar {
 		width: 40rpx;
 		background: #3388ff;
 		border-radius: 40rpx 40rpx 0 0;
-		/* 只有顶部圆角！和原图一模一样 */
 	}
 
-	/* 底部月份文字 */
 	.chart-month {
 		font-size: 32rpx;
 		color: #666;

property-uniapp-project/pageSubPack/payment-list/selectPaymentEntity.vue

@@ -4,7 +4,6 @@
 		<uni-nav-bar title="选择缴费单位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
 		</uni-nav-bar>
 
-
 		<!-- 表单区域 -->
 		<scroll-view class="page" scroll-y="true">
 			<!-- 城市 + 搜索 -->
@@ -20,9 +19,6 @@
 				</uni-data-picker>
 
 				<!-- 搜索框 -->
-				<!-- <view class="search-input">
-					<input v-model="keyword" placeholder="请输入缴费单位名称" placeholder-class="ph" />
-				</view> -->
 				<view class="search-box">
 					<input class="search-input" v-model="searchKey" placeholder="请输入缴费单位名称"
 						placeholder-class="input-placeholder" @input="onSearch" />
@@ -32,11 +28,9 @@
 
 			<view v-if="filterList.length === 0" class="empty-state">
 				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
-				<text class="empty-text">
+				<text class="empty-text">{{ '暂无数据' }}</text>
-					{{ '暂无数据'}}
-				</text>
 			</view>
-			<!-- 	<scroll-view scroll-y class="list-scroll"> -->
+
 			<view v-for="item in filterList">
 				<view class="group-title">{{item.name}}</view>
 				<view class="item" v-for="itemChild in item.children" :key="itemChild.id"
@@ -44,258 +38,207 @@
 					{{ itemChild.name }}
 				</view>
 			</view>
-			<!-- </scroll-view> -->
-
-
 		</scroll-view>
 	</view>
-
-
-
 </template>
 
-<script>
+<script setup>
-	// 引入外部城市数据
+	import {
-	// import Address from '@/static/js/chinaRegions/picker-region.js'
+		ref,
-	export default {
+		onMounted,
-		onReady: function(e) {},
+		computed
-		components: {
 
-		},
+	} from 'vue'
-		computed: {
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
 
-
+	// 响应式数据
-
+	const selectedCity = ref('选择城市')
-			filterList() {
+	const cityValue = ref('')
-				// 没有关键词直接返回全部
+	const alladdress = ref([{
-				if (!this.searchKey) return this.companyList;
+		text: "北京市",
-				const key = this.searchKey.trim().toLowerCase();
+		value: "110000000000",
-				// 过滤第一层 + 第二层
+		children: [{
-				return this.companyList.filter(group => {
+			text: "市辖区",
-					// 过滤子项：只要子项包含关键词就保留
+			value: "110100000000",
-					const hasChild = group.children.some(child =>
+			children: [{
-						child.name.toLowerCase().includes(key)
+					text: "东城区",
-					);
+					value: "110101000000"
-					// 同时支持 分组名 搜索（不需要可删除）
+				},
-					const groupMatch = group.name.toLowerCase().includes(key);
+				{
-
+					text: "西城区",
-					return hasChild || groupMatch;
+					value: "110102000000"
-				}).map(group => {
+				},
-					// 返回过滤后的子项
+				{
-					return {
+					text: "朝阳区",
-						...group,
+					value: "110105000000"
-						children: group.children.filter(child =>
+				},
-							child.name.toLowerCase().includes(key)
+				{
-						)
+					text: "丰台区",
-					};
+					value: "110106000000"
-				});
+				},
-			}
+				{
-
+					text: "石景山区",
-		},
+					value: "110107000000"
-		created() {
+				},
-
+				{
-		},
+					text: "海淀区",
-		onShow() {
+					value: "110108000000"
-
+				},
-		},
+				{
-		onLoad() {
+					text: "门头沟区",
-
+					value: "110109000000"
-		},
+				},
-		mounted() {},
+				{
-
+					text: "房山区",
-		onReady() {
+					value: "110111000000"
-			this.$nextTick(() => {
+				},
-
+				{
-			})
+					text: "通州区",
-		},
+					value: "110112000000"
-		data() {
+				},
-			return {
+				{
-				selectedCity: '选择城市',
+					text: "顺义区",
-				cityValue: '',
+					value: "110113000000"
-				alladdress: [{
+				},
-					text: "北京市",
+				{
-					value: "110000000000",
+					text: "昌平区",
-					children: [{
+					value: "110114000000"
-						text: "市辖区",
+				},
-						value: "110100000000",
+				{
-						children: [{
+					text: "大兴区",
-								text: "东城区",
+					value: "110115000000"
-								value: "110101000000"
+				},
-							},
+				{
-							{
+					text: "怀柔区",
-								text: "西城区",
+					value: "110116000000"
-								value: "110102000000"
+				},
-							},
+				{
-							{
+					text: "平谷区",
-								text: "朝阳区",
+					value: "110117000000"
-								value: "110105000000"
+				},
-							},
+				{
-							{
+					text: "密云区",
-								text: "丰台区",
+					value: "110118000000"
-								value: "110106000000"
+				},
-							},
+				{
-							{
+					text: "延庆区",
-								text: "石景山区",
+					value: "110119000000"
-								value: "110107000000"
-							},
-							{
-								text: "海淀区",
-								value: "110108000000"
-							},
-							{
-								text: "门头沟区",
-								value: "110109000000"
-							},
-							{
-								text: "房山区",
-								value: "110111000000"
-							},
-							{
-								text: "通州区",
-								value: "110112000000"
-							},
-							{
-								text: "顺义区",
-								value: "110113000000"
-							},
-							{
-								text: "昌平区",
-								value: "110114000000"
-							},
-							{
-								text: "大兴区",
-								value: "110115000000"
-							},
-							{
-								text: "怀柔区",
-								value: "110116000000"
-							},
-							{
-								text: "平谷区",
-								value: "110117000000"
-							},
-							{
-								text: "密云区",
-								value: "110118000000"
-							},
-							{
-								text: "延庆区",
-								value: "110119000000"
-							}
-						]
-					}]
-				}, ],
-
-				searchKey: '',
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				showPicker: false,
-				keyword: '',
-
-
-				// 列表：一个大数组
-				companyList: [{
-						id: 7,
-						name: '官方机构',
-						children: [{
-								id: 1,
-								name: "XX市燃气集团有限公司"
-							},
-							{
-								id: 2,
-								name: "XX市供水有限公司"
-							},
-							{
-								id: 3,
-								name: "XX供电服务中心"
-							},
-							{
-								id: 4,
-								name: "XX新能源服务公司"
-							},
-							{
-								id: 5,
-								name: "XX公共事业缴费中心"
-							},
-							{
-								id: 6,
-								name: "XX综合能源服务站"
-							}
-						]
-					},
-					{
-						id: 8,
-						name: '非智享日照提供的服务单位',
-						children: [{
-								id: 9,
-								name: "XX市燃气集团有限公司"
-							},
-							{
-								id: 10,
-								name: "XX能源集团"
-							},
-
-						]
-					}
-
-				]
-
-
-			}
-		},
-
-
-		methods: {
-			selectItem(item) {
-				console.log(item);
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/addPayment',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			onchange(e) {
-				console.log('选中text数组:', e.detail.value)
-				let arr = e.detail.value
-				let selectedCity = ''
-				// 拼接省市区
-				// arr.forEach((item, index) => {
-				// 	if (index != arr.length - 1) {
-				// 		selectedCity = selectedCity + item.text + '/'
-				// 	} else {
-				// 		selectedCity = selectedCity + item.text
-				// 	}
-
-				// })
-				// 只显示城市判断
-				if (arr[1].text == '市辖区') {
-					selectedCity = arr[0].text
-				} else {
-					selectedCity = arr[1].text
 				}
-				this.selectedCity = selectedCity
+			]
-			},
+		}]
+	}])
 
-			// 搜索输入事件
+	const searchKey = ref('')
-			onSearch() {
+	const statusBarHeight = ref(20)
-				// 实时过滤，computed 自动处理
+	const showPicker = ref(false)
-			},
+	const keyword = ref('')
-
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
 
+	const companyList = ref([{
+			id: 7,
+			name: '官方机构',
+			children: [{
+					id: 1,
+					name: "XX市燃气集团有限公司"
+				},
+				{
+					id: 2,
+					name: "XX市供水有限公司"
+				},
+				{
+					id: 3,
+					name: "XX供电服务中心"
+				},
+				{
+					id: 4,
+					name: "XX新能源服务公司"
+				},
+				{
+					id: 5,
+					name: "XX公共事业缴费中心"
+				},
+				{
+					id: 6,
+					name: "XX综合能源服务站"
+				}
+			]
 		},
+		{
+			id: 8,
+			name: '非智享日照提供的服务单位',
+			children: [{
+					id: 9,
+					name: "XX市燃气集团有限公司"
+				},
+				{
+					id: 10,
+					name: "XX能源集团"
+				}
+			]
+		}
+	])
 
+	// 计算属性：搜索过滤
+	const filterList = computed(() => {
+		if (!searchKey.value) return companyList.value
+		const key = searchKey.value.trim().toLowerCase()
 
+		return companyList.value.filter(group => {
+			const hasChild = group.children.some(child =>
+				child.name.toLowerCase().includes(key)
+			)
+			const groupMatch = group.name.toLowerCase().includes(key)
+			return hasChild || groupMatch
+		}).map(group => {
+			return {
+				...group,
+				children: group.children.filter(child =>
+					child.name.toLowerCase().includes(key)
+				)
+			}
+		})
+	})
+
+	// 生命周期
+	onShow(() => {})
+	onMounted(() => {})
+	onReady(() => {})
+
+	// 方法
+	const selectItem = (item) => {
+		console.log(item)
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/addPayment'
+		})
+	}
+
+	const onchange = (e) => {
+		console.log('选中text数组:', e.detail.value)
+		const arr = e.detail.value
+		let city = ''
+		if (arr[1].text === '市辖区') {
+			city = arr[0].text
+		} else {
+			city = arr[1].text
+		}
+		selectedCity.value = city
+	}
+
+	const onSearch = () => {}
+
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
 	}
 </script>
+
 <style lang="scss">
 	page {
 		background: #f9f9f9;
@@ -307,14 +250,12 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
 		background-color: #f9f9f9;
 	}
 
 	.page {
 		flex: 1;
 		overflow-y: auto;
-
 		box-sizing: border-box;
 		background-color: #fff;
 	}
@@ -326,13 +267,11 @@
 		align-items: center;
 	}
 
-	/* 隐藏 uni-data-picker 原生样式，只保留点击功能 */
 	.city-picker {
 		display: block;
 		width: auto;
 	}
 
-	/* 自定义城市选择区域，完美还原「日照市 ▼」 */
 	.city-select {
 		display: flex;
 		align-items: center;
@@ -350,34 +289,28 @@
 
 	.city-text {
 		font-size: 28rpx;
-		/* 匹配截图字体大小 */
 		font-weight: 600;
 		color: #000000;
 		line-height: 1;
 	}
 
-	/* 自定义下拉箭头，1:1 还原截图样式 */
 	.arrow-icon {
 		width: 0;
 		height: 0;
 		border-left: 10rpx solid transparent;
 		border-right: 10rpx solid transparent;
 		border-top: 16rpx solid #333333;
-		/* 纯黑实心三角，和截图一致 */
 		margin-top: 4rpx;
 	}
 
-
-	/* 搜索框 */
 	.search-box {
 		display: flex;
 		width: 100%;
 		align-items: center;
 		background-color: #f3f4f6;
 		border-radius: 20rpx;
-		/* margin: 0rpx 30rpx 20rpx 30rpx; */
 		padding: 0 30rpx;
-		margin: 10rpx 0px 0px10rpx;
+		margin: 10rpx 0px 0px 10rpx;
 		height: 70rpx;
 	}
 
@@ -399,9 +332,6 @@
 		color: #999;
 	}
 
-	/* 列表 */
-	.list-scroll {}
-
 	.group-title {
 		padding: 20rpx 40rpx;
 		font-size: 28rpx;
@@ -430,7 +360,6 @@
 		height: 46px;
 	}
 
-	/* 空状态 */
 	.empty-state {
 		display: flex;
 		flex-direction: column;

property-uniapp-project/pages.json

@@ -8,7 +8,6 @@
 				"navigationStyle": "custom"
 			}
 		},
-
 		{
 			"path": "pages/index/index",
 			"style": {