From 181108cd840c84969d441117b4b32683017ba861 Mon Sep 17 00:00:00 2001
From: mason369 <1960638223@qq.com>
Date: Wed, 25 Jan 2023 20:08:32 +0800
Subject: [PATCH] =?UTF-8?q?update:=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E8=8E=B7=E5=8F=96=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                           | 15 ++++-
 src/views/home/components/article-list.vue | 64 ++++++++++++++++++++++
 src/views/home/index.vue                   | 52 +++++++++++++-----
 3 files changed, 113 insertions(+), 18 deletions(-)
 create mode 100644 src/views/home/components/article-list.vue

diff --git a/src/api/index.js b/src/api/index.js
index 6e1358d..306c21d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -14,7 +14,7 @@ export const getSendSms = (mobile) => {
 		method: "GET",
 		url   : `/app/v1_0/sms/codes/${mobile}`
 	});
-}
+};
 
 //获取登录用户信息
 export const getUserInfo = () => {
@@ -22,7 +22,7 @@ export const getUserInfo = () => {
 		method: "GET",
 		url   : "/app/v1_0/user"
 	});
-}
+};
 
 //获取用户频道列表
 export const getUserChannels = () => {
@@ -30,4 +30,13 @@ export const getUserChannels = () => {
 		method: "GET",
 		url   : "/app/v1_0/user/channels"
 	});
-}
+};
+
+//频道列表
+export const getArticles = (params) => {
+	return request({
+		method: "GET",
+		url   : "/app/v1_1/articles",
+		params
+	});
+};
diff --git a/src/views/home/components/article-list.vue b/src/views/home/components/article-list.vue
new file mode 100644
index 0000000..f957a99
--- /dev/null
+++ b/src/views/home/components/article-list.vue
@@ -0,0 +1,64 @@
+<template>
+	<div class="article-cotainer" ref="article-list">
+		<van-list
+			v-model="loading"
+			:finished="finished"
+			finished-text="没有更多了"
+			@load="onLoad"
+		>
+			<van-cell
+				v-for="item in articles"
+				:key="item.id"
+				:title="item.title"
+			/>
+		</van-list>
+	</div>
+</template>
+
+<script>
+import { getArticles } from "@/api";
+
+export default {
+	name : "ArticleList",
+	props: {
+		channels: {
+			type    : Array,
+			required: true
+		}
+	},
+	data() {
+		return {
+			// 列表数据
+			articles : [],
+			// 是否加载中
+			loading  : false,
+			// 是否加载完成
+			finished : false,
+			// 时间戳
+			timestamp: 1556789000001
+		};
+	},
+	methods: {
+		async onLoad() {
+			console.log("sd");
+			const { data } = await getArticles({
+				channel_id: this.channels[0].id,
+				timestamp : this.timestamp || Date.now(),
+				with_top  : 1
+			});
+			const { results } = data;
+			this.articles.push(...results);
+			this.loading = false;
+			if (results.length) {
+				this.timestamp = data.pre_timestamp;
+			}
+			else {
+				this.finished = true;
+			}
+		}
+	},
+	created() {}
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 84189f9..efbcd54 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -12,13 +12,10 @@
 			>
 		</van-nav-bar>
 		<!-- 文章频道列表 -->
-		<van-tabs v-model="active" animated>
-			<van-tab
-				v-for="item in channels"
-				:title="item.name"
-				:key="item.id"
-			>
-        {{ item.name }}
+		<van-tabs v-model="active" animated  class="tbs-box">
+			<van-tab class="tab-btn" v-for="item in channels" :title="item.name" :key="item.id">
+				<!-- 文章列表 -->
+				<articleList :channels="channels" />
 			</van-tab>
 		</van-tabs>
 	</div>
@@ -26,14 +23,16 @@
 
 <script>
 import { getUserChannels } from "@/api";
+import ArticleList from "./components/article-list.vue";
 export default {
-	name: "Home",
+	name      : "Home",
+	components: { ArticleList },
 	data() {
 		return {
 			// 当前选中的频道
-			active: 0,
+			active  : 0,
 			// 频道列表
-			channels: [],
+			channels: []
 		};
 	},
 	created() {
@@ -42,11 +41,17 @@ export default {
 	methods: {
 		// 加载频道列表
 		async loadChannels() {
-			const { data } = await getUserChannels();
-			this.channels = data.channels;
-			console.log(this.channels.name);
-		},
-	},
+			try {
+				const { data } = await getUserChannels();
+				this.channels = data.channels;
+				console.log(this.channels);
+			}
+			catch (error) {
+				this.$toast.fail(error.response.data.message);
+				console.log(error);
+			}
+		}
+	}
 };
 </script>
 
@@ -70,4 +75,21 @@ export default {
 		}
 	}
 }
+::v-deep.tbs-box{
+  position: fixed;
+  top: 50px;
+  left: 0;
+  right: 0;
+  height: 570px;
+  width: 100%;
+  overflow-y: auto;
+}
+::v-deep .van-tabs--line .van-tabs__wrap{
+  position: fixed;
+  top: 45px;
+  z-index:999
+}
+::v-deep .van-tabs__content{
+  margin-top: 40px;
+}
 </style>