FTP鍒╁樊鏀跺叆璁＄畻鍣?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f0f2f5; min-height: 100vh; padding: 16px; } .container { max-width: 520px; margin: 0 auto; } /* 椤堕儴 Banner - 鏍规嵁Tab鍙樿壊 */ .banner { color: white; padding: 20px; border-radius: 16px 16px 0 0; text-align: center; transition: background 0.3s; } .banner.deposit { background: linear-gradient(135deg, #1a5a9e, #2a7fc1); } .banner.loan { background: linear-gradient(135deg, #6B4FAE, #8B6ED0); } .banner h1 { font-size: 20px; font-weight: 600; margin-bottom: 4px; } .banner p { font-size: 12px; opacity: 0.85; } /* Tab 鍒囨崲 */ .tabs { display: flex; background: #e8e8e8; border-radius: 0 0 12px 12px; margin-bottom: 16px; overflow: hidden; } .tab { flex: 1; padding: 14px; text-align: center; font-size: 14px; font-weight: 600; color: #666; cursor: pointer; border: none; background: none; transition: all 0.2s; } .tab.active { color: #fff; } .tab.deposit.active { background: #6BB9F0; } /* 娣¤摑鑹?*/ .tab.loan.active { background: #9B7EDE; } /* 娣＄传鑹?*/ /* 鍐呭鍖?*/ .content { display: none; padding: 20px; border-radius: 12px; margin-bottom: 16px; } .content.active { display: block; } .content.deposit { background: #EBF5FF; } /* 娣¤摑鑹茶儗鏅?*/ .content.loan { background: #F3EEFF; } /* 娣＄传鑹茶儗鏅?*/ /* 琛ㄥ崟 */ .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 500; } .form-group input, .form-group select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; background: #fff; color: #333; } .form-group input:focus, .form-group select:focus { outline: none; border-color: #6BB9F0; } .content.loan .form-group input:focus, .content.loan .form-group select:focus { border-color: #9B7EDE; } /* 鍒╃巼灞曠ず */ .rate-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 16px 0; } .rate-item { background: #fff; border-radius: 10px; padding: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .rate-item .r-label { font-size: 11px; color: #888; margin-bottom: 4px; } .rate-item .r-value { font-size: 18px; font-weight: 600; color: #333; } .rate-item .r-value.positive { color: #27ae60; } .rate-item .r-value.negative { color: #c62828; } /* 缁撴灉妗?*/ .result-box { background: linear-gradient(135deg, #6BB9F0, #6B8EE8); border-radius: 12px; padding: 16px; text-align: center; margin-top: 12px; border: 1px solid rgba(255,255,255,0.3); } .content.loan .result-box { background: linear-gradient(135deg, #9B7EDE, #8B6ED0); } .result-box .l-label { font-size: 13px; color: rgba(255,255,255,0.9); margin-bottom: 6px; } .result-box .value { font-size: 32px; font-weight: 700; color: #fff; } .result-box .unit { font-size: 12px; color: rgba(255,255,255,0.8); } /* 搴曢儴鎸夐挳 */ .admin-actions { display: flex; gap: 10px; margin-top: 16px; } .btn { flex: 1; padding: 12px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-deposit { background: #6BB9F0; color: white; } .btn-loan { background: #9B7EDE; color: white; } .btn-secondary { background: #f5f5f5; color: #666; } /* 澶囨敞鎻愮ず */ .remark-note { margin-top: 16px; padding: 12px; background: #fff8e1; border-radius: 8px; border-left: 4px solid #ffc107; font-size: 12px; color: #666; line-height: 1.5; } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.show { display: flex; } .modal { background: white; border-radius: 16px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; } .modal-header { padding: 16px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .modal-header h2 { font-size: 16px; color: #333; } .modal-close { background: none; border: none; font-size: 24px; color: #999; cursor: pointer; padding: 0; line-height: 1; } .modal-body { padding: 16px 20px; } /* 瀵嗙爜杈撳叆 */ .pwd-section { margin-bottom: 20px; } .pwd-section input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; } .pwd-section button { width: 100%; padding: 12px; background: #6BB9F0; color: white; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; margin-top: 8px; } /* 浜у搧绠＄悊琛ㄦ牸 */ .product-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; } .product-table th { background: #f5f5f5; padding: 8px 6px; text-align: left; font-weight: 600; color: #666; border-bottom: 1px solid #eee; } .product-table td { padding: 8px 6px; border-bottom: 1px solid #eee; } .product-table input { width: 70px; padding: 4px 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; } .product-table input:focus { outline: none; border-color: #6BB9F0; } /* 淇濆瓨鎸夐挳 */ .btn-save { width: 100%; padding: 14px; background: #6BB9F0; color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 16px; } .btn-save:hover { background: #5AAAE0; } /* 澶囨敞缂栬緫 */ .remark-textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; min-height: 100px; resize: vertical; } .remark-textarea:focus { outline: none; border-color: #6BB9F0; } /* Toast */ .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 300; display: none; } .toast.show { display: block; } </style> </head> <body>  <div class="tabs"> <button class="tab deposit active" onclick="switchTab('deposit')">瀛樻浜у搧</button> <button class="tab loan" onclick="switchTab('loan')">璐锋浜у搧</button> </div>  <div id="depositContent" class="content deposit active"> <div class="form-group"> <label>浜у搧绫诲瀷1</label> <select id="depType1" onchange="updateDepType2(); calculate();"> <option value="">璇烽€夋嫨</option> </select> </div> <div class="form-group"> <label>浜у搧绫诲瀷2</label> <select id="depType2" onchange="calculate()"> <option value="">璇烽€夋嫨</option> </select> </div> <div class="form-group"> <label>浜у搧鏈熼檺</label> <select id="depTerm" onchange="calculate()"> <option value="">璇烽€夋嫨</option> </select> </div> <div class="form-group"> <label>瀛樻閲戦锛堜竾鍏冿級</label> <input type="number" id="depAmount" placeholder="璇疯緭鍏ラ噾棰? oninput="calculate()" min="0"> </div> <div class="form-group"> <label>瀛樻鏃ユ湡</label> <input type="date" id="depStart" onchange="calculate()"> </div> <div class="form-group"> <label>鍙栨鏃ユ湡</label> <input type="date" id="depEnd" onchange="calculate()"> </div> <div class="form-group"> <label>瀵瑰浠锋牸锛?锛?/label> <input type="number" id="depCustomerRate" placeholder="璇疯緭鍏ュ瀹㈠埄鐜? oninput="calculate()" step="0.001" value="0.1"> </div> <div class="rate-grid"> <div class="rate-item"> <div class="r-label">瀵瑰浠锋牸</div> <div class="r-value" id="depCustomer">-</div> </div> <div class="rate-item"> <div class="r-label">璧勯噾姹犱环鏍?/div> <div class="r-value" id="depPool">-</div> </div> <div class="rate-item"> <div class="r-label">FTP鍒╁樊</div> <div class="r-value" id="depSpread">-</div> </div> </div> <div id="depDaysInfo" style="font-size:12px;color:#888;text-align:center;margin-top:8px;"></div> <div class="result-box"> <div class="l-label">鏈勾棰勪及瀛樻FTP鏀跺叆</div> <div class="value" id="depIncome">楼 0.00</div> <div class="unit">鍏?/div> </div> <div id="depositRemark" style="margin-top:12px;padding:10px;background:#fff3cd;border-radius:8px;font-size:12px;color:#666;line-height:1.5;"></div> </div>  <div id="loanContent" class="content loan"> <div class="form-group"> <label>浜у搧绫诲瀷</label> <select id="loanType" onchange="calculateLoan()"> <option value="">璇烽€夋嫨</option> </select> </div> <div class="form-group"> <label>璐锋鏈熼檺</label> <select id="loanTerm" onchange="calculateLoan()"> <option value="">璇烽€夋嫨</option> </select> </div> <div class="form-group"> <label>璐锋閲戦锛堜竾鍏冿級</label> <input type="number" id="loanAmount" placeholder="璇疯緭鍏ラ噾棰? oninput="calculateLoan()" min="0"> </div> <div class="form-group"> <label>璐锋鍙戞斁鏃ユ湡</label> <input type="date" id="loanStart" onchange="calculateLoan()"> </div> <div class="form-group"> <label>棰勪及杩樻鏃ユ湡</label> <input type="date" id="loanEnd" onchange="calculateLoan()"> </div> <div class="form-group"> <label>瀵瑰浠锋牸锛?锛?/label> <input type="number" id="loanCustomerRate" placeholder="璇疯緭鍏ュ瀹㈠埄鐜? oninput="calculateLoan()" step="0.001" value="0"> </div> <div class="rate-grid"> <div class="rate-item"> <div class="r-label">瀵瑰浠锋牸</div> <div class="r-value" id="loanCustomer">-</div> </div> <div class="rate-item"> <div class="r-label">璧勯噾姹犱环鏍?/div> <div class="r-value" id="loanPool">-</div> </div> <div class="rate-item"> <div class="r-label">FTP鍒╁樊</div> <div class="r-value" id="loanSpread">-</div> </div> </div> <div id="loanDaysInfo" style="font-size:12px;color:#888;text-align:center;margin-top:8px;"></div> <div style="background:linear-gradient(135deg,#9B7EDE,#8B6ED0);border-radius:12px;padding:16px;margin-top:12px;"> <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;"> <div style="text-align:center;"> <div style="font-size:13px;color:rgba(255,255,255,0.9);margin-bottom:6px;">鏈勾棰勪及璐锋FTP鏀跺叆</div> <div id="loanIncome" style="font-size:24px;font-weight:700;color:#fff;">楼 0.00</div> <div style="font-size:12px;color:rgba(255,255,255,0.8);">鍏?/div> </div> <div style="text-align:center;"> <div style="font-size:13px;color:rgba(255,255,255,0.9);margin-bottom:6px;">棰勪及鎷ㄥ閲戦</div> <div id="loanProvision" style="font-size:24px;font-weight:700;color:#fff;">楼 0.00</div> <div style="font-size:10px;color:rgba(255,255,255,0.7);">鍏?/div> </div> </div> <div style="font-size:10px;color:rgba(255,255,255,0.6);text-align:center;margin-top:6px;">(鑻ヨ繕娆炬棩鍦?026骞村簳鍚庯紝鎸夎捶娆鹃噾棰澝?%鑷姩璁＄畻)</div> </div> <div style="background:linear-gradient(135deg,#6B4FAE,#5A3E9D);border-radius:12px;padding:16px;margin-top:12px;text-align:center;"> <div style="font-size:13px;color:rgba(255,255,255,0.9);margin-bottom:6px;">棰勪及鏈勾鍑忓€煎悗钀ユ敹</div> <div id="loanRevenue" style="font-size:28px;font-weight:700;color:#fff;">楼 0.00</div> <div style="font-size:12px;color:rgba(255,255,255,0.8);">鍏?/div> </div> <div id="loanRemark" style="margin-top:12px;padding:10px;background:#fff3cd;border-radius:8px;font-size:12px;color:#666;line-height:1.5;"></div> </div>  <div style="margin-top: 24px; text-align: center;"> <button onclick="openModal('admin')" style="background: none; border: none; color: #aaa; font-size: 12px; cursor: pointer; padding: 8px;">鍚庡彴绠＄悊</button> </div> </div>  <div id="modal" class="modal-overlay" onclick="closeModalOnOverlay(event)"> <div class="modal"> <div class="modal-header"> <h2 id="modalTitle">绠＄悊</h2> <button class="modal-close" onclick="closeModal()">脳</button> </div> <div class="modal-body" id="modalBody"></div> </div> </div>  <div id="toast" class="toast"></div> <script> // ========== 鏁版嵁瀛樺偍 ========== let depositProducts = [ // 鏅€氱被瀛樻 - 瀵瑰叕娲绘湡 { type1: '鏅€氱被', type2: '瀵瑰叕娲绘湡', term: '娲绘湡', pool: 0.03 }, // 鏅€氱被瀛樻 - 鍌ㄨ搫娲绘湡 { type1: '鏅€氱被', type2: '鍌ㄨ搫娲绘湡', term: '娲绘湡', pool: 0.03 }, // 鏅€氱被瀛樻 - 瀹氭湡 { type1: '鏅€氱被', type2: '瀹氭湡', term: '涓変釜鏈?, pool: 0.0205 }, { type1: '鏅€氱被', type2: '瀹氭湡', term: '鍏釜鏈?, pool: 0.022 }, { type1: '鏅€氱被', type2: '瀹氭湡', term: '涓€骞?, pool: 0.0235 }, { type1: '鏅€氱被', type2: '瀹氭湡', term: '涓ゅ勾', pool: 0.0245 }, { type1: '鏅€氱被', type2: '瀹氭湡', term: '涓夊勾', pool: 0.025 }, { type1: '鏅€氱被', type2: '瀹氭湡', term: '浜斿勾', pool: 0.026 }, // 浜у搧绫诲瓨娆?- 瀵瑰叕娲绘湡 { type1: '浜у搧绫?, type2: '瀵瑰叕娲绘湡', term: '娲绘湡', pool: 0.0298 }, // 浜у搧绫诲瓨娆?- 鍌ㄨ搫娲绘湡 { type1: '浜у搧绫?, type2: '鍌ㄨ搫娲绘湡', term: '娲绘湡', pool: 0.0298 }, // 浜у搧绫诲瓨娆?- 瀹氭湡 { type1: '浜у搧绫?, type2: '瀹氭湡', term: '涓変釜鏈?, pool: 0.0203 }, { type1: '浜у搧绫?, type2: '瀹氭湡', term: '鍏釜鏈?, pool: 0.0218 }, { type1: '浜у搧绫?, type2: '瀹氭湡', term: '涓€骞?, pool: 0.0233 }, { type1: '浜у搧绫?, type2: '瀹氭湡', term: '涓ゅ勾', pool: 0.0243 }, { type1: '浜у搧绫?, type2: '瀹氭湡', term: '涓夊勾', pool: 0.0248 }, { type1: '浜у搧绫?, type2: '瀹氭湡', term: '浜斿勾', pool: 0.0258 }, ]; let loanProducts = [ // 绉戞妧/鏅儬灏忓井/娑夊啘/缁胯壊璐锋 { type: '绉戞妧\\鏅儬灏忓井\\娑夊啘\\缁胯壊', term: '鍏釜鏈堬紙鍚級浠ュ唴', customer: 0.0197, pool: 0.0198 }, { type: '绉戞妧\\鏅儬灏忓井\\娑夊啘\\缁胯壊', term: '鍏釜鏈堣嚦涓€骞达紙鍚級', customer: 0.0212, pool: 0.0212 }, { type: '绉戞妧\\鏅儬灏忓井\\娑夊啘\\缁胯壊', term: '涓€鑷充笁骞达紙鍚級', customer: 0.0227, pool: 0.0227 }, { type: '绉戞妧\\鏅儬灏忓井\\娑夊啘\\缁胯壊', term: '涓夎嚦浜斿勾锛堝惈锛?, customer: 0.0237, pool: 0.0237 }, { type: '绉戞妧\\鏅儬灏忓井\\娑夊啘\\缁胯壊', term: '浜斿勾浠ヤ笂', customer: 0.0242, pool: 0.0242 }, // 绀惧尯灞呮皯璐锋 { type: '绀惧尯灞呮皯璐锋', term: '鍏釜鏈堬紙鍚級浠ュ唴', customer: 0.0205, pool: 0.0205 }, { type: '绀惧尯灞呮皯璐锋', term: '鍏釜鏈堣嚦涓€骞达紙鍚級', customer: 0.022, pool: 0.0205 }, { type: '绀惧尯灞呮皯璐锋', term: '涓€鑷充笁骞达紙鍚級', customer: 0.0235, pool: 0.022 }, { type: '绀惧尯灞呮皯璐锋', term: '涓夎嚦浜斿勾锛堝惈锛?, customer: 0.0245, pool: 0.0235 }, { type: '绀惧尯灞呮皯璐锋', term: '浜斿勾浠ヤ笂', customer: 0.025, pool: 0.0245 }, // 澶ч鍏徃璐锋 { type: '澶ч鍏徃璐锋', term: '鍏釜鏈堬紙鍚級浠ュ唴', customer: 0.023, pool: 0.025 }, { type: '澶ч鍏徃璐锋', term: '鍏釜鏈堣嚦涓€骞达紙鍚級', customer: 0.0245, pool: 0.0245 }, { type: '澶ч鍏徃璐锋', term: '涓€鑷充笁骞达紙鍚級', customer: 0.026, pool: 0.023 }, { type: '澶ч鍏徃璐锋', term: '涓夎嚦浜斿勾锛堝惈锛?, customer: 0.027, pool: 0.0245 }, { type: '澶ч鍏徃璐锋', term: '浜斿勾浠ヤ笂', customer: 0.0275, pool: 0.026 }, // 鍏朵粬鏅€氳捶娆? { type: '鍏朵粬鏅€氳捶娆?, term: '鍏釜鏈堬紙鍚級浠ュ唴', customer: 0.022, pool: 0.027 }, { type: '鍏朵粬鏅€氳捶娆?, term: '鍏釜鏈堣嚦涓€骞达紙鍚級', customer: 0.0235, pool: 0.0275 }, { type: '鍏朵粬鏅€氳捶娆?, term: '涓€鑷充笁骞达紙鍚級', customer: 0.025, pool: 0.025 }, { type: '鍏朵粬鏅€氳捶娆?, term: '涓夎嚦浜斿勾锛堝惈锛?, customer: 0.026, pool: 0.022 }, { type: '鍏朵粬鏅€氳捶娆?, term: '浜斿勾浠ヤ笂', customer: 0.0265, pool: 0.0235 }, // 涓汉鎸夋彮璐锋 { type: '涓汉鎸夋彮璐锋', term: '浜斿勾锛堝惈锛変互鍐呬釜浜烘寜鎻捶娆?, customer: 0.0228, pool: 0.025 }, { type: '涓汉鎸夋彮璐锋', term: '浜斿勾浠ヤ笂涓汉鎸夋彮璐锋', customer: 0.024, pool: 0.026 }, // 绀惧尯鍏徃銆佸浗浼佽捶娆? { type: '绀惧尯鍏徃銆佸浗浼佽捶娆?, term: '鍏釜鏈堬紙鍚級浠ュ唴', customer: 0.021, pool: 0.0265 }, { type: '绀惧尯鍏徃銆佸浗浼佽捶娆?, term: '鍏釜鏈堣嚦涓€骞达紙鍚級', customer: 0.024, pool: 0.0228 }, { type: '绀惧尯鍏徃銆佸浗浼佽捶娆?, term: '涓€鑷充笁骞达紙鍚級', customer: 0.025, pool: 0.024 }, { type: '绀惧尯鍏徃銆佸浗浼佽捶娆?, term: '涓夎嚦浜斿勾锛堝惈锛?, customer: 0.0255, pool: 0.0245 }, { type: '绀惧尯鍏徃銆佸浗浼佽捶娆?, term: '浜斿勾浠ヤ笂', customer: 0.0255, pool: 0.0255 }, // 璐寸幇 { type: '璐寸幇', term: '璐寸幇', customer: 0.01, pool: 0.0205 }, // 绂忚垂寤? { type: '绂忚垂寤?, term: '鍏釜鏈堬紙鍚級浠ュ唴', customer: 0.012, pool: 0.022 }, { type: '绂忚垂寤?, term: '鍏釜鏈堜互涓?, customer: 0.0145, pool: 0.0235 }, ]; let depositRemark = '瀛樻涓氬姟璇存槑锛氬瓨娆綟TP鏀跺叆 = 瀛樻閲戦 脳 (璧勯噾姹犱环鏍?- 瀵瑰浠锋牸) 脳瀛樻澶╂暟/365'; let loanRemark = '娉細澶ч鍏徃璐锋涓哄崟鎴蜂綑棰?浜垮厓浠ヤ笂鏅€氳捶娆撅紝鍗曟埛浣欓5浜垮厓浠ヤ笂绀惧尯鍏徃璐锋鍙傜収绀惧尯鍏徃璐锋鍒╃巼鎵ц銆?; // ========== 鍒濆鍖?========== function init() { loadData(); updateSelects(); // 璁剧疆榛樿鏃ユ湡 const today = new Date().toISOString().split('T')[0]; document.getElementById('depStart').value = today; document.getElementById('depEnd').value = today; document.getElementById('loanStart').value = today; // 鏄剧ず澶囨敞 document.getElementById('depositRemark').textContent = depositRemark; document.getElementById('loanRemark').textContent = loanRemark; } function loadData() { // 濡傛灉 Worker 娉ㄥ叆浜嗕骇鍝佹暟鎹紝浼樺厛浣跨敤 if (window.__PRODUCTS__) { depositProducts = window.__PRODUCTS__.deposit || depositProducts; loanProducts = window.__PRODUCTS__.loan || loanProducts; } const depData = localStorage.getItem('ftp_deposit_products'); const loanData = localStorage.getItem('ftp_loan_products'); const depRemData = localStorage.getItem('ftp_deposit_remark'); const loanRemData = localStorage.getItem('ftp_loan_remark'); if (depData) depositProducts = JSON.parse(depData); if (loanData) loanProducts = JSON.parse(loanData); if (depRemData) depositRemark = depRemData; if (loanRemData) loanRemark = loanRemData; } function saveData() { localStorage.setItem('ftp_deposit_products', JSON.stringify(depositProducts)); localStorage.setItem('ftp_loan_products', JSON.stringify(loanProducts)); } // ========== Tab 鍒囨崲 ========== function switchTab(tab) { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.content').forEach(c => c.classList.remove('active')); document.querySelectorAll('.banner').forEach(b => b.classList.remove('deposit', 'loan')); document.querySelector(`.tab.${tab}`).classList.add('active'); document.getElementById(`${tab}Content`).classList.add('active'); document.querySelector('.banner').classList.add(tab); // 鏇存柊澶囨敞鏄剧ず document.getElementById('depositRemark').textContent = depositRemark; document.getElementById('loanRemark').textContent = loanRemark; } // ========== 鏇存柊涓嬫媺閫夐」 ========== function updateSelects() { // 瀛樻绫诲瀷1 const type1Set = new Set(depositProducts.map(p => p.type1)); const depType1 = document.getElementById('depType1'); depType1.innerHTML = '<option value="">璇烽€夋嫨</option>'; type1Set.forEach(t => { depType1.innerHTML += `<option value="${t}">${t}</option>`; }); // 瀛樻绫诲瀷2锛堟牴鎹被鍨?鍔ㄦ€佹洿鏂帮級 updateDepType2(); // 瀛樻鏈熼檺 const termSet = new Set(depositProducts.map(p => p.term)); const depTerm = document.getElementById('depTerm'); depTerm.innerHTML = '<option value="">璇烽€夋嫨</option>'; termSet.forEach(t => { depTerm.innerHTML += `<option value="${t}">${t}</option>`; }); // 璐锋绫诲瀷 const loanType = document.getElementById('loanType'); loanType.innerHTML = '<option value="">璇烽€夋嫨</option>'; loanProducts.forEach(p => { loanType.innerHTML += `<option value="${p.type}">${p.type}</option>`; }); // 璐锋鏈熼檺 const loanTerm = document.getElementById('loanTerm'); loanTerm.innerHTML = '<option value="">璇烽€夋嫨</option>'; loanProducts.forEach(p => { if (![...loanTerm.options].some(o => o.value === p.term)) { loanTerm.innerHTML += `<option value="${p.term}">${p.term}</option>`; } }); } function updateDepType2() { const type1 = document.getElementById('depType1').value; const type2Set = new Set(depositProducts.filter(p => p.type1 === type1).map(p => p.type2)); const depType2 = document.getElementById('depType2'); depType2.innerHTML = '<option value="">璇烽€夋嫨</option>'; type2Set.forEach(t => { depType2.innerHTML += `<option value="${t}">${t}</option>`; }); // Reset type2 selection and update term depType2.value = ''; updateDepTerm(); } function updateDepTerm() { const type1 = document.getElementById('depType1').value; const type2 = document.getElementById('depType2').value; const termSet = new Set(depositProducts.filter(p => p.type1 === type1 && p.type2 === type2).map(p => p.term)); const depTerm = document.getElementById('depTerm'); depTerm.innerHTML = '<option value="">璇烽€夋嫨</option>'; termSet.forEach(t => { depTerm.innerHTML += `<option value="${t}">${t}</option>`; }); depTerm.value = ''; } document.getElementById('depType1').addEventListener('change', updateDepType2); document.getElementById('depType2').addEventListener('change', updateDepTerm); function updateLoanTerm() { const loanType = document.getElementById('loanType').value; const termSet = new Set(loanProducts.filter(p => p.type === loanType).map(p => p.term)); const loanTerm = document.getElementById('loanTerm'); loanTerm.innerHTML = '<option value="">璇烽€夋嫨</option>'; termSet.forEach(t => { loanTerm.innerHTML += `<option value="${t}">${t}</option>`; }); loanTerm.value = ''; } document.getElementById('loanType').addEventListener('change', updateLoanTerm); // ========== 璁＄畻 ========== function calculate() { const type1 = document.getElementById('depType1').value; const type2 = document.getElementById('depType2').value; const term = document.getElementById('depTerm').value; const amount = parseFloat(document.getElementById('depAmount').value) || 0; const customerRate = parseFloat(document.getElementById('depCustomerRate').value) || 0; const startDate = new Date(document.getElementById('depStart').value); const endDate = new Date(document.getElementById('depEnd').value); // 璁＄畻澶╂暟 const days = Math.max(0, Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24))); // 鎵惧尮閰嶄骇鍝? const product = depositProducts.find(p => p.type1 === type1 && p.type2 === type2 && p.term === term ); if (product && amount > 0 && days > 0) { // 瀵瑰浠锋牸杞负灏忔暟 const customerDecimal = customerRate / 100; // 璧勯噾姹犱环鏍兼槸灏忔暟锛岀洿鎺ヤ娇鐢? const poolDecimal = product.pool; // 鏄剧ず瀵瑰浠锋牸鍜岃祫閲戞睜浠锋牸锛堣浆涓虹櫨鍒嗘瘮鏄剧ず锛? document.getElementById('depCustomer').textContent = customerRate.toFixed(3) + '%'; document.getElementById('depPool').textContent = (poolDecimal * 100).toFixed(2) + '%'; // FTP鍒╁樊 = 璧勯噾姹?- 瀵瑰锛堝瓨娆鹃摱琛屾敹鍏ワ級 const spread = poolDecimal - customerDecimal; const spreadEl = document.getElementById('depSpread'); spreadEl.textContent = (spread >= 0 ? '+' : '') + (spread * 100).toFixed(2) + '%'; spreadEl.className = 'r-value ' + (spread >= 0 ? 'positive' : 'negative'); // 鏄剧ず澶╂暟淇℃伅 document.getElementById('depDaysInfo').textContent = `瀛樻澶╂暟锛?{days}澶ー; // 璁＄畻鏀跺叆 = 閲戦 脳鍒╁樊脳澶╂暟/365 const income = amount * 10000 * spread * (days / 365); document.getElementById('depIncome').textContent = '楼 ' + income.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } else { document.getElementById('depCustomer').textContent = '-'; document.getElementById('depPool').textContent = '-'; document.getElementById('depSpread').textContent = '-'; document.getElementById('depSpread').className = 'r-value'; document.getElementById('depIncome').textContent = '楼 0.00'; document.getElementById('depDaysInfo').textContent = ''; } } function calculateLoan() { const type = document.getElementById('loanType').value; const term = document.getElementById('loanTerm').value; const amount = parseFloat(document.getElementById('loanAmount').value) || 0; const provision = parseFloat(document.getElementById('loanProvision').value) || 0; const startDate = new Date(document.getElementById('loanStart').value); const endDate = new Date(document.getElementById('loanEnd').value); // 璁＄畻鏈勾鍦ㄨ捶澶╂暟锛?026-01-01 鍒?2026-12-31锛? const yearStart = new Date('2026-01-01'); const yearEnd = new Date('2026-12-31'); // 瀹為檯鍦ㄨ捶寮€濮嬪拰缁撴潫 const loanStart = startDate; const loanEnd = endDate; // 璁＄畻閲嶅彔鍖洪棿 const effectiveStart = loanStart > yearStart ? loanStart : yearStart; const effectiveEnd = loanEnd < yearEnd ? loanEnd : yearEnd; // 璁＄畻鏈勾鍦ㄨ捶澶╂暟 let daysInYear = 0; if (effectiveEnd >= effectiveStart) { daysInYear = Math.max(0, Math.ceil((effectiveEnd - effectiveStart) / (1000 * 60 * 60 * 24)) + 1); } // 鎵惧尮閰嶄骇鍝? const product = loanProducts.find(p => p.type === type && p.term === term); if (product && amount > 0 && daysInYear > 0) { // 瀵瑰浠锋牸浠庣敤鎴疯緭鍏ヨ幏鍙栵紝杞负灏忔暟 const customerRate = parseFloat(document.getElementById('loanCustomerRate').value) || 0; const customerDecimal = customerRate / 100; // 璧勯噾姹犱环鏍间粠浜у搧琛ㄨ幏鍙? const poolDecimal = product.pool; // 鏄剧ず浠锋牸 document.getElementById('loanCustomer').textContent = customerRate.toFixed(3) + '%'; document.getElementById('loanPool').textContent = (poolDecimal * 100).toFixed(2) + '%'; // 鍒╁樊 = 瀵瑰 - 璧勯噾姹? const spread = customerDecimal - poolDecimal; const spreadEl = document.getElementById('loanSpread'); spreadEl.textContent = (spread >= 0 ? '+' : '') + (spread * 100).toFixed(2) + '%'; spreadEl.className = 'r-value ' + (spread >= 0 ? 'positive' : 'negative'); // 璁＄畻骞存敹鍏?= 閲戦 脳 10000 脳鍒╁樊脳 (鏈勾鍦ㄨ捶澶╂暟/365) const income = amount * 10000 * spread * (daysInYear / 365); // 鑷姩璁＄畻鎷ㄥ锛氳嫢杩樻鏃ュ湪2026骞村悗锛屾寜璐锋閲戦脳1%璁＄畻 const yearEnd2026 = new Date('2026-12-31'); const provision = endDate > yearEnd2026 ? amount * 100 : 0; // 閲戦脳100 = 閲戦脳1%脳10000 const revenue = income - provision; document.getElementById('loanIncome').textContent = '楼 ' + income.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); document.getElementById('loanRevenue').textContent = '楼 ' + revenue.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); document.getElementById('loanRevenue').className = 'value ' + (revenue >= 0 ? '' : 'negative'); document.getElementById('loanProvision').textContent = '楼 ' + provision.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); // 鏄剧ず鍦ㄨ捶澶╂暟淇℃伅 const yearStart = new Date('2026-01-01'); const yearEnd = new Date('2026-12-31'); document.getElementById('loanDaysInfo').textContent = `鏈勾鍦ㄨ捶澶╂暟锛?{daysInYear}澶?(${yearStart.toLocaleDateString('zh-CN')} 鑷?${yearEnd.toLocaleDateString('zh-CN')})`; } else { document.getElementById('loanCustomer').textContent = '-'; document.getElementById('loanPool').textContent = '-'; document.getElementById('loanSpread').textContent = '-'; document.getElementById('loanSpread').className = 'r-value'; document.getElementById('loanIncome').textContent = '楼 0.00'; document.getElementById('loanRevenue').textContent = '楼 0.00'; document.getElementById('loanProvision').textContent = '楼 0.00'; document.getElementById('loanDaysInfo').textContent = ''; } } // ========== Modal ========== let isAuthenticated = false; function openModal(type) { isAuthenticated = false; const modal = document.getElementById('modal'); const title = document.getElementById('modalTitle'); const body = document.getElementById('modalBody'); if (type === 'admin') { title.textContent = '浜у搧绠＄悊'; body.innerHTML = ` <div class="pwd-section"> <input type="password" id="pwdInput" placeholder="杈撳叆绠＄悊鍛樺瘑鐮? onkeypress="if(event.key==='Enter')authenticateAdmin()"> <button onclick="authenticateAdmin()">纭</button> </div> <div id="adminTabs" style="display:none;"> <div style="display:flex; gap:8px; margin-bottom:12px;"> <button onclick="showAdminTab('dep')" id="btnDep" style="flex:1; padding:8px; border:1px solid #ddd; border-radius:6px; background:#6BB9F0; color:#fff; border:none;">瀛樻浜у搧</button> <button onclick="showAdminTab('loan')" id="btnLoan" style="flex:1; padding:8px; border:1px solid #ddd; border-radius:6px; background:#f5f5f5; color:#666; border:none;">璐锋浜у搧</button> <button onclick="showAdminTab('remark')" id="btnRemark" style="flex:1; padding:8px; border:1px solid #ddd; border-radius:6px; background:#f5f5f5; color:#666; border:none;">澶囨敞</button> </div> <div id="adminContent"></div> </div> `; } modal.classList.add('show'); } function authenticateAdmin() { if (document.getElementById('pwdInput').value === 'liminghong2026') { isAuthenticated = true; document.getElementById('pwdInput').disabled = true; document.getElementById('adminTabs').style.display = 'block'; showAdminTab('dep'); } else { showToast('瀵嗙爜閿欒'); } } let currentAdminTab = 'dep'; function showAdminTab(tab) { currentAdminTab = tab; const btnDep = document.getElementById('btnDep'); const btnLoan = document.getElementById('btnLoan'); const btnRemark = document.getElementById('btnRemark'); const content = document.getElementById('adminContent'); // Reset all buttons btnDep.style.background = '#f5f5f5'; btnDep.style.color = '#666'; btnLoan.style.background = '#f5f5f5'; btnLoan.style.color = '#666'; btnRemark.style.background = '#f5f5f5'; btnRemark.style.color = '#666'; if (tab === 'dep') { btnDep.style.background = '#6BB9F0'; btnDep.style.color = '#fff'; content.innerHTML = '<table class="product-table"><tr><th>绫诲瀷1</th><th>绫诲瀷2</th><th>鏈熼檺</th><th>璧勯噾姹?%)</th><th></th></tr>'; depositProducts.forEach((p, i) => { content.innerHTML += `<tr> <td><input value="${p.type1}" onchange="updateDep(${i}, 'type1', this.value)"></td> <td><input value="${p.type2}" onchange="updateDep(${i}, 'type2', this.value)"></td> <td><input value="${p.term}" onchange="updateDep(${i}, 'term', this.value)"></td> <td><input type="number" step="0.001" value="${(p.pool * 100).toFixed(3)}" onchange="updateDep(${i}, 'pool', this.value / 100)"></td> <td><button onclick="deleteDep(${i})" style="color:#c62828; border:none; background:none; cursor:pointer;">鍒犻櫎</button></td> </tr>`; }); content.innerHTML += '</table>'; content.innerHTML += '<p style="font-size:11px;color:#888;margin-top:8px;">娉細瀛樻瀵瑰鍒╃巼鐢卞鎴风粡鐞嗗湪璁＄畻鏃惰緭鍏?/p>'; content.innerHTML += '<button class="btn-save" onclick="addDepProduct()" style="margin-top:10px;">+ 娣诲姞瀛樻浜у搧</button>'; content.innerHTML += '<button class="btn-save" onclick="saveDepProducts()">淇濆瓨淇敼</button>'; } else if (tab === 'loan') { btnLoan.style.background = '#9B7EDE'; btnLoan.style.color = '#fff'; content.innerHTML = '<table class="product-table"><tr><th>绫诲瀷</th><th>鏈熼檺</th><th>璧勯噾姹?%)</th><th></th></tr>'; loanProducts.forEach((p, i) => { content.innerHTML += `<tr> <td><input value="${p.type}" onchange="updateLoan(${i}, 'type', this.value)"></td> <td><input value="${p.term}" onchange="updateLoan(${i}, 'term', this.value)"></td> <td><input type="number" step="0.001" value="${(p.pool * 100).toFixed(3)}" onchange="updateLoan(${i}, 'pool', this.value / 100)"></td> <td><button onclick="deleteLoan(${i})" style="color:#c62828; border:none; background:none; cursor:pointer;">鍒犻櫎</button></td> </tr>`; }); content.innerHTML += '</table>'; content.innerHTML += '<p style="font-size:11px;color:#888;margin-top:8px;">娉細瀵瑰鍒╃巼鐢卞鎴风粡鐞嗗湪璁＄畻鏃舵墜鍔ㄨ緭鍏?/p>'; content.innerHTML += '<button class="btn-save" onclick="addLoanProduct()" style="margin-top:10px;">+ 娣诲姞璐锋浜у搧</button>'; content.innerHTML += '<button class="btn-save" onclick="saveLoanProducts()">淇濆瓨淇敼</button>'; } else if (tab === 'remark') { btnRemark.style.background = '#f0ad4e'; btnRemark.style.color = '#fff'; content.innerHTML = '<div style="margin-bottom:12px;"><label style="font-size:13px;color:#666;margin-bottom:6px;display:block;">瀛樻澶囨敞</label><textarea id="depositRemarkInput" class="remark-textarea" style="width:100%;min-height:60px;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:13px;">' + depositRemark + '</textarea></div>'; content.innerHTML += '<div><label style="font-size:13px;color:#666;margin-bottom:6px;display:block;">璐锋澶囨敞</label><textarea id="loanRemarkInput" class="remark-textarea" style="width:100%;min-height:80px;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:13px;">' + loanRemark + '</textarea></div>'; content.innerHTML += '<button class="btn-save" onclick="saveRemarks()">淇濆瓨澶囨敞</button>'; } } function updateDep(i, field, val) { depositProducts[i][field] = field === 'type1' || field === 'type2' || field === 'term' ? val : parseFloat(val); } function updateLoan(i, field, val) { loanProducts[i][field] = field === 'type' || field === 'term' ? val : parseFloat(val); } function deleteDep(i) { depositProducts.splice(i, 1); showAdminTab('dep'); } function deleteLoan(i) { loanProducts.splice(i, 1); showAdminTab('loan'); } function addDepProduct() { depositProducts.push({ type1: '鏅€氱被', type2: '瀹氭湡', term: '涓€骞?, pool: 0.0235 }); showAdminTab('dep'); } function addLoanProduct() { loanProducts.push({ type: '绀惧尯灞呮皯璐锋', term: '涓€鑷充笁骞达紙鍚級', customer: 0.0235, pool: 0.022 }); showAdminTab('loan'); } function saveDepProducts() { saveData(); updateSelects(); calculate(); showToast('瀛樻浜у搧宸蹭繚瀛?); } function saveLoanProducts() { saveData(); updateSelects(); calculateLoan(); showToast('璐锋浜у搧宸蹭繚瀛?); } function saveRemarks() { depositRemark = document.getElementById('depositRemarkInput').value; loanRemark = document.getElementById('loanRemarkInput').value; localStorage.setItem('ftp_deposit_remark', depositRemark); localStorage.setItem('ftp_loan_remark', loanRemark); // 鏇存柊涓婚〉鏄剧ず document.getElementById('depositRemark').textContent = depositRemark; document.getElementById('loanRemark').textContent = loanRemark; showToast('澶囨敞宸蹭繚瀛?); } function closeModal() { document.getElementById('modal').classList.remove('show'); isAuthenticated = false; } function closeModalOnOverlay(e) { if (e.target.id === 'modal') closeModal(); } function showToast(msg) { const toast = document.getElementById('toast'); toast.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); } // ========== 鍚姩 ========== init(); </script> </body> </html>