焊接首页
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<view class="mine">
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card">
|
||||
<view class="user-info">
|
||||
<u-avatar :size="120" icon="account" bgColor="#e0e7ff"></u-avatar>
|
||||
<view class="user-detail">
|
||||
<text class="user-name">{{ userInfo?.PersonName || '未登录' }}</text>
|
||||
<text class="user-account">账号：{{ userInfo?.Account || '-' }}</text>
|
||||
<text class="user-company">{{ userInfo?.CompanyName || '暂无公司信息' }}</text>
|
||||
<text class="user-phone">{{ userInfo?.Telephone || '暂无手机号' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-button v-if="!token" size="large" shape="circle" @click="goLogin">
|
||||
立即登录
|
||||
</u-button>
|
||||
</view>
|
||||
|
||||
<!-- 项目信息 -->
|
||||
<view class="project-card" v-if="currentProject?.ProjectId">
|
||||
<view class="card-title">
|
||||
<u-icon name="home" :size="36" color="#2979ff"></u-icon>
|
||||
<text>当前项目</text>
|
||||
</view>
|
||||
<view class="project-info">
|
||||
<text class="project-name">{{ currentProject.ProjectName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" @click="handleMenuClick('profile')">
|
||||
<view class="menu-left">
|
||||
<u-icon name="setting" :size="40" color="#2979ff"></u-icon>
|
||||
<text>个人设置</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" :size="28" color="#ccc"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="handleMenuClick('password')">
|
||||
<view class="menu-left">
|
||||
<u-icon name="lock" :size="40" color="#2979ff"></u-icon>
|
||||
<text>修改密码</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" :size="28" color="#ccc"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="handleMenuClick('about')">
|
||||
<view class="menu-left">
|
||||
<u-icon name="info-circle" :size="40" color="#2979ff"></u-icon>
|
||||
<text>关于我们</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" :size="28" color="#ccc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view class="logout-btn" v-if="token">
|
||||
<u-button text="退出登录" @click="handleLogout"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed
|
||||
} from 'vue'
|
||||
import {
|
||||
useUserStore
|
||||
} from '@/store'
|
||||
import {
|
||||
storeToRefs
|
||||
} from 'pinia'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const {
|
||||
logout
|
||||
} = userStore
|
||||
const {
|
||||
userInfo,
|
||||
token,
|
||||
currentProject
|
||||
} = storeToRefs(userStore)
|
||||
|
||||
// 跳转登录
|
||||
const goLogin = () => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 切换项目
|
||||
const handleSwitchProject = () => {
|
||||
// TODO: 打开项目选择弹窗
|
||||
uni.showToast({
|
||||
title: '项目选择功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 菜单点击
|
||||
const handleMenuClick = (type) => {
|
||||
const menuMap = {
|
||||
profile: '个人设置',
|
||||
password: '修改密码',
|
||||
about: '关于我们'
|
||||
}
|
||||
uni.showToast({
|
||||
title: `${menuMap[type]}功能开发中`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
logout()
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine {
|
||||
min-height: 100vh;
|
||||
background: #f5f6f8;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
// 用户信息卡片
|
||||
.user-card {
|
||||
background: linear-gradient(135deg, #2979ff 0%, #6ba7ff 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
color: #ffffff;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.user-detail {
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.user-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.user-account,
|
||||
.user-company,
|
||||
.user-phone {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.85;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.user-account {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.user-company {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 项目信息卡片
|
||||
.project-card {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.u-icon {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.project-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.project-name {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 功能菜单
|
||||
.menu-list {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 0 32rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.u-icon {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
.logout-btn {
|
||||
margin-top: 48rpx;
|
||||
|
||||
.u-button {
|
||||
height: 88rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user