账单列表页面、保修单页面

app.json

@@ -5,7 +5,9 @@
     "pages/profile/profile",
     "pages/huhaobangding/huhaobangding",
     "pages/lijijiaofei/lijijiaofei",
-    "pages/zhangdanlist/zhangdanlist"
+    "pages/zhangdanlist/zhangdanlist",
+    "pages/zhangdanxiangqing/zdxiangqing",
+    "pages/baoxiudj/baoxiudj"
   ],
   "tabBar": {
     "color": "rgba(182, 189, 205, 1)",
@@ -37,4 +39,4 @@
   "usingComponents": {
     "t-button": "tdesign-miniprogram/button/button"
   }
-}
+}

pages/baoxiudj/baoxiudj.js

@@ -0,0 +1,208 @@
+Page({
+  data: {
+    address: '安平镇安坪村安平小区12栋305室',
+    contact: '',
+    phone: '',
+    repairType: '',
+    description: '',
+    imageList: [],
+    showNotification: true,
+    countDown: 3
+  },
+
+  onLoad: function(options) {
+    this.startCountDown();
+  },
+
+  startCountDown: function() {
+    let that = this;
+    let timer = setInterval(function() {
+      if (that.data.countDown > 0) {
+        that.setData({
+          countDown: that.data.countDown - 1
+        });
+      } else {
+        clearInterval(timer);
+      }
+    }, 1000);
+  },
+
+  closeNotification: function() {
+    if (this.data.countDown <= 0) {
+      this.setData({
+        showNotification: false
+      });
+    }
+  },
+
+  goBack: function() {
+    wx.navigateBack();
+  },
+
+  inputContact: function(e) {
+    this.setData({
+      contact: e.detail.value
+    });
+  },
+
+  inputPhone: function(e) {
+    const value = e.detail.value;
+    const phoneNumber = value.replace(/\D/g, '');
+    this.setData({
+      phone: phoneNumber
+    });
+  },
+
+  validatePhone: function(phone) {
+    const phoneReg = /^1[3-9]\d{9}$/;
+    return phoneReg.test(phone);
+  },
+
+  showRepairTypeSelector: function() {
+    let that = this;
+    wx.showActionSheet({
+      itemList: ['水管漏水', '水表故障', '水龙头故障', '其他问题'],
+      success: function(res) {
+        const types = ['水管漏水', '水表故障', '水龙头故障', '其他问题'];
+        that.setData({
+          repairType: types[res.tapIndex]
+        });
+      }
+    });
+  },
+
+  inputDescription: function(e) {
+    this.setData({
+      description: e.detail.value
+    });
+  },
+
+  chooseImage: function() {
+    let that = this;
+    if (that.data.imageList.length >= 10) {
+      wx.showToast({
+        title: '最多只能上传10张图片',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    wx.chooseMedia({
+      count: 3 - that.data.imageList.length,
+      mediaType: ['image'],
+      sourceType: ['album', 'camera'],
+      sizeType: ['compressed'],
+      success: function(res) {
+        let tempFiles = res.tempFiles;
+        let validFiles = [];
+        
+        for (let i = 0; i < tempFiles.length; i++) {
+          const file = tempFiles[i];
+          if (file.size <= 5 * 1024 * 1024) {
+            validFiles.push(file.tempFilePath);
+          } else {
+            wx.showToast({
+              title: '图片大小不能超过5M',
+              icon: 'none'
+            });
+          }
+        }
+        
+        if (validFiles.length > 0) {
+          let newImageList = that.data.imageList.concat(validFiles);
+          that.setData({
+            imageList: newImageList
+          });
+        }
+      }
+    });
+  },
+
+  previewImage: function(e) {
+    let index = e.currentTarget.dataset.index;
+    wx.previewImage({
+      current: this.data.imageList[index],
+      urls: this.data.imageList
+    });
+  },
+
+  deleteImage: function(e) {
+    let index = e.currentTarget.dataset.index;
+    let imageList = this.data.imageList;
+    imageList.splice(index, 1);
+    this.setData({
+      imageList: imageList
+    });
+  },
+
+  submitRepair: function() {
+    if (!this.data.contact) {
+      wx.showToast({
+        title: '请输入联系人',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    if (!this.data.phone) {
+      wx.showToast({
+        title: '请输入联系电话',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    if (!this.validatePhone(this.data.phone)) {
+      wx.showToast({
+        title: '请输入正确的手机号',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    if (!this.data.repairType) {
+      wx.showToast({
+        title: '请选择报修类型',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    if (!this.data.description) {
+      wx.showToast({
+        title: '请输入故障说明',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    const submitData = {
+      address: this.data.address,
+      contact: this.data.contact,
+      phone: this.data.phone,
+      repairType: this.data.repairType,
+      description: this.data.description,
+      images: this.data.imageList
+    };
+    
+    console.log('提交的数据:', submitData);
+    
+    wx.showLoading({
+      title: '提交中...',
+    });
+    
+    setTimeout(() => {
+      wx.hideLoading();
+      wx.showToast({
+        title: '报修提交成功',
+        icon: 'success',
+        duration: 2000,
+        success: function() {
+          setTimeout(() => {
+            wx.navigateBack();
+          }, 2000);
+        }
+      });
+    }, 1500);
+  }
+}); 

pages/baoxiudj/baoxiudj.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+} 

pages/baoxiudj/baoxiudj.wxml

@@ -0,0 +1,83 @@
+<view class="container4">
+  
+
+  <!-- 返回按钮 -->
+  <view class="custom-nav">
+    <view class="fixed-back" bindtap="goBack">←</view>
+    <view class="nav-title">报修登记</view>
+  </view>
+
+  <!-- 第一个卡片：地址、联系人、联系电话 -->
+  <view class="bill-card first-card">
+    <view class="bill-row">
+      <text>地址</text>
+      <text class="bill-row-address">{{address}}</text>
+    </view>
+    <view class="divider"></view>
+    <view class="bill-row">
+      <text>联系人</text>
+      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputContact" value="{{contact}}" />
+    </view>
+    <view class="divider"></view>
+    <view class="bill-row">
+      <text>联系电话</text>
+      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputPhone" value="{{phone}}" type="number" maxlength="11" />
+    </view>
+  </view>
+
+  <!-- 第二个卡片：报修类型 -->
+  <view class="bill-card" bindtap="showRepairTypeSelector">
+    <view class="bill-row">
+      <text>报修类型</text>
+      <view class="selector-value">
+        <text class="{{repairType ? 'input-text' : 'placeholder-style'}}">{{repairType || '请选择'}}</text>
+        <text class="arrow">></text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 第三个卡片：故障说明 -->
+  <view class="bill-card">
+    <view class="card-title">故障说明</view>
+    <view class="solid-divider"></view>
+    <view class="fault-description">
+      <textarea class="input-text" placeholder="请输入描述说明..." placeholder-class="placeholder-style" bindinput="inputDescription" value="{{description}}"></textarea>
+    </view>
+    <view class="upload-section">
+      <view class="upload-btn-container solid-border">
+        <view class="upload-btn" bindtap="chooseImage">
+          <view class="plus-icon">+</view>
+        </view>
+      </view>
+      <view class="image-preview" wx:if="{{imageList.length > 0}}">
+        <block wx:for="{{imageList}}" wx:key="index">
+          <view class="image-item">
+            <image src="{{item}}" mode="aspectFill" bindtap="previewImage" data-index="{{index}}"></image>
+            <view class="delete-icon" catchtap="deleteImage" data-index="{{index}}">×</view>
+          </view>
+        </block>
+      </view>
+    </view>
+    <view class="upload-tip" wx:if="{{imageList.length < 10}}">
+    </view>
+  </view>
+
+  <!-- 提交按钮 -->
+  <view class="submit-btn" bindtap="submitRepair">提交</view>
+  
+  <!-- 报修须知弹窗 -->
+  <view class="notification-modal" wx:if="{{showNotification}}">
+    <view class="notification-content">
+      <view class="notification-title">报修须知</view>
+      <view class="notification-divider"></view>
+      <view class="notification-list">
+        <view class="notification-item">1. 进水表前管线问题报修不涉及费用</view>
+        <view class="notification-item">2. 进水表后管线问题属于用户管辖问题，若维修会产生费用。</view>
+        <view class="notification-item">3. 更换水表和更换阀门等问题将收取服务费</view>
+      </view>
+      <view class="notification-btn {{countDown > 0 ? 'disabled-btn' : ''}}" bindtap="closeNotification">
+        知道了{{countDown > 0 ? '(' + countDown + 's)' : ''}}
+      </view>
+    </view>
+  </view>
+</view>

pages/baoxiudj/baoxiudj.wxss

@@ -0,0 +1,260 @@
+.container4 {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding-top: calc(90rpx + 44px + 20rpx); /* 增加了额外的顶部间距 */
+}
+
+.custom-nav {
+  display: flex;
+  align-items: center;
+  height: 90rpx;
+  margin-bottom: 20rpx;
+  background-color: #2E82FF;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 0 20rpx;
+  padding-top: 44px; /* 适配iPhone状态栏 */
+}
+
+.fixed-back {
+  font-size: 40rpx;
+  width: 60rpx;
+  text-align: center;
+  color: #fff;
+}
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 34rpx;
+  color: #fff;
+}
+
+.nav-placeholder {
+  width: 60rpx;
+}
+
+.bill-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+}
+
+/* 第一个卡片额外的顶部间距 */
+.first-card {
+  margin-top: 20rpx;
+}
+
+.bill-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0; 
+}
+
+.bill-row-address {
+  color: rgba(104, 108, 128, 1);
+}
+
+.divider {
+  height: 1rpx;
+  background-color: #eee;
+  margin: 10rpx 0; /* 增加了分隔线上下间距 */
+}
+
+.solid-divider {
+  height: 1rpx;
+  background-color: #ddd;
+  margin: 15rpx 0 20rpx 0;
+}
+
+.card-title {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 10rpx;
+}
+
+.input-right {
+  text-align: right;
+  width: 60%;
+}
+
+.input-text {
+  color: rgba(104, 108, 128, 1); 
+}
+
+.placeholder-style {
+  color: #999;
+  text-align: right;
+}
+
+.selector-value {
+  display: flex;
+  align-items: center;
+}
+
+.arrow {
+  margin-left: 10rpx;
+  color: #999;
+}
+
+.fault-description {
+  margin-bottom: 20rpx;
+}
+
+.fault-description textarea {
+  width: 100%;
+  height: 150rpx;
+  padding: 10rpx;
+  box-sizing: border-box;
+  font-size: 28rpx;
+}
+
+.upload-section {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.upload-btn-container {
+  width: 150rpx;
+  height: 150rpx;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+  border-radius: 8rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.solid-border {
+  border: 2rpx solid #ccc;
+}
+
+.upload-btn {
+  width: 120rpx;
+  height: 120rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.plus-icon {
+  font-size: 60rpx;
+  color: #999;
+}
+
+.upload-tip {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 10rpx;
+}
+
+.image-preview {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.image-item {
+  width: 150rpx;
+  height: 150rpx;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+  position: relative;
+}
+
+.image-item image {
+  width: 100%;
+  height: 100%;
+  border-radius: 8rpx;
+}
+
+.delete-icon {
+  position: absolute;
+  top: -15rpx;
+  right: -15rpx;
+  width: 40rpx;
+  height: 40rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24rpx;
+}
+
+.submit-btn {
+  background-color: #007aff;
+  color: #fff;
+  text-align: center;
+  padding: 25rpx 0;
+  border-radius: 50rpx;
+  margin-top: 40rpx;
+  font-size: 32rpx;
+}
+
+/* 报修须知弹窗样式 */
+.notification-modal {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  height: 100%;
+}
+
+.notification-content {
+  background-color: #fff;
+  width: 100%;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 40rpx 30rpx;
+}
+
+.notification-title {
+  text-align: center;
+  font-size: 36rpx;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}
+
+.notification-divider {
+  height: 1rpx;
+  background-color: #ddd;
+  margin-bottom: 30rpx;
+}
+
+.notification-list {
+  margin-bottom: 40rpx;
+}
+
+.notification-item {
+  margin-bottom: 20rpx;
+  font-size: 28rpx;
+  line-height: 1.5;
+}
+
+.notification-btn {
+  background-color: #007aff;
+  color: #fff;
+  text-align: center;
+  padding: 25rpx 0;
+  border-radius: 50rpx;
+  font-size: 32rpx;
+}
+
+.disabled-btn {
+  background-color: #999;
+  pointer-events: none;
+}

pages/homepage/homepage.js

@@ -47,7 +47,7 @@ Page({
       {
         icon: '/static_file/yhbx.png',
         text: '用户报修',
-        // url: '/pages/repair/repair'
+        url: '/pages/baoxiudj/baoxiudj'
       }
     ],
     // 活动信息

pages/huhaobangding/huhaobangding.wxml

@@ -4,7 +4,6 @@
       <view class="back-arrow"></view>
     </view>
     <view class="nav-title">户号绑定</view>
-    <view class="nav-placeholder"></view>
   </view>
   
   <view class="form-group1">

pages/huhaobangding/huhaobangding.wxss

@@ -41,12 +41,8 @@
   text-align: center;
   color: #fff;
   font-size: 34rpx; 
-  font-weight: 500;
 }
 
-.nav-placeholder {
-  width: 88rpx; 
-}
 
 .form-group1 {
   background-color: #FFFFFF;

pages/lijijiaofei/lijijiaofei.wxml

@@ -1,94 +1,93 @@
 <view class="container">
-  <!-- 顶部导航以及背景 -->
-  <view class="header">
-    <image class="background" src="{{images.background}}" mode="widthFix" />
-    <view class="back-icon" bindtap="goBack">←</view>
-  </view>
+  <view class="fixed-back" bindtap="goBack">←</view>
+    <!-- 顶部导航以及背景 -->
+    <view class="header">
+      <image class="background" src="{{images.background}}" mode="widthFix" />
+    </view>
 
- <view class="custom-nav" style="height: 200rpx; background-color: #4285f4;"></view>
+    <view 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 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 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 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>
 
-  <!-- 温馨提示 - 调整位置 -->
-  <view class="tips">
-    <text class="tips-title">温馨提示：</text>
-    <text class="tips-content">若无应缴金额，系统将充值到余额。</text>
-  </view>
+    <!-- 温馨提示 - 调整位置 -->
+    <view class="tips">
+      <text class="tips-title">温馨提示：</text>
+      <text class="tips-content">若无应缴金额，系统将充值到余额。</text>
+    </view>
 
-  <!-- 缴费按钮 - 调整样式 -->
-  <view class="pay-btn" bindtap="payNow">立即缴费</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 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>
-
 </view> 

pages/lijijiaofei/lijijiaofei.wxss

@@ -4,6 +4,9 @@
   background-color: #f5f5f5;
   min-height: 100vh;
   padding-bottom: 30rpx;
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .header {
@@ -46,7 +49,7 @@
   justify-content: space-between;
   align-items: flex-start;
   padding: 0rpx 30rpx;
-  top: -200rpx;
+  top: -180rpx;
   width: 100%;
   box-sizing: border-box;
 }
@@ -108,10 +111,10 @@
 .payment-section {
   position: relative;
   background-color: transparent;
-  margin: -10rpx 30rpx;
+  margin:  -10rpx 30rpx 0 30rpx;
   border-radius: 120rpx;
   padding: 0;
-  top: -200rpx;
+  top: -180rpx;
   box-shadow: none;
   width: calc(100% - 70rpx);
   box-sizing: border-box;
@@ -179,7 +182,7 @@
 .amount-container {
   background-color: white;
   border-radius: 20rpx;
-  padding: 40rpx 30rpx;
+  padding: 40rpx 30rpx 1rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
 }
 
@@ -274,7 +277,7 @@
   font-size: 24rpx;
   color: #999;
   padding: 20rpx 30rpx;
-  top: -200rpx;
+  top: -180rpx;
   text-align: left;
   border-top: none;
   position: relative;
@@ -380,4 +383,23 @@ tips-content {
 .amount-btn.selected {
   border: 2rpx solid rgba(46, 125, 253, 1);
   color: rgba(46, 125, 253, 1);
+}
+
+/* 固定返回按钮样式 */
+.fixed-back {
+  position: fixed;
+  top: 50rpx;
+  left: 30rpx;
+  z-index: 999;
+  border-radius: 50%;
+  width: 50rpx;
+  height: 200rpx;
+  display: flex;
+  align-items: center;
+  color: rgba(255, 255, 255, 1);
+}
+
+.scrollable-content {
+  height: 100%;
+  width: 100%;
 }

pages/zhangdanlist/zhangdanlist.js

@@ -23,41 +23,11 @@ Page({
     selectedAmount: null,
     customAmount: '',
     inputFocus: false,
-    billList: [
-      {
-        date: '2025/01/30',
-        billNumber: '250201100235',
-        usage: '87m³',
-        startReading: '2000',
-        endReading: '2025',
-        paymentTime: '2025/01/31 14:39',
-        amount: '73.28',
-        status: '未缴费'
-      },
-      {
-        date: '2024/12/30',
-        billNumber: '2502011035211',
-        usage: '121m³',
-        startReading: '2000',
-        endReading: '2025',
-        paymentTime: '2025/01/03 09:51',
-        amount: '127.28',
-        status: '已缴费'
-      },
-      {
-        date: '2024/11/30',
-        billNumber: '2502011035211',
-        usage: '121m³',
-        startReading: '2000',
-        endReading: '2025',
-        paymentTime: '2024/12/03 09:51',
-        amount: '127.28',
-        status: '已缴费'
-      }
-    ]
+    address: '',
+    billList: []
   },
   
-  onLoad() {
+  onLoad: function(options) {
     // 确保图片资源正确加载
     this.setData({
       images: {
@@ -66,10 +36,17 @@ Page({
       }
     });
     
-    // 获取账单列表数据
+    // 获取地址信息
+    if (options.address) {
+      this.setData({
+        address: options.address
+      });
+    }
+    
+    // 获取账单列表
     this.getBillList();
   },
-
+  
   // 返回上一页
   goBack: function() {
     wx.navigateBack({
@@ -79,24 +56,114 @@ Page({
   
   // 从接口获取账单列表数据
   getBillList: function() {
-    // 实际项目中，这里应该调用API获取数据
-    wx.showLoading({
-      title: '加载中',
-    });
-    
-    // 模拟API请求完成后隐藏加载提示
-    setTimeout(() => {
-      wx.hideLoading();
-    }, 500);
-  },
-  
-  // 点击立即缴费按钮
-  payNow: function(e) {
-    const index = e.currentTarget.dataset.index;
-    const bill = this.data.billList[index];
+    // 这里应该是从API获取数据，这里用模拟数据
+    const mockData = [
+      {
+        billDate: '2025/01/30',
+        billNumber: '250201100235',
+        amount: '73.28',
+        usage: '87',
+        meterReading: '2000-2025',
+        paymentTime: '2025/01/31 14:39',
+        isPaid: false,
+        currentDate: '2025/01/30',
+        currentReading: '2025',
+        lastDate: '2024/12/30',
+        lastReading: '2000',
+        totalAmount: '85.62',
+        discount: '12.34',
+        lateFee: '0',
+        payableAmount: '73.28'
+      },
+      {
+        billDate: '2024/12/30',
+        billNumber: '250201103521',
+        amount: '127.28',
+        usage: '121',
+        meterReading: '2000-2025',
+        paymentTime: '2025/01/03 09:51',
+        isPaid: true,
+        currentDate: '2024/12/30',
+        currentReading: '2000',
+        lastDate: '2024/11/30',
+        lastReading: '1975',
+        totalAmount: '137.28',
+        discount: '10.00',
+        lateFee: '0',
+        payableAmount: '127.28'
+      },
+      {
+        billDate: '2024/11/30',
+        billNumber: '250201103521',
+        amount: '127.28',
+        usage: '121',
+        meterReading: '2000-2025',
+        paymentTime: '2024/12/03 09:51',
+        isPaid: true,
+        currentDate: '2024/11/30',
+        currentReading: '1975',
+        lastDate: '2024/10/31',
+        lastReading: '1950',
+        totalAmount: '137.28',
+        discount: '10.00',
+        lateFee: '0',
+        payableAmount: '127.28'
+      },
+      {
+        billDate: '2024/11/30',
+        billNumber: '250201103521',
+        amount: '127.28',
+        usage: '121',
+        meterReading: '2000-2025',
+        paymentTime: '2024/12/03 09:51',
+        isPaid: true,
+        currentDate: '2024/11/30',
+        currentReading: '1950',
+        lastDate: '2024/10/31',
+        lastReading: '1925',
+        totalAmount: '137.28',
+        discount: '10.00',
+        lateFee: '0',
+        payableAmount: '127.28'
+      },
+      {
+        billDate: '2024/11/30',
+        billNumber: '250201103521',
+        amount: '127.28',
+        usage: '121',
+        meterReading: '2000-2025',
+        paymentTime: '2024/12/03 09:51',
+        isPaid: true,
+        currentDate: '2024/11/30',
+        currentReading: '1925',
+        lastDate: '2024/10/31',
+        lastReading: '1900',
+        totalAmount: '137.28',
+        discount: '10.00',
+        lateFee: '0',
+        payableAmount: '127.28'
+      },
+      {
+        billDate: '2024/11/30',
+        billNumber: '250201103521',
+        amount: '127.28',
+        usage: '121',
+        meterReading: '2000-2025',
+        paymentTime: '2024/12/03 09:51',
+        isPaid: true,
+        currentDate: '2024/11/30',
+        currentReading: '1900',
+        lastDate: '2024/10/31',
+        lastReading: '1875',
+        totalAmount: '137.28',
+        discount: '10.00',
+        lateFee: '0',
+        payableAmount: '127.28'
+      }
+    ];
     
-    wx.navigateTo({
-      url: '/pages/lijijiaofei/lijijiaofei?billNumber=' + bill.billNumber + '&amount=' + bill.amount
+    this.setData({
+      billList: mockData
     });
   },
   
@@ -135,5 +202,23 @@ Page({
     wx.switchTab({
       url: '/pages/mine/mine'
     })
+  },
+
+  // 跳转到账单详情页面
+  goToBillDetail: function(e) {
+    const bill = e.currentTarget.dataset.bill;
+    wx.navigateTo({
+      url: '/pages/zhangdanxiangqing/zdxiangqing?billInfo=' + JSON.stringify(bill)
+    });
+  },
+  
+  // 获取发票
+  getInvoice: function(e) {
+    // 阻止事件冒泡，避免触发goToBillDetail
+    e.stopPropagation();
+    const bill = e.currentTarget.dataset.bill;
+    wx.navigateTo({
+      url: '/pages/invoice/invoice?billInfo=' + JSON.stringify(bill)
+    });
   }
 }) 

pages/zhangdanlist/zhangdanlist.wxml

@@ -1,14 +1,12 @@
 <view class="container">
-  <!-- 顶部导航以及背景 -->
+  <view class="fixed-back" bindtap="goBack">←</view>
+  
+  <!-- 固定顶部区域 -->
   <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">{{userInfo.name}}</view>
@@ -23,35 +21,41 @@
     </view>
   </view>
   
-
-  <!-- 账单列表 -->
-  <scroll-view class="bill-list-container" scroll-y="true">
-    <block wx:for="{{billList}}" wx:key="index">
-      <view class="bill-date-section">{{item.date}}</view>
-      <view class="bill-card">
-        <view class="bill-info">
-          <view class="bill-icon">
-            <image src="/static_file/water.png" mode="aspectFit"></image>
-          </view>
-          <view class="bill-details">
-            <view class="bill-number">{{item.billNumber}}</view>
-            <view class="bill-usage">用水{{item.usage}}㎡ | 读数{{item.startReading}}-{{item.endReading}}</view>
-            <view class="bill-payment-time">缴费时间: {{item.paymentTime}}</view>
+  <!-- 添加固定高度的外层容器 -->
+  <view class="bill-list-wrapper">
+    <!-- 可滚动的账单列表 -->
+    <scroll-view class="bill-list" scroll-y="true">
+      <block wx:for="{{billList}}" wx:key="index">
+        <view class="bill-card" bindtap="goToBillDetail" data-bill="{{item}}">
+          <view class="bill-date">
+            <text>{{item.billDate}}</text>
+            <view wx:if="{{item.isPaid}}" class="invoice-btn" catchtap="getInvoice" data-bill="{{item}}">开发票></view>
           </view>
-          <view class="bill-amount-status">
-            <view class="bill-amount {{item.status === '未缴费' ? 'unpaid' : 'paid'}}">¥ {{item.amount}}</view>
-            <view class="bill-status {{item.status === '未缴费' ? 'unpaid' : 'paid'}}">{{item.status}}</view>
+          
+          <view class="bill-info">
+            <!-- 水滴图标区域 -->
+            <view class="bill-icon">
+              <image src="/static_file/water.png" class="water-icon"></image>
+            </view>
+            
+            <!-- 账单信息区域 -->
+            <view class="bill-info-left">
+              <view class="bill-number">{{item.billNumber}}</view>
+              <view class="bill-usage">用水{{item.usage}}m³ | 读数{{item.meterReading}}</view>
+              <view class="bill-payment-time">缴费时间: {{item.paymentTime}}</view>
+            </view>
+            
+            <!-- 金额和状态区域 -->
+            <view class="bill-info-right">
+              <view class="bill-amount {{!item.isPaid ? 'unpaid-amount' : ''}}">¥ {{item.amount}}</view>
+              <view class="bill-status {{item.isPaid ? 'paid' : 'unpaid'}}">{{item.isPaid ? '已缴费' : '未缴费'}}</view>
+            </view>
           </view>
         </view>
-        <view class="bill-action" wx:if="{{item.status === '未缴费'}}">
-          <button class="pay-btn">立即缴费</button>
-        </view>
-        <view class="bill-action" wx:else>
-          <button class="detail-btn">开发票 ></button>
-        </view>
-      </view>
-    </block>
-    <view class="list-end" wx:if="{{billList.length > 0}}">没有更多了</view>
-    <view class="empty-list" wx:else>暂无账单数据</view>
-  </scroll-view>
+      </block>
+      
+      <view class="no-more" wx:if="{{billList.length > 0}}"> ─────  没有更多了  ─────</view>
+      <view class="no-data" wx:else>暂无账单数据</view>
+    </scroll-view>
+  </view>
 </view> 

pages/zhangdanlist/zhangdanlist.wxss

@@ -4,12 +4,18 @@
   background-color: #f5f5f5;
   min-height: 100vh;
   padding-bottom: 30rpx;
+  padding: 0;
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .header {
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 300rpx;
+  z-index: 5;
 }
 
 .header .background {
@@ -18,39 +24,39 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #4285f4;
+  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;
+/* 固定返回按钮样式 */
+.fixed-back {
+  position: fixed;
+  top: 50rpx;
   left: 30rpx;
-  top: 80rpx;
-  font-size: 40rpx;
-  color: white;
-  z-index: 10;
+  z-index: 999;
+  border-radius: 50%;
+  width: 50rpx;
+  height: 200rpx;
+  display: flex;
+  align-items: center;
+  color: rgba(255, 255, 255, 1);
 }
 
+
 .header-title {
   text-align: center;
   font-size: 36rpx;
   margin-bottom: 20rpx;
 }
 
-/* .custom-nav {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 5;
-} */
 
 .user-info-container {
-  position: relative;
-  margin-top: -100rpx;
-  padding: 0 30rpx;
-  top: -20rpx;
+  position: fixed;
+  top: 200rpx;
+  left: 0;
   width: 100%;
+  padding: 0 30rpx;
   box-sizing: border-box;
+  z-index: 10;
 }
 
 .user-info {
@@ -93,66 +99,159 @@
   color: #333;
 }
 
+.address-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+  padding: 20rpx 0;
+}
+
+.address-icon image {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 10rpx;
+}
+
+.address-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+/* 添加固定高度的外层容器 */
+.bill-list-wrapper {
+  position: fixed;
+  top: 400rpx;
+  left: 0;
+  width: 100%;
+  height: calc(100vh - 400rpx); /* 计算剩余高度 */
+  z-index: 30;
+  overflow: hidden;
+}
+
+/* 调整账单列表样式 */
+.bill-list {
+  width: 100%;
+  height: 100%;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+  margin-top: 0; /* 移除顶部边距，因为外层容器已经定位好了 */
+  padding-bottom: 50rpx;
+}
+
 .bill-card {
-  background-color: white;
+  width: 100%;
   border-radius: 12rpx;
-  padding: 30rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
 }
 
-.bill-info {
+.bill-date {
+  background-color: #f5f5f5;
+  padding: 20rpx 30rpx;
+  font-size: 28rpx;
+  color: #333;
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  border-bottom: 1rpx solid #f0f0f0;
 }
 
+.paid-date {
+  background-color: #f5f5f5;
+}
+
+.invoice-btn {
+  color: #1989fa;
+  font-size: 26rpx;
+}
+
+/* 调整账单信息布局 */
+.bill-info {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  display: flex;
+  justify-content: space-between;
+}
+
+/* 水滴图标区域 */
 .bill-icon {
-  margin-right: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15rpx;
 }
 
-.bill-icon image {
-  width: 60rpx;
-  height: 60rpx;
+.water-icon {
+  width: 40rpx;
+  height: 40rpx;
 }
 
-.bill-details {
+/* 账单信息左侧区域 */
+.bill-info-left {
   flex: 1;
 }
 
-.bill-number {
-  font-size: 30rpx;
-  font-weight: bold;
-  margin-bottom: 10rpx;
+/* 账单信息右侧区域 */
+.bill-info-right {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.bill-usage, .bill-payment-time {
+/* 移除之前的水滴图标样式 */
+.bill-number {
   font-size: 26rpx;
   color: #666;
-  margin-top: 6rpx;
-}
-
-.bill-amount-status {
-  text-align: right;
+  margin-bottom: 10rpx;
 }
 
 .bill-amount {
   font-size: 36rpx;
   font-weight: bold;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.bill-usage {
+  font-size: 24rpx;
+  color: #999;
+  margin-bottom: 10rpx;
+}
+
+.bill-payment-time {
+  font-size: 24rpx;
+  color: #999;
+  margin-bottom: 10rpx;
 }
 
 .bill-status {
   font-size: 26rpx;
-  margin-top: 10rpx;
+  text-align: right;
 }
 
 .paid {
-  color: #333;
+  color: #07c160;
 }
 
 .unpaid {
   color: #ff4d4f;
 }
 
+.no-more {
+  text-align: center;
+  color: #999;
+  font-size: 26rpx;
+  padding: 30rpx 0;
+}
+.no-data {
+  text-align: center;
+  color: #999;
+  font-size: 26rpx;
+  padding: 250rpx 0;
+}
+
 .bill-action {
   margin-top: 20rpx;
   display: flex;
@@ -189,4 +288,9 @@
   color: #999;
   font-size: 28rpx;
   padding: 100rpx 0;
+}
+
+/* 未缴费金额标红 */
+.unpaid-amount {
+  color: #ff4d4f;
 }

pages/zhangdanxiangqing/zdxiangqing.js

@@ -0,0 +1,36 @@
+const app = getApp()
+
+Page({
+  data: {
+    billDetail: {}
+  },
+  onLoad: function(options) {
+    // 从页面参数中获取账单数据
+    if (options.billInfo) {
+      try {
+        const billDetail = JSON.parse(decodeURIComponent(options.billInfo));
+      
+        this.setData({
+          billDetail: billDetail
+        });
+      } catch (e) {
+        console.error('解析账单数据失败', e);
+        wx.showToast({
+          title: '加载账单数据失败',
+          icon: 'none'
+        });
+      }
+    }
+  },
+
+  goBack: function() {
+    wx.navigateBack();
+  },
+
+  getInvoice: function() {
+    wx.showToast({
+      title: '开具发票功能开发中',
+      icon: 'none'
+    });
+  }
+})

pages/zhangdanxiangqing/zdxiangqing.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "账单详情",
+  "navigationBarBackgroundColor": "#0066FF",
+  "navigationBarTextStyle": "white",
+  "backgroundColor": "#F8F8F8",
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/zhangdanxiangqing/zdxiangqing.wxml

@@ -0,0 +1,66 @@
+<view class="container4">
+  
+
+  <!-- 返回按钮 -->
+  <view class="custom-nav">
+    <view class="fixed-back" bindtap="goBack">←</view>
+    <view class="nav-title">账单详情</view>
+  </view>
+
+  <!-- 第一个卡片：本次抄表信息 -->
+  <view class="bill-card">
+    <view class="bill-row">
+      <text>本次抄表日期</text>
+      <text>{{billDetail.currentDate}}</text>
+    </view>
+    <view class="divider"></view>
+    <view class="bill-row">
+      <text>本次抄表数</text>
+      <text>{{billDetail.currentReading}}</text>
+    </view>
+  </view>
+
+  <!-- 第二个卡片：上次抄表信息 -->
+  <view class="bill-card">
+    <view class="bill-row">
+      <text>上次抄表日期</text>
+      <text>{{billDetail.lastDate}}</text>
+    </view>
+    <view class="divider"></view>
+    <view class="bill-row">
+      <text>上次抄表数</text>
+      <text>{{billDetail.lastReading}}</text>
+    </view>
+  </view>
+
+  <!-- 第三个卡片：费用明细 -->
+  <view class="bill-card">
+    <view class="bill-row">
+      <text>用户量</text>
+      <text>{{billDetail.usage}}m³</text>
+    </view>
+    <view class="divider"></view>
+    <view class="bill-row">
+      <text>总费用</text>
+      <text>{{billDetail.totalAmount}}元</text>
+    </view>
+    <view class="divider"></view>
+    <view class="bill-row">
+      <text>减免费用</text>
+      <text>{{billDetail.discount}}元</text>
+    </view>
+    <view class="divider"></view>
+    <view class="bill-row">
+      <text>滞纳金</text>
+      <text>{{billDetail.lateFee}}元</text>
+    </view>
+  </view>
+
+  <!-- 第四个卡片：应缴费用 -->
+  <view class="bill-card">
+    <view class="bill-row total">
+      <text>应缴费用</text>
+      <text>{{billDetail.payableAmount}}元</text>
+    </view>
+  </view>
+</view>

pages/zhangdanxiangqing/zdxiangqing.wxss

@@ -0,0 +1,97 @@
+.container4 {
+  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;
+}
+
+/* 固定返回按钮样式 */
+.fixed-back {
+  position: fixed;
+  top: 50rpx;
+  left: 30rpx;
+  z-index: 999;
+  border-radius: 50%;
+  width: 50rpx;
+  height: 200rpx;
+  display: flex;
+  align-items: center;
+  color: rgba(255, 255, 255, 1);
+}
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 34rpx;
+  color: #fff;
+}
+
+
+.bill-detail-card {
+  background-color: white;
+  border-radius: 20rpx;
+  margin: 10rpx;
+  padding: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.bill-date-row, .bill-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 20rpx 0;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.divider {
+  height: 1rpx;
+  background-color: #eee;
+  margin: 20rpx 0;
+}
+
+/* .total {
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #0080ff;
+} */
+
+.bill-card {
+  background: #fff;
+  border-radius: 16rpx;
+  margin: 0rpx 2rpx 20rpx 2rpx;
+  padding: 30rpx 30rpx 30rpx 30rpx;
+  background: rgba(255, 255, 255, 1);
+}
+
+.bill-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 0;
+}
+
+.divider {
+  height: 2rpx;
+  background: #e5e5e5;
+  margin: 16rpx 0;
+}
+
+.total {
+  font-weight: bold;
+  font-size: 32rpx;
+}
+