初始化登录功能,注册功能

This commit is contained in:
yzy committed 2026-01-14 18:36:31 +08:00
1 parent 63726d8200
commit 76ba02d29b
16 files changed
+2090 -1025

No files matched your search

+163 -62
View File
@@ -1,27 +1,77 @@
// 引用pinia商店
import { ref, reactive } from 'vue';
import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
import { parse, stringify } from 'zipson';
export const useUserStore = defineStore(
'user',
() => {
const userInfo = ref({});
const platform = ref('');
const userToken = ref('');
// 用户基础信息
const userInfo = ref({
areaCode: '',
avatar: '',
birthday: null,
email: null,
gender: null,
mobile: '',
nickName: '',
trueName: null,
userId: null,
});
// 认证相关信息
const token = ref('');
const isLogin = ref(false);
// 平台配置信息
const platform = ref('');
const currency = ref('HKD');
const lang = ref('');
// 客服联系方式
const kfTelCN = ref('');
const kfTelHK = ref('');
const wxLink = ref('');
const lang = ref('');
const setProfile = (val) => {
userInfo.value = {
...val,
};
console.log(userInfo.value);
// 计算属性 - 是否已登录
const isLoggedIn = computed(() => isLogin.value && token.value !== '');
// 计算属性 - 用户头像
const userAvatar = computed(() => userInfo.value.avatar || '/static/default-avatar.png');
// 计算属性 - 用户昵称
const userName = computed(() => userInfo.value.nickName || userInfo.value.trueName || '游客');
// 设置用户信息
const setUserInfo = (data) => {
if (data && typeof data === 'object') {
userInfo.value = {
...userInfo.value,
...data,
};
}
};
//清理用户信息,退出时使用
const clearProfile = () => {
// 设置认证令牌
const setToken = (tokenValue) => {
token.value = tokenValue || '';
isLogin.value = !!tokenValue;
};
// 设置登录状态
const setLoginStatus = (status) => {
isLogin.value = Boolean(status);
};
// 用户登录 - 合并设置用户信息和令牌
const login = (userData, accessToken) => {
setUserInfo(userData);
setToken(accessToken);
setLoginStatus(true);
};
// 用户登出 - 清理所有用户相关数据
const logout = () => {
userInfo.value = {
areaCode: '',
avatar: '',
@@ -33,80 +83,131 @@ export const useUserStore = defineStore(
trueName: null,
userId: null,
};
token.value = '';
isLogin.value = false;
};
// 更新用户特定字段
const updateUserInfo = (field, value) => {
if (userInfo.value.hasOwnProperty(field)) {
userInfo.value[field] = value;
}
};
// 批量更新用户信息
const batchUpdateUserInfo = (updates) => {
if (updates && typeof updates === 'object') {
Object.keys(updates).forEach(key => {
if (userInfo.value.hasOwnProperty(key)) {
userInfo.value[key] = updates[key];
}
});
}
};
// 获取用户权限列表(如果有的话)
const getUserPermissions = computed(() => {
// 这里可以根据实际业务逻辑返回用户权限
return userInfo.value.permissions || [];
});
// 检查用户是否有特定权限
const hasPermission = (permission) => {
if (!isLoggedIn.value) return false;
return getUserPermissions.value.includes(permission);
};
return {
isLogin,
// 状态
userInfo,
userToken,
token,
isLogin,
platform,
currency,
kfTelCN,
kfTelHK,
wxLink,
lang,
setProfile,
clearProfile,
// 计算属性
isLoggedIn,
userAvatar,
userName,
getUserPermissions,
// 动作
setUserInfo,
setToken,
setLoginStatus,
login,
logout,
updateUserInfo,
batchUpdateUserInfo,
hasPermission,
};
},
{
persist: {
key: 'user-store', // 自定义存储键名
storage: {
getItem(key) {
return uni.getStorageSync(key);
try {
const storedData = uni.getStorageSync(key);
return storedData;
} catch (error) {
console.error('读取用户存储数据失败:', error);
return null;
}
},
setItem(key, value) {
uni.setStorageSync(key, value);
try {
uni.setStorageSync(key, value);
} catch (error) {
console.error('保存用户数据失败:', error);
}
},
},
serializer: {
deserialize: parse,
serialize: stringify,
deserialize: (data) => {
try {
return parse(data);
} catch (error) {
console.error('反序列化用户数据失败:', error);
return null;
}
},
serialize: (data) => {
try {
return stringify(data);
} catch (error) {
console.error('序列化用户数据失败:', error);
return '{}';
}
},
},
// 指定需要持久化的状态
paths: ['userInfo', 'token', 'isLogin', 'platform', 'currency', 'kfTelCN', 'kfTelHK', 'wxLink', 'lang'],
},
}
);
/*
页面内使用pinia
1、引用你定义的store实例
import { useUserStore } from '@/stores/user'
使用示例:
1. 在组件中导入
import { useUserStore } from '@/store/user.js'
2、实例化useUserStore
const user = useUserStore()
3、引入 storeToRefs 用于 给实例的属性创建refs,即响应式
import { storeToRefs } from 'pinia'
例如:const {count} = storeToRefs(user)
count.value 此时为响应式
4、修改state 方式共两种 如下
user.count++
4-1、
// 带自动补全 ✨
user.$patch({ count: counter.count + 1 })
$patch()可批量修改state的属性值
例如:
批量修改
const pathState = () => {
store.$patch({
user: { name: 'ks', age: 20 },
});
};
其他操作state的方法如下:
替换State
const replaceState = () => {
store.$state.user = { age: 20, name: 'eee', sex: 'women' };
};
重置state的值
const reset = () => {
store.$reset();
};
4-2、
// 或使用 action 代替
user.increment()
*/
2. 使用方式
const userStore = useUserStore();
// 获取计算属性
const { isLoggedIn, userName } = storeToRefs(userStore);
// 调用动作
userStore.login(userData, accessToken);
userStore.logout();
// 检查权限
if (userStore.hasPermission('admin')) {
// 执行管理员操作
}
*/