<template>
|
<view class="mine-container">
|
<!--顶部个人信息栏-->
|
<view class="header-section">
|
<view class="flex padding justify-between">
|
<view class="flex align-center">
|
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
<view class="iconfont icon-people text-gray icon"></view>
|
</view>
|
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
|
</image>
|
<view v-if="!name" @click="handleToLogin" class="login-tip">
|
点击登录
|
</view>
|
<view v-if="name" @click="handleToInfo" class="user-info">
|
<view class="u_title">
|
{{ name }}
|
</view>
|
</view>
|
</view>
|
<view @click="handleToInfo" class="flex align-center">
|
<text>个人信息</text>
|
<view class="iconfont icon-right"></view>
|
</view>
|
</view>
|
</view>
|
|
<scroll-view class="content-section" scroll-y="true">
|
<!-- 用户信息展示 -->
|
<view class="user-info-section">
|
<view class="info-item">
|
<view class="info-label">昵称：</view>
|
<view class="info-value">{{ name || '未登录' }}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-label">手机号码：</view>
|
<view class="info-value">{{ phonenumber || '未绑定' }}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-label">所属分公司：</view>
|
<view class="info-value">{{ deptName || '未设置' }}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-label">绑定车辆：</view>
|
<view class="info-value">{{ boundVehicle || '未绑定' }}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-label">App版本号：</view>
|
<view class="info-value">{{ version || '1.0.0' }}</view>
|
</view>
|
</view>
|
|
<view class="menu-list">
|
<!-- 绑定/解绑车辆 -->
|
<view class="list-cell list-cell-arrow" @click="handleVehicleBinding">
|
<view class="menu-item-box">
|
<view class="iconfont icon-car menu-icon"></view>
|
<view>{{ boundVehicle && boundVehicle !== '未绑定' ? '更换车辆' : '绑定车辆' }}</view>
|
</view>
|
</view>
|
|
<!-- 退出登录 -->
|
<view class="list-cell list-cell-arrow" @click="handleLogout">
|
<view class="menu-item-box">
|
<view class="iconfont icon-logout menu-icon text-red"></view>
|
<view class="text-red">退出登录</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import storage from '@/utils/storage'
|
import { getUserProfile } from "@/api/system/user"
|
import { getUserBoundVehicle, unbindVehicleFromUser } from '@/api/vehicle'
|
import { getSystemInfo } from '@/utils/common'
|
|
export default {
|
data() {
|
return {
|
name: this.$store.state.user.nickName,
|
phonenumber: '',
|
deptName: '', // 所属分公司
|
boundVehicle: '', // 绑定的车辆信息
|
boundVehicleId: null, // 绑定的车辆ID
|
version: getApp().globalData.config.appInfo.version
|
}
|
},
|
computed: {
|
avatar() {
|
return this.$store.state.user.avatar
|
},
|
windowHeight() {
|
return getSystemInfo().windowHeight - 50
|
}
|
},
|
onLoad() {
|
this.getUserInfo()
|
},
|
onShow() {
|
// 每次显示页面时刷新用户信息
|
this.getUserInfo()
|
},
|
methods: {
|
// 获取用户信息
|
getUserInfo() {
|
const userId = this.$store.state.user.userId
|
|
// 获取用户基本信息
|
getUserProfile().then(response => {
|
const user = response.data
|
this.name = user.nickName || user.userName // 优先使用昵称
|
this.phonenumber = user.phonenumber
|
this.deptName = user.dept ? user.dept.deptName : '未设置'
|
}).catch(() => {
|
// 获取用户信息失败时使用默认值
|
this.name = this.$store.state.user.nickName || '未登录'
|
this.phonenumber = '未绑定'
|
this.deptName = '未设置'
|
})
|
|
// 获取用户绑定的车辆信息
|
if (userId) {
|
getUserBoundVehicle(userId).then(response => {
|
if (response.code === 200 && response.data) {
|
const vehicle = response.data
|
this.boundVehicle = vehicle.vehicleNumber || '未知车牌'
|
this.boundVehicleId = vehicle.vehicleId
|
} else {
|
this.boundVehicle = '未绑定'
|
this.boundVehicleId = null
|
}
|
}).catch(() => {
|
this.boundVehicle = '未绑定'
|
this.boundVehicleId = null
|
})
|
}
|
},
|
|
// 处理车辆绑定操作
|
handleVehicleBinding() {
|
this.$tab.navigateTo('/pages/bind-vehicle')
|
},
|
|
handleToInfo() {
|
this.$tab.navigateTo('/pages/mine/info/index')
|
},
|
handleToEditInfo() {
|
this.$tab.navigateTo('/pages/mine/info/edit')
|
},
|
handleToSetting() {
|
this.$tab.navigateTo('/pages/mine/setting/index')
|
},
|
handleToLogin() {
|
this.$tab.reLaunch('/pages/login')
|
},
|
handleToAvatar() {
|
this.$tab.navigateTo('/pages/mine/avatar/index')
|
},
|
handleLogout() {
|
this.$modal.confirm('确定退出登录吗？').then(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
this.$tab.reLaunch('/pages/login')
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f5f6f7;
|
}
|
|
.mine-container {
|
width: 100%;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
// 隐藏滚动条但保持滚动功能
|
::-webkit-scrollbar {
|
display: none;
|
width: 0 !important;
|
height: 0 !important;
|
background: transparent;
|
}
|
|
// Firefox滚动条隐藏
|
* {
|
scrollbar-width: none; /* Firefox */
|
}
|
|
// IE/Edge滚动条隐藏
|
* {
|
-ms-overflow-style: none; /* IE 10+ */
|
}
|
|
.header-section {
|
padding: 15px 15px 45px 15px;
|
background-color: #3c96f3;
|
color: white;
|
flex-shrink: 0; // 防止收缩
|
|
.login-tip {
|
font-size: 18px;
|
margin-left: 10px;
|
}
|
|
.cu-avatar {
|
border: 2px solid #eaeaea;
|
|
.icon {
|
font-size: 40px;
|
}
|
}
|
|
.user-info {
|
margin-left: 15px;
|
|
.u_title {
|
font-size: 18px;
|
line-height: 30px;
|
}
|
}
|
}
|
|
.content-section {
|
flex: 1;
|
position: relative;
|
top: -50px;
|
// 隐藏滚动条但保持滚动功能
|
::-webkit-scrollbar {
|
display: none;
|
width: 0 !important;
|
height: 0 !important;
|
background: transparent;
|
}
|
|
// Firefox滚动条隐藏
|
* {
|
scrollbar-width: none; /* Firefox */
|
}
|
|
// IE/Edge滚动条隐藏
|
* {
|
-ms-overflow-style: none; /* IE 10+ */
|
}
|
|
// 用户信息展示区域
|
.user-info-section {
|
background-color: white;
|
border-radius: 8px;
|
padding: 20rpx 30rpx;
|
margin: 15rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
.info-item {
|
display: flex;
|
padding: 15rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.info-label {
|
font-size: 28rpx;
|
color: #666;
|
width: 180rpx;
|
flex-shrink: 0;
|
}
|
|
.info-value {
|
font-size: 28rpx;
|
color: #333;
|
flex: 1;
|
}
|
}
|
}
|
|
// 菜单列表样式
|
.menu-list {
|
background-color: white;
|
border-radius: 8px;
|
margin: 15rpx;
|
overflow: hidden;
|
|
.list-cell {
|
padding: 30rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
cursor: pointer;
|
transition: background-color 0.2s;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
&:active {
|
background-color: #f5f5f5;
|
}
|
|
.menu-item-box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.menu-icon {
|
font-size: 36rpx;
|
margin-right: 20rpx;
|
}
|
|
view {
|
flex: 1;
|
font-size: 32rpx;
|
color: #333;
|
}
|
|
.text-red {
|
color: #ff4d4f;
|
}
|
}
|
|
&.list-cell-arrow .menu-item-box::after {
|
content: '';
|
width: 16rpx;
|
height: 16rpx;
|
border-top: 2rpx solid #999;
|
border-right: 2rpx solid #999;
|
transform: rotate(45deg);
|
margin-left: 20rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
