1070 lines
26 KiB
Vue
1070 lines
26 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="navbar">
|
||
|
||
<view class="nav-title">分类管理</view>
|
||
<view class="nav-more">
|
||
<text class="iconfont">···</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索框 -->
|
||
<view class="search-bar">
|
||
<view class="search-input">
|
||
<!-- <text>🔍</text> -->
|
||
<uni-icons class="search-icon" type="search" size="18" color="#999"></uni-icons>
|
||
<input
|
||
type="text"
|
||
placeholder="搜索分类名称"
|
||
v-model="searchText"
|
||
class="input"
|
||
@input="handleSearchInput"
|
||
@confirm="handleSearchConfirm"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 公告栏 -->
|
||
<view class="notice-bar">
|
||
<view class="notice-icon">ⓘ</view>
|
||
<text class="notice-text">线上渠道分类展示规则公告</text>
|
||
<view class="notice-action" @click="viewNotice">查看 ></view>
|
||
</view>
|
||
|
||
<!-- 分类列表主体 -->
|
||
<view class="category-list">
|
||
<!-- 1. 非处方药(OTC) - 系统固定 -->
|
||
<view class="category-item">
|
||
<view class="category-header" @click="toggleExpand('otc')">
|
||
<text class="expand-icon">{{ expanded.otc ? '▼' : '▶' }}</text>
|
||
<text class="category-name">非处方药(OTC)</text>
|
||
<view class="category-actions" @click.stop="showActions('otc', 1)">
|
||
<text class="iconfont">···</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="expanded.otc" class="sub-category-group level2">
|
||
<view class="sub-category-item">
|
||
<text class="sub-category-name">甲类非处方药</text>
|
||
<view class="category-actions" @click.stop="showActions('otc-1', 2)">
|
||
<text class="iconfont">···</text>
|
||
</view>
|
||
</view>
|
||
<view class="sub-category-item">
|
||
<text class="sub-category-name">乙类非处方药</text>
|
||
<view class="category-actions" @click.stop="showActions('otc-2', 2)">
|
||
<text class="iconfont">···</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 2. 处方药(RX) - 系统固定 -->
|
||
<view class="category-item">
|
||
<view class="category-header no-expand">
|
||
<text class="expand-icon placeholder"></text>
|
||
<text class="category-name">处方药(RX)</text>
|
||
<view class="category-actions" @click.stop="showActions('rx', 1)">
|
||
<text class="iconfont">···</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 3. 兽用非处方药 - 系统固定 -->
|
||
<view class="category-item">
|
||
<view class="category-header no-expand">
|
||
<text class="expand-icon placeholder"></text>
|
||
<text class="category-name">兽用非处方药</text>
|
||
<view class="category-actions" @click.stop="showActions('vetOtc', 1)">
|
||
<text class="iconfont">···</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 4. 兽用处方药 - 系统固定 -->
|
||
<view class="category-item">
|
||
<view class="category-header no-expand">
|
||
<text class="expand-icon placeholder"></text>
|
||
<text class="category-name">兽用处方药</text>
|
||
<view class="category-actions" @click.stop="showActions('vetRx', 1)">
|
||
<text class="iconfont">···</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading">
|
||
<text>加载中...</text>
|
||
</view>
|
||
|
||
<!-- 5. 自定义分类（从API获取） -->
|
||
<view v-for="category in categories" :key="category.id" class="category-item">
|
||
<!-- 一级分类头部 -->
|
||
<view
|
||
class="category-header"
|
||
@click="toggleExpand(category.id)"
|
||
>
|
||
<text class="expand-icon">{{ expanded[category.id] ? '▼' : '▶' }}</text>
|
||
<text class="category-name">{{ category.classificationName }}</text>
|
||
<view class="menu-container" style="position: relative;">
|
||
<view class="menu-btn" @click.stop="toggleMenuOptions(category.id, 1)">
|
||
<text class="menu-icon">···</text>
|
||
</view>
|
||
<!-- 菜单选项列表 -->
|
||
<view v-if="showMenuOptions && selectedCategoryId === category.id" class="menu-options">
|
||
<!-- 重命名选项 -->
|
||
<view class="menu-option" @click.stop="showRenameDialog(category.id)">
|
||
<text class="rename-icon">✏️</text>
|
||
<text>重命名</text>
|
||
</view>
|
||
<!-- 删除分类选项 -->
|
||
<view class="menu-option delete-option" @click.stop="showDeleteConfirm(category.id)">
|
||
<text class="trash-icon">🗑️</text>
|
||
<text>删除分类</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 二级分类区域 -->
|
||
<view v-if="expanded[category.id]" class="sub-category-group level2">
|
||
<!-- 循环渲染每一个二级分类 -->
|
||
<view v-for="subCategory in category.children" :key="subCategory.id">
|
||
|
||
<!-- 二级分类条目 -->
|
||
<view
|
||
class="sub-category-item"
|
||
@click="toggleExpand(subCategory.id)"
|
||
>
|
||
<text class="expand-icon">{{ expanded[subCategory.id] ? '▼' : '▶' }}</text>
|
||
<text class="sub-category-name">{{ subCategory.classificationName }}</text>
|
||
<view class="menu-container" style="position: relative;">
|
||
<view class="menu-btn" @click.stop="toggleMenuOptions(subCategory.id, 2)">
|
||
<text class="menu-icon">···</text>
|
||
</view>
|
||
<!-- 菜单选项列表 -->
|
||
<view v-if="showMenuOptions && selectedCategoryId === subCategory.id" class="menu-options">
|
||
<!-- 重命名选项 -->
|
||
<view class="menu-option" @click.stop="showRenameDialog(subCategory.id)">
|
||
<text class="rename-icon">✏️</text>
|
||
<text>重命名</text>
|
||
</view>
|
||
<!-- 删除分类选项 -->
|
||
<view class="menu-option delete-option" @click.stop="showDeleteConfirm(subCategory.id)">
|
||
<text class="trash-icon">🗑️</text>
|
||
<text>删除分类</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 🔴 核心修改：三级区域直接放在二级循环内部 -->
|
||
<!-- 这样三级内容就会紧跟在对应的二级分类下面，不会乱跑 -->
|
||
<view v-if="expanded[subCategory.id]" class="sub-category-group level3">
|
||
<!-- 渲染三级分类列表 -->
|
||
<view
|
||
v-for="thirdCategory in subCategory.children"
|
||
:key="thirdCategory.id"
|
||
class="sub-category-item no-expand"
|
||
>
|
||
<text class="expand-icon placeholder"></text>
|
||
<text class="sub-category-name">{{ thirdCategory.classificationName }}</text>
|
||
<view class="menu-container" style="position: relative;">
|
||
<view class="menu-btn" @click.stop="toggleMenuOptions(thirdCategory.id, 3)">
|
||
<text class="menu-icon">···</text>
|
||
</view>
|
||
<!-- 菜单选项列表 -->
|
||
<view v-if="showMenuOptions && selectedCategoryId === thirdCategory.id" class="menu-options">
|
||
<!-- 重命名选项 -->
|
||
<view class="menu-option" @click.stop="showRenameDialog(thirdCategory.id)">
|
||
<text class="rename-icon">✏️</text>
|
||
<text>重命名</text>
|
||
</view>
|
||
<!-- 删除分类选项 -->
|
||
<view class="menu-option delete-option" @click.stop="showDeleteConfirm(thirdCategory.id)">
|
||
<text class="trash-icon">🗑️</text>
|
||
<text>删除分类</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 三级添加按钮 -->
|
||
<view class="add-sub-btn" @click="openCreateModal(subCategory.id, 3)">
|
||
<text class="add-icon">+</text>
|
||
<text>添加子分类</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 二级添加按钮（放在二级循环结束后，作为整个二级区域的最后一项） -->
|
||
<view class="add-sub-btn" @click="openCreateModal(category.id, 2)">
|
||
<text class="add-icon">+</text>
|
||
<text>添加子分类</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 添加一级分类按钮 -->
|
||
<view class="add-primary-btn" @click="openCreateModal('', 1)">
|
||
<text class="add-icon">+</text>
|
||
<text>添加一级分类</text>
|
||
</view>
|
||
|
||
<!-- 创建新分类弹窗 -->
|
||
<view v-if="createModal.show" class="modal-mask" @click="closeCreateModal">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="modal-title">创建新分类</view>
|
||
<view class="modal-input-wrap">
|
||
<input
|
||
type="text"
|
||
placeholder="请输入分类名称"
|
||
v-model="createModal.categoryName"
|
||
class="modal-input"
|
||
/>
|
||
</view>
|
||
<view class="modal-buttons">
|
||
<view class="modal-btn cancel" @click="closeCreateModal">取消</view>
|
||
<view class="modal-btn confirm" @click="createCategory">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作菜单弹窗 -->
|
||
<view v-if="actionSheet.show" class="action-sheet-mask" @click="actionSheet.show = false">
|
||
<view class="action-sheet">
|
||
<view class="action-item" v-for="(action, index) in actionSheet.actions" :key="index" @click="handleActionSelect(index)">
|
||
{{ action.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 重命名分类弹窗 -->
|
||
<view v-if="renameDialogVisible" class="dialog-overlay">
|
||
<view class="dialog">
|
||
<view class="dialog-title">修改分类名称</view>
|
||
<!-- 输入框 -->
|
||
<view class="input-wrapper">
|
||
<input
|
||
v-model="renameCategoryName"
|
||
type="text"
|
||
class="dialog-input"
|
||
placeholder="请输入分类名称"
|
||
/>
|
||
</view>
|
||
<view class="dialog-buttons">
|
||
<view class="cancel-btn" @click="closeRenameDialog">取消</view>
|
||
<view class="confirm-btn" @click="confirmRename">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { addClassification, getClassificationTree, updateClassification, deleteClassification } from '@/api/product'
|
||
import { getStoreInfo } from '@/utils/auth'
|
||
|
||
export default {
|
||
onLoad() {
|
||
this.loadClassificationTree();
|
||
},
|
||
data() {
|
||
return {
|
||
searchText: '',
|
||
categories: [],
|
||
loading: false,
|
||
expanded: {
|
||
otc: true
|
||
},
|
||
actionSheet: {
|
||
show: false,
|
||
actions: [],
|
||
current: { key: '', level: 0 }
|
||
},
|
||
createModal: {
|
||
show: false,
|
||
categoryName: '',
|
||
parentKey: '',
|
||
level: 0
|
||
},
|
||
// 菜单选项相关
|
||
showMenuOptions: false,
|
||
selectedCategoryId: null,
|
||
selectedCategoryLevel: null,
|
||
// 重命名弹窗相关
|
||
renameDialogVisible: false,
|
||
renameCategoryId: null,
|
||
renameCategoryName: ''
|
||
};
|
||
},
|
||
methods: {
|
||
initExpandedStates(categories) {
|
||
for (const category of categories) {
|
||
if (!this.expanded[category.id]) {
|
||
this.$set(this.expanded, category.id, true); // 默认展开
|
||
}
|
||
if (category.children && category.children.length > 0) {
|
||
this.initExpandedStates(category.children);
|
||
}
|
||
}
|
||
},
|
||
loadClassificationTree() {
|
||
this.loading = true;
|
||
const storeInfo = getStoreInfo();
|
||
const storeId = storeInfo ? storeInfo.storeId : 1;
|
||
|
||
getClassificationTree(storeId, this.searchText)
|
||
.then(res => {
|
||
if (res.code === 200) {
|
||
this.categories = res.data || [];
|
||
this.initExpandedStates(this.categories);
|
||
} else {
|
||
uni.showToast({ title: '获取分类数据失败', icon: 'none' });
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('获取分类树失败:', error);
|
||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
viewNotice() {
|
||
uni.showToast({ title: '查看公告详情', icon: 'none' });
|
||
},
|
||
toggleExpand(key) {
|
||
this.$set(this.expanded, key, !this.expanded[key]);
|
||
},
|
||
showActions(key, level) {
|
||
this.actionSheet.current = { key, level };
|
||
const isSystemFixed = ['otc', 'rx', 'vetOtc', 'vetRx'].includes(key);
|
||
const isSystemChild = ['otc-1', 'otc-2'].includes(key);
|
||
let actions = [];
|
||
|
||
if (level === 1) {
|
||
actions = [{ name: '编辑' }];
|
||
if (!isSystemFixed) {
|
||
actions.push({ name: '添加子分类' }, { name: '删除' });
|
||
}
|
||
} else if (level === 2) {
|
||
actions = [{ name: '编辑' }];
|
||
if (!isSystemChild) {
|
||
actions.push({ name: '添加子分类' }, { name: '删除' });
|
||
}
|
||
} else if (level === 3) {
|
||
actions = [{ name: '编辑' }, { name: '删除' }];
|
||
}
|
||
|
||
this.actionSheet.actions = actions;
|
||
this.actionSheet.show = true;
|
||
},
|
||
handleActionSelect(index) {
|
||
const { key, level } = this.actionSheet.current;
|
||
const action = this.actionSheet.actions[index].name;
|
||
|
||
switch (action) {
|
||
case '编辑':
|
||
this.editCategory(key, level);
|
||
break;
|
||
case '添加子分类':
|
||
this.openCreateModal(key, level + 1);
|
||
break;
|
||
case '删除':
|
||
this.deleteCategory(key, level);
|
||
break;
|
||
}
|
||
this.actionSheet.show = false;
|
||
},
|
||
openCreateModal(parentKey, level) {
|
||
this.createModal = {
|
||
show: true,
|
||
categoryName: '',
|
||
parentKey,
|
||
level
|
||
};
|
||
},
|
||
closeCreateModal() {
|
||
this.createModal.show = false;
|
||
this.createModal.categoryName = '';
|
||
},
|
||
createCategory() {
|
||
if (!this.createModal.categoryName.trim()) {
|
||
uni.showToast({ title: '请输入分类名称', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
const { parentKey, level, categoryName } = this.createModal;
|
||
const storeInfo = getStoreInfo();
|
||
const storeId = storeInfo ? storeInfo.storeId : 2;
|
||
|
||
const params = {
|
||
classificationName: categoryName,
|
||
parentId: parentKey || 0,
|
||
storeId: storeId
|
||
};
|
||
|
||
addClassification(params)
|
||
.then(res => {
|
||
uni.showToast({
|
||
title: `成功创建${level === 1 ? '一级' : level === 2 ? '二级' : '三级'}分类`,
|
||
icon: 'success'
|
||
});
|
||
this.closeCreateModal();
|
||
this.loadClassificationTree();
|
||
})
|
||
.catch(error => {
|
||
console.error('创建分类失败:', error);
|
||
uni.showToast({ title: '创建分类失败', icon: 'none' });
|
||
});
|
||
},
|
||
findCategoryName(categories, id) {
|
||
for (const category of categories) {
|
||
if (category.id === id) return category.classificationName;
|
||
if (category.children && category.children.length > 0) {
|
||
const found = this.findCategoryName(category.children, id);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
return '分类名称';
|
||
},
|
||
editCategory(key, level) {
|
||
let oldName;
|
||
const systemCategoryNames = {
|
||
otc: '非处方药(OTC)', rx: '处方药(RX)', vetOtc: '兽用非处方药', vetRx: '兽用处方药',
|
||
'otc-1': '甲类非处方药', 'otc-2': '乙类非处方药'
|
||
};
|
||
|
||
if (systemCategoryNames[key]) {
|
||
oldName = systemCategoryNames[key];
|
||
} else {
|
||
oldName = this.findCategoryName(this.categories, key);
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '编辑分类名称',
|
||
editable: true,
|
||
content: oldName,
|
||
success: (res) => {
|
||
if (res.confirm && res.content) {
|
||
uni.showToast({ title: '编辑成功', icon: 'success' });
|
||
// TODO: 调用编辑API
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 切换菜单选项的显示/隐藏
|
||
toggleMenuOptions(categoryId, level) {
|
||
if (this.showMenuOptions && this.selectedCategoryId === categoryId) {
|
||
// 如果点击的是当前显示选项的分类，关闭选项
|
||
this.showMenuOptions = false;
|
||
this.selectedCategoryId = null;
|
||
} else {
|
||
// 否则显示当前分类的菜单选项
|
||
this.showMenuOptions = true;
|
||
this.selectedCategoryId = categoryId;
|
||
this.selectedCategoryLevel = level;
|
||
}
|
||
},
|
||
// 显示重命名弹窗
|
||
showRenameDialog(categoryId) {
|
||
// 关闭菜单选项
|
||
this.showMenuOptions = false;
|
||
this.selectedCategoryId = null;
|
||
|
||
// 查找分类名称
|
||
const categoryName = this.findCategoryName(this.categories, categoryId);
|
||
|
||
// 打开重命名弹窗
|
||
this.renameCategoryId = categoryId;
|
||
this.renameCategoryName = categoryName;
|
||
this.renameDialogVisible = true;
|
||
},
|
||
// 查找分类名称（递归）
|
||
findCategoryName(categories, id) {
|
||
for (const category of categories) {
|
||
if (category.id === id) {
|
||
return category.classificationName;
|
||
}
|
||
if (category.children && category.children.length > 0) {
|
||
const found = this.findCategoryName(category.children, id);
|
||
if (found) {
|
||
return found;
|
||
}
|
||
}
|
||
}
|
||
return '';
|
||
},
|
||
// 显示删除确认弹窗
|
||
showDeleteConfirm(categoryId) {
|
||
// 关闭菜单选项
|
||
this.showMenuOptions = false;
|
||
this.selectedCategoryId = null;
|
||
|
||
// 使用现有的删除分类方法
|
||
this.deleteCategory(categoryId, this.selectedCategoryLevel);
|
||
},
|
||
// 删除分类
|
||
deleteCategory(key, level) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定删除该分类吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 调用删除API
|
||
deleteClassification(key)
|
||
.then(res => {
|
||
if (res.code === 200) {
|
||
uni.showToast({ title: '删除成功', icon: 'success' });
|
||
// 刷新分类列表
|
||
this.loadClassificationTree();
|
||
} else {
|
||
uni.showToast({ title: res.msg || '删除失败', icon: 'none' });
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('删除分类失败:', error);
|
||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 关闭重命名弹窗
|
||
closeRenameDialog() {
|
||
this.renameDialogVisible = false;
|
||
this.renameCategoryId = null;
|
||
this.renameCategoryName = '';
|
||
},
|
||
// 查找分类的parentId（递归）
|
||
findCategoryParentId(categories, id) {
|
||
for (const category of categories) {
|
||
// 检查当前分类的子分类
|
||
if (category.children && category.children.length > 0) {
|
||
for (const child of category.children) {
|
||
if (child.id === id) {
|
||
return category.id; // 返回父分类ID
|
||
}
|
||
// 检查三级分类
|
||
if (child.children && child.children.length > 0) {
|
||
const found = this.findCategoryParentId([child], id);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
// 递归检查二级分类
|
||
const found = this.findCategoryParentId(category.children, id);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
// 如果找不到（说明是一级分类），返回0
|
||
return 0;
|
||
},
|
||
|
||
// 确认重命名
|
||
confirmRename() {
|
||
if (!this.renameCategoryName.trim()) {
|
||
uni.showToast({ title: '请输入分类名称', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
// 获取storeId
|
||
const storeInfo = getStoreInfo();
|
||
const storeId = storeInfo ? storeInfo.storeId : 2;
|
||
|
||
// 查找分类的parentId
|
||
const parentId = this.findCategoryParentId(this.categories, this.renameCategoryId);
|
||
|
||
// 构造请求参数
|
||
const params = {
|
||
id: this.renameCategoryId,
|
||
classificationName: this.renameCategoryName,
|
||
parentId: parentId,
|
||
storeId: storeId
|
||
};
|
||
|
||
// 调用重命名API
|
||
updateClassification(params)
|
||
.then(res => {
|
||
if (res.code === 200) {
|
||
uni.showToast({ title: '重命名成功', icon: 'success' });
|
||
this.closeRenameDialog();
|
||
this.loadClassificationTree();
|
||
} else {
|
||
uni.showToast({ title: res.msg || '重命名失败', icon: 'none' });
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('重命名分类失败:', error);
|
||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||
});
|
||
},
|
||
|
||
// 搜索输入处理
|
||
handleSearchInput() {
|
||
// 触发分类搜索
|
||
this.loadClassificationTree();
|
||
},
|
||
|
||
// 搜索确认处理
|
||
handleSearchConfirm() {
|
||
// 触发分类搜索
|
||
this.loadClassificationTree();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
background-color: #F5F5F5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.navbar {
|
||
background-color: #E62E24;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 20rpx;
|
||
}
|
||
|
||
.nav-back, .nav-more {
|
||
width: 60rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.search-bar {
|
||
padding: 20rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.search-input {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #F5F5F5;
|
||
border-radius: 6rpx;
|
||
padding: 0 20rpx;
|
||
height: 72rpx;
|
||
}
|
||
|
||
.search-icon {
|
||
color: #999999;
|
||
margin-right: 12rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.input {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
|
||
.notice-bar {
|
||
background-color: #FFF9E8;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 18rpx 20rpx;
|
||
font-size: 26rpx;
|
||
color: #8B572A;
|
||
margin: 0 20rpx 20rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.notice-icon {
|
||
margin-right: 12rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.notice-action {
|
||
margin-left: auto;
|
||
color: #E62E24;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.category-list {
|
||
padding: 0 20rpx 20rpx;
|
||
}
|
||
|
||
.category-item {
|
||
background-color: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
box-shadow: 0 1rpx 2rpx rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 32rpx 28rpx;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
border-bottom: 1rpx solid #F0F0F0;
|
||
}
|
||
|
||
.no-expand {
|
||
pointer-events: none;
|
||
}
|
||
.no-expand .category-actions {
|
||
pointer-events: auto;
|
||
}
|
||
/* 恢复菜单容器和按钮的点击事件 */
|
||
.no-expand .menu-container,
|
||
.no-expand .menu-btn {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.expand-icon {
|
||
width: 32rpx;
|
||
text-align: center;
|
||
margin-right: 14rpx;
|
||
color: #999999;
|
||
font-size: 22rpx;
|
||
}
|
||
.expand-icon.placeholder {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.category-name {
|
||
flex: 1;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.category-actions {
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 层级缩进样式 */
|
||
.sub-category-group {
|
||
background-color: #FAFAFA;
|
||
}
|
||
.level2 {
|
||
padding-left: 56rpx;
|
||
}
|
||
.level3 {
|
||
padding-left: 112rpx;
|
||
}
|
||
|
||
.sub-category-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 26rpx 0;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
border-bottom: 1rpx solid #F0F0F0;
|
||
margin: 0 28rpx;
|
||
}
|
||
|
||
.sub-category-name {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 添加按钮样式 */
|
||
.add-sub-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 26rpx 0;
|
||
color: #1677FF;
|
||
font-size: 28rpx;
|
||
background-color: #FAFAFA;
|
||
margin: 0 28rpx;
|
||
border-radius: 6rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.add-icon {
|
||
margin-right: 8rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.add-primary-btn {
|
||
background-color: #E62E24;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32rpx;
|
||
margin: 0 20rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: #FFFFFF;
|
||
width: 80%;
|
||
border-radius: 12rpx;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.modal-title {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.modal-input-wrap {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.modal-input {
|
||
width: 100%;
|
||
height: 70rpx;
|
||
border: 1rpx solid #E5E5E5;
|
||
border-radius: 6rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
outline: none;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.modal-buttons {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.modal-btn {
|
||
width: 48%;
|
||
height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.modal-btn.cancel {
|
||
background: #F5F5F5;
|
||
color: #333333;
|
||
}
|
||
|
||
.modal-btn.confirm {
|
||
background: #E62E24;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 菜单容器 */
|
||
.menu-container {
|
||
position: relative;
|
||
}
|
||
|
||
/* 菜单按钮 */
|
||
.menu-btn {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
/* 菜单选项列表 */
|
||
.menu-options {
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
background-color: #fff;
|
||
border: 1rpx solid #f0f0f0;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
z-index: 1000;
|
||
margin-top: 10rpx;
|
||
min-width: 200rpx;
|
||
}
|
||
|
||
/* 菜单项 */
|
||
.menu-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
font-size: 28rpx;
|
||
padding: 20rpx 30rpx;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
/* 菜单项 hover 效果 */
|
||
.menu-option:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* 重命名选项 */
|
||
.menu-option:not(.delete-option) {
|
||
color: #333;
|
||
}
|
||
|
||
/* 重命名图标 */
|
||
.rename-icon {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* 删除分类选项 */
|
||
.menu-option.delete-option {
|
||
color: #e62318;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
/* 垃圾桶图标 */
|
||
.menu-option .trash-icon {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* 加载状态样式 */
|
||
.loading {
|
||
text-align: center;
|
||
padding: 60rpx;
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.dialog-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.dialog {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
width: 85%;
|
||
max-width: 650rpx;
|
||
padding: 40rpx 50rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.dialog-title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: 40rpx;
|
||
color: #333;
|
||
}
|
||
|
||
/* 输入框样式 */
|
||
.input-wrapper {
|
||
position: relative;
|
||
margin-bottom: 40rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.dialog-input {
|
||
border: 1rpx solid #e5e5e5;
|
||
border-radius: 8rpx;
|
||
padding: 22rpx;
|
||
font-size: 30rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
background-color: #fff;
|
||
height: 88rpx;
|
||
line-height: normal;
|
||
}
|
||
|
||
.dialog-input:focus {
|
||
border-color: #e62318;
|
||
box-shadow: 0 0 0 2rpx rgba(230, 35, 24, 0.1);
|
||
}
|
||
|
||
/* 弹窗按钮 */
|
||
.dialog-buttons {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.cancel-btn {
|
||
flex: 1;
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
text-align: center;
|
||
padding: 24rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 30rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cancel-btn:active {
|
||
background-color: #e8e8e8;
|
||
}
|
||
|
||
.confirm-btn {
|
||
flex: 1;
|
||
background-color: #e62318;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding: 24rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 30rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.confirm-btn:active {
|
||
background-color: #d11f15;
|
||
}
|
||
|
||
.action-sheet-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.action-sheet {
|
||
background: #FFFFFF;
|
||
width: 100%;
|
||
border-radius: 12rpx 12rpx 0 0;
|
||
}
|
||
|
||
.action-item {
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
border-bottom: 1rpx solid #F0F0F0;
|
||
}
|
||
</style> |