wx-starlock/pages/setting/openDoorNotice.vue

<template>
  <view>
    <view class="text-sm h-80rpx py-3 mx-4">
      若锁没有联网，除电子钥匙外，密码、卡、指纹等开门提醒无法及时发送，请根据你的实际情况选择。
    </view>
    <scroll-view
      v-if="deviceInfo"
      scroll-y="true"
      :style="{
        height:
          deviceInfo.windowHeight -
          deviceInfo.safeArea.top -
          (deviceInfo.screenWidth / 750) * 128 +
          'px'
      }"
      lower-threshold="100"
      @refresherrefresh="refresherList"
      :refresher-enabled="true"
      @scrolltolower="nextPage"
      :refresher-triggered="refresherTriggered"
    >
      <view v-if="list.length === 0">
        <image
          class="w-150 h-150 transform-translate-x-[-50%] mt-300rpx mr-a mb-20rpx ml-50%"
          src="https://oss-lock.xhjcn.ltd/mp/background_empty_list.png"
          mode="aspectFill"
        ></image>
        <view class="text-center text-base text-#999999">暂无数据</view>
      </view>
      <view v-else class="pb-[calc(env(safe-area-inset-bottom)+250rpx)]">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="flex items-center bg-white px-4 py-2 mt-4rpx"
          @click="toJump(item)"
        >
          <image :src="keysType[item.settingValue.openDoorType].icon" class="w-80 h-80" />
          <view class="ml-3">
            <view class="break-all max-w-500 text-base">{{ item.settingValue.remark }}</view>
            <view class="text-sm text-gray-500">{{
              keysType[item.settingValue.openDoorType].name
            }}</view>
          </view>
          <view class="ml-a"> <up-icon name="arrow-right"></up-icon></view>
        </view>
      </view>
    </scroll-view>
    <view
      @click="toJump(null)"
      class="flex items-center justify-center bg-white shadow-sm rounded-md pos-fixed bottom-[calc(env(safe-area-inset-bottom)+48rpx)] w-686 mx-4 h-100"
      ><view class="flex items-center">
        <up-icon name="plus-circle-fill" color="#002ce5" size="50rpx"></up-icon
        ><view class="text-lg text-#63b8af ml-2 font-bold">添加家人</view>
      </view></view
    >
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { useBasicStore } from '@/stores/basic'
  import { getNoticeListRequest } from '@/api/setting'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { keysType } from '@/constant/keyType'

  const $basic = useBasicStore()
  const $bluetooth = useBluetoothStore()

  const deviceInfo = ref(null)

  const refresherTriggered = ref(false)

  const list = ref([])
  const pageSize = 50
  const pageNo = ref(1)
  const total = ref(0)

  onMounted(async () => {
    uni.showLoading({
      title: '加载中'
    })
    deviceInfo.value = await $basic.getDeviceInfo()
    await getList(pageNo.value, true)
  })

  const refresherList = async () => {
    refresherTriggered.value = true
    pageNo.value = 1
    const { code } = await getList(pageNo.value, false)
    if (code === 0) {
      uni.showToast({
        title: '刷新成功',
        icon: 'none'
      })
    }
    refresherTriggered.value = false
  }

  const nextPage = async () => {
    if (total.value <= pageNo.value * pageSize) {
      return
    }
    const no = pageNo.value + 1
    const { code } = await getList(no, false)
    if (code === 0) {
      pageNo.value = no
    }
  }

  const getList = async (no, flag) => {
    const { code, data, message } = await getNoticeListRequest({
      lockId: $bluetooth.currentLockInfo.lockId,
      noticeType: 10,
      pageSize,
      pageNo: no
    })
    if (flag) {
      uni.hideLoading()
    }

    if (code === 0) {
      total.value = data.total
      if (no === 1) {
        list.value = data.list
      } else {
        list.value = list.value.concat(data.list)
      }
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
    return { code, message }
  }

  const toJump = (data = null) => {
    $basic.routeJump({
      name: 'noticeDetail',
      params: {
        info: data ? JSON.stringify(data) : null,
        title: data ? '家人详情' : '添加家人'
      },
      events: {
        refresherList() {
          pageNo.value = 1
          getList(pageNo.value, false)
        }
      }
    })
  }
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }
</style>