JM-MiniApp/pages/user/star.vue

112 lines
3.0 KiB
Vue
Raw Normal View History

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