Merge remote-tracking branch 'origin/master'

rk

2026-04-23 3696830fbaf2fd97d98020087abf20917e491bdc

 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;
            }
         }
      }
   }