zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

水费缴费部分代码同步

Browse Source
This commit is contained in:
wangyuxin
2026-06-01 11:17:04 +08:00
parent fbe07e21a6
commit c740126617
14 changed files with 717 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue
View File

@@ -1,30 +1,27 @@
<template>
<view class="contentStyle" style="">
<view class="status-bar"></view>
<uni-nav-bar title="生活缴费" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
</uni-nav-bar>
<view class="topbox">
<image class="titleImg" src="http://47.104.199.163:9090/images/propertyImgs/payTitle.png"></image>
<image class="payImg" src="http://47.104.199.163:9090/images/propertyImgs/payImg.png"></image>
<image class="titleImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payTitle.png"></image>
<image class="payImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payImg.png"></image>
</view>
<scroll-view class="page" scroll-y="true">
<view class="container">
<!-- 已缴费/欠费列表 -->
<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 class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
<image class="billIcon" :src="item.icon"></image>
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png"
v-if="item.type=='物业费A'"></image>
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
v-if="item.type=='物业费B'"></image>
<view class="bill-info">
<view class="bill-title">{{item.name}}
<view class="bill-status debt" v-if="item.status=='已欠费'">已欠费</view>
<view class="bill-title">{{item.type}}
<view class="bill-status debt" v-if="item.balance<0">已欠费</view>
</view>
<view class="bill-desc">{{item.address}}</view>
<view class="bill-desc">{{item.villageName+item.buildingName+item.fullAddress}}</view>
</view>
<view class="arrow"></view>
@@ -39,16 +36,26 @@
</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>
</view>
<text class="item-name">{{ item.name +'费'}}</text>
<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>
</view>
<!-- <text class="item-name">{{ item.name +'费'}}</text> -->
<text class="item-name">{{ item.name}}</text>
</view>
</view>
</view>
<!-- 开启通知按钮 -->
<!-- v-if="subscribeAuth !== 'accepted'" -->
<!-- <view class="subscribe-btn" @click="requestSubscribeMessageClick">
<text class="subscribe-btn-text">开启缴费通知</text>
</view> -->
<!-- <button class="subscribe-btn" @tap="handleWaterElecSubscribe" open-type="subscribeMessage">
开启订单状态通知
</button> -->
<view style="width: 100%;height: 30rpx;"></view>
</view>
</scroll-view>
@@ -70,82 +77,162 @@
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
import {
getTopUpSelectByResident,
getopenIdByCode,
postInsertOpenId,
postSubscribeAuth
} from '/pageSubPack/api/apiSub.js'
// 响应式数据
const statusBarHeight = ref(20)
// const subscribeAuth = ref(uni.getStorageSync('subscribeAuth') || '')
const paymentList = ref([{
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",
}
const paymentList = ref([
// {
// id: 1,
// name: '物业费',
// status: '已欠费',
// address: '桂花园（别墅）2号楼2层',
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/property.png",
// },
// {
// id: 2,
// name: '暖气费',
// status: '',
// address: '山东省日照市东港区桂花园（别墅）2号楼2层',
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/heating.png",
// },
// {
// id: 3,
// name: '物业费B',
// status: '已欠费',
// address: '山东省日照市东港区桂花园（别墅）2号楼2层',
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png",
// }
])
const addList = ref([{
name: "燃气",
type: "gas",
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
iconClass: "gas"
},
const addList = ref([
// {
// name: "燃气",
// type: "gas",
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/gas.png",
// iconClass: "gas"
// },
{
name: "水",
name: "物业费A",
type: "water",
icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
icon: "https://wuyeadmin.bugtc.com/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: "property",
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/property.png",
// iconClass: "property"
// },
// {
// name: "物业费B",
// type: "electric",
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png",
// iconClass: "electric"
// },
{
name: "车位",
type: "parking",
icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
iconClass: "parking"
}
// {
// name: "车位",
// type: "parking",
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/parkingIcon.png",
// iconClass: "parking"
// }
])
const postOpenId = async () => {
// 获取 openid
try {
const loginRes = await wx.login()
if (!loginRes.code) {
uni.hideLoading()
uni.showToast({
title: '登录失败',
icon: 'none'
})
return
}
// 用 code 换 openid
const openIdRes = await getopenIdByCode({
code: loginRes.code
})
if (openIdRes.code !== 200 || !openIdRes.data) {
uni.hideLoading()
uni.showToast({
title: '获取openid失败',
icon: 'none'
})
return
}
const openid = openIdRes.data
uni.setStorageSync('openid', openid)
await postInsertOpenId({
openid: uni.getStorageSync('openid'),
residentUserId: uni.getStorageSync('userId')
})
} catch (err) {
uni.showToast({
title: `${err}`,
icon: 'none'
})
console.error('列表接口报错：', err)
}
}
onShow(() => {
// 不再自动请求订阅消息，改为用户点击触发
})
// 生命周期
onReady(() => {})
onShow(() => {})
onLoad(() => {})
onLoad(() => {
postOpenId()
uni.hideTabBar({
animation: false // 关闭动画，更稳定
});
getPayList()
})
const getPayList = async () => {
// 防重复请求
try {
const res = await getTopUpSelectByResident({
residentUserId: uni.getStorageSync('userId')
})
const data = res.data
paymentList.value = data
} catch (err) {
uni.showToast({
title: `${err}`,
icon: 'none'
})
console.error('列表接口报错：', err)
} finally {
}
}
// 方法
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'
})
}
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'
})
}
@@ -160,7 +247,7 @@
uni.redirectTo({
url: '/pageSubPack/payment-list/selectPaymentEntity'
})
} else if (type.name == '水' || type.name == '电') {
} else if (type.name == '物业费A' || type.name == '物业费B') {
uni.redirectTo({
url: '/pageSubPack/payment-list/addHydropower'
})
@@ -342,7 +429,7 @@
}
.grid-item {
width: calc(25% - 60rpx);
width: calc(25% - 50rpx);
background-color: #F6F9FE;
border-radius: 12rpx;
padding: 20rpx;
@@ -373,6 +460,20 @@
color: #333;
}
.subscribe-btn {
margin-top: 20rpx;
background-color: #1677ff;
padding: 24rpx;
border-radius: 10rpx;
text-align: center;
}
.subscribe-btn-text {
color: #fff;
font-size: 32rpx;
font-weight: 600;
}
.status-bar {
width: 100vw;
height: 46px;