导入抄表记录

components/input/index.js

@@ -0,0 +1,24 @@
+// components/input/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/input/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-field": "@vant/weapp/field/index"
+  }
+}

components/input/index.wxml

@@ -0,0 +1,8 @@
+<!--components/input/index.wxml-->
+<van-field
+    value="{{ value }}"
+    placeholder="请输入本次读数"
+    bind:change="onChange"
+    border="{{false}}"
+    custom-style="border: 1rpx solid #ccc; padding: 2px 14rpx; font-size: 32rpx; border-radius: 10rpx;"
+/>

components/input/index.wxss

@@ -0,0 +1 @@
+/* components/input/index.wxss */

pages/writeReading/components/meterList/index.js

@@ -13,16 +13,19 @@ Component({
    */
   data: {
     animationData: {}, // 存储动画数据
-    position: 0
+    position: 0,
+    scrollLeft: 0, // 当前滚动位置
+    maxScrollLeft: 0 // 最大可滚动距离
   },
   lifetimes: {
     attached() {
-      // 在页面准备就绪时初始化动画实例
+      const query = this.createSelectorQuery();
-    this.animation = wx.createAnimation({
+      // query.select('.scroll-content').boundingClientRect();
-      duration: 500, // 动画持续时间，单位 ms
+      console.log("query", query)
-      timingFunction: 'ease-out', // 动画缓动函数，还可以是 'linear', 'ease-in', 'ease-in-out'
+      query.select('.meterListScrollView').boundingClientRect((rect) => {
-      delay: 0 // 动画延迟时间
+        console.log("rect", rect)
-    });
+      });
+      
     }
   },
   /**
@@ -60,6 +63,28 @@ Component({
     },
     onChangeMeter() {
       console.log("---------------")
+    },
+    onScroll(e) {
+      // 实时更新当前滚动位置，可用于更复杂的边界判断
+      this.setData({
+        scrollLeft: e.detail.scrollLeft
+      });
+    },
+  
+    scrollLeft() {
+      // 向左滚动：减少 scrollLeft，但不能小于0
+      const newScrollLeft = Math.max(0, this.data.scrollLeft - 200);
+      this.setData({
+        scrollLeft: newScrollLeft
+      });
+    },
+  
+    scrollRight() {
+      // 向右滚动：增加 scrollLeft，但不能超过 maxScrollLeft
+      const newScrollLeft = Math.min(this.data.maxScrollLeft, this.data.scrollLeft + 200);
+      this.setData({
+        scrollLeft: newScrollLeft
+      });
     }
   }
 })

pages/writeReading/components/meterList/index.wxml

@@ -5,12 +5,15 @@
         <text> 电表列表 </text>
     </view>
     <view style="display: flex; align-items: center;margin-top: 20rpx;">
-        <van-icon name="arrow-left" size="50rpx" bind:tap="handleLeft" />
+        <van-icon name="arrow-left" size="50rpx" bind:tap="scrollLeft" />
         <scroll-view
             scroll-x="{{true}}"
             class="meterListScrollView"
+            scroll-left="{{scrollLeft}}" 
+            bindscroll="onScroll" 
+            scroll-with-animation="true"
         >
-            <view style="margin-left: {{position}}rpx; display: flex;">
+            <view style="display: flex;" class="scroll-content">
                 <meter-item active="{{true}}"  />
                 <meter-item active="{{false}}" bind:click="onChangeMeter" />
                 <meter-item active="{{false}}" />
@@ -23,7 +26,7 @@
                 <meter-item active="{{false}}" />
             </view>
         </scroll-view>
-        <van-icon name="arrow" size="50rpx" bind:tap="handleRight" />
+        <van-icon name="arrow" size="50rpx" bind:tap="scrollRight" />
     </view>
     
 </view>

pages/writeReading/components/photo/index.js

@@ -0,0 +1,24 @@
+// pages/writeReading/components/photo/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

pages/writeReading/components/photo/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/writeReading/components/photo/index.wxml

@@ -0,0 +1,4 @@
+<!--pages/writeReading/components/photo/index.wxml-->
+<view class="wrapper">
+    拍照
+</view> 

pages/writeReading/components/photo/index.wxss

@@ -0,0 +1,4 @@
+/* pages/writeReading/components/photo/index.wxss */
+.wrapper {
+    margin-left: 24rpx;
+}

pages/writeReading/components/readingInfo/index.js

@@ -0,0 +1,24 @@
+// pages/writeReading/components/readingInfo/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

pages/writeReading/components/readingInfo/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index",
+    "van-divider": "@vant/weapp/divider/index",
+    "custom-input": "/components/input/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "photo": "../photo/index"
+  }
+}

pages/writeReading/components/readingInfo/index.wxml

@@ -0,0 +1,74 @@
+<!--pages/writeReading/components/readingInfo/index.wxml-->
+
+<view class="wrapper">
+    <view class="bodyTitle">
+        <view class="text">
+            电表数据记录器
+        </view>
+        <view class="time">
+            2025年9月5日
+        </view>
+    </view>
+    <view class="contentWrapper">
+        <view class="currentMeter">
+            <view class="text">
+                当前电表
+            </view>
+            <view class="address">
+                标1东-307
+            </view>
+        </view>
+        <view class="change">
+            <van-button type="info" size="small"> <van-icon name="arrow-left" /> 上一块</van-button>
+            <van-button type="info" size="small" >下一块 <van-icon name="arrow" /> </van-button>
+        </view>
+        <van-divider />
+        <view class="readingNumber">
+            <view class="lastNumber">
+                <view class="title">
+                    上次表字
+                </view>
+                <view class="number">
+                    3318
+                </view>
+            </view>
+            <view class="lastTime">
+                2025年08月12日
+            </view>
+        </view>
+        <view class="nextReadingNumber">
+            <view class="currentNumber">
+                <view class="title">
+                    本次表字
+                </view>
+                <view class="number">
+                    <custom-input />
+                </view>
+            </view>
+            <view class="photo">
+                <photo />
+            </view>
+        </view>
+        <view class="calc">
+            <view class="title">
+                表字差
+            </view>
+            <view class="rightNumber">
+                0
+            </view>
+            <view class="wrongNumber">
+                0
+            </view>
+        </view>
+        <view class="operate">
+            <view style="flex: 1;">
+                <van-button size="small"  type="info" block> 确定录入 </van-button>
+            </view>
+            <view style="flex: 1; margin-left: 20rpx;">
+                <van-button size="small" block> 清除记录 </van-button>
+            </view>     
+        </view>
+    </view>
+   
+</view>
+<view style="height: 32rpx;"></view>

pages/writeReading/components/readingInfo/index.wxss

@@ -0,0 +1,112 @@
+/* pages/writeReading/components/readingInfo/index.wxss */
+
+.wrapper {
+    margin-left: 20rpx;
+    margin-right: 20rpx;  
+    margin-top: 20rpx;
+    background-color: white;
+}
+
+.bodyTitle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--deep-green);
+    padding: 32rpx 20rpx;
+    border-radius: 20rpx 20rpx 0 0;
+    box-sizing: border-box;
+    color: white;
+}
+
+.bodyTitle .text {
+    font-size: 40rpx;
+    font-weight: 800;
+}
+
+.bodyTitle .time {
+    font-size: 30rpx;
+}
+
+.contentWrapper {
+    padding: 0 20rpx;
+    margin-bottom: 30rpx;
+}
+
+.currentMeter {
+    margin-top: 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 32rpx;
+}
+
+.currentMeter .address {
+    color: var(--deep-green);
+    font-size: 36rpx;
+}
+
+.change {
+   margin-top: 20rpx;
+   margin-bottom: 20rpx;
+   display: flex;
+   justify-content: space-between; 
+}
+
+.readingNumber {
+    display: flex;
+    justify-content: space-between;
+}
+
+.readingNumber .title {
+    font-size: 32rpx;
+}
+
+.readingNumber .number {
+    font-size: 42rpx;
+    font-weight: 800;
+    margin-top: 12rpx;
+}
+.readingNumber .lastTime {
+    font-size: 32rpx;
+}
+
+.nextReadingNumber {
+    display: flex;
+    align-items: bottom;
+}
+
+.nextReadingNumber .title {
+    font-size: 32rpx;
+}
+
+.nextReadingNumber .number {
+    margin-top: 12rpx;
+}
+
+.currentNumber {
+    flex: 1;
+}
+
+.calc {
+    margin-top: 24rpx;
+}
+
+.rightNumber {
+    font-size: 38rpx;
+    font-weight: 700;
+    margin-top: 12rpx;
+    color: #73d13d;
+}
+
+.wrongNumber {
+    font-size: 38rpx;
+    font-weight: 700;
+    margin-top: 12rpx;
+    color: #ff4d4f;
+}
+
+.operate {
+    margin-top: 24rpx;
+    display: flex;
+    padding-bottom: 30rpx;
+}

pages/writeReading/index.json

@@ -2,7 +2,8 @@
   "usingComponents": {
     "navigator": "/components/navigator/index",
     "meter-list": "./components/meterList/index",
-    "meter-info": "./components/meterInfo/index"
+    "meter-info": "./components/meterInfo/index",
+    "reading-info": "./components/readingInfo/index"
   },
   "navigationStyle": "custom"
 }

pages/writeReading/index.wxml

@@ -2,3 +2,4 @@
 <navigator title="录入抄表记录" canBack="{{true}}" />
 <meter-list />
 <meter-info />
+<reading-info />