From cb99b03c875f724300ad96d8d9192ad0693534e6 Mon Sep 17 00:00:00 2001
From: hucan <951870319@qq.com>
Date: Tue, 9 Sep 2025 20:47:29 +0800
Subject: [PATCH] 1
---
cli-traffic.html | 544 ++++++++++++++++++++++++-------------
static/css/cli-traffic.css | 203 ++++++++++++++
2 files changed, 563 insertions(+), 184 deletions(-)
create mode 100644 static/css/cli-traffic.css
diff --git a/cli-traffic.html b/cli-traffic.html
index f5efc41..195ef4c 100644
--- a/cli-traffic.html
+++ b/cli-traffic.html
@@ -36,6 +36,7 @@
+
@@ -116,6 +117,14 @@
长效号码
+
+ API密钥
+
@@ -181,8 +190,25 @@
@@ -700,6 +797,20 @@
+
+
+
+ @change="handleSmsServiceChange">
- 价格U: {{ this.smsForm.type===1&&this.smsForm.period>0? this.smsPrice*this.smsForm.period :this.smsPrice}}
+ 价格U: {{ totalSmsPrice}}
-
@@ -786,15 +897,23 @@
pageSize:10,
total:0,
serviceCode:"",
+ platform:"",
},
//短信列表
smsList:[],
showGetSms:false,
smsForm:{},
+ smsPlatformList:[],
checkSmsCodeTimer:null,
+ longSmsStatusTimer:null,
smsPrice:undefined,
//Ip单价
price:undefined,
+ //API管理相关
+ apiId:undefined,
+ apiKey: '',
+ showApiKey: false,
+ apiStatus: false,
};
},
mounted() {
@@ -815,10 +934,22 @@
this.getMyProxy();
this.getTraffictList();
this.getTrafficServer();
- this.getSmsServices();
+ // this.getSmsServices();
+ this.getSmsPlatformList();
//定时器
this.createCheckSmsCodeTimer();
+ this.createLongSmsStatusTimer();
+ },
+ computed:{
+ totalSmsPrice(){
+ // 使用 parseFloat() 将值转换为浮点数，如果无法转换则默认为 0
+ const period = parseFloat(this.smsForm.period) || 1;
+ const price = parseFloat(this.smsPrice) || 0;
+
+ // 确保在执行乘法或 toFixed() 前，price 和 period 都是数字
+ return period > 0 ? (price * period).toFixed(2) : price.toFixed(2);
+ }
},
watch: {
showGetProxy(val, oldVal) {
@@ -858,7 +989,7 @@
},
},
methods: {
- getSmsServices(){
+ getSmsServices(platform){
fetch(requestApi + "/sms-services/list", {
headers:{
Authorization: `Bearer ${this.token}`,
@@ -868,9 +999,10 @@
})
.then((res) => res.json())
.then((response) => {
- console.log('getSmsServices',response);
if (response.code === 200) {
- this.smsServices = response.data;
+ let datas= response.data.filter(x=>x.platformCode===platform)
+ console.log("getSmsServices:",datas)
+ this.smsServices = datas?datas:[];
}
})
.catch((error) => {
@@ -1265,8 +1397,9 @@
this.smsForm.type=0;
this.smsForm.serviceCode="";
this.smsForm.period=undefined;
+ this.smsForm.platform="";
this.reloadSmsList();
- this.handleGetPrice(this.smsForm.type);
+ // this.handleGetPrice(this.smsForm.type);
break;
case 4:
this.smsQuery.page=1;
@@ -1274,8 +1407,12 @@
this.smsForm.type=1;
this.smsForm.serviceCode="";
this.smsForm.period=undefined;
+ this.smsForm.platform="";
this.reloadSmsList();
- this.handleGetPrice(this.smsForm.type);
+ // this.handleGetPrice(this.smsForm.type);
+ break;
+ case 5:
+ this.getApiKey();
break;
}
},
@@ -1631,10 +1768,17 @@
},
//sms service切换
handleSmsServiceChange(item){
- this.smsQuery.serviceCode=item.code;
+ let service=this.smsServices.find(x=>x.code===item);
+
+ if(service&&this.smsForm.type===1){
+ this.smsPrice=service.longPrice;
+ }else if(service&&this.smsForm.type===0){
+ this.smsPrice=service.price;
+ }
},
//重置sms列表
handleResetSmsList(){
+ this.smsQuery.platform="";
this.smsQuery.serviceCode="";
this.smsQuery.page=1;
@@ -1658,6 +1802,7 @@
type:type,
pageIndex: this.smsQuery.page,
pageSize: this.smsQuery.pageSize,
+ platformCode:this.smsQuery.platform,
serviceCode: this.smsQuery.serviceCode,
};
@@ -1691,6 +1836,7 @@
handleShowGetSms(){
this.smsForm.period=undefined;
this.smsForm.serviceCode="";
+ this.smsForm.platform="";
this.showGetSms = true;
},
resetSmsForm(){
@@ -1700,6 +1846,7 @@
type = 1;
}
this.smsForm={
+ platform: "",
serviceCode: "",
period:undefined,
type:type,
@@ -1728,6 +1875,7 @@
}
let data = JSON.stringify({
+ platformCode: this.smsForm.platform,
serviceCode: this.smsForm.serviceCode,
type: this.smsForm.type,
period: Number(this.smsForm.period),
@@ -1802,14 +1950,14 @@
codesMap.set(item.activationId, item);
});
- console.log(codesMap);
-
this.smsList.forEach(item => {
const newItem = codesMap.get(item.activationId); // 尝试从 Map 中获取新 code
if (newItem!==undefined&&newItem!==null&&newItem.status===2) { // 如果找到了匹配的 activationId
item.code = newItem.code; // 替换 code
item.status = newItem.status; // 修改 status 为 2
+ }else if (newItem!==undefined&&newItem!==null&&newItem.status===3){
+ item.status=newItem.status
}})
}
})
@@ -1930,23 +2078,25 @@
this.hiddenLoading();
});
},
- handleGetPrice(type){
- fetch(requestApi + "/sms-services/price?type=" + type, {
- headers: {
- Authorization: `Bearer ${this.token}`,
- "Content-Type": "application/json",
- Accept: "application/json",
- }
- })
- .then((res) => res.json())
- .then((response) => {
- if (response.code === 200) {
- this.smsPrice = response.data;
+ handleGetPrice(type,platformCode,servicesCode){
+ if (type&&platformCode&&servicesCode) {
+ fetch(`${requestApi}/sms-services/price?type=${type}&platformCode=${platformCode}&serviceCode=${servicesCode}`, {
+ headers: {
+ Authorization: `Bearer ${this.token}`,
+ "Content-Type": "application/json",
+ Accept: "application/json",
}
- })
- .catch((error) => {
- console.log(error);
- });
+ })
+ .then((res) => res.json())
+ .then((response) => {
+ if (response.code === 200) {
+ this.smsPrice = response.data;
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
},
//取消sms
handleCancelSms(row){
@@ -2244,156 +2394,182 @@
this.hiddenLoading();
});
},
+ getSmsPlatformList(){
+ fetch(requestApi + "/sms-services/platform", {
+ headers: {
+ Authorization: `Bearer ${this.token}`,
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ }
+ })
+ .then((res) => res.json())
+ .then((response) => {
+ console.log(response);
+ if (response.code === 200) {
+ this.smsPlatformList = response.data;
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ },
+ handlePlatformChange(item){
+ console.log("handlePlatformChange:",item);
+ this.smsQuery.serviceCode="";
+ this.smsForm.serviceCode="";
+
+ this.getSmsServices(item);
+ },
+ handleFormServiceChange(serviceCode){
+ this.handleGetPrice(this.smsForm.type,this.smsForm.platformCode,serviceCode);
+ },
+ // API管理相关方法
+ getApiKey() {
+ console.log("",requestApi+"/api-info");
+ fetch(requestApi + "/api-info", {
+ headers: {
+ Authorization: `Bearer ${this.token}`,
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ })
+ .then((res) => res.json())
+ .then((response) => {
+ if (response.code === 200) {
+ this.apiId = response.data.id
+ this.apiKey = response.data.api || '';
+ this.apiStatus = response.data.status === 1;
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ },
+ toggleApiKeyVisibility() {
+ this.showApiKey = !this.showApiKey;
+ },
+ handleApiStatusChange(status) {
+ this.showLoading();
+ const data = JSON.stringify({
+ id:this.apiId,
+ status: status ? 1 : 2
+ });
+
+ fetch(requestApi + "/api-info", {
+ method: "PUT",
+ headers: {
+ Authorization: `Bearer ${this.token}`,
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ body: data,
+ })
+ .then((res) => res.json())
+ .then((response) => {
+ if (response.code === 200) {
+ this.$vs.notify({
+ title: "提示",
+ color: "success",
+ text: `API已${status ? '开启' : '关闭'}`,
+ position: "top-right",
+ });
+ } else {
+ // 如果请求失败，恢复原状态
+ this.apiStatus = !status;
+ this.$vs.notify({
+ title: "提示",
+ color: "danger",
+ text: response.msg || "操作失败",
+ position: "top-right",
+ });
+ }
+ })
+ .catch((error) => {
+ // 如果请求失败，恢复原状态
+ this.apiStatus = !status;
+ console.log(error);
+ this.$vs.notify({
+ title: "提示",
+ color: "danger",
+ text: "网络错误，请稍后重试",
+ position: "top-right",
+ });
+ })
+ .finally(() => {
+ this.hiddenLoading();
+ });
+ },
+ /**
+ * 创建长效号码状态检查定时器
+ * 用于定期检查和更新长效号码的倒计时状态
+ */
+ createLongSmsStatusTimer() {
+ if (this.longSmsStatusTimer) {
+ clearInterval(this.longSmsStatusTimer);
+ }
+ // 每秒检查一次状态更新
+ this.longSmsStatusTimer = setInterval(() => {
+ this.updateLongSmsStatus();
+ }, 1000);
+ },
+ /**
+ * 清理长效号码状态检查定时器
+ */
+ cleanLongSmsStatusTimer() {
+ if (this.longSmsStatusTimer) {
+ clearInterval(this.longSmsStatusTimer);
+ this.longSmsStatusTimer = null;
+ }
+ },
+ /**
+ * 更新长效号码状态
+ * 检查倒计时是否结束，并触发相应的状态更新
+ */
+ updateLongSmsStatus() {
+ if (this.activeMenu !== 4 || !this.smsList.length) {
+ return;
+ }
+
+ const now = new Date();
+ let needRefresh = false;
+
+ this.smsList.forEach(item => {
+ // 检查唤醒倒计时是否结束
+ if (item.startTime && now >= new Date(item.startTime) &&
+ item.endTime && now < new Date(item.endTime)) {
+ // 唤醒倒计时结束，进入接码中状态
+ if (!item._inReceivingState) {
+ item._inReceivingState = true;
+ needRefresh = true;
+ }
+ }
+
+ // 检查接码中倒计时是否结束
+ if (item.endTime && now >= new Date(item.endTime)) {
+ // 接码中倒计时结束，恢复原有逻辑
+ if (item._inReceivingState) {
+ item._inReceivingState = false;
+ needRefresh = true;
+ }
+ }
+ });
+
+ // 如果有状态变化，强制更新视图
+ if (needRefresh) {
+ this.$forceUpdate();
+ }
+ },
+ },
+ beforeDestroy() {
+ // 清理定时器，防止内存泄漏
+ this.cleanLongSmsStatusTimer();
+ if (this.checkSmsCodeTimer) {
+ clearInterval(this.checkSmsCodeTimer);
+ }
+ if (this.checkOrderTimer) {
+ clearInterval(this.checkOrderTimer);
+ }
},
});
-
diff --git a/static/css/cli-traffic.css b/static/css/cli-traffic.css
new file mode 100644
index 0000000..888b5bc
--- /dev/null
+++ b/static/css/cli-traffic.css
@@ -0,0 +1,203 @@
+/* CLI Traffic 页面样式 */
+html,
+body,
+#app {
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ font-family: DMSans-Regular;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 60px;
+ background-color: #fff;
+ border-bottom: 1px solid #eee;
+ padding: 0 20px;
+}
+
+.parentx-static {
+ overflow: hidden;
+ height: 500px;
+ position: relative;
+}
+
+.logo {
+ font-weight: bold;
+ font-size: 20px;
+ padding: 15px 0px 15px 15px;
+ height: 100%;
+ cursor: pointer;
+}
+
+.main-area {
+ display: flex;
+ height: calc(100vh - 60px); /* 减去 header 高度 */
+}
+
+.sidebar {
+ width: 200px;
+ background-color: #ffffff;
+ border-right: 1px solid #eee;
+}
+
+.sidebar .vs-content-sidebar .vs-sidebar {
+ background-color: unset !important;
+}
+
+.content {
+ flex: 1;
+ padding: 8px;
+ overflow: auto;
+ background: #eeeeee;
+}
+
+.content-conter {
+ background-color: white;
+ padding: 16px;
+ height: 100%;
+}
+
+/* .user-dropdown{
+ color: #000;
+} */
+.dropdown-menu {
+ width: 100px;
+}
+
+.tablex {
+ width: 100%;
+ padding-top: 10px;
+}
+
+.popup-content {
+ padding-bottom: 15px;
+}
+
+.popup-bottom {
+ text-align: right;
+ padding-top: 10px;
+}
+
+.qr-code {
+ height: 155px;
+}
+
+.success-contianer {
+ height: 100%;
+ line-height: 155px;
+}
+
+.success-contianer img {
+ height: 40px;
+}
+
+.content-conter-header {
+ display: flex;
+ padding-bottom: 5px;
+}
+
+/* .content-conter-header > *:not(:first-child) {
+ margin-left: 10px;
+} */
+
+.balance-btn[data-v-d585ebde] {
+ padding: 0 10px;
+ box-sizing: border-box;
+ max-width: max-content;
+ height: 30px;
+ line-height: 30px;
+ background: #ff916f33;
+ border-radius: 4px;
+ font-weight: 700;
+ font-size: 14px;
+ color: #ff916f;
+ margin-right: 28px;
+ cursor: pointer;
+}
+
+.table-cell-center {
+ text-align: left;
+}
+
+.btn-group {
+ display: flex;
+ gap: 10px;
+ place-items: end;
+ padding-left: 10px;
+}
+
+.operat-btn {
+ margin-top: 10px;
+}
+
+.form-item {
+ padding-top: 10px;
+}
+
+.content-conter-container {
+ height: calc(100% - 45px);
+ overflow-y: auto;
+}
+
+.content-conter-footer {
+ height: 45px;
+}
+
+/* API管理样式 */
+.api-management {
+ padding: 20px;
+}
+
+.api-section h3 {
+ margin-bottom: 20px;
+ color: #333;
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.api-key-container {
+ background: #f8f9fa;
+ padding: 20px;
+ border-radius: 8px;
+ border: 1px solid #e9ecef;
+}
+
+.api-key-item, .api-status-item {
+ margin-bottom: 20px;
+}
+
+.api-key-item:last-child, .api-status-item:last-child {
+ margin-bottom: 0;
+}
+
+.api-key-item label, .api-status-item label {
+ display: block;
+ margin-bottom: 8px;
+ font-weight: 500;
+ color: #495057;
+}
+
+.api-key-display {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.api-key-display .vs-input {
+ flex: 1;
+}
+
+.api-status-display {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.status-text {
+ font-weight: 500;
+ color: #495057;
+}
\ No newline at end of file