仪表换新列表优化

wuye-manager-uniapp/App.vue

@@ -62,6 +62,12 @@ export default {
 .flex-1 {
   flex: 1;
 }
+.h-full {
+  height: 100%;
+}
+.w-full {
+  width: 100%;
+}
 /* 自定义导航栏专用 */
 .custom-header {
   height: calc(var(--status-bar-height) + 88rpx);
@@ -80,9 +86,11 @@ export default {
 
 .page_container {
   min-height: 100vh;
+  max-height: 100vh;
   height: 100%;
   background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);
-
+  overflow: hidden;
+  box-sizing: border-box;
   padding: 0 40rpx;
   /* 先写 constant() 兼容 iOS < 11.2，再写 env() */
   padding-top: calc(constant(safe-area-inset-top) + 20rpx);

wuye-manager-uniapp/pageSubPack/instrument/addreplacement.vue

@@ -5,21 +5,24 @@
         <uni-data-checkbox v-model="formData.type" :localdata="items"></uni-data-checkbox>
       </uni-forms-item>
       <uni-forms-item label="设备编号">
-        <uni-easyinput
-          :input-border="false"
-          v-model="formData.deviceCode"
-          placeholder="请输入设备号"
-        >
-          <template #right>
-            <uni-icons type="scan" color="#737373"></uni-icons>
-          </template>
-        </uni-easyinput>
+        <view class="flex items-center justify-between">
+          <uni-easyinput
+            class="flex-1"
+            :input-border="false"
+            v-model="formData.deviceCode"
+            placeholder="请输入设备号"
+            :clearable="true"
+          >
+          </uni-easyinput>
+          <uni-icons @tap="handleScan" size="48rpx" type="scan" color="#737373"></uni-icons>
+        </view>
       </uni-forms-item>
       <uni-forms-item label="房屋号">
         <uni-easyinput
           :inputBorder="false"
           @tap="handleClick"
           disabled
+          v-model="houseName"
           placeholderStyle="color: #999999"
           placeholder="请选择安装房屋"
         >
@@ -29,11 +32,16 @@
         </uni-easyinput>
       </uni-forms-item>
     </uni-forms>
+
+    <view class="action_btn" @tap="handleSubmit">
+      <text>提 交</text>
+    </view>
   </view>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 const formData = ref({
   type: 1,
   deviceCode: '',
@@ -50,8 +58,31 @@ const items = [
   }
 ]
 
+const houseName = ref('')
+/** 处理 安装房屋 */
 function handleClick() {
-  console.log('click')
+  uni.navigateTo({
+    url: '/pageSubPack/instrument/checkouthouse',
+    events: {
+      backData: data => {
+        houseName.value = data.HouseName
+        formData.value.houseId = data.Houseid
+      }
+    }
+  })
+}
+/** 处理 扫码 */
+function handleScan() {
+  // 允许从相机和相册扫码
+  uni.scanCode({
+    success: function (res) {
+      formData.value.deviceCode = res.result
+    }
+  })
+}
+
+function handleSubmit() {
+  console.log(formData.value)
 }
 </script>
 
@@ -70,5 +101,21 @@ function handleClick() {
   &:deep(.uni-easyinput__content) {
     background: none !important;
   }
+
+  .action_btn {
+    width: 670rpx;
+    height: 80rpx;
+    background: #4d5dfa;
+    border-radius: 8rpx;
+
+    text-align: center;
+
+    margin-top: 300rpx;
+
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #ffffff;
+    line-height: 80rpx;
+  }
 }
 </style>

wuye-manager-uniapp/pageSubPack/instrument/checkouthouse.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page_container checkouthouse_box">
+  <view class="page_container checkouthouse_box flex flex-col">
     <view class="search_box">
       <view
         @click="handleClick"
@@ -18,13 +18,8 @@
         v-else
       />
     </view>
-    <view class="search_list">
-      <scroll-view
-        style="height: 100%"
-        lower-threshold="160"
-        scroll-y="true"
-        @scrolltolower="scrolltolower"
-      >
+    <view class="search_list flex-1 flex">
+      <scroll-view lower-threshold="160" scroll-y="true" @scrolltolower="scrolltolower">
         <radio-group @change="radioChange">
           <label v-for="(item, index) in searchlist" :key="index">
             <view
@@ -46,11 +41,15 @@
         </radio-group>
       </scroll-view>
     </view>
+
+    <view class="action_btn" @tap="handleSelecthouse">
+      <text>确 认</text>
+    </view>
   </view>
   <!--  滚动 高度如何计算？ -->
 </template>
-<script setup lang="ts">
-import { ref } from 'vue'
+<script setup>
+import { ref, getCurrentInstance, onMounted } from 'vue'
 const Searching = ref(true)
 const queryParmas = ref({
   value: '',
@@ -82,13 +81,16 @@ const searchlist = ref()
 
 function getlist() {
   const allnum = queryParmas.value.pageNum * queryParmas.value.pageSize
-  searchlist.value = Array.from({ length: allnum }).map((_, index) => {
-    return {
-      address: 'A栋3单元301',
-      username: '里番',
-      id: index + 1
-    }
-  })
+
+  if (allnum < 50) {
+    searchlist.value = Array.from({ length: allnum }).map((_, index) => {
+      return {
+        address: 'A栋3单元301',
+        username: '里番',
+        id: index + 1
+      }
+    })
+  }
 }
 getlist()
 
@@ -96,21 +98,39 @@ function scrolltolower() {
   queryParmas.value.pageNum += 1
   getlist()
 }
+
+let eventChannel = null
+// 必须在 onMounted 里获取
+onMounted(() => {
+  const instance = getCurrentInstance().proxy
+  if (instance && instance.getOpenerEventChannel) {
+    eventChannel = instance.getOpenerEventChannel()
+  }
+})
+
+function handleSelecthouse() {
+  // 2. 发送数据 (触发 A 页面定义的 'backData' 事件)
+  console.log(eventChannel)
+  eventChannel.emit('backData', {
+    Houseid: checkoutHouseid.value,
+    HouseName: 'A栋3单元301'
+  })
+  // 3. 返回上一页
+  uni.navigateBack()
+}
 </script>
 
 <style scoped lang="scss">
 .checkouthouse_box {
   background: #f9f9f9;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
+
   .search_box {
     height: 80rpx;
     .search_view {
       height: 80rpx;
       line-height: 80rpx;
       background: #f3f3f3;
-      border-radius: 8rpx 8rpx 8rpx 8rpx;
+      border-radius: 8rpx;
 
       font-weight: 400;
       font-size: 32rpx;
@@ -121,9 +141,10 @@ function scrolltolower() {
   }
 
   .search_list {
-    height: calc(100% - 140rpx);
-    background-color: #4d5dfa;
+    height: 100%;
     margin-top: 20rpx;
+    box-sizing: border-box;
+    overflow: hidden;
     .search_item {
       height: 116rpx;
       margin-bottom: 20rpx;
@@ -157,5 +178,18 @@ function scrolltolower() {
       }
     }
   }
+
+  .action_btn {
+    width: 670rpx;
+    height: 80rpx;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #ffffff;
+    line-height: 80rpx;
+    text-align: center;
+    margin-top: 20rpx;
+    background: #4d5dfa;
+    border-radius: 8rpx 8rpx 8rpx 8rpx;
+  }
 }
 </style>

wuye-manager-uniapp/pageSubPack/instrument/replacement_record.vue

@@ -1,39 +1,58 @@
 <template>
-  <view class="page_container replacement_record_box">
+  <view class="page_container replacement_record_box flex flex-col">
     <view class="nav flex items-center">
       <view class="line"></view>
       <text class="title">仪表换新记录</text>
     </view>
     <TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
-    <view class="instrument_body">
-      <view
-        class="instrument_items flex items-center flex-between"
-        v-for="(item, index) in infolist"
-        :key="index"
-      >
-        <view class="flex items-center">
-          <image src="/static/imgs/home.png" class="icon" mode=""></image>
-          <view class="instrument_info">
-            <view class="instrument_title">
-              <text>{{ item.title }}</text>
-            </view>
-            <view class="instrument_time">
-              <text>换新时间时间：{{ item.time }}</text>
+    <view class="instrument_body flex-1 flex">
+      <scroll-view scroll-y lower-threshold="160" @scrolltolower="scrolltolower">
+        <view
+          class="instrument_items flex items-center flex-between"
+          v-for="(item, index) in infolist"
+          :key="index"
+        >
+          <view class="flex items-center">
+            <image src="/static/imgs/home.png" class="icon" mode=""></image>
+            <view class="instrument_info">
+              <view class="instrument_title">
+                <text>{{ item.title }}</text>
+              </view>
+              <view class="instrument_time">
+                <text>换新时间时间：{{ item.time }}</text>
+              </view>
             </view>
           </view>
+          <view class="instrument_type">
+            <text v-if="item.type === 2">电表</text>
+            <text v-else>水表</text>
+          </view>
         </view>
-        <view class="instrument_type">
-          <text v-if="item.type === 2">电表</text>
-          <text v-else>水表</text>
-        </view>
-      </view>
+        <!-- 底部加载状态提示 -->
+        <uni-load-more :status="statusmore"></uni-load-more>
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import TabsComponents from '@/components/tabs/tabs.vue'
+/** 加载状态 */
+const statusmore = computed(() => {
+  if (isLoading.value === true) {
+    return 'loading'
+  } else if (isLoading.value === false) {
+    if (hasMore.value) {
+      return 'more'
+    } else {
+      return 'noMore'
+    }
+  }
+})
+const isLoading = ref(false) // 加载锁
+const hasMore = ref(true) // 是否还有更多数据
+
 const tabslist = [
   {
     name: '全部',
@@ -49,32 +68,54 @@ const tabslist = [
   }
 ]
 function handleChangeTabs(val: number) {
-  console.log('选择了：', val)
+  queryParmas.value.pageNum = 1
+  infolist.value = []
+  getlist()
 }
 // ---------------------------------------------------------------------
-
-const infolist = ref([
-  {
-    title: 'M2栋3单元1801室（M2-3-1801）',
-    time: '2023-08-01 10:05:46',
-    type: 1 //1水表 2电表
-  },
-  {
-    title: 'M2栋3单元1801室（M2-3-1801）',
-    time: '2023-08-01 10:05:46',
-    type: 2 //1水表 2电表
-  },
-  {
-    title: 'M2栋3单元1801室（M2-3-1801）',
-    time: '2023-08-01 10:05:46',
-    type: 1 //1水表 2电表
-  },
-  {
-    title: 'M2栋3单元1801室（M2-3-1801）',
-    time: '2023-08-01 10:05:46',
-    type: 2 //1水表 2电表
+const queryParmas = ref({
+  pageNum: 1,
+  pageSize: 15
+})
+const infolist = ref([])
+function scrolltolower() {
+  if (hasMore.value) {
+    queryParmas.value.pageNum += 1
+    getlist()
   }
-])
+}
+
+function getlist() {
+  uni.showLoading({
+    title: '加载中',
+    mask: true
+  })
+  // 1. 如果正在加载或没有更多数据，直接返回
+  if (isLoading.value || !hasMore.value) return
+  // 2. 开启锁
+  isLoading.value = true
+  const all = queryParmas.value.pageNum * queryParmas.value.pageSize
+  if (all > 50) {
+    isLoading.value = false
+    uni.hideLoading()
+    hasMore.value = false
+    return
+  }
+  const arr = Array.from({ length: all }).map((_, index) => {
+    return {
+      title: 'M2栋3单元18' + index + '室（M2-3-1801）',
+      time: '2023-08-01 10:05:46',
+      type: 1 //1水表 2电表
+    }
+  })
+  hasMore.value = true
+  nextTick(() => {
+    infolist.value = [...infolist.value, ...arr]
+    isLoading.value = false
+    uni.hideLoading()
+  })
+}
+getlist()
 </script>
 
 <style scoped lang="scss">
@@ -95,11 +136,16 @@ const infolist = ref([
   }
 
   .instrument_body {
+    overflow: hidden;
     margin-top: 20rpx;
+    box-sizing: border-box;
+    background-color: #4d5dfa;
     .instrument_items {
+      box-sizing: border-box;
       background: #ffffff;
       padding: 40rpx 20rpx;
       margin-bottom: 20rpx;
+
       .icon {
         width: 40rpx;
         height: 32rpx;