mediate-manage-web/src/components/VoiceCallDialog.vue

<template>
  <div :class="zoomActive ? 'voiceCall-content-big' : 'voiceCall-content-small'">
    <!--  大  -->
    <div v-if="zoomActive" class="cover"></div>
    <div v-if="zoomActive" class="big-layout">
      <div class="big-header flex-row justify-content-end">
        <div class="big-header-btn bg-color-light flex-row align-items-center border-radius-4 cursor-pointer"
             @click="toggleZoom">
          <span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
          <svg-icon
              :icon-class="zoomActive ? `zoom-1` : 'zoom-2'"
              className="tabs-svg" />
        </div>
      </div>
      <div class="pb-32 big-middle">
        <div class="pb-32 f24 f-weight600 text-center">{{ incomingCallPhone }}</div>
        <div class="flex-row justify-content-center">
          <div class="big-middle-up mr-16 text-center cursor-pointer" v-if="!answerSts" @click="handleAccept">
            <svg-icon icon-class="up-telephone" className="tabs-svg" />
            <div class="f12">接听</div>
          </div>
          <div class="big-middle-hang ml-16 text-center cursor-pointer" @click="handleHungUp">
            <svg-icon icon-class="hang-telephone" className="tabs-svg" />
            <div class="f12">拒接</div>
          </div>
        </div>
      </div>
      <div class="pt-32 big-bottom">
        <el-form label-position="top">
          <el-row :gutter="10">
            <el-col :span="7">
              <el-form-item label="电话号码">
                <el-input
                    clearable
                    placeholder="请输入"
                    v-model="queryParam.phone">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-input
                    clearable
                    placeholder="请输入"
                    v-model="queryParam.name">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="身份证">
                <el-input
                    clearable
                    placeholder="请输入"
                    v-model="queryParam.idCard">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="操作">
                <el-button type="primary" @click="getCaseList">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-if="tableData.length">
          <el-scrollbar style="height: 224px;">
            <div class="p-8 mt-8 bottom-case-list border-radius-8" v-for="(item, index) in tableData" :key="index">
              <div class="flex-row justify-content-between align-items-center bor-bottom-E5E6EB pr-16">
                <div v-for="(itemS,indexS) in item.debtorEntityList.filter(itemX => itemX.role == 'DEBTOR' && itemX.type == '本人')" :key="indexS">
                  {{indexS === 0 ?'':','}}{{itemS.name}}
                </div>
                <el-button type="text" @click="handleRelevance(item)">关联并进入案件</el-button>
              </div>
              <div class="flex-row p-8">
                <div class="width-50 f12">
                  <div class="color-86909C">案件号</div>
                  <div>{{item.caseNo}} </div>
                </div>
                <div class="width-25 f12">
                  <div class="color-86909C">调解员</div>
                  <div>{{item.mediatorName}}</div>
                </div>
                <div class="width-25 f12">
                  <div class="color-86909C">逾期金额：</div>
                  <div>{{item.moneyAmount}}</div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div v-else class="flex-row justify-content-between align-items-center p-16 big-bottom-empty">
          <div class="color-FF7D00"><i class="el-icon-warning f16 color-FF7D00"></i>未找到相关案件</div>
          <div class="color-4E5969 flex-row align-items-center cursor-pointer" @click="handleMarkers">
            <svg-icon icon-class="bmld" className="tabs-svg-bmld" />
            <span>标记为不明来电</span>
          </div>
        </div>
      </div>
    </div>
    <!--  小  -->
    <div v-else class="small-layout flex-row justify-content-between align-items-center pl-32 pr-32">
      <div class="f24 f-weight600 mr-16">{{ incomingCallPhone }}</div>
      <div class="mr-16 cursor-pointer" v-if="!answerSts" @click="handleAccept"><svg-icon icon-class="up-telephone" className="tabs-svg-phone" /></div>
      <div class="mr-16 cursor-pointer" @click="handleHungUp"><svg-icon icon-class="hang-telephone" className="tabs-svg-phone" /></div>
      <div class="big-header-btn bg-color-light flex-row align-items-center border-radius-4 cursor-pointer"
           @click="toggleZoom">
        <span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
        <svg-icon :icon-class="zoomActive ? `zoom-1` : 'zoom-2'" className="tabs-svg-zoom" />
      </div>
    </div>
  </div>
</template>

<script>
import voiceCall from "@/services/voiceCall";
export default {
  name: "VoiceCallDialog",
  props: {
    acceptDialog: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      zoomActive: true,// 布局状态

      incomingCallPhone: '',
      answerSts: false,// 接听状态
      queryParam: {
        phone: '',
        name: '',
        idCard: ''
      },
      tableData: [],
      total:0,
    }
  },
  mounted() {
    this.initLoad()
  },
  methods: {
    initLoad() {
      let phoneNumber = this.acceptDialog.phone;
      phoneNumber = phoneNumber.slice(4);
      this.incomingCallPhone = phoneNumber;
      this.queryParam.phone = phoneNumber;
      this.getCaseList();
    },
    toggleZoom() {
      this.zoomActive = !this.zoomActive;
    },

    getCaseList() {
      voiceCall.caseMatchList(this.queryParam).then(res => {
        if (!res.code) {
          this.tableData = res;
        }
      })
    },
    // 呼入接听
    async handleAccept() {
      try {
        // console.log({ sessionId: this.acceptDialog.sessionId }, '---主动接听')
        await window.tccc.Call.accept({ sessionId: this.acceptDialog.sessionId })
        this.answerSts = true;
      } catch (error) {
        console.error(`呼入接听：${error.message}`)
      }
    },
    // 挂断
    async handleHungUp() {
      try {
        // console.log({ sessionId: this.acceptDialog.sessionId }, '---主动挂断')
        await window.tccc.Call.hungUp({ sessionId: this.acceptDialog.sessionId })
        this.$emit('update:acceptDialog', null)
      } catch (error) {
        console.error(`挂断：${error.message}`)
      }
    },
    // 标记来电
    async handleMarkers() {
      try {
        let jsonData = {
          callingSessionId: this.acceptDialog.sessionId,
          phone: this.incomingCallPhone,
        }
        voiceCall.markUnknow(jsonData).then(res => {
          this.$message.success('标记成功!')
        })
      } catch (error) {
        console.error(`${error}`)
      }
    },
    // 关联案件-详情
    async handleRelevance(item) {
      try {
        voiceCall.caseMatch({caseId: item.id, callingSessionId: this.acceptDialog.sessionId}).then(res => {
          // console.log(res,'---关联案件')
          this.$router.push(`/mediation-page?sourcePage=sourcePage&caseId=${item.id}`);
        })
      } catch (error) {
        console.error(`${error}`)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.bor-bottom-E5E6EB{
  border-bottom: solid 1px #E5E6EB;
}

.voiceCall-content-big{
  z-index: 8000;
  margin: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  .cover {
    z-index: 8001;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .big-layout{
    z-index: 8002;
    position: relative;
    width: 560px;
    //height: 390px;
    padding: 24px;
    margin: 15vh auto 50px;
    background-color: #fff;
    border-radius: 16px;

    .big-header{
      .big-header-btn{
        background-color: #e4e7ed;
        padding: 6px 10px;
        .tabs-svg{
          width: 16px;
          height: 16px;
        }
      }
    }
    .big-middle{
      border-bottom: 1px solid #E5E6EB;
      .tabs-svg{
        width: 40px;
        height: 40px;
      }
    }
    .big-bottom{
      .bottom-case-list{
        background-color: #F2F3F5;
        .width-50{
          width: 50%;
        }
        .width-25{
          width: 25%;
        }
      }
      .big-bottom-empty{
        background: #FFF7E8;
        border: 1px solid #FF7D0080;
        .tabs-svg-bmld{
          width: 16px;
          height: 16px;
        }
      }

    }
  }
}

.voiceCall-content-small{
  position: absolute;
  top: 0;
  left: 50%;
  height: 56px;
  width: 460px;
  margin-left: -230px;
  .small-layout{
    height: 56px;
    border-radius: 16px;
    background-color: #dcdfe6;
    .tabs-svg-phone{
      width: 40px;
      height: 40px;
    }
    .big-header-btn{
      background-color: #ffffff;
      padding: 6px 10px;
      .tabs-svg{
        width: 16px;
        height: 16px;
      }
    }
  }
}

</style>