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.
113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<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"
|
|
import emptyCard from "@/components/emptyCard.vue"
|
|
// 生命周期
|
|
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([])
|
|
// 方法
|
|
function init() {
|
|
queryParams.page = 1
|
|
queryParams.pageSize = 10
|
|
list.value = []
|
|
}
|
|
async function getList(){
|
|
const res = await api.getArticleList(queryParams.value)
|
|
if(res.code == 0) {
|
|
if( res.data.list.length>0) {
|
|
list.value.push(...res.data.list)
|
|
}
|
|
else{
|
|
queryParams.page-=1
|
|
}
|
|
}
|
|
else{
|
|
uni.showToast({
|
|
title:'获取失败',
|
|
icon:"error",
|
|
duration:2000
|
|
})
|
|
}
|
|
}
|
|
function toDetail(item) {
|
|
// let info = encodeURIComponent(JSON.stringify(item))
|
|
// console.log(info)
|
|
uni.navigateTo({
|
|
url:"./detail?id="+item.ID
|
|
})
|
|
}
|
|
</script>
|
|
<template>
|
|
<view class="articleBox page-box">
|
|
<view class="userInfoBox">
|
|
|
|
</view>
|
|
<view class="list-box">
|
|
<view v-if="list.length>0" 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" v-html="item.content"></view>
|
|
</view>
|
|
</view>
|
|
<emptyCard v-else></emptyCard>
|
|
</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> |