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