初始化页面
This commit is contained in:
yzy committed
1 parent
2c6d011736
commit
c431afac2b
3 files changed
+238
-83
No files matched your search
@@ -17,6 +17,7 @@ export const updateNickname = (params) => {
|
|||||||
export const userLogout = (params) => {
|
export const userLogout = (params) => {
|
||||||
return post('/app-api/member/auth/logout', params)
|
return post('/app-api/member/auth/logout', params)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @desc 用户个人信息
|
* @desc 用户个人信息
|
||||||
*/
|
*/
|
||||||
|
|||||||
+237
-83
@@ -1,17 +1,46 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
|
import {
|
||||||
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
|
ref,
|
||||||
|
onMounted,
|
||||||
|
getCurrentInstance,
|
||||||
|
nextTick
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
onLoad,
|
||||||
|
onShow,
|
||||||
|
onReady,
|
||||||
|
onHide,
|
||||||
|
onPullDownRefresh
|
||||||
|
} from '@dcloudio/uni-app';
|
||||||
import CustomTabBar from '@/components/CustomTabBar.vue'
|
import CustomTabBar from '@/components/CustomTabBar.vue'
|
||||||
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js';
|
import {
|
||||||
|
getSystemSafeArea,
|
||||||
|
getSystemInfo,
|
||||||
|
isEmpty,
|
||||||
|
showToast,
|
||||||
|
showLoadingToast,
|
||||||
|
closeToast
|
||||||
|
} from '@/common/common.js';
|
||||||
import LoginPopup from '@/components/login.vue';
|
import LoginPopup from '@/components/login.vue';
|
||||||
import { getUserInfo } from './api.js';
|
import {
|
||||||
import { useUserStore } from '@/store/user.js';
|
getUserInfo
|
||||||
|
} from './api.js';
|
||||||
|
import {
|
||||||
|
useUserStore
|
||||||
|
} from '@/store/user.js';
|
||||||
|
|
||||||
import { useI18n } from 'vue-i18n';
|
import {
|
||||||
const { t, locale } = useI18n();
|
useI18n
|
||||||
|
} from 'vue-i18n';
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
locale
|
||||||
|
} = useI18n();
|
||||||
|
|
||||||
const props = defineProps(['status']);
|
const props = defineProps(['status']);
|
||||||
const { proxy } = getCurrentInstance();
|
const {
|
||||||
|
proxy
|
||||||
|
} = getCurrentInstance();
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
@@ -35,7 +64,37 @@ const toggleLoginPopup = () => {
|
|||||||
showLogin.value = !showLogin.value;
|
showLogin.value = !showLogin.value;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//用户信息
|
||||||
|
const userName = ref();
|
||||||
|
|
||||||
|
// 设备数据数组
|
||||||
|
const deviceList = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Sweekar Alpha',
|
||||||
|
level: 'Lv.5 Childhood',
|
||||||
|
battery: '92%',
|
||||||
|
bluetooth: 'ON',
|
||||||
|
isCurrent: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Little Beta',
|
||||||
|
level: 'Lv.1 Infancy',
|
||||||
|
battery: '92%',
|
||||||
|
bluetooth: 'ON',
|
||||||
|
isCurrent: false
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @desc 处理设备点击事件
|
||||||
|
*/
|
||||||
|
const handleDeviceClick = (clickedDeviceId) => {
|
||||||
|
deviceList.value.forEach(device => {
|
||||||
|
device.isCurrent = device.id === clickedDeviceId;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @desc 获取可视内容高度
|
* @desc 获取可视内容高度
|
||||||
@@ -59,9 +118,9 @@ const getUserInformation = async()=>{
|
|||||||
const res = await getUserInfo();
|
const res = await getUserInfo();
|
||||||
|
|
||||||
userData.value = res.data;
|
userData.value = res.data;
|
||||||
console.log('data',userData.value);
|
userStore.updateUserInfo('nickname', userData.value.nickname);
|
||||||
|
console.log('用户名', userStore.userName);
|
||||||
|
userName.value = userData.value.nickname;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -93,6 +152,7 @@ const toLoginPage = (productId) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
getUserInformation();
|
||||||
// 示例：在页面加载完成后自动显示登录弹窗
|
// 示例：在页面加载完成后自动显示登录弹窗
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// showLogin.value = true;
|
// showLogin.value = true;
|
||||||
@@ -104,7 +164,6 @@ onMounted(() => {
|
|||||||
const test = () => {
|
const test = () => {
|
||||||
console.log('登录数据', userStore.token);
|
console.log('登录数据', userStore.token);
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -112,89 +171,186 @@ const test = () =>{
|
|||||||
<!-- 页面内容区域 -->
|
<!-- 页面内容区域 -->
|
||||||
<view class="flex flex-col">
|
<view class="flex flex-col">
|
||||||
<!-- 个人页头部区域 -->
|
<!-- 个人页头部区域 -->
|
||||||
<view class="profile-header p-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
|
<view class="profile-header px-4 pt-4 bg-gradient-to-r from-blue-500 to-purple-600">
|
||||||
<view class="flex items-center">
|
<view class="flex items-center text-thme">
|
||||||
<image
|
<view
|
||||||
src="/static/images/avatar.png"
|
class="w-16 h-16 rounded-full border-2 border-theme border-solid mr-4 p-3 bg-[#ddd] overflow-hidden">
|
||||||
class="w-16 h-16 rounded-full border-2 border-white mr-4"
|
<!-- 直接使用原生 image 标签 -->
|
||||||
style="background-color: #ddd;"
|
<image src="/static/image/head.png" class="w-full h-full object-cover" @click="test()" />
|
||||||
@click="test()"
|
|
||||||
/>
|
|
||||||
<view class="flex-1">
|
|
||||||
<view class="font-bold text-lg">用户昵称</view>
|
|
||||||
<view class="text-sm opacity-80">ID: 123456789</view>
|
|
||||||
</view>
|
</view>
|
||||||
<button
|
|
||||||
class="bg-white text-blue-600 px-4 py-2 rounded-full text-sm font-medium"
|
|
||||||
@click="toLoginPage"
|
|
||||||
|
|
||||||
>
|
<view class="flex flex-col justify-center items-start gap-1">
|
||||||
{{ userStore.isLogin ? '退出登录' : '登录' }}
|
<view class="font-bold text-lg text-black">{{userName}}</view>
|
||||||
</button>
|
<view class="text-sm opacity-80 text-black">Sweekar Guardian since 2023</view>
|
||||||
|
<!-- 在线状态 -->
|
||||||
|
<view class="border-round-theme rounded-lg flex justify-center p-1 items-center">
|
||||||
|
<text class="text-[10px]">Online</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 功能区域分割线 -->
|
||||||
|
<uv-divider line-color="#333333" hairline="false"></uv-divider>
|
||||||
|
|
||||||
<!-- 功能列表 -->
|
<!-- 功能列表 -->
|
||||||
<view class="p-4">
|
<view class="p-4 flex flex-col">
|
||||||
<view class="bg-white rounded-xl shadow-sm p-4 mb-4">
|
<!-- MY DEVICES -->
|
||||||
<view class="font-semibold text-lg mb-3">个人中心</view>
|
<view class="flex flex-col p-1 gap-3">
|
||||||
|
<!-- title -->
|
||||||
<view class="space-y-3">
|
<view class="flex gap-1 justify-between">
|
||||||
<view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
|
<view class="flex gap-2 items-center">
|
||||||
<view class="flex items-center">
|
<text class="font-bold">|</text>
|
||||||
<view class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
|
<text class="text-sm font-bold">MY DEVICES</text>
|
||||||
<text class="text-blue-600 text-sm">👤</text>
|
|
||||||
</view>
|
</view>
|
||||||
<text>个人信息</text>
|
<text class="text-sm text-[#808080]">{{deviceList.length}} Active</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="text-gray-400 text-sm">></text>
|
<!-- 功能模块 -->
|
||||||
</view>
|
<view
|
||||||
|
v-for="(device, index) in deviceList"
|
||||||
<view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
|
:key="device.id"
|
||||||
<view class="flex items-center">
|
class="border-round-theme rounded-lg flex flex-col justify-center items-start p-4 gap-2 cursor-pointer"
|
||||||
<view class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
|
:class="device.isCurrent?'shadow-[4px_4px_1px_0_rgba(0,0,0,1)]':''"
|
||||||
<text class="text-green-600 text-sm">🔒</text>
|
@click="handleDeviceClick(device.id)"
|
||||||
</view>
|
|
||||||
<text>账户安全</text>
|
|
||||||
</view>
|
|
||||||
<text class="text-gray-400 text-sm">></text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
|
|
||||||
<view class="flex items-center">
|
|
||||||
<view class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
|
|
||||||
<text class="text-yellow-600 text-sm">💬</text>
|
|
||||||
</view>
|
|
||||||
<text>消息通知</text>
|
|
||||||
</view>
|
|
||||||
<text class="text-gray-400 text-sm">></text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="flex items-center justify-between p-3 border-b border-gray-100 last:border-0">
|
|
||||||
<view class="flex items-center">
|
|
||||||
<view class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
|
|
||||||
<text class="text-red-600 text-sm">⚙️</text>
|
|
||||||
</view>
|
|
||||||
<text>设置</text>
|
|
||||||
</view>
|
|
||||||
<text class="text-gray-400 text-sm">></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
|
||||||
<view class="mt-6">
|
|
||||||
<button
|
|
||||||
class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 rounded-xl font-medium"
|
|
||||||
@tap="toggleLoginPopup"
|
|
||||||
>
|
>
|
||||||
{{ userStore.isLogin ? '退出登录' : '立即登录' }}
|
<!-- 上半部分 -->
|
||||||
</button>
|
<view class="flex items-center gap-2 w-full">
|
||||||
|
<!-- 图标部分 -->
|
||||||
|
<view
|
||||||
|
class="border-round-theme bg-[#ddd] rounded-lg w-10 h-10 flex justify-center items-center">
|
||||||
|
<u-icon name="phone"></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 设备信息 -->
|
||||||
|
<view class="flex flex-col flex-1">
|
||||||
|
<text class="font-bold text-[16px] break-words">{{device.name}}</text>
|
||||||
|
<text class="text-xs text-[#808080]">{{device.level}}</text>
|
||||||
|
</view>
|
||||||
|
<!-- 电量和蓝牙 -->
|
||||||
|
<view class="flex">
|
||||||
|
<!-- tag -->
|
||||||
|
<view
|
||||||
|
v-if="device.isCurrent"
|
||||||
|
class="flex justify-center items-center border-round-theme bg-theme h-4 w-10 rounded-full ">
|
||||||
|
<text class="text-[8px] text-white">CURRENT</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="border-round-theme rounded-lg w-10 h-10 flex flex-col justify-center items-center mr-1">
|
||||||
|
<u-icon name="phone"></u-icon>
|
||||||
|
<text class="text-[8px]">{{device.battery}}</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="border-round-theme rounded-lg w-10 h-10 flex flex-col justify-center items-center mr-1">
|
||||||
|
<u-icon name="phone"></u-icon>
|
||||||
|
<text class="text-[8px]">{{device.bluetooth}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="w-full" v-if="device.isCurrent">
|
||||||
|
<view class="border-round-theme rounded-lg bg-theme flex justify-center items-center p-2 gap-1">
|
||||||
|
<u-icon name="list" color="#fff"></u-icon>
|
||||||
|
<text class="text-white text-sm">CONTROL CONSOLE</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 添加模块 -->
|
||||||
|
<view class="border border-dashed border-[#808080] rounded-lg flex justify-center items-center p-2 gap-2 cursor-pointer">
|
||||||
|
<uv-icon name="plus" color="#808080"></uv-icon>
|
||||||
|
<text class="text-[#808080]">Link New Sweekar</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- GENERAL -->
|
||||||
|
<view class="flex flex-col p-1 gap-3">
|
||||||
|
<!-- title -->
|
||||||
|
<view class="flex gap-1 justify-between">
|
||||||
|
<view class="flex gap-2 items-center">
|
||||||
|
<text class="font-bold">|</text>
|
||||||
|
<text class="text-sm font-bold">GENERAL</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 功能模块 -->
|
||||||
|
<view class="flex flex-col border border-round-theme rounded-lg p-4">
|
||||||
|
<view class="flex justify-between">
|
||||||
|
<!-- icon + name -->
|
||||||
|
<view class="flex gap-2">
|
||||||
|
<uv-icon name="account" size="20" bold="true"></uv-icon>
|
||||||
|
<text class="font-bold text-sm"> Account Info</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
|
||||||
|
</view>
|
||||||
|
<uv-divider line-color="#808080" hairline="false"></uv-divider>
|
||||||
|
<view class="flex justify-between">
|
||||||
|
<!-- icon + name -->
|
||||||
|
<view class="flex gap-2">
|
||||||
|
<uv-icon name="setting" size="20" bold="true"></uv-icon>
|
||||||
|
<text class="font-bold text-sm"> App Settings</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
|
||||||
|
</view>
|
||||||
|
<uv-divider line-color="#808080" hairline="false"></uv-divider>
|
||||||
|
<view class="flex justify-between">
|
||||||
|
<!-- icon + name -->
|
||||||
|
<view class="flex gap-2">
|
||||||
|
<uv-icon name="empty-permission" size="20" bold="true"></uv-icon>
|
||||||
|
<text class="font-bold text-sm"> Privacy & Data</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- SUPPORT -->
|
||||||
|
<view class="flex flex-col p-1 gap-3">
|
||||||
|
<!-- title -->
|
||||||
|
<view class="flex gap-1 justify-between">
|
||||||
|
<view class="flex gap-2 items-center">
|
||||||
|
<text class="font-bold">|</text>
|
||||||
|
<text class="text-sm font-bold">SUPPORT</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 功能模块 -->
|
||||||
|
<view class="flex flex-col border border-round-theme rounded-lg p-4">
|
||||||
|
<view class="flex justify-between">
|
||||||
|
<!-- icon + name -->
|
||||||
|
<view class="flex gap-2">
|
||||||
|
<uv-icon name="question-circle" size="20" bold="true"></uv-icon>
|
||||||
|
<text class="font-bold text-sm"> Help Center</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
|
||||||
|
</view>
|
||||||
|
<uv-divider line-color="#808080" hairline="false" ></uv-divider>
|
||||||
|
<view class="flex justify-between" @click="toLoginPage">
|
||||||
|
<!-- icon + name -->
|
||||||
|
<view class="flex gap-2">
|
||||||
|
<uv-icon name="lock" size="20" bold="true"></uv-icon>
|
||||||
|
<text class="font-bold text-sm"> {{ userStore.isLogin ? 'Log Out' : 'Log In' }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uv-icon name="arrow-right" size="20" bold="true"></uv-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
<CustomTabBar />
|
<CustomTabBar />
|
||||||
</view>
|
</view>
|
||||||
@@ -230,6 +386,4 @@ const test = () =>{
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Reference in new issue
Block a user