161 lines
4.1 KiB
Vue
161 lines
4.1 KiB
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>
|