523 lines
16 KiB
Plaintext
523 lines
16 KiB
Plaintext
<template>
|
||
<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>
|
||
|
||
<!-- 抽屉弹窗 (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, reactive } from 'vue'
|
||
|
||
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">
|
||
.admin-user-level {
|
||
background-color: #f0f2f5;
|
||
min-height: 100vh;
|
||
padding: 24px;
|
||
}
|
||
|
||
.border-shadow {
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.content-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
/* 过滤栏 */
|
||
.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;
|
||
}
|
||
|
||
.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>
|
||
|