qcp-pad/pages/patient-list/patient-list.vue

<template>
  <view class="u-p-40 ">
    <view class="relative" :style="{ 'padding-top': `${searchHeight}px` }">
      <SearchList ref="searchListRef" @on-search="onSearch" @on-load="onSearchLoad" />

      <uni-section title="患者列表" type="line" class="uni-my-5" titleFontSize="16px"></uni-section>

      <uni-grid :column="4" :highlight="true" :square="false" :show-border="false" @change="onClickItem">
        <uni-grid-item :index="0" class="u-p-20 ">
          <view class="list-item flex justify-center">
            <view class="icon-plus bg-main"><uni-icons type="plusempty" color="#fff" size="14" /></view>
            <text class="font-bold primary">创建患者</text>
          </view>
        </uni-grid-item>

        <uni-grid-item v-for="(item, index) in data" :index="index + 1" :key="index + 1" class="u-p-20">
          <view class="list-item flex " :class="{ active: currentAidId === item.firstAidId }">
            <view class="flex-1">
              <view class="text-title">
                <text>{{ item.patientName }}</text>
                <text>{{ item.patientAge }}</text>
                <text>{{ GET_GENDER_TEXT_BY_CODE(item.patientGender) }}</text>
              </view>
              <view class="text-summary">
                <u-tag :text="AID_STATUS[item.firstAidStatus]" mode="light" size="mini" />
                <text class="time">{{ item.firstAidTime }}</text>
              </view>
            </view>

            <view>
              <uni-icons type="forward" size="12"></uni-icons>
            </view>
          </view>
        </uni-grid-item>
      </uni-grid>

      <!-- 床🛏 -->
      <image class="create-user" src="@/static/images/bed.png" mode="scaleToFill" @click="openCarInfo" />
    </view>


    <!-- 平车详情弹窗 -->
    <uni-popup ref="popupRef" background-color="transparent" style="z-index: 9999;">
      <CarInfo @on-cancel="popupRef.close()" />
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import type { IPatient } from '@/store/modules/service';
import { useServiceStore } from '@/store/modules/service';
import { usePagination } from '@/hooks/usePagination'
import { GET_GENDER_TEXT_BY_CODE, AID_STATUS } from '@/config/service'
import { computed, ref } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app'

const serviceStore = useServiceStore()
const { pagination, updatePagination, resetPagination } = usePagination()

const popupRef = ref()
const data = ref<IPatient[]>([])
const keywords = ref('')
const searchHeight = ref(100)

const currentAidId = computed(() => serviceStore.currentPatient?.firstAidId)

function onClickItem(event) {
  console.log(event.detail);
  const { index } = event.detail
  if (index === 0) {
    // 创建患者
    uni.$u.openPage('detail2')
  } else {
    // 查看详情
    const item = data.value[index - 1]
    serviceStore.setCurrentPatient(item)
    uni.$u.openPage('detail1')
  }

}

function onSearch(searchValue: string) {
  keywords.value = searchValue
  resetPagination()
  getAidList()
}

// get list
async function getAidList() {
  try {
    const res = await uni.$u.api.getAidList(keywords.value, pagination.nextPage || 1, pagination.pageSize)
    data.value = res?.list || []
    updatePagination(res) // 更新分页信息

  } catch (error) {
    console.error(error);
  }

}

// 查看平车详情
function openCarInfo() {
  popupRef.value.open()
}

// 获取search 组件的高度
function onSearchLoad(height: number) {
  searchHeight.value = height
}

// 默认搜索
onSearch('')

// 触底加载下一页
onReachBottom(() => {
  console.log('reach bottom', pagination);
  if (pagination.nextPage === 0) {
    uni.$u.toast('没有更多数据')
    return
  }

  getAidList()

})
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.list-item {
  width: 100%;
  background-color: #fff;
  border-radius: 6px;
  padding: 1.5em 1em;
  margin-right: 1.2em;
  height: 220rpx;

  &.active {
    @extend .bg-main-v;

    .text-title {
      color: #fff
    }

    .text-summary {
      color: #fff
    }

    :deep(.uniui-forward) {
      color: #fff !important;
    }
  }

  .text-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.6em;

    text {
      margin-right: 1em;
    }
  }

  .text-summary {
    color: #888;
    font-size: 13px;

    .time {
      margin-left: 1em;
    }
  }
}

.icon-plus {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5em;
  font-weight: bold;
}

.create-user {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 120rpx;
  height: 120rpx;
}
</style>