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

161 lines
4.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>