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

2026-04-30 08:24:22 +08:00
parent d569bbc8e1
commit 2c528b7973
19 changed files with 2675 additions and 2553 deletions
--- a/property-uniapp-project/pageSubPack/payment-list/addHydropower.vue
+++ b/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"
-							@click="scanCode"></image>
+						<image class="scanTheCodeIconStyle"
+							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>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref,
+		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
+	}

-
-		},
-		created() {
-
-		},
-		onShow() {
-
-		},
-
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
-
+	// 扫码
+	const scanCode = async () => {
+		try {
+			uni.showLoading({
+				title: '扫码中...',
+				mask: true
 			})
-		},
-		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)
+				}
 			}
-		},
-
-
-		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 handleProtocol = () => {

+	}
+	// 跳转成功页
+	const goNext = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/addPaymentSuccess'
+		})
+	}

+	// 返回
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
 	}
 </script>
 <style lang="scss">
--- a/property-uniapp-project/pageSubPack/payment-list/addPayment.vue
+++ b/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'">
-						></image>
+ 							:src="paymentType=='燃气'?'http://47.104.199.163:9090/images/propertyImgs/gas.png':'http://47.104.199.163:9090/images/propertyImgs/heating.png'">
+ 							></image>
 					</view>
 					<text class="header-title">{{paymentType+'费'}}</text>
 				</view>
@@ -87,130 +87,109 @@

 </template>

- <script>
- 	export default {
- 		onReady: function(e) {},
- 		components: {
+ <script setup>
+ 	import {
+ 		ref,
+ 		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;
- 				return statusBarHeight;
- 			},
+ 	// 勾选协议
+ 	const handleAgreeChange = (e) => {
+ 		isAgree.value = e.detail.value.length > 0
+ 	}

+ 	// 协议链接点击
+ 	const handleProtocol = () => {
+ 		uni.navigateTo({})
+ 	}

- 		},
- 		created() {
- 			let statusBarObj = this.getPhoneInfo()
- 			this.statusBarHeight = statusBarObj.statusBarHeight
- 		},
- 		onShow() {
-
- 		},
-
- 		mounted() {},
-
- 		onReady() {
- 			this.$nextTick(() => {
-
+ 	// 提交
+ 	const handleSubmit = () => {
+ 		if (!userNo.value) {
+ 			uni.showToast({
+ 				title: '请输入户号',
+ 				icon: 'none'
 			})
- 		},
- 		data() {
- 			return {
- 				/* 设定状态栏默认高度 */
- 				statusBarHeight: 20,
- 				paymentType: uni.getStorageSync('addPaymentType'),
- 				userNo: '',
- 				isAgree: false,
- 				showPopup: false, // 控制弹窗显示
+ 			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)
+ 				}
 			}
- 		},
+ 		})
+ 	}

- 		methods: {
- 			handleAgreeChange(e) {
- 				// e.detail.value 是数组，有值 = 选中，空 = 未选中
- 				this.isAgree = e.detail.value.length > 0
- 			},
- 			// 处理协议链接点击
- 			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 goNext = () => {
+ 		uni.redirectTo({
+ 			url: '/pageSubPack/payment-list/addPaymentSuccess'
+ 		})
+ 	}

+ 	// 切换（注释保留）
+ 	const goToChange = () => {
+ 		// uni.redirectTo({
+ 		//   url: '/pageSubPack/payment-list/selectPaymentEntity'
+ 		// })
+ 	}

+ 	// 返回
+ 	const goBack = () => {
+ 		uni.redirectTo({
+ 			url: '/pageSubPack/payment-list/paymentIndex'
+ 		})
 	}
 </script>
 <style lang="scss">
--- a/property-uniapp-project/pageSubPack/payment-list/addPaymentSuccess.vue
+++ b/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>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed

-		},
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'

-		computed: {
-
-			 
-
-
-		},
-		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: () => {}
-				});
-			},
-
-		},
+	// 响应式数据
+	const statusBarHeight = ref(20)
+	const paymentType = ref(uni.getStorageSync('addPaymentType'))

+	// 生命周期
+	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;
 	}
--- a/property-uniapp-project/pageSubPack/payment-list/arrearsPayment.vue
+++ b/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">
-								<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>
+
 							<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>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref
+	} 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() {},
-
-		onReady() {
-			this.$nextTick(() => {
+	// 返回
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
+	}

+	// 立即缴费
+	const handlePay = () => {
+		if (!payAmount.value || Number(payAmount.value) <= 0) {
+			uni.showToast({
+				title: '请输入正确的缴费金额',
+				icon: 'none'
 			})
-		},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				outstandingPayment: true, //是否欠费
-				arrearsPayment: uni.getStorageSync('arrearsPayment'),
-				currentStep: 1, // 1: 详情页 2: 密码弹窗 3: 成功页
-				payAmount: "1680.00", // 缴费金额
-				password: "", // 输入的密码
-				showBankList: false, // 是否显示银行卡列表
-				arrearsAmount: "21.21",
-				payNum: '',
-				// 银行卡列表
-				bankList: [{
-						id: 1,
-						name: "建设银行储蓄卡(8888)",
-						icon: "/static/bank-logo.png"
-					},
-					{
-						id: 2,
-						name: "工商银行储蓄卡(6666)",
-						icon: "/static/icbc-logo.png"
-					},
-					{
-						id: 3,
-						name: "招商银行储蓄卡(9999)",
-						icon: "/static/cmb-logo.png"
-					}
-				],
-				// 默认选中的银行卡
-				selectedBank: {
-					id: 1,
-					name: "建设银行储蓄卡(8888)",
-					icon: "/static/bank-logo.png"
-				}
+			return
+		}
+		requestPayOrder()
+		// 原支付注释
+		// currentStep.value = 2
+	}
+	// 统一下单后后端返回的支付参数
+	const payInfo = ref({
+		appId: '', // 公众号/小程序ID
+		timeStamp: '', // 时间戳
+		nonceStr: '', // 随机串
+		package: '', // 数据包 如 prepay_id=xxx
+		signType: 'MD5', // 签名方式
+		paySign: '' // 签名
+	})
+
+	// 1. 先请求后端接口生成预支付订单
+	const requestPayOrder = async () => {
+		try {
+			uni.showLoading({
+				title: '发起支付中'
+			})
+
+			const res = await getMyHouseList({
+				deviceNo: '设备号',
+				money: 0.01, // 金额
+				openid: '用户openid'
+			})
+
+
+			uni.hideLoading()
+
+			// 后端返回支付所需参数
+			const data = res.data
+			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: {
-			handleAutoFill() {
-				this.payNum = this.arrearsAmount;
-				uni.vibrateShort({
-					type: "light"
-				});
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			// 点击立即缴费
-			handlePay() {
-				if (!this.payAmount || Number(this.payAmount) <= 0) {
+			// 2. 调起微信支付
+			wx.requestPayment({
+				...payInfo.value,
+				success(res) {
+					console.log('支付成功', res)
 					uni.showToast({
-						title: "请输入正确的缴费金额",
-						icon: "none"
-					});
-					return;
+						title: '支付成功'
+					})
+					currentStep.value == 3
+				},
+				fail(err) {
+					console.log('支付失败', err)
+					uni.showToast({
+						title: '支付取消或失败',
+						icon: 'none'
+					})
 				}
-				this.currentStep = 2;
-			},
+			})

-			// 关闭密码弹窗
-			closePasswordModal() {
-				this.currentStep = 1;
-				this.password = "";
-				this.showBankList = false;
-			},
+		} catch (err) {
+			uni.hideLoading()
+			console.log('请求异常', err)
+			uni.showToast({
+				title: '支付请求异常',
+				icon: 'none'
+			})
+		}
+	}
+	// 关闭密码弹窗
+	const closePasswordModal = () => {
+		currentStep.value = 1
+		password.value = ''
+		showBankList.value = false
+	}

-			// 选择银行卡
-			selectBank(item) {
-				this.selectedBank = item;
-				this.showBankList = false;
-			},
+	// 选择银行卡
+	const selectBank = (item) => {
+		selectedBank.value = item
+		showBankList.value = false
+	}

-			// 输入密码
-			inputPassword(num) {
-				if (this.password.length >= 6) return;
-				this.password += num.toString();
+	// 输入密码
+	const inputPassword = (num) => {
+		if (password.value.length >= 6) return
+		password.value += num.toString()

-				// 密码满6位，自动提交
-				if (this.password.length === 6) {
-					this.handleConfirmPay();
-				}
-			},
+		// 满6位自动提交
+		if (password.value.length === 6) {
+			handleConfirmPay()
+		}
+	}

-			// 删除密码
-			deletePassword() {
-				this.password = this.password.slice(0, -1);
-			},
+	// 删除密码
+	const deletePassword = () => {
+		password.value = password.value.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: () => {}
-				});
-			}
-
-		},
+	// 确认支付（模拟）
+	const handleConfirmPay = () => {
+		uni.showLoading({
+			title: '支付中...',
+			mask: true
+		})

+		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">
--- a/property-uniapp-project/pageSubPack/payment-list/noArrearsPayment.vue
+++ b/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>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+import {
+		ref,
+		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'
+	})
+}

-
-		},
-		created() {
-
-		},
-		onShow() {
-
-		},
-
-		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: () => {}
-				});
-			}
-
-		},
-
-
-	}
+// 以下为原代码保留的方法（未使用但保持功能完整）
+const handlePay = () => {}
+const closePasswordModal = () => {}
+const selectBank = () => {}
+const inputPassword = () => {}
+const deletePassword = () => {}
+const handleConfirmPay = () => {}
+const handleBackToList = () => {}
 </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;
--- a/property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue
+++ b/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 v-if="paymentList.length === 0" class="empty-state">
+				<view class="bill-list" v-if="paymentList.length != 0">
+					<!-- <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>
-	export default {
-		onReady: function(e) {
-			// console.log('onReady')
+<script setup>
+	import {
+		ref,
+		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() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				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: "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"
+		}
+	])

+	// 生命周期
+	onReady(() => {})
+	onShow(() => {})
+	onLoad(() => {})

-		methods: {
-			// 跳转到缴费
-			goToBill(item) {
-				uni.setStorageSync('arrearsPayment', item.name)
-				if (item.status == '已欠费') {
-					uni.redirectTo({
-						url: '/pageSubPack/payment-list/arrearsPayment',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} 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 goToBill = (item) => {
+		uni.setStorageSync('arrearsPayment', item.name)
+		if (item.status == '已欠费') {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/arrearsPayment'
+			})
+		} else {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/noArrearsPayment'
+			})
+		}
+	}

-			},
-			goBack() {
-				console.log(uni.getStorageSync('sourcePage'));
-				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 goToRecord = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentRecord'
+		})
+	}

+	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 {
-		/* padding:30rpx; */
-	}
+	.container {}

-	/* ===================== 欠费列表 ===================== */
 	.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;
 	}

--- a/property-uniapp-project/pageSubPack/payment-list/paymentRecord.vue
+++ b/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>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref,
+		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: {
-
-
-			// 自动按月份分组
-			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)
-			}
+		{
+			month: '2月',
+			price: 130
 		},
-		created() {
-
+		{
+			month: '3月',
+			price: 220
 		},
-		onShow() {
-
+		{
+			month: '4月',
+			price: 250
 		},
-
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
-
-				this.drawLineChart();
-			})
+		{
+			month: '5月',
+			price: 100
 		},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				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]
-				},
+		{
+			month: '6月',
+			price: 130
+		}
+	])

-				billList: [
-					// 5月数据
-					{
-						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",
-					},
+	const maxPrice = ref(250)
+	const barMaxHeight = ref(300)

-					// 6月数据
-					{
-						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",
-					}
-				]
+	const chart = ref({
+		months: ['1月', '2月', '3月', '4月', '5月', '6月'],
+		values: [100, 140, 230, 100, 130, 100]
+	})

-
-			}
+	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: {
-			// 计算每个柱子自适应高度（按金额比例换算）
-			barHeight(price) {
-				const height = (price / this.maxPrice) * this.barMaxHeight
-				return `${height}rpx`
-			},
-			drawLineChart() {
-				const ctx = uni.createCanvasContext('chargeChart', this)
-				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)
+	// 计算属性 —— 月份分组
+	const monthGroups = computed(() => {
+		let map = {}
+		billList.value.forEach(bill => {
+			if (!map[bill.month]) {
+				map[bill.month] = {
+					month: bill.month,
+					total: 0,
+					list: []
 				}
-				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) => {
-					let x = 40 + i * stepX
-					ctx.fillText(m, x, h - 20)
-				})
+	// 生命周期
+	onShow(() => {})
+	onMounted(() => {})
+	onReady(() => {
+		drawLineChart()
+	})

-				// 绘制折线
-				let points = []
-				this.chart.values.forEach((val, i) => {
-					let x = 40 + i * stepX
-					let y = padding + (h - padding * 2) * (1 - val / maxVal)
-					points.push({
-						x,
-						y
-					})
-				})
+	// 方法
+	const barHeight = (price) => {
+		const height = (price / maxPrice.value) * barMaxHeight.value
+		return `${height}rpx`
+	}

-				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()
+	const drawLineChart = () => {
+		// #ifdef MP-WEIXIN
+		const ctx = uni.createCanvasContext('chargeChart')
+		// #endif
+		// #ifndef MP-WEIXIN
+		const ctx = uni.createCanvasContext('chargeChart', this)
+		// #endif

-				// 绘制圆点
-				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()
+		const canvasPage = uni.getSystemInfoSync();
+		const w = canvasPage.windowWidth - 30;
+		const h = canvasPage.windowHeight * 0.3;
+		const padding = 40
+		const stepX = (w - 60) / (chart.value.months.length - 1)
+		const maxVal = 250

-					ctx.setFillStyle('#4080FF')
-					ctx.setFontSize(13)
-					ctx.fillText(this.chart.values[i] + '元', p.x, p.y - 10)
-				})
+		ctx.setFillStyle('#999')
+		ctx.setFontSize(12)
+		ctx.setTextAlign('center')

-				ctx.draw()
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
+		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()

-		},
+		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;
--- a/property-uniapp-project/pageSubPack/payment-list/selectPaymentEntity.vue
+++ b/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>
+				<text class="empty-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>
-	// 引入外部城市数据
-	// import Address from '@/static/js/chinaRegions/picker-region.js'
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed

-		},
-		computed: {
+	} from 'vue'
+	import {
+		onShow,
+		onReady,
+		onReachBottom,
+		onLoad,
+		onUnload,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'

-
-
-			filterList() {
-				// 没有关键词直接返回全部
-				if (!this.searchKey) return this.companyList;
-				const key = this.searchKey.trim().toLowerCase();
-				// 过滤第一层 + 第二层
-				return this.companyList.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)
-						)
-					};
-				});
-			}
-
-		},
-		created() {
-
-		},
-		onShow() {
-
-		},
-		onLoad() {
-
-		},
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
-
-			})
-		},
-		data() {
-			return {
-				selectedCity: '选择城市',
-				cityValue: '',
-				alladdress: [{
-					text: "北京市",
-					value: "110000000000",
-					children: [{
-						text: "市辖区",
-						value: "110100000000",
-						children: [{
-								text: "东城区",
-								value: "110101000000"
-							},
-							{
-								text: "西城区",
-								value: "110102000000"
-							},
-							{
-								text: "朝阳区",
-								value: "110105000000"
-							},
-							{
-								text: "丰台区",
-								value: "110106000000"
-							},
-							{
-								text: "石景山区",
-								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
+	// 响应式数据
+	const selectedCity = ref('选择城市')
+	const cityValue = ref('')
+	const alladdress = ref([{
+		text: "北京市",
+		value: "110000000000",
+		children: [{
+			text: "市辖区",
+			value: "110100000000",
+			children: [{
+					text: "东城区",
+					value: "110101000000"
+				},
+				{
+					text: "西城区",
+					value: "110102000000"
+				},
+				{
+					text: "朝阳区",
+					value: "110105000000"
+				},
+				{
+					text: "丰台区",
+					value: "110106000000"
+				},
+				{
+					text: "石景山区",
+					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"
 				}
-				this.selectedCity = selectedCity
-			},
+			]
+		}]
+	}])

-			// 搜索输入事件
-			onSearch() {
-				// 实时过滤，computed 自动处理
-			},
-
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
+	const searchKey = ref('')
+	const statusBarHeight = ref(20)
+	const showPicker = ref(false)
+	const keyword = ref('')

+	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;