小程序适配单招咨询

src/api/modules/news.ts

@@ -1,4 +1,4 @@
-import { Guide, News, NewsQueryDTO } from "@/types/news";
+import { Guide, NewsItem, NewsQueryDTO, NewsType } from "@/types/news";
 import flyio from "../flyio";
 import { ApiResponse, ApiResponseList } from "@/types";
 
@@ -15,12 +15,20 @@ export function getNewsMainList() {
  * @returns 
  */
 export function getNewsListNoToken(params: NewsQueryDTO) {
-  return flyio.get('/front/news/listNoToken', params) as Promise<ApiResponseList<News>>;
+  return flyio.get('/front/news/listNoToken', params) as Promise<ApiResponseList<NewsItem>>;
 }
 
 /**
  * 获取资讯详情
  */
 export function getNewsDetail(id: number) {
-  return flyio.get(`/front/news/info`, { id }) as Promise<ApiResponse<News>>;
+  return flyio.get(`/front/news/info`, { id }) as Promise<ApiResponse<NewsItem>>;
+}
+
+/**
+ * 获取资讯类型列表
+ * @returns 
+ */
+export function getNewsTypes() {
+  return flyio.get('/front/news/typesNoToken') as Promise<ApiResponseList<NewsType>>;
 }

src/components/ie-auto-resizer/ie-auto-resizer.vue

@@ -0,0 +1,16 @@
+<template>
+<view class="flex-1 min-h-1 relative">
+  <view class="absolute inset-0">
+    <slot></slot>
+  </view>
+</view>
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: 'ie-auto-resizer',
+  options: {
+    virtualHost: true
+  }
+});
+</script>
+<style lang="scss" scoped></style>

src/components/ie-news-item/ie-news-item.vue

@@ -14,18 +14,18 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { News } from '@/types/news';
+import { NewsItem } from '@/types/news';
 import { PropType } from 'vue';
 
 const props = defineProps({
   data: {
-    type: Object as PropType<News>,
+    type: Object as PropType<NewsItem>,
     default: () => ({})
   }
 });
 
 const emit = defineEmits<{
-  click: [data: News]
+  click: [data: NewsItem]
 }>();
 const handleClikc = () => {
   emit('click', props.data);

src/components/ie-tabs-swiper/ie-tabs-swiper.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="w-full h-full flex flex-col relative">
+    <uv-tabs :list="list" :scrollable="scrollable" @change="handleChange" :current="modelValue" :key-name="keyName"></uv-tabs>
+    <ie-auto-resizer>
+      <slot></slot>
+    </ie-auto-resizer>
+  </view>
+</template>
+<script lang="ts" setup>
+  defineOptions({
+  name: 'ie-tabs-swiper',
+  options: {
+    virtualHost: true
+  }
+});
+type TabItem = {
+  name: string;
+  keyName: string;
+  slot: string;
+}
+type Props = {
+  list: TabItem[];
+  scrollable: boolean
+  keyName: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  list: () => [],
+  modelValue: 0,
+  keyName: 'name'
+});
+const modelValue = defineModel<number>('modelValue', {
+  type: Number,
+  default: 0
+});
+
+const handleChange = (e: any) => {
+  modelValue.value = e.index;
+}
+const handleChangeSwiper = (e: any) => {
+  modelValue.value = e.detail.current;
+}
+</script>
+<style lang="scss" scoped></style>

src/pages.json

@@ -56,6 +56,12 @@
           "style": {
             "navigationBarTitleText": ""
           }
+        },
+        {
+          "path": "pages/news/index/index",
+          "style": {
+            "navigationBarTitleText": ""
+          }
         }
       ]
     },

src/pagesMain/pages/index/components/index-news.vue

@@ -11,14 +11,14 @@
 </template>
 <script lang="ts" setup>
 import { getNewsListNoToken } from '@/api/modules/news';
-import { News } from '@/types/news';
-const newsList = ref<News[]>([]);
+import { NewsItem } from '@/types/news';
+const newsList = ref<NewsItem[]>([]);
 
 const emit = defineEmits<{
   detail: [id: number | string]
 }>();
 
-const handleClick = async (data: News) => {
+const handleClick = async (data: NewsItem) => {
   emit('detail', data.id);
 }
 const loadData = async () => {

src/pagesOther/pages/news/detail/detail.vue

@@ -18,11 +18,11 @@
 </template>
 <script lang="ts" setup>
 import { getNewsDetail } from '@/api/modules/news';
-import { News } from '@/types/news';
+import { NewsItem } from '@/types/news';
 import { onLoad } from '@dcloudio/uni-app';
 import { useTransferPage } from '@/hooks/useTransferPage';
 const { prevData } = useTransferPage();
-const detail = ref<News>({} as News);
+const detail = ref<NewsItem>({} as NewsItem);
 const style = {
   img: 'width: 100% !important; max-width: 100% !important; height: auto !important;',
   p: 'line-height: 26px;font-size: 13px;',

src/pagesOther/pages/news/group/group.vue

@@ -12,11 +12,11 @@
 </template>
 <script lang="ts" setup>
 import { getNewsListNoToken } from '@/api/modules/news';
-import { News } from '@/types/news';
+import { NewsItem } from '@/types/news';
 import { useTransferPage } from '@/hooks/useTransferPage';
 const { prevData, transferTo, routes } = useTransferPage();
 
-const list = ref<News[]>([]);
+const list = ref<NewsItem[]>([]);
 const paging = ref<ZPagingInstance>();
 const handleQuery = (pageNum: number, pageSize: number) => {
   uni.$ie.showLoading();
@@ -28,7 +28,7 @@ const handleQuery = (pageNum: number, pageSize: number) => {
     .catch(() => paging.value?.complete(false))
     .finally(() => uni.$ie.hideLoading());
 }
-const handleClick = (item: News) => {
+const handleClick = (item: NewsItem) => {
   transferTo(routes.newsDetail, {
     data: {
       id: item.id,

src/pagesOther/pages/news/index/components/news-paging-list.vue

@@ -0,0 +1,34 @@
+<template>
+  <z-paging ref="paging" v-model="list" @query="handleQuery">
+    <view v-for="item in list" :key="item.id" class="m-30">
+      <ie-news-item :data="item" @click="handleClick(item)" />
+    </view>
+  </z-paging>
+</template>
+<script lang="ts" setup>
+import { getNewsListNoToken } from '@/api/modules/news';
+import { News } from '@/types';
+import { useTransferPage } from '@/hooks/useTransferPage';
+const { transferTo, routes } = useTransferPage();
+
+const props = defineProps<{
+  params: News.NewsQueryDTO;
+}>();
+const list = ref<News.NewsItem[]>([]);
+const paging = ref<ZPagingInstance>();
+
+const handleQuery = (page: number, size: number) => {
+  getNewsListNoToken({ ...props.params, pageNum: page, pageSize: size }).then(res => {
+    paging.value?.completeByTotal(res.rows, res.total)
+      .catch(() => paging.value?.complete(false));
+  });
+}
+const handleClick = (item: News.NewsItem) => {
+  transferTo(routes.newsDetail, {
+    data: {
+      id: item.id,
+    }
+  });
+}
+</script>
+<style lang="scss" scoped></style>

src/pagesOther/pages/news/index/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <ie-page :fix-height="true">
+    <ie-navbar title="资讯" />
+    <ie-auto-resizer>
+      <ie-tabs-swiper v-model="current" :list="tabs" :scrollable="true">
+        <swiper class="swiper h-full" :current="current" @change="handleChangeSwiper">
+          <swiper-item v-for="(item, index) in tabs" :key="index" class="h-full">
+            <view class="h-full" v-if="Math.abs(index - current) <= 2">
+              <news-paging-list :params="item.params" />
+            </view>
+          </swiper-item>
+        </swiper>
+      </ie-tabs-swiper>
+    </ie-auto-resizer>
+  </ie-page>
+</template>
+<script lang="ts" setup>
+import { getNewsTypes } from '@/api/modules/news';
+import NewsPagingList from './components/news-paging-list.vue';
+import { News } from '@/types';
+
+const current = ref(0);
+type TabItem = {
+  name: string;
+  value: string;
+  slot: string;
+  params: News.NewsQueryDTO;
+}
+const tabs = ref<TabItem[]>([]);
+
+const handleChangeSwiper = (e: any) => {
+  current.value = e.detail.current;
+}
+const loadData = () => {
+  getNewsTypes().then(res => {
+    const list = res.rows.map(item => ({ name: item.label, value: item.value, slot: item.label, params: {type: item.value} }));
+    tabs.value = [
+      {
+        name: '热门资讯',
+        value: 'hot',
+        slot: 'hot',
+        params: {tag: 'hot'}
+      },
+      ...list
+    ]
+  });
+}
+loadData();
+</script>
+<style lang="scss" scoped></style>

src/types/news.ts

@@ -9,13 +9,19 @@ export interface Guide {
 
 export interface NewsQueryDTO {
   ids?: string;
-  pageNum: number;
-  pageSize: number;
+  pageNum?: number;
+  pageSize?: number;
   tag?: string;
+  type?: string;
   top?: boolean;
 }
 
-export interface News {
+export interface NewsType {
+  label: string;
+  value: string;
+}
+
+export interface NewsItem {
   id: number;
   content: string;
   clicked: number;