516 lines
11 KiB
Vue
516 lines
11 KiB
Vue
<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="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 class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :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>
|
||
<view class="bill-info">
|
||
<view class="bill-title">{{item.type}}
|
||
<view class="bill-status debt" v-if="item.balance<0">已欠费</view>
|
||
</view>
|
||
<view class="bill-desc">{{item.villageName+item.buildingName+item.fullAddress}}</view>
|
||
</view>
|
||
|
||
<view class="arrow"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已缴费/欠费列表 -->
|
||
<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>
|
||
<view class="bill-info">
|
||
<view class="bill-title">{{switchStatus(item.type)}}
|
||
<view class="bill-status debt" v-if="item.balance<0">已欠费</view>
|
||
</view>
|
||
<!-- <view class="bill-desc">{{item.villageName+item.buildingName+item.fullAddress}}</view> -->
|
||
<view class="bill-desc">{{item.name}}</view>
|
||
</view>
|
||
|
||
<view class="arrow"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新增缴费区域 -->
|
||
<view class="add-section">
|
||
<view class="section-header">
|
||
<text class="section-title">新增缴费</text>
|
||
<text class="record-link" @click="goToRecord">缴费记录</text>
|
||
</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> -->
|
||
<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>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
computed
|
||
|
||
} from 'vue'
|
||
import {
|
||
onShow,
|
||
onReady,
|
||
onReachBottom,
|
||
onLoad,
|
||
onUnload,
|
||
onPullDownRefresh
|
||
} from '@dcloudio/uni-app'
|
||
|
||
import {
|
||
getTopUpSelectByResident,
|
||
postInsertOpenId,
|
||
postSubscribeAuth,
|
||
getTopUpDetails,
|
||
} 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: "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: '电费',
|
||
status: '已欠费',
|
||
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||
icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png",
|
||
}
|
||
])
|
||
|
||
const addList = ref([
|
||
// {
|
||
// name: "燃气",
|
||
// type: "gas",
|
||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/gas.png",
|
||
// iconClass: "gas"
|
||
// },
|
||
{
|
||
name: "水费",
|
||
type: "water",
|
||
icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/water.png",
|
||
iconClass: "water"
|
||
},
|
||
{
|
||
name: "电费",
|
||
type: "electric",
|
||
icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png",
|
||
iconClass: "electric"
|
||
},
|
||
// {
|
||
// name: "物业费",
|
||
// type: "property",
|
||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/property.png",
|
||
// iconClass: "property"
|
||
// },
|
||
// {
|
||
// name: "车位费",
|
||
// type: "parking",
|
||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/parkingIcon.png",
|
||
// iconClass: "parking"
|
||
// }
|
||
])
|
||
|
||
const postOpenId = async () => {
|
||
// App 端直接从本地存储获取 openid
|
||
try {
|
||
const openid = uni.getStorageSync('openid')
|
||
if (!openid) {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
await postInsertOpenId({
|
||
openid: openid,
|
||
residentUserId: uni.getStorageSync('userId')
|
||
})
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: err.msg || '网络异常',
|
||
icon: 'none'
|
||
})
|
||
console.error('列表接口报错：', err)
|
||
}
|
||
}
|
||
onShow(() => {
|
||
|
||
// Zy --------------
|
||
getBillDetails()
|
||
// Zy --------------
|
||
|
||
// 不再自动请求订阅消息，改为用户点击触发
|
||
})
|
||
// 生命周期
|
||
onReady(() => {})
|
||
|
||
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)
|
||
// 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 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')
|
||
}
|
||
|
||
|
||
|
||
// Zy --------------
|
||
const detailslist = ref([])
|
||
const getBillDetails = ()=>{
|
||
getTopUpDetails({
|
||
userId:uni.getStorageSync('userId'),
|
||
villageId:uni.getStorageSync('currentVillageId'),
|
||
}).then(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 '垃圾处理费'
|
||
}
|
||
}
|
||
// Zy --------------
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.contentStyle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||
}
|
||
|
||
.page {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0px 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.topbox {
|
||
height: 150rpx;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.titleImg {
|
||
width: 262rpx;
|
||
height: 74rpx;
|
||
position: absolute;
|
||
left: 40rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
|
||
.payImg {
|
||
width: 349.97rpx;
|
||
height: 313.57rpx;
|
||
position: absolute;
|
||
right: -80rpx;
|
||
bottom: -140rpx;
|
||
}
|
||
|
||
.container {}
|
||
|
||
.bill-list {
|
||
margin-bottom: 40rpx;
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.bill-item {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #F6F9FE;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx 20rpx 20rpx 0px;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.bill-item:last-child {
|
||
margin-bottom: 0rpx;
|
||
}
|
||
|
||
.bill-info {
|
||
width: calc(90% - 100rpx);
|
||
flex: 1;
|
||
}
|
||
|
||
.billIcon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.bill-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.bill-desc {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #999;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.bill-status {
|
||
padding: 2rpx 16rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
background-color: #E34D59;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.arrow {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-right: 4rpx solid #ccc;
|
||
border-bottom: 4rpx solid #ccc;
|
||
transform: rotate(-45deg);
|
||
}
|
||
|
||
.add-section {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.record-link {
|
||
font-size: 28rpx;
|
||
color: #1677ff;
|
||
}
|
||
|
||
.grid-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
/* gap: 26rpx; */
|
||
}
|
||
|
||
.grid-item {
|
||
width: calc(25% - 60rpx);
|
||
background-color: #F6F9FE;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
/* 每行第 1 个 item 清除左边距，保证对齐 */
|
||
.grid-item:nth-child(4n+1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.icon-box {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.iconStyle {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
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;
|
||
}
|
||
</style> |