添加物业费支付页面、活动状态报名显示、车位参数

2026-06-16 08:49:30 +08:00
parent 5040564655
commit bea0077272
8 changed files with 719 additions and 65 deletions
--- a/property-uniapp-project/pageSubPack/activity-list/activityList.vue
+++ b/property-uniapp-project/pageSubPack/activity-list/activityList.vue
@@ -130,7 +130,7 @@ import { getActivityList,getMyActivityList} from '../api/api.js'

 // ===================== 响应式数据 =====================
 const activeTab = ref('list') // 'list' 或 'my'
-const myFilter = ref('') // 我的活动筛选条件：''审核中, '0'未开始, '1'进行中, '2'已结束
+const myFilter = ref('') // 我的活动筛选条件：''全部, '0'未开始, '1'进行中, '2'已结束
 const isLoading = ref(false)
 const hasMoreData = ref(true)
 const currentPage = ref(1)
@@ -241,7 +241,7 @@ const getActivityListData = async (pageNum = 1) => {
 			if (pageNum === 1) displayedActivities.value = []
 		}
 	} catch (err) {
-		uni.showToast({ title: "网络异常", icon: 'none' })
+		uni.showToast({ title: err.msg || "网络异常", icon: 'none' })
 		if (pageNum === 1) displayedActivities.value = []
 	} finally {
 		isLoading.value = false
@@ -285,7 +285,7 @@ const getMyActivityListData = async (pageNum = 1) => {
 			if (pageNum === 1) displayedActivities.value = []
 		}
 	} catch (err) {
-		uni.showToast({ title: '网络异常', icon: 'none' })
+		uni.showToast({ title: err.msg || '网络异常', icon: 'none' })
 		if (pageNum === 1) displayedActivities.value = []
 	} finally {
 		isLoading.value = false
--- a/property-uniapp-project/pageSubPack/my/addCar.vue
+++ b/property-uniapp-project/pageSubPack/my/addCar.vue
@@ -137,7 +137,7 @@

 		} catch (err) {
 			uni.showToast({
-				title: `${err}`,
+				title: err.msg || '网络异常',
 				icon: 'none'
 			})
 			console.error('列表接口报错：', err)
@@ -237,8 +237,8 @@
 			carModel: formData.value.carModel,
 			carColor: formData.value.carColor,
 			carImageUrl: imageUrl,
-			villageId:uni.getStorageSync('currentVillageId')
-			// residentId: uni.getStorageSync('userId')
+			// villageId:uni.getStorageSync('currentVillageId')
+			residentId: uni.getStorageSync('userId')
 			
 			
 		}
--- a/property-uniapp-project/pageSubPack/payment-list/addHydropower.vue
+++ b/property-uniapp-project/pageSubPack/payment-list/addHydropower.vue
@@ -102,33 +102,35 @@
 	onMounted(() => {})

 	// 扫码
-	const scanCode = async () => {
-		try {
-			uni.showLoading({
-				title: '扫码中...',
-				mask: true
-			})
+	const scanCode = () => {
+		// uni.showLoading({
+		// 	title: '扫码中...',
+		// 	mask: true
+		// })

-			const res = await uni.scanCode({
-				onlyFromCamera: false,
-				scanType: ['qrCode', 'barCode']
-			})
-
-			// 扫码成功，赋值
-			deviceNo.value = res.result
-			uni.hideLoading()
-			uni.showToast({
-				title: '扫码成功',
-				icon: 'success'
-			})
-		} catch (err) {
-			uni.hideLoading()
-			console.log('扫码失败', err)
-			uni.showToast({
-				title: '扫码取消/失败',
-				icon: 'none'
-			})
-		}
+		uni.scanCode({
+			onlyFromCamera: false,
+			scanType: ['qrCode', 'barCode'],
+			success: (res) => {
+				// uni.hideLoading()
+				console.log('扫码成功', res)
+				// 过滤模拟器/调试模式返回的 mock 数据
+				if (!res.result || res.result.toUpperCase() === 'TEST') {
+					uni.showToast({ title: '扫码识别失败，请手动输入设备号', icon: 'none' })
+					return
+				}
+				deviceNo.value = res.result
+				uni.showToast({ title: '扫码成功', icon: 'success' })
+			},
+			fail: (err) => {
+				// uni.hideLoading()
+				console.log('扫码失败', err)
+				uni.showToast({ title: '扫码取消/失败', icon: 'none' })
+			},
+			complete: () => {
+				// uni.hideLoading()
+			}
+		})
 	}

 	// 提交缴费
--- 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="paymentItem.type || '缴费'" left-icon="left" @clickLeft="goBack"
+		<uni-nav-bar :title="switchStatus(paymentItem.type) || '缴费'" left-icon="left" @clickLeft="goBack"
 			backgroundColor="transparent" :border="false">
 		</uni-nav-bar>

@@ -76,7 +76,7 @@

 					<!-- 提示文案 -->
 					<view class="desc">
-						成功缴纳{{ paymentItem.type || '' }}费用 ¥{{ payNum || payAmount }}元
+						成功缴纳{{ switchStatus(paymentItem.type) || '' }}费用 ¥{{ payNum || payAmount }}元
 					</view>


@@ -187,7 +187,7 @@
 				userId: userId,
 				channel: 'resident',
 				title: '缴费成功',
-				content: `您已成功缴纳${paymentItem.type || ''}费用 ¥${payNum.value || payAmount.value}元`
+				content: `您已成功缴纳${switchStatus(paymentItem.type) || ''}费用 ¥${payNum.value || payAmount.value}元`
 			}).catch(err => {
 				console.log('推送发送失败', err)
 			})
@@ -200,6 +200,16 @@
 			url: '/pageSubPack/payment-list/paymentIndex'
 		});
 	}
+
+	// 类型码转中文名展示
+	const switchStatus = (type) => {
+		const typeMap = {
+			'0': '物业费',
+			'1': '车位费',
+			'2': '垃圾处理费'
+		}
+		return typeMap[type] || type
+	}
 </script>
 <style lang="scss">
 	page {
--- a/property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue
+++ b/property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue
@@ -30,10 +30,12 @@
 				<!-- 已缴费/欠费列表 -->
 				<view class="bill-list" v-if="detailslist.length != 0">
 					<view class="bill-item" @click="goToBill(item)" v-for="item,index in detailslist" :key="index">
-						<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png"
-							v-if="item.type=='水费'"></image>
-						<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
-							v-if="item.type=='电费'"></image>
+						<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/property.png"
+							v-if="item.type=='0'"></image>
+						<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/parkingIcon.png"
+							v-if="item.type=='1'"></image>
+							<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/垃圾处理2x.png"
+								v-if="item.type=='2'"></image>
 						<view class="bill-info">
 							<view class="bill-title">{{switchStatus(item.type)}}
 								<view class="bill-status debt" v-if="item.balance<0">已欠费</view>
@@ -183,7 +185,7 @@
 				title: err.msg || '网络异常',
 				icon: 'none'
 			})
-			console.error('列表接口报错：', err)
+			// console.error('列表接口报错：', err)
 		}
 	}
 	onShow(() => {
@@ -216,10 +218,10 @@
 			paymentList.value = data
 		} catch (err) {
 			uni.showToast({
-				title: `${err}`,
+				title: err.msg || '网络异常',
 				icon: 'none'
 			})
-			console.error('列表接口报错：', err)
+			// console.error('列表接口报错：', err)
 		} finally {

 		}
@@ -227,18 +229,19 @@
 	// 方法
 	const goToBill = (item) => {
 		uni.setStorageSync('arrearsPayment', item)
-		// if (item.balance < 0) {
-		// 	uni.redirectTo({
-		// 		url: '/pageSubPack/payment-list/arrearsPayment'
-		// 	})
-		// } else {
-		// 	uni.redirectTo({
-		// 		url: '/pageSubPack/payment-list/noArrearsPayment'
-		// 	})
-		// }
-		uni.redirectTo({
-			url: '/pageSubPack/payment-list/arrearsPayment'
-		})
+		
+		const type = String(item.type || '')
+		// 物业费、车位费、垃圾处理费走物业费缴纳页；水费、电费走欠费缴纳页
+		const isProperty = ['物业费', '车位费', '垃圾处理费', '垃圾费', '0', '1', '2'].includes(type)
+		if (isProperty) {
+			uni.redirectTo({
+				url: `/pageSubPack/payment-list/propertyFeePayment?amount=${item.amount || ''}`
+			})
+		} else {
+			uni.redirectTo({
+				url: '/pageSubPack/payment-list/arrearsPayment'
+			})
+		}
 	}


@@ -277,27 +280,26 @@
 	
 	
 	
-// Zy --------------
+
 	const detailslist = ref([])
 	const getBillDetails = ()=>{
 		getTopUpDetails({
 			userId:uni.getStorageSync('userId'),
 			villageId:uni.getStorageSync('currentVillageId'),
 		}).then(res=>{
-			console.log(res)
+			// console.log(res)
 			detailslist.value = res.data;
 		})
 	}
-	const switchStatus= (type)=>{
-		if(type === '0'){
-			return "物业费"
-		}else if(type === '1'){
-			return '车位费'
-		}else if(type === '2'){
-			return '垃圾处理费'
+	const switchStatus = (type) => {
+		const typeMap = {
+			'0': '物业费',
+			'1': '车位费',
+			'2': '垃圾处理费'
 		}
+		return typeMap[type] || type
 	}
-	// Zy --------------
+
 </script>

 <style lang="scss">
--- a/property-uniapp-project/pageSubPack/payment-list/propertyFeePayment.vue
+++ b/property-uniapp-project/pageSubPack/payment-list/propertyFeePayment.vue
@@ -0,0 +1,633 @@
+<template>
+	<view class="contentStyle" style="">
+		<view class="status-bar"></view>
+		<uni-nav-bar :title="switchStatus(paymentItem.type) || '缴费'" left-icon="left" @clickLeft="goBack"
+			backgroundColor="transparent" :border="false">
+		</uni-nav-bar>
+
+
+		<!-- 表单区域 -->
+		<scroll-view class="page" scroll-y="true">
+
+			<view class="container">
+				<!-- 1. 缴费详情 -->
+				<view v-if="currentStep === 1" class="pay-page">
+					<!-- 物业费缴费 -->
+					<!-- 金额展示 -->
+					<view class="amount-section" v-if="outstandingPayment">
+						<text class="amount-text"
+							:class="{ 'outstandingPaymentClass':outstandingPayment }">{{outstandingPayment?'-¥'+payAmount:'¥'+payAmount}}</text>
+					</view>
+					<view class="amount-section" v-else>
+						<text class="amount-text paymentClass">{{'¥'+payAmount}}</text>
+					</view>
+					<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
+					<!-- 缴费信息 -->
+					<view class="info-section" style="">
+
+						<view>		
+							<view class="info-item">
+								<text class="info-label">缴费名称:</text>
+								<text class="info-value">{{ paymentItem.name || '-' }}</text>
+							</view>
+						
+						</view>
+					</view>
+				</view>
+
+				<!-- 2. 缴费成功页 -->
+				<view class="container" v-if="currentStep==2">
+					<!-- 成功图标 -->
+					<view class="success-icon">
+						<text class="icon-check">✓</text>
+					</view>
+
+					<!-- 主标题 -->
+					<view class="title">缴费成功</view>
+
+					<!-- 提示文案 -->
+					<view class="desc">
+						成功缴纳{{ switchStatus(paymentItem.type) || '' }}费用 ¥{{ payNum || payAmount }}元
+					</view>
+
+
+				</view>
+			</view>
+
+
+		</scroll-view>
+		<!-- 立即缴费按钮 -->
+		<view class="btn-section" v-if="currentStep === 1">
+			<button class="pay-btn" @click="handlePay">立即缴费</button>
+		</view>
+		<!-- 返回按钮 -->
+		<view class="btn-section" v-if="currentStep === 2">
+			<button class="pay-btn" @click="handleBackToList">返回生活缴费</button>
+		</view>
+	</view>
+
+
+
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive
+	} from 'vue'
+	import {
+		onShow,
+		onLoad
+	} from '@dcloudio/uni-app'
+
+	import {
+		getPushSingle
+	} from '/pageSubPack/api/api.js'
+
+	// 响应式数据
+	const outstandingPayment = ref(true)
+	const storageValue = uni.getStorageSync('arrearsPayment')
+	const paymentItem = reactive(typeof storageValue === 'object' && storageValue !== null ? storageValue : {})
+	const currentStep = ref(1)
+	const payAmount = ref('0.00')
+	const arrearsAmount = ref('0.00')
+	const payNum = ref('')
+
+	// 页面加载时初始化数据
+	onLoad((options) => {
+		initPaymentData()
+		// 若从缴费列表带入 amount，则优先展示该金额
+		if (options && options.amount) {
+			const amount = Number(options.amount) || 0
+			payAmount.value = amount
+			arrearsAmount.value = amount.toFixed(2)
+			outstandingPayment.value = amount > 0
+		}
+	})
+
+	// 从支付收银台返回时检查支付结果
+	onShow(() => {
+		const paySuccess = uni.getStorageSync('paySuccess')
+		if (paySuccess) {
+			uni.removeStorageSync('paySuccess')
+			currentStep.value = 2
+		}
+	})
+
+	// 初始化缴费数据
+	const initPaymentData = () => {
+		if (paymentItem) {
+			arrearsAmount.value = Math.abs(paymentItem.balance || 0).toFixed(2)
+			payAmount.value = Math.abs(paymentItem.balance || 0)
+			outstandingPayment.value = paymentItem.balance < 0
+		}
+	}
+
+	// 返回
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		});
+	}
+
+		// 立即缴费 — 跳转到支付收银台选择支付方式
+	const handlePay = () => {
+		// 优先使用用户输入金额，否则使用页面展示的应缴金额
+		const amount = payAmount.value
+		uni.setStorageSync('payData', {
+			amount: String(amount),
+			deviceCode: paymentItem.deviceCode,
+			type: paymentItem.type,
+			name: paymentItem.name,
+			fullAddress: paymentItem.fullAddress
+		})
+		uni.navigateTo({ url: '/pageSubPack/payment-list/yinlianPayTn' })
+	}
+
+	// 缴费成功推送通知
+	const sendPaySuccessPush = () => {
+		const userId = uni.getStorageSync('userId')
+		if (userId) {
+			getPushSingle({
+				userId: userId,
+				channel: 'resident',
+				title: '缴费成功',
+				content: `您已成功缴纳${switchStatus(paymentItem.type) || ''}费用 ¥${payNum.value || payAmount.value}元`
+			}).catch(err => {
+				console.log('推送发送失败', err)
+			})
+		}
+	}
+
+	// 返回缴费列表
+	const handleBackToList = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		});
+	}
+
+	// 类型码转中文名展示
+	const switchStatus = (type) => {
+		const typeMap = {
+			'0': '物业费',
+			'1': '车位费',
+			'2': '垃圾处理费'
+		}
+		return typeMap[type] || type
+	}
+</script>
+<style lang="scss">
+	page {
+		background-color: #f9f9f9;
+	}
+</style>
+
+<style scoped>
+	.contentStyle {
+		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 */
+		;
+	}
+
+
+	/* 1. 物业费详情页 */
+	.pay-page {
+		width: 100%;
+		/* min-height: 100vh; */
+		/* background-color: #fff; */
+	}
+
+	.amount-section {
+		padding: 60rpx 0;
+		text-align: center;
+	}
+
+	.amount-text {
+		font-size: 56rpx;
+		font-weight: 600;
+	}
+
+	.outstandingPaymentClass {
+		color: #E34D59;
+	}
+
+	.paymentClass {
+		color: #00aaff;
+	}
+
+	.info-section {
+		padding-top: 20rpx;
+		/* margin-bottom: 40rpx; */
+
+	}
+
+	.info-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 80rpx;
+	}
+
+	.info-label {
+		font-size: 30rpx;
+		color: #666;
+		 flex-shrink: 0;
+		  /* 强制单行 */
+		  white-space: nowrap;
+		  overflow: hidden;
+		  text-overflow: ellipsis;
+		  /* 右侧留间距，避免和内容紧贴 */
+		  margin-right: 0.5rem;
+	}
+
+	.info-value {
+		font-size: 30rpx;
+		color: #333;
+		font-weight: 600;
+		flex: 1;
+		/* text-align: right; */
+	}
+
+	.info-payAmountItem {
+		height: 100rpx;
+		line-height: 100rpx;
+		margin-bottom: 60rpx;
+	}
+
+	.info-payAmount {
+		font-size: 50rpx;
+		color: #333;
+		font-weight: 600;
+
+	}
+
+	.input-section {
+		/* padding: 030rpx; */
+
+	}
+
+	.amount-input {
+		width: 100%;
+		height: 100rpx;
+		font-size: 32rpx;
+		line-height: 100rpx;
+		border: none;
+		outline: none;
+		margin-right: 10rpx;
+	}
+
+	.btn-section {
+		padding: 20rpx 30rpx 40rpx;
+		display: flex;
+		gap: 20rpx;
+	}
+
+	.pay-btn {
+		width: 100%;
+		height: 100rpx;
+		line-height: 100rpx;
+		background-color: #007aff;
+		color: #fff;
+		border-radius: 16rpx;
+		font-size: 32rpx;
+		border: none;
+		outline: none;
+	}
+
+	/* 2. 支付密码弹窗 */
+	.modal-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 999;
+		display: flex;
+		align-items: flex-end;
+
+	}
+
+	.password-modal {
+		width: 100%;
+		background-color: #fff;
+		border-radius: 24rpx 24rpx 0 0;
+		padding-bottom: 40rpx;
+	}
+
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 100rpx;
+		padding: 0 30rpx;
+		border-bottom: 2rpx solid #f0f0f0;
+	}
+
+	.close-icon {
+		font-size: 44rpx;
+		width: 80rpx;
+		height: 100rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.modal-title {
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #000;
+	}
+
+	.header-right {
+		width: 80rpx;
+	}
+
+	.pay-info {
+		padding: 40rpx 30rpx;
+		text-align: center;
+	}
+
+	.merchant-name {
+		display: block;
+		font-size: 32rpx;
+		color: #333;
+		margin-bottom: 20rpx;
+	}
+
+	.pay-amount {
+		font-size: 64rpx;
+		font-weight: 500;
+		color: #000;
+	}
+
+	.pay-way {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 30rpx;
+		border-bottom: 2rpx solid #f0f0f0;
+	}
+
+	.way-label {
+		font-size: 30rpx;
+		color: #666;
+	}
+
+	.way-content {
+		display: flex;
+		align-items: center;
+	}
+
+	.bank-icon {
+		width: 32rpx;
+		height: 32rpx;
+		margin-right: 6rpx;
+	}
+
+	.bank-name {
+		font-size: 30rpx;
+		color: #333;
+		margin-right: 16rpx;
+	}
+
+	.arrow-icon {
+		font-size: 28rpx;
+		color: #999;
+	}
+
+	/* 银行卡列表 */
+	.bank-list {
+		padding: 030rpx;
+		border-bottom: 2rpx solid #f0f0f0;
+	}
+
+	.bank-item {
+		display: flex;
+		align-items: center;
+		height: 100rpx;
+		border-bottom: 2rpx solid #f5f5f5;
+	}
+
+	.bank-item:last-child {
+		border-bottom: none;
+	}
+
+	.bank-item-icon {
+		width: 48rpx;
+		height: 48rpx;
+		margin-right: 20rpx;
+	}
+
+	.bank-item-name {
+		flex: 1;
+		font-size: 30rpx;
+		color: #333;
+	}
+
+	.check-icon {
+		font-size: 36rpx;
+		color: #007aff;
+	}
+
+	/* 密码输入框 */
+	.password-input {
+		display: flex;
+		justify-content: space-between;
+		padding: 40rpx 30rpx;
+	}
+
+	.password-item {
+		width: 100rpx;
+		height: 100rpx;
+		/* border: 2rpx solid #dcdcdc; */
+		background-color: #efefef;
+		border-radius: 8rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.password-dot {
+		width: 24rpx;
+		height: 24rpx;
+		background-color: #000;
+		border-radius: 50%;
+	}
+
+	/* 数字键盘 */
+	.keyboard {
+		width: 100%;
+	}
+
+	.keyboard-row {
+		display: flex;
+	}
+
+	.keyboard-item {
+		flex: 1;
+		height: 54px;
+		line-height: 54px;
+		text-align: center;
+		font-size: 48rpx;
+		color: #000;
+		border: 2rpx solid #f0f0f0;
+		background-color: #fff;
+	}
+
+	.keyboard-item:active {
+		background-color: #e5e5e5;
+	}
+
+	.keyboard-item.empty {
+		background-color: #f5f5f5;
+		border: none;
+	}
+
+	.keyboard-item.delete {
+		background-color: #f5f5f5;
+		border: none;
+	}
+
+	/* 3. 缴费成功页 */
+	/* 全局容器 */
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	/* 成功图标 */
+	.success-icon {
+		width: 220rpx;
+		height: 220rpx;
+		border-radius: 50%;
+		background-color: #1677ff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 200rpx;
+		margin-bottom: 60rpx;
+	}
+
+	.icon-check {
+		color: #fff;
+		font-size: 130rpx;
+		font-weight: bold;
+		line-height: 1;
+	}
+
+	/* 主标题 */
+	.title {
+		font-size: 40rpx;
+		font-weight: bold;
+		color: #000;
+		margin-bottom: 20rpx;
+	}
+
+	/* 提示文案 */
+	.desc {
+		font-size: 32rpx;
+		color: #666;
+		line-height: 1.6;
+		text-align: center;
+		margin-bottom: 150rpx;
+	}
+
+	/* 支付方式选择 */
+	.pay-method-section {
+		margin-top: 30rpx;
+		padding: 0 20rpx;
+	}
+	.pay-method-title {
+		font-size: 30rpx;
+		color: #333;
+		font-weight: 600;
+		margin-bottom: 20rpx;
+		display: block;
+	}
+	.pay-method-list {
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+	}
+	.pay-method-item {
+		display: flex;
+		align-items: center;
+		padding: 24rpx 30rpx;
+		background: #fff;
+		border-radius: 12rpx;
+		border: 2rpx solid #ededed;
+	}
+	.pay-method-item.active {
+		border-color: #1677ff;
+		background: #f0f7ff;
+	}
+	.pay-icon {
+		width: 48rpx;
+		height: 48rpx;
+		margin-right: 20rpx;
+	}
+	.pay-name {
+		flex: 1;
+		font-size: 30rpx;
+		color: #333;
+	}
+	.pay-check {
+		width: 32rpx;
+		height: 32rpx;
+		border-radius: 50%;
+		background: #1677ff;
+		position: relative;
+	}
+	.pay-check::after {
+		content: '';
+		position: absolute;
+		left: 10rpx;
+		top: 6rpx;
+		width: 8rpx;
+		height: 14rpx;
+		border: 2rpx solid #fff;
+		border-left: none;
+		border-top: none;
+		transform: rotate(45deg);
+	}
+
+	/*  核心：欠费金额行样式 */
+	.arrears-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		/* padding:30rpx; */
+		margin-bottom: 60rpx;
+	}
+
+	.arrears-text {
+		font-size: 28rpx;
+		color: #999;
+	}
+
+	.auto-fill-btn {
+		font-size: 28rpx;
+		color: #007aff;
+		/* 蓝色，匹配设计图 */
+		font-weight: 500;
+		padding: 10rpx 0;
+	}
+
+	.status-bar {
+		width: 100vw;
+		height: 46px;
+	}
+</style>
--- a/property-uniapp-project/pages.json
+++ b/property-uniapp-project/pages.json
@@ -398,6 +398,13 @@
 						"navigationBarTitleText": "",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "propertyFeePayment",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom"
+					}
 				}

 			]
--- a/property-uniapp-project/pages/myIndex/myIndex.vue
+++ b/property-uniapp-project/pages/myIndex/myIndex.vue
@@ -6,7 +6,7 @@
 		<scroll-view class="page" scroll-y>
 			<view class="topBox">
 				<view class="name">
-					<image :src="avatar" class="img" />
+					<image src="https://wuyeadmin.bugtc.com/images/logo-app.png" class="img" />
 					<span style="padding: 5rpx 5rpx;display: flex;flex-direction: column;line-height: 60rpx;">
 						<span style="font-size: 36rpx;font-weight: 600;">
 							{{loginName}}