<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="mine-actions grid col-4 text-center">
|
<view class="action-item" @click="handleJiaoLiuQun">
|
<view class="iconfont icon-friendfill text-pink icon"></view>
|
<text class="text">交流群</text>
|
</view>
|
<view class="action-item" @click="handleBuilding">
|
<view class="iconfont icon-service text-blue icon"></view>
|
<text class="text">在线客服</text>
|
</view>
|
<view class="action-item" @click="handleBuilding">
|
<view class="iconfont icon-community text-mauve icon"></view>
|
<text class="text">反馈社区</text>
|
</view>
|
<view class="action-item" @click="handleBuilding">
|
<view class="iconfont icon-dianzan text-green icon"></view>
|
<text class="text">点赞我们</text>
|
</view>
|
</view>
|
|
<!-- 用户信息展示 -->
|
<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">{{ boundVehicle || '未绑定' }}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-label">App版本号：</view>
|
<view class="info-value">{{ version || '1.0.0' }}</view>
|
</view>
|
|
<!-- 绑定/解绑车辆操作 -->
|
<view class="vehicle-actions" v-if="boundVehicle && boundVehicle !== '未绑定'">
|
<button class="unbind-btn" @click="unbindVehicle">取消绑定车辆</button>
|
</view>
|
<view class="vehicle-actions" v-else>
|
<button class="bind-btn" @click="goToBindVehicle">绑定车辆</button>
|
</view>
|
</view>
|
|
<view class="menu-list">
|
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
<view class="menu-item-box">
|
<view class="iconfont icon-user menu-icon"></view>
|
<view>编辑资料</view>
|
</view>
|
</view>
|
<view class="list-cell list-cell-arrow" @click="handleHelp">
|
<view class="menu-item-box">
|
<view class="iconfont icon-help menu-icon"></view>
|
<view>常见问题</view>
|
</view>
|
</view>
|
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
<view class="menu-item-box">
|
<view class="iconfont icon-aixin menu-icon"></view>
|
<view>关于我们</view>
|
</view>
|
</view>
|
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
<view class="menu-item-box">
|
<view class="iconfont icon-setting menu-icon"></view>
|
<view>应用设置</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import storage from '@/utils/storage'
|
import { getUserProfile } from "@/api/system/user"
|
|
export default {
|
data() {
|
return {
|
name: this.$store.state.user.name,
|
phonenumber: '',
|
boundVehicle: '', // 模拟绑定的车辆信息
|
version: getApp().globalData.config.appInfo.version
|
}
|
},
|
computed: {
|
avatar() {
|
return this.$store.state.user.avatar
|
},
|
windowHeight() {
|
return uni.getSystemInfoSync().windowHeight - 50
|
}
|
},
|
onLoad() {
|
this.getUserInfo()
|
},
|
methods: {
|
// 获取用户信息
|
getUserInfo() {
|
getUserProfile().then(response => {
|
const user = response.data
|
this.name = user.userName
|
this.phonenumber = user.phonenumber
|
// 模拟绑定车辆信息，实际项目中应从用户信息或车辆接口获取
|
this.boundVehicle = '粤A12345'
|
}).catch(() => {
|
// 获取用户信息失败时使用默认值
|
this.name = this.$store.state.user.name || '未登录'
|
this.phonenumber = '未绑定'
|
this.boundVehicle = '未绑定'
|
})
|
},
|
|
// 跳转到绑定车辆页面
|
goToBindVehicle() {
|
this.$tab.navigateTo('/pages/bind-vehicle')
|
},
|
|
// 取消绑定车辆
|
unbindVehicle() {
|
this.$modal.confirm('是否取消绑定车辆？').then(() => {
|
// 这里可以调用API取消绑定车辆
|
this.boundVehicle = '未绑定'
|
this.$modal.showToast('取消绑定成功')
|
}).catch(() => {
|
// 用户取消操作
|
})
|
},
|
|
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/index')
|
})
|
})
|
},
|
handleHelp() {
|
this.$tab.navigateTo('/pages/mine/help/index')
|
},
|
handleAbout() {
|
this.$tab.navigateTo('/pages/mine/about/index')
|
},
|
handleJiaoLiuQun() {
|
this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
|
},
|
handleBuilding() {
|
this.$modal.showToast('模块建设中~')
|
}
|
}
|
}
|
</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+ */
|
}
|
|
.mine-actions {
|
margin: 15px 15px;
|
padding: 20px 0px;
|
border-radius: 8px;
|
background-color: white;
|
|
.action-item {
|
.icon {
|
font-size: 28px;
|
}
|
|
.text {
|
display: block;
|
font-size: 13px;
|
margin: 8px 0px;
|
}
|
}
|
}
|
|
// 用户信息展示区域
|
.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;
|
}
|
}
|
|
.vehicle-actions {
|
padding: 30rpx 0 10rpx 0;
|
text-align: center;
|
|
.bind-btn, .unbind-btn {
|
width: 80%;
|
height: 80rpx;
|
border-radius: 10rpx;
|
font-size: 32rpx;
|
}
|
|
.bind-btn {
|
background-color: #007AFF;
|
color: white;
|
}
|
|
.unbind-btn {
|
background-color: #ff4d4f;
|
color: white;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
