feat:设计 app ui

wlzboy

2025-09-25 4648a3bee638e9a99d2d80b66f8833b261a2db91

 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,20 @@
          </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
      }
    },
@@ -94,7 +124,42 @@
        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')
      },
@@ -140,13 +205,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 +256,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 +295,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>