ykt-wxapp/pages/library/diagnosis-list.vue

<template>
  <full-page>
    <template #header>
      <view class="page-item border-bottom bg-white">
        <input class="search-input" placeholder-style="font-size:28rpx" placeholder="请搜索名称" v-model="name"
          @input="search" />
      </view>
    </template>
    <view v-for="i in list" :key="i.label" class="search-item bg-white" @click="select(i.label)">
      <view class="name">{{ i.label }}</view>
      <icon class="icon-checked" :class="selectMap[i.label] ? '' : 'hidden'" type="success_no_circle" size="18" />
    </view>
    <template #footer>
      <button-footer confirmText="确定" :showCancel="false" @confirm="confirm()" />
    </template>
  </full-page>
</template>
<script setup>
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { onLoad } from "@dcloudio/uni-app";
import api from '@/utils/api';
import { remove, get } from '@/utils/cache';
import useDebounce from '@/utils/useDebounce';
import { toast } from '@/utils/widget';

import ButtonFooter from '@/components/button-footer.vue';
import FullPage from '@/components/full-page.vue';

const name = ref('');
const list = ref([]);
const page = ref(1);
const pageSize = ref(30);
const more = ref(false);
const selections = ref([]);
const eventName = ref('')
const selectMap = computed(() => selections.value.reduce((val, i) => {
  i && (val[i] = i);
  return val
}, {}))

const search = useDebounce(() => {
  page.value = 1;
  getList()
})

function confirm() {
  if (selections.value.length) {
    uni.$emit(eventName.value, selections.value);
    uni.navigateBack()
  } else {
    toast('请选择疾病')
  }
}

function select(label) {
  if (selections.value.includes(label)) {
    selections.value = selections.value.filter(i => i !== label)
  } else {
    selections.value.push(label)
  }
}

async function getList() {
  const res = await api('getPageDisease', { name: name.value.trim(), page: page.value, pageSize: pageSize.value });
  const diseases = res && Array.isArray(res.list) ? res.list.map(i => ({
    label: i.diseaseName,
    value: i.diseaseName
  })).filter(i => i.label !== name.value.trim()) : [];
  const pages = res && res.pages ? res.pages : 0;
  more.value = pages > page.value;

  if (page.value === 1) {
    const data = name.value.trim() ? [{
      label: name.value.trim(),
      value: name.value.trim()
    }] : [];
    data.push(...diseases);
    list.value = data
  } else {
    list.value = [...list.value, ...diseases];
  }
}
onLoad(options => {
  eventName.value = options.eventName;
  const data = get('diagnosis-list-selections');
  selections.value = Array.isArray(data) ? data : [];
  remove('diagnosis-list-selections');
  if (selections.value.length) {
    list.value = selections.value.map(i => ({
      label: i,
      value: i
    }))
  } else {
    getList()
  }
})
</script>
<style scoped lang="scss">
.hidden {
  opacity: 0;
}

.border-bottom {
  border-bottom: 1px solid #eee;
}

.border-top {
  border-top: 1px solid #eee;
}

.list-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100vh;
}

.search-input {
  border: 1px solid #eee;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;

}

.scroll-wrapper {
  position: relative;
  flex-grow: 1;
}

.list-scroll {
  position: absolute;
  inset: 0;
}

.search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
}

.icon-checked {
  flex-shrink: 0;
}

.name {
  flex-grow: 1;
  margin-right: 20rpx;
  font-size: 28rpx;
}

.page-item {
  flex-shrink: 0;
  padding: 30rpx;
}
</style>