From 4648a3bee638e9a99d2d80b66f8833b261a2db91 Mon Sep 17 00:00:00 2001
From: wlzboy <66905212@qq.com>
Date: 星期四, 25 九月 2025 22:39:24 +0800
Subject: [PATCH] feat:设计 app ui
---
app/pages/mine/index.vue | 170 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 163 insertions(+), 7 deletions(-)
diff --git a/app/pages/mine/index.vue b/app/pages/mine/index.vue
index 33c3a6e..e936762 100644
--- a/app/pages/mine/index.vue
+++ b/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 = '绮12345'
+ }).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>
\ No newline at end of file
--
Gitblit v1.9.1