331 lines
8.8 KiB
Vue
331 lines
8.8 KiB
Vue
<template>
|
||
<view>
|
||
<unicloud-db ref='udb' v-slot:default="{ pagination, hasMore, loading, error, options }"
|
||
orderby="last_view_time desc"
|
||
@error="onqueryerror" :page-size="10"
|
||
@onPullDownRefresh="onPullDownRefresh" @load="listLoad"
|
||
:collection="colList" >
|
||
<!-- #ifdef APP-NVUE -->
|
||
<list class="uni-list" :border="false" :style="{ height: listHeight }">
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<scroll-view
|
||
scroll-y
|
||
class="uni-list"
|
||
refresher-enabled
|
||
:refresher-triggered="loadType=== 'refresh'"
|
||
:style="{ height: listHeight }"
|
||
@refresherrefresh="refresh"
|
||
@scrolltolower="loadMore"
|
||
>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<refresh-box :loading="loading" @refresh="refresh"></refresh-box>
|
||
<!-- #endif -->
|
||
|
||
<!-- 列表渲染 -->
|
||
<template v-for="item in listData">
|
||
<view class="" v-if="item.article_status === 1">
|
||
<not-cover v-if="item.thumbnail && item.thumbnail.length === 0" :ctype="'historyList'"
|
||
:data="getNewItem(item)"></not-cover>
|
||
<right-small-cover v-else-if="item.thumbnail && item.thumbnail.length === 1" :ctype="'historyList'"
|
||
:data="getNewItem(item)"></right-small-cover>
|
||
<three-cover v-else-if="item.thumbnail && item.thumbnail.length === 3" :ctype="'historyList'"
|
||
:data="getNewItem(item)"></three-cover>
|
||
</view>
|
||
<view class="" v-else>
|
||
<view class="main">
|
||
<view>
|
||
<text class="title">该文章已被下架或删除</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<uni-list-item>
|
||
<template v-slot:body>
|
||
<!-- #endif -->
|
||
<uni-load-state @networkResume="refresh"
|
||
:state="{ data: listData, pagination, hasMore, loading, error }"
|
||
@loadMore="loadMore">
|
||
</uni-load-state>
|
||
<!-- #ifdef APP-PLUS -->
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
</list>
|
||
<!-- #endif -->
|
||
</unicloud-db>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, computed, onReady, watch } from 'vue'
|
||
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar"
|
||
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time"
|
||
import refreshBox from "@/uni_modules/uni-cms-article/components/refresh-box/refreshBox.nvue"
|
||
|
||
import notCover from "@/uni_modules/uni-cms-article/components/list-template/not-cover.vue"
|
||
import rightSmallCover from "@/uni_modules/uni-cms-article/components/list-template/right-small-cover.vue"
|
||
import threeCover from "@/uni_modules/uni-cms-article/components/list-template/three-cover.vue"
|
||
import { parseImageUrl } from "@/uni_modules/uni-cms-article/common/parse-image-url"
|
||
import { store } from '@/pages3/uni_modules/uni-id-pages/common/store.js'
|
||
|
||
const db = uniCloud.database()
|
||
const articleDBName = 'uni-cms-articles'
|
||
const userDBName = 'uni-id-users'
|
||
|
||
export default {
|
||
components: {
|
||
statusBar,
|
||
refreshBox,
|
||
notCover,
|
||
rightSmallCover,
|
||
threeCover
|
||
},
|
||
setup() {
|
||
const udbRef = ref(null)
|
||
const showRefresh = ref(false)
|
||
const listHeight = ref(0)
|
||
const mpButtonLeftPlaceholderSize = ref(0)
|
||
const mpButtonPlaceholderSize = ref(87)
|
||
const navBarHeight = ref(44)
|
||
const listData = ref([])
|
||
const loadType = ref(null)
|
||
const historyList = ref([])
|
||
|
||
const userInfo = computed(() => store.userInfo)
|
||
|
||
const queryUserId = computed(() => {
|
||
return userInfo.value && userInfo.value._id ? userInfo.value._id : '__empty__'
|
||
})
|
||
|
||
const realNameStatus = computed(() => {
|
||
if (!userInfo.value.realNameAuth) return 0
|
||
return userInfo.value.realNameAuth.authStatus
|
||
})
|
||
|
||
const colList = computed(() => {
|
||
return [
|
||
db.collection("cms-articles-like")
|
||
.where({ user_id: queryUserId.value })
|
||
.getTemp(),
|
||
db.collection(articleDBName)
|
||
.field('_id,thumbnail,title,publish_date,user_id, excerpt, article_status')
|
||
.getTemp(),
|
||
db.collection(userDBName)
|
||
.field('_id,nickname')
|
||
.getTemp()
|
||
]
|
||
})
|
||
|
||
function getNewItem(item) {
|
||
if (!item.excerpt) {
|
||
item.excerpt = ""
|
||
} else if (item.excerpt.length > 50) {
|
||
item.excerpt = item.excerpt.slice(0, 50) + " ... ..."
|
||
}
|
||
return item
|
||
}
|
||
|
||
async function listLoad(data) {
|
||
if (data.length <= 0) return
|
||
if (data[0].article_id) {
|
||
const tempListData = data.map(item => {
|
||
item.article_id[0].user_id = item.user_id[0]
|
||
item.article_id[0].last_view_time = new Date(item.last_view_time).getTime()
|
||
return item.article_id[0]
|
||
})
|
||
|
||
for (const article of tempListData) {
|
||
const parseImages = await parseImageUrl(article.thumbnail)
|
||
article.thumbnail = parseImages ? parseImages.map(image => image.src) : []
|
||
}
|
||
|
||
listData.value = loadType.value === 'loadMore' ? listData.value.concat(tempListData) : tempListData
|
||
loadType.value = null
|
||
}
|
||
}
|
||
|
||
function initNavBarSize() {
|
||
// #ifdef MP-TOUTIAO
|
||
let menuButtonInfo = tt.getCustomButtonBoundingClientRect()
|
||
menuButtonInfo.width = menuButtonInfo.capsule.width
|
||
mpButtonLeftPlaceholderSize.value = menuButtonInfo.leftIcon.width + 10
|
||
// #endif
|
||
// #ifndef MP-TOUTIAO
|
||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
// #endif
|
||
mpButtonPlaceholderSize.value = menuButtonInfo.width + 10
|
||
navBarHeight.value = uni.getSystemInfoSync().system.toLowerCase().includes('ios') ? 44 : 48
|
||
}
|
||
|
||
function publishTime(timestamp) {
|
||
return translatePublishTime(timestamp)
|
||
}
|
||
|
||
function searchClick() {
|
||
uni.hideKeyboard()
|
||
uni.navigateTo({ url: '/uni_modules/uni-cms-article/pages/search/search' })
|
||
}
|
||
|
||
function refresh() {
|
||
loadType.value = 'refresh'
|
||
udbRef.value.loadData({ clear: true }, () => {
|
||
uni.stopPullDownRefresh()
|
||
// #ifdef APP-NVUE
|
||
showRefresh.value = false
|
||
// #endif
|
||
})
|
||
}
|
||
|
||
function loadMore() {
|
||
loadType.value = 'loadMore'
|
||
udbRef.value.loadMore()
|
||
}
|
||
|
||
function onqueryerror(e) {
|
||
console.error(e)
|
||
}
|
||
|
||
onReady(() => {
|
||
// #ifdef MP
|
||
initNavBarSize()
|
||
// #endif
|
||
listHeight.value = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - navBarHeight.value + 'px'
|
||
})
|
||
|
||
watch(() => userInfo.value._id, (val, oldVal) => {
|
||
if (val && val !== oldVal && udbRef.value) {
|
||
refresh()
|
||
}
|
||
})
|
||
|
||
return {
|
||
udbRef,
|
||
showRefresh,
|
||
listHeight,
|
||
mpButtonLeftPlaceholderSize,
|
||
mpButtonPlaceholderSize,
|
||
navBarHeight,
|
||
listData,
|
||
loadType,
|
||
historyList,
|
||
userInfo,
|
||
queryUserId,
|
||
realNameStatus,
|
||
colList,
|
||
getNewItem,
|
||
listLoad,
|
||
initNavBarSize,
|
||
publishTime,
|
||
searchClick,
|
||
refresh,
|
||
loadMore,
|
||
onqueryerror
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* #ifndef APP-NVUE */
|
||
.pages view {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.pages {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.refresh {
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-box {
|
||
background-color: #FFFFFF;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
|
||
/* #ifndef APP-PLUS */
|
||
z-index: 9;
|
||
/* #endif */
|
||
}
|
||
|
||
.pages .nav {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.uni-search-box {
|
||
flex: 1;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.uni-search-box ::v-deep .uni-searchbar {
|
||
padding: 0;
|
||
}
|
||
|
||
.uni-search-box ::v-deep .uni-searchbar__box {
|
||
height: 32px;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.cover-search-bar {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
/* #ifndef APP-NVUE */
|
||
z-index: 999;
|
||
/* #endif */
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list-item__container {
|
||
flex-direction: row;
|
||
width: 100%;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list-item {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-load-more {
|
||
display: flex;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list--border:after {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
padding-top: 24rpx;
|
||
padding-bottom: 24rpx;
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
color: #bbb;
|
||
}
|
||
}
|
||
</style>
|