t/uni_modules/uni-cms-article/pages/list/list.nvue

<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: "/static/template/default.png",
				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: {
			async getCloudImage(srcLst) {
				for (let i = 0; i < srcLst.length ; i ++ ) {
					if (srcLst[i]&&srcLst[i].substring(0, 8) == "cloud://") {
						const res = await uniCloud.getTempFileURL({fileList: [srcLst[i]]});
						console.log(res)
						console.log(res.fileList.tempFileURL)
						srcLst[i]  = res.fileList[0].tempFileURL
						
					} else if (srcLst[i]&&srcLst[i].substring(0, 8) == "qiniu://") {
						console.log(srcLst[i])
						const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
						const res = await uniCloudStorageExtCo.getTempFileURL({src: srcLst[i]});
						console.log(res.fileList[0].tempFileURL)
						srcLst[i] = res.fileList[0].tempFileURL
					
					} else {
						srcLst[i] = srcLst[i]
					}
				}
				return srcLst;
			},
			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 this.getCloudImage(article.thumbnail)
					// const parseImages = await parseImageUrl(article.thumbnail)
					console.log(parseImages)

					article.thumbnail = parseImages;
					
				}
				
				console.log(listData)

				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>