代码优化

pages/me/userInfo.vue

@@ -3,18 +3,18 @@
 		<up-cell-group>
 			<up-cell title="头像">
 				<template #value>
-					<image :src="userInfo.avatar?userInfo.avatar:'../../static/default/avatar.png'" mode="" @click="uploadImg"
+					<image :src="data.userInfo.avatar?data.userInfo.avatar:'../../static/default/avatar.png'" mode="" @click="uploadImg"
 						style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
 				</template>
 			</up-cell>
 			<up-cell title="用户名">
 				<template #value>
-					<input v-model="userInfo.userName" align="right" placeholder="请输入用户名" />
+					<input v-model="data.userInfo.userName" align="right" placeholder="请输入用户名" />
 				</template>
 			</up-cell>
 			<up-cell title="手机">
 				<template #value>
-					<input :disabled="userInfo.phone?true:false" v-model="userInfo.phone" align="right" placeholder="请输入联系电话" />
+					<input :disabled="data.userInfo.phone?true:false" v-model="data.userInfo.phone" align="right" placeholder="请输入联系电话" />
 				</template>
 			</up-cell>
 		</up-cell-group>
@@ -22,144 +22,141 @@
 	</view>
 </template>
 
-<script>
+<script setup>
+	import { reactive } from 'vue';
+	import { onShow} from '@dcloudio/uni-app'
 	import config from '@/commons/config.js';
-	import http from '@/http/http.js';
-	export default {
-		data() {
-			return{
-				userInfo: {
-					avatar: '',
-					userName: '',
-					phone: '',
-				}
-			}
-		},
-		onLoad( options ) {
-			this.getUserInfo()
-		},
-		
-		methods: {
-			/**
-			 * 获取个人信息
-			 */
-			getUserInfo() {
-				http.request({
-					url:'app/user/selectUserById',
-				}).then(res => {
-					this.userInfo = res.data
-				})
-			},
-			
-			/**
-			 * 上次头像
-			 */
-			uploadImg() {
-				let that = this;
-				var url = null;
-				uni.showActionSheet({
-					// itemList按钮的文字接受的是数组
-					itemList: ["查看头像", "从相册选择图片"],
-					success(e) {
-						var index = e.tapIndex
-						console.log(index)
-						if (index === 0) {
-							// 用户点击了预览当前图片
-							// 可以自己实现当前头像链接的读取
-							let url = that.headImg;
-							let arr = []
-							arr.push(url)
-							uni.previewImage({
-								// 预览功能图片也必须是数组的
-								urls: arr
-							})
-						} else if (index === 1) {
-							uni.chooseImage({
-								count: 1, //默认9
-								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
-								sourceType: ['album'], //从相册选择
-								success: function(res) {
-									uni.showLoading({
-										title: '上传中...'
-									});
-									uni.uploadFile({
-										url: config.baseApiUrl + 'alioss/upload',
-										filePath: res.tempFilePaths[0],
-										name: 'file',
-										success: uploadFileRes => {
-											url = JSON.parse(uploadFileRes.data);
-											console.log(url)
-											this.userInfo.avatar = url.data
-											uni.hideLoading();
-											
-										}
-									});
+	import {selectUserById} from '@/api/user/user.js';
+	
+	let data = reactive({
+		userInfo: {
+			avatar: '',
+			userName: '',
+			phone: '',
+		}
+	})
+	
+	onShow(() => {
+		// console.log(1)
+		getUserInfo()
+	})
+	
+	/**
+	 * 获取个人信息
+	 */
+	async function getUserInfo () {
+		let res = await selectUserById()
+		if ( res.code == 0 ) {
+			data.userInfo = res.data
+		}
+	}
+	
+	/**
+	 * 上传头像
+	 */
+	function uploadImg () {
+		var url = null;
+		uni.showActionSheet({
+			// itemList按钮的文字接受的是数组
+			itemList: ["查看头像", "从相册选择图片"],
+			success(e) {
+				var index = e.tapIndex
+				console.log(index)
+				if (index === 0) {
+					// 用户点击了预览当前图片
+					// 可以自己实现当前头像链接的读取
+					let url = data.userInfo.avatar;
+					let arr = []
+					arr.push(url)
+					uni.previewImage({
+						// 预览功能图片也必须是数组的
+						urls: arr
+					})
+				} else if (index === 1) {
+					uni.chooseImage({
+						count: 1, //默认9
+						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+						sourceType: ['album'], //从相册选择
+						success: function(res) {
+							uni.showLoading({
+								title: '上传中...'
+							});
+							uni.uploadFile({
+								url: config.baseApiUrl + 'alioss/upload',
+								filePath: res.tempFilePaths[0],
+								name: 'file',
+								success: uploadFileRes => {
+									url = JSON.parse(uploadFileRes.data);
+									console.log(url)
+									data.userInfo.avatar = url.data
+									uni.hideLoading();
+									
 								}
 							});
 						}
-					}
-				})
-			},
-			
-			/**
-			 * 保存
-			 */
-			save() {
-				if (!this.userInfo.userName) {
-					uni.showToast({
-						title: "用户名不能为空",
-						icon: "none"
-					})
-					return
+					});
 				}
-				if (!this.userInfo.phone) {
-					uni.showToast({
-						title: "手机号不能空",
-						icon: "none"
-					})
-					return
-				}
-				if (this.checkPhone(this.userInfo.phone) == false) {
-					uni.showToast({
-						title: "手机号格式不正确",
-						icon: "none"
-					})
-					return
-				}
-			
-				uni.showModal({
-					title: '温馨提示',
-					content: '确定保存信息',
-					confirmColor: '#ff7581',
-					success: e => {
-						if (e.confirm) {
-							http.request({
-								url:'app/user/updateUsers',
-								method: 'post',
-								data: {
-									userName: this.userInfo.userName,
-									avatar: this.userInfo.avatar,
-									phone: this.userInfo.phone,
-								}
-							}).then(res => {
-								uni.showToast({
-									title: '保存成功',
-									icon: "none"
-								})
-								setTimeout(function() {
-									uni.navigateBack()
-								}, 1000)
-							})
-							
-						}
-					}
-				});
-			},
-			//根据正则验证手机号是否正确包括校验长度
-			checkPhone(phone) {
-				return /^1[3456789]\d{9}$/.test(phone);
-			},
+			}
+		})
+	}
+	
+	/**
+	 * 保存
+	 */
+	function save () {
+		if (!data.userInfo.userName) {
+			uni.showToast({
+				title: "用户名不能为空",
+				icon: "none"
+			})
+			return
 		}
+		if (!data.userInfo.phone) {
+			uni.showToast({
+				title: "手机号不能空",
+				icon: "none"
+			})
+			return
+		}
+		if (checkPhone(data.userInfo.phone) == false) {
+			uni.showToast({
+				title: "手机号格式不正确",
+				icon: "none"
+			})
+			return
+		}
+					
+		uni.showModal({
+			title: '温馨提示',
+			content: '确定保存信息',
+			confirmColor: '#ff7581',
+			success: e => {
+				if (e.confirm) {
+					http.request({
+						url:'app/user/updateUsers',
+						method: 'post',
+						data: {
+							userName: data.userInfo.userName,
+							avatar: data.userInfo.avatar,
+							phone: data.userInfo.phone,
+						}
+					}).then(res => {
+						uni.showToast({
+							title: '保存成功',
+							icon: "none"
+						})
+						setTimeout(function() {
+							uni.navigateBack()
+						}, 1000)
+					})
+					
+				}
+			}
+		});
+	}
+	
+	function checkPhone(phone) {
+		return /^1[3456789]\d{9}$/.test(phone);
 	}
 </script>