新增页面

pages/wikipedia/index.vue

@@ -1,8 +1,118 @@
-<template>
-</template>
-
-<script>
+<script setup>
+	// 引入依赖
+	// import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue' 
+	// import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue' 
+	import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
+	// import mySwiper from "@/components/mySwiper.vue"
+	import {ref,onMounted,nextTick} from "vue"
+	import {useStore} from '@/store/index.js'
+	import api from "@/api/index"
+	// 生命周期
+	onLoad(() => {
+		getList()
+	})
+	 // 下拉刷新
+	onPullDownRefresh(()=>{
+		init()
+		getList()
+		// setTimeout(function () {
+		// 	uni.stopPullDownRefresh();
+		// }, 1000);
+	}) 
+	// 上拉触底
+	onReachBottom(()=>{
+		queryParams.value.page ++
+		getList()
+	})
+	// 变量
+	const queryParams = ref({
+		page:1,
+		pageSize:10
+	})
+	const list = ref([
+		{
+			id:1,
+			cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
+			title:'金秋相逢 共叙合作',
+			reading_num:100,
+			content:`
+			新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
+			春发其华，秋收其实。
+			共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
+			`
+		},
+		{
+			id:2,
+			cover_img:'https://ms.bdimg.com/pacific/0/pic/1083217647_-478899572.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00',
+			title:'金秋相逢 共叙合作',
+			reading_num:100,
+			content:`
+			新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
+			春发其华，秋收其实。
+			共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
+			`
+		}
+	])
+	// 方法
+	function init() {
+		queryParams.page = 1
+		queryParams.pageSize = 10
+	}
+	async function getList(){
+		const res = await api.getArticleList(queryParams.value)
+	}
+	function toDetail(item) {
+		let info = encodeURIComponent(JSON.stringify(item))
+		// console.log(info)
+		uni.navigateTo({
+			url:"./detail?info="+info+"&id="+item.id
+		})
+	}
 </script>
-
-<style>
+<template>
+	<view class="articleBox page-box">
+		<view class="userInfoBox">
+			
+		</view>
+		<view class="list-box">
+			<view class="lb-card" v-for="(item,i) in list" @tap="toDetail(item)">
+				<view class="lb-left">
+					<image :src="item.cover_img" mode="aspectFill"></image>
+				</view>
+				<view class="lb-right">
+					<view class="lb-title">{{item.title}}</view>
+					<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<style scoped lang="scss">
+	.articleBox{
+		.list-box{
+			.lb-card{
+				display: flex;
+				align-items: center;
+				padding: 20rpx;
+				border-bottom: 2rpx solid #eaeaea;
+				.lb-left{
+					image{
+						width: 120rpx;
+						height: 120rpx;
+						margin-right: 20rpx;
+					}
+				}
+				.lb-right{
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					.lb-title{
+						font-weight: 900;
+						font-size:32rpx ;
+						margin-bottom: 20rpx;
+					}
+				}
+			}
+		}
+	}
 </style>