完善
This commit is contained in:
@@ -1,81 +1,464 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">用户分组</text>
|
||||
<text class="page-subtitle">Component: UserGroup</text>
|
||||
<view class="user-group-page">
|
||||
<view class="content-card">
|
||||
<!-- 操作按钮行 -->
|
||||
<view class="action-bar">
|
||||
<button class="btn primary small" @click="onAddGroup">添加分组</button>
|
||||
</view>
|
||||
|
||||
<!-- 分组列表表格 -->
|
||||
<view class="table-container">
|
||||
<!-- 表头 -->
|
||||
<view class="table-header">
|
||||
<view class="col col-id"><text>ID</text></view>
|
||||
<view class="col col-name"><text>分组</text></view>
|
||||
<view class="col col-ops"><text>操作</text></view>
|
||||
</view>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<view class="table-body">
|
||||
<view v-for="group in groupList" :key="group.id" class="table-row">
|
||||
<view class="col col-id"><text>{{ group.id }}</text></view>
|
||||
<view class="col col-name"><text>{{ group.name }}</text></view>
|
||||
<view class="col col-ops">
|
||||
<text class="op-link" @click="onEditGroup(group)">修改</text>
|
||||
<view class="op-divider">|</view>
|
||||
<text class="op-link" @click="onDeleteGroup(group)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="pagination-row">
|
||||
<text class="total-text">共 {{ groupList.length }} 条</text>
|
||||
<view class="page-size-selector">
|
||||
<text>15条/页</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<view class="page-btn disabled"><text>‹</text></view>
|
||||
<view class="page-btn active"><text>1</text></view>
|
||||
<view class="page-btn disabled"><text>›</text></view>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text>前往</text>
|
||||
<input class="jump-input" value="1" />
|
||||
<text>页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="placeholder-card">
|
||||
<text class="placeholder-title">页面占位</text>
|
||||
<text class="placeholder-desc">该功能模块正在开发中</text>
|
||||
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
|
||||
|
||||
<!-- 添加/修改分组弹窗 -->
|
||||
<view class="modal-mask" v-if="showModal" @click="closeModal">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ modalTitle }}</text>
|
||||
<text class="modal-close" @click="closeModal">×</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="form-item">
|
||||
<view class="label-box">
|
||||
<text class="required">*</text>
|
||||
<text class="label">分组名称：</text>
|
||||
</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入分组名称"
|
||||
autofocus
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<button class="btn ghost" @click="closeModal">取消</button>
|
||||
<button class="btn primary" @click="submitForm">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
|
||||
// TODO: 实现 用户分组 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
// 分组数据
|
||||
const groupList = ref([
|
||||
{ id: 251, name: 'A类客户' },
|
||||
{ id: 252, name: 'B类客户' },
|
||||
{ id: 253, name: 'C类客户' },
|
||||
{ id: 254, name: 'D类客户' }
|
||||
])
|
||||
|
||||
// 弹窗状态
|
||||
const showModal = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const modalTitle = computed(() => isEdit.value ? '修改分组' : '添加分组')
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: 0,
|
||||
name: ''
|
||||
})
|
||||
|
||||
// 添加分组
|
||||
function onAddGroup() {
|
||||
isEdit.value = false
|
||||
formData.id = 0
|
||||
formData.name = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
// 修改分组
|
||||
function onEditGroup(group: any) {
|
||||
isEdit.value = true
|
||||
formData.id = group.id
|
||||
formData.name = group.name
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
// 删除分组
|
||||
function onDeleteGroup(group: any) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该分组吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
groupList.value = groupList.value.filter(item => item.id !== group.id)
|
||||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
function submitForm() {
|
||||
if (!formData.name) {
|
||||
uni.showToast({ title: '请输入分组名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
if (isEdit.value) {
|
||||
// 模拟修改
|
||||
const index = groupList.value.findIndex(item => item.id === formData.id)
|
||||
if (index > -1) {
|
||||
groupList.value[index].name = formData.name
|
||||
}
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
} else {
|
||||
// 模拟添加
|
||||
const newId = groupList.value.length > 0 ? Math.max(...groupList.value.map(g => g.id)) + 1 : 1
|
||||
groupList.value.push({
|
||||
id: newId,
|
||||
name: formData.name
|
||||
})
|
||||
uni.showToast({ title: '添加成功', icon: 'success' })
|
||||
}
|
||||
|
||||
closeModal()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
.user-group-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
.content-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.action-bar {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #fff;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
.btn.primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background-color: #fff;
|
||||
border-color: #d9d9d9;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn.small {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.table-container {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8faff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-header .col {
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-row .col {
|
||||
padding: 12px 16px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col-id {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.col-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.col-ops {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.op-link {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.op-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.op-divider {
|
||||
margin: 0 8px;
|
||||
color: #1890ff;
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination-row {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-text {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.page-size-selector {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
margin-right: 16px;
|
||||
|
||||
.arrow {
|
||||
font-size: 10px;
|
||||
margin-left: 8px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.page-btns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.page-jump {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.jump-input {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
margin: 0 8px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 520px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label-box {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
padding: 4px 11px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
border-color: #40a9ff;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,458 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">用户标签</text>
|
||||
<text class="page-subtitle">Component: UserLabel</text>
|
||||
<view class="user-label-page">
|
||||
<view class="content-card">
|
||||
<!-- 操作按钮行 -->
|
||||
<view class="action-bar">
|
||||
<button class="btn primary small" @click="onAddLabel">添加标签</button>
|
||||
</view>
|
||||
|
||||
<!-- 标签列表表格 -->
|
||||
<view class="table-container">
|
||||
<!-- 表头 -->
|
||||
<view class="table-header">
|
||||
<view class="col col-id"><text>ID</text></view>
|
||||
<view class="col col-name"><text>标签名称</text></view>
|
||||
<view class="col col-ops"><text>操作</text></view>
|
||||
</view>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<view class="table-body">
|
||||
<view v-for="label in labelList" :key="label.id" class="table-row">
|
||||
<view class="col col-id"><text>{{ label.id }}</text></view>
|
||||
<view class="col col-name"><text>{{ label.name }}</text></view>
|
||||
<view class="col col-ops">
|
||||
<text class="op-link" @click="onEditLabel(label)">修改</text>
|
||||
<view class="op-divider">|</view>
|
||||
<text class="op-link" @click="onDeleteLabel(label)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<view class="pagination-row">
|
||||
<text class="total-text">共 {{ labelList.length }} 条</text>
|
||||
<view class="page-size-selector">
|
||||
<text>15条/页</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<view class="page-btn disabled"><text>‹</text></view>
|
||||
<view class="page-btn active"><text>1</text></view>
|
||||
<view class="page-btn disabled"><text>›</text></view>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text>前往</text>
|
||||
<input class="jump-input" value="1" />
|
||||
<text>页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="placeholder-card">
|
||||
<text class="placeholder-title">页面占位</text>
|
||||
<text class="placeholder-desc">该功能模块正在开发中</text>
|
||||
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
|
||||
|
||||
<!-- 添加/修改标签弹窗 -->
|
||||
<view class="modal-mask" v-if="showModal" @click="closeModal">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ modalTitle }}</text>
|
||||
<text class="modal-close" @click="closeModal">×</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="form-item">
|
||||
<view class="label-box">
|
||||
<text class="required">*</text>
|
||||
<text class="label">标签名称：</text>
|
||||
</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入标签名称"
|
||||
autofocus
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<button class="btn ghost" @click="closeModal">取消</button>
|
||||
<button class="btn primary" @click="submitForm">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
|
||||
// TODO: 实现 用户标签 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
// 标签数据
|
||||
const labelList = ref([
|
||||
{ id: 1, name: '新客户' },
|
||||
{ id: 2, name: '老客户' },
|
||||
{ id: 3, name: '活跃客户' },
|
||||
{ id: 4, name: '潜在客户' }
|
||||
])
|
||||
|
||||
// 弹窗状态
|
||||
const showModal = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const modalTitle = computed(() => isEdit.value ? '修改标签' : '添加标签')
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: 0,
|
||||
name: ''
|
||||
})
|
||||
|
||||
// 添加标签
|
||||
function onAddLabel() {
|
||||
isEdit.value = false
|
||||
formData.id = 0
|
||||
formData.name = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
// 修改标签
|
||||
function onEditLabel(label: any) {
|
||||
isEdit.value = true
|
||||
formData.id = label.id
|
||||
formData.name = label.name
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
// 删除标签
|
||||
function onDeleteLabel(label: any) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该标签吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
labelList.value = labelList.value.filter(item => item.id !== label.id)
|
||||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
function submitForm() {
|
||||
if (!formData.name) {
|
||||
uni.showToast({ title: '请输入标签名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
if (isEdit.value) {
|
||||
const index = labelList.value.findIndex(item => item.id === formData.id)
|
||||
if (index > -1) {
|
||||
labelList.value[index].name = formData.name
|
||||
}
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
} else {
|
||||
const newId = labelList.value.length > 0 ? Math.max(...labelList.value.map(g => g.id)) + 1 : 1
|
||||
labelList.value.push({
|
||||
id: newId,
|
||||
name: formData.name
|
||||
})
|
||||
uni.showToast({ title: '添加成功', icon: 'success' })
|
||||
}
|
||||
|
||||
closeModal()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
.user-label-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
.content-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.action-bar {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #fff;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
.btn.primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background-color: #fff;
|
||||
border-color: #d9d9d9;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn.small {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.table-container {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8faff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-header .col {
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-row .col {
|
||||
padding: 12px 16px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col-id {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.col-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.col-ops {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.op-link {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.op-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.op-divider {
|
||||
margin: 0 8px;
|
||||
color: #1890ff;
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination-row {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-text {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.page-size-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
margin-right: 16px;
|
||||
|
||||
.arrow {
|
||||
font-size: 10px;
|
||||
margin-left: 8px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.page-btns {
|
||||
display: flex;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.page-jump {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.jump-input {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
margin: 0 8px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 520px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label-box {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
padding: 4px 11px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
border-color: #40a9ff;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,522 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">用户等级</text>
|
||||
<text class="page-subtitle">Component: UserLevel</text>
|
||||
<view class="admin-user-level">
|
||||
<view class="content-body">
|
||||
<!-- 顶部过滤栏 -->
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-item">
|
||||
<text class="label-txt">等级状态:</text>
|
||||
<view class="select-mock">
|
||||
<text class="select-val">请选择</text>
|
||||
<text class="arrow-down">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label-txt">等级名称:</text>
|
||||
<input class="search-input" placeholder="请输入等级名称" v-model="filterName" />
|
||||
</view>
|
||||
<view class="btn-query" @click="handleQuery">
|
||||
<text class="query-txt">查询</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="table-card border-shadow">
|
||||
<view class="card-header">
|
||||
<view class="btn-primary-blue" @click="handleAdd">
|
||||
<text class="btn-txt">添加用户等级</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<view class="table-container">
|
||||
<view class="table-header-row">
|
||||
<view class="th" style="width: 80px;">ID</view>
|
||||
<view class="th" style="width: 120px;">等级图标</view>
|
||||
<view class="th" style="width: 150px;">等级背景图</view>
|
||||
<view class="th" style="flex: 1;">等级名称</view>
|
||||
<view class="th" style="width: 100px;">等级</view>
|
||||
<view class="th" style="width: 120px;">享受折扣</view>
|
||||
<view class="th" style="width: 150px;">经验值要求</view>
|
||||
<view class="th" style="width: 120px;">是否显示</view>
|
||||
<view class="th" style="width: 150px;">操作</view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-for="(item, index) in levelList" :key="item.id" class="table-row">
|
||||
<view class="td" style="width: 80px;"><text class="td-txt">{{ item.id }}</text></view>
|
||||
<view class="td" style="width: 120px;">
|
||||
<view class="icon-circle" :style="{ backgroundColor: item.iconBg }">
|
||||
<text class="icon-symbol">{{ item.iconSymbol }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td" style="width: 150px;">
|
||||
<view class="bg-thumb" :style="{ background: item.bgGradient }"></view>
|
||||
</view>
|
||||
<view class="td" style="flex: 1;"><text class="td-txt">{{ item.name }}</text></view>
|
||||
<view class="td" style="width: 100px;"><text class="td-txt">{{ item.level }}</text></view>
|
||||
<view class="td" style="width: 120px;"><text class="td-txt">{{ item.discount }}</text></view>
|
||||
<view class="td" style="width: 150px;"><text class="td-txt">{{ item.experience }}</text></view>
|
||||
<view class="td" style="width: 120px;">
|
||||
<view :class="['switch-box', item.isShow ? 'active' : '']" @click="toggleShow(index)">
|
||||
<view class="switch-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td" style="width: 150px;">
|
||||
<view class="op-links">
|
||||
<text class="op-link" @click="handleEdit(item)">编辑</text>
|
||||
<text class="op-split">|</text>
|
||||
<text class="op-link text-danger">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
<view class="pagination-footer">
|
||||
<view class="page-total">
|
||||
<text class="total-txt">共 {{ total }} 条</text>
|
||||
</view>
|
||||
<view class="page-select">
|
||||
<text class="page-val">15条/页 ▼</text>
|
||||
</view>
|
||||
<view class="page-btns">
|
||||
<text class="p-btn disabled"><</text>
|
||||
<text class="p-btn active">1</text>
|
||||
<text class="p-btn">></text>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text class="jump-txt">前往</text>
|
||||
<input class="jump-input" placeholder="1" />
|
||||
<text class="jump-txt">页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="placeholder-card">
|
||||
<text class="placeholder-title">页面占位</text>
|
||||
<text class="placeholder-desc">该功能模块正在开发中</text>
|
||||
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
|
||||
|
||||
<!-- 抽屉弹窗 (Add/Edit) -->
|
||||
<view v-if="showDrawer" :class="['drawer-mask', isClosing ? 'mask-fade-out' : '']" @click="closeDrawer">
|
||||
<view :class="['drawer-content', isClosing ? 'slide-out' : '']" @click.stop="">
|
||||
<view class="drawer-header">
|
||||
<text class="title-txt">{{ isEdit ? '编辑用户等级' : '添加用户等级' }}</text>
|
||||
<text class="close-btn" @click="closeDrawer">×</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="drawer-body" :scroll-y="true">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="required">*</text><text class="label-txt">等级名称:</text></view>
|
||||
<input class="input-base" v-model="form.name" placeholder="请输入等级名称" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="required">*</text><text class="label-txt">等级权重:</text></view>
|
||||
<input class="input-base" type="number" v-model="form.level" placeholder="等级权重越大等级越高" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="required">*</text><text class="label-txt">等级图标:</text></view>
|
||||
<view class="upload-placeholder">
|
||||
<text class="up-ic">+</text>
|
||||
<text class="up-txt">上传图标</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="required">*</text><text class="label-txt">等级背景图:</text></view>
|
||||
<view class="upload-placeholder bg-up">
|
||||
<text class="up-ic">+</text>
|
||||
<text class="up-txt">上传背景图</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="required">*</text><text class="label-txt">享受折扣(%):</text></view>
|
||||
<input class="input-base" type="number" v-model="form.discount" placeholder="请输入折扣，如：95" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="required">*</text><text class="label-txt">经验值要求:</text></view>
|
||||
<input class="input-base" type="number" v-model="form.experience" placeholder="请输入经验值要求" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">是否显示:</text></view>
|
||||
<view :class="['switch-box', form.isShow ? 'active' : '']" @click="form.isShow = !form.isShow">
|
||||
<view class="switch-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="drawer-footer">
|
||||
<view class="btn-cancel" @click="closeDrawer"><text class="btn-cancel-txt">取消</text></view>
|
||||
<view class="btn-save" @click="handleSave"><text class="btn-save-txt">提交</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
// TODO: 实现 用户等级 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
interface LevelItem {
|
||||
id: number
|
||||
name: string
|
||||
level: number
|
||||
iconBg: string
|
||||
iconSymbol: string
|
||||
bgGradient: string
|
||||
discount: number
|
||||
experience: number
|
||||
isShow: boolean
|
||||
}
|
||||
|
||||
const filterName = ref('')
|
||||
const total = ref(5)
|
||||
const levelList = ref<LevelItem[]>([
|
||||
{ id: 1, name: 'V1', level: 1, iconBg: '#fdf6ec', iconSymbol: '👑', bgGradient: 'linear-gradient(to bottom right, #f5e6d3, #e8d5bc)', discount: 99, experience: 500, isShow: true },
|
||||
{ id: 2, name: 'V2', level: 2, iconBg: '#ecf5ff', iconSymbol: '💎', bgGradient: 'linear-gradient(to bottom right, #d3e9f5, #bcd9e8)', discount: 97, experience: 1000, isShow: true },
|
||||
{ id: 3, name: 'V3', level: 3, iconBg: '#f4f4f5', iconSymbol: '⭐', bgGradient: 'linear-gradient(to bottom right, #e3e3e3, #cbcbcb)', discount: 95, experience: 3000, isShow: true },
|
||||
{ id: 4, name: 'V4', level: 4, iconBg: '#fef0f0', iconSymbol: '👑', bgGradient: 'linear-gradient(to bottom right, #f5dfd3, #e8c6bc)', discount: 93, experience: 8000, isShow: true },
|
||||
{ id: 5, name: 'V5', level: 5, iconBg: '#f0f9eb', iconSymbol: '💠', bgGradient: 'linear-gradient(to bottom right, #d3e1f5, #bccce8)', discount: 70, experience: 15000, isShow: true }
|
||||
])
|
||||
|
||||
const showDrawer = ref(false)
|
||||
const isClosing = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const form = reactive({
|
||||
name: '',
|
||||
level: 1,
|
||||
discount: 100,
|
||||
experience: 0,
|
||||
isShow: true
|
||||
})
|
||||
|
||||
const handleQuery = () => { console.log('Querying...') }
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
form.name = ''
|
||||
form.level = levelList.value.length + 1
|
||||
form.discount = 100
|
||||
form.experience = 0
|
||||
form.isShow = true
|
||||
showDrawer.value = true
|
||||
isClosing.value = false
|
||||
}
|
||||
|
||||
const handleEdit = (item: LevelItem) => {
|
||||
isEdit.value = true
|
||||
form.name = item.name
|
||||
form.level = item.level
|
||||
form.discount = item.discount
|
||||
form.experience = item.experience
|
||||
form.isShow = item.isShow
|
||||
showDrawer.value = true
|
||||
isClosing.value = false
|
||||
}
|
||||
|
||||
const closeDrawer = () => {
|
||||
isClosing.value = true
|
||||
setTimeout(() => {
|
||||
showDrawer.value = false
|
||||
isClosing.value = false
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const toggleShow = (index: number) => {
|
||||
levelList.value[index].isShow = !levelList.value[index].isShow
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
console.log('Saving...', form)
|
||||
closeDrawer()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
.admin-user-level {
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.border-shadow {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
/* 过滤栏 */
|
||||
.filter-card {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.label-txt { font-size: 14px; color: #606266; }
|
||||
|
||||
.select-mock {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.select-val { font-size: 14px; color: #c0c4cc; }
|
||||
.arrow-down { font-size: 10px; color: #c0c4cc; }
|
||||
|
||||
.search-input {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
.btn-query {
|
||||
background-color: #2d8cf0;
|
||||
padding: 0 20px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.query-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
/* 表格区域 */
|
||||
.table-card {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header { padding: 20px; }
|
||||
|
||||
.btn-primary-blue {
|
||||
background-color: #2d8cf0;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
.table-container { padding: 0 20px; }
|
||||
|
||||
.table-header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f8f9;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 12px 10px;
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.td-txt { font-size: 14px; color: #515a6e; }
|
||||
|
||||
/* 图标和背景预览 */
|
||||
.icon-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.icon-symbol { font-size: 18px; }
|
||||
|
||||
.bg-thumb {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Switch 开关复刻 */
|
||||
.switch-box {
|
||||
width: 44px;
|
||||
height: 22px;
|
||||
background-color: #dcdfe6;
|
||||
border-radius: 11px;
|
||||
position: relative;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch-box.active { background-color: #2d8cf0; }
|
||||
.switch-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 9px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.switch-box.active .switch-dot { transform: translateX(22px); }
|
||||
|
||||
.op-links { display: flex; flex-direction: row; align-items: center; }
|
||||
.op-link { color: #2d8cf0; font-size: 14px; cursor: pointer; margin: 0 5px; }
|
||||
.op-split { color: #e8eaec; margin: 0 5px; }
|
||||
.text-danger { color: #ed4014; }
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.total-txt { font-size: 14px; color: #606266; }
|
||||
.page-val { font-size: 14px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
|
||||
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
||||
.p-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||||
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; }
|
||||
|
||||
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
||||
.jump-txt { font-size: 14px; color: #606266; }
|
||||
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
|
||||
|
||||
/* Drawer Styles */
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-txt { font-size: 16px; font-weight: bold; color: #333; }
|
||||
.close-btn { font-size: 24px; color: #999; cursor: pointer; }
|
||||
|
||||
.drawer-body { flex: 1; padding: 24px; }
|
||||
|
||||
.form-item { margin-bottom: 24px; }
|
||||
.label-box { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; }
|
||||
.required { color: #ed4014; margin-right: 4px; }
|
||||
.label-txt { font-size: 14px; color: #333; }
|
||||
|
||||
.input-base {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fbfbfb;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bg-up { width: 150px; height: 80px; }
|
||||
.up-ic { font-size: 24px; color: #c0c4cc; }
|
||||
.up-txt { font-size: 12px; color: #c0c4cc; margin-top: 4px; }
|
||||
|
||||
.drawer-footer {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-cancel, .btn-save { padding: 8px 20px; border-radius: 4px; cursor: pointer; }
|
||||
.btn-cancel { border: 1px solid #dcdfe6; }
|
||||
.btn-save { background-color: #2d8cf0; }
|
||||
.btn-cancel-txt { color: #666; font-size: 14px; }
|
||||
.btn-save-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
|
||||
.slide-out { animation: slideOut 0.3s ease-in forwards; }
|
||||
@keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
|
||||
.mask-fade-out { animation: fadeOut 0.3s ease-in forwards; }
|
||||
@keyframes fadeOut { from { background-color: rgba(0, 0, 0, 0.4); } to { background-color: rgba(0, 0, 0, 0); } }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -87,7 +87,9 @@
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<view class="table-body">
|
||||
<view v-for="user in userList" :key="user.id" class="table-row">
|
||||
<view v-for="user in userList" :key="user.id" class="table-row"
|
||||
:style="{ zIndex: activeDropdownId === user.id ? 1000 : 1 }"
|
||||
>
|
||||
<view class="col col-check"><checkbox :checked="user.checked" /></view>
|
||||
<view class="col col-expand"><text class="expand-arrow">›</text></view>
|
||||
<view class="col col-id"><text>{{ user.id }}</text></view>
|
||||
@@ -107,9 +109,29 @@
|
||||
<view class="col col-type"><text>{{ user.userType }}</text></view>
|
||||
<view class="col col-balance"><text>{{ user.balance }}</text></view>
|
||||
<view class="col col-ops">
|
||||
<text class="op-link" @click="onDetail(user)">详情</text>
|
||||
<view class="op-divider"></view>
|
||||
<text class="op-link more">更多 ⌵</text>
|
||||
<text class="op-link" @click.stop="onDetail(user)">详情</text>
|
||||
<view class="op-divider">|</view>
|
||||
<view class="more-hover-container"
|
||||
@mouseover="activeDropdownId = user.id"
|
||||
@mouseleave="activeDropdownId = null"
|
||||
@click.stop="activeDropdownId = (activeDropdownId === user.id ? null : user.id)"
|
||||
>
|
||||
<view class="more-trigger pointer">
|
||||
<text class="op-link">更多</text>
|
||||
<text class="arrow">∨</text>
|
||||
</view>
|
||||
<view class="dropdown-list-box" v-if="activeDropdownId === user.id">
|
||||
<view class="dropdown-arrow-top"></view>
|
||||
<view class="dropdown-menu-list">
|
||||
<text class="menu-item" @click.stop="uni.showToast({title:'修改余额', icon:'none'})">修改余额</text>
|
||||
<text class="menu-item" @click.stop="uni.showToast({title:'修改积分', icon:'none'})">修改积分</text>
|
||||
<text class="menu-item" @click.stop="uni.showToast({title:'赠送会员', icon:'none'})">赠送会员</text>
|
||||
<text class="menu-item" @click.stop="uni.showToast({title:'设置分组', icon:'none'})">设置分组</text>
|
||||
<text class="menu-item" @click.stop="uni.showToast({title:'设置标签', icon:'none'})">设置标签</text>
|
||||
<text class="menu-item" @click.stop="uni.showToast({title:'修改上级推广人', icon:'none'})">修改上级推广人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -129,6 +151,7 @@ import { ref } from 'vue'
|
||||
const activeTab = ref(0)
|
||||
const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
|
||||
const isAllChecked = ref(false)
|
||||
const activeDropdownId = ref<string | null>(null)
|
||||
|
||||
const userList = ref([
|
||||
{ id: '77414', avatar: 'https://img.crmeb.com/crmeb_demo/77414.png', nickname: '199****0268', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '199****0268', userType: '公众号', balance: '88888.00', checked: false },
|
||||
@@ -287,7 +310,7 @@ function onDetail(user: any) {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
overflow: visible; /* 必须 visible 以显示下拉菜单 */
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
@@ -329,6 +352,7 @@ function onDetail(user: any) {
|
||||
/* 表格 */
|
||||
.table-container {
|
||||
padding: 0 24px 24px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@@ -345,6 +369,8 @@ function onDetail(user: any) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 16px 0;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
&:hover {
|
||||
background: #fafafa;
|
||||
@@ -371,7 +397,83 @@ function onDetail(user: any) {
|
||||
.col-phone { width: 130px; }
|
||||
.col-type { width: 90px; }
|
||||
.col-balance { width: 110px; }
|
||||
.col-ops { flex: 1; min-width: 120px; justify-content: flex-end; padding-right: 16px; }
|
||||
.col-ops {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 130px;
|
||||
justify-content: flex-end;
|
||||
padding-right: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.more-hover-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
min-width: 46px; /* 增加点击和悬停范围 */
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.more-trigger {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
pointer-events: none; /* 确保事件冒泡到 container */
|
||||
.arrow { font-size: 10px; color: #2f54eb; margin-left: 2px; }
|
||||
}
|
||||
|
||||
.dropdown-list-box {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: -5px; /* 稍微向左移动一点 */
|
||||
width: 140px; /* 增加宽度以容纳长文字 */
|
||||
padding-top: 10px; /* 增加缓冲区防止鼠标移出 */
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.dropdown-arrow-top {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 25px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #fff;
|
||||
}
|
||||
|
||||
.dropdown-menu-list {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
color: #2f54eb;
|
||||
}
|
||||
}
|
||||
|
||||
.danger-item {
|
||||
&:hover {
|
||||
color: #ff4d4f !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pointer { cursor: pointer; }
|
||||
|
||||
.table-header .col {
|
||||
color: #5c5c5c;
|
||||
@@ -407,16 +509,11 @@ function onDetail(user: any) {
|
||||
color: #2f54eb;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
|
||||
&.more {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.op-divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #e8e8e8;
|
||||
color: #e8e8e8;
|
||||
font-size: 12px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user