You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

112 lines
3.0 KiB
Vue

11 months ago
<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"
11 months ago
const store = useStore()
11 months ago
// 生命周期
11 months ago
onLoad((e) => {
let userinfo = JSON.parse(store.userInfo)
// console.log(userinfo)
queryParams.value.userId = userinfo.userId
11 months ago
11 months ago
getList()
})
onPullDownRefresh(()=> { // 下拉刷新
getList()
11 months ago
})
onReachBottom(() => { // 上滑触底
11 months ago
getList()
11 months ago
})
// 变量
11 months ago
// const user_info = ref(null)
11 months ago
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日电 金秋时节北京再迎盛会第三届一带一路国际合作高峰论坛隆重举行
春发其华秋收其实
共建一带一路走过了第一个蓬勃十年正值风华正茂务当昂扬奋进奔向下一个金色十年
`
}
])
11 months ago
const queryParams = ref({
page:1,
pageSize:10,
userId:0
})
11 months ago
// 方法
11 months ago
async function getList() {
const res = await api.getStarList(queryParams.value)
}
11 months ago
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-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">
.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>