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

<template>
  <view class="page_container checkouthouse_box flex flex-col">
    <view class="search_box">
      <view
        @click="handleClick"
        class="search_view flex-center"
        v-if="!queryParmas.searchValue.trim() && Searching"
      >
        <uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
        <text>请输入关键字进行搜索</text>
      </view>
      <uni-easyinput
        @blur="handleInput"
        @clear="handleInput"
        @confirm="handleSearch"
        @input="handleInputString"
        :focus="true"
        ref="inputRef"
        v-model="queryParmas.searchValue"
        v-else
      />
    </view>
    <view class="search_list flex-1 flex">
      <scroll-view lower-threshold="160" scroll-y="true" @scrolltolower="scrolltolower">
        <radio-group @change="radioChange" v-if="searchlist.length > 0">
          <label v-for="(item, index) in searchlist" :key="index">
            <view
              class="search_item flex flex-between"
              :class="{
                active: checkoutHouseid === item.houseId
              }"
            >
              <view class="flex items-center flex-1">
                <!-- checkout -->
                <radio color="#4d5dfa" :value="item.houseId" />
                <!-- housename -->
                <text class="address">{{ item.addressCn ?? item.addressHyphen }}</text>
              </view>
              <!-- username -->
              <view class="username">{{ item.residentName }}</view>
            </view>
          </label>
        </radio-group>
        <view class="noData" v-else>
          <text>暂无数据</text>
        </view>
      </scroll-view>
    </view>

    <view class="action_btn" @tap="handleSelecthouse">
      <text>确 认</text>
    </view>
  </view>
  <!--  滚动 高度如何计算？ -->
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { getVillageHouseList_keyword } from '@/api/common.js'
import { onShow } from '@dcloudio/uni-app'

const Searching = ref(true)
const queryParmas = ref({
  searchValue: '',
  pageNum: 1,
  pageSize: 10
})
/** 点击时切换到input,并聚焦 */
function handleClick() {
  Searching.value = false
  queryParmas.value.searchValue = ''
}
/** 判断 失去焦点时 切换回 view */
function handleInput() {
  const value = queryParmas.value.searchValue.trim()
  if (value) {
    handleSearch()
  } else if (value === '') {
    queryParmas.value.searchValue = ''
    Searching.value = true
    handleSearch()
  }
}
function handleInputString() {
  if (queryParmas.value.searchValue.trim() === '') {
    queryParmas.value.searchValue = ''
    Searching.value = true
    handleSearch()
  }
}

const checkoutHouseid = ref(null)
const checkoutHouseInfo = ref(null)
/** 选择房屋,返回id*/
function radioChange(res) {
  checkoutHouseid.value = res.detail.value
  const find = searchlist.value.find(item => item.houseId === res.detail.value)
  if (find) {
    checkoutHouseInfo.value = find
  }
}

// -0---------------------------------------
const searchlist = ref([])
const isLoading = ref(false) // 加载锁
const hasMore = ref(true) // 是否还有更多数据
const total = ref(0)
function scrolltolower() {
  // 必须加这两个判断！
  if (isLoading.value || !hasMore.value) {
    return
  }
  queryParmas.value.pageNum += 1
  getlist()
}
function getlist() {
  // 1. 如果正在加载或没有更多数据，直接返回
  if (isLoading.value || !hasMore.value) return
  // 2. 开启锁
  isLoading.value = true

  getVillageHouseList_keyword(queryParmas.value, queryParmas.value.searchValue)
    .then(res => {
      // 追加数据（正确方式）
      searchlist.value = [...searchlist.value, ...res.rows]
      total.value = res.total
      // 判断是否还有更多
      hasMore.value = searchlist.value.length < total.value
    })
    .catch(() => {
      uni.showToast({
        icon: 'error',
        title: '网络异常'
      })
    })
    .finally(() => {
      isLoading.value = false
    })
}

onShow(() => {
  resetList()
})

// 重置list
function resetList() {
  searchlist.value = []
  queryParmas.value.pageNum = 1
  hasMore.value = true
  getlist()
}

// Search
function handleSearch() {
  hasMore.value = true
  queryParmas.value.pageNum = 1
  queryParmas.value.pageSize = 10
  searchlist.value = []
  getlist()
}

// ----------------------------------------
let eventChannel = null
// 必须在 onMounted 里获取
onMounted(() => {
  const instance = getCurrentInstance().proxy
  if (instance && instance.getOpenerEventChannel) {
    eventChannel = instance.getOpenerEventChannel()
  }
})

function handleSelecthouse() {
  if (!eventChannel) return
  eventChannel.emit('backData', {
    Houseid: checkoutHouseid.value,
    HouseName: checkoutHouseInfo.value.addressCn ?? checkoutHouseInfo.value.addressHyphen
  })
  // 3. 返回上一页
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.checkouthouse_box {
  background: #f9f9f9;

  .search_box {
    height: 80rpx;
    .search_view {
      height: 80rpx;
      line-height: 80rpx;
      background: #f3f3f3;
      border-radius: 8rpx;

      font-weight: 400;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.26);
      line-height: 48rpx;
      text-align: center;
    }
  }

  .search_list {
    height: 100%;
    margin-top: 20rpx;
    box-sizing: border-box;
    overflow: hidden;
    .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;
      }
    }
  }
  .noData {
    text-align: center;
    color: rgba(0, 0, 0, 0.26);
    font-size: larger;
    padding-top: 50rpx;
    letter-spacing: 10rpx;
  }

  .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>