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-04-30 08:24:22 +08:00
parent d569bbc8e1
commit 2c528b7973
19 changed files with 2675 additions and 2553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}