Compare commits
merge into: qimaohong:master
qimaohong:dev
qimaohong:heads/milestone-20251128-获客渠道
qimaohong:master
qimaohong:milestone-20251013-宣传夺宝奇兵
qimaohong:milestone-20251107-后台登录页面
pull from: qimaohong:milestone-20251013-宣传夺宝奇兵
qimaohong:dev
qimaohong:heads/milestone-20251128-获客渠道
qimaohong:master
qimaohong:milestone-20251013-宣传夺宝奇兵
qimaohong:milestone-20251107-后台登录页面
7 Commits
master
...
milestone-
| Author | SHA1 | Message | Date |
|---|---|---|---|
zhaoruhui
|
e21a563222 |
后台添加whatsapp字段实现动态跳转
|
2 months ago |
|
zhaoruhui
|
35688a94e3 |
后台添加whatsapp字段实现动态跳转
|
2 months ago |
|
zhaoruhui
|
b3abd03f66 |
添加定位
|
3 months ago |
|
zhaoruhui
|
419b7e964e |
修改定位
|
3 months ago |
|
zhaoruhui
|
e910b5b01c |
修改图片
|
3 months ago |
|
zhaoruhui
|
708f6c2008 |
修改字体
|
3 months ago |
|
zhaoruhui
|
c6eac6807e |
修改背景图片即文字
|
3 months ago |
6 changed files with 653 additions and 496 deletions
-
2dist-test/hcdbqb-download.html
-
2dist-test/hcdbqb-guide.html
-
116dist-test/index.html
-
2dist-test/main.js
-
899hcdbqb-management.html
-
126index.html
@ -1 +1 @@ |
|||
import{g as E,r as h}from"./member.js";const I=50,L=100,B=20,u=document.getElementById("registrationForm"),l=document.getElementById("successModal"),p=document.getElementById("closeModal"),a=document.getElementById("submitBtn"),g=document.getElementById("loadingOverlay"),i=document.getElementById("lectureImage");let r=!1;async function v(){console.log("开始加载讲座图片...");try{const e={id:1};console.log("调用getImageApi，参数:",e);const t=await E(e);console.log("接口返回:",t),t.code===200&&t.data?(i.src=t.data,console.log("讲座图片加载成功:",t.data)):(console.warn("获取图片失败:",t.msg),i.src="https://hc.homilychart.com/hc/250121/img/kecheng.jpg")}catch(e){console.error("加载讲座图片失败:",e),i.src="https://hc.homilychart.com/hc/250121/img/kecheng.jpg"}}function w(){g.style.display="flex",a.disabled=!0,a.textContent="提交中...",r=!0}function M(){g.style.display="none",a.disabled=!1,a.textContent="提交注册",r=!1}function s(e){alert(e)}function b(e){const{name:t,tel:o,email:n}=e;return!t||t.length>I?(s("请输入有效的姓名（最多50个字符）"),document.getElementById("userNameInfo").focus(),!1):!o||o.length>B?(s("请输入有效的电话号码"),document.getElementById("userMobile").focus(),!1):!n||n.length>L?(s("请输入电子邮箱"),document.getElementById("userEmail").focus(),!1):/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n)?!0:(s("请输入有效的电子邮箱地址"),document.getElementById("userEmail").focus(),!1)}async function A(e){if(e.preventDefault(),r)return;const t=document.getElementById("userNameInfo").value.trim(),o=document.getElementById("countryInfo").value,n=document.getElementById("userMobile").value.trim(),d=document.getElementById("userWechat").value.trim(),y=document.getElementById("userEmail").value.trim(),m={name:t,code:o,tel:n,wechat:d,email:y};if(b(m))try{w();const c=await h(m);c.code===200?(l.classList.remove("hidden"),u.reset()):s("注册失败: "+(c.msg||"未知错误"))}catch(c){console.error("请求失败:",c),s("网络错误，请稍后重试")}finally{M()}}function N(){document.getElementById("mobileMenu").classList.toggle("hidden");const t=document.getElementById("menuBtn").querySelector("i");t.classList.contains("fa-bars")?t.classList.replace("fa-bars","fa-times"):t.classList.replace("fa-times","fa-bars")}function H(){const e=document.querySelector("header");window.scrollY>50?(e.classList.add("py-2","shadow"),e.classList.remove("py-3")):(e.classList.add("py-3"),e.classList.remove("py-2","shadow"))}function f(){document.querySelectorAll(".animate-fade-in").forEach(t=>{const o=t.getBoundingClientRect().top,n=window.innerHeight;o<n-100&&(t.style.opacity="1",t.style.transform="translateY(0)")})}window.addEventListener("load",()=>{console.log("页面加载完成，开始调用loadLectureImage..."),v(),f(),document.getElementById("loadingOverlay").style.display="none"});u.addEventListener("submit",A);p.addEventListener("click",()=>{l.classList.add("hidden")});l.addEventListener("click",e=>{e.target===l&&l.classList.add("hidden")});document.getElementById("menuBtn").addEventListener("click",N);window.addEventListener("scroll",H);window.addEventListener("scroll",f); |
|||
import{g as E,r as h}from"./member.js";const I=50,L=100,B=20,u=document.getElementById("registrationForm"),l=document.getElementById("successModal"),p=document.getElementById("closeModal"),a=document.getElementById("submitBtn"),g=document.getElementById("loadingOverlay"),i=document.getElementById("lectureImage");let r=!1;async function v(){console.log("开始加载讲座图片...");try{const e={id:1};console.log("调用getImageApi，参数:",e);const t=await E(e);console.log("接口返回:",t),t.code===200&&t.data?(i.src=t.data,console.log("讲座图片加载成功:",t.data)):(console.warn("获取图片失败:",t.msg),i.src="https://hc.homilychart.com/hc/250121/img/kecheng.jpg")}catch(e){console.error("加载讲座图片失败:",e),i.src="https://hc.homilychart.com/hc/250121/img/kecheng.jpg"}}function w(){g.style.display="flex",a.disabled=!0,a.textContent="提交中...",r=!0}function b(){g.style.display="none",a.disabled=!1,a.textContent="提交注册",r=!1}function s(e){alert(e)}function M(e){const{name:t,tel:o,email:n}=e;return!t||t.length>I?(s("请输入有效的姓名（最多50个字符）"),document.getElementById("userNameInfo").focus(),!1):!o||o.length>B?(s("请输入有效的电话号码"),document.getElementById("userMobile").focus(),!1):!n||n.length>L?(s("请输入电子邮箱"),document.getElementById("userEmail").focus(),!1):/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n)?!0:(s("请输入有效的电子邮箱地址"),document.getElementById("userEmail").focus(),!1)}async function A(e){if(e.preventDefault(),r)return;const t=document.getElementById("userNameInfo").value.trim(),o=document.getElementById("countryInfo").value,n=document.getElementById("userMobile").value.trim(),d=document.getElementById("userWechat").value.trim(),y=document.getElementById("userEmail").value.trim(),m={name:t,code:o,tel:n,wechat:d,email:y};if(M(m))try{w();const c=await h(m);c.code===200?(l.classList.remove("hidden"),u.reset()):s("注册失败: "+(c.msg||"未知错误"))}catch(c){console.error("请求失败:",c),s("网络错误，请稍后重试")}finally{b()}}function N(){document.getElementById("mobileMenu").classList.toggle("hidden");const t=document.getElementById("menuBtn").querySelector("i");t.classList.contains("fa-bars")?t.classList.replace("fa-bars","fa-times"):t.classList.replace("fa-times","fa-bars")}function S(){const e=document.querySelector("header");window.scrollY>50?(e.classList.add("py-2","shadow"),e.classList.remove("py-3")):(e.classList.add("py-3"),e.classList.remove("py-2","shadow"))}function f(){document.querySelectorAll(".animate-fade-in").forEach(t=>{const o=t.getBoundingClientRect().top,n=window.innerHeight;o<n-100&&(t.style.opacity="1",t.style.transform="translateY(0)")})}function H(){const e=document.getElementById("register");e&&e.scrollIntoView({behavior:"smooth"})}window.addEventListener("load",()=>{console.log("页面加载完成，开始调用loadLectureImage..."),v(),f(),document.getElementById("loadingOverlay").style.display="none",H()});u.addEventListener("submit",A);p.addEventListener("click",()=>{l.classList.add("hidden")});l.addEventListener("click",e=>{e.target===l&&l.classList.add("hidden")});document.getElementById("menuBtn").addEventListener("click",N);window.addEventListener("scroll",S);window.addEventListener("scroll",f); |
|||
@ -1,481 +1,534 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|||
<title>管理后台</title> |
|||
<style> |
|||
body { |
|||
font-family: Arial, sans-serif; |
|||
padding: 24px; |
|||
background: #f7f8fb; |
|||
color: #222; |
|||
} |
|||
.card { |
|||
background: #fff; |
|||
padding: 16px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
|||
margin: auto; |
|||
} |
|||
table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
margin-top: 12px; |
|||
} |
|||
th, |
|||
td { |
|||
padding: 10px 12px; |
|||
border-bottom: 1px solid #eee; |
|||
text-align: left; |
|||
font-size: 14px; |
|||
} |
|||
th { |
|||
background: #fafafa; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|||
<title>管理后台</title> |
|||
<style> |
|||
body { |
|||
font-family: Arial, sans-serif; |
|||
padding: 24px; |
|||
background: #f7f8fb; |
|||
color: #222; |
|||
} |
|||
|
|||
.card { |
|||
background: #fff; |
|||
padding: 16px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
|||
margin: auto; |
|||
} |
|||
|
|||
table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
margin-top: 12px; |
|||
} |
|||
|
|||
th, |
|||
td { |
|||
padding: 10px 12px; |
|||
border-bottom: 1px solid #eee; |
|||
text-align: left; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
th { |
|||
background: #fafafa; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.controls { |
|||
display: flex; |
|||
gap: 12px; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.pagination { |
|||
display: flex; |
|||
gap: 6px; |
|||
align-items: center; |
|||
margin-left: auto; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.btn { |
|||
padding: 6px 10px; |
|||
border-radius: 6px; |
|||
border: 1px solid #ddd; |
|||
background: #fff; |
|||
cursor: pointer; |
|||
user-select: none; |
|||
} |
|||
|
|||
.btn:disabled { |
|||
opacity: 0.5; |
|||
cursor: default; |
|||
} |
|||
|
|||
.btn.primary { |
|||
background: #007bff; |
|||
color: #fff; |
|||
border-color: #007bff; |
|||
} |
|||
|
|||
.btn.whatsapp { |
|||
background: #25D366; |
|||
color: #fff; |
|||
border-color: #25D366; |
|||
} |
|||
|
|||
.status-btn { |
|||
padding: 4px 8px; |
|||
border-radius: 6px; |
|||
border: 1px solid #ccc; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.status-0 { |
|||
background: red; |
|||
color: #fff; |
|||
} |
|||
|
|||
.status-1 { |
|||
background: #2f9e44; |
|||
color: #fff; |
|||
border-color: #2f9e44; |
|||
} |
|||
|
|||
.btn.active { |
|||
background: #007bff; |
|||
color: #fff; |
|||
border-color: #007bff; |
|||
} |
|||
|
|||
select, |
|||
input[type="number"] { |
|||
padding: 6px; |
|||
border-radius: 6px; |
|||
border: 1px solid #ddd; |
|||
} |
|||
|
|||
.small { |
|||
font-size: 13px; |
|||
color: #666; |
|||
} |
|||
|
|||
@media (max-width: 640px) { |
|||
.controls { |
|||
display: flex; |
|||
gap: 12px; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.pagination { |
|||
display: flex; |
|||
gap: 6px; |
|||
align-items: center; |
|||
margin-left: auto; |
|||
flex-wrap: wrap; |
|||
margin-left: 0; |
|||
} |
|||
.btn { |
|||
padding: 6px 10px; |
|||
border-radius: 6px; |
|||
border: 1px solid #ddd; |
|||
background: #fff; |
|||
cursor: pointer; |
|||
user-select: none; |
|||
} |
|||
.btn:disabled { |
|||
opacity: 0.5; |
|||
cursor: default; |
|||
} |
|||
.btn.primary { |
|||
background: #007bff; |
|||
color: #fff; |
|||
border-color: #007bff; |
|||
} |
|||
.status-btn { |
|||
padding: 4px 8px; |
|||
border-radius: 6px; |
|||
border: 1px solid #ccc; |
|||
cursor: pointer; |
|||
} |
|||
.status-0 { |
|||
background: red; |
|||
color: #fff; |
|||
} |
|||
.status-1 { |
|||
background: #2f9e44; |
|||
color: #fff; |
|||
border-color: #2f9e44; |
|||
} |
|||
.btn.active { |
|||
background: #007bff; |
|||
color: #fff; |
|||
border-color: #007bff; |
|||
} |
|||
select, |
|||
input[type="number"] { |
|||
padding: 6px; |
|||
border-radius: 6px; |
|||
border: 1px solid #ddd; |
|||
} |
|||
.small { |
|||
font-size: 13px; |
|||
color: #666; |
|||
} |
|||
@media (max-width: 640px) { |
|||
.controls { |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
} |
|||
.pagination { |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
#noteModal { |
|||
display: none; |
|||
position: fixed; |
|||
inset: 0; |
|||
background: rgba(0, 0, 0, 0.45); |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 9999; |
|||
} |
|||
#noteModal .dialog { |
|||
background: #fff; |
|||
padding: 16px; |
|||
border-radius: 8px; |
|||
width: 90%; |
|||
max-width: 520px; |
|||
box-sizing: border-box; |
|||
} |
|||
#noteModal textarea { |
|||
width: 100%; |
|||
min-width: 60%; |
|||
max-width: 100%; |
|||
min-height: 150px; |
|||
box-sizing: border-box; |
|||
padding: 8px; |
|||
border-radius: 6px; |
|||
border: 1px solid #ddd; |
|||
font-size: 14px; |
|||
} |
|||
.toast { |
|||
position: fixed; |
|||
top: -20px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
background: #4caf50; |
|||
color: #fff; |
|||
padding: 10px 16px; |
|||
border-radius: 6px; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); |
|||
font-size: 16px; |
|||
opacity: 0; |
|||
transition: all 0.3s ease; |
|||
z-index: 10000; |
|||
pointer-events: none; |
|||
} |
|||
.toast.show { |
|||
opacity: 1; |
|||
top: 20px; |
|||
} |
|||
table th, |
|||
table td { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="card"> |
|||
<table aria-describedby="tableDesc"> |
|||
<thead> |
|||
<tr> |
|||
<th style="width: 40px">#</th> |
|||
<th style="width: 100px">姓名</th> |
|||
<th style="width: 90px">国家/地区代码</th> |
|||
<th style="width: 120px">电话号码</th> |
|||
<th style="width: 120px">微信ID</th> |
|||
<th style="width: 150px">邮箱</th> |
|||
<th style="width: 160px">添加时间</th> |
|||
<th style="width: 100px">是否联系</th> |
|||
<th style="width: 160px">备注</th> |
|||
<th style="width: 100px">操作</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody id="tableBody"></tbody> |
|||
</table> |
|||
<div class="controls" style="margin-bottom: 8px; margin-top: 12px"> |
|||
<div class="small"> |
|||
每页显示 |
|||
<select id="pageSizeSelect"> |
|||
<option value="20" selected>20</option> |
|||
<option value="50">50</option> |
|||
<option value="100">100</option> |
|||
<option value="200">200</option> |
|||
</select> |
|||
条 |
|||
</div> |
|||
} |
|||
|
|||
#noteModal { |
|||
display: none; |
|||
position: fixed; |
|||
inset: 0; |
|||
background: rgba(0, 0, 0, 0.45); |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 9999; |
|||
} |
|||
|
|||
#noteModal .dialog { |
|||
background: #fff; |
|||
padding: 16px; |
|||
border-radius: 8px; |
|||
width: 90%; |
|||
max-width: 520px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#noteModal textarea { |
|||
width: 100%; |
|||
min-width: 60%; |
|||
max-width: 100%; |
|||
min-height: 150px; |
|||
box-sizing: border-box; |
|||
padding: 8px; |
|||
border-radius: 6px; |
|||
border: 1px solid #ddd; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.toast { |
|||
position: fixed; |
|||
top: -20px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
background: #4caf50; |
|||
color: #fff; |
|||
padding: 10px 16px; |
|||
border-radius: 6px; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); |
|||
font-size: 16px; |
|||
opacity: 0; |
|||
transition: all 0.3s ease; |
|||
z-index: 10000; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.toast.show { |
|||
opacity: 1; |
|||
top: 20px; |
|||
} |
|||
|
|||
<div class="small">共 <span id="totalCount">0</span> 条</div> |
|||
table th, |
|||
table td { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<div class="pagination" id="pagination"></div> |
|||
<body> |
|||
<div class="card"> |
|||
<table aria-describedby="tableDesc"> |
|||
<thead> |
|||
<tr> |
|||
<th style="width: 40px">#</th> |
|||
<th style="width: 100px">姓名</th> |
|||
<th style="width: 100px">WhatsApp</th> |
|||
<th style="width: 90px">国家/地区代码</th> |
|||
<th style="width: 120px">电话号码</th> |
|||
<th style="width: 120px">微信ID</th> |
|||
<th style="width: 150px">邮箱</th> |
|||
<th style="width: 160px">添加时间</th> |
|||
<th style="width: 100px">是否联系</th> |
|||
<th style="width: 160px">备注</th> |
|||
<th style="width: 100px">操作</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody id="tableBody"></tbody> |
|||
</table> |
|||
<div class="controls" style="margin-bottom: 8px; margin-top: 12px"> |
|||
<div class="small"> |
|||
每页显示 |
|||
<select id="pageSizeSelect"> |
|||
<option value="20" selected>20</option> |
|||
<option value="50">50</option> |
|||
<option value="100">100</option> |
|||
<option value="200">200</option> |
|||
</select> |
|||
条 |
|||
</div> |
|||
<!-- 备注编辑模态 --> |
|||
<div id="noteModal"> |
|||
<div class="dialog"> |
|||
<h3 style="margin: 0 0 8px">编辑备注</h3> |
|||
<textarea |
|||
id="noteTextarea" |
|||
rows="6" |
|||
placeholder="输入备注..." |
|||
></textarea> |
|||
<div |
|||
style=" |
|||
|
|||
<div class="small">共 <span id="totalCount">0</span> 条</div> |
|||
|
|||
<div class="pagination" id="pagination"></div> |
|||
</div> |
|||
<!-- 备注编辑模态 --> |
|||
<div id="noteModal"> |
|||
<div class="dialog"> |
|||
<h3 style="margin: 0 0 8px">编辑备注</h3> |
|||
<textarea id="noteTextarea" rows="6" placeholder="输入备注..."></textarea> |
|||
<div style=" |
|||
margin-top: 10px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: 8px; |
|||
" |
|||
> |
|||
<button class="btn" id="noteCancelBtn">取消</button> |
|||
<button class="btn primary" id="noteSaveBtn">保存</button> |
|||
</div> |
|||
"> |
|||
<button class="btn" id="noteCancelBtn">取消</button> |
|||
<button class="btn primary" id="noteSaveBtn">保存</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div id="toast" class="toast"></div> |
|||
<script type="module"> |
|||
import { getMemberListApi,updateMemberStateApi,editMemberNoteApi }from './src/api/member.js' |
|||
let state = { |
|||
pageSize: 20, |
|||
currentPage: 1, |
|||
total: 0, |
|||
items:[] |
|||
}; |
|||
|
|||
// DOM |
|||
const tableBody = document.getElementById("tableBody"); |
|||
const paginationEl = document.getElementById("pagination"); |
|||
const totalCountEl = document.getElementById("totalCount"); |
|||
const currentPageEl = document.getElementById("currentPage"); |
|||
const showingRangeEl = document.getElementById("showingRange"); |
|||
const pageSizeSelect = document.getElementById("pageSizeSelect"); |
|||
const gotoInput = document.getElementById("gotoInput"); |
|||
|
|||
const noteModal = document.getElementById("noteModal"); |
|||
const noteTextarea = document.getElementById("noteTextarea"); |
|||
const noteCancelBtn = document.getElementById("noteCancelBtn"); |
|||
const noteSaveBtn = document.getElementById("noteSaveBtn"); |
|||
|
|||
const toastEl = document.getElementById("toast"); |
|||
let editingRowId = null; |
|||
function showToast(msg) { |
|||
toastEl.textContent = msg; |
|||
toastEl.classList.add("show"); |
|||
setTimeout(() => toastEl.classList.remove("show"), 1000); |
|||
} |
|||
async function fetchPage(page, pageSize) { |
|||
try { |
|||
const res = await getMemberListApi({ |
|||
page: page, |
|||
page_size: pageSize, |
|||
}) |
|||
if (typeof res.code !== "undefined" && res.code !== 200) { |
|||
throw new Error(res.msg || "接口返回错误"); |
|||
} |
|||
console.log(res) |
|||
const payload = res.data || {}; |
|||
state.items = payload.list; |
|||
state.total = payload.total; |
|||
} catch (err) { |
|||
alert("获取数据失败"); |
|||
state.total = 0; |
|||
</div> |
|||
<div id="toast" class="toast"></div> |
|||
<script type="module"> |
|||
import { getMemberListApi, updateMemberStateApi, editMemberNoteApi } from './src/api/member.js' |
|||
let state = { |
|||
pageSize: 20, |
|||
currentPage: 1, |
|||
total: 0, |
|||
items: [] |
|||
}; |
|||
|
|||
// DOM |
|||
const tableBody = document.getElementById("tableBody"); |
|||
const paginationEl = document.getElementById("pagination"); |
|||
const totalCountEl = document.getElementById("totalCount"); |
|||
const currentPageEl = document.getElementById("currentPage"); |
|||
const showingRangeEl = document.getElementById("showingRange"); |
|||
const pageSizeSelect = document.getElementById("pageSizeSelect"); |
|||
const gotoInput = document.getElementById("gotoInput"); |
|||
|
|||
const noteModal = document.getElementById("noteModal"); |
|||
const noteTextarea = document.getElementById("noteTextarea"); |
|||
const noteCancelBtn = document.getElementById("noteCancelBtn"); |
|||
const noteSaveBtn = document.getElementById("noteSaveBtn"); |
|||
|
|||
const toastEl = document.getElementById("toast"); |
|||
let editingRowId = null; |
|||
function showToast(msg) { |
|||
toastEl.textContent = msg; |
|||
toastEl.classList.add("show"); |
|||
setTimeout(() => toastEl.classList.remove("show"), 1000); |
|||
} |
|||
async function fetchPage(page, pageSize) { |
|||
try { |
|||
const res = await getMemberListApi({ |
|||
page: page, |
|||
page_size: pageSize, |
|||
}) |
|||
if (typeof res.code !== "undefined" && res.code !== 200) { |
|||
throw new Error(res.msg || "接口返回错误"); |
|||
} |
|||
} |
|||
// 渲染表格行 |
|||
function renderTable() { |
|||
const startIndex = (state.currentPage - 1) * state.pageSize; |
|||
const items = state.items || []; |
|||
|
|||
tableBody.innerHTML = items |
|||
.map((item, idx) => { |
|||
const serial = startIndex + idx + 1; |
|||
const statusClass = item.isRelated ? "status-1" : "status-0"; |
|||
const statusText = item.isRelated ? "已联系" : "未联系"; |
|||
return ` |
|||
console.log(res) |
|||
const payload = res.data || {}; |
|||
state.items = payload.list; |
|||
state.total = payload.total; |
|||
} catch (err) { |
|||
alert("获取数据失败"); |
|||
state.total = 0; |
|||
} |
|||
} |
|||
// 渲染表格行 |
|||
function renderTable() { |
|||
const startIndex = (state.currentPage - 1) * state.pageSize; |
|||
const items = state.items || []; |
|||
|
|||
tableBody.innerHTML = items |
|||
.map((item, idx) => { |
|||
const serial = startIndex + idx + 1; |
|||
const statusClass = item.isRelated ? "status-1" : "status-0"; |
|||
const statusText = item.isRelated ? "已联系" : "未联系"; |
|||
|
|||
// 构建WhatsApp链接 - 移除国家代码中的+号 |
|||
const cleanCode = (item.code || '').replace(/\+/g, ''); |
|||
const whatsappPhone = cleanCode + (item.telephone || ''); |
|||
const whatsappUrl = `https://api.whatsapp.com/send?phone=${encodeURIComponent(whatsappPhone)}&text=${encodeURIComponent('hello欢迎来到赢在美股')}`; |
|||
|
|||
return ` |
|||
<tr> |
|||
<td>${serial}</td> |
|||
<td>${escapeHtml(item.name || "")}</td> |
|||
<td> |
|||
<button class="btn whatsapp" data-action="whatsapp" data-id="${item.id}">WhatsApp</button> |
|||
</td> |
|||
<td>${escapeHtml(item.code || "")}</td> |
|||
<td>${escapeHtml(item.telephone || "")}</td> |
|||
<td>${escapeHtml(item.wechat || "")}</td> |
|||
<td>${escapeHtml(item.email || "")}</td> |
|||
<td>${escapeHtml(item.createdAt || "")}</td> |
|||
<td> |
|||
<button class="status-btn ${statusClass}" data-action="toggle" data-id="${ |
|||
item.id |
|||
<button class="status-btn ${statusClass}" data-action="toggle" data-id="${item.id |
|||
}">${statusText}</button> |
|||
</td> |
|||
<td>${escapeHtml(item.note || "")}</td> |
|||
<td> |
|||
<button class="btn" data-action="editNote" data-id="${ |
|||
item.id |
|||
}">编辑备注</button> |
|||
<button class="btn" data-action="editNote" data-id="${item.id |
|||
}">编辑备注</button> |
|||
</td> |
|||
</tr> |
|||
`; |
|||
}) |
|||
.join(""); |
|||
totalCountEl.textContent = state.total; |
|||
} |
|||
}) |
|||
.join(""); |
|||
totalCountEl.textContent = state.total; |
|||
} |
|||
|
|||
tableBody.addEventListener("click", async (e) => { |
|||
// 切换状态 |
|||
const toggler = e.target.closest('[data-action="toggle"]'); |
|||
if (toggler) { |
|||
const id = toggler.getAttribute("data-id"); |
|||
await handleToggle(id, toggler); |
|||
return; |
|||
} |
|||
// 编辑备注 |
|||
const editBtn = e.target.closest('[data-action="editNote"]'); |
|||
if (editBtn) { |
|||
const id = editBtn.getAttribute("data-id"); |
|||
openNoteModal(id); |
|||
return; |
|||
} |
|||
}); |
|||
// ---------- 切换联系状态 ---------- |
|||
async function handleToggle(id, btnEl) { |
|||
const item = state.items.find((it) => String(it.id) === String(id)); |
|||
if (!item) return; |
|||
const prev = item.isRelated; |
|||
const newVal = prev ? 0 : 1; |
|||
item.isRelated = newVal; |
|||
btnEl.textContent = newVal ? "已联系" : "未联系"; |
|||
btnEl.classList.toggle("status-1", !!newVal); |
|||
btnEl.classList.toggle("status-0", !newVal); |
|||
try { |
|||
const res = await updateMemberStateApi({ id: item.id, state: newVal }) |
|||
if (typeof res.code !== "undefined" && res.code !== 200) { |
|||
throw new Error(res.msg || "更新失败"); |
|||
} |
|||
showToast("状态修改成功"); |
|||
} catch (err) { |
|||
item.isRelated = prev; |
|||
btnEl.textContent = prev ? "已联系" : "未联系"; |
|||
btnEl.classList.toggle("status-1", !!prev); |
|||
btnEl.classList.toggle("status-0", !prev); |
|||
alert("更新失败"); |
|||
} |
|||
tableBody.addEventListener("click", async (e) => { |
|||
// WhatsApp跳转 |
|||
const whatsappBtn = e.target.closest('[data-action="whatsapp"]'); |
|||
if (whatsappBtn) { |
|||
const id = whatsappBtn.getAttribute("data-id"); |
|||
handleWhatsApp(id); |
|||
return; |
|||
} |
|||
|
|||
// ---------- 备注模态相关 ---------- |
|||
function openNoteModal(id) { |
|||
const item = state.items.find((it) => String(it.id) === String(id)); |
|||
if (!item) return; |
|||
editingRowId = id; |
|||
noteTextarea.value = item.note || ""; |
|||
noteModal.style.display = "flex"; |
|||
noteTextarea.focus(); |
|||
} |
|||
function closeNoteModal() { |
|||
editingRowId = null; |
|||
noteTextarea.value = ""; |
|||
noteModal.style.display = "none"; |
|||
} |
|||
// 切换状态 |
|||
const toggler = e.target.closest('[data-action="toggle"]'); |
|||
if (toggler) { |
|||
const id = toggler.getAttribute("data-id"); |
|||
await handleToggle(id, toggler); |
|||
return; |
|||
} |
|||
// 编辑备注 |
|||
const editBtn = e.target.closest('[data-action="editNote"]'); |
|||
if (editBtn) { |
|||
const id = editBtn.getAttribute("data-id"); |
|||
openNoteModal(id); |
|||
return; |
|||
} |
|||
}); |
|||
|
|||
noteCancelBtn.addEventListener("click", closeNoteModal); |
|||
|
|||
noteSaveBtn.addEventListener("click", async () => { |
|||
if (!editingRowId) return closeNoteModal(); |
|||
const newNote = noteTextarea.value.trim(); |
|||
const item = state.items.find((it) => String(it.id) === String(editingRowId)); |
|||
if (!item) return closeNoteModal(); |
|||
|
|||
try { |
|||
const res = await editMemberNoteApi({ id: item.id, note: newNote }) |
|||
if (typeof res.code !== "undefined" && res.code !== 200) { |
|||
throw new Error(res.msg || "保存失败"); |
|||
} |
|||
const prevNote = item.note; |
|||
item.note = newNote; |
|||
renderTable(); |
|||
showToast("备注保存成功"); |
|||
} catch (err) { |
|||
alert("保存备注失败"); |
|||
} finally { |
|||
closeNoteModal(); |
|||
} |
|||
}); |
|||
// 渲染分页控件（页码、上一页、下一页） |
|||
function renderPagination() { |
|||
const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize)); |
|||
const current = Math.min(Math.max(1, state.currentPage), totalPages); |
|||
state.currentPage = current; |
|||
// ---------- WhatsApp跳转 ---------- |
|||
function handleWhatsApp(id) { |
|||
const item = state.items.find((it) => String(it.id) === String(id)); |
|||
if (!item) return; |
|||
|
|||
const pages = buildPageList(current, totalPages, 2); |
|||
// 移除国家代码中的+号 |
|||
const cleanCode = (item.code || '').replace(/\+/g, ''); |
|||
const whatsappPhone = cleanCode + (item.telephone || ''); |
|||
const whatsappUrl = `https://api.whatsapp.com/send?phone=${encodeURIComponent(whatsappPhone)}&text=${encodeURIComponent('hello欢迎来到赢在美股')}`; |
|||
|
|||
let html = ""; |
|||
html += `<button class="btn" data-action="prev" ${ |
|||
current === 1 ? "disabled" : "" |
|||
}>上一页</button>`; |
|||
pages.forEach((p) => { |
|||
if (p === "...") { |
|||
html += `<span class="small" style="padding:6px 8px">...</span>`; |
|||
} else { |
|||
html += `<button class="btn ${ |
|||
p === current ? "active" : "" |
|||
}" data-page="${p}">${p}</button>`; |
|||
} |
|||
}); |
|||
html += `<button class="btn" data-action="next" ${ |
|||
current === totalPages ? "disabled" : "" |
|||
}>下一页</button>`; |
|||
window.open(whatsappUrl, '_blank'); |
|||
} |
|||
|
|||
paginationEl.innerHTML = html; |
|||
} |
|||
// ---------- 切换联系状态 ---------- |
|||
async function handleToggle(id, btnEl) { |
|||
const item = state.items.find((it) => String(it.id) === String(id)); |
|||
if (!item) return; |
|||
const prev = item.isRelated; |
|||
const newVal = prev ? 0 : 1; |
|||
item.isRelated = newVal; |
|||
btnEl.textContent = newVal ? "已联系" : "未联系"; |
|||
btnEl.classList.toggle("status-1", !!newVal); |
|||
btnEl.classList.toggle("status-0", !newVal); |
|||
try { |
|||
const res = await updateMemberStateApi({ id: item.id, state: newVal }) |
|||
if (typeof res.code !== "undefined" && res.code !== 200) { |
|||
throw new Error(res.msg || "更新失败"); |
|||
} |
|||
showToast("状态修改成功"); |
|||
} catch (err) { |
|||
item.isRelated = prev; |
|||
btnEl.textContent = prev ? "已联系" : "未联系"; |
|||
btnEl.classList.toggle("status-1", !!prev); |
|||
btnEl.classList.toggle("status-0", !prev); |
|||
alert("更新失败"); |
|||
} |
|||
} |
|||
|
|||
function buildPageList(current, total, delta) { |
|||
const pages = []; |
|||
const left = Math.max(1, current - delta); |
|||
const right = Math.min(total, current + delta); |
|||
// ---------- 备注模态相关 ---------- |
|||
function openNoteModal(id) { |
|||
const item = state.items.find((it) => String(it.id) === String(id)); |
|||
if (!item) return; |
|||
editingRowId = id; |
|||
noteTextarea.value = item.note || ""; |
|||
noteModal.style.display = "flex"; |
|||
noteTextarea.focus(); |
|||
} |
|||
function closeNoteModal() { |
|||
editingRowId = null; |
|||
noteTextarea.value = ""; |
|||
noteModal.style.display = "none"; |
|||
} |
|||
|
|||
if (left > 1) { |
|||
pages.push(1); |
|||
if (left > 2) pages.push("..."); |
|||
} |
|||
noteCancelBtn.addEventListener("click", closeNoteModal); |
|||
|
|||
for (let i = left; i <= right; i++) pages.push(i); |
|||
noteSaveBtn.addEventListener("click", async () => { |
|||
if (!editingRowId) return closeNoteModal(); |
|||
const newNote = noteTextarea.value.trim(); |
|||
const item = state.items.find((it) => String(it.id) === String(editingRowId)); |
|||
if (!item) return closeNoteModal(); |
|||
|
|||
if (right < total) { |
|||
if (right < total - 1) pages.push("..."); |
|||
pages.push(total); |
|||
try { |
|||
const res = await editMemberNoteApi({ id: item.id, note: newNote }) |
|||
if (typeof res.code !== "undefined" && res.code !== 200) { |
|||
throw new Error(res.msg || "保存失败"); |
|||
} |
|||
const prevNote = item.note; |
|||
item.note = newNote; |
|||
renderTable(); |
|||
showToast("备注保存成功"); |
|||
} catch (err) { |
|||
alert("保存备注失败"); |
|||
} finally { |
|||
closeNoteModal(); |
|||
} |
|||
}); |
|||
// 渲染分页控件（页码、上一页、下一页） |
|||
function renderPagination() { |
|||
const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize)); |
|||
const current = Math.min(Math.max(1, state.currentPage), totalPages); |
|||
state.currentPage = current; |
|||
|
|||
return pages; |
|||
} |
|||
const pages = buildPageList(current, totalPages, 2); |
|||
|
|||
paginationEl.addEventListener("click", (e) => { |
|||
const btn = e.target.closest("button"); |
|||
if (!btn) return; |
|||
const action = btn.getAttribute("data-action"); |
|||
if (action === "prev") { |
|||
if (state.currentPage > 1) state.currentPage--; |
|||
} else if (action === "next") { |
|||
const totalPages = Math.max( |
|||
1, |
|||
Math.ceil(state.total / state.pageSize) |
|||
); |
|||
if (state.currentPage < totalPages) state.currentPage++; |
|||
let html = ""; |
|||
html += `<button class="btn" data-action="prev" ${current === 1 ? "disabled" : "" |
|||
}>上一页</button>`; |
|||
pages.forEach((p) => { |
|||
if (p === "...") { |
|||
html += `<span class="small" style="padding:6px 8px">...</span>`; |
|||
} else { |
|||
const p = Number(btn.getAttribute("data-page")); |
|||
if (!isNaN(p)) state.currentPage = p; |
|||
html += `<button class="btn ${p === current ? "active" : "" |
|||
}" data-page="${p}">${p}</button>`; |
|||
} |
|||
update(); |
|||
}); |
|||
html += `<button class="btn" data-action="next" ${current === totalPages ? "disabled" : "" |
|||
}>下一页</button>`; |
|||
|
|||
// 每页条数变更 |
|||
pageSizeSelect.addEventListener("change", () => { |
|||
const newSize = parseInt(pageSizeSelect.value, 10); |
|||
state.pageSize = newSize; |
|||
state.currentPage = 1; |
|||
update(); |
|||
gotoInput.value = ""; |
|||
}); |
|||
paginationEl.innerHTML = html; |
|||
} |
|||
|
|||
async function update() { |
|||
const p = Math.max(1, state.currentPage); |
|||
state.currentPage = p; |
|||
await fetchPage(state.currentPage, state.pageSize); |
|||
renderTable(); |
|||
renderPagination(); |
|||
function buildPageList(current, total, delta) { |
|||
const pages = []; |
|||
const left = Math.max(1, current - delta); |
|||
const right = Math.min(total, current + delta); |
|||
|
|||
if (left > 1) { |
|||
pages.push(1); |
|||
if (left > 2) pages.push("..."); |
|||
} |
|||
|
|||
// 简单安全的文本转义（防 XSS） |
|||
function escapeHtml(s) { |
|||
return String(s) |
|||
.replace(/&/g, "&") |
|||
.replace(/</g, "<") |
|||
.replace(/>/g, ">") |
|||
.replace(/"/g, """) |
|||
.replace(/'/g, "'"); |
|||
for (let i = left; i <= right; i++) pages.push(i); |
|||
|
|||
if (right < total) { |
|||
if (right < total - 1) pages.push("..."); |
|||
pages.push(total); |
|||
} |
|||
|
|||
// 首次渲染 |
|||
return pages; |
|||
} |
|||
|
|||
paginationEl.addEventListener("click", (e) => { |
|||
const btn = e.target.closest("button"); |
|||
if (!btn) return; |
|||
const action = btn.getAttribute("data-action"); |
|||
if (action === "prev") { |
|||
if (state.currentPage > 1) state.currentPage--; |
|||
} else if (action === "next") { |
|||
const totalPages = Math.max( |
|||
1, |
|||
Math.ceil(state.total / state.pageSize) |
|||
); |
|||
if (state.currentPage < totalPages) state.currentPage++; |
|||
} else { |
|||
const p = Number(btn.getAttribute("data-page")); |
|||
if (!isNaN(p)) state.currentPage = p; |
|||
} |
|||
update(); |
|||
</script> |
|||
</body> |
|||
}); |
|||
|
|||
// 每页条数变更 |
|||
pageSizeSelect.addEventListener("change", () => { |
|||
const newSize = parseInt(pageSizeSelect.value, 10); |
|||
state.pageSize = newSize; |
|||
state.currentPage = 1; |
|||
update(); |
|||
gotoInput.value = ""; |
|||
}); |
|||
|
|||
async function update() { |
|||
const p = Math.max(1, state.currentPage); |
|||
state.currentPage = p; |
|||
await fetchPage(state.currentPage, state.pageSize); |
|||
renderTable(); |
|||
renderPagination(); |
|||
} |
|||
|
|||
// 简单安全的文本转义（防 XSS） |
|||
function escapeHtml(s) { |
|||
return String(s) |
|||
.replace(/&/g, "&") |
|||
.replace(/</g, "<") |
|||
.replace(/>/g, ">") |
|||
.replace(/"/g, """) |
|||
.replace(/'/g, "'"); |
|||
} |
|||
|
|||
// 首次渲染 |
|||
update(); |
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue