novel-app/RuoYi-App/pages/vip/index.vue

<template>
  <view class="vip-page">
    <!-- 会员状态卡片 -->
    <view class="vip-card" :class="{'active': isVIP}">
      <view class="card-header">
        <text class="title">{{ isVIP ? `超级会员 · 有效期至${expireDate}` : '立即开通会员' }}</text>
        <text v-if="!isVIP" class="tag">限时6折</text>
      </view>
      
      <view class="privileges">
        <view v-for="(item, index) in privileges" :key="index" class="privilege-item">
          <uni-icons type="checkmark" size="16" color="#fff"></uni-icons>
          <text>{{ item }}</text>
        </view>
      </view>
      
      <button v-if="!isVIP" class="purchase-btn" @click="showPlans">立即开通</button>
      <button v-else class="renew-btn" @click="showPlans">续费会员</button>
    </view>
    
    <!-- 会员套餐列表 -->
    <view v-if="showPlanSelector" class="plan-container">
      <view class="plan-header">
        <text class="plan-title">选择套餐</text>
        <uni-icons type="close" size="24" @click="showPlanSelector = false"></uni-icons>
      </view>
      
      <view class="plan-list">
        <view 
          v-for="plan in vipPlans" 
          :key="plan.id"
          :class="['plan-item', { 'recommended': plan.recommended }]"
          @click="selectPlan(plan)"
        >
          <view class="plan-top">
            <text class="duration">{{ plan.duration }}个月</text>
            <text v-if="plan.recommended" class="rec-tag">推荐</text>
          </view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="amount">{{ plan.price }}</text>
            <text class="original">¥{{ plan.originalPrice }}</text>
          </view>
          <text class="daily">日均¥{{ (plan.price / (plan.duration * 30)).toFixed(2) }}</text>
        </view>
      </view>
      
      <button class="confirm-btn" @click="handlePurchase">确认支付</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useVipStore } from '@/stores/vip'

const vipStore = useVipStore()
const showPlanSelector = ref(false)
const selectedPlan = ref(null)

// 会员套餐配置
const vipPlans = ref([
  { id: 1, duration: 1, price: 15, originalPrice: 30, recommended: false },
  { id: 2, duration: 3, price: 40, originalPrice: 90, recommended: true },
  { id: 3, duration: 12, price: 120, originalPrice: 360, recommended: false }
])

// 计算到期日显示
const expireDate = computed(() => {
  if (!vipStore.expireTime) return ''
  const date = new Date(vipStore.expireTime)
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
})

// 显示套餐选择器
const showPlans = () => {
  showPlanSelector.value = true
}

// 选择套餐
const selectPlan = (plan) => {
  selectedPlan.value = plan
}

// 执行购买
const handlePurchase = async () => {
  if (!selectedPlan.value) {
    uni.showToast({ title: '请选择套餐', icon: 'none' })
    return
  }
  
  const success = await vipStore.purchaseVip(selectedPlan.value)
  if (success) {
    showPlanSelector.value = false
  }
}
</script>

<style scoped>
.vip-page {
  padding: 20px;
}

.vip-card {
  background: linear-gradient(135deg, #2a5caa 0%, #1a3353 100%);
  border-radius: 16px;
  padding: 24px;
  color: white;
  position: relative;
  overflow: hidden;
}

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

.title {
  font-size: 20px;
  font-weight: bold;
}

.tag {
  background-color: #ffc53d;
  color: #1a3353;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.privileges {
  margin-bottom: 24px;
}

.privilege-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 15px;
}

.privilege-item text {
  margin-left: 8px;
}

.purchase-btn, .renew-btn {
  background-color: #ffc53d;
  color: #1a3353;
  border: none;
  border-radius: 24px;
  height: 44px;
  line-height: 44px;
  font-weight: bold;
}

.plan-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 20px;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
  z-index: 100;
}

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

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

.plan-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.plan-item {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 15px;
  width: 30%;
  text-align: center;
}

.plan-item.recommended {
  border-color: #2a5caa;
  background-color: #e6f7ff;
  position: relative;
}

.rec-tag {
  position: absolute;
  top: -10px;
  right: 10px;
  background-color: #2a5caa;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.plan-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.duration {
  font-size: 16px;
  font-weight: bold;
}

.price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 5px;
}

.symbol {
  font-size: 16px;
  color: #f5222d;
}

.amount {
  font-size: 24px;
  font-weight: bold;
  color: #f5222d;
  margin: 0 3px;
}

.original {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.daily {
  font-size: 12px;
  color: #666;
}

.confirm-btn {
  background: linear-gradient(to right, #2a5caa, #1a3353);
  color: white;
  border: none;
  border-radius: 24px;
  height: 44px;
  line-height: 44px;
  font-weight: bold;
}
</style>