480 lines
12 KiB
Plaintext
480 lines
12 KiB
Plaintext
<template>
|
|
<view class="pages">
|
|
<!-- <view class="placeholder-bar">
|
|
<statusBar></statusBar>
|
|
<view :style="{ height: `${navBarHeight}px` }"></view>
|
|
</view> -->
|
|
<view>
|
|
<uni-popup ref="inputDialog" type="dialog">
|
|
<uni-popup-dialog
|
|
type="info"
|
|
cancelText="关闭"
|
|
confirmText="继续"
|
|
title="提示"
|
|
content="该功能还在开发中!"
|
|
@confirm="dialogConfirm"
|
|
@close="dialogClose">
|
|
</uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
<view class="v-preview">
|
|
<image :src="templateSrc" alt="" class="img" mode="widthFix" />
|
|
<view class="btn-area">
|
|
<view class="red-btn-area">
|
|
<button class="red-btn" @click="btn(0)">老兵直播</button>
|
|
<button class="red-btn" @click="btn(1)">老兵故事</button>
|
|
<button class="red-btn" @click="btn(2)">在线注册</button>
|
|
</view>
|
|
<view class="red-btn-plain-area">
|
|
<view class="red-btn-plain" @click="btn(3)">新四军</view>
|
|
<view class="red-btn-plain" @click="btn(4)">抗美援朝</view>
|
|
<view class="red-btn-plain" @click="btn(5)">抗美援越</view>
|
|
<view class="red-btn-plain" @click="btn(6)">对越自卫反击战</view>
|
|
<view class="red-btn-plain" @click="btn(7)">和平时期退役兵</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="" :style="{ height: listHeight, 'overflow-y': 'scroll' }">
|
|
<unicloud-db ref='udb' v-slot:default="{ pagination, hasMore, loading, error, options }" @error="onqueryerror"
|
|
@onPullDownRefresh="onPullDownRefresh" :collection="colList" :page-size="10" orderby="publish_date desc"
|
|
@load="listLoad">
|
|
<!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
|
|
<!-- #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">
|
|
<not-cover v-if="item.thumbnail && item.thumbnail.length === 0"
|
|
:data="getNewItem(item)"></not-cover>
|
|
<right-small-cover v-else-if="item.thumbnail && item.thumbnail.length === 1"
|
|
:data="getNewItem(item)"></right-small-cover>
|
|
<three-cover v-else-if="item.thumbnail && item.thumbnail.length === 3"
|
|
:data="getNewItem(item)"></three-cover>
|
|
</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>
|
|
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<!-- <view class="content">
|
|
<page-pagination :total="listData.length" :pageSize="page.pageSize" @change="change"
|
|
layout="total,first,prev,page,next,last,jumper">
|
|
</page-pagination>
|
|
</view> -->
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const uniIdCo = uniCloud.importObject("uni-id-co")
|
|
import {
|
|
store,
|
|
mutations
|
|
} from '@/pages3/uni_modules/uni-id-pages/common/store.js'
|
|
|
|
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";
|
|
|
|
const db = uniCloud.database();
|
|
const articleDBName = 'uni-cms-articles'
|
|
const userDBName = 'uni-id-users'
|
|
|
|
export default {
|
|
components: {
|
|
statusBar,
|
|
refreshBox,
|
|
notCover,
|
|
rightSmallCover,
|
|
threeCover
|
|
},
|
|
computed: {
|
|
userInfo() {
|
|
return store.userInfo
|
|
},
|
|
realNameStatus() {
|
|
if (!this.userInfo.realNameAuth) {
|
|
return 0
|
|
}
|
|
|
|
return this.userInfo.realNameAuth.authStatus
|
|
},
|
|
// 根据当前语言返回不同的搜索框占位符
|
|
inputPlaceholder(e) {
|
|
if (uni.getStorageSync('CURRENT_LANG') == "en") {
|
|
return 'Please enter the search content' // 英文
|
|
} else {
|
|
return '请输入搜索内容' // 中文
|
|
}
|
|
},
|
|
// 连表查询，返回两个集合的查询结果
|
|
colList() {
|
|
return [
|
|
db.collection(articleDBName).where(this.where).field(
|
|
'thumbnail,title,publish_date,user_id,excerpt').getTemp(), // 文章集合
|
|
db.collection(userDBName).field('_id,nickname').getTemp() // 用户集合
|
|
]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
content: "",
|
|
templateSrc: "https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/static/bg.jpg?expire_at=1741142837&er_sign=291c5dab058782f6472cf8792735686d",
|
|
where: '"article_status" == 1', // 查询条件
|
|
showRefresh: false, // 是否显示刷新按钮
|
|
listHeight: 0, // 列表高度
|
|
mpButtonLeftPlaceholderSize: 0, // 小程序左侧icon占位大小
|
|
mpButtonPlaceholderSize: 87, // 小程序导航栏按钮占位大小
|
|
navBarHeight: 44, // 导航栏高度
|
|
refreshStatus: 0, // 刷新状态 0: 未刷新 1: 刷新中 2: 刷新完成
|
|
listData: [], // 列表数据
|
|
loadType: null,
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
async onReady() {
|
|
// #ifdef MP
|
|
this.initNavBarSize() // 初始化导航栏大小
|
|
// #endif
|
|
/* 可用窗口高度 - 搜索框高 - 状态栏高 */
|
|
this.listHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - this
|
|
.navBarHeight + 'px'; // 计算列表高度
|
|
},
|
|
methods: {
|
|
dialogConfirm() {
|
|
console.log('点击确认')
|
|
},
|
|
|
|
dialogClose() {
|
|
console.log('点击关闭')
|
|
},
|
|
inputDialogToggle() {
|
|
this.$refs.inputDialog.open()
|
|
},
|
|
btn(item) {
|
|
if (item === 0) {
|
|
this.inputDialogToggle();
|
|
} if ([1, 3, 4, 5, 6, 7].indexOf(item) !== -1) {
|
|
uni.switchTab({
|
|
url: "/uni_modules/uni-cms-article/pages/list/slist"
|
|
})
|
|
} else if (item === 2) {
|
|
let token = uni.getStorageSync("uni_id_token");
|
|
console.log(token);
|
|
if (!token) {
|
|
uni.navigateTo({
|
|
url:"/pages3/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=weixin"
|
|
})
|
|
}
|
|
else {
|
|
uni.navigateTo({
|
|
url: "/pages3/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true"
|
|
})
|
|
}
|
|
}
|
|
},
|
|
getNewItem(item) {
|
|
if (!item.excerpt) {
|
|
item.excerpt = "";
|
|
} else if (item.excerpt.length > 50) {
|
|
item.excerpt = item.excerpt.slice(0, 50) + " ... ...";
|
|
}
|
|
return item;
|
|
},
|
|
change(currentPage, type) { // 当前页改变
|
|
|
|
this.page.currentPage = currentPage;
|
|
console.log("点击了" + type + "，当前页：" + currentPage);
|
|
|
|
this.data_clear();
|
|
},
|
|
async listLoad(data) {
|
|
console.log(data);
|
|
const listData = data.map(item => {
|
|
if (typeof item.thumbnail === 'string') {
|
|
item.thumbnail = [item.thumbnail]
|
|
}
|
|
|
|
return item
|
|
})
|
|
|
|
// 处理腾讯云文件链接
|
|
for (const article of listData) {
|
|
const parseImages = await parseImageUrl(article.thumbnail)
|
|
|
|
article.thumbnail = parseImages ? parseImages.map(image => image.src) : []
|
|
}
|
|
|
|
this.listData = this.loadType === 'loadMore' ? this.listData.concat(listData) : listData
|
|
this.loadType = null
|
|
},
|
|
// 初始化导航栏大小
|
|
initNavBarSize() {
|
|
// 获取小程序导航栏按钮信息
|
|
// #ifdef MP-TOUTIAO
|
|
let menuButtonInfo = tt.getCustomButtonBoundingClientRect()
|
|
menuButtonInfo.width = menuButtonInfo.capsule.width // 小程序按钮区域中使用的按钮宽度
|
|
this.mpButtonLeftPlaceholderSize = menuButtonInfo.leftIcon.width + 10
|
|
// #endif
|
|
// #ifndef MP-TOUTIAO
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
// #endif
|
|
// 计算小程序导航栏按钮占位大小
|
|
this.mpButtonPlaceholderSize = menuButtonInfo.width + 10
|
|
// 获取系统信息，判断是否为 iOS 系统，设置导航栏高度
|
|
this.navBarHeight = uni.getSystemInfoSync().system.toLowerCase().includes('ios') ? 44 : 48
|
|
},
|
|
// 格式化时间戳
|
|
publishTime(timestamp) {
|
|
return translatePublishTime(timestamp)
|
|
},
|
|
// 点击搜索框
|
|
searchClick(e) {
|
|
uni.hideKeyboard();
|
|
uni.navigateTo({
|
|
url: '/uni_modules/uni-cms-article/pages/search/search'
|
|
});
|
|
},
|
|
// 重试
|
|
retry() {
|
|
this.refresh()
|
|
},
|
|
// 刷新
|
|
refresh() {
|
|
this.loadType = 'refresh'
|
|
this.$refs.udb.loadData({
|
|
clear: true
|
|
}, () => {
|
|
uni.stopPullDownRefresh()
|
|
// #ifdef APP-NVUE
|
|
this.showRefresh = false
|
|
// #endif
|
|
})
|
|
},
|
|
// 加载更多
|
|
loadMore() {
|
|
this.loadType = 'loadMore'
|
|
this.$refs.udb.loadMore();
|
|
},
|
|
data_clear() {
|
|
this.loadType = 'clear'
|
|
this.$refs.udb.clear();
|
|
},
|
|
// 查询出错
|
|
onqueryerror(e) {
|
|
console.error(e);
|
|
}
|
|
},
|
|
// #ifdef H5
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
this.refresh()
|
|
},
|
|
// #endif
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" 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;
|
|
}
|
|
|
|
.v-preview {
|
|
.img {
|
|
width: 100%;
|
|
}
|
|
|
|
.cu-editor {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
overflow: auto;
|
|
padding: 40rpx 35rpx;
|
|
min-height: unset !important;
|
|
}
|
|
|
|
.btn-area {
|
|
position: relative;
|
|
top: -50rpx;
|
|
}
|
|
|
|
.red-btn-area {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 10rpx 0;
|
|
margin: 0 40rpx 20rpx 40rpx;
|
|
font-size: 20rpx;
|
|
|
|
.red-btn {
|
|
position: relative;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
font-size: 24rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
margin: 0;
|
|
background-image: linear-gradient(to bottom, #c11c1f, #5c0201);
|
|
|
|
+.red-btn {
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.red-btn-plain-area {
|
|
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 10rpx 0;
|
|
margin: 0 40rpx;
|
|
font-size: 21rpx;
|
|
border-top: 2px solid;
|
|
border-bottom: 2px solid;
|
|
border-image: linear-gradient(to right,
|
|
#fff,
|
|
#f44336bf,
|
|
#b13636,
|
|
#f44336bf,
|
|
#fff) 1;
|
|
|
|
.red-btn-plain {
|
|
position: relative;
|
|
color: #b13636;
|
|
font-weight: 700;
|
|
padding-left: 15rpx;
|
|
|
|
+.red-btn-plain {
|
|
margin-left: 10rpx;
|
|
|
|
&::before {
|
|
// border-left: 2px solid #f44336;
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 2px;
|
|
height: 20rpx;
|
|
background-color: #b13636;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |