【小程序】-- 咨询列表

app/src/api/news.ts

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+/**
+ * @description 获取文章分类
+ * @return { Promise } 
+ */
+export function getArticleCate() {
+    return request.get({ url: '/article/category' })
+}
+
+/**
+ * @description 获取文章列表
+ * @return { Promise } 
+ */
+export function getArticleList(data: Record<string, any>) {
+    return request.get({ url: '/article/list', data: data })
+}

app/src/components/news-card/news-card.vue

@@ -0,0 +1,55 @@
+<template>
+	<navigator :url="`/pages/news_detail/news_detail?id=${item.id}`">
+		<view class="news-card flex bg-white px-[20rpx] py-[32rpx]">
+			<view class="mr-[20rpx]" v-if="item.image">
+				<u-image :src="item.image" width="240" height="180"></u-image>
+			</view>
+			<view class="news-card-content flex flex-col justify-between flex-1">
+				<view class="news-card-content-title text-lg font-medium">{{ item.title }}</view>
+				<view class="news-card-content-intro text-gray-400 text-sm mt-[16rpx] ">{{ item.intro }}</view>
+				
+				<view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
+					<view>{{ item.createTime }}</view>
+					<view class="flex items-center">
+						<image src="/static/images/icon_visit.png" class="w-[30rpx] h-[30rpx]"></image>
+						<view class="ml-[10rpx]">{{ item.visit }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</navigator>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from 'vue';
+	
+	const props = withDefaults(defineProps < {
+		item: any
+	} > (), {
+		item: {}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.news-card {
+		border-bottom: 1px solid #f8f8f8;
+		&-content {
+			&-title {
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+				word-break: break-all;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+			}
+			&-intro {
+				-webkit-line-clamp: 1;
+				overflow: hidden;
+				word-break: break-all;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+			}
+		}
+	}
+</style>

app/src/pages/news/component/news-list.vue

@@ -0,0 +1,43 @@
+<template>
+	<z-paging ref="paging" v-model="dataList" v-if="i == index" @query="queryList" :fixed="false" height="100%"
+		use-page-scroll>
+		<block v-for="(newsItem,newsIndex) in dataList" :key="newsIndex">
+			<news-card :item="newsItem"></news-card>
+		</block>
+	</z-paging>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from 'vue';
+	import { getArticleList } from "@/api/news"
+
+	const props = withDefaults(defineProps < {
+		cid: number,
+		i: number,
+		index: number
+	} > (), {
+		cid: 0
+	})
+
+	const paging = ref(null)
+	const dataList = ref([{
+		title: '123'
+	}])
+
+	const queryList = async (pageNo, pageSize) => {
+		// console.log(pageNo, pageSize)
+		const {
+			lists
+		} = await getArticleList({
+			cid: props.cid,
+			pageNo,
+			pageSize
+		})
+		console.log(lists)
+		paging.value.complete(lists);
+	}
+</script>
+
+<style scoped>
+
+</style>

app/src/pages/news/news.vue

@@ -1,7 +1,63 @@
 <template>
-    <view class="content">资讯</view>
-</template>
+    <view class="news" >
+		<!-- 搜索 -->
+		<view class="news-search px-[24rpx] py-[14rpx] bg-white">
+		    <u-search placeholder="请输入关键词搜索" disabled :show-action="false"></u-search>
+		</view>
+		
+		<!-- 内容 -->
+        <tabs 
+			:current="current"
+			@change="handleChange"
+			height="80"
+			bar-width="60"
+			:barStyle="{'bottom': '0'}"
+		>
+            <tab 
+				v-for="(item, i) in tabList"
+				:key="i" 
+				:name="item.name"
+			>
+                <view class="news-list pt-[20rpx]">
+					<news-list :cid="item.id" :i="i" :index="current"></news-list>
+                </view>
+            </tab>
+        </tabs>
+    </view>
+</template>
+
+<script lang="ts" setup>
+    import { ref, reactive, computed } from "vue"
+    import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
+	import NewsList from "./component/news-list.vue"
+	import { getArticleCate } from "@/api/news"
 
-<script setup lang="ts"></script>
-
-<style></style>
+    
+    const tabList = ref< any >([])
+    const current = ref<number>(0)
+    
+    const handleChange = (index: number) => {
+		console.log(index)
+        current.value = Number(index)
+    }
+	
+	const getData = async () => {
+		tabList.value = await getArticleCate()
+	}
+    
+    onLoad((options) => {
+		getData()
+    })
+</script>
+
+<style lang="scss">
+    .news {
+		&-search {
+			margin-bottom: 2rpx;
+		}
+		
+		&-list {
+			height: calc(100vh - 86px);
+		}
+	}
+</style>