仪表换新搭建

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

@@ -0,0 +1,161 @@
+<template>
+  <view class="page_container checkouthouse_box">
+    <view class="search_box">
+      <view
+        @click="handleClick"
+        class="search_view flex-center"
+        v-if="!queryParmas.value.trim() && Searching"
+      >
+        <uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
+        <text>请输入关键字进行搜索</text>
+      </view>
+      <uni-easyinput
+        @blur="handleInput"
+        @change="handleSearch"
+        :focus="true"
+        ref="inputRef"
+        v-model="queryParmas.value"
+        v-else
+      />
+    </view>
+    <view class="search_list">
+      <scroll-view
+        style="height: 100%"
+        lower-threshold="160"
+        scroll-y="true"
+        @scrolltolower="scrolltolower"
+      >
+        <radio-group @change="radioChange">
+          <label v-for="(item, index) in searchlist" :key="index">
+            <view
+              class="search_item flex flex-between"
+              :class="{
+                active: checkoutHouseid === item.id
+              }"
+            >
+              <view class="flex items-center flex-1">
+                <!-- checkout -->
+                <radio color="#4d5dfa" :value="item.id" />
+                <!-- housename -->
+                <text class="address">{{ item.address }}</text>
+              </view>
+              <!-- username -->
+              <view class="username">{{ item.username }}</view>
+            </view>
+          </label>
+        </radio-group>
+      </scroll-view>
+    </view>
+  </view>
+  <!--  滚动 高度如何计算？ -->
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const Searching = ref(true)
+const queryParmas = ref({
+  value: '',
+
+  pageNum: 1,
+  pageSize: 12
+})
+/** 点击时切换到input,并聚焦 */
+function handleClick() {
+  Searching.value = false
+}
+/** 判断 失去焦点时 切换回 view */
+function handleInput() {
+  if (queryParmas.value.value.trim()) {
+    Searching.value = true
+  }
+}
+function handleSearch() {
+  console.log('search')
+}
+
+const checkoutHouseid = ref(null)
+/** 选择房屋,返回id*/
+function radioChange(res) {
+  checkoutHouseid.value = Number(res.detail.value)
+}
+//
+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
+    }
+  })
+}
+getlist()
+
+function scrolltolower() {
+  queryParmas.value.pageNum += 1
+  getlist()
+}
+</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;
+
+      font-weight: 400;
+      font-size: 32rpx;
+      color: rgba(0, 0, 0, 0.26);
+      line-height: 48rpx;
+      text-align: center;
+    }
+  }
+
+  .search_list {
+    height: calc(100% - 140rpx);
+    background-color: #4d5dfa;
+    margin-top: 20rpx;
+    .search_item {
+      height: 116rpx;
+      margin-bottom: 20rpx;
+      background-color: #ffffff;
+      box-sizing: border-box;
+      padding: 40rpx;
+      padding-right: 0;
+
+      &:deep(radio) {
+        transform: scale(0.68);
+      }
+      .address {
+        margin-left: 20rpx;
+        font-weight: 550;
+        font-size: 32rpx;
+        color: #222222;
+        line-height: 40rpx;
+      }
+
+      .username {
+        font-weight: 550;
+        font-size: 32rpx;
+        color: #222222;
+        line-height: 40rpx;
+        width: 180rpx;
+        text-align: left;
+      }
+      &.active {
+        background: #f5faff;
+        border: 1rpx solid #4d5dfa;
+      }
+    }
+  }
+}
+</style>