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

Merge branch 'main' of http://gitea.bugtc.com/zhouyanli/property-resident-side

Browse Source
This commit is contained in:
zhouyanli
2026-04-20 15:41:02 +08:00
parent 2a9dc159b1 cc1130e642
commit 1a70937fc0
6 changed files with 545 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
property-uniapp-project/pages.json
View File

@@ -381,7 +381,14 @@
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}, {
"path": "addHydropower",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}
]
},
{

1
property-uniapp-project/pages/my/myHouseIndex.vue
View File

@@ -326,6 +326,7 @@
margin-top:10rpx;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99 !important;
}

519
property-uniapp-project/pages/payment-list/addHydropower.vue Normal file
View File

@@ -0,0 +1,519 @@
<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=='水'?'/static/propertyImgs/water.png':'/static/propertyImgs/electric.png'">
</image>
<text class="card-title">{{paymentType+'费'}}</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="/static/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>
export default {
onReady: function(e) {},
components: {
},
computed: {
},
created() {
},
onShow() {
},
mounted() {},
onReady() {
this.$nextTick(() => {
})
},
data() {
return {
paymentType: uni.getStorageSync('addPaymentType'),
deviceNo: '', // 设备号
isAgree: false, // 是否同意协议
}
},
methods: {
handleAgreeChange(e) {
// e.detail.value 是数组，有值 = 选中，空 = 未选中
this.isAgree = e.detail.value.length > 0
},
// 扫码获取设备号 【uniapp+微信小程序双端兼容】
async scanCode() {
try {
const res = await uni.scanCode({
onlyFromCamera: false, // 允许相册+相机
scanType: ['qrCode', 'barCode'] // 支持二维码+条形码
})
// 扫码结果赋值给设备号输入框
this.deviceNo = res.result
} catch (err) {
console.log('扫码取消/失败', err)
}
},
// 缴费提交
goPay() {
if (!this.deviceNo) {
uni.showToast({
title: '请输入设备号',
icon: 'none'
})
return
}
if (!this.isAgree) {
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();
this.goNext()
}, 2500);
}
}
})
},
goNext() {
uni.redirectTo({
url: '/pages/payment-list/addPaymentSuccess',
success: res => {},
fail: () => {},
complete: () => {}
});
},
goBack() {
uni.switchTab({
url: '/pages/payment/paymentIndex',
success: res => {},
fail: () => {},
complete: () => {}
});
},
},
}
</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>

6
property-uniapp-project/pages/payment-list/addPayment.vue
View File

@@ -66,7 +66,7 @@
</scroll-view>
<!-- 底部协议和提交按钮 -->
<!-- 底部协议和立即缴费按钮 -->
<view class="bottom-area">
<view class="agreement">
<checkbox-group @change="handleAgreeChange">
@@ -75,10 +75,8 @@
<text class="agreement-text">我已阅并同意</text>
<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
</view>
<button class="submit-btn" @click="handleSubmit">
提交
立即缴费
</button>
</view>
</view>

22
property-uniapp-project/pages/payment-list/paymentIndex.vue
View File

@@ -180,13 +180,23 @@
},
// 跳转到新增缴费
goToAdd(type) {
if (type.name == '燃气') {
uni.redirectTo({
url: '/pages/payment-list/selectPaymentEntity',
success: res => {},
fail: () => {},
complete: () => {}
});
}else if(type.name == '水'||type.name == '电') {
uni.redirectTo({
url: '/pages/payment-list/addHydropower',
success: res => {},
fail: () => {},
complete: () => {}
});
}
uni.setStorageSync('addPaymentType', type.name)
uni.redirectTo({
url: '/pages/payment-list/selectPaymentEntity',
success: res => {},
fail: () => {},
complete: () => {}
});
},
goBack() {
uni.switchTab({

BIN
property-uniapp-project/static/propertyImgs/scanTheCodeIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB