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

merge: branch 'huangzhenbao-admin' into comclib-analytics, keeping local RPC integration versions

Browse Source
This commit is contained in:
comlibmb
2026-02-11 17:23:01 +08:00
parent 7e2246fec5 50ddf01e7c
commit ee5c0c446b
92 changed files with 5500 additions and 1735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

628
pages/mall/admin/user/level/index.uvue Normal file
View File

@@ -0,0 +1,628 @@
<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, onMounted, computed } from 'vue'
import {
fetchAdminUserLevelPage,
saveAdminUserLevel,
deleteAdminUserLevel,
setAdminUserLevelVisible
} from '@/services/admin/userLevelService.uts'
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(0)
const levelList = ref<AdminUserLevel[]>([])
const loading = ref(false)
const page = ref(1)
const pageSize = ref(15)
const jumpPage = ref('')
const totalPages = computed((): number => {
if (pageSize.value <= 0) return 1
const pages = Math.ceil(total.value / pageSize.value)
return pages <= 0 ? 1 : pages
})
const loadLevelList = async () => {
loading.value = true
try {
const res = await fetchAdminUserLevelPage(page.value, pageSize.value, {
search: filterName.value || null,
isVisible: null, // 全部
status: null
})
levelList.value = res.items
total.value = res.total
} catch (e) {
uni.showToast({ title: '加载失败', icon: 'none' })
} finally {
loading.value = false
}
}
onMounted(() => {
loadLevelList()
})
const handleQuery = () => {
page.value = 1
loadLevelList()
}
const prevPage = () => {
if (page.value > 1) {
page.value--
loadLevelList()
}
}
const nextPage = () => {
if (page.value < totalPages.value) {
page.value++
loadLevelList()
}
}
const goToJumpPage = () => {
const targetPage = parseInt(jumpPage.value)
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
page.value = targetPage
loadLevelList()
jumpPage.value = ''
} else {
uni.showToast({ title: '请输入有效的页码', icon: 'none' })
}
}
const showDrawer = ref(false)
const isClosing = ref(false)
const isEdit = ref(false)
const editingId = ref<string | null>(null)
const form = reactive({
name: '',
level: 1,
discount: 100,
experience: 0,
isShow: true
})
const handleAdd = () => {
isEdit.value = false
editingId.value = null
form.name = ''
form.level = 1
form.discount = 100
form.experience = 0
form.isShow = true
showDrawer.value = true
isClosing.value = false
}
const handleEdit = (item: AdminUserLevel) => {
isEdit.value = true
editingId.value = item.id
form.name = item.name
form.level = item.level_weight
form.discount = item.discount_percent
form.experience = item.min_experience
form.isShow = item.is_visible
showDrawer.value = true
isClosing.value = false
}
const handleDelete = (id: string) => {
uni.showModal({
title: '确认删除',
content: '确定要删除该用户等级吗？',
success: async (res) => {
if (res.confirm) {
const ok = await deleteAdminUserLevel(id)
if (ok) {
uni.showToast({ title: '删除成功' })
loadLevelList()
} else {
uni.showToast({ title: '删除失败', icon: 'none' })
}
}
}
})
}
const toggleShow = async (index: number) => {
const item = levelList.value[index]
const targetVisible = !item.is_visible
const ok = await setAdminUserLevelVisible(item.id, targetVisible)
if (ok) {
item.is_visible = targetVisible
} else {
uni.showToast({ title: '修改失败', icon: 'none' })
}
}
const handleSave = async () => {
if (!form.name) {
uni.showToast({ title: '请输入等级名称', icon: 'none' })
return
}
try {
const resId = await saveAdminUserLevel({
id: editingId.value,
name: form.name,
level_weight: form.level,
min_experience: form.experience,
discount_percent: form.discount,
is_visible: form.isShow,
status: 1 // 默认启用
})
if (resId != null) {
uni.showToast({ title: '保存成功' })
closeDrawer()
loadLevelList()
} else {
uni.showToast({ title: '保存失败', icon: 'none' })
}
} catch (e) {
uni.showToast({ title: '保存出错', icon: 'none' })
}
}
</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>