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

pages/my/my.vue

@@ -94,6 +94,7 @@
 </template>
 
 <script>
+	import { ref, computed } from 'vue'
 	import cloudImage from "@/components/cloud-image.vue"
 	import {
 		store,
@@ -104,186 +105,107 @@
 		components: {
 			cloudImage
 		},
-		computed: {
-			userInfo() {
-				return store.userInfo || {}
-			},
-			isLogin() {
-				return !!uni.getStorageSync('uni_id_token')
-			},
-			realNameStatus() {
-				if (!this.userInfo.realNameAuth) {
+		setup() {
+			const inputDialog = ref(null)
+
+			const userInfo = computed(() => store.userInfo || {})
+
+			const isLogin = computed(() => !!uni.getStorageSync('uni_id_token'))
+
+			const realNameStatus = computed(() => {
+				if (!userInfo.value.realNameAuth) {
 					return 0
 				}
+				return userInfo.value.realNameAuth.authStatus
+			})
 
-				return this.userInfo.realNameAuth.authStatus
-			},
-			profileDesc() {
-				if (!this.isLogin) {
+			const profileDesc = computed(() => {
+				if (!isLogin.value) {
 					return '登录后可同步查看收藏、历史与个人主页'
 				}
+				return userInfo.value.signature || '点击查看个人资料与账号设置'
+			})
 
-				return this.userInfo.signature || '点击查看个人资料与账号设置'
-			},
-			stats() {
-				return [{
-					label: '收藏',
-					value: this.getCount('my_collection_count'),
-					menu: this.findMenuItem('my_collect')
-				}, {
-					label: '喜欢',
-					value: this.getCount('like_count'),
-					menu: this.findMenuItem('my_like')
-				}, {
-					label: '历史',
-					value: this.getCount('read_history_count'),
-					menu: this.findMenuItem('history')
-				}, {
-					label: '关注',
-					value: this.getCount('following_count'),
-					menu: this.findMenuItem('my_follow')
-				}]
-			},
-			quickMenus() {
+			const stats = computed(() => {
 				return [
-					this.findMenuItem('my_collect'),
-					this.findMenuItem('history'),
-					this.findMenuItem('my_reply'),
-					this.findMenuItem('customer_service')
-				].filter(Boolean)
-			},
-			menuGroups() {
-				return [
-					['my_account', 'my_follow', 'edit_cms', 'cms_list'].map(this.findMenuItem).filter(Boolean),
-					['withdraw', 'recharge', 'sharing_app', 'customer_service'].map(this.findMenuItem).filter(Boolean)
+					{ label: '收藏', value: getCount('my_collection_count'), menu: findMenuItem('my_collect') },
+					{ label: '喜欢', value: getCount('like_count'), menu: findMenuItem('my_like') },
+					{ label: '历史', value: getCount('read_history_count'), menu: findMenuItem('history') },
+					{ label: '关注', value: getCount('following_count'), menu: findMenuItem('my_follow') }
 				]
+			})
+
+			const quickMenus = computed(() => {
+				return [
+					findMenuItem('my_collect'),
+					findMenuItem('history'),
+					findMenuItem('my_reply'),
+					findMenuItem('customer_service')
+				].filter(Boolean)
+			})
+
+			const menuGroups = computed(() => {
+				return [
+					['my_account', 'my_follow', 'edit_cms', 'cms_list'].map(findMenuItem).filter(Boolean),
+					['withdraw', 'recharge', 'sharing_app', 'customer_service'].map(findMenuItem).filter(Boolean)
+				]
+			})
+
+			const menuMap = {
+				my_account: { name: '我的主页', icon: '/static/center/self.png', desc: '查看个人主页与公开动态', type: 'my_account' },
+				my_follow: { name: '我的关注', icon: '/static/center/icon-follow.png', desc: '关注的人与内容动态', type: 'my_follow' },
+				edit_cms: { name: '新增文章', icon: '/static/center/release.png', desc: '快速发布新的文章内容', type: 'edit_cms' },
+				cms_list: { name: '文章管理', icon: '/static/center/book.png', desc: '编辑或管理已发布文章', type: 'cms_list' },
+				withdraw: { name: '提现中心', icon: '/static/center/withdraw.png', desc: '查看余额并申请提现', type: 'withdraw' },
+				reply: { name: '回复我的', icon: '/static/center/reply.png', desc: '查看收到的回复消息', type: 'my_reply' },
+				my_reply: { name: '回复我的', icon: '/static/center/reply.png', desc: '查看收到的回复消息', type: 'my_reply' },
+				my_like: { name: '我的喜欢', icon: '/static/center/like.png', desc: '收藏喜欢的内容足迹', type: 'my_like' },
+				history: { name: '浏览历史', icon: '/static/center/history.png', desc: '继续查看最近浏览记录', type: 'history' },
+				my_collect: { name: '我的收藏', icon: '/static/center/collect.png', desc: '集中管理收藏内容', type: 'my_collect' },
+				recharge: { name: '充值记录', icon: '/static/center/recharge.png', desc: '查看账户充值明细', type: 'recharge' },
+				customer_service: { name: '联系客服', icon: '/static/center/kefu.png', desc: '获取帮助与问题反馈', type: 'customer_service' },
+				sharing_app: { name: '分享应用', icon: '/static/center/share.png', desc: '把应用推荐给更多好友', type: 'sharing_app' },
+				logout: { name: '退出登录', icon: '/static/center/out.png', desc: '安全退出当前登录状态', type: 'logout' }
 			}
-		},
-		data() {
-			return {
-				menuMap: {
-					my_account: {
-						name: '我的主页',
-						icon: '/static/center/self.png',
-						desc: '查看个人主页与公开动态',
-						type: 'my_account'
-					},
-					my_follow: {
-						name: '我的关注',
-						icon: '/static/center/icon-follow.png',
-						desc: '关注的人与内容动态',
-						type: 'my_follow'
-					},
-					edit_cms: {
-						name: '新增文章',
-						icon: '/static/center/release.png',
-						desc: '快速发布新的文章内容',
-						type: 'edit_cms'
-					},
-					cms_list: {
-						name: '文章管理',
-						icon: '/static/center/book.png',
-						desc: '编辑或管理已发布文章',
-						type: 'cms_list'
-					},
-					withdraw: {
-						name: '提现中心',
-						icon: '/static/center/withdraw.png',
-						desc: '查看余额并申请提现',
-						type: 'withdraw'
-					},
-					reply: {
-						name: '回复我的',
-						icon: '/static/center/reply.png',
-						desc: '查看收到的回复消息',
-						type: 'my_reply'
-					},
-					my_reply: {
-						name: '回复我的',
-						icon: '/static/center/reply.png',
-						desc: '查看收到的回复消息',
-						type: 'my_reply'
-					},
-					my_like: {
-						name: '我的喜欢',
-						icon: '/static/center/like.png',
-						desc: '收藏喜欢的内容足迹',
-						type: 'my_like'
-					},
-					history: {
-						name: '浏览历史',
-						icon: '/static/center/history.png',
-						desc: '继续查看最近浏览记录',
-						type: 'history'
-					},
-					my_collect: {
-						name: '我的收藏',
-						icon: '/static/center/collect.png',
-						desc: '集中管理收藏内容',
-						type: 'my_collect'
-					},
-					recharge: {
-						name: '充值记录',
-						icon: '/static/center/recharge.png',
-						desc: '查看账户充值明细',
-						type: 'recharge'
-					},
-					customer_service: {
-						name: '联系客服',
-						icon: '/static/center/kefu.png',
-						desc: '获取帮助与问题反馈',
-						type: 'customer_service'
-					},
-					sharing_app: {
-						name: '分享应用',
-						icon: '/static/center/share.png',
-						desc: '把应用推荐给更多好友',
-						type: 'sharing_app'
-					},
-					logout: {
-						name: '退出登录',
-						icon: '/static/center/out.png',
-						desc: '安全退出当前登录状态',
-						type: 'logout'
-					}
-				}
-			}
-		},
-		methods: {
-			getCount(field) {
-				const value = Number(this.userInfo[field] || 0)
+
+			function getCount(field) {
+				const value = Number(userInfo.value[field] || 0)
 				return value > 99 ? '99+' : String(value)
-			},
-			findMenuItem(type) {
-				return this.menuMap[type]
-			},
-			dialogConfirm() {
+			}
+
+			function findMenuItem(type) {
+				return menuMap[type]
+			}
+
+			function dialogConfirm() {
 				console.log('点击确认')
-			},
-			inputDialogToggle() {
-				this.$refs.inputDialog.open()
-			},
-			dialogClose() {
+			}
+
+			function inputDialogToggle() {
+				inputDialog.value?.open()
+			}
+
+			function dialogClose() {
 				console.log('点击关闭')
-			},
-			requireLogin(next) {
+			}
+
+			function requireLogin(next) {
 				const token = uni.getStorageSync('uni_id_token')
 				if (!token) {
-					this.toLogin()
+					toLogin()
 					return false
 				}
-
 				next && next()
 				return true
-			},
-			menuClick(item) {
-				if (!item || !item.type) {
-					return
-				}
+			}
+
+			function menuClick(item) {
+				if (!item || !item.type) return
 
 				const routeMap = {
 					my_follow: '/pages2/follow/follow',
 					withdraw: '/pages2/balance/balance',
+					recharge: '/pages2/balance/balance',
 					my_reply: '/pages2/replyCommentList/replyCommentList',
 					cms_list: '/pages2/edit_list/edit_list',
 					edit_cms: '/pages2/editCms/editCms',
@@ -293,54 +215,74 @@
 				}
 
 				if (item.type === 'my_account') {
-					this.toPersonalpage()
+					toPersonalpage()
 					return
 				}
 
 				if (routeMap[item.type]) {
-					this.requireLogin(() => {
-						uni.navigateTo({
-							url: routeMap[item.type]
-						})
+					requireLogin(() => {
+						uni.navigateTo({ url: routeMap[item.type] })
 					})
 					return
 				}
 
-				if (item.type === 'customer_service' || item.type === 'sharing_app' || item.type === 'recharge') {
-					this.inputDialogToggle()
+				if (item.type === 'customer_service' || item.type === 'sharing_app') {
+					inputDialogToggle()
 					return
 				}
 
 				if (item.type === 'logout') {
 					mutations.logout()
 				}
-			},
-			toLogin() {
+			}
+
+			function toLogin() {
 				uni.navigateTo({
 					url: '../../pages3/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=weixin'
 				})
-			},
-			toUserInfoPage() {
-				this.requireLogin(() => {
+			}
+
+			function toUserInfoPage() {
+				requireLogin(() => {
 					uni.navigateTo({
 						url: '../../pages3/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true'
 					})
 				})
-			},
-			toPersonalpage() {
-				this.requireLogin(() => {
+			}
+
+			function toPersonalpage() {
+				requireLogin(() => {
 					uni.navigateTo({
-						url: '/uni_modules/zetank-personalpage/pages/personalpage/personalpage?uid=' + this.userInfo._id
+						url: '/uni_modules/zetank-personalpage/pages/personalpage/personalpage?uid=' + userInfo.value._id
 					})
 				})
-			},
-			toScan() {
-				this.inputDialogToggle()
-			},
-			toSetting() {
-				uni.navigateTo({
-					url: '/pages2/setting/setting'
-				})
+			}
+
+			function toScan() {
+				inputDialogToggle()
+			}
+
+			function toSetting() {
+				uni.navigateTo({ url: '/pages2/setting/setting' })
+			}
+
+			return {
+				inputDialog,
+				userInfo,
+				isLogin,
+				realNameStatus,
+				profileDesc,
+				stats,
+				quickMenus,
+				menuGroups,
+				dialogConfirm,
+				dialogClose,
+				menuClick,
+				toLogin,
+				toUserInfoPage,
+				toPersonalpage,
+				toScan,
+				toSetting
 			}
 		}
 	}