yizhizan-h5/pages/my/VIP/benefits.vue

<template>
  <view class="benefits-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-content">
        <view class="nav-left" @click="goBack">
          <u-icon name="arrow-leftward" color="rgba(255, 255, 255, 1)" size="42"></u-icon>
        </view>
        <view class="nav-title">我的权益</view>
        <view class="nav-right"></view>
      </view>
    </view>

    <!-- 当前会员状态卡片 -->
    <view class="membership-card">
      <view class="card-content">
        <view class="card-left">
          <view class="card-title">我的权益</view>
          <view class="card-subtitle">常规版 剩余5天到期</view>
        </view>

        <view class="card-right">
          <view class="benefit-item">
            <view class="benefit-label">查看权益</view>
            <view class="benefit-count">10/50</view>
          </view>
          <view class="benefit-item">
            <view class="benefit-label">沟通权益</view>
            <view class="benefit-count">10/50</view>
          </view>
          <view class="benefit-item">
            <view class="benefit-label">普通职位</view>
            <view class="benefit-count">10/50</view>
          </view>
          <view class="benefit-item">
            <view class="benefit-label">急聘职位</view>
            <view class="benefit-count">10/50</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 购买VIP享受更多权益 -->
    <view class="benefits-section">
      <!-- 权益对比表格 -->
      <view class="benefits-table">
        <view class="section-title">购买VIP, 享受更多权益</view>
        <!-- 表头 -->
        <view class="table-header">
          <view class="header-cell benefit-type">权益类型</view>
          <view class="header-cell basic">基础权益</view>
          <view class="header-cell regular active">
            <!-- <view class="plan-tag">生效中</view> -->
            <view class="plan-name">常规版</view>
            <view class="plan-expire">剩余5天到期</view>
          </view>
          <view class="header-cell vip">VIP版</view>
          <view class="header-cell flagship recommended">
            <!-- <view class="plan-tag">推荐</view> -->
            <view class="plan-name">旗舰版</view>
          </view>
        </view>

        <!-- 表格内容 -->
        <view class="table-row">
          <view class="row-cell benefit-type">在线普通职位</view>
          <view class="row-cell basic">10个</view>
          <view class="row-cell regular">35个</view>
          <view class="row-cell vip">45个</view>
          <view class="row-cell flagship">不限</view>
        </view>

        <view class="table-row">
          <view class="row-cell benefit-type">在线急聘职位</view>
          <view class="row-cell basic">0个</view>
          <view class="row-cell regular">5个</view>
          <view class="row-cell vip">15个</view>
          <view class="row-cell flagship">50个</view>
        </view>

        <view class="table-row">
          <view class="row-cell benefit-type">每日查看总数</view>
          <view class="row-cell basic">20个</view>
          <view class="row-cell regular">50个</view>
          <view class="row-cell vip">不限</view>
          <view class="row-cell flagship">不限</view>
        </view>

        <view class="table-row">
          <view class="row-cell benefit-type">每日沟通总数</view>
          <view class="row-cell basic">5个</view>
          <view class="row-cell regular">20个</view>
          <view class="row-cell vip">50个</view>
          <view class="row-cell flagship">100个</view>
        </view>

        <view class="table-row">
          <view class="row-cell benefit-type">查看沟通范围</view>
          <view class="row-cell basic">仅普通职位</view>
          <view class="row-cell regular">仅普通职位</view>
          <view class="row-cell vip">不限</view>
          <view class="row-cell flagship">不限</view>
        </view>

        <view class="table-row price-row">
          <view class="row-cell benefit-type">价格</view>
          <view class="row-cell basic">免费</view>
          <view class="row-cell regular">¥599/年</view>
          <view class="row-cell vip">¥1599/年</view>
          <view class="row-cell flagship">¥2599/年</view>
        </view>
      </view>

      <!-- 说明文字 -->
      <view class="notes">
        <view class="note-item">
          <text class="note-number">1.</text>
          <text class="note-text">基础&常规权益中,查看和开聊权限仅限普通职位使用</text>
        </view>
        <view class="note-item">
          <text class="note-number">2.</text>
          <text class="note-text">在常规版本体验期中购买VIP及以上版本体验卡将会立即失效</text>
        </view>
        <view class="note-item">
          <text class="note-number">3.</text>
          <text class="note-text">你可以直接购买VIP,也可以</text>
          <text class="note-link" @click="viewAllBenefits">查看全部权益包</text>
          <text class="note-text">进行购买</text>
        </view>
        <view class="note-item">
          <text class="note-number">4.</text>
          <text class="note-text">如有问题,请联系我的客服</text>
        </view>
      </view>
    </view>

    <!-- 升级VIP按钮 -->
    <view class="upgrade-button" @click="showPaymentModal">
      升级VIP
    </view>

    <!-- 支付弹窗 -->
    <u-popup v-model="showPayment" mode="bottom" border-radius="42" height="auto" :safe-area-inset-bottom="true">
      <view class="payment-picker">
        <view class="picker-header">
          <text class="picker-title">选择会员版本</text>
        </view>
        
        <view class="picker-content">
          <view 
            class="plan-option" 
            :class="{ active: selectedPlan === 'regular' }"
            @click="selectPlan('regular')"
          >
            <view class="option-left">
              <view class="radio-btn" :class="{ checked: selectedPlan === 'regular' }">
                <u-icon v-if="selectedPlan === 'regular'" name="checkmark" color="#ffffff" size="28"></u-icon>
              </view>
              <text class="option-text">常规版</text>
              <view class="price-tag">
                <text>¥599</text>
              </view>
            </view>
          </view>

          <view 
            class="plan-option" 
            :class="{ active: selectedPlan === 'vip' }"
            @click="selectPlan('vip')"
          >
            <view class="option-left">
              <view class="radio-btn" :class="{ checked: selectedPlan === 'vip' }">
                <u-icon v-if="selectedPlan === 'vip'" name="checkmark" color="#ffffff" size="28"></u-icon>
              </view>
              <text class="option-text">VIP版</text>
              <view class="price-tag">
                <text>¥1599</text>
              </view>
            </view>
          </view>

          <view 
            class="plan-option" 
            :class="{ active: selectedPlan === 'flagship' }"
            @click="selectPlan('flagship')"
          >
            <view class="option-left">
              <view class="radio-btn" :class="{ checked: selectedPlan === 'flagship' }">
                <u-icon v-if="selectedPlan === 'flagship'" name="checkmark" color="#ffffff" size="28"></u-icon>
              </view>
              <text class="option-text">旗舰版</text>
              <view class="price-tag">
                <text>¥2599</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 支付按钮 -->
        <view class="payment-button" @click="confirmPayment">
          <text>确认支付 ¥{{ getSelectedPrice() }}</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前会员信息
      currentPlan: 'regular',
      remainingDays: 5,
      // 权益使用情况
      benefits: {
        view: { used: 10, total: 50 },
        communicate: { used: 10, total: 50 },
        regularJobs: { used: 10, total: 50 },
        urgentJobs: { used: 10, total: 50 }
      },
      // 支付弹窗
      showPayment: false,
      selectedPlan: 'regular',
      planPrices: {
        regular: 599,
        vip: 1599,
        flagship: 2599
      }
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 查看全部权益包
    viewAllBenefits() {
      uni.showToast({
        title: '查看全部权益包',
        icon: 'none'
      })
    },
    
    // 显示支付弹窗
    showPaymentModal() {
      this.showPayment = true
    },
    
    // 选择会员计划
    selectPlan(plan) {
      this.selectedPlan = plan
    },
    
    // 获取选中计划的价格
    getSelectedPrice() {
      return this.planPrices[this.selectedPlan]
    },
    
    // 确认支付
    confirmPayment() {
      uni.showToast({
        title: `支付¥${this.getSelectedPrice()}成功`,
        icon: 'success'
      })
      this.showPayment = false
    }
  }
}
</script>

<style lang="scss" scoped>
.benefits-page {
  min-height: 100vh;
  background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 80%));
  background-size: 100% 40%;
  background-repeat: no-repeat;
  padding-top: 148rpx;
}

// 顶部导航栏
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 32rpx;
    margin-top: 44rpx; // 状态栏高度
    
    .nav-left, .nav-right {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
    }
  }
}

// 当前会员状态卡片
.membership-card {
  background: linear-gradient(66.73deg, rgba(255, 160, 162, 1),rgba(255, 203, 204.5, 0.3) 49%,rgba(255, 181.5, 183.25, 0.56) 100%);
  border-radius: 20rpx;
  padding: 32rpx;
  margin: 0 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 182, 193, 0.3);
  
  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    .card-left {
      flex: 1;
      
      .card-title {
        color: rgba(255, 255, 255, 1);
        font-family: DM Sans;
        font-size: 48rpx;
        font-weight: 700;
        line-height: 60rpx;
        letter-spacing: 0px;
        text-align: left;
        margin-bottom: 8rpx;
      }
      
      .card-subtitle {
        color: rgba(255, 255, 255, 1);
        font-family: DM Sans;
        font-size: 26rpx;
        font-weight: 400;
        line-height: 32rpx;
        letter-spacing: 0%;
        text-align: left;
      }
    }
    
    .card-right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 12rpx;
      background: radial-gradient(184.79% 115.97% at 92% 113.99999999999999%,rgba(255, 102, 0, 0.35),rgba(255, 65, 86, 1) 100%);
      gap: 16rpx;
      padding: 14rpx 38rpx;
      
      .benefit-item {
        text-align: center;
        
        .benefit-label {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 32rpx;
            letter-spacing: 0%;
            text-align: left;
            margin-bottom: 8rpx;
        }
        
        .benefit-count {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 700;
            line-height: 32rpx;
            letter-spacing: 0%;
            text-align: left;
        }
      }
    }
  }
}

// 权益对比区域
.benefits-section {
  margin: 20rpx 40rpx;
  
  .section-title {
    color: rgba(23, 23, 37, 1);
    font-family: DM Sans;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 44rpx;
    letter-spacing: 0.5%;
    text-align: left;
    margin-bottom: 20rpx;
  }
}

// 权益对比表格
.benefits-table {
  background: #fff;
  border-radius: 16rpx;
  padding: 26rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  
  .table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    background: #f8f9fa;
    
    .header-cell {
      padding: 24rpx 12rpx;
      color: rgba(23, 23, 37, 1);
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 26rpx;
      letter-spacing: 0.5%;
      text-align: center;
      position: relative;
      border-right: 1rpx solid #e9ecef;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      &:last-child {
        border-right: none;
      }
      
      &.benefit-type {
        color: rgba(23, 23, 37, 1);
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 26rpx;
        letter-spacing: 0.5%;
        text-align: center;
      }
      
      &.basic {
        background: rgba(246, 246, 246, 1);
      }
      
      &.active {
        background: rgba(246, 246, 246, 1);
        color: #1976d2;
      }
      
      &.vip {
        background: rgba(255, 235, 235, 1);
      }
      
      &.recommended {
        background: rgba(254, 238, 209, 1);
        color: #f57c00;
      }
      
      .plan-tag {
        position: absolute;
        top: 8rpx;
        right: 8rpx;
        background: #ff4444;
        color: #fff;
        font-size: 20rpx;
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
      }
      
      .plan-name {
        font-size: 24rpx;
        font-weight: 600;
        margin-bottom: 4rpx;
      }
      
      .plan-expire {
        font-size: 16rpx;
        color: #666;
      }
    }
  }
  
  .table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    border-bottom: 1rpx solid #e9ecef;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.price-row {
      background: #f8f9fa;
      font-weight: 600;
    }
    
    .row-cell {
      padding: 24rpx 12rpx;
      font-size: 16rpx;
      text-align: center;
      border-right: 1rpx solid #e9ecef;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:last-child {
        border-right: none;
      }
      
      &.benefit-type {
        text-align: center;
        color: rgba(23, 23, 37, 1);
        font-weight: 500;
        align-items: center;
        justify-content: center;
        background: rgba(246, 246, 246, 1);
      }
      
      &.basic {
        color: #666;
        background: rgba(246, 246, 246, 1);
      }
      
      &.regular {
        color: #1976d2;
        font-weight: 600;
        background: rgba(246, 246, 246, 1);
      }
      
      &.vip {
        color: #7b1fa2;
        font-weight: 600;
        background: rgba(255, 235, 235, 1);
      }
      
      &.flagship {
        color: #f57c00;
        font-weight: 600;
        background: rgba(254, 238, 209, 1);
      }
    }
  }
}

// 说明文字
.notes {
  margin-top: 32rpx;
  
  .note-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;
    font-size: 26rpx;
    line-height: 1.5;
    gap: 8rpx;
    
    .note-number , .note-text {
        color: rgba(102, 102, 102, 1);
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 26rpx;
        letter-spacing: 0.5%;
        text-align: left;
    }
    
    .note-link {
      color: #1976d2;
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 26rpx;
      letter-spacing: 0.5%;
      text-decoration: underline;
    }
  }
}

// 升级VIP按钮
.upgrade-button {
  position: fixed;
  bottom: 32rpx;
  left: 32rpx;
  right: 32rpx;
  height: 88rpx;
  background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 8rpx 24rpx rgba(25, 118, 210, 0.3);
}

// 支付弹窗样式 - 仿照 tagManage 页面
.payment-picker {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}

.picker-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 40rpx 20rpx;
  border-bottom: 1rpx solid #F2F2F2;
  position: relative;

  .picker-title {
    color: rgba(34, 37, 42, 1);
    font-family: DM Sans;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0px;
    text-align: center;
  }
}

.picker-content {
  padding: 32rpx;
}

.plan-option {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16rpx 28rpx;
  box-sizing: border-box;
  border: 1px solid rgba(227, 231, 236, 1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 32rpx;

  &:active {
    background-color: #F9F9F9;
  }

  &.active {
    border-color: #007AFF;
    background: #F0F9FF;
  }

  .option-left {
    display: flex;
    align-items: center;
    flex: 1;

    .radio-btn {
      width: 40rpx;
      height: 40rpx;
      border: 2rpx solid #E5E5EA;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
      background: #fff;
      transition: all 0.2s;

      &.checked {
        border-color: #007AFF;
        background: #007AFF;
      }
    }

    .option-text {
      font-size: 28rpx;
      color: rgba(29, 33, 41, 1);
      font-weight: 400;
      flex: 1;
    }

    .price-tag {
      background: rgba(153, 196, 250, 0.4);
      border-radius: 8rpx;
      padding: 4rpx 12rpx;

      text {
        font-size: 24rpx;
        line-height: 24rpx;
        color: rgba(1, 107, 246, 1);
        font-weight: 500;
      }
    }
  }
}

.picker-content :last-child {
  margin-bottom: 0rpx;
}

.payment-button {
  width: 90%;
  height: 88rpx;
  background: linear-gradient(90deg, #007AFF 0%, #42a5f5 100%);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);

  text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
  }
}
</style>