完善未完成功能:修复关注列表/评论发布/编辑器草稿等页面

pages2/arctcleCollectList/arctcleCollectList.vue

@@ -5,7 +5,6 @@
 		@error="onqueryerror" :page-size="10"
 				@onPullDownRefresh="onPullDownRefresh" @load="listLoad"
 			:collection="colList"  >
-            <!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
             <!-- #ifdef APP-NVUE -->
             <list class="uni-list" :border="false" :style="{ height: listHeight }">
                 <!-- #endif -->
@@ -60,27 +59,21 @@
 </template>
 
 <script>
-	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 { 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 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 db = uniCloud.database()
 	const articleDBName = 'uni-cms-articles'
 	const userDBName = 'uni-id-users'
 
-	const uniIdCo = uniCloud.importObject("uni-id-co")
-	import {
-		store,
-		mutations
-	} from '@/pages3/uni_modules/uni-id-pages/common/store.js';
-
 	export default {
 		components: {
 			statusBar,
@@ -89,35 +82,32 @@
 			rightSmallCover,
 			threeCover
 		},
-		computed: {
-			userInfo() {
-				return store.userInfo
-			},
-			queryUserId() {
-				return this.userInfo && this.userInfo._id ? this.userInfo._id : '__empty__'
-			},
-			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() {
-				
+		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-collect")
-					.where({
-						user_id: this.queryUserId,
-					})
+					.where({ user_id: queryUserId.value })
 					.getTemp(),
 					db.collection(articleDBName)
 					.field('_id,thumbnail,title,publish_date,user_id, excerpt, article_status')
@@ -125,158 +115,120 @@
 					db.collection(userDBName)
 					.field('_id,nickname')
 					.getTemp()
+				]
+			})
 
-				];
-			}
-		},
-		data() {
-			return {
-				tags_v: [],
-				tags: [
-
-				],
-				showRefresh: false, // 是否显示刷新按钮
-				listHeight: 0, // 列表高度
-				mpButtonLeftPlaceholderSize: 0, // 小程序左侧icon占位大小
-				mpButtonPlaceholderSize: 87, // 小程序导航栏按钮占位大小
-				navBarHeight: 44, // 导航栏高度
-				refreshStatus: 0, // 刷新状态 0: 未刷新 1: 刷新中 2: 刷新完成
-				listData: [], // 列表数据
-				loadType: null,
-				historyList: [],
-			}
-		},
-		methods: {
-			getNewItem(item) {
+			function getNewItem(item) {
 				if (!item.excerpt) {
-					item.excerpt = "";
+					item.excerpt = ""
 				} else if (item.excerpt.length > 50) {
-					item.excerpt = item.excerpt.slice(0, 50) + " ... ...";
+					item.excerpt = item.excerpt.slice(0, 50) + " ... ..."
 				}
-				return item;
-			},
-			async listLoad(data) {
-				if(data.length !== 0) {
-					const listData = data.map(item => {
+				return item
+			}
+
+			async function listLoad(data) {
+				if (data.length !== 0) {
+					const tempListData = data.map(item => {
 						if (typeof item.article_id.thumbnail === 'string') {
 							item.article_id[0].thumbnail = [item.article_id[0].thumbnail]
 						}
-						item.article_id[0].user_id = item.user_id[0]; 
-						console.log(item);
-						item.article_id[0].last_view_time = new Date(item.last_view_time).getTime();
-						return item.article_id[0];
+						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]
 					})
-					
-					console.log(listData);
-					
-					// 处理腾讯云文件链接
-					for (const article of listData) {
+
+					for (const article of tempListData) {
 						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
+
+					listData.value = loadType.value === 'loadMore' ? listData.value.concat(tempListData) : tempListData
+					loadType.value = null
 				} else {
-					
-					this.listData = this.loadType === 'loadMore' ? this.listData.concat([]) : []
-					this.loadType = null
+					listData.value = loadType.value === 'loadMore' ? listData.value.concat([]) : []
+					loadType.value = null
 				}
-					
-			},
-			// 初始化导航栏大小
-			initNavBarSize() {
-				// 获取小程序导航栏按钮信息
+			}
+
+			function initNavBarSize() {
 				// #ifdef MP-TOUTIAO
 				let menuButtonInfo = tt.getCustomButtonBoundingClientRect()
-				menuButtonInfo.width = menuButtonInfo.capsule.width //  小程序按钮区域中使用的按钮宽度
-				this.mpButtonLeftPlaceholderSize = menuButtonInfo.leftIcon.width + 10
+				menuButtonInfo.width = menuButtonInfo.capsule.width
+				mpButtonLeftPlaceholderSize.value = 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) {
+				mpButtonPlaceholderSize.value = menuButtonInfo.width + 10
+				navBarHeight.value = uni.getSystemInfoSync().system.toLowerCase().includes('ios') ? 44 : 48
+			}
+
+			function 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
-				}, () => {
+			}
+
+			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
-					this.showRefresh = false
+					showRefresh.value = false
 					// #endif
 				})
-			},
-			// 加载更多
-			loadMore() {
-				this.loadType = 'loadMore'
-				this.$refs.udb.loadMore()
-			},
-			// 查询出错
-			onqueryerror(e) {
-				console.error(e);
-			},
+			}
 
-			// #ifdef H5
-			// 下拉刷新
-			onPullDownRefresh() {
-				this.refresh()
-			},
-			// #endif
-			change(currentPage, type) {
-				this.page.currentPage = currentPage;
-				console.log("点击了" + type + "，当前页：" + currentPage);
-				this.data_clear();
-			},
-			async getHistoryList() {
-				return uniCloud.importObject("cms-articles-log").getHistoryList({
-					user_id: this.userInfo._id
-				}).data.data;
-			},
-			async getHistory() {
-				console.log(this.userInfo._id);
-				return uniCloud.importObject("cms-articles-log").getHistory(this.userInfo._id);
+			function loadMore() {
+				loadType.value = 'loadMore'
+				udbRef.value.loadMore()
 			}
-		},
-		watch: {
-			'userInfo._id'(val, oldVal) {
-				if (val && val !== oldVal && this.$refs.udb) {
-					this.refresh()
+
+			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
 			}
-		},
-		async onReady() {
-			// #ifdef MP
-			this.initNavBarSize() // 初始化导航栏大小
-			// #endif
-			/* 可用窗口高度 - 搜索框高 - 状态栏高 */
-			this.listHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - this
-				.navBarHeight + 'px'; // 计算列表高度
-		},
-		onLoad() {
-			
-		},
+		}
 	}
 </script>