390 lines
9.6 KiB
Vue
390 lines
9.6 KiB
Vue
<template>
|
||
<div id="app">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
|
||
<router-view/>
|
||
<FloatingBox
|
||
v-if="!$route.path.includes('kyyForm')&&!$route.path.includes('floatingBox')&&!$route.path.includes('screen')&&!$route.path.includes('wxPage')&&!$route.path.includes('wxDetailPage')"/>
|
||
<div>
|
||
<!-- 弹出通话提示-->
|
||
<div v-if="isShowVideo" class="is-accepted" style="padding: 5px;border-radius: 6px">
|
||
<div style="display: flex;justify-content: flex-start;align-items: center">
|
||
<div
|
||
style="display: flex;justify-content: center;align-items: center;margin: 0 5px">
|
||
<img src="@/components/FloatingBox/img/用户(1).svg" alt=""></div>
|
||
<div style="display: flex;flex-direction: column">
|
||
<span>{{ customerName }}</span>
|
||
<span>邀请你语音通话</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;position: absolute;bottom: 5px;right: 20px">
|
||
<div @click="callOff"
|
||
style="cursor:pointer;margin-right: 135px;display:flex;justify-content:center;align-items:center;width: 40px;height: 40px;font-size: 12px;background-color: red;border-radius: 50%;">
|
||
<img
|
||
style="font-weight: 550;"
|
||
src="@/components/FloatingBox/img/phone-off(1).svg" alt="">
|
||
</div>
|
||
<div @click="callIn"
|
||
style="cursor:pointer;display:flex;justify-content:center;align-items:center;width: 40px;height: 40px;font-size: 12px;background-color: #07c160;border-radius: 50%;">
|
||
<img
|
||
style="font-weight: 550;"
|
||
src="@/components/FloatingBox/img/phone-call.svg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import FloatingBox from './components/FloatingBox/FloatingBox.vue'; // 导入悬浮框组件
|
||
import '@/assets/elementStyle.css'
|
||
import Hammer from 'hammerjs';
|
||
import {mapState} from "vuex";
|
||
import {white} from "mockjs/src/mock/random/color_dict";
|
||
// 禁止通过 ctrl + +/- 和 ctrl + 滚轮 对页面进行缩放
|
||
// document.addEventListener(
|
||
// "keydown",
|
||
// function (event) {
|
||
// if (
|
||
// (event.ctrlKey === true || event.metaKey === true) &&
|
||
// (event.which === 61 ||
|
||
// event.which === 107 ||
|
||
// event.which === 173 ||
|
||
// event.which === 109 ||
|
||
// event.which === 187 ||
|
||
// event.which === 189)
|
||
// ) {
|
||
// event.preventDefault();
|
||
// }
|
||
// },
|
||
// false
|
||
// );
|
||
// Chrome IE 360
|
||
// window.addEventListener(
|
||
// "mousewheel",
|
||
// function (event) {
|
||
// if (event.ctrlKey === true || event.metaKey) {
|
||
// event.preventDefault();
|
||
//
|
||
// },
|
||
// {
|
||
// passive: false,
|
||
// }
|
||
// );
|
||
//
|
||
// // firefox
|
||
// window.addEventListener(
|
||
// "DOMMouseScroll",
|
||
// function (event) {
|
||
// if (event.ctrlKey === true || event.metaKey) {
|
||
// event.preventDefault();
|
||
// }
|
||
// },
|
||
// {
|
||
// passive: false,
|
||
// }
|
||
// );
|
||
|
||
export default {
|
||
name: "App",
|
||
components: {
|
||
FloatingBox, // 注册悬浮框组件
|
||
},
|
||
data() {
|
||
return {
|
||
isshow: true,
|
||
socket: null,
|
||
userId: sessionStorage.getItem('userId'),
|
||
vedioObj: {},
|
||
customerName: ''
|
||
}
|
||
},
|
||
created() {
|
||
// if (sessionStorage.getItem('userId')) {
|
||
// if (sessionStorage.getItem('org_type')=='2'||sessionStorage.getItem('org_type')=='3') {
|
||
// this.isshow=true
|
||
// }else{
|
||
// this.isshow=false
|
||
// }
|
||
// }
|
||
|
||
},
|
||
mounted() {
|
||
this.audioElement = new Audio('https://www.kaiyuancloud.cn/dev/idfile?path=/batch_upload/phone-ring.mp3');
|
||
|
||
// 设置音频循环播放
|
||
this.audioElement.loop = true;
|
||
if (sessionStorage.getItem('juese') === '销售' && !window.location.href.includes('login')) {
|
||
|
||
this.initWebSocket()
|
||
}
|
||
this.setRemUnit()
|
||
this.initHammer();
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
// socket: state => state.common.socket
|
||
isShowVideo: state => state.common.isShowVideo
|
||
|
||
})
|
||
},
|
||
methods: {
|
||
playAudio() {
|
||
console.log("开始按钮点击了")
|
||
this.audioElement.play();
|
||
},
|
||
pauseAudio() {
|
||
this.audioElement.pause();
|
||
this.audioElement.currentTime = 0; // 将音频的播放位置设置为0，以便下次播放从头开始
|
||
},
|
||
callIn() {
|
||
this.pauseAudio()
|
||
|
||
console.log("接通电话被点击了")
|
||
this.$store.commit('setShowVideo', false)
|
||
this.$router.push({
|
||
path: '/sales/chat',
|
||
query: {
|
||
chatIsOn: this.vedioObj.chatIsOn,
|
||
vedioIsOn: this.vedioObj.vedioIsOn,
|
||
audioIsOn: this.vedioObj.audioIsOn,
|
||
room: sessionStorage.getItem('userId'),
|
||
name: sessionStorage.getItem('username')
|
||
}
|
||
})
|
||
},
|
||
callOff() {
|
||
this.pauseAudio()
|
||
console.log("挂断电话被点击了")
|
||
this.$store.commit('setShowVideo', false)
|
||
},
|
||
initWebSocket(userId) {
|
||
// let webSocketUrl = 'wss://www.kaiyuancloud.cn/dev/wss/pub/rtcc.ws'
|
||
let webSocketUrl = 'wss://www.kaiyuancloud.cn/pub/rtcc.ws'
|
||
this.socket = new WebSocket(webSocketUrl)
|
||
// this.$store.commit('setSocket', new WebSocket('wss://120.92.102.27:27017/wss'))
|
||
this.socket.onopen = (event) => {
|
||
console.log('WebSocket连接已打开');
|
||
this.socket.send(JSON.stringify({
|
||
'type': 'send',
|
||
'from': this.userId,
|
||
'uuid': '',
|
||
'content': ''
|
||
}));
|
||
};
|
||
|
||
this.socket.onmessage = (event) => {
|
||
console.log("event", event)
|
||
this.userId = sessionStorage.getItem('userId')
|
||
//先判断当前是不是销售角色
|
||
if (sessionStorage.getItem('juese') === '销售') {
|
||
console.log("websocket的信息", event.data)
|
||
let data = JSON.parse(JSON.parse(event.data).data)
|
||
let content = JSON.parse(data.content)
|
||
console.log("@@@@@@", content)
|
||
if (event.data !== undefined && content.value === 'customer') {
|
||
// console.log("传来的uuid是", JSON.parse(JSON.parse(event.data).content).uuid)
|
||
if (data.uuid === this.userId) {
|
||
console.log("@@@@@@", content)
|
||
// Object.assign(this.vedioObj, JSON.parse(event.data))
|
||
this.$store.commit('setShowVideo', true)
|
||
// this.$store.commit('setCustomerName', content)
|
||
this.playAudio()
|
||
}
|
||
} else {
|
||
}
|
||
} else {
|
||
}
|
||
};
|
||
|
||
this.socket.onclose = (event) => {
|
||
console.log('WebSocket连接已关闭');
|
||
};
|
||
// this.$store.commit('setSocket')
|
||
},
|
||
|
||
setRemUnit() {
|
||
const rem = 75; // 设置基准字体大小（默认为16px）
|
||
const screenWidth = window.innerWidth;
|
||
const designWidth = 1920; // 设置设计稿的宽度，假设为PC端设计稿的宽度
|
||
|
||
// 计算当前屏幕相对于设计稿的缩放比例
|
||
const scale = screenWidth / designWidth;
|
||
|
||
// 计算并设置根元素的字体大小（rem单位）
|
||
document.documentElement.style.fontSize = rem * Math.min(scale, 2) + 'px';
|
||
|
||
},
|
||
// const key = computed(() => {
|
||
// return route.path + Math.random();
|
||
// });
|
||
initHammer() {
|
||
const el = document.getElementById('app');
|
||
const mc = new Hammer.Manager(el);
|
||
|
||
// 添加缩放手势
|
||
mc.add(new Hammer.Pinch());
|
||
|
||
// 监听缩放手势的事件
|
||
mc.on("pinch", (event) => {
|
||
this.handlePinch(event.scale);
|
||
});
|
||
},
|
||
handlePinch(scale) {
|
||
// 在这里处理缩放逻辑
|
||
// 可以根据scale的值来调整页面的缩放比例或者其他样式
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.is-accepted {
|
||
position: fixed;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 250px;
|
||
height: 100px;
|
||
background-color: #292929;
|
||
color: white;
|
||
}
|
||
|
||
#app {
|
||
// overflow: scroll;
|
||
-webkit-overflow-scrolling: touch;
|
||
height: 100%;
|
||
//min-width: 1300px;
|
||
|
||
}
|
||
</style>
|
||
<style>
|
||
#app {
|
||
font-size: 16px;
|
||
user-select: text !important;
|
||
}
|
||
|
||
.el-scrollbar__wrap {
|
||
height: auto;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 5px 20px;
|
||
}
|
||
|
||
.el-message--success {
|
||
/* border:1px dashed blue;
|
||
height: 45px; */
|
||
}
|
||
|
||
.el-table {
|
||
z-index: 0 !important;
|
||
}
|
||
|
||
.el-message {
|
||
height: 45px;
|
||
z-index: 9999 !important;
|
||
}
|
||
|
||
.el-message__icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
height: 100% !important;
|
||
}
|
||
|
||
/*滚动条宽度和颜色设置*/
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background-color: #9a0606;
|
||
}
|
||
|
||
/*滚动条轨道的颜色*/
|
||
::-webkit-scrollbar-track {
|
||
background-color: #efefef;
|
||
}
|
||
|
||
/*滚动条的小圆球颜色*/
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #a5a2f6;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
|
||
.el-radio-button--mini .el-radio-button__inner {
|
||
font-size: 0.187rem;
|
||
}
|
||
|
||
::v-deep .cell {
|
||
font-size: 0.213rem;
|
||
}
|
||
|
||
::v-deep .el-dialog {
|
||
z-index: 999999;
|
||
border: 1px solid red;
|
||
}
|
||
|
||
::v-deep .el-dialog {
|
||
z-index: 1000; /* 设置合适的z-index值 */
|
||
}
|
||
|
||
::v-deep .el-dialog__wrapper .is-fullscreen {
|
||
z-index: 2000; /* 设置合适的z-index值 */
|
||
}
|
||
|
||
::v-deep .el-dialog__mask {
|
||
z-index: 900; /* 设置合适的z-index值 */
|
||
}
|
||
|
||
::v-deep .v-modal {
|
||
z-index: 100;
|
||
}
|
||
|
||
::v-deep .el-dialog__wrapper {
|
||
z-index: 99999999999999999;
|
||
}
|
||
|
||
.el-dialog__header {
|
||
|
||
.el-dialog__close {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
font-weight: 550;
|
||
color: #6b6868;
|
||
}
|
||
|
||
.el-dialog__headerbtn {
|
||
top: 13px;
|
||
}
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
border-bottom: 3px solid #a3adb4;
|
||
}
|
||
|
||
body {
|
||
width: 100% !important;
|
||
}
|
||
|
||
@media screen and (max-width: 760px) {
|
||
.el-message-box {
|
||
width: 320px !important;
|
||
}
|
||
}
|
||
|
||
* {
|
||
ul, li {
|
||
list-style: none !important;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
}
|
||
</style>
|