feat: 首页增加排序功能

pull/1/head
lizijiee 1 year ago
parent 0ab300fd47
commit 81ca2dbc90

@ -17,6 +17,7 @@ import { computed, nextTick, onMounted, onUnmounted, onUpdated, reactive, ref, u
import GeneratePackageModal from './modal/GeneratePackageModal.vue' import GeneratePackageModal from './modal/GeneratePackageModal.vue'
import LoginSuccessModal from './modal/LoginSuccessModal.vue' import LoginSuccessModal from './modal/LoginSuccessModal.vue'
import PackageSettingsModal from './modal/PackageSettingsModal.vue' import PackageSettingsModal from './modal/PackageSettingsModal.vue'
import type { PictureSortParam } from "/#/api"
const deviceHeight = ref(600) const deviceHeight = ref(600)
let _masonry: null | Masonry = null let _masonry: null | Masonry = null
@ -35,7 +36,10 @@ const LoginSuccessModalRef = ref(null)
const loading = ref(false) const loading = ref(false)
const message = useMessage() const message = useMessage()
const totalCount = ref(0) const totalCount = ref(0)
const sortBy = ref<'asc' | 'desc'>('desc') const sortBy: PictureSortParam = {
orderbyname: "asc",
orderbyvalue: "pictureResult",
};
const imageRef = ref<ComponentElRef | null>() const imageRef = ref<ComponentElRef | null>()
let canloadMore = true let canloadMore = true
let filterId = null let filterId = null
@ -128,7 +132,7 @@ async function featchList() {
const asideParams = unref(configStore.getAsideValue) const asideParams = unref(configStore.getAsideValue)
const params = filterId ? { userSearchId: filterId } : asideParams const params = filterId ? { userSearchId: filterId } : asideParams
const result = await getPictureList({ ...pagination, ...contentParams, ...params, ordertype: sortBy.value }) const result = await getPictureList({ ...pagination, ...contentParams, ...params, ...sortBy })
const { data, pageCount, total } = result const { data, pageCount, total } = result
totalCount.value = total totalCount.value = total
canloadMore = pageCount >= pagination.pageNo && pageCount > 0 canloadMore = pageCount >= pagination.pageNo && pageCount > 0
@ -261,8 +265,9 @@ function getAvatar(url: string): string {
return url ? getImgUrl(url) : avatar return url ? getImgUrl(url) : avatar
} }
function sortHandler() { function sortHandler(orderby: "pictureResult" | "fromuptime") {
sortBy.value = sortBy.value === 'asc' ? 'desc' : 'asc' sortBy.orderbyvalue = orderby;
sortBy.orderbyname = sortBy.orderbyname === "asc" ? "desc" : "asc";
refreshHandler() refreshHandler()
} }
async function downloadImage(item) { async function downloadImage(item) {
@ -338,10 +343,14 @@ function previewHandler(index: number,event: MouseEvent) {
<SvgIcon class="gap" name="arrow-botton" size="14" /> <SvgIcon class="gap" name="arrow-botton" size="14" />
</div> </div>
</n-popselect> </n-popselect>
<!-- <div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler()"> <div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('pictureResult')">
<span>相似度排序</span> <span>相似度排序</span>
<SvgIcon style="margin-left: 8px;" name="sort" size="12" /> <SvgIcon style="margin-left: 8px;" name="sort" size="12" />
</div> --> </div>
<div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('fromuptime')">
<span>时间排序</span>
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
</div>
</div> </div>
<span style="font-size: 16px;color:#494949"> <span style="color:#7899fd;font-weight: 500;">{{ totalCount }}</span> </span> <span style="font-size: 16px;color:#494949"> <span style="color:#7899fd;font-weight: 500;">{{ totalCount }}</span> </span>
</div> </div>

Loading…
Cancel
Save