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-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
pages/mall/admin/user/level/index.uvue
View File

@@ -1,44 +1,44 @@
<template>
<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>
<text class="label-txt">等级状态:</text>
<view class="select-mock">
<text class="select-val">璇烽€夋嫨</text>
<text class="arrow-down">鈻?/text>
<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" />
<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>
<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>
<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 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">
@@ -63,22 +63,22 @@
</view>
<view class="td" style="width: 150px;">
<view class="op-links">
<text class="op-link" @click="handleEdit(item)">缂栬緫</text>
<text class="op-link" @click="handleEdit(item)">编辑</text>
<text class="op-split">|</text>
<text class="op-link text-danger">鍒犻櫎</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>
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15鏉?椤?鈻?/text>
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
@@ -86,61 +86,61 @@
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">鍓嶅線</text>
<text class="jump-txt">前往</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">椤?/text>
<text class="jump-txt">页</text>
</view>
</view>
</view>
</view>
<!-- 鎶藉眽寮圭獥 (Add/Edit) -->
<!-- 抽屉弹窗 (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>
<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 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 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="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>
<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="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>
<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 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 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="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>
@@ -148,8 +148,8 @@
</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 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>
@@ -174,11 +174,11 @@ interface LevelItem {
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 }
{ 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)
@@ -252,7 +252,7 @@ const handleSave = () => {
gap: 20px;
}
/* 杩囨护鏍?*/
/* 过滤栏 */
.filter-card {
padding: 24px;
display: flex;
@@ -307,7 +307,7 @@ const handleSave = () => {
}
.query-txt { color: #fff; font-size: 14px; }
/* 琛ㄦ牸鍖哄煙 */
/* 表格区域 */
.table-card {
background-color: #fff;
display: flex;
@@ -355,7 +355,7 @@ const handleSave = () => {
.td-txt { font-size: 14px; color: #515a6e; }
/* 鍥炬爣鍜岃儗鏅瑙?*/
/* 图标和背景预览 */
.icon-circle {
width: 36px;
height: 36px;
@@ -374,7 +374,7 @@ const handleSave = () => {
border: 1px solid #eee;
}
/* Switch 寮€鍏冲鍒?*/
/* Switch 开关复刻 */
.switch-box {
width: 44px;
height: 22px;
@@ -402,7 +402,7 @@ const handleSave = () => {
.op-split { color: #e8eaec; margin: 0 5px; }
.text-danger { color: #ed4014; }
/* 鍒嗛〉 */
/* 分页 */
.pagination-footer {
padding: 20px;
display: flex;
@@ -447,7 +447,7 @@ const handleSave = () => {
.drawer-content {
width: 500px;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
animation: slideIn 0.3s ease-out;
@@ -520,4 +520,3 @@ const handleSave = () => {
@keyframes fadeOut { from { background-color: rgba(0, 0, 0, 0.4); } to { background-color: rgba(0, 0, 0, 0); } }
</style>