zhunong-h5/src/views/Profile.vue

<template>
  <div class="usremei-container">
    <!-- 第一个白色背景板块 -->
    <div class="profile-card">
      <div class="avatar-section">
        <img src="@/assets/logo.png" class="avatar" alt="用户头像" />
      </div>
      <div class="info-row">
        <span class="name">{{ userInfo.nickname }}</span>
        <img src="@/assets/sign.png" class="sign-icon" alt="签到" @click="goToSignin" />
      </div>
      <div class="info-row">
        <span class="label">手机号码</span>
        <span class="value">{{ userInfo.mobile }}</span>
      </div>
      <div class="info-row">
        <span class="label">邀请码</span>
        <span class="value">{{ userInfo.salt }}</span>
      </div>
    </div>

    <!-- 第二个银行卡板块 -->
    <div class="bank-card">
      <div class="bank-content">
        <img src="@/assets/bank.png" class="bank-logo" alt="银行logo" />
        <div class="bank-text">
          <div class="bank-name">中国农业银行农泉联名账户</div>
          <div><span style="font-size:13px;">余额：</span><span class="balance">{{ userInfo.ukaedu }}</span></div>
        </div>
        <div class="button-group">
          <button class="action-btn button-click-effect" @click="goToCharges">缴纳税费</button>
          <button class="action-btn button-click-effect" @click="goToFinancial">提升到账额度</button>
        </div>
      </div>
    </div>

    <!-- 收益板块组 -->
    <div class="profit-section">
      <!-- 第一行 -->
      <div class="profit-block">
        <div class="profit-left">
          <div class="profit-header">
            <span>每日分红</span>
            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=3')">提现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.dayred }}</div>
        </div>
        <div class="profit-right">
          <div class="profit-header">
            <span>万泰股权</span>
            <button class="profit-btn button-click-effect" @click="handleCashOut">套现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.guquan }}</div>
        </div>
      </div>

      <!-- 第二行 -->
      <div class="profit-block">
        <div class="profit-left">
          <div class="profit-header">
            <span>财政补贴</span>
            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=1')">提现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.coins }}</div>
        </div>
        <div class="profit-right">
          <div class="profit-header">
            <span>养老金</span>
            <button class="profit-btn button-click-effect" @click="handlePensionWithdraw">提现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.xianjin }}</div>
        </div>
      </div>

      <!-- 第三行 -->
      <div class="profit-block">
        <div class="profit-left">
          <div class="profit-header">
            <span>万泰红利</span>
            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=2')">提现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.money }}</div>
        </div>
        <div class="profit-right">
          <div class="profit-header">
            <span>养生币</span>
            <button class="profit-btn button-click-effect">抢福</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.score }}</div>
        </div>
      </div>
    </div>

    <!-- 应用中心板块 -->
    <div class="app-center">
      <div class="section-title">
        <div class="title-line"></div>
        <span>应用中心</span>
      </div>
      <div class="function-grid">
        <div class="function-item button-click-effect" @click="$router.push('/user-center')">
          <img src="@/assets/221.png" alt="实名认证" />
          <span>实名认证</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/bank-card')">
          <img src="@/assets/222.png" alt="银行卡绑定" />
          <span>银行卡绑定</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/member')">
          <img src="@/assets/223.png" alt="我的团队" />
          <span>我的团队</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/asset-center')">
          <img src="@/assets/224.png" alt="资金明细" />
          <span>资金明细</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/order-list')">
          <img src="@/assets/225.png" alt="提现记录" />
          <span>提现记录</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/lever-list')">
          <img src="@/assets/226.png" alt="礼品福利" />
          <span>礼品福利</span>
        </div>
        <div class="function-item button-click-effect" @click="toAppDownload">
          <img src="@/assets/227.png" alt="APP下载" />
          <span>APP下载</span>
        </div>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-wrapper">
      <button class="logout-btn button-click-effect" @click="handleLogout">退出登录</button>
    </div>

    <!-- 自定义确认框 -->
    <div class="confirm-dialog" v-if="showConfirm">
      <div class="confirm-mask"></div>
      <div class="confirm-content">
        <div class="confirm-title">提示</div>
        <div class="confirm-message">确认退出登录吗？</div>
        <div class="confirm-btns">
          <button class="confirm-btn cancel" @click="cancelLogout">取消</button>
          <button class="confirm-btn confirm" @click="confirmLogout">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/home';
import { logout, cashOut, withdrawPension } from '@/api/profile';
export default {
  name: 'UsreMei',
  data() {
    return {
      userInfo: {},
      showConfirm: false
    }
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      const res = await getUserInfo();
      this.userInfo = res.data;
    },
    goToCharges() {
      this.$router.push('/charges');
    },
    goToFinancial() {
      this.$router.push('/financial');
    },
    goToSignin() {
      this.$router.push('/signin');
    },
    async handleCashOut() {
      try {
        await cashOut();
        alert('套现成功');
        // 刷新用户信息
        await this.getUserInfo();
      } catch (error) {
        console.error('套现失败:', error);
        alert('套现失败，请重试');
      }
    },
    async handlePensionWithdraw() {
      try {
        await withdrawPension();
        alert('提现成功');
        // 刷新用户信息
        await this.getUserInfo();
      } catch (error) {
        console.error('提现失败:', error);
        alert('提现失败，请重试');
      }
    },
    handleLogout() {
      this.showConfirm = true;
    },
    cancelLogout() {
      this.showConfirm = false;
    },
    toAppDownload() {
      window.open(this.userInfo.link[1].value, '_blank');
    },
    async confirmLogout() {
      try {
        await logout();
        alert('退出成功');
        // 清除本地存储的token等信息
        localStorage.removeItem('token');
        // 跳转到登录页
        this.$router.replace('/login');
      } catch (error) {
        alert('退出失败，请重试');
      } finally {
        this.showConfirm = false;
      }
    }
  }
}
</script>

<style scoped>
.usremei-container {
  min-height: 100vh;
  background-image: url('../assets/dabag.png');
  background-size: cover;
  background-position: center;
  padding: 20px;
  padding-top: 60px;
  padding-bottom: 80px; /* 为底部tab预留空间 */
  box-sizing: border-box; /* 确保padding不会增加容器高度 */
  overflow-y: auto; /* 允许内容滚动 */
  position: relative; /* 为fixed定位提供参考 */
}

.profile-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  padding-top: 60px;
}

.avatar-section {
  position: absolute;
  top: -40px; /* 让头像向上偏移，实现半超出效果 */
  left: 20px; /* 左侧距离 */
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff; /* 添加白色边框使头像更突出 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
}

.name {
  font-size: 18px;
  font-weight: bold;
}

.sign-icon {
  width: 50px;
  height: 40px;
}

.label {
  color: #666;
}

.value {
  color: #333;
}

.bank-card {
  background: url('../assets/gebg.png');
  background-size: cover;
  border-radius: 12px;
  padding: 20px;
}

.bank-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.bank-logo {
  width: 50px; /* 稍微缩小logo */
  height: 50px;
  flex-shrink: 0;
}

.bank-text {
  flex: 2; /* 给文字更多空间 */
  min-width: 0;
}

.bank-name {
  font-weight: bold;
  font-size: 10px; /* 稍微减小字号 */
  color: #333;
  margin-bottom: 10px;
  line-height: 1.2;
  white-space: normal; /* 允许换行 */
}

.balance {
  font-size: 18px;
  color: #85370d;
  font-weight: bold;  
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 减小按钮间距 */
  flex-shrink: 0;
  width: 90px; /* 固定按钮组宽度 */
}

.action-btn, .profit-btn, .logout-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}

.action-btn {
  background-color: #fb3f6c;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}

.action-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.profit-btn {
  background-color: #fb3f6c;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.profit-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.function-item:active {
  transform: scale(0.95);
  opacity: 0.8;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  20% {
    transform: scale(25, 25);
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

.action-btn::after,
.profit-btn::after,
.logout-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.action-btn:active::after,
.profit-btn:active::after,
.logout-btn:active::after {
  animation: ripple 0.4s ease-out;
}

/* 调整信息行的位置，让它不会被头像遮挡 */
.info-row:first-of-type {
  margin-top: 10px;
}

/* 移动端适配 */
@media screen and (max-width: 375px) {
  .usremei-container {
    padding: 15px;
    padding-top: 50px;
    padding-bottom: 70px;
  }

  .profile-card,
  .bank-card {
    padding: 15px;
  }

  .bank-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .bank-text {
    width: 100%;
    margin: 10px 0;
  }

  .button-group {
    width: 100%;
  }

  .action-btn {
    width: 100%;
  }
}

.profit-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
  margin-bottom: 15px; /* 底部添加间距 */
}

.profit-block {
  display: flex;
  gap: 15px;
  background: url('../assets/neibg.png');
  background-size: cover;
  border-radius: 12px;
  padding: 6px;
}

.profit-left, .profit-right {
  flex: 1;
  padding: 10px;
  position: relative; /* 为分隔线定位做准备 */
}

/* 添加分隔线 */
.profit-block:not(:first-child) .profit-left::after {
  content: '';
  position: absolute;
  right: -7.5px; /* 居中放置，gap的一半 */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background-color: #85370d;
}

.profit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 10px; */
}

.profit-header span {
  color: #85370d;
  font-size: 14px;
}

.profit-amount {
  font-size: 20px;
  font-weight: bold;
  color: #85370d;
}

/* 移动端适配 */
@media screen and (max-width: 375px) {
  .profit-block {
    flex-direction: column;
    gap: 10px;
    padding: 6px;
  }

  .profit-left, .profit-right {
    padding: 8px;
  }

  .profit-amount {
    font-size: 18px;
  }
}

.app-center {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-top: 15px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.title-line {
  width: 2px;
  height: 16px;
  background-color: #ff6b00;
}

.section-title span {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 10px;
}

.function-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.function-item span {
  font-size: 12px;
  color: #333;
  text-align: center;
}

/* 移动端适配补充 */
@media screen and (max-width: 375px) {
  .app-center {
    padding: 15px;
  }

  .function-grid {
    gap: 15px 8px;
  }

  .function-item img {
    width: 24px;
    height: 24px;
  }

  .function-item span {
    font-size: 11px;
  }
}

.logout-wrapper {
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 0 20px;
}

.logout-btn {
  width: 100%;
  background-color: #fb3f6c;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 0;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.logout-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 移动端适配补充 */
@media screen and (max-width: 375px) {
  .logout-btn {
    padding: 10px 0;
    font-size: 14px;
  }
}

.button-click-effect {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s !important;
}

.button-click-effect:active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* 确认框样式 */
.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.confirm-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.confirm-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 300px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.confirm-title {
  padding: 15px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}

.confirm-message {
  padding: 20px 15px;
  text-align: center;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.confirm-btns {
  display: flex;
  border-top: 1px solid #eee;
}

.confirm-btn {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  background: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.confirm-btn.cancel {
  color: #666;
  border-right: 1px solid #eee;
}

.confirm-btn.confirm {
  color: #fb3f6c;
  font-weight: bold;
}

.confirm-btn:active {
  opacity: 0.8;
  background: #f5f5f5;
}
</style>