| | |
| | | <template> |
| | | <view class="mine-container" :style="{height: `${windowHeight}px`}"> |
| | | <view class="mine-container"> |
| | | <!--顶部个人信息栏--> |
| | | <view class="header-section"> |
| | | <view class="flex padding justify-between"> |
| | |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="content-section"> |
| | | <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> |
| | |
| | | <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> |
| | | </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' |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | name: this.$store.state.user.name, |
| | | phonenumber: '', |
| | | boundVehicle: '', // 绑定的车辆信息 |
| | | boundVehicleId: null, // 绑定的车辆ID |
| | | version: getApp().globalData.config.appInfo.version |
| | | } |
| | | }, |
| | |
| | | return uni.getSystemInfoSync().windowHeight - 50 |
| | | } |
| | | }, |
| | | onLoad() { |
| | | this.getUserInfo() |
| | | }, |
| | | methods: { |
| | | // 获取用户信息 |
| | | getUserInfo() { |
| | | const userId = this.$store.state.user.userId |
| | | |
| | | // 获取用户基本信息 |
| | | getUserProfile().then(response => { |
| | | const user = response.data |
| | | this.name = user.userName |
| | | this.phonenumber = user.phonenumber |
| | | }).catch(() => { |
| | | // 获取用户信息失败时使用默认值 |
| | | this.name = this.$store.state.user.name || '未登录' |
| | | this.phonenumber = '未绑定' |
| | | }) |
| | | |
| | | // 获取用户绑定的车辆信息 |
| | | 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 |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | // 跳转到绑定车辆页面 |
| | | goToBindVehicle() { |
| | | this.$tab.navigateTo('/pages/bind-vehicle') |
| | | }, |
| | | |
| | | // 取消绑定车辆 |
| | | unbindVehicle() { |
| | | const userId = this.$store.state.user.userId |
| | | const vehicleId = this.boundVehicleId |
| | | |
| | | if (!userId || !vehicleId) { |
| | | this.$modal.showToast('无法获取绑定信息') |
| | | return |
| | | } |
| | | |
| | | this.$modal.confirm(`确认取消绑定车辆 ${this.boundVehicle} 吗?`).then(() => { |
| | | // 调用API取消绑定车辆 |
| | | unbindVehicleFromUser(userId, vehicleId).then(response => { |
| | | if (response.code === 200) { |
| | | this.boundVehicle = '未绑定' |
| | | this.boundVehicleId = null |
| | | this.$modal.showToast('取消绑定成功') |
| | | // 更新用户信息 |
| | | this.$store.dispatch('GetInfo') |
| | | } else { |
| | | this.$modal.showToast(response.msg || '取消绑定失败') |
| | | } |
| | | }).catch(error => { |
| | | console.error('取消绑定失败:', error) |
| | | this.$modal.showToast('取消绑定失败,请重试') |
| | | }) |
| | | }).catch(() => { |
| | | // 用户取消操作 |
| | | }) |
| | | }, |
| | | |
| | | handleToInfo() { |
| | | this.$tab.navigateTo('/pages/mine/info/index') |
| | | }, |
| | |
| | | |
| | | .mine-container { |
| | | width: 100%; |
| | | height: 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; |
| | |
| | | } |
| | | |
| | | .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; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 用户信息展示区域 |
| | | .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> |
| | | </style> |