u
This commit is contained in:
oneao committed
1 parent
098a061308
commit
994321d049
40 files changed
+1401
-359
No files matched your search
@@ -1,142 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>分类共享交互演示</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>记账弹出示例</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; padding: 20px; }
|
||||
h2 { margin-top: 20px; }
|
||||
ul { list-style: none; padding-left: 0; }
|
||||
li { padding: 5px 10px; margin: 3px 0; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.system { background-color: #d0ebff; }
|
||||
.family { background-color: #ffe5d0; }
|
||||
.user { background-color: #d0ffd8; }
|
||||
.hidden { display: none; }
|
||||
button { margin-left: 5px; }
|
||||
.container { display: flex; gap: 50px; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 弹出层 */
|
||||
.drawer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
padding: 16px;
|
||||
max-height: 80%;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* 收入/支出切换 */
|
||||
.type-switch {
|
||||
display: flex;
|
||||
background: #f0f0f0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.type-switch div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.type-switch div.active {
|
||||
background-color: #ff9f1c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 子分类横向滚动 */
|
||||
.sub-categories {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 12px;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sub-category {
|
||||
flex: 0 0 auto;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #fef6e4;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sub-category.active {
|
||||
background-color: #ff9f1c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.input-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.input-group label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 保存按钮 */
|
||||
.btn-save {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #ff9f1c;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>记账分类共享交互演示</h1>
|
||||
<div class="drawer">
|
||||
<!-- 收入/支出切换 -->
|
||||
<div class="type-switch">
|
||||
<div class="active" data-type="income">收入</div>
|
||||
<div data-type="expense">支出</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<h2>用户 A 视图</h2>
|
||||
<ul id="userAList"></ul>
|
||||
<!-- 子分类 -->
|
||||
<div class="sub-categories" id="subCategories">
|
||||
<div class="sub-category active" data-id="1">餐饮</div>
|
||||
<div class="sub-category" data-id="2">交通</div>
|
||||
<div class="sub-category" data-id="3">购物</div>
|
||||
<div class="sub-category" data-id="4">娱乐</div>
|
||||
<div class="sub-category" data-id="5">工资</div>
|
||||
<div class="sub-category" data-id="6">兼职</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>用户 B 视图</h2>
|
||||
<ul id="userBList"></ul>
|
||||
|
||||
<!-- 输入金额 -->
|
||||
<div class="input-group">
|
||||
<label>金额</label>
|
||||
<input type="number" placeholder="请输入金额">
|
||||
</div>
|
||||
|
||||
<!-- 输入备注 -->
|
||||
<div class="input-group">
|
||||
<label>备注</label>
|
||||
<input type="text" placeholder="输入备注">
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<button class="btn-save">保存</button>
|
||||
</div>
|
||||
|
||||
<h2>操作区（模拟修改）</h2>
|
||||
<p>选择用户修改系统分类或隐藏/重命名：</p>
|
||||
<select id="selectUser">
|
||||
<option value="A">用户 A</option>
|
||||
<option value="B">用户 B</option>
|
||||
</select>
|
||||
|
||||
<select id="selectCategory">
|
||||
</select>
|
||||
|
||||
<input type="text" id="newName" placeholder="新名字">
|
||||
<button id="updateName">修改名字</button>
|
||||
<button id="hideCategory">隐藏分类</button>
|
||||
|
||||
<script>
|
||||
// 系统默认分类
|
||||
const systemCategories = [
|
||||
{ id: 1, name: "餐饮" },
|
||||
{ id: 2, name: "交通" },
|
||||
{ id: 3, name: "购物" },
|
||||
{ id: 4, name: "工资" }
|
||||
];
|
||||
|
||||
// 家庭组 overlay（共享修改）
|
||||
const familyCategoryStatus = {
|
||||
// category_id: name
|
||||
};
|
||||
|
||||
// 用户个人状态
|
||||
const userStatus = {
|
||||
A: { hidden: [], customName: {} },
|
||||
B: { hidden: [], customName: {} }
|
||||
};
|
||||
|
||||
// 填充选择分类下拉
|
||||
const selectCategory = document.getElementById("selectCategory");
|
||||
systemCategories.forEach(cat => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = cat.id;
|
||||
opt.textContent = cat.name;
|
||||
selectCategory.appendChild(opt);
|
||||
// 收入/支出切换
|
||||
const typeSwitch = document.querySelectorAll('.type-switch div');
|
||||
typeSwitch.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
typeSwitch.forEach(i => i.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
// 可在此刷新子分类
|
||||
console.log('切换类型:', item.dataset.type);
|
||||
});
|
||||
});
|
||||
|
||||
// 渲染函数
|
||||
function render() {
|
||||
["A","B"].forEach(user => {
|
||||
const listEl = document.getElementById(`user${user}List`);
|
||||
listEl.innerHTML = "";
|
||||
|
||||
systemCategories.forEach(cat => {
|
||||
let displayName = cat.name;
|
||||
let cssClass = "system";
|
||||
|
||||
// 家庭共享修改覆盖
|
||||
if (familyCategoryStatus[cat.id]) {
|
||||
displayName = familyCategoryStatus[cat.id];
|
||||
cssClass = "family";
|
||||
}
|
||||
|
||||
// 用户个人自定义
|
||||
if (userStatus[user].customName[cat.id]) {
|
||||
displayName = userStatus[user].customName[cat.id];
|
||||
cssClass = "user";
|
||||
}
|
||||
|
||||
// 用户隐藏
|
||||
if (userStatus[user].hidden.includes(cat.id)) {
|
||||
cssClass += " hidden";
|
||||
}
|
||||
|
||||
const li = document.createElement("li");
|
||||
li.textContent = displayName;
|
||||
li.className = cssClass;
|
||||
listEl.appendChild(li);
|
||||
});
|
||||
// 子分类选择
|
||||
const subCategories = document.querySelectorAll('.sub-category');
|
||||
subCategories.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
subCategories.forEach(i => i.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
console.log('选择子分类:', item.textContent);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
render();
|
||||
|
||||
// 修改名字
|
||||
document.getElementById("updateName").onclick = () => {
|
||||
const user = document.getElementById("selectUser").value;
|
||||
const catId = parseInt(selectCategory.value);
|
||||
const newName = document.getElementById("newName").value.trim();
|
||||
if(!newName) return alert("请输入新名字");
|
||||
|
||||
if(user === "A") {
|
||||
// 用户 A 修改 → 家庭共享
|
||||
familyCategoryStatus[catId] = newName;
|
||||
} else {
|
||||
// 用户 B 修改 → 家庭共享
|
||||
familyCategoryStatus[catId] = newName;
|
||||
}
|
||||
render();
|
||||
document.getElementById("newName").value = "";
|
||||
};
|
||||
|
||||
// 隐藏分类
|
||||
document.getElementById("hideCategory").onclick = () => {
|
||||
const user = document.getElementById("selectUser").value;
|
||||
const catId = parseInt(selectCategory.value);
|
||||
userStatus[user].hidden.push(catId);
|
||||
render();
|
||||
};
|
||||
// 保存按钮
|
||||
document.querySelector('.btn-save').addEventListener('click', () => {
|
||||
const type = document.querySelector('.type-switch div.active').dataset.type;
|
||||
const category = document.querySelector('.sub-category.active').textContent;
|
||||
const amount = document.querySelectorAll('input')[0].value;
|
||||
const remark = document.querySelectorAll('input')[1].value;
|
||||
console.log({ type, category, amount, remark });
|
||||
alert('保存成功！');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
89
|
||||
Reference in new issue
Block a user