昵称、头像接口开发对接和数据库获取

order-app/src/api/user.js

@@ -1,4 +1,7 @@
 import http from '../common/http.js'
+import {
+	userStore
+} from '../store/user.js'
 //获取code
 export const getCode = () => {
 	const promise = new Promise((resolve, reject) => {
@@ -24,6 +27,9 @@ export const getCode = () => {
 	})
 	return promise;
 }
+export const getUserInfoApi = (parm) => {
+	return http.get("/wxapi/wxUser/getUserInfo", parm)
+}
 //小程序登录
 export const wxLoginApi = (code) => {
 	return http.post('/wxapi/user/wxLogin', {
@@ -32,6 +38,7 @@ export const wxLoginApi = (code) => {
 }
 //封装登录
 export const userLogin = async () => {
+	const store = userStore()
 	//获取code
 	let res = await getCode()
 	//登录: 调用我们自己的后端接口
@@ -45,28 +52,40 @@ export const userLogin = async () => {
 		uni.setStorageSync('openid', data.openid)
 		uni.setStorageSync('sessionkey', data.sessionKey)
 	}
+	let result = await getUserInfoApi({
+		openid: data.openid
+	})
+	console.log(result.data)
+	if (result.data && result.data.avatarUrl) {
+		store.avatarUrl = result.data.avatarUrl
+		uni.setStorageSync('avatarUrl', result.data.avatarUrl)
+	}
+	if (result.data && result.data.nickName) {
+		store.nickName = result.data.nickName
+		uni.setStorageSync('nickName', result.data.nickName)
+	}
 }
 //新增地址
 export const addAddressApi = (parm) => {
-	console.log("新增地址成功")
 	return http.post("/wxapi/address", parm)
 }
 //地址列表
 export const addressListApi = (parm) => {
-	console.log("查询地址列表成功")
 	return http.get("/wxapi/address/list", parm)
 }
 //编辑地址
 export const editAddressApi = (parm) => {
-	console.log("编辑地址成功")
 	return http.put("/wxapi/address", parm)
 }
 //默认地址查询
 export const getAddressApi = (parm) => {
-	console.log("查询默认地址成功")
 	return http.get("/wxapi/address/getAddress", parm)
 }
 //头像上传
 export const uploadImageApi = (parm) => {
 	return http.upload(parm)
+}
+//头像昵称更新
+export const saveOrUpdateApi = (parm) => {
+	return http.post("/wxapi/wxUser/saveOrUpdate", parm)
 }

order-app/src/common/http.js

@@ -58,5 +58,6 @@ export default {
 	get,
 	post,
 	put,
-	upload
+	upload,
+	baseUrl
 }

order-app/src/pages/mine/mine.vue

@@ -32,76 +32,92 @@
 	import {
 		ref,
 		onMounted,
-		getCurrentInstance
+		getCurrentInstance,
+		computed
 	} from 'vue'
 	import {
 		userLogin,
-		uploadImageApi
+		uploadImageApi,
+		saveOrUpdateApi
 	} from '../../api/user.js'
-
+	import http from '../../common/http.js'
+	import {
+		userStore
+	} from '../../store/user.js';
+	const ustore = userStore()
 	// 获取当前组件实例
 	const instance = getCurrentInstance();
 	//昵称
-	const nickName = ref('微信用户')
+	const nickName = computed(() => {
+		if (ustore.nickName) {
+			return ustore.nickName
+		} else {
+			return ''
+		}
+	})
 	//头像
-	const avatarUrl = ref('/static/user.jpg')
+	//const avatarUrl = ref('/static/user.jpg')
+	const avatarUrl = computed(() => {
+		if (ustore.avatarUrl) {
+			return http.baseUrl + ustore.avatarUrl
+		} else {
+			return '/static/user.jpg'
+		}
+	})
 	// 页面加载时从缓存读取用户信息
 	onMounted(() => {
 		loadUserInfoFromStorage();
 	})
-	
+
 	const loadUserInfoFromStorage = () => {
-			const storedAvatar = uni.getStorageSync('avatarUrl')
-			const storedNickName = uni.getStorageSync('nickName')
-	
-			if (storedAvatar && storedNickName) {
-				nickName.value = storedNickName
-				avatarUrl.value = storedAvatar
-				console.log('从缓存加载用户信息:', storedNickName, storedAvatar)
-			}
+		const storedAvatar = uni.getStorageSync('avatarUrl')
+		const storedNickName = uni.getStorageSync('nickName')
+
+		if (storedAvatar && storedNickName) {
+			nickName.value = storedNickName
+			avatarUrl.value = storedAvatar
+			console.log('从缓存加载用户信息:', storedNickName, storedAvatar)
 		}
+	}
 
-	const onChooseAvatar = async (e) => {
-		console.log('选择头像:', e)
+	const onChooseAvatar = (e) => {
+		console.log(e)
 		avatarUrl.value = e.detail.avatarUrl
-
-		// 上传头像到服务器
-		try {
-			const res = await uploadImageApi({
-				url: "/api/upload/uploadImage",
-				filePath: e.detail.avatarUrl
-			})
-			console.log('头像上传成功:', res)
-
-			// 保存头像URL到本地存储
-			uni.setStorageSync('avatarUrl', e.detail.avatarUrl);
-		} catch (err) {
-			console.error('头像上传失败:', err)
-			uni.showToast({
-				title: '头像上传失败',
-				icon: 'none'
+		//上传服务器
+		uploadImageApi({
+			url: "/api/upload/uploadImage",
+			filePath: e.detail.avatarUrl
+		}).then((res) => {
+			//图片上传成功，存到数据库
+			console.log(res)
+			let result = JSON.parse(res)
+			saveOrUpdateApi({
+				openid: uni.getStorageSync('openid'),
+				avatarUrl: result.data
+			}).then(res => {
+				console.log(res)
+				ustore.avatarUrl = result.data
 			})
-		}
+		})
 	}
-
 	const onNickName = (e) => {
-		console.log('昵称输入:', e)
-
-		// 使用已定义的 instance 变量
-		uni.createSelectorQuery().in(instance)
+		console.log(e)
+		uni.createSelectorQuery().in(instance) // 注意这里要加上 in(this)  
 			.select("#nickname-input")
 			.fields({
 				properties: ["value"],
 			})
 			.exec((res) => {
-				console.log('获取昵称结果:', res)
-				if (res && res[0] && res[0].value) {
-					nickName.value = res[0].value
-					console.log('设置昵称:', nickName.value)
-
-					// 保存昵称到本地存储
-					uni.setStorageSync('nickName', nickName.value);
-				}
+				console.log(res)
+				nickName.value = res?.[0]?.value
+				console.log('昵称', nickName.value)
+				saveOrUpdateApi({
+					openid: uni.getStorageSync('openid'),
+					nickName: res?.[0]?.value
+				}).then(res => {
+					console.log(res)
+					ustore.nickName = res?.[0]?.value
+				})
 			})
 	}
 

order-app/src/store/user.js

@@ -0,0 +1,19 @@
+// 引入
+import {
+	defineStore
+} from 'pinia';
+//通过defineStore定义一个store,
+// defineStore 第一个参数是唯一的
+export const userStore = defineStore('userStore', {
+	state: () => {
+		return {
+			nickName: '',
+			avatarUrl: ''
+		};
+	},
+	// 也可以这样定义
+	// state: () => ({ count: 0 })
+	actions: {
+
+	},
+});