增加了动态和话题接口

api/article/index.js

 import {request} from '../../util/api'
 
+
+// banner列表
+export function articleList(query) {
+    return request({
+        url: '/app/open/opmArticle/queryArticleByPagination',
+        data: query,
+        method: 'GET',
+    })
+}

api/topic/index.js

+import {request} from '../../util/api'
+
+// 话题列表
+export function topicList(data) {
+    return request({
+        url:'/app/open/opmTopic/queryAllOpmTopic',
+        data: data,
+        method: 'GET',
+    })
+}
+

pages/components/article/Item.vue

 <template>
-	<view :class="{item:true,bor:!isState}">
+	<view :class="{item:true,bor:true}">
 		<view class="left">
-			<view class="l" v-if="isState">
+			<view class="l" v-if="info.headPortrait == ''">
 				<view class="box">
 					<view class="day">
 						{{info.createTime.substring(8,10)*1}}
@@ -20,7 +20,7 @@
 			<image v-else @click="gotoUserInfo(info)" :src="info.headPortrait" mode="aspectFill"></image>
 		</view>
 		<view class="center">
-			<template v-if="!isState">
+			<template>
 				<view class="name">
 					<text @click="gotoUserInfo(info)">{{info.nickName}}</text>
 					<image v-if="info.gender != 'MALE'" class="gender" :src="baseUrl+'/user/famale.png'" mode="">
@@ -39,18 +39,12 @@
 					<u-read-more ref="uReadMore" :shadowStyle="shadowStyle" :toggle="true" color="#415C9E"
 						:textIndent="0" showHeight="126rpx">
 						<view @click="gotoDetail(info)" style="font-size: 28rpx;color: #333333;">
-							<!-- <u-parse :tagStyle="tagStyle" :content="info.content" @load="load"></u-parse> -->
-							<!-- <rich-text :nodes="info.content"></rich-text> -->
 							<view class="" style="line-height: 1.5;">
 								{{info.content}}
 							</view>
 						</view>
 					</u-read-more>
 				</template>
-
-				<!-- <xzj-readMore hideLineNum="4" :showHeight="40">
-					{{info.content}}
-				</xzj-readMore> -->
 			</view>
 			<view class="contentImg">
 				<imageAdaptation :imgList="imgs" :imgLayout1="imgLayout1" :imgLayout2="imgLayout2"
@@ -99,18 +93,16 @@
 				<text></text>
 				<text></text>
 			</view>
-
 		</view>
+<!--    右上角三个点的选项-->
 		<u-action-sheet :actions="list" :closeOnClickOverlay="true" :safeAreaInsetBottom="true" cancelText="取消"
 			@select="selectClick" @close="show = false" :show="show"></u-action-sheet>
-		<ELM ref="elm" :msg="tipMsg" :isConfirm="isConfirm" @confirm="confirm"></ELM>
 	</view>
 </template>
 
 <script>
 	import imageAdaptation from '@/components/images-adaptation/imageAdaptation.vue'
 	import xzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue"
-	import ELM from '@/components/elm-toast/index.vue';
 	export default {
 	  name:'ArticleItem',
 		options: {
@@ -118,14 +110,9 @@
 		},
 		components: {
 			imageAdaptation,
-			xzjReadMore,
-			ELM
+			xzjReadMore
 		},
 		props: {
-			isState: {
-				type: Boolean,
-				default: false
-			},
 			info: {
 				type: Object,
 				default: () => {}
@@ -134,6 +121,7 @@
 		watch: {
 			info: {
 				handler(newValue) {
+          console.log('newValue:',newValue)
 					if (newValue?.img?.length) {
 						this.imgs = newValue.img
 					}
@@ -156,14 +144,12 @@
 			return {
         //图片路径
         baseUrl: this.$store.state.imgUrl,
-				tagStyle: {
-					text: 'line-height:1em'
-				},
 				imgs: [],
 				imgLayout1: [450, 450],
 				imgLayout2: [220, 220],
 				imgLayout3: [160, 160],
 				show: false,
+        //右上角三个点的操作项
 				list: [{
 						name: '删除',
 					},
@@ -172,10 +158,9 @@
 					// }
 				],
 				shadowStyle: {
-					'backgroundImage': 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 50%, #fff 100%)',
+					backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 50%, #fff 100%)',
 					justifyContent: 'flex-end'
 				},
-				tipMsg: '',
 				isConfirm: false
 			}
 		},
@@ -183,9 +168,6 @@
 			load() {
 				this.$refs.uReadMore.init();
 			},
-			select() {
-				this.$emit("selectShare", this.info)
-			},
       //查看动态详情
 			gotoDetail(item) {
         uni.navigateTo({
@@ -200,17 +182,13 @@
 			},
 			// 点赞
 			praise(value) {
-				this.$emit("praise", value)
+
 			},
 			// 删除
 			selectClick(item) {
-				if (item.name == "删除") {
-					this.$emit("delete", this.info)
-				} else if (item.name == "举报") {
-					this.tipMsg = "尽情期待";
-					this.$refs.elm.showDialog();
-				}
+
 			},
+      //
 			preview({
 				url,
 				index
@@ -228,15 +206,6 @@
 						}
 					}
 				});
-				// // #ifdef MP-WEIXIN
-				// this.$nextTick(() => {
-				// 	this.$refs.previewImage.open(url); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
-				// })
-				// // #endif
-
-				// // #ifndef MP-WEIXIN
-				// this.$refs.previewImage.open(url); // 传入当前选中的图片地址
-				// // #endif
 			},
 			onLongpress(e) { //长按事件
 				console.log('当前长按的图片是' + e);
@@ -262,7 +231,6 @@
 					frontColor: '#000000', // 设置前景色为黑色
 					backgroundColor: '#000000', // 设置背景色为黑色
 				})
-				// this.videoShow = false
 				this.$emit("open")
 			},
 			close() { //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
@@ -271,7 +239,6 @@
 					frontColor: '#ffffff', // 设置前景色为白色
 					backgroundColor: '#000000', // 设置背景色为黑色
 				})
-				// this.videoShow = true
 				this.$emit("close")
 			},
 			showSelect(info) {
@@ -297,8 +264,6 @@
 		display: flex;
 		justify-content: space-between;
 		padding: 40rpx 0 0rpx 0;
-		// padding-top: 40rpx;
-		margin-top: 34rpx;
 		margin-left: 32rpx;
 		margin-right: 32rpx;
 
@@ -375,7 +340,7 @@
 			}
 
 			.contentImg {
-				// max-height: 450rpx;
+
 			}
 
 			.time {

pages/components/article/List.vue

 <template>
 	<view class="content">
+<!--   z-paging是一个分页组件-->
 		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" empty-view-text="迈出第一步才有更多故事发生哦"
 			:empty-view-title-style="{
 				'font-size': '32rpx',
@@ -12,14 +13,22 @@
 				'width': '447rpx',
 				'height': '375rpx'
 			}" v-model="dataList" @query="queryList" :fixed="false">
-			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
-			<!-- <template v-if="dataList.length"> -->
-			<view class="itemm" v-for="(item,index) in dataList" :key="item.id" @click="itemClick(item)">
-				<ItemVue @delete="deleteFn" :info="item" @selectShare="selectShare(item)" @praise="praise"
-					@close="close" @open="open" />
+      <view v-if="currentIndex == '2'">
+        <u-tabs ref="tabs" :list="topicList" font-size="30" :current="current"
+                    :activeStyle="{
+						            color: 'rgb(41, 121, 255)',
+						            transform: 'scale(1)'
+						        }"
+                    :inactiveStyle="{
+						            color: '#606266',
+						            transform: 'scale(1)'
+						        }">
+        </u-tabs>
+      </view>
+			<view v-for="(item,index) in dataList" :key="item.id">
+				<ItemVue :info="item"/>
 			</view>
-			<!-- </template> -->
-			<!-- <empty v-if="firstLoaded&&!dataList.length"></empty> -->
+			<empty v-if="firstLoaded && !dataList.length"/>
 		</z-paging>
 	</view>
 </template>
@@ -27,16 +36,20 @@
 <script>
 	import ItemVue from './Item.vue'
 	import empty from '@/components/empty.vue'
-	import login from '../../../components/login/login.vue'
+  import {topicList} from "../../../api/topic";
+  import {articleList} from "../../../api/article";
 	export default {
 	  name:'ArticleList',
 		components: {
 			ItemVue,
-			empty,
-			login
+			empty
 		},
 		data() {
 			return {
+			  //当前的tab
+			  current: 0,
+        //话题列表
+			  topicList:[],
         //图片路径
         baseUrl: this.$store.state.imgUrl,
 				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
@@ -61,19 +74,17 @@
 				default: function() {
 					return 0
 				}
-			},
-			userInfo: {
-				type: Object,
-				default: function() {
-					return {}
-				}
 			}
 		},
 		watch: {
 			currentIndex: {
 				handler(newVal) {
-					console.log("切换到了第：" + newVal)
+					console.log("currentIndex切换到了第：" + newVal)
+          console.log('this.tabIndex:',this.tabIndex)
 					if (newVal === this.tabIndex) {
+					  if (newVal === 2){
+              this.getTopicList()
+            }
 						// 懒加载，当滑动到当前的item时，才去加载
 						if (!this.firstLoaded) {
 							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
@@ -83,76 +94,23 @@
 								}, 100);
 							})
 						}
-
-					}
-					if (newVal == 0 || newVal == 2) {
-						console.log("进入判断第" + newVal + "个")
-
 					}
 				},
 				immediate: true
 			},
 		},
 		methods: {
-			close() {
-				this.$emit("changeOpen", false)
-			},
-			open() {
-				this.$emit("changeOpen", true)
-			},
-			selectShare(item) {
-				this.$emit("selectShare", item)
-			},
-			// 删除
-			deleteFn(value) {
-				this.$myRequest({
-					url: `nostalgia/article/article/${value.id}`,
-					withToken: true,
-					method: 'DELETE',
-				}).then(res => {
-
-					if (res.data.code == "200") {
-						let idx = this.dataList.findIndex(item => item.id == value.id)
-						this.dataList.splice(idx, 1)
-					}
-					else{
-
-					}
-
-				})
-			},
-			// 点赞
-			praise(value) {
-
-				// let obj = {
-				// 	...value,
-				// }
-				// let url = ''
-				// if (obj.isLike) {
-				// 	url = 'nostalgia/article/cancel/praise'
-				// 	obj.likeCount -= 1
-				// } else {
-				// 	url = 'nostalgia/article/praise'
-				// 	obj.likeCount += 1
-				// }
-				// this.$myRequest({
-				// 	url,
-				// 	data: {
-				// 		id: value.id,
-				// 		praiseType: "ARTICLE"
-				// 	},
-				// 	withToken: true,
-				// 	method: 'PUT',
-				// }).then(res => {
-				// 	if (res.data.code == "200") {
-				// 		obj.isLike = !value.isLike
-				// 		let idx = this.dataList.findIndex(item => item.id == obj.id)
-				// 		this.dataList.splice(idx, 1, obj)
-				// 	} else if(res.data.code == "10006"){
-				// 		console.log("报错了："+res.data.code)
-				// 	}
-				// })
-			},
+	    //查询话题列表
+      getTopicList(){
+        topicList().then(res =>{
+          //获取res.data.data里的topicName赋值给this.topicList，并且
+          this.topicList = res.data.data.map(item => {
+            return {
+              name: item.topicName
+            };
+          });
+        })
+      },
 			// 接收父组件传过来的刷新列表要求
 			reload() {
 				this.$nextTick(() => {
@@ -160,11 +118,36 @@
 					this.$refs.paging && this.$refs.paging.reload();
 				})
 			},
+      //分页查询方法
 			queryList(pageNo, pageSize) {
+        const params = {
+          page:pageNo,
+          rows:pageSize,
+        }
+        articleList(params).then(res=>{
+
+        })
+        console.log('1111')
 				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
 				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
 				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
-        this.dataList = [
+        const arr = [
+          {
+            createTime:'2024-12-28 15:02:01',
+            headPortrait:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',//头像
+            nickName:'不爱吃辣的小王',//nickName
+            gender:'MALE',//性别
+            information:'02·重庆市·硕士·互联网',//个人信息
+            content:'昨天的快乐留在今天发，那就是100%',//动态内容
+            time:'2024-11-11 15:02:01',//发布动态的时间
+            commentCount:'10',//评论数
+            likeCount:'11',//点赞数
+            isLike:true,
+            img:[
+              'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
+              'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg'
+            ]
+          },
           {
             createTime:'2024-12-28 15:02:01',
             headPortrait:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',//头像
@@ -177,6 +160,7 @@
             likeCount:'11',//点赞数
           },
         ]
+        this.$refs.paging.complete(arr);
 				// const params = {
 				// 	pageIndex: pageNo,
 				// 	pageSize: pageSize,
@@ -241,9 +225,6 @@
 				// 	this.$refs.paging.complete(false);
 				// })
 			},
-			itemClick(item) {
-				console.log('点击了-----', item.title);
-			},
 		}
 	}
 </script>