159 lines
3.5 KiB
Vue
159 lines
3.5 KiB
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> |