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

pages2/follow/follow.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 -->
@@ -27,10 +26,9 @@
                     <!-- 列表渲染 -->
 					<template v-for="(item, index) in followLst">
 					  <view class="follow-item">
-						
 						<view class="avatar-container" @click="toPersonalpage(item)">
-						  <cloud-image 
-							:src="item.fid[0].avatar_file.url || 'https://qnycdn.mymoyu.top/static/avatar.jpg'"
+						  <cloud-image
+							:src="(item.fid[0].avatar_file && item.fid[0].avatar_file.url) || 'https://qnycdn.mymoyu.top/static/avatar.jpg'"
 							mode="aspectFill" border-radius="50%"
 							height="80rpx" width="80rpx"></cloud-image>
 						</view>
@@ -39,15 +37,10 @@
 						  	{{ item.fid[0].nickname }}
 						</view>
 
-						<view 
+						<view
 						  class="btn-container"
-						  :class="{ 
-							'followed': item.fid[0].isFollow,
-							
-						  }"
-						  
+						  :class="{ 'followed': item.fid[0].isFollow }"
 						>
-						  
 						  <view @click="toggleFollow(item, index)">{{ item.fid[0].isFollow ? '已关注' : '关注' }}</view>
 						</view>
 					  </view>
@@ -77,23 +70,13 @@
 </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 cloudImage from "../../components/cloud-image.vue"
-	import cloudImage from "../../components/cloud-image.vue";
-	import {
-		parseImageUrl
-	} from "@/uni_modules/uni-cms-article/common/parse-image-url";
+	import { ref, computed, onReady } from 'vue'
+	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar"
+	import refreshBox from "@/uni_modules/uni-cms-article/components/refresh-box/refreshBox.nvue"
+	import cloudImage from "../../components/cloud-image.vue"
 
-	const db = uniCloud.database();
-
-	const uniIdCo = uniCloud.importObject("uni-id-co")
-	import {
-		store,
-		mutations
-	} from '@/pages3/uni_modules/uni-id-pages/common/store.js';
-import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
+	const db = uniCloud.database()
+	import { store } from '@/pages3/uni_modules/uni-id-pages/common/store.js'
 
 	export default {
 		components: {
@@ -101,204 +84,169 @@ import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
 			refreshBox,
 			cloudImage
 		},
-		computed: {
-			userInfo() {
-				return store.userInfo
-			},
-			realNameStatus() {
-				if (!this.userInfo.realNameAuth) {
-					return 0
-				}
+		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 followLst = ref([])
 
-				return this.userInfo.realNameAuth.authStatus
-			},
-			// 根据当前语言返回不同的搜索框占位符
-			inputPlaceholder(e) {
-				if (uni.getStorageSync('CURRENT_LANG') == "en") {
-					return 'Please enter the search content' // 英文
-				} else {
-					return '请输入搜索内容' // 中文
-				}
-			},
-			// 连表查询，返回两个集合的查询结果
-			colList() {
-				
+			const userInfo = computed(() => store.userInfo)
+
+			const realNameStatus = computed(() => {
+				if (!userInfo.value.realNameAuth) return 0
+				return userInfo.value.realNameAuth.authStatus
+			})
+
+			const colList = computed(() => {
 				return [
 					db.collection("follow")
-					.where(this.followWhere)
+					.where(followWhere.value)
 					.field("_id,fid,create_time")
 					.getTemp(),
 					db.collection("uni-id-users")
 					.field('_id,nickname,avatar_file')
 					.getTemp()
+				]
+			})
 
-				];
-			},
-			followWhere() {
-				return this.userInfo && this.userInfo._id ? {
-					uid: this.userInfo._id
-				} : {
-					uid: '__empty__'
-				}
-			}
-		},
-		data() {
-			return {
-				tags_v: [],
-				tags: [
+			const followWhere = computed(() => {
+				return userInfo.value && userInfo.value._id
+					? { uid: userInfo.value._id }
+					: { uid: '__empty__' }
+			})
 
-				],
-				
-				showRefresh: false, // 是否显示刷新按钮
-				listHeight: 0, // 列表高度
-				mpButtonLeftPlaceholderSize: 0, // 小程序左侧icon占位大小
-				mpButtonPlaceholderSize: 87, // 小程序导航栏按钮占位大小
-				navBarHeight: 44, // 导航栏高度
-				refreshStatus: 0, // 刷新状态 0: 未刷新 1: 刷新中 2: 刷新完成
-				listData: [], // 列表数据
-				loadType: null,
-				
-				followLst: []
-			}
-		},
-		methods: {
-			toPersonalpage(item) {
-				console.log(item)
+			function toPersonalpage(item) {
 				uni.navigateTo({
 					url: "/uni_modules/zetank-personalpage/pages/personalpage/personalpage?uid=" + item.fid[0]._id
 				})
-			},
-			async toggleFollow(item, index) {
-				console.log(item)
+			}
+
+			async function toggleFollow(item, index) {
 				try {
-					
 					if (item.fid[0].isFollow === false) {
 						const res = await uniCloud.importObject("follow").follow({
-							uid: this.userInfo._id,
+							uid: userInfo.value._id,
 							fid: item.fid[0]._id
-						});
+						})
 						if (res.code === 200) {
-							console.log(res);
-							this.followLst[0].fid[index].isFollow = true;
+							followLst.value[index].fid[0].isFollow = true
 						} else {
-							console.log(res.msg);
+							console.log(res.msg)
 						}
-					}
-					else if (item.fid[0].isFollow === true) {
+					} else if (item.fid[0].isFollow === true) {
 						const res = await uniCloud.importObject("follow").reFollow({
-							uid: this.userInfo._id,
+							uid: userInfo.value._id,
 							fid: item.fid[0]._id
-						});
+						})
 						if (res.code === 200) {
-							if (res.code === 200) {
-								console.log(res);
-								this.followLst[index].fid[0].isFollow = false;
-							}
+							followLst.value[index].fid[0].isFollow = false
 						} else {
 							console.log(res.msg)
 						}
 					}
-				}catch(e) {
+				} catch (e) {
 					console.log(e.message)
 				}
-			},
-			async listLoad(data) {
-				if (!data || data.length === 0 ) return 0;
-				let followLst = [];
-				if (data[0].fid) {
-					let item = {...data[0]};
-					item.fid[0].isFollow = true;
-					followLst.push(item)
+			}
+
+			async function listLoad(data) {
+				if (!data || data.length === 0) {
+					loadType.value = null
+					return 0
 				}
-				console.log(followLst);
-				this.followLst = this.loadType === 'loadMore' ? this.followLst.concat(followLst) : followLst
-				this.loadType = null;
-					
-			},
-			// 初始化导航栏大小
-			initNavBarSize() {
-				// 获取小程序导航栏按钮信息
+				let tempFollowLst = []
+				data.forEach(item => {
+					if (item.fid && item.fid[0]) {
+						let newItem = {
+							_id: item._id,
+							create_time: item.create_time,
+							fid: [{
+								_id: item.fid[0]._id,
+								nickname: item.fid[0].nickname || '未知用户',
+								avatar_file: item.fid[0].avatar_file || {},
+								isFollow: true
+							}]
+						}
+						tempFollowLst.push(newItem)
+					}
+				})
+				followLst.value = loadType.value === 'loadMore' ? followLst.value.concat(tempFollowLst) : tempFollowLst
+				listData.value = followLst.value
+				loadType.value = null
+			}
+
+			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) {
-				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
-				}, () => {
+				mpButtonPlaceholderSize.value = menuButtonInfo.width + 10
+				navBarHeight.value = uni.getSystemInfoSync().system.toLowerCase().includes('ios') ? 44 : 48
+			}
+
+			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 onReady() {
-			// #ifdef MP
-			this.initNavBarSize() // 初始化导航栏大小
-			// #endif
-			/* 可用窗口高度 - 搜索框高 - 状态栏高 */
-			this.listHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - this
-				.navBarHeight + 'px'; // 计算列表高度
-			
-			this.$refs.udb.loadData();
-			
-		},
-		onLoad() {
-			
-		},
+			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'
+				udbRef.value.loadData()
+			})
+
+			return {
+				udbRef,
+				showRefresh,
+				listHeight,
+				mpButtonLeftPlaceholderSize,
+				mpButtonPlaceholderSize,
+				navBarHeight,
+				listData,
+				loadType,
+				followLst,
+				userInfo,
+				realNameStatus,
+				colList,
+				followWhere,
+				toPersonalpage,
+				toggleFollow,
+				listLoad,
+				initNavBarSize,
+				refresh,
+				loadMore,
+				onqueryerror
+			}
+		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	
 	/* #ifndef APP-NVUE */
 	.pages view {
 		display: flex;
@@ -375,7 +323,7 @@ import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
 	.pages .uni-list ::v-deep .uni-list--border:after {
 		background-color: #f5f5f5;
 	}
-	
+
 	.main {
 	  display: flex;
 	  justify-content: space-between;
@@ -389,7 +337,7 @@ import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
 	    font-size: 30rpx;
 	    color: #bbb;
 	  }
-	
+
 	  .thumbnails {
 	    margin: 20rpx 0;
 	    display: flex;
@@ -411,19 +359,19 @@ import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
 	      }
 	    }
 	  }
-	
+
 	  .info {
 	    display: flex;
 	    flex-direction: row;
 		margin-top: 20rpx;
 	  }
-	
+
 	  .author,
 	  .publish_date {
 	    font-size: 24rpx;
 	    color: #bbbbbb;
 	  }
-	
+
 	  .publish_date {
 	    margin-left: 14rpx;
 	  }
@@ -431,7 +379,7 @@ import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
 
 	/* 父容器设置 */
 	.follow-item {
-	  will-change: transform; /* 启用GPU加速 */
+	  will-change: transform;
 	  display: flex;
 	  align-items: center;
 	  padding: 24rpx;
@@ -440,18 +388,18 @@ import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
 	  border-radius: 16rpx;
 	  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
 	}
-	
+
 	/* 头像区块 (占1份) */
 	.avatar-container {
 	  flex: 1;
-	  min-width: 0; /* 防止内容溢出 */
+	  min-width: 0;
 	  margin-right: 20rpx;
 	}
-	
+
 	/* 信息区块 (占3份) */
 	.info-container {
 	  flex: 3;
-	  min-width: 0; /* 关键：允许文本截断 */
+	  min-width: 0;
 	  overflow: hidden;
 	}
 	.name {
@@ -459,10 +407,10 @@ import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
 	  color: #333;
 	  display: -webkit-box;
 	  -webkit-box-orient: vertical;
-	  -webkit-line-clamp: 1; /* 单行显示 */
+	  -webkit-line-clamp: 1;
 	  overflow: hidden;
 	}
-	
+
 	/* 按钮区块 (占2份) */
 	.btn-container {
 	  flex:1.5;
@@ -478,5 +426,4 @@ import { follow } from "../../uniCloud-alipay/cloudfunctions/follow/index.obj";
 	  color: #666666;
 	  background: #F8F8F8;
 	}
-
 </style>