ylrz_his_scrm_companyUI/src/layout/index.vue

<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
    <sidebar class="sidebar-container"/>
    <div :class="{hasTagsView:needTagsView}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <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>

<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'

export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader,
      isCall:state => state.user.isCall,
      callTitle:state=>state.user.callTitle,
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      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>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$base-sidebar-width});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px)
  }

  .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>