HomeLease/pages/profile/profile.vue

<template>
  <view class="profile-page">
    <image :src="commonEnum.FIRE_BACKGROUND" class="fire-background"></image>

    <!-- 头部用户信息 -->
    <view class="user-header">
      <view class="avatar">
        <text class="avatar-text">昵</text>
      </view>
      <view class="user-info">
        <view class="share-btn">
          <image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
          <text class="share-text">分享推广</text>
        </view>
      </view>
      <view class="user-details">
        <text class="user-name">昵称</text>
        <text class="user-id">123****8912</text>
        <view class="settings-icon" @click="gotoPage('/pages/set/set')">
          <image :src="commonEnum.SET" class="settings-img" mode="aspectFit" />
        </view>
      </view>
    </view>

    <!-- 财务摘要 -->
    <view class="financial-summary">
      <image :src="commonEnum.COIN_BACKGROUND" class="coin-background" mode="width"></image>
      <view class="main-amount">
        <text class="amount-number">18079.29</text>
        <text class="amount-label">可提现(元)</text>
      </view>
      <view class="action-buttons">
        <view class="action-btn income-expense-btn" @click="goToIncomeExpense">
          <text class="btn-text">收支明细 ></text>
        </view>
        <view class="action-btn withdraw-btn" @click="goToWithdraw">
          <text class="btn-text">立即提现 ></text>
        </view>
      </view>
      <view class="financial-stats">
        <view class="stat-item">
          <text class="stat-number">399.59</text>
          <text class="stat-label">待入账(元)</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">9.59</text>
          <text class="stat-label">提现中(元)</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">999.59</text>
          <text class="stat-label">已提现(元)</text>
        </view>
      </view>
    </view>

    <!-- 我的用户 -->
    <view class="my-users-section">
      <view class="section-header">
        <text class="section-title">我的用户</text>
        <view class="view-details" @click="goToUserList">
          <text class="details-text">查看详情 ></text>
        </view>
      </view>
      <view class="user-stats">
        <view class="stat-item">
          <text class="stat-number">30</text>
          <text class="stat-label">名下用户(个)</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">30</text>
          <text class="stat-label">租赁数量(个)</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">3000</text>
          <text class="stat-label">租赁金额(元)</text>
        </view>
      </view>
    </view>

    <!-- 其他功能 -->
    <view class="other-functions">
      <view class="section-header">
        <text class="section-title">其他功能</text>
      </view>
      <view class="function-grid">
        <view class="function-item" @click="goToAgentApply">
          <view class="function-icon">
            <image :src="commonEnum.REQUEST_AGENT" class="function-img" mode="aspectFit"></image>
          </view>
          <text class="function-text">申请代理</text>
        </view>
        <view class="function-item" @click="goToAgentBenefits">
          <view class="function-icon">
            <image :src="commonEnum.AGENCY_INTERESTS" class="function-img" mode="aspectFit"></image>
          </view>
          <text class="function-text">代理权益</text>
        </view>
        <view class="function-item" @click="goToCustomerService">
          <view class="function-icon">
            <image
              :src="commonEnum.ONLINE_CUSTOMER_SERVICE"
              class="function-img"
              mode="aspectFit"
            ></image>
          </view>
          <text class="function-text">在线客服</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { commonEnum } from '@/enum/commonEnum.js'

export default {
  name: 'ProfilePage',
  data() {
    return {
      commonEnum,
      userInfo: {
        name: '昵称',
        id: '123****8912',
      },
      financialData: {
        withdrawable: '18079.29',
        pending: '399.59',
        withdrawing: '9.59',
        withdrawn: '999.59',
      },
      userStats: {
        users: 30,
        leases: 30,
        amount: 3000,
      },
    }
  },
  methods: {
    gotoPage(url) {
      uni.navigateTo({ url })
    },
    goToAgentApply() {
      uni.navigateTo({
        url: '/pages/agents/agents',
      })
    },
    goToAgentBenefits() {
      uni.showToast({
        title: '代理权益',
        icon: 'none',
      })
    },
    goToCustomerService() {
      uni.showToast({
        title: '在线客服',
        icon: 'none',
      })
    },
    goToIncomeExpense() {
      uni.navigateTo({
        url: '/pages/cashFlow/cashFlow',
      })
    },
    goToWithdraw() {
      uni.navigateTo({
        url: '/pages/requestWithdrawal/requestWithdrawal',
      })
    },
    goToUserList() {
      uni.navigateTo({
        url: '/pages/useList/useList',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.profile-page {
  background: #f3f5f6;

  .fire-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 592rpx;
    opacity: 1;
    z-index: -1;
  }
}

// 用户头部
.user-header {
  padding: 40rpx 40rpx 40rpx 40rpx;
  margin: 270rpx 20rpx 20rpx 20rpx;
  border-radius: 20rpx;
  position: relative;
  background: #ffffff;

  .avatar {
    position: absolute;
    top: -80rpx; // 头像向上偏移，一半在容器外
    left: 40rpx;
    width: 160rpx;
    height: 160rpx;
    background: #817f7f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; // 确保头像在最上层

    .avatar-text {
      font-size: 60rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .user-info {
    display: flex;
    align-items: center;
    justify-content: flex-end; // 分享按钮靠右对齐
    margin-bottom: 30rpx;

    .share-btn {
      background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
      padding: 20rpx 30rpx;
      border-radius: 30rpx;
      display: flex;
      align-items: center;

      .share-img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }

      .share-text {
        font-size: 24rpx;
        color: #722b03;
      }
    }
  }

  .user-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .user-name {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #3d3d3d;
      margin-bottom: 10rpx;
    }

    .user-id {
      font-size: 28rpx;
      color: #817f7f;
    }

    .settings-icon {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      padding: 10rpx;

      .settings-img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}

// 财务摘要
.financial-summary {
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 54rpx;
  color: #fff;
  position: relative;
  top: -70rpx;
  overflow: hidden;
  //border: 1px red solid;

  .coin-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
  }

  .main-amount {
    margin-top: 30rpx;
    margin-bottom: 66rpx;
    position: relative;
    z-index: 2;

    .amount-number {
      display: block;
      font-size: 44rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      height: 60rpx;
    }

    .amount-label {
      font-size: 28rpx;
      opacity: 0.9;
    }
  }

  .action-buttons {
    position: absolute;
    top: 80rpx;
    right: 40rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    z-index: 2;

    .action-btn {
      padding: 10rpx 34rpx;
      border-radius: 30rpx;
      cursor: pointer;
      transition: all 0.3s ease;

      .btn-text {
        font-size: 24rpx;
      }
    }

    .income-expense-btn {
      .btn-text {
        color: #fff;
      }
    }

    .withdraw-btn {
      background: #fff;

      .btn-text {
        color: #f15a04;
      }
    }
  }

  .financial-stats {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;

    .stat-item {
      .stat-number {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 5rpx;
      }

      .stat-label {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}

// 我的用户
.my-users-section {
  position: relative;
  top: -70rpx;
  background: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 40rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .view-details {
      .details-text {
        font-size: 28rpx;
        color: #9e9e9e;
      }
    }
  }

  .user-stats {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .stat-number {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #3d3d3d;
        margin-bottom: 10rpx;
      }

      .stat-label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

// 其他功能
.other-functions {
  position: relative;
  top: -70rpx;
  background: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 40rpx;

  .section-header {
    margin-bottom: 30rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .function-grid {
    display: flex;
    justify-content: space-around;

    .function-item {
      text-align: center;
      flex: 1;

      .function-icon {
        width: 80rpx;
        height: 80rpx;
        background: #f5f5f5;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20rpx;

        .function-img {
          width: 50rpx;
          height: 50rpx;
        }
      }

      .function-text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}
</style>