zhunong-h5/src/views/Profile.vue

<template>
  <div class="usremei-container">
    <!-- Add Toast component -->
    <Toast ref="toast" />
    <!-- 第一个白色背景板块 -->
    <div class="profile-card">
      
      <div class="info-row">
        <div class="avatar-section">
        <img src="@/assets/avart.png" class="avatar" alt="用户头像" />
      
        <div style="display: flex; flex-direction: column; align-items: flex-start;margin-left: 10px;color: #fff;">
          <span class="name">{{ userInfo.nickname }}</span>
          <span class="value">{{ userInfo.mobile }}</span>
        </div>
      </div>
      <div class="sign-btn" @click="goToSignin">
        <img src="@/assets/sign.png" style="width: 60px;height: 50px;" alt="签到" />
      </div>
      </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="handleRedFlagWithdraw">提现</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="handleRetirementWithdraw">提现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.txbt?userInfo.txbt:0 }}</div>
        </div>
        <div class="profit-left">
          <div class="profit-header">
            <span>党员薪资</span>
            <button class="profit-btn button-click-effect" @click="handlePartySalaryWithdraw">提现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.dyxz?userInfo.dyxz:0 }}</div>
        </div>
        <div class="profit-right">
          <div class="profit-header">
            <span>每日现金</span>
            <button class="profit-btn button-click-effect" @click="handleDailyCashWithdraw">提现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.dayred }}</div>
        </div>
        <div class="profit-left">
          <div class="profit-header">
            <span>医疗补贴</span>
            <button class="profit-btn button-click-effect" @click="handleMedicalWithdraw">提现</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" @click="handleOriginalSharesWithdraw">提现</button>
          </div>
          <div class="profit-amount">￥{{ userInfo.guquan }}</div>
        </div>
      </div>
    </div>

    <!-- 应用中心板块 -->
    <div class="app-center">
      <div class="section-title">
        <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('/order-list')">
          <img src="@/assets/224.png" alt="提现记录" />
          <span>提现记录</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/asset-center')">
          <img src="@/assets/225.png" alt="资金明细" />
          <span>资金明细</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/asset-center')">
          <img src="@/assets/226.png" alt="股权管理" />
          <span>股权管理</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/retirement-subsidy')">
          <img src="@/assets/227.png" alt="退休补贴" />
          <span>退休补贴</span>
        </div>
        <div class="function-item button-click-effect" @click="$router.push('/order-management')">
          <img src="@/assets/228.png" alt="订单管理" />
          <span>订单管理</span>
        </div>
        <!-- <div class="function-item button-click-effect" @click="$router.push('/lever-list')">
          <span>礼品<br/>福利</span>
        </div>
        <div class="function-item button-click-effect" @click="toAppDownload">
          <span>APP<br/>下载</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';
import Toast from '@/components/Toast.vue';

export default {
  name: 'UsreMei',
  components: {
    Toast
  },
  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();
        this.$refs.toast.show('套现成功', 'success');
        // 刷新用户信息
        await this.getUserInfo();
      } catch (error) {
        console.error('套现失败:', error);
        this.$refs.toast.show('套现失败，请重试', 'error');
      }
    },
    async handlePensionWithdraw() {
      try {
        await withdrawPension();
        this.$refs.toast.show('提现成功', 'success');
        // 刷新用户信息
        await this.getUserInfo();
      } catch (error) {
        console.error('提现失败:', error);
        this.$refs.toast.show('提现失败，请重试', 'error');
      }
    },
    handleLogout() {
      this.showConfirm = true;
    },
    cancelLogout() {
      this.showConfirm = false;
    },
    toAppDownload() {
      window.open(this.userInfo.link[1].value, '_blank');
    },
    async confirmLogout() {
      try {
        await logout();
        this.$refs.toast.show('退出成功', 'success');
        setTimeout(() => {
          
          // 清除本地存储的token等信息
          localStorage.removeItem('token');
          // 跳转到登录页
          this.$router.replace('/login');
        }, 2000);
      } catch (error) {
        this.$refs.toast.show('退出失败，请重试', 'error');
      } finally {
        this.showConfirm = false;
      }
    },
    // 红旗资产提现
    handleRedFlagWithdraw() {
      this.$router.push('/mention?type=1');
    },
    // 退休补贴提现
    handleRetirementWithdraw() {
      this.$router.push('/mention?type=2');
    },
    // 党员薪资提现
    handlePartySalaryWithdraw() {
      this.$router.push('/mention?type=3');
    },
    // 每日现金提现
    handleDailyCashWithdraw() {
      this.$router.push('/mention?type=4');
    },
    // 医疗补贴提现
    handleMedicalWithdraw() {
      this.$router.push('/mention?type=5');
    },
    // 原始股权提现
    handleOriginalSharesWithdraw() {
      this.$router.push('/mention?type=6');
    },
  }
}
</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 {
  margin-bottom: 20px;
  position: relative;
}

.avatar-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* position: absolute;
  top: -40px;
  left: 20px;  */
}

.avatar {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

.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: #fff;
  margin-top: 5px;
}

.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: #ea0a1c;
  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;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  padding: 5px;
}

.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: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
  background: #fff0e1;
  /* border-radius: 12px; */
}

.profit-left, .profit-right {
  padding: 10px;
  background: #fff0e1;
  border-radius: 8px;
}

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

.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 {
    gap: 8px;
    padding: 8px;
  }

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

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

.app-center {
  border-radius: 12px;
  margin-top: 15px;
}

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

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

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

.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 10px;
  /* background-color: #fff; */
  padding: 10px;
  border-radius: 12px;
  
}

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

.function-item span {
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}

/* 移动端适配补充 */
@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;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logout-btn {
  width: 60%;
  background-color: #fff;
  color: #000;
  border: none;
  border-radius: 20px;
  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: #cf0101;
  font-weight: bold;
}

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