缴费页面及户号绑定页面、首页变更

app.json

@@ -2,9 +2,10 @@
   "pages": [
     "pages/homepage/homepage",
     "pages/FirstBangDing/FirstBangDing",
+
     "pages/profile/profile",
-    "pages/huhaobangding/huhaobangding"
-    
+    "pages/huhaobangding/huhaobangding",
+    "pages/lijijiaofei/lijijiaofei"
   ],
   "tabBar": {
     "color": "rgba(182, 189, 205, 1)",
@@ -27,7 +28,8 @@
   },
   "window": {
     "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#4080FF"
+    "navigationBarBackgroundColor": "#4080FF",
+    "navigationStyle": "custom"
   },
   "componentFramework": "glass-easel",
   "sitemapLocation": "sitemap.json",

pages/FirstBangDing/FirstBangDing.js

@@ -24,7 +24,7 @@ Page({
     }
   },
   onLoad(options) {
-    // 页面加载时获取图片路径
+    // 页面加载时获取图片路径 
     this.setData({
       images: {
         logo: app.globalData.images.logo,

pages/homepage/homepage.js

@@ -20,7 +20,7 @@ Page({
     billInfo: {
       totalAmount: 73.28,  // 总计应缴
       waterUsage: 0,      // 用水量
-      balance: 4.72       // 账户余额
+      balance: 0       // 账户余额
     },
     // 功能按钮配置
     functionList: [
@@ -30,9 +30,9 @@ Page({
         // url: '/pages/waterUsage/waterUsage'
       },
       {
-        icon: '/static_file/yhbx.png',
-        text: '用户报修',
-        // url: '/pages/repair/repair'
+        icon: '/static_file/zdlb.png',
+        text: '账单列表',
+        url: '/pages/zhangdanlist/zhangdanlist'
       },
       {
         icon: '/static_file/yjfk.png',
@@ -45,9 +45,9 @@ Page({
         // url: '/pages/notice/notice'
       },
       {
-        icon: '/static_file/zdlb.png',
-        text: '账单列表',
-        // url: '/pages/notice/notice'
+        icon: '/static_file/yhbx.png',
+        text: '用户报修',
+        // url: '/pages/repair/repair'
       }
     ],
     // 活动信息
@@ -118,5 +118,12 @@ Page({
     wx.navigateTo({
       // url: '/pages/activityList/activityList'
     })
+  },
+
+  // 跳转到立即缴费页面
+  goToPayment: function() {
+    wx.navigateTo({
+      url: '/pages/lijijiaofei/lijijiaofei',
+    })
   }
 })

pages/homepage/homepage.wxml

@@ -13,7 +13,7 @@
         <view class="info-row">
           <text class="label">户名</text>
           <text class="value">{{userInfo.name}}</text>
-          <view class="switch-btn" bindtap="handleSwitchMeter">切换水表</view>
+          <view class="switch-btn" bindtap="handleSwitchMeter">切换户号</view>
         </view>
 
         <view class="info-row">
@@ -62,7 +62,7 @@
       </view>
 
       <!-- 充值缴费按钮 -->
-      <button class="pay-btn" bindtap="handlePayment">充值缴费</button>
+      <button class="pay-btn" bindtap="goToPayment">立即缴费</button>
     </view>
   </view>
 

pages/homepage/homepage.wxss

@@ -25,7 +25,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #0080ff;
+  background: linear-gradient(180deg, rgba(46, 130, 255, 1) 0%, rgba(46, 130, 255, 1) 84.9%, rgba(46, 130, 255, 0) 100%);
 }
 
 .header .logo {
@@ -74,9 +74,9 @@
 .switch-btn {
   position: absolute;
   right: 0;
-  background-color: #f0f8ff;
+  background-color: rgba(45, 128, 254, 0.12);
   color: #0080ff;
-  font-size: 24rpx;
+  font-size: 26rpx;
   padding: 8rpx 20rpx;
   border-radius: 30rpx;
 }
@@ -92,7 +92,7 @@
   width: 200rpx;
   position: absolute;
   left: -30rpx; 
-  bottom: 13rpx;
+  bottom: 0rpx;
 }
 
 .amount-display {
@@ -173,10 +173,11 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  width: 100%;
 }
 
 .function-item {
-  width: 20%;
+  width: 25%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -238,7 +239,7 @@
   width: 90%;
   margin: 0 auto;
   position: relative;
-  z-index: 10;
+  z-index: 100;
   margin-top: 40rpx;
   background-color: transparent;
   border-radius: 20rpx;

pages/huhaobangding/huhaobangding.js

@@ -5,9 +5,42 @@ Page({
     selectedTag: '',
     showCustomInput: false,
     customTagLength: 0,
-    customTagName: '',
-    tzd: '/static_file/jcsfcjtzd.jpg',
-    showPreview: false
+    showDrawer: false,
+    showPreview: false,
+    
+    // 新增数据
+    waterCompany: '',
+    waterCompanyList: ['北京水务集团', '上海水务集团', '广州水务集团', '深圳水务集团', '杭州水务集团'],
+    waterCompanyIndex: [0],
+    showWaterCompanyPicker: false,
+    tempWaterCompanyIndex: [0],
+    
+    huHao: '',
+    huMing: '',
+    customTag: '',
+    tagLength: 0,
+    showQueryMethods: false,
+    phoneQueryList: [
+      {
+        id: 1,
+        name: '1、前进西路营业厅',
+        phone: ' 17630145126',
+        time: '8:30-17:30'
+      },
+      {
+        id: 2,
+        name: '2、浦江路营业厅',
+        phone: '0516-17630145126',
+        time: '8:30-17:30'
+      },
+      {
+        id: 3,
+        name: '3、 测试路营业厅',
+        phone: '17630145126-345',
+        time: '8:30-17:30'
+      }
+      // 可以添加更多项，将支持滚动显示
+    ]
   },
 
   selectTag(e) {
@@ -21,8 +54,8 @@ Page({
   onCustomInput(e) {
     const value = e.detail.value;
     this.setData({
-      customTagName: value,
-      customTagLength: value.length
+      customTagLength: value.length,
+      customTag: value
     });
   },
 
@@ -40,11 +73,11 @@ Page({
     });
   },
 
-
   // 拨打电话
-  makePhoneCall() {
+  makePhoneCall(e) {
+    const phone = e.currentTarget.dataset.phone;
     wx.makePhoneCall({
-      phoneNumber: '17630145126'
+      phoneNumber: phone
     });
   },
 
@@ -65,5 +98,143 @@ Page({
   // 防止点击图片内容时关闭预览
   preventBubble: function() {
     return;
+  },
+
+  // 显示水站公司选择器
+  showWaterCompanyPicker: function() {
+    this.setData({
+      showWaterCompanyPicker: true,
+      tempWaterCompanyIndex: this.data.waterCompanyIndex
+    });
+  },
+
+  // 隐藏水站公司选择器
+  hideWaterCompanyPicker: function() {
+    this.setData({
+      showWaterCompanyPicker: false
+    });
+  },
+
+  // 水站公司选择变化
+  onWaterCompanyChange: function(e) {
+    this.setData({
+      tempWaterCompanyIndex: e.detail.value
+    });
+  },
+
+  // 确认水站公司选择
+  confirmWaterCompany: function() {
+    const index = this.data.tempWaterCompanyIndex[0];
+    this.setData({
+      waterCompanyIndex: this.data.tempWaterCompanyIndex,
+      waterCompany: this.data.waterCompanyList[index],
+      showWaterCompanyPicker: false
+    });
+  },
+
+  // 户号输入
+  onHuHaoInput: function(e) {
+    this.setData({
+      huHao: e.detail.value
+    });
+  },
+
+  // 户名输入
+  onHuMingInput: function(e) {
+    this.setData({
+      huMing: e.detail.value
+    });
+  },
+
+  // 确认绑定
+  confirmBinding: function() {
+    // 验证必填字段
+    if (!this.data.waterCompany) {
+      wx.showToast({
+        title: '请选择水站公司',
+        icon: 'none'
+      });
+      return;
+    }
+
+    if (!this.data.huHao) {
+      wx.showToast({
+        title: '请输入户号',
+        icon: 'none'
+      });
+      return;
+    }
+
+    if (!this.data.huMing) {
+      wx.showToast({
+        title: '请输入户名',
+        icon: 'none'
+      });
+      return;
+    }
+
+    // 处理分组信息
+    let groupInfo = this.data.selectedTag;
+    if (this.data.selectedTag === '自定义' && this.data.customTag) {
+      groupInfo = this.data.customTag;
+    }
+
+    // 提交数据
+    wx.showLoading({
+      title: '绑定中...',
+    });
+
+    // 模拟API调用
+    setTimeout(() => {
+      wx.hideLoading();
+      wx.showToast({
+        title: '绑定成功',
+        icon: 'success',
+        duration: 2000,
+        success: () => {
+          // 绑定成功后跳转
+          setTimeout(() => {
+            wx.navigateBack();
+          }, 2000);
+        }
+      });
+    }, 1500);
+  },
+
+  onLoad: function() {
+    // 延迟设置导航栏，确保页面已完全加载
+    setTimeout(() => {
+      wx.setNavigationBarTitle({
+        title: '户号绑定'
+      });
+      
+      wx.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#0066FF'
+      });
+    }, 100);
+  },
+
+  // 添加返回方法
+  navigateBack: function() {
+    wx.navigateBack();
+  },
+
+  onTagInput(e) {
+    this.setData({
+      tagLength: e.detail.value.length
+    });
+  },
+
+  showQueryMethodsModal() {
+    this.setData({
+      showQueryMethods: true
+    });
+  },
+
+  closeQueryMethods() {
+    this.setData({
+      showQueryMethods: false
+    });
   }
 });

pages/huhaobangding/huhaobangding.json

@@ -1,4 +1,7 @@
 {
   "navigationBarTitleText": "户号绑定",
-  "backgroundColor": "#F8F8F8"
-}
+  "navigationBarBackgroundColor": "#0066FF",
+  "navigationBarTextStyle": "white",
+  "backgroundColor": "#F8F8F8",
+  "usingComponents": {}
+}

pages/huhaobangding/huhaobangding.wxml

@@ -1,22 +1,41 @@
-<view class="container">
-  <view class="form-group">
+<view class="container2">
+  <view class="custom-nav">
+    <view class="nav-back" bindtap="navigateBack">
+      <view class="back-arrow"></view>
+    </view>
+    <view class="nav-title">户号绑定</view>
+    <view class="nav-placeholder"></view>
+  </view>
+  
+  <view class="form-group1">
+    <view class="form-item">
+      <text class="label">水站公司<text class="required">*</text></text>
+      <view class="picker-container" bindtap="showWaterCompanyPicker">
+        <text class="picker-text">{{waterCompany || '请选择水站公司'}}</text>
+        <view class="arrow-right"></view>
+      </view>
+    </view>
+  </view>
+
+  <view class="form-group2">
     <view class="form-item">
-      <text class="label">户号</text>
-      <input type="text" placeholder="请绑定缴费户号" placeholder-class="placeholder" />
+      <text class="label">户号<text class="required">*</text></text>
+      <input type="text" placeholder="请绑定缴费户号" placeholder-class="placeholder" bindinput="onHuHaoInput" value="{{huHao}}" />
       <view class="check-auth-btn" bindtap="showDrawer">
         查看获取方式
       </view>
     </view>
 
     <view class="form-item">
-      <text class="label">手机号</text>
-      <input type="number" placeholder="请输入手机号" placeholder-class="placeholder" />
+      <text class="label">户名<text class="required">*</text></text>
+      <input type="text" placeholder="请输入户名" placeholder-class="placeholder" bindinput="onHuMingInput" value="{{huMing}}" />
     </view>
   </view>
 
   <view class="group-select">
-    <text class="section-title">设置分组(可选)</text>
+    <text class="section-title">选择分组<text class="optional">(选填)</text></text>
     <view class="tag-group">
+      <!-- <view class="tag {{selectedTag === '默认户号' ? 'active' : ''}}" bindtap="selectTag" data-tag="默认户号">默认户号</view> -->
       <view class="tag {{selectedTag === '家' ? 'active' : ''}}" bindtap="selectTag" data-tag="家">家</view>
       <view class="tag {{selectedTag === '父母' ? 'active' : ''}}" bindtap="selectTag" data-tag="父母">父母</view>
       <view class="tag {{selectedTag === '公司' ? 'active' : ''}}" bindtap="selectTag" data-tag="公司">公司</view>
@@ -28,24 +47,39 @@
     <block wx:if="{{showCustomInput}}">
       <view class="custom-group">
         <view class="custom-input">
-          <input type="text" placeholder="请输入标签名称" placeholder-class="placeholdersecond" bindinput="onCustomInput" />
-          <text class="count">{{customTagLength}}/4字</text>
+          <input type="text" placeholder="请输入标签名称" maxlength="4" bindinput="onTagInput" />
+          <view class="char-limit {{tagLength > 4 ? 'error' : ''}}">{{tagLength}}/4</view>
         </view>
       </view>
     </block>
   </view>
 
   <view class="submit-btn">
-    <button type="primary">确认绑定</button>
+    <button type="primary" bindtap="confirmBinding">确认绑定</button>
   </view>
 
   <view class="tips">
-    <text>1、请确认上述信息是您定期水表。</text>
-    <text>2、如果您的水表为合收费表，我们将绑定的是您对应的主表信息。</text>
+    <text>1、水站公司选择可以根据催缴通知单查询或者电话咨询水利站工作人员。</text>
+    <text>2、绑定户号：户号必须准确，否则无法绑定。</text>
+    <text>3、户号可以从催缴单上查询或者当地营业厅。</text>
   </view>
 
 </view>
 
+<view class="picker-mask" wx:if="{{showWaterCompanyPicker}}" bindtap="hideWaterCompanyPicker"></view>
+<view class="picker-container-modal {{showWaterCompanyPicker ? 'show' : ''}}">
+  <view class="picker-header">
+    <view class="picker-cancel" bindtap="hideWaterCompanyPicker">取消</view>
+    <view class="picker-title">选择水站公司</view>
+    <view class="picker-confirm" bindtap="confirmWaterCompany">确定</view>
+  </view>
+  <picker-view class="water-company-picker" indicator-style="height: 50px;" value="{{waterCompanyIndex}}" bindchange="onWaterCompanyChange">
+    <picker-view-column>
+      <view wx:for="{{waterCompanyList}}" wx:key="index" class="picker-item">{{item}}</view>
+    </picker-view-column>
+  </picker-view>
+</view>
+
 <view class="drawer-mask" wx:if="{{showDrawer}}" bindtap="hideDrawer"></view>
 <view class="drawer-container {{showDrawer ? 'show' : ''}}">
   <view class="drawer-close"></view>
@@ -58,18 +92,27 @@
       <view class="auth-method-desc">从纸质版水费催缴通知单上查看用水户号。</view>
     </view>
     <view class="preview" bindtap="previewImage">
-        <image class="preview-icon" src="/static_file/yl.png"></image>
-        <text class="preview-text">预览图</text>
-      </view>
+      <image class="preview-icon" src="/static_file/yl.png"></image>
+      <text class="preview-text">预览图</text>
+    </view>
   </view>
 
   <view class="auth-method">
     <image class="auth-method-icon" src="/static_file/phone.png" mode="aspectFit"></image>
     <view class="auth-method-content">
       <view class="auth-method-title">电话查询</view>
-      <view class="auth-method-desc">提供户号地址拨打服热线电话，客服在线时间为早9:00至晚20:00。</view>
     </view>
-    <view class="auth-method-action" bindtap="makePhoneCall">拨打电话</view>
+  </view>
+  
+  <view class="phone-query-list">
+    <view class="phone-query-item" wx:for="{{phoneQueryList}}" wx:key="id">
+      <view class="phone-query-name">{{item.name}}</view>
+      <view class="phone-query-contact">
+        <text>联系电话：{{item.phone}}</text>
+        <view class="call-btn" data-phone="{{item.phone}}" bindtap="makePhoneCall">拨打电话</view>
+      </view>
+      <view class="phone-query-time">客服在线时间：{{item.time}}</view>
+    </view>
   </view>
 </view>
 

pages/huhaobangding/huhaobangding.wxss

@@ -1,24 +1,75 @@
-.container {
+.container2 {
   padding: 30rpx;
   background-color: #F5F5F5;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  padding-top: 230rpx;
+}
+.custom-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 88rpx; 
+  background-color: rgba(46, 130, 255, 1);
+  display: flex;
+  align-items: center;
+  padding-top: 110rpx; 
+  z-index: 1000;
+}
+
+.nav-back {
+  width: 88rpx; 
+  height: 88rpx; 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-arrow {
+  width: 24rpx;
+  height: 24rpx; 
+  border-left: 4rpx solid #fff; 
+  border-bottom: 4rpx solid #fff; 
+  transform: rotate(45deg);
+}
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+  color: #fff;
+  font-size: 34rpx; 
+  font-weight: 500;
+}
+
+.nav-placeholder {
+  width: 88rpx; 
 }
 
-.form-group {
+.form-group1 {
   background-color: #FFFFFF;
   border-radius: 18rpx;
   padding: 0 40rpx;
-  margin-bottom: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+.form-group2 {
+  background-color: #FFFFFF;
+  border-radius: 18rpx;
+  padding: 0 40rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 }
 
 .form-item {
   display: flex;
   align-items: center;
-  padding: 34rpx 0;
+  padding: 30rpx 0;
 }
 
+
 .form-item:first-child {
   border-bottom: 1rpx solid #EEEEEE;
 }
@@ -29,6 +80,9 @@
   font-size: 30rpx;
   text-align: left;
   margin-right: 20rpx;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 
 input {
@@ -90,9 +144,9 @@ input {
 
 .tag-group {
   display: flex;
-  flex-wrap: nowrap;
-  gap: 12rpx;
-  padding: 30rpx 0;
+  flex-wrap: wrap;
+  gap: 6rpx;
+  padding: 34rpx 0;
   overflow-x: auto;
   white-space: nowrap;
 }
@@ -101,7 +155,7 @@ input {
   padding: 12rpx 24rpx;
   background-color: #F5F5F5;
   border-radius: 8rpx;
-  font-size: 26rpx;
+  font-size: 27rpx;
   color: rgba(0, 0, 0, 1);
   display: inline-block;
 }
@@ -170,7 +224,7 @@ input {
 .check-auth-btn {
   background-color: rgba(45, 128, 254, 0.12);
   font-family: 'PingFang SC', sans-serif;
-  border-radius: 2px;
+  border-radius: 4rpx; 
   padding: 10rpx 20rpx;
   color: rgba(31, 103, 212, 1);
   font-size: 28rpx;
@@ -322,4 +376,222 @@ input {
   color: #333333;
   border-radius: 40rpx;
   font-size: 28rpx;
+}
+
+/* 页面标题样式 */
+.page-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  text-align: center;
+  padding: 30rpx 0; 
+  border-bottom: 2rpx solid #eee; 
+  margin-bottom: 30rpx; 
+}
+
+/* 必填标记样式 */
+.required {
+  color: #f00;
+  margin-left: 4rpx; 
+}
+
+/* 选填标记样式 */
+.optional {
+  color: #999;
+  font-size: 28rpx; 
+  font-weight: normal;
+  margin-left: 10rpx; 
+}
+
+/* 水站公司选择器样式 */
+.picker-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  height: 100%;
+  padding-right: 20rpx; 
+}
+
+.picker-text {
+  color: #999;
+  text-align: right;
+}
+
+.arrow-right {
+  width: 0;
+  height: 0;
+  border-left: 12rpx solid transparent;
+  border-right: 12rpx solid transparent; 
+  border-top: 16rpx solid #333; 
+  margin-left: 20rpx; 
+}
+
+/* 水站公司选择器模态框 */
+.picker-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.picker-container-modal {
+  position: fixed;
+  bottom: -600rpx;
+  left: 0;
+  right: 0;
+  background: #fff;
+  z-index: 1001;
+  transition: all 0.3s ease;
+  height: 600rpx; 
+}
+
+.picker-container-modal.show {
+  bottom: 0;
+}
+
+.picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 30rpx; 
+  border-bottom: 2rpx solid #eee; 
+}
+
+.picker-cancel, .picker-confirm {
+  font-size: 28rpx; 
+  padding: 10rpx 20rpx; 
+}
+
+.picker-cancel {
+  color: #999;
+}
+
+.picker-confirm {
+  color: #1aad19;
+}
+
+.picker-title {
+  font-size: 32rpx;
+  color: #333;
+}
+
+.water-company-picker {
+  height: 500rpx; 
+  width: 100%;
+}
+
+.picker-item {
+  line-height: 100rpx; 
+  text-align: center;
+}
+
+/* 确保水站公司和户号户名分开显示 */
+.water-station-card {
+  background-color: #FFFFFF;
+  border-radius: 18rpx;
+  padding: 30rpx 40rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.user-info-card {
+  background-color: #FFFFFF;
+  border-radius: 18rpx;
+  padding: 0 40rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.divider {
+  height: 1rpx;
+  background-color: #EEEEEE;
+  width: 100%;
+}
+
+/* 标签输入限制提示 */
+.char-limit {
+  font-size: 24rpx;
+  color: #999;
+  text-align: right;
+  margin-top: 10rpx;
+}
+
+.char-limit.error {
+  color: #FF4D4F;
+}
+
+/* 电话查询列表样式 */
+.phone-query-list {
+  padding: 0 0rpx;
+  max-height: 400rpx;
+  overflow-y: auto;
+}
+
+.phone-query-item {
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #EEEEEE;
+}
+
+.phone-query-item:last-child {
+  border-bottom: none;
+}
+
+.phone-query-name {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 10rpx;
+  padding-left: 60rpx;
+}
+
+.phone-query-contact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 28rpx;
+  color: #2E82FF;
+  margin-bottom: 10rpx;
+  padding-left: 60rpx;
+}
+
+.phone-query-time {
+  font-size: 26rpx;
+  color: #999;
+  padding-left: 60rpx;
+}
+
+/* 拨打电话按钮样式 */
+.call-btn {
+  background-color: #E6F0FF;
+  color: #2E82FF;
+  font-size: 28rpx;
+  padding: 10rpx 30rpx;
+  border-radius: 30rpx;
+  margin-left: 20rpx;
+}
+
+/* 调整电话查询联系方式样式 */
+.phone-query-contact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 28rpx;
+  color: #2E82FF;
+  margin-bottom: 10rpx;
+  padding-left: 60rpx;
+}
+
+/* 确保按钮在小屏幕上也能正常显示 */
+@media screen and (max-width: 375px) {
+  .phone-query-contact {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .call-btn {
+    margin-left: 0;
+    margin-top: 10rpx;
+  }
 }

pages/zhangdanlist/zhangdanlist.js

@@ -0,0 +1,262 @@
+Page({
+  data: {
+    images: {
+      logo: '',
+      background: '',
+      card: '',
+      tzd: "",
+      phone: "",
+      yl: "",
+      jcsfcjtzd: ""
+    },
+    userInfo: {
+      name: '王源',
+      phone: '32018545245104',
+      address: '徐州市丰县***楼102室'
+    },
+    amount: 73.28, //应缴金额
+    actualAmount: 73.28,
+    balance: 0,   // 余额
+    quickAmounts: [10, 30, 50, 100, 200, 500],
+    waterUsage: {
+      lastReading: 2000,
+      currentReading: 2050,
+      nextReading: 3020,
+      usage: 87
+    },
+    showKeyboard: false,
+    selectedAmount: null,
+    customAmount: '',
+    inputFocus: false,
+  },
+  onLoad() {
+    this.setData({
+      images: {
+        logo:'/static_file/logo.png',
+        background:'/static_file/background.png',
+        card:'/static_file/card.png',
+        tzd:'/static_file/backgrountzdd.png',
+        phone:'/static_file/phone.png',
+        yl:'/static_file/background.yl',
+        jcsfcjtzd:'/static_file/jcsfcjtzd.png',
+        kapiantubiao:'/static_file/kapiantubiao.png'
+        
+      }
+    })
+    // 获取状态栏高度
+    const systemInfo = wx.getSystemInfoSync();
+    this.setData({
+      statusBarHeight: systemInfo.statusBarHeight
+    });
+    this.fetchPaymentData();
+  },
+
+  // 选择快捷金额
+  selectAmount: function(e) {
+    const amount = e.currentTarget.dataset.amount;
+    this.setData({
+      amount: parseFloat(amount),
+      selectedAmount: parseFloat(amount),
+      customAmount: '' // 清空自定义金额
+    });
+  },
+
+  // 立即缴费
+  payNow: function() {
+    wx.showLoading({
+      title: '处理中',
+    });
+    
+    // 模拟支付
+    setTimeout(() => {
+      wx.hideLoading();
+      wx.showToast({
+        title: '缴费成功',
+        icon: 'success',
+        duration: 2000,
+        success: () => {
+          // 支付成功后返回首页
+          setTimeout(() => {
+            wx.navigateBack();
+          }, 2000);
+        }
+      });
+    }, 1500);
+  },
+
+  // 返回上一页
+  goBack: function() {
+    wx.navigateBack();
+  },
+
+  // 切换到首页
+  goToHome: function() {
+    wx.switchTab({
+      url: '/pages/homepage/homepage',
+    });
+  },
+
+  // 切换到我的页面
+  goToMine: function() {
+    wx.switchTab({
+      url: '/pages/mine/mine',
+    });
+  },
+
+  // 添加切换水表的方法
+  switchMeter: function() {
+    wx.navigateTo({
+      url: '/pages/switchMeter/switchMeter', 
+    })
+  },
+
+  navigateToHome() {
+    wx.switchTab({
+      url: '/pages/index/index'
+    })
+  },
+
+  navigateToMine() {
+    wx.switchTab({
+      url: '/pages/mine/mine'
+    })
+  },
+
+  // 显示键盘 - 使用微信内置键盘
+  showCustomAmountInput: function() {
+    // 使用微信内置的输入框
+    wx.showModal({
+      title: '请输入金额',
+      placeholderText: '请输入缴费金额',
+      editable: true,
+      success: (res) => {
+        if (res.confirm && res.content) {
+          // 验证输入是否为有效数字
+          const inputAmount = parseFloat(res.content);
+          if (!isNaN(inputAmount) && inputAmount > 0) {
+            this.setData({
+              amount: inputAmount
+            });
+          } else {
+            wx.showToast({
+              title: '请输入有效金额',
+              icon: 'none'
+            });
+          }
+        }
+      }
+    });
+  },
+  
+  // 输入数字
+  inputNumber: function(e) {
+    const number = e.currentTarget.dataset.number;
+    let amount = this.data.amount;
+    
+    // 处理小数点
+    if (number === '.' && amount.includes('.')) {
+      return;
+    }
+    
+    // 限制小数点后两位
+    if (amount.includes('.') && amount.split('.')[1].length >= 2 && number !== '.') {
+      return;
+    }
+    
+    // 更新金额
+    this.setData({
+      amount: amount === '0' ? number : amount + number
+    });
+  },
+  
+  // 删除数字
+  deleteNumber: function() {
+    let amount = this.data.amount;
+    if (amount.length <= 1) {
+      this.setData({
+        amount: '0'
+      });
+    } else {
+      this.setData({
+        amount: amount.substring(0, amount.length - 1)
+      });
+    }
+  },
+  
+  // 确认输入
+  confirmInput: function() {
+    this.setData({
+      showKeyboard: false
+    });
+  },
+
+  // 添加自定义金额输入处理函数
+  onCustomAmountInput: function(e) {
+    let value = e.detail.value;
+    
+    // 限制只能输入小数点后两位
+    if (value.indexOf('.') !== -1) {
+      const parts = value.split('.');
+      if (parts[1].length > 2) {
+        value = parts[0] + '.' + parts[1].substring(0, 2);
+      }
+    }
+    
+    // 验证输入是否为有效数字
+    if (value) {
+      const inputAmount = parseFloat(value);
+      if (!isNaN(inputAmount) && inputAmount >= 0) {
+        // 更新实缴金额和自定义金额
+        this.setData({
+          amount: inputAmount,
+          customAmount: value,
+          selectedAmount: null // 取消快捷金额的选中状态
+        });
+      } else {
+        this.setData({
+          customAmount: value
+        });
+      }
+    } else {
+      // 输入框为空时
+      this.setData({
+        customAmount: '',
+        amount: 0
+      });
+    }
+  },
+
+  // 输入框获得焦点
+  onInputFocus: function() {
+    this.setData({
+      inputFocus: true,
+      selectedAmount: null // 取消快捷金额的选中状态
+    });
+  },
+  
+  // 输入框失去焦点
+  onInputBlur: function() {
+    this.setData({
+      inputFocus: false
+    });
+  },
+
+  // 从接口获取支付数据
+  fetchPaymentData: function() {
+    // 这里是模拟数据，实际应用中应该调用真实接口
+    // wx.request({
+    //   url: 'your-api-endpoint',
+    //   success: (res) => {
+    //     this.setData({
+    //       amountDue: res.data.amountDue,
+    //       balance: res.data.balance
+    //     });
+    //   }
+    // });
+    
+    // this.setData({
+    //   amountDue: 150.00,
+    //   balance: 200.50
+    // });
+  },
+}) 

pages/zhangdanlist/zhangdanlist.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/zhangdanlist/zhangdanlist.wxml

@@ -0,0 +1,95 @@
+<view class="container">
+  <!-- 顶部导航以及背景 -->
+  <view class="header">
+    <image class="background" src="{{images.background}}" mode="widthFix" />
+    <view class="back-icon" bindtap="goBack">←</view>
+  </view>
+
+  <!-- 添加自定义导航栏 -->
+  <view class="custom-nav" style="height: 200rpx; background-color: #4285f4;"></view>
+
+  <!-- 用户信息 -->
+  <view class="user-info-container">
+    <view class="user-info">
+      <view class="user-name">王源</view>
+      <view class="user-id">
+        <image src="/static_file/hh.png" class="id-icon"></image>
+        <text>320185452454104</text>
+      </view>
+      <view class="user-address">
+        <image src="/static_file/location.png" class="address-icon"></image>
+        <text>徐州市丰县****楼102室</text>
+      </view>
+      <!-- <view class="change-btn" bindtap="switchMeter">切换水表</view> -->
+    </view>
+  </view>
+
+  <!-- 缴费金额 -->
+  <view class="payment-section">
+    <view class="amount-container">
+      <view class="amount-title">实缴金额</view>
+      <view class="amount-display">
+        <text class="amount-value">{{amount}}</text>
+        <text class="amount-unit">元</text>
+      </view>
+      
+      <!-- 余额显示 -->
+      <view class="balance-info">
+        <text class="balance-label">应缴金额：</text>
+        <text class="balance-value">{{actualAmount}} </text><text class="balance-unit">元</text>
+        <text class="balance-label margin-left">余额：</text>
+        <text class="balance-value">{{balance}} </text><text class="balance-unit">元</text>
+      </view>
+      
+      <view class="quick-amount">
+        <view class="amount-btn {{selectedAmount == 10 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="10">10元</view>
+        <view class="amount-btn {{selectedAmount == 30 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="30">30元</view>
+        <view class="amount-btn {{selectedAmount == 50 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="50">50元</view>
+        <view class="amount-btn {{selectedAmount == 100 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="100">100元</view>
+        <view class="amount-btn {{selectedAmount == 200 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="200">200元</view>
+        <view class="amount-btn {{selectedAmount == 500 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="500">500元</view>
+        <view class="custom-input-container {{customAmount || inputFocus ? 'selected' : ''}}">
+          <text class="yuan-symbol">¥</text>
+          <input class="custom-amount-input" type="digit" bindinput="onCustomAmountInput" 
+                 value="{{customAmount}}" placeholder="自定义金额"
+                 bindfocus="onInputFocus" bindblur="onInputBlur"/>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 温馨提示 - 调整位置 -->
+  <view class="tips">
+    <text class="tips-title">温馨提示：</text>
+    <text class="tips-content">若无应缴金额，系统将充值到余额。</text>
+  </view>
+
+  <!-- 缴费按钮 - 调整样式 -->
+  <view class="pay-btn" bindtap="payNow">立即缴费</view>
+
+  <!-- 数字键盘部分 -->
+  <view class="keyboard" wx:if="{{showKeyboard}}">
+    <view class="keyboard-row">
+      <view class="key" bindtap="inputNumber" data-number="1">1</view>
+      <view class="key" bindtap="inputNumber" data-number="2">2</view>
+      <view class="key" bindtap="inputNumber" data-number="3">3</view>
+      <view class="key delete" bindtap="deleteNumber"><image src="/images/delete-icon.png" mode="aspectFit"></image></view>
+    </view>
+    <view class="keyboard-row">
+      <view class="key" bindtap="inputNumber" data-number="4">4</view>
+      <view class="key" bindtap="inputNumber" data-number="5">5</view>
+      <view class="key" bindtap="inputNumber" data-number="6">6</view>
+      <view class="key confirm" bindtap="confirmInput">确定</view>
+    </view>
+    <view class="keyboard-row">
+      <view class="key" bindtap="inputNumber" data-number="7">7</view>
+      <view class="key" bindtap="inputNumber" data-number="8">8</view>
+      <view class="key" bindtap="inputNumber" data-number="9">9</view>
+    </view>
+    <view class="keyboard-row">
+      <view class="key zero" bindtap="inputNumber" data-number="0">0</view>
+      <view class="key" bindtap="inputNumber" data-number=".">.</view>
+    </view>
+  </view>
+
+</view> 

pages/zhangdanlist/zhangdanlist.wxss

@@ -0,0 +1,383 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 30rpx;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  height: 180rpx;
+}
+
+.header .background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(46, 130, 255, 1) 0%, rgba(46, 130, 255, 1) 84.9%, rgba(46, 130, 255, 0) 100%);
+}
+
+.back-icon {
+  position: absolute;
+  left: 30rpx;
+  top: 120rpx;
+  font-size: 40rpx;
+  color: white;
+  z-index: 10;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-title {
+  text-align: center;
+  font-size: 36rpx;
+  margin-bottom: 20rpx;
+}
+.user-info-container {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0rpx 30rpx;
+  top: -200rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.user-info {
+  background-color: transparent;
+  color: white;
+  padding: 30rpx;
+  border-radius: 20rpx;
+  position: relative;
+  width: 100%;
+}
+
+.user-name {
+  font-size: 40rpx;
+  font-weight: bold;
+  margin-bottom: 24rpx;
+}
+
+.user-id, .user-address {
+  display: flex;
+  align-items: center;
+  font-size: 30rpx;
+  margin-bottom: 20rpx;
+  color: rgba(255, 255, 255, 1);
+}
+
+.id-icon, .address-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+
+
+.user-phone, .user-address {
+  display: flex;
+  font-size: 15px;
+  margin-bottom: 3px;
+  color: rgba(255, 255, 255, 1);
+}
+
+.user-phone image, .user-address image {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+
+.edit-btn {
+  position: absolute;
+  right: 30rpx;
+  top: 30rpx;
+  font-size: 28rpx;
+  color: #1989fa;
+  padding: 10rpx 20rpx;
+  border: 1px solid #1989fa;
+  border-radius: 30rpx;
+}
+
+.payment-section {
+  position: relative;
+  background-color: transparent;
+  margin: -10rpx 30rpx;
+  border-radius: 20rpx;
+  padding: 0;
+  top: -200rpx;
+  box-shadow: none;
+  width: calc(100% - 70rpx);
+  box-sizing: border-box;
+}
+
+.payment-title {
+  font-size: 32rpx;
+  color: rgba(46, 48, 56, 1);
+  margin-bottom: 20rpx;
+}
+
+.payment-amount {
+  font-size: 60rpx;
+  color: rgba(239, 93, 93, 1);
+  font-weight: bold;
+  margin: 30rpx 0;
+}
+
+.quick-amounts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.amount-item {
+  width: 30%;
+  text-align: center;
+  background-color: #f5f5f5;
+  padding: 20rpx 0;
+  margin-bottom: 20rpx;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+}
+
+.usage-info {
+  margin-top: 30rpx;
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.pay-btn {
+  background-color: #1989fa;
+  color: white;
+  font-size: 36rpx;
+  text-align: center;
+  padding: 24rpx 0;
+  border-radius: 60rpx;
+  margin: 40rpx auto;
+  margin-bottom: 160rpx;
+  width: 85%;
+  max-width: 800rpx;
+}
+
+.switch-meter {
+  padding: 5px 10px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #333;
+}
+
+/* 金额显示样式 */
+.amount-container {
+  background-color: white;
+  border-radius: 20rpx;
+  padding: 40rpx 30rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+}
+
+.amount-title {
+  font-size: 34rpx;
+  color: rgba(46, 48, 56, 1);
+  margin-bottom: 10rpx;
+}
+
+.amount-display {
+  position: relative;
+  margin-bottom: 30rpx;
+  display: flex;
+  align-items: flex-end;
+}
+
+.amount-value {
+  font-size: 72rpx;
+  color: rgba(239, 93, 93, 1);
+  font-weight: bold;
+  line-height: 1;
+}
+
+.amount-unit {
+  font-size: 28rpx;
+  color: #333;
+  margin-left: 4rpx;
+  margin-bottom: 10rpx;
+}
+
+/* 余额信息样式调整 */
+.balance-info {
+  display: flex;
+  font-size: 34rpx;
+  margin-bottom: 30rpx;
+  align-items: center;
+}
+
+.balance-label {
+  color: #666;
+}
+
+.balance-value {
+  color: rgba(239, 93, 93, 1);
+  font-weight: bold;
+}
+
+.balance-unit {
+  color: #333;
+  margin-right: 10rpx;
+}
+
+.margin-left {
+  margin-left: 20rpx;
+}
+
+/* 快捷金额选择 */
+.quick-amount {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+
+.amount-btn {
+  width: 30%;
+  text-align: center;
+  padding: 24rpx 0;
+  border: 2rpx solid #ddd;
+  border-radius: 10rpx;
+  margin-bottom: 24rpx;
+  font-size: 34rpx;
+  color: #333;
+  background-color: rgba(242, 245, 250, 1);
+}
+
+.amount-btn:active {
+  background-color: #f5f5f5;
+}
+
+.custom-amount {
+  color: #1e90ff;
+  border-color: #1e90ff;
+}
+
+.custom-amount:active {
+  background-color: rgba(30, 144, 255, 0.05);
+}
+
+/* 温馨提示位置调整 */
+.tips {
+  font-size: 24rpx;
+  color: #999;
+  padding: 20rpx 30rpx;
+  top: -200rpx;
+  text-align: left;
+  border-top: none;
+  position: relative;
+  left: -100rpx;
+}
+
+.tips-title {
+  color:  rgba(239, 93, 93, 1);
+}
+tips-content {
+  color:  rgba(104, 108, 128, 1);
+}
+/* 数字键盘样式优化 */
+.keyboard {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #f0f0f0;
+  padding: 20rpx;
+  z-index: 1000;
+  border-top: 2rpx solid #ddd;
+}
+
+.keyboard-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+
+.key {
+  width: 23%;
+  height: 100rpx;
+  background-color: white;
+  border-radius: 10rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40rpx;
+  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+  margin: 0 10rpx;
+}
+
+.key.zero {
+  width: 48%;
+}
+
+.delete {
+  background-color: #f5f5f5;
+}
+
+.delete image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.confirm {
+  background-color: #1e90ff;
+  color: white;
+}
+
+/* 自定义金额输入框样式 - 修改为与快捷金额按钮一致 */
+.custom-input-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 2rpx solid #ddd; /* 默认边框颜色与快捷金额按钮一致 */
+  border-radius: 10rpx;
+  margin-bottom: 24rpx;
+  padding: 0 10rpx;
+  background-color: rgba(242, 245, 250, 1);
+}
+
+/* 自定义金额输入框选中状态 */
+.custom-input-container.selected {
+  border: 2rpx solid rgba(46, 125, 253, 1);
+}
+
+.yuan-symbol {
+  color: rgba(63, 65, 76, 1); /* 默认颜色 */
+  font-size: 34rpx;
+  margin-right: 4rpx;
+}
+
+/* 选中状态下的¥符号颜色 */
+.custom-input-container.selected .yuan-symbol {
+  color: rgba(46, 125, 253, 1);
+}
+
+.custom-amount-input {
+  flex: 1;
+  height: 80rpx;
+  font-size: 34rpx;
+  color: #333; 
+}
+
+/* 选中状态下的输入框文字颜色 */
+.custom-input-container.selected .custom-amount-input {
+  color: rgba(46, 125, 253, 1);
+}
+
+/* 添加选中状态的样式 */
+.amount-btn.selected {
+  border: 2rpx solid rgba(46, 125, 253, 1);
+  color: rgba(46, 125, 253, 1);
+}

project.config.json

@@ -36,6 +36,6 @@
     "tabIndent": "auto",
     "tabSize": 2
   },
-  "appid": "wx021dffc1b1a5de18",
+  "appid": "wxaec1c618349b81a5",
   "simulatorPluginLibVersion": {}
 }