缴费记录对接数据、我的车位新增选择业主

2026-06-17 17:38:03 +08:00
parent c363c90f95
commit 1efa212d26
5 changed files with 510 additions and 76 deletions
--- a/property-uniapp-project/pageSubPack/api/apiSub.js
+++ b/property-uniapp-project/pageSubPack/api/apiSub.js
@@ -234,6 +234,10 @@ export const getParkingDetail = (data) => {
 export const rebindCar = (data) => {
 	return post(`/ResidentCarAreaManage/rebind`, data)
 }
+// 获取业主列表
+export const getOwnerList = (data) => {
+	return get('/api/resident/car/bind/ResidentList', data)
+}

 // 查询版本信息
 export const getAppVersion = (platform, channel) => {
--- a/property-uniapp-project/pageSubPack/my/addParkingSpace.vue
+++ b/property-uniapp-project/pageSubPack/my/addParkingSpace.vue
@@ -54,6 +54,13 @@
 						</view>
 					</view>
 				</view>
+				<view class="form-item" @click="selectItem('选择业主')">
+					<text class="item-label">选择业主</text>
+					<text class="item-placeholder"
+						:class="{selected: formData.owner}">{{ formData.owner || '请选择' }}</text>
+					<text class="item-arrow"></text>
+				</view>
+				

 				<view class="form-item" @click="bindCarClick">
 					<text class="item-label">绑定车辆</text>
@@ -100,6 +107,8 @@
 		parkingStatus: uni.getStorageSync('parkingStatus') || '0',
 		bindCar: uni.getStorageSync('bindCarName'),
 		bindCarId: uni.getStorageSync('bindCarId'),
+		owner: uni.getStorageSync('ownerName'),
+		ownerId: uni.getStorageSync('ownerId'),
 	})

 	onShow(() => {
@@ -115,6 +124,8 @@
 		formData.value.parkingStatus = uni.getStorageSync('parkingStatus') || '0',
 			formData.value.bindCar = uni.getStorageSync('bindCarName')
 		formData.value.bindCarId = uni.getStorageSync('bindCarId')
+		formData.value.owner = uni.getStorageSync('ownerName')
+		formData.value.ownerId = uni.getStorageSync('ownerId')
 	})
 	onLoad((option) => {
 		if (uni.getStorageSync('operationType') == 'update') {
@@ -178,7 +189,8 @@
 						parkingId: formData.value.parkingSpaceId,
 						parkingStatus: formData.value.parkingStatus,
 						carId: formData.value.bindCarId,
-						residentId: uni.getStorageSync('userId')
+						// residentId: uni.getStorageSync('userId')
+						residentId: formData.value.ownerId
 					}).then(res => {
 						uni.hideLoading()
 						console.log(res);
@@ -241,11 +253,14 @@
 			formData.value.bindCarId = data.carId
 			uni.setStorageSync('bindCarId', data.carId)

-
+			formData.value.owner = data.ownerName
+			uni.setStorageSync('ownerName', data.ownerName)
+			formData.value.ownerId = data.ownerId
+			uni.setStorageSync('ownerId', data.ownerId)

 		} catch (err) {
 			uni.showToast({
-				title: `${err}`,
+				title: err.msg,
 				icon: 'none'
 			})
 			console.error('列表接口报错：', err)
@@ -295,6 +310,17 @@
 				url: '/pageSubPack/my/selectParingLot'
 			})
 		}
+		if (typeStr === '选择业主') {
+			if (!formData.value.community) {
+				return uni.showToast({
+					title: '请先选择小区',
+					icon: 'none'
+				})
+			}
+			uni.redirectTo({
+				url: '/pageSubPack/my/selectOwner'
+			})
+		}
 	}

 	const goBack = () => {
@@ -310,6 +336,8 @@
 		uni.removeStorageSync('parkingSpaceName')
 		uni.removeStorageSync('bindCarId')
 		uni.removeStorageSync('bindCarName')
+		uni.removeStorageSync('ownerId')
+		uni.removeStorageSync('ownerName')
 		uni.redirectTo({
 			url: '/pageSubPack/my/myParkingSpaceIndex'
 		})
--- a/property-uniapp-project/pageSubPack/my/selectOwner.vue
+++ b/property-uniapp-project/pageSubPack/my/selectOwner.vue
@@ -0,0 +1,350 @@
+<template>
+	<view class="contentStyle">
+		<view class="status-bar"></view>
+		<uni-nav-bar title="选择业主" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
+		</uni-nav-bar>
+
+		<scroll-view class="page" scroll-y>
+			<!-- 搜索框 -->
+			<view class="search-box">
+				<input class="search-input" v-model="searchKey" placeholder="请输入业主名称"
+					placeholder-class="input-placeholder" @input="onSearch" />
+				<uni-icons type="search" size="20" color="#999" />
+			</view>
+
+			<view v-if="filteredList.length === 0" class="empty-state">
+				<uni-icons type="info" size="60" color="#ccc"></uni-icons>
+				<text class="empty-text">暂无数据</text>
+			</view>
+
+			<view class="owner-item" v-for="(item, index) in filteredList" :key="index" @click="handleItemClick(item, index)"
+				:class="{ checked: selectedIndex === index }">
+				<view class="owner-avatar">
+					<text class="avatar-text">{{ item.name ? item.name.charAt(0) : '业' }}</text>
+				</view>
+				<view class="owner-info">
+					<view class="owner-name">{{ item.name }}</view>
+					<view class="owner-phone" v-if="item.phone">{{ item.phone }}</view>
+					<view class="owner-house" v-if="item.houseName">{{ item.houseName }}</view>
+				</view>
+				<view class="check-icon" :class="{ checked: selectedIndex === index }"></view>
+			</view>
+		</scroll-view>
+		<view class="bottom-btn">
+			<button class="confirm-btn" @click="confirmBind">确定选择</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed
+	} from 'vue'
+	import {
+		onReachBottom,
+		onPullDownRefresh,
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		getOwnerList
+	} from '@/pageSubPack/api/apiSub.js'
+
+	const searchKey = ref('')
+	const selectedId = ref('')
+	const selectedName = ref('')
+	const selectedIndex = ref(-1)
+	const ownerList = ref([])
+
+	const loadingMore = ref(false)
+	const noMoreData = ref(false)
+
+	const pageNum = ref(1)
+	const pageSize = ref(10)
+
+	// 过滤后的列表
+	const filteredList = computed(() => {
+		if (!searchKey.value.trim()) {
+			return ownerList.value
+		}
+		return ownerList.value.filter(item =>
+			item.name && item.name.includes(searchKey.value.trim())
+		)
+	})
+
+	// 搜索输入事件
+	const onSearch = () => {
+		// 实时过滤，computed 自动处理
+	}
+
+	// 获取列表数据
+	const getList = async () => {
+		if (loadingMore.value || noMoreData.value) return
+
+		loadingMore.value = true
+		try {
+			const res = await getOwnerList({
+				pageNum: pageNum.value,
+				pageSize: pageSize.value,
+				villageId: uni.getStorageSync('communityId')
+			})
+
+			const newList = res.rows || []
+
+			if (pageNum.value === 1) {
+				ownerList.value = newList
+			} else {
+				ownerList.value = [...ownerList.value, ...newList]
+			}
+
+			if (newList.length < pageSize.value) {
+				noMoreData.value = true
+			} else {
+				pageNum.value++
+			}
+		} catch (err) {
+			uni.showToast({
+				title: err.msg || '加载失败',
+				icon: 'none'
+			})
+			console.error('业主列表接口报错：', err)
+		} finally {
+			loadingMore.value = false
+			uni.stopPullDownRefresh()
+		}
+	}
+
+	// 上拉加载更多
+	onReachBottom(() => {
+		getList()
+	})
+
+	// 下拉刷新
+	const refresh = () => {
+		pageNum.value = 1
+		noMoreData.value = false
+		ownerList.value = []
+		loadingMore.value = false
+		getList()
+	}
+	onPullDownRefresh(() => {
+		refresh()
+	})
+
+	// 页面加载时请求第一页
+	onMounted(() => {
+		getList()
+	})
+
+	const handleItemClick = (item, index) => {
+		selectedIndex.value = index
+		selectedId.value = item.id
+		selectedName.value = item.name
+	}
+
+	const confirmBind = () => {
+		if (selectedIndex.value === -1) {
+			return uni.showToast({
+				title: "请先选择业主",
+				icon: "none"
+			})
+		}
+
+		uni.showModal({
+			title: "确认选择",
+			content: `确定选择业主 ${selectedName.value} 吗？`,
+			success: (res) => {
+				if (res.confirm) {
+					uni.setStorageSync('ownerId', selectedId.value)
+					uni.setStorageSync('ownerName', selectedName.value)
+					uni.showToast({
+						title: '选择成功',
+						icon: 'success'
+					})
+					setTimeout(() => {
+						goBack()
+					}, 500)
+				}
+			}
+		})
+	}
+
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/my/addParkingSpace'
+		})
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #f9f9f9;
+		overflow: hidden;
+	}
+</style>
+
+<style scoped>
+	.status-bar {
+		width: 100vw;
+		height: 46px;
+	}
+
+	.contentStyle {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+	}
+
+	.page {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0px 40rpx;
+		box-sizing: border-box;
+	}
+
+	/* 搜索框 */
+	.search-box {
+		display: flex;
+		align-items: center;
+		background-color: #F3F3F3;
+		border-radius: 20rpx;
+		margin: 20rpx 0px 20rpx 0px;
+		padding: 0 30rpx;
+		height: 70rpx;
+	}
+
+	.search-input {
+		flex: 1;
+		height: 100%;
+		font-size: 30rpx;
+		border: none;
+		background: transparent;
+	}
+
+	.input-placeholder {
+		color: #999;
+		font-size: 30rpx;
+	}
+
+	/* 空状态 */
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 100rpx 0;
+		color: #ccc;
+	}
+
+	.empty-text {
+		font-size: 32rpx;
+		color: #999;
+		margin-top: 20rpx;
+		margin-bottom: 10rpx;
+	}
+
+	/* 业主列表项 */
+	.owner-item {
+		display: flex;
+		align-items: center;
+		padding: 24rpx 20rpx;
+		margin-bottom: 20rpx;
+		border: 1rpx solid #e6e9ff;
+		border-radius: 16rpx;
+		background-color: #fff;
+		position: relative;
+	}
+
+	.owner-item.checked {
+		background: #f4f7ff;
+		border-color: #1677ff;
+	}
+
+	.owner-avatar {
+		width: 88rpx;
+		height: 88rpx;
+		border-radius: 50%;
+		background-color: #e8f0fe;
+		margin-right: 24rpx;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.avatar-text {
+		font-size: 36rpx;
+		color: #1677ff;
+		font-weight: bold;
+	}
+
+	.owner-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.owner-name {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000;
+		line-height: 1.4;
+		margin-bottom: 6rpx;
+	}
+
+	.owner-phone {
+		font-size: 26rpx;
+		color: #666;
+		line-height: 1.4;
+	}
+
+	.owner-house {
+		font-size: 26rpx;
+		color: #999;
+		line-height: 1.4;
+	}
+
+	/* 选中对勾 */
+	.check-icon {
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 50%;
+		border: 2rpx solid #ccc;
+		flex-shrink: 0;
+		position: relative;
+	}
+
+	.check-icon::after {
+		content: "✓";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		color: #fff;
+		font-size: 26rpx;
+		font-weight: bold;
+	}
+
+	.check-icon.checked {
+		background-color: #1677ff;
+		border-color: #1677ff;
+	}
+
+	/* 底部按钮 */
+	.bottom-btn {
+		padding: 20rpx 30rpx 40rpx;
+	}
+
+	.confirm-btn {
+		width: 100%;
+		height: 88rpx;
+		background-color: #1677ff;
+		color: #fff;
+		border-radius: 12rpx;
+		font-size: 34rpx;
+		border: none;
+		line-height: 88rpx;
+	}
+</style>
--- a/property-uniapp-project/pageSubPack/payment-list/paymentRecord.vue
+++ b/property-uniapp-project/pageSubPack/payment-list/paymentRecord.vue
@@ -4,9 +4,7 @@
 		<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
 		</uni-nav-bar>

-		<!-- 表单区域 -->
-		<scroll-view class="page" scroll-y="true">
-
+		<view class="page">
 			<!-- 累计缴费 -->
 			<view class="total-box">
 				<view class="top-box">
@@ -34,40 +32,37 @@

 			</view>

-			<!-- 缴费明细 -->
-			<view class="list-wrapper">
-				<!-- 按月份分组渲染 -->
-				<view v-if="monthGroups.length === 0" class="empty-state">
-					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
-					<text class="empty-text">
-						{{ '暂无数据'}}
-					</text>
-				</view>
-				<view class="month-group" v-for="(item, idx) in monthGroups" :key="idx">
-					<view class="month-title">
-						{{ item.month }}月 缴费 ¥{{ item.total }}元
+			<!-- 缴费明细（分页滚动） -->
+			<scroll-view class="list-scroll" scroll-y="true" @scrolltolower="loadMore">
+				<view class="list-wrapper">
+					<!-- 按月份分组渲染 -->
+					<view v-if="monthGroups.length === 0" class="empty-state">
+						<uni-icons type="info" size="60" color="#ccc"></uni-icons>
+						<text class="empty-text">
+							{{ '暂无数据'}}
+						</text>
 					</view>
+					<view class="month-group" v-for="(item, idx) in monthGroups" :key="idx">
+						<view class="month-title">
+							{{ item.year }}年{{ item.month }}月 缴费 ¥{{ item.total.toFixed(2) }}
+						</view>

-					<view class="item-list">
-						<view class="bill-item" v-for="bill in item.list" :key="bill.id">
-							<view class="bill-icon">
-								<image class="iconStyle" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png"
-									v-if="bill.name=='物业费A'"></image>
-								<image class="iconStyle" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
-									v-if="bill.name=='物业费B'"></image>
-				
+						<view class="item-list">
+							<view class="bill-item" v-for="bill in item.list" :key="bill.id">
+								<view class="bill-icon">
+									<image class="iconStyle" :src="bill.icon"></image>
+								</view>
+								<view class="bill-info">
+									<view class="name">{{ bill.name }}</view>
+									<view class="account">{{ bill.account }}</view>
+								</view>
+								<view class="bill-price">-{{ bill.amount.toFixed(2) }}</view>
 							</view>
-							<view class="bill-info">
-								<view class="name">{{ bill.name }}</view>
-								<view class="account">{{ bill.account }}</view>
-							</view>
-							<view class="bill-price">-{{ bill.amount }}</view>
 						</view>
 					</view>
 				</view>
-			</view>
-
-		</scroll-view>
+			</scroll-view>
+		</view>
 	</view>
 </template>

@@ -101,18 +96,33 @@

 	const billList = ref([])

-	// 图标映射
-	const iconMap = {
-		'物业费A': 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png',
-		'物业费B': 'https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png',
-		'物业费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/property.png',
-		'暖气费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/heating.png',
-		'燃气费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/gas.png'
+	// 费用名称映射
+	// topup（水电表充值）：type 1=电费, 2=水费
+	// bill（物业账单）：type 0=物业费, 1=车位费, 2=垃圾处理费
+	const getNameByType = (item) => {
+		if (item.recordType === 'topup') {
+			return item.type == '1' ? '电费' : item.type == '2' ? '水费' : '充值'
+		} else if (item.recordType === 'bill') {
+			return item.type == '0' ? '物业费' : item.type == '1' ? '车位费' : item.type == '2' ? '垃圾处理费' : '账单'
+		}
+		return ''
 	}

-	// 获取缴费记录
-	const getRecords = async () => {
+	// 图标映射
+	const iconMap = {
+		'电费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png',
+		'水费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png',
+		'物业费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/property.png',
+		'车位费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/parking.png',
+		'垃圾处理费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/garbage.png',
+		'充值': 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png',
+		'账单': 'https://wuyeadmin.bugtc.com/images/propertyImgs/property.png'
+	}
+
+	// 获取缴费记录（loadMore=true 时分页追加）
+	const getRecords = async (loadMore = false) => {
 		try {
+			if (!loadMore) pageNum.value = 1
 			const res = await getTopupRecordWithStat({
 				residentUserId: uni.getStorageSync('userId'),
 				pageNum: pageNum.value,
@@ -121,39 +131,57 @@
 			if (res.code === 200) {
 				const records = res.data.records || []
 				// 转换记录格式
-				billList.value = records.map(item => ({
-					id: item.id,
-					month: item.rechargeTime && item.rechargeTime.split('-')[1] ? parseInt(item.rechargeTime.split('-')[1], 10) : 1,
-					name: item.type == 1 ? '物业费B' : item.type == 2 ? '物业费A' : '',
-					account: item.deviceCode || '-',
-					amount: Number(item.rechargeAmount) || 0,
-					icon: iconMap[item.type == 1 ? '物业费B' : item.type == 2 ? '物业费A' : ''] || 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png'
-				}))
+				const mappedList = records.map(item => {
+					const payDate = item.payTime ? item.payTime.split(' ')[0] : ''
+					const parts = payDate.split('-')
+					const name = getNameByType(item)
+					return {
+						id: item.id,
+						year: parts[0] ? parseInt(parts[0], 10) : new Date().getFullYear(),
+						month: parts[1] ? parseInt(parts[1], 10) : 1,
+						name,
+						account: item.deviceCode || '',
+						amount: Number(item.amount) || 0,
+						recordType: item.recordType || '',
+						icon: iconMap[name] || iconMap['账单']
+					}
+				})
+				billList.value = loadMore ? [...billList.value, ...mappedList] : mappedList
 				// 累计缴费金额
-				const total = records.reduce((sum, item) => sum + (Number(item.rechargeAmount) || 0), 0)
-				totalAmount.value = total.toFixed(2)
-				// 更新图表数据（根据 records 计算最近6个月）
-				updateChartData()
+				totalAmount.value = res.data.totalAmount || '0.00'
+				// 柱状图数据（使用API返回的monthlyStats）
+				updateChartData(res.data.monthlyStats || {})
 			}
 		} catch (err) {
 			console.error('获取缴费记录失败', err)
 		}
 	}

-	// 更新图表数据（根据 records 计算最近6个月）
-	const updateChartData = () => {
-		// 按月份汇总金额
-		const monthTotal = {}
-		billList.value.forEach(bill => {
-			const monthKey = bill.month
-			if (!monthTotal[monthKey]) {
-				monthTotal[monthKey] = 0
+	// 加载更多（触底分页）
+	const loadMore = () => {
+		pageNum.value++
+		getRecords(true)
+	}
+
+	// 更新图表数据（使用API返回的monthlyStats）
+	// monthlyStats格式: { "2026-04": "04月 30.00元", "2026-05": "05月 25.00元", ... }
+	const updateChartData = (monthlyStats) => {
+		const statsMap = {}
+		Object.entries(monthlyStats).forEach(([key, value]) => {
+			const priceMatch = value.match(/([\d.]+)元/)
+			if (priceMatch && key.includes('-')) {
+				const [y, m] = key.split('-')
+				statsMap[key] = {
+					year: parseInt(y, 10),
+					month: parseInt(m, 10),
+					price: parseFloat(priceMatch[1]) || 0
+				}
 			}
-			monthTotal[monthKey] += bill.amount
 		})
+
 		// 取最近6个月（当前月往前）
 		const now = new Date()
-		const currentMonth = now.getMonth() + 1 // 1-12
+		const currentMonth = now.getMonth() + 1
 		const currentYear = now.getFullYear()
 		const months = []
 		for (let i = 0; i < 6; i++) {
@@ -163,37 +191,46 @@
 				month += 12
 				year -= 1
 			}
+			const key = `${year}-${String(month).padStart(2, '0')}`
+			const data = statsMap[key]
 			months.push({
 				month,
-				year
+				year,
+				price: data ? data.price : 0
 			})
 		}
 		chartData.value = months.map((m, i) => ({
 			month: (m.year + '').slice(-2) + '年' + m.month + '月',
 			year: m.year,
 			sortMonth: m.year * 12 + m.month,
-			price: monthTotal[m.month] || 0,
+			price: m.price,
 			index: i
 		})).sort((a, b) => a.sortMonth - b.sortMonth)
 		const prices = chartData.value.map(c => c.price)
 		maxPrice.value = Math.max(...prices, 100)
 	}

-	// 计算属性 —— 月份分组
+	// 计算属性 —— 按年-月分组缴费明细
 	const monthGroups = computed(() => {
-		let map = {}
+		const map = {}
 		billList.value.forEach(bill => {
-			if (!map[bill.month]) {
-				map[bill.month] = {
+			const key = `${bill.year}-${String(bill.month).padStart(2, '0')}`
+			if (!map[key]) {
+				map[key] = {
 					month: bill.month,
+					year: bill.year,
 					total: 0,
 					list: []
 				}
 			}
-			map[bill.month].list.push(bill)
-			map[bill.month].total += bill.amount
+			map[key].list.push(bill)
+			map[key].total += bill.amount
+		})
+		// 按年月降序排列
+		return Object.values(map).sort((a, b) => {
+			if (a.year !== b.year) return b.year - a.year
+			return b.month - a.month
 		})
-		return Object.values(map).sort((a, b) => b.month - a.month)
 	})

 	// 生命周期
@@ -233,9 +270,16 @@

 	.page {
 		flex: 1;
-		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
 		padding: 0px 40rpx;
 		box-sizing: border-box;
+		overflow: hidden;
+	}
+
+	.list-scroll {
+		flex: 1;
+		overflow-y: auto;
 	}

 	.total-box {
--- a/property-uniapp-project/pages.json
+++ b/property-uniapp-project/pages.json
@@ -331,7 +331,15 @@
 						"navigationBarTitleText": "",
 						"navigationStyle": "custom"
 					}
-				}, {
+				}, 
+				{
+					"path": "selectOwner",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom"
+					}
+				},
+				{
 					"path": "carDetail",
 					"style": {
 						"navigationBarTitleText": "",