vue 实现会员卡片

Vue 实现会员卡片的方法

使用组件化设计

创建一个名为 MembershipCard.vue 的单文件组件，包含模板、样式和逻辑。通过 props 接收会员数据（如姓名、等级、积分等），动态渲染卡片内容。

<template>
  <div class="membership-card">
    <div class="card-header">
      <h3>{{ member.name }}</h3>
      <span class="level-badge">{{ member.level }}</span>
    </div>
    <div class="card-body">
      <p>积分: {{ member.points }}</p>
      <p>有效期: {{ member.expiryDate }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    member: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.membership-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  width: 300px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.level-badge {
  background: gold;
  padding: 4px 8px;
  border-radius: 4px;
}
</style>

动态样式绑定

根据会员等级动态调整卡片样式。使用 Vue 的 :class 或 :style 绑定条件样式。

<template>
  <div 
    class="membership-card" 
    :class="[`level-${member.level.toLowerCase()}`]"
  >
    <!-- 卡片内容 -->
  </div>
</template>

<style scoped>
.level-gold {
  background: linear-gradient(to right, #ffd700, #ffecb3);
}
.level-silver {
  background: linear-gradient(to right, #c0c0c0, #e0e0e0);
}
</style>

动画效果

通过 Vue 的 <transition> 或第三方动画库（如 animate.css）添加交互效果。

<template>
  <transition name="fade">
    <div v-if="showCard" class="membership-card">
      <!-- 卡片内容 -->
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

集成后端数据

通过 axios 或其他 HTTP 客户端从后端 API 获取会员数据，更新卡片内容。

// 在父组件中
import axios from 'axios';

export default {
  data() {
    return {
      memberData: null
    }
  },
  mounted() {
    axios.get('/api/member/123').then(response => {
      this.memberData = response.data;
    });
  }
}

响应式布局

结合 CSS Flexbox 或 Grid 确保卡片在不同屏幕尺寸下适配。

.membership-card {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

@media (max-width: 600px) {
  .membership-card {
    width: 100%;
  }
}