初始化页面

This commit is contained in:
yzy committed 2026-01-20 16:10:29 +08:00
1 parent 2c6d011736
commit c431afac2b
3 files changed
+295 -140

No files matched your search

+1
View File
@@ -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 用户个人信息
*/ */
+294 -140
View File
@@ -1,110 +1,169 @@
<script setup> <script setup>
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue'; import {
import { onLoad, onShow, onReady, onHide, onPullDownRefresh } from '@dcloudio/uni-app'; ref,
import CustomTabBar from '@/components/CustomTabBar.vue' onMounted,
import { getSystemSafeArea, getSystemInfo, isEmpty, showToast, showLoadingToast, closeToast } from '@/common/common.js'; getCurrentInstance,
import LoginPopup from '@/components/login.vue'; nextTick
import { getUserInfo } from './api.js'; } from 'vue';
import { useUserStore } from '@/store/user.js'; import {
onLoad,
onShow,
onReady,
onHide,
onPullDownRefresh
} from '@dcloudio/uni-app';
import CustomTabBar from '@/components/CustomTabBar.vue'
import {
getSystemSafeArea,
getSystemInfo,
isEmpty,
showToast,
showLoadingToast,
closeToast
} from '@/common/common.js';
import LoginPopup from '@/components/login.vue';
import {
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();
const tabList = ref([]); //tab列表 const tabList = ref([]); //tab列表
const tabsIndex = ref(0); //当前选中的tab索引 const tabsIndex = ref(0); //当前选中的tab索引
// const modelTypeList = ref([]); // const modelTypeList = ref([]);
const tabsLeft = ref(0); //下划线移动的距离 const tabsLeft = ref(0); //下划线移动的距离
const finished = ref(false); //数据是否全部加载完成 const finished = ref(false); //数据是否全部加载完成
const windowWidth = ref(0); //tab元素的宽度 const windowWidth = ref(0); //tab元素的宽度
const orderRows = ref([]); //订单列表 const orderRows = ref([]); //订单列表
const showLogin = ref(false); //显示登录 const showLogin = ref(false); //显示登录
const triggered = ref(false); //是否下拉刷新状态,true为是 const triggered = ref(false); //是否下拉刷新状态,true为是
const loading = ref(false); // 添加loading状态 const loading = ref(false); // 添加loading状态
const productData = ref(); const productData = ref();
const scrollHeight = ref(0); //scroll-view滚动高度 const scrollHeight = ref(0); //scroll-view滚动高度
const pageView = ref({}); const pageView = ref({});
// 控制登录弹窗显示 // 控制登录弹窗显示
const toggleLoginPopup = () => { 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 获取可视内容高度
*/ */
const getContentHeight = (e) => { const getContentHeight = (e) => {
pageView.value = e; pageView.value = e;
}; };
/** /**
* @desc 跳转至详情页面 * @desc 跳转至详情页面
*/ */
const toDetailPage = (productId) => { const toDetailPage = (productId) => {
uni.navigateTo({ uni.navigateTo({
url: '/pages/product/detail', url: '/pages/product/detail',
}); });
}; };
const userData = ref(); const userData = ref();
//获取首页数据 //获取首页数据
const getUserInformation = async()=>{ 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;
}
onLoad(() => {
}
onLoad(()=>{
getUserInformation(); getUserInformation();
}); });
// 模拟数据 // 模拟数据
/** /**
* @desc 处理预订事件 * @desc 处理预订事件
*/ */
const handleBook = (productId) => { const handleBook = (productId) => {
// 这里可以添加预订逻辑,比如跳转到详情页 // 这里可以添加预订逻辑,比如跳转到详情页
uni.navigateTo({ uni.navigateTo({
url: `/pages/product/detail?id=${productId}`, url: `/pages/product/detail?id=${productId}`,
}); });
}; };
/** /**
* @desc 跳转至登录页面 * @desc 跳转至登录页面
*/ */
const toLoginPage = (productId) => { const toLoginPage = (productId) => {
userStore.logout() userStore.logout()
uni.navigateTo({ uni.navigateTo({
url: '/pages/login/index', url: '/pages/login/index',
}); });
}; };
onMounted(() => { onMounted(() => {
getUserInformation();
// 示例:在页面加载完成后自动显示登录弹窗 // 示例:在页面加载完成后自动显示登录弹窗
// setTimeout(() => { // setTimeout(() => {
// showLogin.value = true; // showLogin.value = true;
// }, 1000); // }, 1000);
}); });
// 测试缓存中的数据 // 测试缓存中的数据
const test = () =>{
console.log('登录数据',userStore.token);
}
const test = () => {
console.log('登录数据', userStore.token);
}
</script> </script>
<template> <template>
@@ -112,124 +171,219 @@ 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>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.u-count-down__text) { :deep(.u-count-down__text) {
color: #ab002d !important; color: #ab002d !important;
font-size: 13px !important; font-size: 13px !important;
} }
.navigation { .navigation {
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2;
} }
.navi-title-center { .navi-title-center {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.line { .line {
transition: 0.3s all; transition: 0.3s all;
} }
.search { .search {
:deep(.u-search) { :deep(.u-search) {
flex: 1; flex: 1;
} }
} }
.profile-header { .profile-header {
min-height: 200rpx; min-height: 200rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
</style> </style>
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB