nursing-home-app/src/pages/facility/index/index.vue

<template>
  <view class="facility">
    <wd-sticky :z-index="10">
      <view class="facility-top">
        <wd-search :placeholder-left="true" placeholder="请输入内容" v-model="state.text">
          <template #suffix>
            <view style="display: flex;align-items: center;margin: 0 20rpx;">
              <view style="margin-right: 20rpx;">
                <wd-button size="small" @click="onClickSearch">
                  搜索
                </wd-button>
              </view>
              <view>
                <wd-button type="info" size="small" @click="onClickReset">
                  重置
                </wd-button>
              </view>
            </view>
          </template>
        </wd-search>
        <wd-tabs slidable="always" v-model="state.tabValue">
          <wd-tab v-for="(item, index) in state.tabList" :title="item.label" :key="index" />
        </wd-tabs>
      </view>
    </wd-sticky>
    <view class="facility-list">
      <view class="facility-list-item" v-for="(item, index) in state.list" :key="index"
        @click="onClickNavigate(item.id)">
        <view class="facility-list-item-sign">
          {{ item.sign }}
        </view>
        <wd-img height="300rpx" mode="heightFix" :src="item.url" />
        <view style="padding: 0 10rpx;">
          <view class="facility-list-item-title">
            {{ item.title }}
          </view>
          <view class="facility-list-item-text">
            {{ item.description }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { apis } from '@/apis';

interface State {
  text?: string,
  tabValue?: string,
  tabList: {
    label: string,
    value: string,
  }[],
  list: {
    id: string,
    url: string,
    sign: string,
    title: string,
    description: string,
  }[],
  page: {
    pageNum: number,
    pageSize: number,
    total: number,
  },
};

const state = reactive<State>({
  text: undefined,
  tabValue: undefined,
  tabList: [],
  list: [],
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  },
});

const api = {
  // 获取区域列表
  fetchRegionList: async () => {
    try {
      const data = {
        dictType: 'region_type',
      };
      const res = await apis.fetchRegionList(data);
      const list = res.rows.map((item: any) => {
        return {
          label: item.dictLabel,
          value: item.dictValue,
        }
      });
      state.tabValue = list.length ? list[0].value : undefined;
      state.tabList = list;
    } catch (error: any) {
      console.error(error);
    }
  },
  // 获取设施列表
  fetchFacilityList: async (concat?: boolean) => {
    uni.showLoading({
      title: '加载中',
    });
    try {
      const data = {
        facilitiesTitle: state.text,
        dictType: state.tabValue,
        pageNum: state.page.pageNum,
        pageSize: state.page.pageSize,
      };
      const res = await apis.fetchFacilityList(data);
      const list = res.rows.map((item: any) => {
        return {
          id: item.facilitiesId,
          url: item.sysimg[0].url,
          sign: item.facilitiesName,
          title: item.facilitiesTitle,
          description: item.facilitiesDesc,
        };
      });
      state.list = concat ? state.list.concat(list) : list;
      state.page = {
        ...state.page,
        total: res.total,
      };
    } catch (error: any) {
      console.error(error);
    } finally {
      uni.hideLoading();
    }
  },
}

const init = async () => {
  uni.showLoading({
    title: '加载中',
  });
  // 获取区域列表
  api.fetchRegionList();
  // 获取设施列表
  api.fetchFacilityList();
  uni.hideLoading();
};

onShow(() => {
  state.page = {
    ...state.page,
    pageNum: 1,
  };
  init();
});

const onChangePagination = async () => {
  const { pageNum, pageSize, total } = state.page;
  if (total > pageNum * pageSize) {
    state.page = {
      ...state.page,
      pageNum: pageNum + 1,
    }
    // 获取设施列表
    await api.fetchFacilityList(true);
  }
}

onReachBottom(() => {
  onChangePagination();
});

// 点击搜索
const onClickSearch = async () => {
  state.page = {
    ...state.page,
    pageNum: 1,
  };
  // 获取设施列表
  await api.fetchFacilityList();
}

// 点击重置
const onClickReset = async () => {
  state.text = undefined;
  state.tabValue = undefined
  state.page = {
    ...state.page,
    pageNum: 1,
  };
  // 获取设施列表
  await api.fetchFacilityList();
}

// 点击跳转
const onClickNavigate = (id: string) => {
  uni.navigateTo({
    url: `/pages/facility/facilityDetail/index?id=${id}`,
  });
}
</script>

<style lang="scss" scoped>
.facility {
  &-top {
    width: 100vw;
    border-bottom: 2rpx solid $border-color;
  }

  &-list {
    padding: 0 20rpx;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;

    &-item {
      width: calc(50% - 10rpx);
      background: #F4F4F4;
      border-radius: $border-radius-base;
      margin-bottom: 20rpx;
      position: relative;
      overflow: hidden;

      &-sign {
        width: 85%;
        height: 50rpx;
        padding: 0 10rpx;
        background: rgba(0, 0, 0, 0.4);
        border-top-right-radius: $border-radius-base;
        display: flex;
        align-items: center;
        font-size: $font-size-mini;
        color: #FFFFFF;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: absolute;
        top: 250rpx;
        left: 0;
        z-index: 2;
      }

      &-title {
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 10rpx;
      }

      &-text {
        width: 100%;
        max-height: 300rpx;
        color: $gray-color;
        overflow: hidden;
        margin-bottom: 10rpx;
      }
    }

    &-item:nth-child(odd) {
      margin-right: 10rpx;
    }

    &-item:nth-child(even) {
      margin-left: 10rpx;
    }
  }
}
</style>