|
@@ -18,7 +18,7 @@
|
|
|
/>
|
|
/>
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 搜索 -->
|
|
<!-- 搜索 -->
|
|
|
- <view v-if="showSearch" class="d-flex flex-col">
|
|
|
|
|
|
|
+ <view v-if="showSearch && showList" class="d-flex flex-col">
|
|
|
<SearchBar
|
|
<SearchBar
|
|
|
v-model="searchValue"
|
|
v-model="searchValue"
|
|
|
:placeholder="`输入关键词搜索${title}`"
|
|
:placeholder="`输入关键词搜索${title}`"
|
|
@@ -58,77 +58,79 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 列表 -->
|
|
<!-- 列表 -->
|
|
|
|
|
+ <slot name="list" :tabId="tabCurrentId" />
|
|
|
<view class="position-relative d-flex flex-row flex-wrap justify-between align-stretch mt-3">
|
|
<view class="position-relative d-flex flex-row flex-wrap justify-between align-stretch mt-3">
|
|
|
- <slot name="list" />
|
|
|
|
|
- <view
|
|
|
|
|
- v-for="(item, i) in listLoader.list.value"
|
|
|
|
|
- :key="item.id"
|
|
|
|
|
- :class="[
|
|
|
|
|
- 'position-relative d-flex flex-grow-1',
|
|
|
|
|
- itemType.endsWith('-2') ? 'width-1-2' : 'w-100'
|
|
|
|
|
- ]"
|
|
|
|
|
- >
|
|
|
|
|
- <Box2LineLargeImageUserShadow
|
|
|
|
|
- v-if="itemType.startsWith('image-large')"
|
|
|
|
|
- class="w-100"
|
|
|
|
|
- titleColor="title-text"
|
|
|
|
|
- :classNames="getItemClass(i)"
|
|
|
|
|
- :image="getImage(item)"
|
|
|
|
|
- :titleBox="item.titleBox"
|
|
|
|
|
- :titlePrefix="item.titlePrefix"
|
|
|
|
|
- :title="item.title"
|
|
|
|
|
- :desc="item.desc"
|
|
|
|
|
- :tags="item.bottomTags"
|
|
|
|
|
- :badge="item.badge"
|
|
|
|
|
- @click="goDetails(item, item.id)"
|
|
|
|
|
- />
|
|
|
|
|
- <Box2LineImageRightShadow
|
|
|
|
|
- v-else-if="itemType.startsWith('article-common')"
|
|
|
|
|
- class="w-100"
|
|
|
|
|
- titleColor="title-text"
|
|
|
|
|
- :titleBox="item.titleBox"
|
|
|
|
|
- :titlePrefix="item.titlePrefix"
|
|
|
|
|
- :classNames="getItemClass(i)"
|
|
|
|
|
- :image="getImage(item)"
|
|
|
|
|
- :title="item.title"
|
|
|
|
|
- :desc="item.desc"
|
|
|
|
|
- :tags="item.bottomTags"
|
|
|
|
|
- :badge="item.badge"
|
|
|
|
|
- :wideImage="true"
|
|
|
|
|
- @click="goDetails(item, item.id)"
|
|
|
|
|
- />
|
|
|
|
|
- <Box2LineImageRightShadow
|
|
|
|
|
- v-else-if="itemType.startsWith('article-character')"
|
|
|
|
|
- class="w-100"
|
|
|
|
|
- :classNames="getItemClass(i)"
|
|
|
|
|
- :image="getImage(item)"
|
|
|
|
|
- titleColor="title-text"
|
|
|
|
|
- :title="item.title"
|
|
|
|
|
- :titlePrefix="item.titlePrefix"
|
|
|
|
|
- :titleBox="item.titleBox"
|
|
|
|
|
- :tags="item.bottomTags || item.keywords"
|
|
|
|
|
- :desc="item.desc"
|
|
|
|
|
- :badge="item.badge"
|
|
|
|
|
- @click="goDetails(item, item.id)"
|
|
|
|
|
- />
|
|
|
|
|
- <Box2LineImageRightShadow
|
|
|
|
|
- v-else-if="itemType.startsWith('simple-text')"
|
|
|
|
|
- class="w-100"
|
|
|
|
|
- :classNames="getItemClass(i)"
|
|
|
|
|
- titleColor="title-text"
|
|
|
|
|
- :border="false"
|
|
|
|
|
- :showImage="false"
|
|
|
|
|
- :title="item.title"
|
|
|
|
|
- :titlePrefix="item.titlePrefix"
|
|
|
|
|
- :titleBox="item.titleBox"
|
|
|
|
|
- :tags="item.bottomTags || item.keywords"
|
|
|
|
|
- :desc="item.desc"
|
|
|
|
|
- :badge="item.badge"
|
|
|
|
|
- @click="goDetails(item, item.id)"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <template v-if="showList">
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-for="(item, i) in listLoader.list.value"
|
|
|
|
|
+ :key="item.id"
|
|
|
|
|
+ :class="[
|
|
|
|
|
+ 'position-relative d-flex flex-grow-1',
|
|
|
|
|
+ itemType.endsWith('-2') ? 'width-1-2' : 'w-100'
|
|
|
|
|
+ ]"
|
|
|
|
|
+ >
|
|
|
|
|
+ <Box2LineLargeImageUserShadow
|
|
|
|
|
+ v-if="itemType.startsWith('image-large')"
|
|
|
|
|
+ class="w-100"
|
|
|
|
|
+ titleColor="title-text"
|
|
|
|
|
+ :classNames="getItemClass(i)"
|
|
|
|
|
+ :image="getImage(item)"
|
|
|
|
|
+ :titleBox="item.titleBox"
|
|
|
|
|
+ :titlePrefix="item.titlePrefix"
|
|
|
|
|
+ :title="item.title"
|
|
|
|
|
+ :desc="item.desc"
|
|
|
|
|
+ :tags="item.bottomTags"
|
|
|
|
|
+ :badge="item.badge"
|
|
|
|
|
+ @click="goDetails(item, item.id)"
|
|
|
|
|
+ />
|
|
|
|
|
+ <Box2LineImageRightShadow
|
|
|
|
|
+ v-else-if="itemType.startsWith('article-common')"
|
|
|
|
|
+ class="w-100"
|
|
|
|
|
+ titleColor="title-text"
|
|
|
|
|
+ :titleBox="item.titleBox"
|
|
|
|
|
+ :titlePrefix="item.titlePrefix"
|
|
|
|
|
+ :classNames="getItemClass(i)"
|
|
|
|
|
+ :image="getImage(item)"
|
|
|
|
|
+ :title="item.title"
|
|
|
|
|
+ :desc="item.desc"
|
|
|
|
|
+ :tags="item.bottomTags"
|
|
|
|
|
+ :badge="item.badge"
|
|
|
|
|
+ :wideImage="true"
|
|
|
|
|
+ @click="goDetails(item, item.id)"
|
|
|
|
|
+ />
|
|
|
|
|
+ <Box2LineImageRightShadow
|
|
|
|
|
+ v-else-if="itemType.startsWith('article-character')"
|
|
|
|
|
+ class="w-100"
|
|
|
|
|
+ :classNames="getItemClass(i)"
|
|
|
|
|
+ :image="getImage(item)"
|
|
|
|
|
+ titleColor="title-text"
|
|
|
|
|
+ :title="item.title"
|
|
|
|
|
+ :titlePrefix="item.titlePrefix"
|
|
|
|
|
+ :titleBox="item.titleBox"
|
|
|
|
|
+ :tags="item.bottomTags || item.keywords"
|
|
|
|
|
+ :desc="item.desc"
|
|
|
|
|
+ :badge="item.badge"
|
|
|
|
|
+ @click="goDetails(item, item.id)"
|
|
|
|
|
+ />
|
|
|
|
|
+ <Box2LineImageRightShadow
|
|
|
|
|
+ v-else-if="itemType.startsWith('simple-text')"
|
|
|
|
|
+ class="w-100"
|
|
|
|
|
+ :classNames="getItemClass(i)"
|
|
|
|
|
+ titleColor="title-text"
|
|
|
|
|
+ :border="false"
|
|
|
|
|
+ :showImage="false"
|
|
|
|
|
+ :title="item.title"
|
|
|
|
|
+ :titlePrefix="item.titlePrefix"
|
|
|
|
|
+ :titleBox="item.titleBox"
|
|
|
|
|
+ :tags="item.bottomTags || item.keywords"
|
|
|
|
|
+ :desc="item.desc"
|
|
|
|
|
+ :badge="item.badge"
|
|
|
|
|
+ @click="goDetails(item, item.id)"
|
|
|
|
|
+ />
|
|
|
|
|
|
|
|
- </view>
|
|
|
|
|
- <view v-if="itemType.endsWith('-2') && listLoader.list.value.length % 2 != 0" class="width-1-2" />
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view v-if="itemType.endsWith('-2') && listLoader.list.value.length % 2 != 0" class="width-1-2" />
|
|
|
|
|
+ </template>
|
|
|
</view>
|
|
</view>
|
|
|
<SimplePageListLoader :loader="listLoader" />
|
|
<SimplePageListLoader :loader="listLoader" />
|
|
|
</view>
|
|
</view>
|
|
@@ -220,6 +222,13 @@ const props = defineProps({
|
|
|
default: false,
|
|
default: false,
|
|
|
},
|
|
},
|
|
|
/**
|
|
/**
|
|
|
|
|
+ * 显示列表的Tab ID
|
|
|
|
|
+ */
|
|
|
|
|
+ showListTabIds: {
|
|
|
|
|
+ type: Array as PropType<number[]>,
|
|
|
|
|
+ default: () => ([]),
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
* 下拉框选项控制
|
|
* 下拉框选项控制
|
|
|
*/
|
|
*/
|
|
|
dropDownNames: {
|
|
dropDownNames: {
|
|
@@ -259,12 +268,21 @@ const props = defineProps({
|
|
|
},
|
|
},
|
|
|
/**
|
|
/**
|
|
|
* 点击详情跳转页面路径
|
|
* 点击详情跳转页面路径
|
|
|
|
|
+ * 可以是字符串路径,也可以是对象数组,每个对象包含路径和参数
|
|
|
|
|
+ * * 特殊值:byContent 表示根据 detailsPageByContentCallback 函数返回值跳转。
|
|
|
*/
|
|
*/
|
|
|
detailsPage: {
|
|
detailsPage: {
|
|
|
type: [String,Object],
|
|
type: [String,Object],
|
|
|
default: '/pages/article/details'
|
|
default: '/pages/article/details'
|
|
|
},
|
|
},
|
|
|
/**
|
|
/**
|
|
|
|
|
+ * 根据内容项返回跳转路径的回调函数
|
|
|
|
|
+ */
|
|
|
|
|
+ detailsPageByContentCallback: {
|
|
|
|
|
+ type: Function as PropType<(item: any) => string>,
|
|
|
|
|
+ default: true,
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
* 详情跳转页面参数
|
|
* 详情跳转页面参数
|
|
|
*/
|
|
*/
|
|
|
detailsParams: {
|
|
detailsParams: {
|
|
@@ -307,6 +325,7 @@ const listLoader = useSimplePageListLoader(props.pageSize, async (page, pageSize
|
|
|
});
|
|
});
|
|
|
const tabCurrentIndex = ref(0)
|
|
const tabCurrentIndex = ref(0)
|
|
|
const tabCurrentId = computed(() => props.tabs?.[tabCurrentIndex.value]?.id ?? -1)
|
|
const tabCurrentId = computed(() => props.tabs?.[tabCurrentIndex.value]?.id ?? -1)
|
|
|
|
|
+const showList = computed(() => props.showListTabIds.length == 0 || props.showListTabIds.includes(tabCurrentId.value))
|
|
|
|
|
|
|
|
function handleChangeDropDownValue(index: number, value: number) {
|
|
function handleChangeDropDownValue(index: number, value: number) {
|
|
|
dropDownValues.value[index] = value;
|
|
dropDownValues.value[index] = value;
|
|
@@ -332,7 +351,25 @@ function goDetails(item: any, id: number) {
|
|
|
emit('goCustomDetails', item, id)
|
|
emit('goCustomDetails', item, id)
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
+ if (props.detailsPage == 'byContent') {
|
|
|
|
|
+ if (handleByContent())
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ function handleByContent() {
|
|
|
|
|
+ const page = props.detailsPageByContentCallback(item);
|
|
|
|
|
+ if (page) {
|
|
|
|
|
+ navTo(page, {
|
|
|
|
|
+ ...props.detailsParams,
|
|
|
|
|
+ id
|
|
|
|
|
+ })
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if (typeof props.detailsPage === 'object' && typeof props.detailsPage[0] === 'string') {
|
|
if (typeof props.detailsPage === 'object' && typeof props.detailsPage[0] === 'string') {
|
|
|
|
|
+ if (props.detailsPage[tabCurrentIndex.value] == 'byContent' && handleByContent())
|
|
|
|
|
+ return;
|
|
|
navTo(props.detailsPage[tabCurrentIndex.value], {
|
|
navTo(props.detailsPage[tabCurrentIndex.value], {
|
|
|
...props.detailsParams,
|
|
...props.detailsParams,
|
|
|
id
|
|
id
|
|
@@ -340,6 +377,8 @@ function goDetails(item: any, id: number) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
if (typeof props.detailsPage == 'object' && typeof props.detailsPage[0] === 'object') {
|
|
if (typeof props.detailsPage == 'object' && typeof props.detailsPage[0] === 'object') {
|
|
|
|
|
+ if (props.detailsPage[tabCurrentIndex.value].page == 'byContent' && handleByContent())
|
|
|
|
|
+ return;
|
|
|
const item = props.detailsPage[tabCurrentIndex.value];
|
|
const item = props.detailsPage[tabCurrentIndex.value];
|
|
|
navTo(item.page, {
|
|
navTo(item.page, {
|
|
|
...item.params,
|
|
...item.params,
|