128 lines
3.5 KiB
Vue
128 lines
3.5 KiB
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(item)
|
|
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" 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.introduction}}</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> |