From d93ed5c5aadcf3d49f824339c26ebfac911be06d Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期五, 07 十一月 2025 14:39:38 +0800
Subject: [PATCH] 测试完成
---
src/components/CallCenterLs/index.vue | 137 ++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 120 insertions(+), 17 deletions(-)
diff --git a/src/components/CallCenterLs/index.vue b/src/components/CallCenterLs/index.vue
index 2114df6..1ffc805 100644
--- a/src/components/CallCenterLs/index.vue
+++ b/src/components/CallCenterLs/index.vue
@@ -25,7 +25,18 @@
<span class="btn-icon">馃摓</span>
{{ callButtonText }}
</button>
-
+ <button
+ @click="handleSeatLogout"
+ :class="[
+ 'seat-btn',
+ 'logout',
+ { 'in-call': isInCall || isCalling },
+ ]"
+ :disabled="!canLogout"
+ >
+ <span class="btn-icon">馃毆</span>
+ {{ isInCall || isCalling ? "寮哄埗绛惧嚭" : "绛惧嚭" }}
+ </button>
<button
@click="handleHangup"
class="hangup-btn"
@@ -60,9 +71,7 @@
<div class="status-item" v-if="callDuration">
<span class="status-label">閫氳瘽鏃堕暱:</span>
- <span class="duration-display">
- 鈴憋笍 {{ callDuration }}
- </span>
+ <span class="duration-display"> 鈴憋笍 {{ callDuration }} </span>
</div>
</div>
</div>
@@ -131,7 +140,10 @@
isInCall() {
return this.callStatus === "connected";
},
-
+ canLogout() {
+ // 鍙湁鍦ㄥ凡绛惧叆鐘舵�佹墠鍏佽绛惧嚭锛堟棤璁烘槸鍚﹀湪閫氳瘽涓級
+ return this.isSeatLoggedIn && !this.isSeatLoggingOut;
+ },
canMakeCall() {
return (
this.isSeatLoggedIn &&
@@ -204,7 +216,40 @@
this.$refs.callComponent.callout(this.customerPhone);
this.startCallTimer();
},
+ async handleSeatLogout() {
+ if (!this.canLogout) return;
+ try {
+ // 濡傛灉姝ｅ湪閫氳瘽涓紝鍏堟寕鏂�
+ if (this.isInCall || this.isCalling) {
+ // 鏄剧ず纭瀵硅瘽妗�
+ const confirm = await this.$confirm(
+ "纭畾瑕佺鍑哄悧锛熺鍑哄皢缁撴潫褰撳墠閫氳瘽",
+ "鎻愮ず",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }
+ );
+ await this.handleHangup();
+ }
+ console.log(2);
+
+ // 鎵ц绛惧嚭
+ await this.$refs.callComponent.handleSeatLogout();
+ console.log(3);
+ this.isSeatLoggedIn = false;
+
+ this.$message.success("搴у腑绛惧嚭鎴愬姛");
+ } catch (error) {
+ if (error !== "cancel") {
+ // 蹇界暐鐢ㄦ埛鍙栨秷鐨勬儏鍐�
+ console.error("绛惧嚭澶辫触:", error);
+ this.$message.error("搴у腑绛惧嚭澶辫触");
+ }
+ }
+ },
handleHangup() {
this.$refs.callComponent.hangup();
this.stopCallTimer();
@@ -213,13 +258,19 @@
onSeatStatusChange(status) {
this.isSeatLoggedIn = status.isLoggedIn;
+
+ // 濡傛灉搴у腑绛惧嚭锛岄噸缃�氳瘽鐘舵��
+ if (!status.isLoggedIn) {
+ this.callStatus = "idle";
+ this.stopCallTimer();
+ }
},
onCallStatusChange(status) {
this.callStatus = status.status;
- if (status.status === "connected") {
+ if (status.status == "connected") {
this.startCallTimer();
- } else if (status.status === "idle") {
+ } else if (status.status == "idle") {
this.stopCallTimer();
}
},
@@ -283,6 +334,11 @@
beforeUnmount() {
this.stopCallTimer();
+
+ // 缁勪欢閿�姣佸墠灏濊瘯绛惧嚭
+ if (this.isSeatLoggedIn) {
+ this.handleSeatLogout().catch(console.error);
+ }
},
};
</script>
@@ -303,13 +359,44 @@
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 20px;
- padding-bottom: 0;
+ padding-bottom: 0;
@media (max-width: 1024px) {
grid-template-columns: 1fr;
}
}
+.seat-btn.logout {
+ background: linear-gradient(135deg, #f97316, #ea580c);
+ color: white;
+
+ &:hover:not(:disabled) {
+ box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4);
+ }
+
+ // 閫氳瘽涓殑鐗规畩鏍峰紡
+ &.in-call {
+ background: linear-gradient(135deg, #ef4444, #dc2626);
+ animation: pulse 1.5s infinite;
+
+ &:hover:not(:disabled) {
+ box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
+ }
+ }
+}
+
+// 閫氳瘽涓鍑烘寜閽殑鐗规畩鍔ㄧ敾
+@keyframes pulse-red {
+ 0% {
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
+ }
+ 50% {
+ box-shadow: 0 4px 20px rgba(239, 68, 68, 0.8);
+ }
+ 100% {
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
+ }
+}
.section-title {
font-size: 16px;
font-weight: 600;
@@ -407,7 +494,11 @@
}
.call-btn.calling {
- background: linear-gradient(135deg, #f59e0b, #d97706); /* 鍛煎彨涓姸鎬佹敼涓烘鑹叉笎鍙� */
+ background: linear-gradient(
+ 135deg,
+ #f59e0b,
+ #d97706
+ ); /* 鍛煎彨涓姸鎬佹敼涓烘鑹叉笎鍙� */
animation: pulse 1.5s infinite; /* 鍛煎彨涓坊鍔犲懠鍚歌剦鍐插姩鐢� */
}
@@ -432,9 +523,15 @@
/* 鑴夊啿鍔ㄧ敾瀹氫箟 */
@keyframes pulse {
- 0% { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5); }
- 50% { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.8); }
- 100% { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5); }
+ 0% {
+ box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
+ }
+ 50% {
+ box-shadow: 0 4px 20px rgba(245, 158, 11, 0.8);
+ }
+ 100% {
+ box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
+ }
}
// 鐘舵�佹樉绀烘牱寮�
@@ -513,7 +610,7 @@
}
.duration-display {
- font-family: 'Courier New', monospace;
+ font-family: "Courier New", monospace;
font-weight: 600;
color: #059669;
font-size: 14px;
@@ -537,7 +634,7 @@
}
.debug-title {
- font-size: 16px;
+ font-size: 16px;
font-weight: 600;
color: #1e293b;
margin-bottom: 16px;
@@ -570,9 +667,15 @@
// 鍔ㄧ敾瀹氫箟
@keyframes pulse {
- 0% { opacity: 1; }
- 50% { opacity: 0.5; }
- 100% { opacity: 1; }
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 1;
+ }
}
// 鍝嶅簲寮忚璁�
--
Gitblit v1.9.3