4/20 水电表页面新增

property-uniapp-project/pages.json

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

property-uniapp-project/pages/my/myHouseIndex.vue

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

property-uniapp-project/pages/payment-list/addHydropower.vue

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

property-uniapp-project/pages/payment-list/addPayment.vue

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

property-uniapp-project/pages/payment-list/paymentIndex.vue

@@ -180,13 +180,23 @@
 			},
 			// 跳转到新增缴费
 			goToAdd(type) {
-				uni.setStorageSync('addPaymentType', type.name)
+				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)
+
 			},
 			goBack() {
 				uni.switchTab({