<template>
|
<div>
|
<transition-group tag="ul" name="list" class="calling-list" v-if="showRecords.length > 0">
|
<li v-for="item in showRecords" :key="item.callSeq">
|
<div class="title">
|
<p>{{item.seconds || popStayTime}}s</p>
|
<p @click="close(item)">
|
<i class="el-icon-close"></i>
|
</p>
|
</div>
|
<div class="content">
|
<p>客服座机：{{item.csLandline}}</p>
|
<p>呼入电话：{{item.caller}}</p>
|
</div>
|
<div class="buttons">
|
<p>
|
<el-button size="small" @click="close(item)">忽略</el-button>
|
</p>
|
<p>
|
<el-button size="small" type="primary" @click="answer(item)">接受</el-button>
|
</p>
|
</div>
|
</li>
|
</transition-group>
|
</div>
|
</template>
|
<script>
|
import {
|
pollingOrNot,
|
getCallRecords,
|
answerOrIgnore
|
} from '@comprehensive/serve/public'
|
import { setInterval, clearInterval } from 'timers'
|
|
export default {
|
data() {
|
return {
|
landLine: '',
|
showMax: 4,
|
time: 5000,
|
popStayTime: 0,
|
callList: [],
|
records: [],
|
defaultUrl: `${location.origin}/cts-web/#/comprehensiveTransaction/loanApply`,
|
timmer: null
|
}
|
},
|
created() {
|
this.pollingOrNot()
|
},
|
methods: {
|
async pollingOrNot() {
|
const res = await pollingOrNot({
|
isShowError: false
|
})
|
const { pollingOrNot: flg, landLine, popStayTime } = res.result
|
this.popStayTime = popStayTime
|
if (flg) {
|
this.landLine = landLine
|
this.getCallRecords()
|
this.setSeconds()
|
}
|
},
|
async getCallRecords() {
|
const { landLine, time } = this
|
const res = await getCallRecords({
|
landLine
|
})
|
|
this.addRecords(res.result)
|
setTimeout(() => {
|
this.getCallRecords()
|
}, time)
|
},
|
addRecords(records) {
|
const { records: currRecords } = this
|
if (records.length > 0) {
|
this.records = [...currRecords, ...records]
|
}
|
},
|
close(item) {
|
this.answerOrIgnore(item, false)
|
},
|
setSeconds() {
|
this.timmer = setInterval(() => {
|
const { records, showMax, popStayTime } = this
|
records.forEach((item, i) => {
|
if (i < showMax) {
|
let { seconds = popStayTime } = item
|
seconds = seconds - 1
|
if (seconds <= 0) {
|
this.close(item)
|
} else {
|
this.$set(records, i, {
|
...item,
|
seconds
|
})
|
}
|
}
|
})
|
}, 1000)
|
},
|
async answerOrIgnore(item, answerFlag) {
|
const { records } = this
|
const res = await answerOrIgnore({
|
answerFlag,
|
callSeq: item.callSeq
|
})
|
this.records = records.filter(({ callSeq }) => callSeq !== item.callSeq)
|
if (answerFlag) {
|
this.toDetail(item)
|
}
|
},
|
// 详情页
|
toDetail(item = {}) {
|
const { defaultUrl } = this
|
const { caller = '', screenUrl = '' } = item
|
const url = screenUrl || defaultUrl
|
location.href = `${url}${
|
url.includes('?') ? '&' : '?'
|
}customerPhone=${caller}&from=customer`
|
},
|
answer(item) {
|
this.answerOrIgnore(item, true)
|
}
|
},
|
beforeDestroy() {
|
clearInterval(this.timmer)
|
},
|
computed: {
|
showRecords() {
|
const { records, showMax } = this
|
return records.filter((item, index) => index < showMax)
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.calling-list {
|
position: fixed;
|
z-index: 2000;
|
right: 20px;
|
top: 80px;
|
overflow: hidden;
|
width: 260px;
|
padding: 10px;
|
& li {
|
box-shadow: 0 0 10px #ccc;
|
margin-bottom: 14px;
|
background: #fff;
|
border-radius: 10px;
|
overflow: hidden;
|
& .title {
|
background: #409eff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 6px 20px;
|
& p {
|
background: #fff;
|
border-radius: 12px;
|
min-width: 24px;
|
height: 24px;
|
text-align: center;
|
line-height: 24px;
|
font-size: 14px;
|
color: #409eff;
|
&:first-child {
|
padding: 0 10px;
|
}
|
}
|
}
|
& .content {
|
padding: 16px 0 0 16px;
|
}
|
& .buttons {
|
display: flex;
|
justify-content: space-between;
|
padding: 16px 20px;
|
}
|
}
|
}
|
|
/** 插入过程 **/
|
.list-enter-active {
|
transition: all 1s;
|
}
|
/** 移除过程 **/
|
.list-leave-active {
|
transition: all 1s;
|
}
|
/*** 开始插入、移除结束的位置变化 ***/
|
.list-enter,
|
.list-leave-to {
|
opacity: 0;
|
transform: translateX(200px);
|
}
|
</style>
|
