From 3696830fbaf2fd97d98020087abf20917e491bdc Mon Sep 17 00:00:00 2001
From: rk <94314517@qq.com>
Date: 星期四, 23 四月 2026 20:06:35 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
app/pages/mine/mine.vue | 437 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 358 insertions(+), 79 deletions(-)
diff --git a/app/pages/mine/mine.vue b/app/pages/mine/mine.vue
index 123f636..fdb3a46 100644
--- a/app/pages/mine/mine.vue
+++ b/app/pages/mine/mine.vue
@@ -1,56 +1,143 @@
<template>
- <view class="index">
- <view class="index_list">
- <view class="index_list_item">
- <view class="index_list_item_info">
- <text>SHE浜嬩欢涓婃姤</text>
- <text>FAC/NM</text>
- </view>
- <image src="/static/bg_a.png" mode="widthFix"></image>
+ <view class="mine-page">
+ <view class="mine-page__nav" :style="{ paddingTop: statusBarHeight + 'px' }">
+ <view class="mine-page__nav-inner">
+ <text class="mine-page__nav-title">鎴戠殑</text>
</view>
- <view class="index_list_item">
- <view class="index_list_item_info">
- <text>璺岀粖婊戦闄╀笂鎶�</text>
- <text>TAG</text>
+ </view>
+
+ <scroll-view class="mine-page__body" scroll-y :style="bodyStyle">
+ <view class="mine-page__content">
+ <view class="mine-page__profile">
+ <image class="mine-page__avatar" src="/static/image/ic_pic@2x.png" mode="aspectFill"></image>
+ <view class="mine-page__profile-info">
+ <view class="mine-page__name-row">
+ <text class="mine-page__name">{{ currentProfile.name }}</text>
+ <view v-if="currentProfile.levelTag" class="mine-page__level-tag">
+ <!-- <text class="mine-page__level-dot"></text> -->
+ <image src="/static/image/ic_jiangpai@2x.png" mode="widthFix" class="mine-page__level-dot"></image>
+ <text class="mine-page__level-text">{{ currentProfile.levelTag }}</text>
+ </view>
+ </view>
+ <text class="mine-page__phone">{{ currentProfile.phone }}</text>
+ </view>
</view>
- <image src="/static/bg_b.png" mode="widthFix"></image>
+
+ <view class="income-card">
+ <view class="income-card__left">
+ <text class="income-card__label">绱浣ｉ噾(鍏�)</text>
+ <text class="income-card__value">{{ currentProfile.totalIncome }}</text>
+ </view>
+ <view class="income-card__right">
+ <view class="income-card__stat">
+ <text class="income-card__stat-label">寰呯粨绠�(鍏�)锛�</text>
+ <text class="income-card__stat-value">{{ currentProfile.pendingIncome }}</text>
+ </view>
+ <view class="income-card__stat">
+ <text class="income-card__stat-label">璁㈠崟鎬绘暟锛�</text>
+ <text class="income-card__stat-value">{{ currentProfile.orderCount }}</text>
+ </view>
+ </view>
+ </view>
+
+ <view class="menu-panel">
+ <view v-for="item in menuList" :key="item.title" class="menu-panel__item" @click="jump(item)">
+ <text class="menu-panel__title">{{ item.title }}</text>
+ <view class="menu-panel__right">
+ <template v-if="item.key === 'wallet'">
+ <text class="menu-panel__sub menu-panel__sub--muted">浣欓锛歿{ currentProfile.walletBalance }}</text>
+ </template>
+ <template v-else-if="item.key === 'driver' && !currentProfile.verified">
+ <text class="menu-panel__sub menu-panel__sub--danger">瀹屾垚璁よ瘉鍚庡嵆鍙帴鍗�</text>
+ </template>
+ <template v-else-if="item.key === 'driver' && currentProfile.verified">
+ <text class="menu-panel__sub menu-panel__sub--warning">瀹℃牳涓�</text>
+ <text class="menu-panel__sub menu-panel__sub--primary">宸茶璇�</text>
+ </template>
+ <template v-else-if="item.key === 'setting'">
+ <text class="menu-panel__sub menu-panel__sub--muted">褰撳墠鐗堟湰V1.0.0</text>
+ </template>
+ <view class="menu-panel__arrow">
+ <image src="/static/image/mine_ar2@2x.png" mode="widthFix"></image>
+ </view>
+ </view>
+ </view>
+ </view>
</view>
+ </scroll-view>
+
+ <view class="mine-page__footer">
+ <button class="mine-page__logout" hover-class="mine-page__logout--hover">閫�鍑虹櫥褰�</button>
</view>
</view>
</template>
<script>
- import { mapState } from 'vuex'
export default {
- computed: {
- ...mapState(['userInfo'])
- },
data() {
return {
- title: 'Hello'
+ statusBarHeight: 0,
+ navHeight: 0,
+ useVerifiedState: true,
+ menuList: [
+ { key: 'wallet', title: '鎴戠殑閽卞寘' },
+ { key: 'driver', title: '鍙告満璁よ瘉' },
+ { key: 'guide', title: '瑙勮寖椤荤煡' },
+ { key: 'help', title: '甯姪涓庡鏈�' },
+ { key: 'setting', title: '璁剧疆' }
+ ],
+ profileStates: {
+ guest: {
+ name: '姹ゅ瓙鏂�',
+ phone: '18166565677',
+ levelTag: '',
+ totalIncome: '-',
+ pendingIncome: '-',
+ orderCount: '-',
+ walletBalance: '楼0',
+ verified: false
+ },
+ verified: {
+ name: '姹ゅ瓙鏂�',
+ phone: '18166565677锛堢殩BD23189锛�',
+ levelTag: 'S绾�',
+ totalIncome: '8,314.90',
+ pendingIncome: '2000.00',
+ orderCount: '329',
+ walletBalance: '楼1500.00',
+ verified: true
+ }
+ }
+ }
+ },
+ computed: {
+ currentProfile() {
+ return this.useVerifiedState ? this.profileStates.verified : this.profileStates.guest
+ },
+ bodyStyle() {
+ const footerHeight = uni.upx2px(124)
+ return {
+ marginTop: this.navHeight + 'px',
+ height: `calc(100vh - ${this.navHeight + footerHeight}px)`
+ }
}
},
onLoad() {
-
+ const systemInfo = uni.getSystemInfoSync()
+ this.statusBarHeight = systemInfo.statusBarHeight || 0
+ this.navHeight = this.statusBarHeight + uni.upx2px(88)
},
methods: {
- jump(type) {
- switch (type) {
- case 1:
- uni.navigateTo({
- url: '/pages/reporting_she/reporting_she'
- })
- break;
- case 2:
- uni.navigateTo({
- url: '/pages/riskReporting/riskReporting'
- })
- break;
- case 3:
- uni.navigateTo({
- url: '/pages/report_dca/report_dca'
- })
- break;
+ jump(item) {
+ console.log(item)
+ if (item.key === 'setting') {
+ uni.navigateTo({
+ url: '/pages/settings/settings'
+ })
+ } else if (item.key === 'driver') {
+ uni.navigateTo({
+ url: '/pages/certification-details/certification-details'
+ })
}
}
}
@@ -58,53 +145,245 @@
</script>
<style lang="scss" scoped>
- .index {
- width: 100vw;
- padding: 30rpx;
+ .mine-page {
+ height: 100vh;
+ background: #f6f8fc;
+ overflow: hidden;
+
+ &__nav {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ z-index: 10;
+ background: #ffffff;
+ }
+
+ &__nav-inner {
+ height: 88rpx;
+ display: flex;
+ align-items: center;
+ padding: 0 26rpx;
+ }
+
+ &__nav-title {
+ font-size: 36rpx;
+ font-weight: 700;
+ color: #2b3139;
+ }
+
+ &__body {
+ box-sizing: border-box;
+ }
+
+ &__content {
+ padding: 28rpx 20rpx 20rpx;
+ }
+
+ &__profile {
+ display: flex;
+ align-items: center;
+ gap: 20rpx;
+ padding: 8rpx 0 24rpx;
+ }
+
+ &__avatar {
+ width: 92rpx;
+ height: 92rpx;
+ border-radius: 50%;
+ background: #e8f1ff;
+ flex-shrink: 0;
+ }
+
+ &__profile-info {
+ flex: 1;
+ min-width: 0;
+ }
+
+ &__name-row {
+ display: flex;
+ align-items: center;
+ gap: 12rpx;
+ }
+
+ &__name {
+ font-size: 40rpx;
+ font-weight: 700;
+ color: #2b3139;
+ }
+
+ &__level-tag {
+ display: flex;
+ align-items: center;
+ gap: 6rpx;
+ padding: 4rpx 10rpx;
+ border-radius: 999rpx;
+ background: linear-gradient(180deg, #ff9e68 0%, #ff7d34 100%);
+ }
+
+ &__level-dot {
+ width: 20rpx;
+ height: 24rpx;
+ }
+
+ &__level-text {
+ font-size: 22rpx;
+ font-weight: 700;
+ color: #ffffff;
+ }
+
+ &__phone {
+ display: block;
+ margin-top: 10rpx;
+ font-size: 28rpx;
+ color: #8f96a3;
+ }
+
+ &__footer {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 16rpx 0 calc(env(safe-area-inset-bottom) + 20rpx);
+ background: #f6f8fc;
+ display: flex;
+ justify-content: center;
+ }
+
+ &__logout {
+ width: 186rpx;
+ height: 70rpx;
+ line-height: 70rpx;
+ border-radius: 999rpx;
+ background: #ffffff;
+ border: 1rpx solid #d8dde5;
+ font-size: 28rpx;
+ font-weight: 500;
+ color: #7e8794;
+ padding: 0;
+
+ &::after {
+ border: 0;
+ }
+
+ &--hover {
+ opacity: 0.92;
+ }
+ }
+ }
+
+ .income-card {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ gap: 20rpx;
+ padding: 10rpx 30rpx 40rpx 30rpx;
box-sizing: border-box;
- height: calc(100vh - 44px - 50px);
- background: linear-gradient( 180deg, #B5D2FF 0%, #FFFFFF 100%);
- .index_list {
- width: 100%;
+ background-image: url('../../static/image/ming_bg@2x.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ overflow: hidden;
+
+ &__left,
+ &__right {
+ position: relative;
+ z-index: 1;
+ }
+
+ &__left {
+ flex: 1;
+ }
+
+ &__label,
+ &__stat-label,
+ &__stat-value {
+ font-size: 24rpx;
+ color: rgba(255, 255, 255, 0.78);
+ }
+
+ &__value {
+ display: block;
+ margin-top: 20rpx;
+ font-size: 52rpx;
+ line-height: 1;
+ font-weight: normal;
+ color: #ffffff;
+ }
+
+ &__right {
display: flex;
flex-direction: column;
- margin-top: 12rpx;
- .index_list_item {
+ align-items: flex-end;
+ justify-content: flex-end;
+ gap: 18rpx;
+ padding-top: 12rpx;
+ }
+
+ &__stat {
+ display: flex;
+ align-items: center;
+ gap: 10rpx;
+ }
+ }
+
+ .menu-panel {
+ margin-top: 20rpx;
+ border-radius: 22rpx;
+ background: #ffffff;
+ overflow: hidden;
+
+ &__item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 102rpx;
+ padding: 0 24rpx;
+ box-sizing: border-box;
+ border-bottom: 1rpx solid #eef1f5;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+
+ &__title {
+ font-size: 34rpx;
+ font-weight: 600;
+ color: #2b3139;
+ }
+
+ &__right {
+ display: flex;
+ align-items: flex-start;
+ gap: 10rpx;
+ }
+
+ &__sub {
+ font-size: 26rpx;
+ white-space: nowrap;
+
+ &--muted {
+ color: #b2b8c1;
+ }
+
+ &--danger {
+ color: #ff5a4f;
+ }
+
+ &--warning {
+ color: #ff7b38;
+ }
+
+ &--primary {
+ color: #2b7cff;
+ }
+ }
+
+ &__arrow {
+ width: 16rpx;
+ height: 28rpx;
+ image {
width: 100%;
- height: 200rpx;
- margin-bottom: 30rpx;
- position: relative;
- .index_list_item_info {
- width: 100%;
- height: 100%;
- padding: 0 48rpx;
- box-sizing: border-box;
- display: flex;
- justify-content: center;
- flex-direction: column;
- position: relative;
- z-index: 99;
- text {
- &:nth-child(1) {
- font-weight: bold;
- font-size: 34rpx;
- color: #FFFFFF;
- }
- &:nth-child(2) {
- font-weight: 400;
- font-size: 26rpx;
- color: rgba(255,255,255,0.6);
- margin-top: 10rpx;
- }
- }
- }
- image {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
}
}
}
--
Gitblit v1.9.3