红德堂-迁移天天外呼代码

src/layout/index.vue

@@ -11,6 +11,40 @@
       <right-panel>
         <settings />
       </right-panel>
+      <el-dialog :title="call.title" :visible.sync="call.open" width="300px" append-to-body @close="closeDialog" >
+        <div class="call_content">
+          <el-input  type="text" v-model="mobile" placeholder="请输入手机号" />
+          <div class="number_list">
+            <div class="number_item" @click="addNumber(1)"><p class="number">1</p></div>
+            <div class="number_item" @click="addNumber(2)"><p class="number">2</p></div>
+            <div class="number_item" @click="addNumber(3)"><p class="number">3</p></div>
+            <div class="number_item" @click="addNumber(4)"><p class="number">4</p></div>
+            <div class="number_item" @click="addNumber(5)"><p class="number">5</p></div>
+            <div class="number_item" @click="addNumber(6)"><p class="number">6</p></div>
+            <div class="number_item" @click="addNumber(7)"><p class="number">7</p></div>
+            <div class="number_item" @click="addNumber(8)"><p class="number">8</p></div>
+            <div class="number_item" @click="addNumber(9)"><p class="number">9</p></div>
+            <div class="number_item" @click="addNumber('*')"><p class="number">*</p></div>
+            <div class="number_item" @click="addNumber(0)"><p class="number">0</p></div>
+            <div class="number_item" @click="addNumber('#')"><p class="number">#</p></div>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button  @click="clearNumber()" >清空</el-button>
+            <el-button type="primary" @click="callPhone()">呼叫</el-button>
+            <el-button  @click="delNumber()" >删除</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!-- <div class="call" @click="openCall()">
+        <img src="../assets/image/call.png"/>
+      </div> -->
+      <div class="call-controll" v-if="isCall">
+        <div class="call-item">
+          <div class="call-title">{{$store.state.user.callTitle}}</div>
+          <img class="img" @click="callClose()" src="../assets/image/calloff.svg"/>
+        </div>
+      </div>
+      <audio ref="audio" loop controls hidden="true"  src="../assets/dudu.mp3"/>
     </div>
   </div>
 </template>
@@ -40,7 +74,9 @@ export default {
       sidebar: state => state.app.sidebar,
       device: state => state.app.device,
       needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
+      fixedHeader: state => state.settings.fixedHeader,
+      isCall:state => state.user.isCall,
+      callTitle:state=>state.user.callTitle,
     }),
     classObj() {
       return {
@@ -54,10 +90,56 @@ export default {
       return variables;
     }
   },
+  data() {
+    return {
+      mobile: "",
+      call: {
+        open: false,
+        title:'呼叫'
+      }
+    }
+  },
+  watch: {
+    callTitle(newValue, oldValue) {
+      if(newValue.indexOf("正在呼叫")!==-1){
+        this.playAudio();
+      }else{
+        this.pauseAudio();
+      }
+    }
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
-    }
+    },
+    callClose(){
+      this.callOff()
+      this.$store.dispatch('CallOff')
+    },
+    playAudio() {
+      let musicDu = new Audio();
+      musicDu = require("../assets/dudu.mp3");
+      this.$refs.audio.src = musicDu;
+      this.$refs.audio.play();
+    },
+    pauseAudio(){
+      this.$refs.audio.pause();
+    },
+    clearNumber(){
+      this.mobile="";
+    },
+    addNumber(number){
+      this.mobile=this.mobile+number
+    },
+    delNumber(){
+      this.mobile= this.mobile.substring(0,this.mobile.length-1);
+    },
+    callPhone(){
+      this.playAudio();
+    },
+    closeDialog(){
+      this.clearNumber();
+    },
   }
 }
 </script>
@@ -104,4 +186,88 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+
+  .call{
+    background-color: #fff;
+    z-index: 99;
+    position: fixed;
+    bottom: 50px;
+    width:50px;
+    height: 50px;
+    padding: 10px;
+    right:30px;
+    border-radius: 20px;
+    box-shadow:0px 0px 20px rgb(175, 175, 175);
+    img{
+      width:30px;
+      height:30px;
+    }
+  }
+  .call_content{
+    .call_number{
+      width: 100%;
+      margin: 10px 0px;
+      font-size: 28px;
+    }
+  }
+  .number_list{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    flex-direction: row;
+    .number_item{
+      width: 30%;
+      height: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .number{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        width: 50px;
+        height:50px;
+        border-radius: 50%;
+        background: #fff;
+        box-shadow:0px 0px 2px rgb(175, 175, 175);
+        font-size: 24px;
+      }
+    }
+  }
+  .dialog-footer{
+    margin: 10px 0px;
+    text-align: center;
+  }
+
+
+  .call-controll{
+    background-color: #fff;
+    z-index: 999999;
+    position: fixed;
+    top: 120px;
+    padding: 10px 15px;
+    right:50px;
+    border-radius: 20px;
+    box-shadow:0px 0px 10px rgb(175, 175, 175);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .call-item{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .call-title{
+        font-size: 16px;
+      }
+      .img{
+        margin-left: 10px;
+        width:30px;
+        height:30px;
+      }
+    }
+
+  }
 </style>

src/permission.js

@@ -32,6 +32,7 @@ router.beforeEach((to, from, next) => {
             next({ path: '/' })
           })
         })
+        store.dispatch('GetSipAccount').then(() => {}).catch(() => {})
       } else {
         next()
       }

src/store/getters.js

@@ -14,5 +14,10 @@ const getters = {
   topbarRouters:state => state.permission.topbarRouters,
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
+  callUser: state => state.user.callUser,
+  callRealm: state => state.user.callRealm,
+  callHa1: state => state.user.callHa1,
+  isCall: state => state.user.isCall,
+  callTitle: state => state.user.callTitle,
 }
 export default getters

src/store/modules/user.js

@@ -1,5 +1,6 @@
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getSipAccount } from '@/api/company/companyVoiceApi'
 
 const user = {
   state: {
@@ -8,7 +9,12 @@ const user = {
     user:undefined,
     avatar: '',
     roles: [],
-    permissions: []
+    permissions: [],
+    callUser:null,
+    callRealm:null,
+    callHa1:null,
+    isCall:false,
+    callTitle:null,
   },
 
   mutations: {
@@ -29,10 +35,36 @@ const user = {
     },
     SET_PERMISSIONS: (state, permissions) => {
       state.permissions = permissions
-    }
+    },
+    SET_CALL_USER: (state, callUser) => {
+      state.callUser = callUser
+    },
+    SET_CALL_REALM: (state, callRealm) => {
+      state.callRealm = callRealm
+    },
+    SET_CALL_HA1: (state, callHa1) => {
+      state.callHa1 = callHa1
+    },
+    SET_CALL: (state, call) => {
+      state.isCall = call
+    },
+    SET_CALL_STATUS: (state, title) => {
+      state.callTitle = title
+    },
   },
 
   actions: {
+    CallStatus({ commit }, data){
+      commit('SET_CALL_STATUS', data.title)
+    },
+    Call({ commit }, data){
+      commit('SET_CALL', true)
+      commit('SET_CALL_STATUS', "正在呼叫"+data.mobile+"...")
+    },
+    CallOff({ commit }){
+      commit('SET_CALL', false),
+        commit('SET_CALL_STATUS', "");
+    },
     // 登录
     Login({ commit }, userInfo) {
       const username = userInfo.username.trim()
@@ -94,6 +126,22 @@ const user = {
         removeToken()
         resolve()
       })
+    },
+    // 获取SIP账号
+    GetSipAccount({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        getSipAccount().then(res => {
+          console.log(res)
+          if(res.code==200){
+            commit('SET_CALL_USER', res.data.data.response.data.user)
+            commit('SET_CALL_REALM', res.data.data.response.data.realm)
+            commit('SET_CALL_HA1', res.data.data.response.data.ha1)
+          }
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      })
     }
   }
 }