From 209b2f7b9a0b2abc4043f22bed9b06ab2650ba59 Mon Sep 17 00:00:00 2001
From: WXL <1785969728@qq.com>
Date: 星期四, 07 八月 2025 10:03:31 +0800
Subject: [PATCH] 测试完成
---
src/components/CallButton/index.vue | 207 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 157 insertions(+), 50 deletions(-)
diff --git a/src/components/CallButton/index.vue b/src/components/CallButton/index.vue
index 6ff7055..55db2ca 100644
--- a/src/components/CallButton/index.vue
+++ b/src/components/CallButton/index.vue
@@ -3,17 +3,19 @@
<div class="sip-status" :class="sipStatusClass">
SIP鐘舵��: {{ sipStatus }}
</div>
- <!-- 鍙风爜杈撳叆 -->
- <input
- v-model="phoneNumber"
- type="text"
- placeholder="杈撳叆鐢佃瘽鍙风爜"
- @keyup.enter="startCall"
- />
+
+ <!-- 鐘舵�佹樉绀� -->
+ <div class="call-status" :class="callStatusClass">
+ {{ callStatusText }}
+ </div>
<!-- 鍛煎彨鎸夐挳 -->
- <button :class="['call-btn', { calling: isCalling }]" @click="startCall">
- {{ isCalling ? "閫氳瘽涓�..." : "涓�閿懠鍙�" }}
+ <button
+ :class="['call-btn', { calling: isCalling }]"
+ @click="startCall"
+ :disabled="isCalling || sipStatus !== '宸叉敞鍐�'"
+ >
+ {{ callButtonText }}
</button>
<!-- 鎸傛柇鎸夐挳 -->
@@ -21,11 +23,6 @@
<!-- 闊抽鍏冪礌锛堥殣钘忥級 -->
<audio id="remoteAudio" autoplay></audio>
-
- <!-- 鐘舵�佹樉绀� -->
- <div class="call-status">
- {{ callStatus }}
- </div>
</div>
</template>
@@ -33,76 +30,87 @@
import sipService from "@/utils/sipService";
export default {
+ props: {
+ phoneNumber: {
+ type: String,
+ default: ''
+ }
+ },
data() {
return {
- phoneNumber: "",
isCalling: false,
- callStatus: "鍑嗗灏辩华",
+ callStatus: 'idle', // idle, calling, connected, ended
sipStatus: "鏈繛鎺�",
sipStatusClass: "status-disconnected",
+ randomNum = Math.floor(Math.random() * 21) + 1000, // 鐢熸垚 1000-1020 鐨勯殢鏈烘暣鏁�
sipConfig: {
- wsUrl: "wss://192.168.100.6:7443",
- sipUri: "1000@192.168.100.6",
+ wsUrl: "wss://192.168.10.124:7443",
+ sipUri: `${randomNum}`+"@192.168.10.124",
password: "Smartor@2023",
displayName: "Web 灏忛緳",
- realm: "192.168.100.6:8090",
},
};
},
+ computed: {
+ callStatusText() {
+ const statusMap = {
+ idle: '鍑嗗灏辩华',
+ calling: '鍛煎彨涓�...',
+ connected: '閫氳瘽涓�',
+ ended: '閫氳瘽缁撴潫'
+ };
+ return statusMap[this.callStatus];
+ },
+ callStatusClass() {
+ return `status-${this.callStatus}`;
+ },
+ callButtonText() {
+ return this.isCalling ? "閫氳瘽涓�..." : "涓�閿懠鍙�";
+ }
+ },
mounted() {
- // 娴嬭瘯
- const ws = new WebSocket("wss://192.168.100.6:7443");
- ws.onopen = () => console.log("WebSocket 杩炴帴鎴愬姛");
- ws.onerror = (e) => console.error("WebSocket 閿欒:", e);
-
-
- // 鍒濆鍖朣IP杩炴帴
-
sipService.init(this.sipConfig);
sipService.onStatusChange = (status) => {
this.sipStatus = status.text;
this.sipStatusClass = `status-${status.type}`;
+ };
- // 鏍规嵁鐘舵�佹洿鏂癠I鎴栨墽琛屽叾浠栨搷浣�
- if (status.type === "registered") {
- console.log("SIP娉ㄥ唽鎴愬姛锛屽彲浠ュ紑濮嬪懠鍙�");
- } else if (status.type === "failed") {
- console.error("SIP娉ㄥ唽澶辫触");
- }
+ // 鐩戝惉閫氳瘽鐘舵�佸彉鍖�
+ sipService.onCallStatusChange = (status) => {
+ this.callStatus = status.type;
+ this.isCalling = status.type === 'calling' || status.type === 'connected';
+
+ // 閫氱煡鐖剁粍浠堕�氳瘽鐘舵�佸彉鍖�
+ this.$emit('call-status-change', status);
};
},
- beforeDestroy() {
- // 缁勪欢閿�姣佹椂缁撴潫閫氳瘽
- this.endCall();
- },
methods: {
- // 寮�濮嬪懠鍙�
async startCall() {
if (!this.phoneNumber) {
- this.callStatus = "璇疯緭鍏ョ數璇濆彿鐮�";
+ this.$message.error("璇疯緭鍏ョ數璇濆彿鐮�");
return;
}
- try {
- this.isCalling = true;
- this.callStatus = "鍛煎彨涓�...";
- // 璋冪敤SIP鏈嶅姟
- sipService.makeCall(this.phoneNumber);
- this.callStatus = "閫氳瘽宸插缓绔�";
+ try {
+ this.callStatus = 'calling';
+ this.isCalling = true;
+
+ await sipService.makeCall(this.phoneNumber);
+
} catch (error) {
console.error("鍛煎彨澶辫触:", error);
- this.callStatus = `鍛煎彨澶辫触: ${error.message}`;
+ this.callStatus = 'ended';
this.isCalling = false;
+ this.$message.error(`鍛煎彨澶辫触: ${error.message}`);
}
},
- // 缁撴潫閫氳瘽
endCall() {
sipService.endCall();
+ this.callStatus = 'ended';
this.isCalling = false;
- this.callStatus = "閫氳瘽宸茬粨鏉�";
- },
- },
+ }
+ }
};
</script>
@@ -132,7 +140,106 @@
border-radius: 4px;
cursor: pointer;
}
+.call-status {
+ padding: 8px;
+ margin: 10px 0;
+ border-radius: 4px;
+ text-align: center;
+}
+.status-idle {
+ background-color: #f5f5f5;
+ color: #666;
+}
+
+.status-calling {
+ background-color: #fff8e1;
+ color: #ff8f00;
+}
+
+.status-connected {
+ background-color: #e8f5e9;
+ color: #2e7d32;
+}
+
+.status-ended {
+ background-color: #ffebee;
+ color: #c62828;
+}
+
+/* 鍘熸湁鏍峰紡淇濇寔涓嶅彉 */
+.call-container {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ max-width: 300px;
+ margin: 0 auto;
+ padding: 20px;
+ border: 1px solid #eee;
+ border-radius: 8px;
+}
+
+.call-btn {
+ padding: 10px;
+ background-color: #4caf50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.call-btn:hover:not(:disabled) {
+ background-color: #45a049;
+}
+
+.call-btn:disabled {
+ background-color: #cccccc;
+ cursor: not-allowed;
+}
+
+.call-btn.calling {
+ background-color: #2196f3;
+}
+
+.end-call-btn {
+ padding: 10px;
+ background-color: #f44336;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.end-call-btn:hover {
+ background-color: #d32f2f;
+}
+
+.sip-status {
+ padding: 8px;
+ margin-bottom: 10px;
+ border-radius: 4px;
+ text-align: center;
+}
+
+.status-disconnected {
+ background-color: #ffebee;
+ color: #c62828;
+}
+
+.status-connecting {
+ background-color: #fff8e1;
+ color: #ff8f00;
+}
+
+.status-registered {
+ background-color: #e8f5e9;
+ color: #2e7d32;
+}
+
+.status-failed {
+ background-color: #ffebee;
+ color: #c62828;
+}
.call-btn:hover {
background-color: #45a049;
}
--
Gitblit v1.9.3