merchant-web/src/views/test-member-detail.vue

<template>
  <div class="test-page">
    <div class="page-header">
      <h2>会员详情弹框样式测试页面</h2>
      <p>点击下面的按钮查看不同会员数据的详情弹框效果</p>
    </div>
    
    <div class="test-buttons">
      <el-button type="primary" @click="showMemberDetail1">
        查看会员详情 - 张三 (LV2会员)
      </el-button>
      <el-button type="success" @click="showMemberDetail2">
        查看会员详情 - 李四 (LV3会员)
      </el-button>
      <el-button type="warning" @click="showMemberDetail3">
        查看会员详情 - 王五 (LV1会员)
      </el-button>
    </div>

    <div class="feature-list">
      <h3>功能特点说明：</h3>
      <ul>
        <li>✅ 用户信息顶部展示：会员姓名、系统编号、手机号(脱敏)、生日</li>
        <li>✅ 右侧统计卡片：会员成长值、会员积分、会员优惠券数量</li>
        <li>✅ 三个Tab分页：会员成长值明细、会员积分明细、会员优惠券</li>
        <li>✅ 成长值明细：变化时间、成长值变动(带颜色)、关联订单、查看详情</li>
        <li>✅ 积分明细：变化时间、积分变动(带颜色)、变动类型、关联订单、查看详情</li>
        <li>✅ 优惠券列表：名称、类型、面额、使用条件、获得时间、有效期、使用状态(Tag)</li>
        <li>✅ 完整的分页功能</li>
        <li>✅ 响应式布局和美观的样式</li>
      </ul>
    </div>

    <!-- 会员详情弹框组件 -->
    <viewDetails ref="viewDetails"></viewDetails>
  </div>
</template>

<script>
import viewDetails from "./modules/marketing/user/popup/view-details.vue";

export default {
  name: "TestMemberDetail",
  components: {
    viewDetails
  },
  data() {
    return {};
  },
  methods: {
    // 测试会员1 - 张三
    showMemberDetail1() {
      const testMemberData = {
        userId: "3",
        username: "张三",
        mobile: "13812341234",
        birthday: "1990-05-15",
        headUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        levelName: "LV2",
        growthValue: 1250,
        memberPoints: 890,
        joinTime: "2023-01-15 10:30:00",
        registrationTime: "2023-01-15 10:30:00",
        id: 1
      };
      this.$refs.viewDetails.toggle(testMemberData).add();
    },
    
    // 测试会员2 - 李四
    showMemberDetail2() {
      const testMemberData = {
        userId: "15",
        username: "李四",
        mobile: "15987654321",
        birthday: "1985-12-20",
        headUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        levelName: "LV3",
        growthValue: 2800,
        memberPoints: 1560,
        joinTime: "2022-08-10 14:20:00",
        registrationTime: "2022-08-10 14:20:00",
        id: 2
      };
      this.$refs.viewDetails.toggle(testMemberData).add();
    },
    
    // 测试会员3 - 王五
    showMemberDetail3() {
      const testMemberData = {
        userId: "28",
        username: "王五",
        mobile: "18666888999",
        birthday: "1995-03-08",
        headUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        levelName: "LV1",
        growthValue: 350,
        memberPoints: 120,
        joinTime: "2024-01-05 09:15:00",
        registrationTime: "2024-01-05 09:15:00",
        id: 3
      };
      this.$refs.viewDetails.toggle(testMemberData).add();
    }
  }
};
</script>

<style lang="scss" scoped>
.test-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  
  h2 {
    color: #303133;
    margin-bottom: 10px;
  }
  
  p {
    color: #606266;
    font-size: 14px;
  }
}

.test-buttons {
  text-align: center;
  margin-bottom: 40px;
  
  .el-button {
    margin: 0 10px 10px 0;
  }
}

.feature-list {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  
  h3 {
    color: #303133;
    margin-bottom: 15px;
  }
  
  ul {
    margin: 0;
    padding-left: 20px;
    
    li {
      margin-bottom: 8px;
      color: #606266;
      line-height: 1.5;
    }
  }
}
</style>