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

pages2/setting/setting.vue

@@ -5,8 +5,8 @@
 				<view class="tui-item-box align-center">
 					<view class="tui-list-cell_name">头像</view>
 					<view class="tui-right">
-						<cloud-image
-							class="avatar" :src="userInfo.avatar_file.url"></cloud-image>
+						<cloud-image class="avatar"
+							:src="(userInfo.avatar_file && userInfo.avatar_file.url) || 'https://qnycdn.mymoyu.top/static/avatar.jpg'"></cloud-image>
 					</view>
 				</view>
 			</tui-list-cell>
@@ -19,15 +19,13 @@
 			<tui-list-cell :arrow="true" @click="handleShowModal(2)">
 				<view class="tui-item-box">
 					<view class="tui-list-cell_name">性别</view>
-					<view class="tui-right">
-						{{renderGener()}}
-					</view>
+					<view class="tui-right">{{ renderGender() }}</view>
 				</view>
 			</tui-list-cell>
 			<tui-list-cell :arrow="true" @click="handleShowModal(1)">
 				<view class="tui-item-box">
 					<view class="tui-list-cell_name">个人简介</view>
-					<view class="tui-right">{{'' || '这个人很神秘，什么都没写'}}</view>
+					<view class="tui-right">{{ userInfo.signature || '这个人很神秘，什么都没写' }}</view>
 				</view>
 			</tui-list-cell>
 		</tui-list-view>
@@ -36,21 +34,19 @@
 			<tui-list-cell>
 				<view class="tui-item-box">
 					<view class="tui-list-cell_name">邮箱</view>
-					<view class="tui-right">{{userInfo.email || '暂无'}}</view>
+					<view class="tui-right">{{ userInfo.email || '暂无' }}</view>
 				</view>
 			</tui-list-cell>
 			<tui-list-cell :arrow="true" @click="handleBindMobile">
 				<view class="tui-item-box">
 					<view class="tui-list-cell_name">手机号</view>
-					<view class="tui-right">{{userInfo.mobile || '暂无'}}</view>
+					<view class="tui-right">{{ userInfo.mobile || '暂无' }}</view>
 				</view>
 			</tui-list-cell>
 			<tui-list-cell>
 				<view class="tui-item-box">
 					<view class="tui-list-cell_name">UID</view>
-					<view class="tui-right">
-						{{userInfo._id}}
-					</view>
+					<view class="tui-right">{{ userInfo._id }}</view>
 				</view>
 			</tui-list-cell>
 		</tui-list-view>
@@ -91,22 +87,17 @@
 </template>
 
 <script>
-	const uniIdCo = uniCloud.importObject("uni-id-co")
-	import {
-		store,
-		mutations
-	} from '@/pages3/uni_modules/uni-id-pages/common/store.js';
-
-	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view.vue";
-	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell.vue";
-	import tuiButton from "@/components/thorui/tui-button/tui-button.vue";
-	import tuiModal from "@/components/thorui/tui-modal/tui-modal.vue";
+	import { ref, computed, reactive } from 'vue'
+	import { store, mutations } from '@/pages3/uni_modules/uni-id-pages/common/store.js'
+	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view.vue"
+	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell.vue"
+	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
+	import tuiModal from "@/components/thorui/tui-modal/tui-modal.vue"
 	import cloudImage from "@/components/cloud-image.vue"
-	
-import { onUpdated } from "vue";
 
-	const db = uniCloud.database();
+	const db = uniCloud.database()
 	const usersTable = db.collection('uni-id-users')
+
 	export default {
 		components: {
 			tuiButton,
@@ -115,220 +106,191 @@ import { onUpdated } from "vue";
 			tuiModal,
 			cloudImage
 		},
-		computed: {
-			
-			userInfo() {
-				return store.userInfo
-			},
-			realNameStatus() {
-				if (!this.userInfo.realNameAuth) {
-					return 0
-				}
+		setup() {
+			const statusBarHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
+			const windowHeight = ref(uni.getSystemInfoSync().windowHeight)
+			const modal1 = ref(false)
+			const currentEdit = ref(0)
+			const updateForm = reactive({
+				nickname: '',
+				gender: '',
+				comment: ''
+			})
 
-				return this.userInfo.realNameAuth.authStatus
+			const userInfo = computed(() => store.userInfo)
+
+			const realNameStatus = computed(() => {
+				if (!userInfo.value.realNameAuth) return 0
+				return userInfo.value.realNameAuth.authStatus
+			})
+
+			function getFileInfo(path) {
+				const parts = path.split('/').pop()
+				const [filename, ...extParts] = parts.split('.')
+				const ext = extParts.length ? extParts.pop() : ''
+				return { name: filename, extname: ext }
 			}
-		},
-		data() {
-			return {
-				statusBarHeight: uni.getSystemInfoSync()['statusBarHeight'],
-				windowHeight: uni.getSystemInfoSync().windowHeight,
-				modal1: false,
-				currentEdit: 0,
-				updateForm: {
-					nickname: '',
-					gender: '',
-					comment: ''
-				}
+
+			function formatBytes(bytes) {
+				if (bytes === 0) return '0 Bytes'
+				const k = 1024
+				const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+				const i = Math.floor(Math.log(bytes) / Math.log(k))
+				if (i >= sizes.length) return '> 1 TB'
+				return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 			}
-		},
-		mounted() {
-			// this.updateForm.gender = this.loginUser.gender;
-		},
-		methods: {
-			getFileInfo(path) {
-				const parts = path.split('/').pop(); 
-				const [filename, ...extParts] = parts.split('.');
-				const ext = extParts.length ? extParts.pop() : ''; 
-				return {
-					name: filename,
-					extname: ext
-				};
-			},
-			formatBytes(bytes) {
-				if (bytes === 0) return '0 Bytes'; 
-				const k = 1024;
-				const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; 
 
-				const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-				if (i >= sizes.length) return '> 1 TB';
-				return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-			},
-			async updateUserAvatat() {
-				const that = this;
+			async function updateUserAvatat() {
 				uni.chooseImage({
 					type: "image",
 					count: 1,
 					async success(res) {
-						console.log(res);
 						if (res.tempFilePaths.length > 0) {
-							let filePath = res.tempFilePaths[0];
-							let {
-								name,
-								extname
-							} = that.getFileInfo(filePath)
-							const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
-							console.log(`avatar/${name}`)
+							let filePath = res.tempFilePaths[0]
+							let { name, extname } = getFileInfo(filePath)
+							const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co")
 							const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
 								cloudPath: `avatar/${name}`
-							});
-							console.log({...uploadFileOptionsRes})
-							console.log(uploadFileOptionsRes.uploadFileOptions)
+							})
 							await uniCloud.uploadFile({
 								...uploadFileOptionsRes.uploadFileOptions,
 								filePath: filePath,
 								cloudPath: uploadFileOptionsRes.cloudPath,
 								success: () => {
-									const res = {
+									const result = {
 										cloudPath: uploadFileOptionsRes.cloudPath,
 										fileID: uploadFileOptionsRes.fileID,
 										fileURL: uploadFileOptionsRes.fileURL
-									};
-									
-									let updates = {
-										avatar_file: {
-											name: name,
-											extname: extname,
-											url: res.fileID
-										}
 									}
-									
-									usersTable.where({
-										_id: that.userInfo._id
-									}).update(updates).then(e => {
+									let updates = {
+										avatar_file: { name, extname, url: result.fileID }
+									}
+									usersTable.where({ _id: userInfo.value._id }).update(updates).then(e => {
 										if (e.result.updated) {
-											uni.showToast({
-												title: '更新成功',
-												icon: 'none'
-											});
-											mutations.setUserInfo(updates);
+											uni.showToast({ title: '更新成功', icon: 'none' })
+											mutations.setUserInfo(updates)
 										} else {
-											uni.showToast({
-												title: '没有变化',
-												icon: 'none'
-											});
+											uni.showToast({ title: '没有变化', icon: 'none' })
 										}
 									})
-									this.modal1 = false;
-									
-									console.log("上传成功", res);
+									modal1.value = false
 								},
 								fail: (err) => {
-									console.log("上传失败", err);
+									console.log("上传失败", err)
 								}
-							});
-							
-
-							
-						} else {
-							console.log("未选中文件")
+							})
 						}
 					}
-				});
-			},
-			checkUrlProtocol(url) {
-				try {
-					const protocolSeparatorIndex = url.indexOf('://');
-					if (protocolSeparatorIndex === -1) {
-						return 'invalid';
-					}
-					const protocol = url.substring(0, protocolSeparatorIndex).toLowerCase();
+				})
+			}
 
-					if (protocol === 'http' || protocol === 'https') {
-						return 'http/https';
-					} else if (protocol === 'cloud') {
-						return 'cloud';
-					} else {
-						return 'other';
-					}
+			function checkUrlProtocol(url) {
+				try {
+					const protocolSeparatorIndex = url.indexOf('://')
+					if (protocolSeparatorIndex === -1) return 'invalid'
+					const protocol = url.substring(0, protocolSeparatorIndex).toLowerCase()
+					if (protocol === 'http' || protocol === 'https') return 'http/https'
+					else if (protocol === 'cloud') return 'cloud'
+					else return 'other'
 				} catch (error) {
-					return 'invalid';
+					return 'invalid'
 				}
-			},
-			getMessage(currentEdit) {
-				if (currentEdit === 0) {
-					return "请输入你的昵称";
-				} else if (currentEdit === 1) {
-					return "请填写你的个人简介";
-				} else if (currentEdit === 2) {
-					return "请选择你的性别";
-				}
-			},
-			handleToRepassword() {
-				if (!this.userInfo.mobile) {
-					console.log("需要绑定手机号!");
-					return;
+			}
+
+			function getMessage(editIndex) {
+				if (editIndex === 0) return "请输入你的昵称"
+				else if (editIndex === 1) return "请填写你的个人简介"
+				else if (editIndex === 2) return "请选择你的性别"
+			}
+
+			function handleToRepassword() {
+				if (!userInfo.value.mobile) {
+					uni.showModal({
+						title: '提示',
+						content: '修改密码需要先绑定手机号，是否前往绑定？',
+						success: (res) => {
+							if (res.confirm) {
+								uni.navigateTo({
+									url: `../../pages3/uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile`
+								})
+							}
+						}
+					})
+					return
 				}
 				uni.navigateTo({
 					url: `../../pages3/uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd`
 				})
-			},
-			handleShowModal(index) {
-				this.currentEdit = index
-				this.modal1 = true;
-			},
-			updateUserInfo() {
-				let updates = {};
-				if (this.updateForm.nickname) updates.nickname = this.updateForm.nickname;
-				if (this.updateForm.gender || this.updateForm.gender === 0) updates.gender = this.updateForm.gender;
-				if (this.updateForm.comment) updates.comment = this.updateForm.comment;
-				usersTable.where({
-					_id: this.userInfo._id
-				}).update(updates).then(e => {
+			}
+
+			function handleShowModal(index) {
+				currentEdit.value = index
+				modal1.value = true
+			}
+
+			function updateUserInfo() {
+				let updates = {}
+				if (updateForm.nickname) updates.nickname = updateForm.nickname
+				if (updateForm.gender || updateForm.gender === 0) updates.gender = updateForm.gender
+				if (updateForm.comment) updates.signature = updateForm.comment
+				usersTable.where({ _id: userInfo.value._id }).update(updates).then(e => {
 					if (e.result.updated) {
-						uni.showToast({
-							title: '更新成功',
-							icon: 'none'
-						});
-						mutations.setUserInfo(updates);
+						uni.showToast({ title: '更新成功', icon: 'none' })
+						mutations.setUserInfo(updates)
 					} else {
-						uni.showToast({
-							title: '没有变化',
-							icon: 'none'
-						});
+						uni.showToast({ title: '没有变化', icon: 'none' })
 					}
 				})
-				this.modal1 = false;
-			},
-			handleLogout() {
+				modal1.value = false
+			}
 
+			function handleLogout() {
 				uni.showModal({
 					title: '提示',
 					content: '确定退出登录吗？',
 					success: (res) => {
 						if (res.confirm) {
 							mutations.logout()
-							uni.switchTab({
-								url: '/pages/my/my'
-							})
+							uni.switchTab({ url: '/pages/my/my' })
 						}
 					}
-				});
-			},
-			renderGener() {
-				console.log(this.userInfo);
-				if (!this.userInfo) return "保密";
-				if (this.userInfo.gender === 0) return '保密';
-				if (this.userInfo.gender === 1) return '男';
-				if (this.userInfo.gender === 2) return '女';
-				return '保密';
-			},
-			// 绑定手机号
-			handleBindMobile() {
+				})
+			}
+
+			function renderGender() {
+				if (!userInfo.value) return "保密"
+				if (userInfo.value.gender === 0) return '保密'
+				if (userInfo.value.gender === 1) return '男'
+				if (userInfo.value.gender === 2) return '女'
+				return '保密'
+			}
+
+			function handleBindMobile() {
 				uni.navigateTo({
 					url: `../../pages3/uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile`
 				})
-			},
+			}
+
+			return {
+				statusBarHeight,
+				windowHeight,
+				modal1,
+				currentEdit,
+				updateForm,
+				userInfo,
+				realNameStatus,
+				getFileInfo,
+				formatBytes,
+				updateUserAvatat,
+				checkUrlProtocol,
+				getMessage,
+				handleToRepassword,
+				handleShowModal,
+				updateUserInfo,
+				handleLogout,
+				renderGender,
+				handleBindMobile
+			}
 		}
 	}
 </script>
@@ -404,11 +366,9 @@ import { onUpdated } from "vue";
 		width: 120rpx;
 		height: 120rpx;
 		border-radius: 12rpx;
-		// border: 3px solid #3a5fb6;
 	}
 
 	.text-center {
-
 		text-align: center;
 	}
 
@@ -417,4 +377,4 @@ import { onUpdated } from "vue";
 		margin-top: 50rpx;
 		padding: 20rpx
 	}
-</style>
+</style>