准备联调抄表记录

pages/writeReading/components/meterList/components/meterItem/index.js

@@ -6,6 +6,7 @@ Component({
    */
   properties: {
     active: Boolean,
+    meter: Object
   },
   observers: {
     "active": function (newValue) {

pages/writeReading/components/meterList/components/meterItem/index.wxml

@@ -1,4 +1,4 @@
 <!--pages/writeReading/components/meterList/components/meterItem/index.wxml-->
 <view class="wrapper {{isDeep ? 'deepBg' : ''}}" bind:tap="onClick">
-    标1东-3071312452636756756857
+    {{meter.meterAddress}}
 </view>

pages/writeReading/components/meterList/components/meterItem/index.wxss

@@ -14,6 +14,8 @@
     height: 150rpx;
     display: flex;
     align-items: center;
+    text-align: center;
+    justify-content: center;
 }
 
 .deepBg {

pages/writeReading/components/meterList/index.js

@@ -1,13 +1,37 @@
 // pages/writeReading/components/meterList/index.js
+import { getMeterReadingRouteMeterDetail } from "../../../../service/workBench"
+import request from "../../../../utils/request"
+import { alertInfo, alertSuccess, alertError } from "../../../../utils/index"
+const { OK } = request;
+
 Component({
 
   /**
    * 组件的属性列表
    */
   properties: {
-
+    list: Array,
+    active: Number,
+    meterInfo: Object
+  },
+  observers: {
+    "active,list": function(newActive, newList) {
+      if (newActive >= 0 && newList.length) {
+        this.getMeterInfo(newList?.[newActive]?.meterId, newActive, true)
+      }
+      if (newActive === 0) {
+        this.setData({ scrollLeft: 0 })
+      } else if (newActive > 0) {
+        this.setData({ scrollLeft: 220 * newList.length - 20 })
+      }
+      const { scrollWidth } = this.data;
+      if (scrollWidth) {
+        this.setData({
+          maxScrollLeft: newList?.length ? 220 * newList.length - (scrollWidth || 0) - 20 : 0,
+        })
+      }
+    }
   },
-
   /**
    * 组件的初始数据
    */
@@ -15,16 +39,22 @@ Component({
     animationData: {}, // 存储动画数据
     position: 0,
     scrollLeft: 0, // 当前滚动位置
-    maxScrollLeft: 0 // 最大可滚动距离
+    maxScrollLeft: 0, // 最大可滚动距离
   },
   lifetimes: {
     attached() {
+      const that = this;
       const query = this.createSelectorQuery();
-      // query.select('.scroll-content').boundingClientRect();
-      console.log("query", query)
-      query.select('.meterListScrollView').boundingClientRect((rect) => {
-        console.log("rect", rect)
-      });
+      query.select('.meterListScrollView').boundingClientRect()
+      query.exec(function(res){
+        const { list } = that.data;
+        const length = that.data.list?.length || 0;
+        that.setData({
+          maxScrollLeft:length ? 220 * list.length - (res?.[0]?.width || 0) - 20 : 0,
+          scrollWidth: res?.[0]?.width || 0
+        })
+      })
+ 
       
     }
   },
@@ -61,15 +91,29 @@ Component({
       });
   
     },
-    onChangeMeter() {
-      console.log("---------------")
+    handleSelect(e) {
+      const { id, index } = e.currentTarget.dataset;
+      this.getMeterInfo(id, index)
     },
-    onScroll(e) {
-      // 实时更新当前滚动位置，可用于更复杂的边界判断
-      this.setData({
-        scrollLeft: e.detail.scrollLeft
-      });
+    async getMeterInfo(id, index, noChange) {
+      const { code, message, data } = await getMeterReadingRouteMeterDetail(id)
+      if (code !== OK) {
+        alertError(message)
+        return;
+      }
+      if (noChange) {
+        this.triggerEvent("changeMeter", { meter: data })
+        return;
+      }
+      this.triggerEvent("changeMeterAndIndex", { index: index, meter: data })
     },
+    // onScroll(e) {
+    //   // 实时更新当前滚动位置，可用于更复杂的边界判断
+    //   console.log("e", e)
+    //   this.setData({
+    //     scrollLeft: e.detail.scrollLeft
+    //   });
+    // },
   
     scrollLeft() {
       // 向左滚动：减少 scrollLeft，但不能小于0

pages/writeReading/components/meterList/index.wxml

@@ -14,16 +14,15 @@
             scroll-with-animation="true"
         >
             <view style="display: flex;" class="scroll-content">
-                <meter-item active="{{true}}"  />
-                <meter-item active="{{false}}" bind:click="onChangeMeter" />
-                <meter-item active="{{false}}" />
-                <meter-item active="{{false}}" />
-                <meter-item active="{{false}}" />
-                <meter-item active="{{false}}" />
-                <meter-item active="{{false}}" />
-                <meter-item active="{{false}}" />
-                <meter-item active="{{false}}" />
-                <meter-item active="{{false}}" />
+                <meter-item 
+                    active="{{active === index}}" 
+                    wx:for="{{list}}" 
+                    wx:key="id" 
+                    meter="{{item}}" 
+                    bind:click="handleSelect"
+                    data-index="{{index}}"
+                    data-id="{{item.meterId}}" 
+                />
             </view>
         </scroll-view>
         <van-icon name="arrow" size="50rpx" bind:tap="scrollRight" />