332 lines
9.8 KiB
Vue
332 lines
9.8 KiB
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 flex-row align-items-center 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-24 pr-24">
|
||
<div class="f24 f-weight600 pr-16 mr-16 small-layout-phone">{{ 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 flex-row align-items-center 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() {
|
||
if(this.queryParam.name == ''&&this.queryParam.phone == ''&&this.queryParam.idCard == '')
|
||
{
|
||
this.tableData = []
|
||
}
|
||
else
|
||
{
|
||
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 {
|
||
let mainCaseId = null
|
||
if(item.jointDebt == 1){
|
||
mainCaseId = item.mainCaseId
|
||
}
|
||
else{
|
||
mainCaseId = item.id
|
||
}
|
||
voiceCall.caseMatch({caseId: mainCaseId, callingSessionId: this.acceptDialog.sessionId, phone: this.incomingCallPhone}).then(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: rgba(242, 243, 245, 1);
|
||
padding: 9px 14px;
|
||
border-radius: 16px;
|
||
.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: 72px;
|
||
width: 460px;
|
||
margin-left: -230px;
|
||
.small-layout{
|
||
height: 72px;
|
||
border-radius: 16px;
|
||
background-color: #ffffff;
|
||
border: 1px solid #E5E6EB;
|
||
box-shadow: 0 8px 16px 0 rgba(0,0,0,.1);
|
||
.small-layout-phone{
|
||
line-height: 34px;
|
||
border-right: 1px solid rgba(229, 230, 235, 1);
|
||
}
|
||
.tabs-svg-phone{
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
.big-header-btn{
|
||
background-color: rgba(242, 243, 245, 1);
|
||
padding: 9px 14px;
|
||
border-radius: 16px;
|
||
.tabs-svg{
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style> |