huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善

Browse Source
This commit is contained in:
huangzhenbao
2026-02-03 21:35:57 +08:00
parent 93b42a277a
commit 3922409a25
105 changed files with 14758 additions and 5861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

553
pages/mall/admin/user/level.uvue
View File

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