H5的等级设置完成
This commit is contained in:
parent
93d2871525
commit
a9e8dad812
|
|
@ -0,0 +1,415 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>时尚服装店 - 等级编辑</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
.header-bg {
|
||||
background-color: #4CAF50; /* Green from screenshot */
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #4CAF50; /* Green from screenshot */
|
||||
color: white;
|
||||
}
|
||||
.btn-secondary {
|
||||
background-color: #6c757d; /* Gray from screenshot */
|
||||
color: white;
|
||||
}
|
||||
.table-header {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 48px; /* Adjusted width for better visual match */
|
||||
height: 28px; /* Adjusted height for better visual match */
|
||||
}
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 28px; /* Half of height for rounded corners */
|
||||
}
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px; /* Adjusted size for better visual match */
|
||||
width: 20px; /* Adjusted size for better visual match */
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: #4CAF50; /* Green when checked */
|
||||
}
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #4CAF50;
|
||||
}
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(20px); /* Adjusted translation */
|
||||
-ms-transform: translateX(20px);
|
||||
transform: translateX(20px);
|
||||
}
|
||||
/* Styles for the in-place detail expansion */
|
||||
.level-details-row {
|
||||
background-color: #f9fafb; /* Light background for expanded row */
|
||||
}
|
||||
.detail-content-wrapper {
|
||||
background-color: white;
|
||||
border-left: 4px solid #4CAF50; /* Green vertical line */
|
||||
padding: 1rem;
|
||||
margin: 1rem 0; /* Adjust margin for better fit within table cell */
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.detail-label {
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
color: #374151; /* text-gray-700 */
|
||||
}
|
||||
.detail-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.detail-input {
|
||||
border: 1px solid #d1d5db; /* border-gray-300 */
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
padding: 0.5rem 0.75rem; /* px-3 py-2 */
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
width: 80px; /* Specific width for range inputs */
|
||||
text-align: center;
|
||||
outline: none;
|
||||
}
|
||||
.detail-input:focus {
|
||||
border-color: #4CAF50; /* focus:ring-green-500 */
|
||||
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); /* focus:ring-2 */
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col">
|
||||
<header class="header-bg text-white p-4 flex items-center shadow-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left mr-4">
|
||||
<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>
|
||||
</svg>
|
||||
<h1 class="text-lg font-semibold">时尚服装店 - 等级编辑</h1>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 p-4 md:p-6 bg-white shadow-lg rounded-lg m-4">
|
||||
<div class="flex justify-end space-x-3 mb-6">
|
||||
<button class="btn-secondary px-6 py-2 rounded-md text-sm font-medium">关闭</button>
|
||||
<button class="btn-primary px-6 py-2 rounded-md text-sm font-medium">提交</button>
|
||||
</div>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-lg font-semibold mb-4">等级编辑</h2>
|
||||
<div class="overflow-x-auto border rounded-md">
|
||||
<table class="w-full divide-y divide-gray-200">
|
||||
<thead class="table-header">
|
||||
<tr>
|
||||
<th scope="col" class="px-3 py-3 sm:px-4 md:px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">等级</th>
|
||||
<th scope="col" class="px-3 py-3 sm:px-4 md:px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">等级名称</th>
|
||||
<th scope="col" class="px-3 py-3 sm:px-4 md:px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">等级详情</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200" id="level-table-body">
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">LV1</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6">
|
||||
<input type="text" value="铜牌会员" class="border border-gray-300 rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-green-500">
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="btn-primary px-4 py-2 rounded-md text-sm font-medium expand-details-btn">展开详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">LV2</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6">
|
||||
<input type="text" value="银牌会员" class="border border-gray-300 rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-green-500">
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="btn-primary px-4 py-2 rounded-md text-sm font-medium expand-details-btn">展开详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">LV3</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6">
|
||||
<input type="text" value="金牌会员" class="border border-gray-300 rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-green-500">
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="btn-primary px-4 py-2 rounded-md text-sm font-medium expand-details-btn">展开详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">LV4</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6">
|
||||
<input type="text" value="钻石会员" class="border border-gray-300 rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-green-500">
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="btn-primary px-4 py-2 rounded-md text-sm font-medium expand-details-btn">展开详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-lg font-semibold mb-4">积分有效期设置</h2>
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<label for="points-expiry" class="text-sm font-medium text-gray-700">积分有效期</label>
|
||||
<input type="number" id="points-expiry" value="365" class="border border-gray-300 rounded-md px-3 py-2 text-sm w-24 text-center focus:outline-none focus:ring-2 focus:ring-green-500">
|
||||
<span class="text-sm text-gray-700">天</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">积分获得后的有效期，超过期限自动清零</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold mb-4">积分任务管理</h2>
|
||||
<div class="overflow-x-auto border rounded-md">
|
||||
<table class="w-full divide-y divide-gray-200">
|
||||
<thead class="table-header">
|
||||
<tr>
|
||||
<th scope="col" class="px-3 py-3 sm:px-4 md:px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务名称</th>
|
||||
<th scope="col" class="px-3 py-3 sm:px-4 md:px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务描述</th>
|
||||
<th scope="col" class="px-3 py-3 sm:px-4 md:px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否启用</th>
|
||||
<th scope="col" class="px-3 py-3 sm:px-4 md:px-6 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">每日签到</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 text-sm text-gray-500">每日登录系统完成签到任务</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300">设置</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">浏览商品</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 text-sm text-gray-500">浏览商品详情页面</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300">设置</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">购买商品</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 text-sm text-gray-500">成功购买商品后获得积分奖励</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300">设置</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">分享商品</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 text-sm text-gray-500">分享商品到社交媒体</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300">设置</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap text-sm font-medium text-gray-900">评价商品</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 text-sm text-gray-500">对购买的商品进行评价</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="px-3 py-4 sm:px-4 md:px-6 whitespace-nowrap">
|
||||
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300">设置</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const expandButtons = document.querySelectorAll('.expand-details-btn');
|
||||
let currentlyExpandedRow = null; // To keep track of the currently expanded detail row
|
||||
|
||||
// HTML content for the expanded detail section
|
||||
const LEVEL_DETAIL_HTML_CONTENT = `
|
||||
<td colspan="3">
|
||||
<div class="detail-content-wrapper">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">成长值范围</span>
|
||||
<div class="detail-value">
|
||||
<input type="number" value="1201" class="detail-input">
|
||||
<span>-</span>
|
||||
<input type="number" value="9999" class="detail-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">开启会员折扣</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="enable-discount-toggle" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="detail-row discount-rate-row">
|
||||
<span class="detail-label">折扣率(%)</span>
|
||||
<div class="detail-value">
|
||||
<input type="number" value="20" class="detail-input w-20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">开启积分兑换</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="enable-points-exchange-toggle" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">开启生日优惠券</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="enable-birthday-coupon-toggle" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="detail-row birthday-coupon-settings-row">
|
||||
<span class="detail-label">生日优惠券设置</span>
|
||||
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300">添加优惠券</button>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">开启生日双倍积分</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="enable-double-points-toggle" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center space-x-4 mt-8 mb-4">
|
||||
<button class="btn-primary px-6 py-2 rounded-md text-sm font-medium">添加新等级</button>
|
||||
<button class="bg-red-500 text-white px-6 py-2 rounded-md text-sm font-medium">删除等级</button>
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
|
||||
expandButtons.forEach(button => {
|
||||
button.addEventListener('click', (event) => {
|
||||
const clickedMainRow = event.target.closest('tr');
|
||||
const potentialDetailRow = clickedMainRow.nextElementSibling; // Check the next sibling
|
||||
|
||||
// If there's an already expanded row and it's not the one we're about to open/close
|
||||
if (currentlyExpandedRow && currentlyExpandedRow !== potentialDetailRow) {
|
||||
currentlyExpandedRow.classList.add('hidden');
|
||||
// Find the button that opened the previously expanded row and reset its text
|
||||
const prevButton = currentlyExpandedRow.previousElementSibling.querySelector('.expand-details-btn');
|
||||
if (prevButton) {
|
||||
prevButton.textContent = '展开详情';
|
||||
}
|
||||
}
|
||||
|
||||
if (potentialDetailRow && potentialDetailRow.classList.contains('level-details-row')) {
|
||||
// If the detail row already exists, just toggle its visibility
|
||||
potentialDetailRow.classList.toggle('hidden');
|
||||
if (potentialDetailRow.classList.contains('hidden')) {
|
||||
event.target.textContent = '展开详情';
|
||||
currentlyExpandedRow = null;
|
||||
} else {
|
||||
event.target.textContent = '收起详情';
|
||||
currentlyExpandedRow = potentialDetailRow;
|
||||
}
|
||||
} else {
|
||||
// If the detail row doesn't exist, create and insert it
|
||||
const newDetailRow = document.createElement('tr');
|
||||
newDetailRow.classList.add('level-details-row');
|
||||
newDetailRow.innerHTML = LEVEL_DETAIL_HTML_CONTENT;
|
||||
clickedMainRow.after(newDetailRow); // Insert after the current row
|
||||
|
||||
// Attach event listeners to toggles within the newDetailRow
|
||||
const detailContentDiv = newDetailRow.querySelector('.detail-content-wrapper');
|
||||
|
||||
const enableDiscountToggle = detailContentDiv.querySelector('.enable-discount-toggle');
|
||||
const discountRateRow = detailContentDiv.querySelector('.discount-rate-row');
|
||||
|
||||
const enableBirthdayCouponToggle = detailContentDiv.querySelector('.enable-birthday-coupon-toggle');
|
||||
const birthdayCouponSettingsRow = detailContentDiv.querySelector('.birthday-coupon-settings-row');
|
||||
|
||||
const updateDependentRows = () => {
|
||||
if (enableDiscountToggle) {
|
||||
discountRateRow.style.display = enableDiscountToggle.checked ? 'flex' : 'none';
|
||||
}
|
||||
if (enableBirthdayCouponToggle) {
|
||||
birthdayCouponSettingsRow.style.display = enableBirthdayCouponToggle.checked ? 'flex' : 'none';
|
||||
}
|
||||
};
|
||||
|
||||
if (enableDiscountToggle) enableDiscountToggle.addEventListener('change', updateDependentRows);
|
||||
if (enableBirthdayCouponToggle) enableBirthdayCouponToggle.addEventListener('change', updateDependentRows);
|
||||
updateDependentRows(); // Initial call to set correct state
|
||||
|
||||
event.target.textContent = '收起详情';
|
||||
currentlyExpandedRow = newDetailRow;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue