feat:设计 app ui

wlzboy

2025-09-25 4648a3bee638e9a99d2d80b66f8833b261a2db91

 app/pages/mine/info/index.vue

@@ -1,13 +1,23 @@
<template>
  <view class="container">
    <uni-list>
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="用户名" :rightText="user.userName" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'location-filled'}" title="绑定车辆" :rightText="boundVehicle || '未绑定'" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'info-filled'}" title="App版本号" :rightText="version" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
    </uni-list>
    
    <!-- 绑定/解绑车辆操作 -->
    <view class="vehicle-actions" v-if="boundVehicle">
      <button class="unbind-btn" @click="unbindVehicle">取消绑定车辆</button>
    </view>
    <view class="vehicle-actions" v-else>
      <button class="bind-btn" @click="goToBindVehicle">绑定车辆</button>
    </view>
  </view>
</template>

@@ -19,7 +29,9 @@
      return {
        user: {},
        roleGroup: "",
        postGroup: ""
        postGroup: "",
        boundVehicle: "", // 模拟绑定的车辆信息
        version: getApp().globalData.config.appInfo.version || "1.0.0" // App版本号
      }
    },
    onLoad() {
@@ -32,6 +44,22 @@
          this.roleGroup = response.roleGroup
          this.postGroup = response.postGroup
        })
      },
      
      // 跳转到绑定车辆页面
      goToBindVehicle() {
        this.$tab.navigateTo('/pages/bind-vehicle')
      },
      
      // 取消绑定车辆
      unbindVehicle() {
        this.$modal.confirm('是否取消绑定车辆？').then(() => {
          // 这里可以调用API取消绑定车辆
          this.boundVehicle = ""
          this.$modal.showToast('取消绑定成功')
        }).catch(() => {
          // 用户取消操作
        })
      }
    }
  }
@@ -41,4 +69,26 @@
  page {
    background-color: #ffffff;
  }
</style>
  
  .vehicle-actions {
    padding: 30rpx;
    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>