124 lines
4.7 KiB
Vue
124 lines
4.7 KiB
Vue
<script lang="ts" setup>
|
|
import { safeAreaInsets } from '@/utils/systemInfo'
|
|
import MxSearch from "@/pages-sub/components/search/index.vue"
|
|
import MxTabs from "@/pages-sub/components/tabs/index.vue"
|
|
import { getNewsCategory, getNewsPage } from "@/service"
|
|
|
|
// #ifdef MP-WEIXIN
|
|
definePage({
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
},
|
|
excludeLoginPath: false,
|
|
})
|
|
// #endif
|
|
|
|
// #ifndef MP-WEIXIN
|
|
definePage({
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
transparentTitle: 'always',
|
|
navigationBarTitleText: ''
|
|
},
|
|
excludeLoginPath: false,
|
|
})
|
|
// #endif
|
|
|
|
const tabs = ref([])
|
|
const articles = ref([])
|
|
const handleBack = () => {
|
|
uni.navigateBack({ delta: 1 })
|
|
}
|
|
|
|
const activeIndex = ref(0)
|
|
|
|
const handleChange = (val: number) => {
|
|
activeIndex.value = val
|
|
searchParams.value.activeTab = tabs.value[val]["id"]
|
|
paging.value.reload()
|
|
}
|
|
|
|
const toDetailPage = (id: number) => {
|
|
uni.navigateTo({ url: `/pages-sub/information/middleDetail?id=${id}` })
|
|
}
|
|
|
|
const searchParams = ref({ keyword: "", activeTab: '' })
|
|
|
|
const paging = ref(null)
|
|
|
|
const queryList = (page: number, pageSize: number) => {
|
|
if (searchParams.value.activeTab === "") {
|
|
getNewsCategory().then(resp => {
|
|
if (resp.code === 200) {
|
|
tabs.value = resp.result
|
|
searchParams.value.activeTab = resp.result[0]['id']
|
|
getNewsPage({ query: { CategoryId: searchParams.value.activeTab, Title: searchParams.value.keyword, Page: page, PageSize: pageSize } }).then(resp => {
|
|
if (resp.code === 200) {
|
|
paging.value.complete(resp.result.items)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
getNewsPage({ query: { CategoryId: searchParams.value.activeTab, Title: searchParams.value.keyword, Page: page, PageSize: pageSize } }).then(resp => {
|
|
if (resp.code === 200) {
|
|
paging.value.complete(resp.result.items)
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
}
|
|
const virtualListChange = (_vList) => {
|
|
articles.value = _vList
|
|
}
|
|
|
|
const handleComplete = () => {
|
|
paging.value.reload()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<z-paging ref="paging" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
|
|
@virtualListChange="virtualListChange" @query="queryList" :auto-show-system-loading="false"
|
|
:safe-area-inset-bottom="true" :pagingStyle="{ backgroundColor: 'white' }">
|
|
<template #top>
|
|
<view class="gradient-custom">
|
|
<sar-navbar title="中考资讯" :show-back="true" @back="handleBack"
|
|
:root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, 0)`, 'padding-top': `${safeAreaInsets?.top}px`, '--sar-navbar-item-color': 'black' }">
|
|
</sar-navbar>
|
|
<mx-search v-model:searchText="searchParams.keyword" rootStyle="margin: 16rpx 30rpx 0;" @complete="handleComplete"/>
|
|
<mx-tabs :tabsList="tabs" rootClass="shadow-md mb-[20rpx]" @tab-change="handleChange" />
|
|
</view>
|
|
</template>
|
|
<view class="flex flex-col h-full">
|
|
<view class="flex-1 pb-safe" v-if="activeIndex === 0">
|
|
<view v-for="(item) in articles" :id="`zp-id-${item.zp_index}`" :key="item.zp_index"
|
|
@click="toDetailPage(item.id)"
|
|
class="flex items-center justify-between py-[28rpx] mx-[30rpx] border-b-1 border-b-solid border-[#f5f5f5]">
|
|
<view class="text-[#333] text-[30rpx]">{{ item.title }}</view>
|
|
<view class="w-[18rpx] h-[36rpx] ml-[20rpx]">
|
|
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/tianbao/tb_jiantou.png"
|
|
mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-1 overflow-y-auto pb-safe" v-if="activeIndex === 1">
|
|
<view v-for="item in articles" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" class="flex justify-between mx-[30rpx] py-[20rpx]" @click="toDetailPage(item.id)">
|
|
<view class="flex flex-col justify-between mr-[20rpx]">
|
|
<text class="text-[30rpx] text-[#333]">{{ item.title }}</text>
|
|
<text class="text-[#999999] text-[26rpx]">{{ item.publishTime }}</text>
|
|
</view>
|
|
<view class="w-[216rpx] h-[144rpx]">
|
|
<image :src="item.coverImage" mode="scaleToFill" class="w-[216rpx] h-[144rpx]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import url("@/style/index.scss");
|
|
</style>
|