|
@@ -38,8 +38,11 @@
|
|
</view>
|
|
</view>
|
|
<!-- 下拉框 -->
|
|
<!-- 下拉框 -->
|
|
<view
|
|
<view
|
|
- v-if="dropDownNames && dropDownNames.length > 0"
|
|
|
|
- class="d-flex flex-row justify-around mt-2"
|
|
|
|
|
|
+ v-if="dropDownNames.length > 0"
|
|
|
|
+ class="d-flex flex-row justify-between align-center mt-2"
|
|
|
|
+ :class="[
|
|
|
|
+ dropDownNames.length >= 3 ? 'justify-around' : ('justify-between')
|
|
|
|
+ ]"
|
|
>
|
|
>
|
|
<template v-for="(drop, k) in dropDownNames" :key="k" >
|
|
<template v-for="(drop, k) in dropDownNames" :key="k" >
|
|
<SimpleDropDownPicker
|
|
<SimpleDropDownPicker
|
|
@@ -49,47 +52,70 @@
|
|
@update:modelValue="(v) => handleChangeDropDownValue(k, v)"
|
|
@update:modelValue="(v) => handleChangeDropDownValue(k, v)"
|
|
/>
|
|
/>
|
|
</template>
|
|
</template>
|
|
|
|
+ <view
|
|
|
|
+ v-if="showTotal && dropDownNames.length < 3"
|
|
|
|
+ class="d-flex flex-row align-center mt-3 size-s color-primary text-bold"
|
|
|
|
+ >
|
|
|
|
+ <text>总共有 {{ listLoader.total }} 个</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view
|
|
|
|
+ v-if="showTotal && (dropDownNames.length >= 3 || dropDownNames.length == 0)"
|
|
|
|
+ class="d-flex flex-row justify-center align-center mt-3 size-s color-primary text-bold"
|
|
|
|
+ >
|
|
|
|
+ <text>总共有 {{ listLoader.total }} 个</text>
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
<!-- 列表 -->
|
|
<!-- 列表 -->
|
|
- <view class="d-flex flex-row flex-wrap justify-between mt-3">
|
|
|
|
|
|
+ <view class="position-relative d-flex flex-row flex-wrap justify-between align-stretch mt-3">
|
|
<view
|
|
<view
|
|
v-for="(item, i) in listLoader.list.value"
|
|
v-for="(item, i) in listLoader.list.value"
|
|
:key="item.id"
|
|
:key="item.id"
|
|
:class="[
|
|
:class="[
|
|
|
|
+ 'position-relative d-flex flex-grow-1',
|
|
itemType.endsWith('-2') ? 'width-1-2' : 'w-100'
|
|
itemType.endsWith('-2') ? 'width-1-2' : 'w-100'
|
|
]"
|
|
]"
|
|
>
|
|
>
|
|
<Box2LineLargeImageUserShadow
|
|
<Box2LineLargeImageUserShadow
|
|
v-if="itemType.startsWith('image-large')"
|
|
v-if="itemType.startsWith('image-large')"
|
|
|
|
+ class="w-100"
|
|
titleColor="title-text"
|
|
titleColor="title-text"
|
|
:classNames="getItemClass(i)"
|
|
:classNames="getItemClass(i)"
|
|
:image="getImage(item)"
|
|
:image="getImage(item)"
|
|
:title="item.title"
|
|
:title="item.title"
|
|
:desc="item.desc"
|
|
:desc="item.desc"
|
|
- @click="goDetails(item.id)"
|
|
|
|
|
|
+ :tags="item.bottomTags"
|
|
|
|
+ :badge="item.badge"
|
|
|
|
+ @click="goDetails(item, item.id)"
|
|
/>
|
|
/>
|
|
<Box2LineImageRightShadow
|
|
<Box2LineImageRightShadow
|
|
v-else-if="itemType.startsWith('article-common')"
|
|
v-else-if="itemType.startsWith('article-common')"
|
|
|
|
+ class="w-100"
|
|
titleColor="title-text"
|
|
titleColor="title-text"
|
|
:classNames="getItemClass(i)"
|
|
:classNames="getItemClass(i)"
|
|
:image="getImage(item)"
|
|
:image="getImage(item)"
|
|
:title="item.title"
|
|
:title="item.title"
|
|
:desc="item.desc"
|
|
:desc="item.desc"
|
|
|
|
+ :tags="item.bottomTags"
|
|
|
|
+ :badge="item.badge"
|
|
:wideImage="true"
|
|
:wideImage="true"
|
|
- @click="goDetails(item.id)"
|
|
|
|
|
|
+ @click="goDetails(item, item.id)"
|
|
/>
|
|
/>
|
|
<Box2LineImageRightShadow
|
|
<Box2LineImageRightShadow
|
|
v-else-if="itemType.startsWith('article-character')"
|
|
v-else-if="itemType.startsWith('article-character')"
|
|
|
|
+ class="w-100"
|
|
:classNames="getItemClass(i)"
|
|
:classNames="getItemClass(i)"
|
|
:image="getImage(item)"
|
|
:image="getImage(item)"
|
|
titleColor="title-text"
|
|
titleColor="title-text"
|
|
:title="item.title"
|
|
:title="item.title"
|
|
- :tags="item.keywords"
|
|
|
|
|
|
+ :tags="item.bottomTags || item.keywords"
|
|
:desc="item.desc"
|
|
:desc="item.desc"
|
|
- @click="goDetails(item.id)"
|
|
|
|
|
|
+ :badge="item.badge"
|
|
|
|
+ @click="goDetails(item, item.id)"
|
|
/>
|
|
/>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
+ <view v-if="itemType.endsWith('-2') && listLoader.list.value.length % 2 != 0" class="width-1-2" />
|
|
</view>
|
|
</view>
|
|
<SimplePageListLoader :loader="listLoader" />
|
|
<SimplePageListLoader :loader="listLoader" />
|
|
</view>
|
|
</view>
|
|
@@ -129,7 +155,7 @@ const props = defineProps({
|
|
*/
|
|
*/
|
|
title: {
|
|
title: {
|
|
type: String,
|
|
type: String,
|
|
- default: '通用列表页',
|
|
|
|
|
|
+ default: '',
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* 分组标签
|
|
* 分组标签
|
|
@@ -150,11 +176,18 @@ const props = defineProps({
|
|
default: true,
|
|
default: true,
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
|
|
+ * 显示总数
|
|
|
|
+ */
|
|
|
|
+ showTotal: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false,
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
* 下拉框选项控制
|
|
* 下拉框选项控制
|
|
*/
|
|
*/
|
|
dropDownNames: {
|
|
dropDownNames: {
|
|
type: Object as PropType<DropDownNames[]>,
|
|
type: Object as PropType<DropDownNames[]>,
|
|
- default: null,
|
|
|
|
|
|
+ default: () => ([]),
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* 列表项类型
|
|
* 列表项类型
|
|
@@ -184,7 +217,7 @@ const props = defineProps({
|
|
searchText: string,
|
|
searchText: string,
|
|
dropDownValues: number[],
|
|
dropDownValues: number[],
|
|
tabSelect: number,
|
|
tabSelect: number,
|
|
- ) => Promise<CommonListItem[]>>,
|
|
|
|
|
|
+ ) => Promise<{ list: CommonListItem[], total: number }>>,
|
|
required: true,
|
|
required: true,
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
@@ -205,16 +238,24 @@ const props = defineProps({
|
|
type: Boolean,
|
|
type: Boolean,
|
|
default: true,
|
|
default: true,
|
|
},
|
|
},
|
|
|
|
+ startTab: {
|
|
|
|
+ type: Number,
|
|
|
|
+ default: undefined,
|
|
|
|
+ }
|
|
})
|
|
})
|
|
|
|
|
|
|
|
+const emit = defineEmits([ 'goCustomDetails' ])
|
|
|
|
+
|
|
const dropDownValues = ref<any>([]);
|
|
const dropDownValues = ref<any>([]);
|
|
const searchValue = ref('');
|
|
const searchValue = ref('');
|
|
-const listLoader = useSimplePageListLoader(props.pageSize, async (page, pageSize) => await props.load(
|
|
|
|
- page, pageSize,
|
|
|
|
- searchValue.value,
|
|
|
|
- dropDownValues.value,
|
|
|
|
- tab.value,
|
|
|
|
-));
|
|
|
|
|
|
+const listLoader = useSimplePageListLoader(props.pageSize, async (page, pageSize) => {
|
|
|
|
+ return await props.load(
|
|
|
|
+ page, pageSize,
|
|
|
|
+ searchValue.value,
|
|
|
|
+ dropDownValues.value,
|
|
|
|
+ tab.value,
|
|
|
|
+ )
|
|
|
|
+});
|
|
const tab = ref(0)
|
|
const tab = ref(0)
|
|
|
|
|
|
function handleChangeDropDownValue(index: number, value: number) {
|
|
function handleChangeDropDownValue(index: number, value: number) {
|
|
@@ -224,7 +265,11 @@ function handleChangeDropDownValue(index: number, value: number) {
|
|
function doSearch() {
|
|
function doSearch() {
|
|
listLoader.loadData(undefined, true);
|
|
listLoader.loadData(undefined, true);
|
|
}
|
|
}
|
|
-function goDetails(id: number) {
|
|
|
|
|
|
+function goDetails(item: any, id: number) {
|
|
|
|
+ if (props.detailsPage == 'custom') {
|
|
|
|
+ emit('goCustomDetails', item, id)
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
navTo(props.detailsPage, {
|
|
navTo(props.detailsPage, {
|
|
...props.detailsParams,
|
|
...props.detailsParams,
|
|
id
|
|
id
|
|
@@ -245,10 +290,15 @@ watch(tab, () => {
|
|
});
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
- uni.setNavigationBarTitle({
|
|
|
|
- title: props.title,
|
|
|
|
- })
|
|
|
|
- listLoader.loadData(undefined, true);
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ if (props.startTab)
|
|
|
|
+ tab.value = props.startTab;
|
|
|
|
+ if (props.title)
|
|
|
|
+ uni.setNavigationBarTitle({ title: props.title, })
|
|
|
|
+ for (const element of props.dropDownNames)
|
|
|
|
+ dropDownValues.value.push(element.defaultSelectedValue);
|
|
|
|
+ listLoader.loadData(undefined, true);
|
|
|
|
+ }, 200);
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
|
|
|