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

4/18 样式修改，缴费部分页面按照ui重做

Browse Source
This commit is contained in:
wangyuxin
2026-04-18 16:24:20 +08:00
parent 72ec4017e8
commit 452bf0b84d
36 changed files with 975 additions and 973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
property-uniapp-project/pages/payment-list/noArrearsPayment.vue
View File

@@ -1,149 +1,75 @@
<template>
<view class="contentStyle" style="">
<view class="status-bar"></view>
<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
:border="false">
</uni-nav-bar>
<Loading mask="true" click="true" ref="loading"></Loading>
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
<view class="container">
<!-- 1. 物业费详情页 -->
<view v-if="currentStep === 1" class="pay-page">
<view class="pay-page">
<!-- 金额展示 -->
<!-- 未欠费 -->
<view class="amount-section">
<text class="amount-text">- ¥1680.00</text>
<image src="/static/propertyImgs/noArrears.png" class="background-image-style"></image>
<text class="noArrearsText">暂未查到欠费</text>
<view class="recordText">
<text>{{'最近缴费：'+lastPayTime}}</text>
<text class="lineStyle">{{'|'}}</text>
<text>{{'缴费金额：'+lastPayNum+'元'}}</text>
</view>
</view>
<!-- 缴费信息 -->
<view class="info-section" style="">
<view class="info-item">
<text class="info-label">户名</text>
<text class="info-value">桂花园（别墅）2号楼2层</text>
<view v-if="arrearsPayment=='物业费'">
<view class="info-item">
<text class="info-label">户名</text>
<text class="info-value">桂花园（别墅）2号楼2层</text>
</view>
<view class="info-item">
<text class="info-label">户主</text>
<text class="info-value">周大声</text>
</view>
<view class="info-item">
<text class="info-label">缴费单位</text>
<text class="info-value">CT物业</text>
</view>
<view class="info-item">
<text class="info-label">可用余额</text>
<text class="info-value">0.00</text>
</view>
</view>
<view class="info-item">
<text class="info-label">户主</text>
<text class="info-value">周大声</text>
</view>
<view class="info-item">
<text class="info-label">缴费单位</text>
<text class="info-value">CT物业</text>
</view>
<view class="info-item" style="border-bottom: 1px solid #c7c7c7;padding-bottom: 10px;">
<text class="info-label">可用余额</text>
<text class="info-value">0.00</text>
</view>
<view class="info-payAmountItem">
<text class="info-payAmount">{{'￥'+payAmount}}</text>
<view v-else>
<view class="info-item" v-if="arrearsPayment=='暖气费'">
<text class="info-label">房屋</text>
<text class="info-value">桂花园（别墅）2号楼2层</text>
</view>
<view class="info-item">
<text class="info-label">户号</text>
<text class="info-value">101123456</text>
</view>
<view class="info-item">
<text class="info-label">户主</text>
<text class="info-value">周大声</text>
</view>
<view class="info-item">
<text class="info-label">缴费单位</text>
<text class="info-value">HN热力有限公司</text>
</view>
</view>
</view>
<!-- 缴费金额输入 -->
<!-- <view class="input-section">
<input type="number" v-model="payAmount" class="amount-input" placeholder="请输入缴费金额" />
</view> -->
<!-- 立即缴费按钮 -->
<view class="btn-section">
<button class="pay-btn" @click="handlePay">立即缴费</button>
</view>
</view>
<!-- 2. 支付密码弹窗 -->
<view v-if="currentStep === 2" class="modal-overlay" @click="closePasswordModal">
<view class="password-modal" @click.stop>
<!-- 弹窗头部 -->
<view class="modal-header">
<view class="close-icon" @click="closePasswordModal">
<text class="close-text">×</text>
</view>
<view class="modal-title">请输入支付密码</view>
<view class="header-right"></view>
</view>
<!-- 商户信息 & 金额 -->
<view class="pay-info">
<text class="merchant-name">智享日照洗护</text>
<text class="pay-amount">¥{{ payAmount }}</text>
</view>
<!-- 支付方式选择 -->
<view class="pay-way">
<text class="way-label">支付方式</text>
<view class="way-content">
<image class="bank-icon" src="/static/propertyImgs/bank-logo.png" mode="aspectFit">
</image>
<text class="bank-name">建设银行储蓄卡(8888)</text>
<text class="arrow-icon">></text>
</view>
</view>
<!-- 银行卡选择列表 -->
<!-- <view v-if="showBankList" class="bank-list">
<view v-for="(item, index) in bankList" :key="index" class="bank-item"
@click="selectBank(item)">
<image class="bank-item-icon" :src="item.icon" mode="aspectFit"></image>
<text class="bank-item-name">{{ item.name }}</text>
<text v-if="selectedBank.id === item.id" class="check-icon">&#xe60c;</text>
</view>
</view> -->
<!-- 密码输入框 -->
<view class="password-input">
<view v-for="(item, index) in 6" :key="index" class="password-item">
<text v-if="password.length > index" class="password-dot"></text>
</view>
</view>
<!-- 数字键盘 -->
<view class="keyboard">
<view class="keyboard-row">
<view class="keyboard-item" @click="inputPassword(1)">1</view>
<view class="keyboard-item" @click="inputPassword(2)">2</view>
<view class="keyboard-item" @click="inputPassword(3)">3</view>
</view>
<view class="keyboard-row">
<view class="keyboard-item" @click="inputPassword(4)">4</view>
<view class="keyboard-item" @click="inputPassword(5)">5</view>
<view class="keyboard-item" @click="inputPassword(6)">6</view>
</view>
<view class="keyboard-row">
<view class="keyboard-item" @click="inputPassword(7)">7</view>
<view class="keyboard-item" @click="inputPassword(8)">8</view>
<view class="keyboard-item" @click="inputPassword(9)">9</view>
</view>
<view class="keyboard-row">
<view class="keyboard-item empty"></view>
<view class="keyboard-item" @click="inputPassword(0)">0</view>
<view class="keyboard-item delete" @click="deletePassword">
<text class="icon">←</text>
</view>
</view>
</view>
</view>
</view>
<!-- 3. 缴费成功页 -->
<view v-if="currentStep === 3" class="success-page">
<view class="icon-box">
<!-- 成功图标 -->
<view class="success-icon">
<text class="icon">✓</text>
</view>
</view>
<!-- 成功文字 -->
<view class="success-text">缴费成功</view>
<view class="success-desc">成功缴纳物业费</view>
<!-- 返回按钮 -->
<view class="btn-section">
<button class="pay-btn" @click="handleBackToList">返回生活缴费</button>
</view>
</view>
</view>
@@ -168,12 +94,12 @@
computed: {
},
created() {
},
onShow() {
@@ -188,36 +114,12 @@
},
data() {
return {
lastPayTime: '2022-11-29',
lastPayNum: '2022.00',
/* 设定状态栏默认高度 */
statusBarHeight: 20,
arrearsPayment: uni.getStorageSync('arrearsPayment'),
currentStep: 1, // 1: 详情页 2: 密码弹窗 3: 成功页
payAmount: "1680.00", // 缴费金额
password: "", // 输入的密码
showBankList: false, // 是否显示银行卡列表
// 银行卡列表
bankList: [{
id: 1,
name: "建设银行储蓄卡(8888)",
icon: "/static/bank-logo.png"
},
{
id: 2,
name: "工商银行储蓄卡(6666)",
icon: "/static/icbc-logo.png"
},
{
id: 3,
name: "招商银行储蓄卡(9999)",
icon: "/static/cmb-logo.png"
}
],
// 默认选中的银行卡
selectedBank: {
id: 1,
name: "建设银行储蓄卡(8888)",
icon: "/static/bank-logo.png"
}
@@ -310,7 +212,7 @@
</script>
<style lang="scss">
page {
background: #f2f1f6;
background: #f9f9f9;
}
</style>
@@ -322,37 +224,54 @@
/* 关键：占满屏幕高度 */
background-color: #f9f9f9;
}
.page {
flex: 1;
overflow-y: auto;
padding: 0px 20px;
padding: 0px 40rpx;
box-sizing: border-box;
background-color: #fff;
}
/* 1. 物业费详情页 */
.pay-page {
width: 100%;
min-height: 100vh;
background-color: #fff;
}
.amount-section {
padding: 30px 0;
padding: 30rpx 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
color: #999999;
}
.amount-text {
font-size: 28px;
.background-image-style {
width: 466rpx;
height: 250rpx;
margin-bottom: 140rpx;
}
.noArrearsText {
padding-bottom: 50rpx;
width: 100%;
border-bottom: 2rpx solid #ededed;
}
.recordText {
font-size: 24rpx;
color: #222;
margin-top: 20rpx;
font-weight: 600;
color: #bd3124;
}
.info-section {
padding: 0 15px 15px 15px;
/* margin-bottom: 20px; */
.info-section {}
.lineStyle {
margin: 0rpx 30rpx;
}
@@ -360,58 +279,57 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
height: 80rpx;
}
.info-label {
font-size: 15px;
font-size: 30rpx;
color: #666;
}
.info-value {
font-size: 15px;
font-size: 30rpx;
color: #333;
font-weight: 600;
}
.info-payAmountItem {
height: 50px;
line-height: 50px;
margin-bottom: 30px;
height: 100rpx;
line-height: 100rpx;
margin-bottom: 60rpx;
}
.info-payAmount {
font-size: 25px;
font-size: 50rpx;
color: #333;
font-weight: 600;
}
.input-section {
padding: 0 15px;
margin-bottom: 30px;
padding: 030rpx;
margin-bottom: 60rpx;
}
.amount-input {
width: 100%;
height: 50px;
font-size: 24px;
height: 100rpx;
font-size: 48rpx;
border: none;
outline: none;
}
.btn-section {
padding: 0 15px;
padding: 030rpx;
}
.pay-btn {
width: 100%;
height: 50px;
line-height: 50px;
height: 100rpx;
line-height: 100rpx;
background-color: #007aff;
color: #fff;
border-radius: 8px;
font-size: 16px;
border-radius: 16rpx;
font-size: 32rpx;
border: none;
outline: none;
}
@@ -432,51 +350,51 @@
.password-modal {
width: 100%;
background-color: #fff;
border-radius: 12px 12px 0 0;
padding-bottom: 20px;
border-radius: 24rpx24rpx 0 0;
padding-bottom: 40rpx;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
padding: 0 15px;
border-bottom: 1px solid #f0f0f0;
height: 100rpx;
padding: 030rpx;
border-bottom: 2rpx solid #f0f0f0;
}
.close-icon {
font-size: 22px;
width: 40px;
height: 50px;
font-size: 44rpx;
width: 80rpx;
height: 100rpx;
display: flex;
align-items: center;
}
.modal-title {
font-size: 17px;
font-size: 32rpx;
font-weight: 500;
color: #000;
}
.header-right {
width: 40px;
width: 80rpx;
}
.pay-info {
padding: 20px 15px;
padding: 40rpx30rpx;
text-align: center;
}
.merchant-name {
display: block;
font-size: 16px;
font-size: 32rpx;
color: #333;
margin-bottom: 10px;
margin-bottom: 20rpx;
}
.pay-amount {
font-size: 32px;
font-size: 64rpx;
font-weight: 500;
color: #000;
}
@@ -485,12 +403,12 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #f0f0f0;
padding: 30rpx;
border-bottom: 2rpx solid #f0f0f0;
}
.way-label {
font-size: 15px;
font-size: 30rpx;
color: #666;
}
@@ -500,33 +418,33 @@
}
.bank-icon {
width: 16px;
height: 16px;
margin-right: 3px;
width: 32rpx;
height: 32rpx;
margin-right: 6rpx;
}
.bank-name {
font-size: 15px;
font-size: 30rpx;
color: #333;
margin-right: 8px;
margin-right: 16rpx;
}
.arrow-icon {
font-size: 14px;
font-size: 28rpx;
color: #999;
}
/* 银行卡列表 */
.bank-list {
padding: 0 15px;
border-bottom: 1px solid #f0f0f0;
padding: 030rpx;
border-bottom: 2rpx solid #f0f0f0;
}
.bank-item {
display: flex;
align-items: center;
height: 50px;
border-bottom: 1px solid #f5f5f5;
height: 100rpx;
border-bottom: 2rpx solid #f5f5f5;
}
.bank-item:last-child {
@@ -534,19 +452,19 @@
}
.bank-item-icon {
width: 24px;
height: 24px;
margin-right: 10px;
width: 48rpx;
height: 48rpx;
margin-right: 20rpx;
}
.bank-item-name {
flex: 1;
font-size: 15px;
font-size: 30rpx;
color: #333;
}
.check-icon {
font-size: 18px;
font-size: 36rpx;
color: #007aff;
}
@@ -554,23 +472,23 @@
.password-input {
display: flex;
justify-content: space-between;
padding: 20px 15px;
padding: 40rpx30rpx;
}
.password-item {
width: 50px;
height: 50px;
/* border: 1px solid #dcdcdc; */
width: 100rpx;
height: 100rpx;
/* border: 2rpx solid #dcdcdc; */
background-color: #efefef;
border-radius: 4px;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
}
.password-dot {
width: 12px;
height: 12px;
width: 24rpx;
height: 24rpx;
background-color: #000;
border-radius: 50%;
}
@@ -589,9 +507,9 @@
height: 54px;
line-height: 54px;
text-align: center;
font-size: 24px;
font-size: 48rpx;
color: #000;
border: 1px solid #f0f0f0;
border: 2rpx solid #f0f0f0;
background-color: #fff;
}
@@ -621,13 +539,13 @@
display: flex;
justify-content: center;
width: 100vw;
height: 150px;
padding: 30px 0px;
height: 1100rpx;
padding: 60rpx 0px;
}
.success-icon {
/* margin-top: 60px; */
margin-bottom: 20px;
/* margin-top: 120rpx; */
margin-bottom: 40rpx;
width: 100px;
height: 100px;
font-size: 80px;
@@ -642,17 +560,19 @@
.success-icon .iconfont {}
.success-text {
font-size: 20px;
font-size: 40rpx;
font-weight: 600;
color: #000;
margin-bottom: 10px;
margin-bottom: 20rpx;
}
.success-desc {
font-size: 15px;
font-size: 30rpx;
color: #999;
margin-bottom: 50px;
}.status-bar{
margin-bottom: 100rpx;
}
.status-bar {
width: 100vw;
height: 46px;
}