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-05 17:59:45 +08:00
parent 151f5a5e1a
commit 6b416e6a0a
17 changed files with 14 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

464
pages/mall/admin/user/grouping/index.uvue Normal file
View File

@@ -0,0 +1,464 @@
<template>
<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="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, reactive, computed } from 'vue'
// 分组数据
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">
.user-group-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.content-card {
background: #fff;
border-radius: 4px;
padding: 24px;
}
.action-bar {
margin-bottom: 20px;
display: flex;
flex-direction: row;
}
/* 按钮样式 */
.btn {
height: 32px;
line-height: 32px;
padding: 0 15px;
font-size: 14px;
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;
}
.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>