JM-MiniApp/pages/user/star.vue

<script setup>
	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.js"
	const store = useStore()
	import emptyCard from "@/components/emptyCard.vue"
	// 生命周期
	onLoad((e) => {
		let userinfo = JSON.parse(store.userInfo)
		// console.log(userinfo)
		queryParams.value.userId = userinfo.userId
		getList()
	})
	onPullDownRefresh(()=> { // 下拉刷新
		init()
		getList()
	})
	onReachBottom(() => { // 上滑触底
		queryParams.value.page ++
		getList()
	})
	// 变量
	// const user_info = ref(null)
	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日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
		// 	春发其华，秋收其实。
		// 	共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
		// 	`
		// }
	])
	const queryParams = ref({
		page:1,
		pageSize:10,
		userId:0
	})
	// 方法
	function init() {
		queryParams.page = 1
		queryParams.pageSize = 10
		list.value = []
	}
	async function getList() {
		const res = await api.getStarList(queryParams.value)
		if(res.code === 0) {
			if( res.data.list.length>0) {
				list.value.push(...res.data.list) 
			}
			else{
				queryParams.page-=1
			}
		}
	}
	function toDetail(item) {
		let info = encodeURIComponent(JSON.stringify(item))
		// console.log(info)
		uni.navigateTo({
			url:"/pages/wikipedia/detail?info="+info+"&id="+item.id
		})
	}
</script>
<template>
	<view class="starBox page-box page-bg-gray">
		<view class="list-box">
			<view class="lb-card" v-if="list.length > 0" 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>
			<emptyCard v-else></emptyCard>
		</view>
		
	</view>
</template>
<style scoped lang="scss">
	.starBox{
		
	}
	.starBox{
		.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>