wlzboy
2025-10-18 b46065a201c09ce69f111806f2bda4a5f476bc4e
app/pages/mine/index.vue
@@ -1,5 +1,5 @@
<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
  <view class="mine-container">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="flex padding justify-between">
@@ -25,7 +25,7 @@
      </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>
@@ -42,6 +42,34 @@
        <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>
@@ -71,18 +99,22 @@
          </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
      }
    },
@@ -94,7 +126,79 @@
        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')
      },
@@ -140,13 +244,32 @@
  .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;
@@ -172,8 +295,26 @@
    }
    .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;
@@ -193,6 +334,60 @@
          }
        }
      }
      // 用户信息展示区域
      .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>