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

1

Browse Source
This commit is contained in:
wangyuxin
2026-04-30 09:00:47 +08:00
parent 1a9c468460
commit eef3a20959
2 changed files with 1041 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

522
property-uniapp-project/pageSubPack/payment-list/addHydropower.vue Normal file
View File

@@ -0,0 +1,522 @@
<template>
<view class="contentStyle" style="">
<view class="status-bar"></view>
<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
:border="false">
</uni-nav-bar>
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
<view class="card-box">
<!-- 头部水费标题+水滴图标 -->
<view class="card-header">
<image class="iconStyle"
:src="paymentType=='水'?'http://47.104.199.163:9090/images/propertyImgs/water.png':'http://47.104.199.163:9090/images/propertyImgs/electric.png'">
</image>
<text class="card-title">{{paymentType+'费'}}</text>
</view>
<!-- 分割线 -->
<view class="line"></view>
<view class="input-item">
<view class="input-label">缴费单位</view>
<text class="company-name">XXXXXXXX燃气有限公司</text>
</view>
<!-- 分割线 -->
<view class="line"></view>
<!-- 设备号输入项 -->
<view class="input-item">
<view class="input-label">缴费设备号</view>
<view class="input-wrap">
<!-- 输入框 -->
<input class="input" placeholder="请输入设备号" placeholder-class="input-placeholder"
v-model="deviceNo" />
<!-- 右边扫码图标 text标签直接用 双端不乱码 -->
<image class="scanTheCodeIconStyle"
src="http://47.104.199.163:9090/images/propertyImgs/scanTheCodeIcon.png" @click="scanCode">
</image>
</view>
</view>
<!-- 底部分割线 -->
<view class="line"></view>
</view>
<!-- 底部协议和提交按钮 -->
<view class="bottom-area">
<!-- <view class="agreement">
<checkbox-group @change="handleAgreeChange">
<checkbox :checked="isAgree" />
</checkbox-group>
<text class="agreement-text">我已阅并同意</text>
<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
</view> -->
<button class="submit-btn" @click="goPay">
提交
</button>
</view>
</scroll-view>
</view>
</template>
<script setup>
import {
ref,
onMounted,
computed
} from 'vue'
import {
onShow,
onReady,
onReachBottom,
onLoad,
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
// 响应式数据
const paymentType = ref(uni.getStorageSync('addPaymentType'))
const deviceNo = ref('')
const isAgree = ref(false)
const scanResult = ref('')
// 生命周期
onMounted(() => {})
// 协议勾选
const handleAgreeChange = (e) => {
isAgree.value = e.detail.value.length > 0
}
// 扫码
const scanCode = async () => {
try {
uni.showLoading({
title: '扫码中...',
mask: true
})
const res = await uni.scanCode({
onlyFromCamera: false,
scanType: ['qrCode', 'barCode']
})
// 扫码成功，赋值
deviceNo.value = res.result
scanResult.value = res.result
uni.hideLoading()
uni.showToast({
title: '扫码成功',
icon: 'success'
})
} catch (err) {
uni.hideLoading()
console.log('扫码失败', err)
uni.showToast({
title: '扫码取消/失败',
icon: 'none'
})
}
}
// 提交缴费
const goPay = () => {
if (!deviceNo.value) {
uni.showToast({
title: '请输入设备号',
icon: 'none'
})
return
}
// if (!isAgree.value) {
// uni.showToast({
// title: '请同意协议',
// icon: 'none'
// })
// return
// }
uni.showModal({
title: '确认提交',
content: '确认要提交吗?',
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: '提交中...',
mask: true
})
setTimeout(() => {
uni.showToast({
title: '提交成功',
icon: 'success'
})
}, 1000)
setTimeout(() => {
uni.hideLoading()
goNext()
}, 2500)
}
}
})
}
const handleProtocol = () => {
}
// 跳转成功页
const goNext = () => {
uni.redirectTo({
url: '/pageSubPack/payment-list/addPaymentSuccess'
})
}
// 返回
const goBack = () => {
uni.redirectTo({
url: '/pageSubPack/payment-list/paymentIndex'
})
}
</script>
<style lang="scss">
page {
background: #f2f1f6;
}
</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;
}
/* 白色卡片容器 */
.card-box {
background: #ffffff;
border-radius: 24rpx;
padding: 32rpx;
}
/* 头部水费标题 */
.card-header {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 32rpx;
}
.iconStyle {
width: 88rpx;
height: 88rpx;
}
.scanTheCodeIconStyle {
width: 48rpx;
height: 48rpx;
padding-left: 20rpx;
}
.water-icon {
font-size: 32rpx;
}
.card-title {
font-size: 32rpx;
color: #333;
font-weight: 500;
}
/* 分割线 */
.line {
width: 100%;
height: 1rpx;
background: #eeeeee;
}
/* 输入项整体 */
.input-item {
padding: 32rpx 0;
}
.input-label {
font-size: 28rpx;
color: #333;
margin-bottom: 24rpx;
}
/* 输入框+扫码图标横向布局 */
.input-wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.input {
flex: 1;
font-size: 32rpx;
color: #333;
}
/* 占位符样式 */
.input-placeholder {
color: #cccccc;
}
/* 底部协议+按钮区域 */
.bottom-area {
margin-top: 60rpx;
padding: 0 10rpx;
}
/* 协议勾选 */
.agree-item {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 40rpx;
}
.radio-box {
width: 36rpx;
height: 36rpx;
display: flex;
align-items: center;
justify-content: center;
}
.radio-icon {
font-size: 32rpx;
color: #999;
}
.agree-text {
font-size: 28rpx;
color: #666;
}
.agree-link {
font-size: 28rpx;
color: #007aff;
}
/* 立即缴费按钮 */
.pay-btn {
width: 100%;
height: 96rpx;
background: #007aff;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
}
.pay-text {
font-size: 36rpx;
color: #ffffff;
}
/* 白色卡片容器 */
.card-box {
background: #ffffff;
border-radius: 24rpx;
padding: 32rpx;
}
/* 头部水费标题 */
.card-header {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 32rpx;
}
.water-icon {
font-size: 48rpx;
}
.card-title {
font-size: 36rpx;
color: #333;
font-weight: 500;
}
/* 分割线 */
.line {
width: 100%;
height: 1rpx;
background: #eeeeee;
}
/* 输入项整体 */
.input-item {
padding: 32rpx 0;
}
.input-label {
font-size: 32rpx;
color: #333;
margin-bottom: 24rpx;
}
/* 输入框+扫码图标横向布局 */
.input-wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.input {
flex: 1;
font-size: 32rpx;
color: #333;
}
/* 占位符样式 */
.input-placeholder {
color: #cccccc;
}
/* 右边扫码图标 text标签直接用 双端不乱码 */
.scan-icon {
font-size: 40rpx;
color: #999;
padding-left: 20rpx;
}
/* 底部协议+按钮区域 */
.bottom-area {
margin-top: 60rpx;
padding: 0 10rpx;
}
/* 协议勾选 */
.agree-item {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 40rpx;
}
.radio-box {
width: 36rpx;
height: 36rpx;
display: flex;
align-items: center;
justify-content: center;
}
.radio-icon {
font-size: 32rpx;
color: #999;
}
.agree-text {
font-size: 28rpx;
color: #666;
}
.agree-link {
font-size: 28rpx;
color: #007aff;
}
/* 立即缴费按钮 */
.pay-btn {
width: 100%;
height: 96rpx;
background: #007aff;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
}
.pay-text {
font-size: 36rpx;
color: #ffffff;
}
.status-bar {
width: 100vw;
height: 46px;
}
/* 底部区域 */
.bottom-area {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
box-sizing: border-box;
}
.agreement {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.agreement checkbox {
transform: scale(0.8);
margin-right: 10rpx;
}
.agreement-text {
font-size: 24rpx;
color: #333;
}
.agreement-link {
font-size: 28rpx;
color: #4080ff;
margin-left: 10rpx;
}
.submit-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
background-color: #4080ff;
color: #fff;
border-radius: 10rpx;
font-size: 36rpx;
font-weight: 500;
border: none;
outline: none;
}
.submit-btn[disabled] {
background-color: #a0c4ff;
color: #fff;
opacity: 0.7;
}
</style>

519
property-uniapp-project/pageSubPack/payment-list/paymentIndex.vue Normal file
View File

@@ -0,0 +1,519 @@
<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>
</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>
<view class="bill-info">
<view class="bill-title">{{item.name}}
<view class="bill-status debt" v-if="item.status=='已欠费'">已欠费</view>
</view>
<view class="bill-desc">{{item.address}}</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">
<<<<<<< HEAD
=======
>>>>>>> de6e6ebfc1fe0b87a29728bd9d5d2cddae9f726f
<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>
</view>
</view>
<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'
// 响应式数据
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",
},
{
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 addList = ref([{
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"
},
<<<<<<< HEAD
{
name: "暖气",
type: "heating",
icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
iconClass: "heating"
=======
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: '暖气费',
name: '物业费',
status: '',
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
},
{
id: 3,
// name: '电费',
name: '物业费',
status: '已欠费',
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
}
],
// 新增缴费列表数据
addList: [{
// name: "燃气",
name: '物业',
type: "gas",
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
iconClass: "gas"
},
{
// name: "水",
name: '物业',
type: "water",
icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
iconClass: "water"
},
{
// name: "物业",
name: '物业',
type: "property",
icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
iconClass: "property"
},
{
// name: "电",
name: '物业',
type: "electric",
icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
iconClass: "electric"
},
{
// name: "暖气",
name: '物业',
type: "heating",
icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
iconClass: "heating"
},
{
// name: "车位",
name: '物业',
type: "parking",
icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
iconClass: "parking"
}
]
}
>>>>>>> de6e6ebfc1fe0b87a29728bd9d5d2cddae9f726f
},
{
name: "车位",
type: "parking",
icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
iconClass: "parking"
}
])
// 生命周期
onReady(() => {})
onShow(() => {})
onLoad(() => {})
<<<<<<< HEAD
// 方法
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'
})
}
}
=======
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) {
// else if (type.name == '水' || type.name == '电')
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)
>>>>>>> de6e6ebfc1fe0b87a29728bd9d5d2cddae9f726f
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);
}
</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;
display: flex;
align-items: center;
flex-direction: column;
}
.icon-box {
width: 88rpx;
height: 88rpx;
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;
}
.status-bar {
width: 100vw;
height: 46px;
}
</style>