tanghuan/mediate-manage-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

部分UI

Browse Source
This commit is contained in:
tdg930622 2025-01-10 17:31:30 +08:00
parent be178b1cb4
commit bf387de9fa
2 changed files with 206 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/svg/dxjl-yx.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.35312 3.19922L7.37916 8.82318C7.72743 9.14798 8.27256 9.14798 8.62083 8.82318L14.6469 3.19922H1.35312ZM0.533325 3.89297V12.7992H15.4667V3.89297L9.34895 9.60338C8.97082 9.95645 8.48533 10.1326 7.99999 10.1326C7.51466 10.1326 7.02917 9.95645 6.65103 9.60338L0.533325 3.89297Z" fill="#F0B76E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B

225
src/pages/mediation-page/components/SidebarTool.vue
View File

@ -23,8 +23,8 @@
<div v-if="rightActive === 2">
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
<div class="timeline-layout pt-16">
<div class="timeline-layout-100">
<div class="timeline-layout pt-8">
<div class="timeline-layout-100 mb-16">
<div class="flex-row justify-content-between">
<div class="flex-row">
<div>17:15:00</div>
@ -102,41 +102,195 @@
<div class="mr-8 ai-logo-img"></div>
<div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
</div>
<div class="pt-8">
<div class="pt-8 f12">
由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
</div>
</div>
</div>
</el-scrollbar>
</div>
<div v-if="rightActive === 3">
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
<div class="tab-content-title f16 f-weight600 pb-8">短信记录</div>
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
<el-card shadow="never" class="mt-8">
<div class="flex-row align-items-center pb-6">
<div class="mr-8"><svg-icon icon-class="dxjl-yx" className="dxjl-svg" /></div>
<div class="f-weight600">向被申请人发送通知短信</div>
</div>
<div class="flex-row align-items-center pb-6 f-weight600">
李四 134****9447
<el-tag class="ml-8" size="small" effect="danger">失败</el-tag>
</div>
<div class="pb-6 color-4E5969 f12">原因：描述描述描述描述描述描述描述描述描述描述描述</div>
<div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
<div class="flex-row justify-content-between border-radius-2 f12 color-000 short-message-btn">
<span class="cursor-pointer">修改手机号</span>
<span class="cursor-pointer">重发</span>
<span class="cursor-pointer">忽略</span>
</div>
</el-card>
<el-card shadow="never" class="mt-8">
<div class="flex-row align-items-center pb-6">
<div class="mr-8"><svg-icon icon-class="dxjl-yx" className="dxjl-svg" /></div>
<div class="f-weight600">向被申请人发送通知短信</div>
</div>
<div class="flex-row align-items-center pb-6 f-weight600">
李四 134****9447
<el-tag class="ml-8" size="small" effect="success">成功</el-tag>
</div>
<div class="pb-6 color-4E5969 f12">原因：描述描述描述描述描述描述描述描述描述描述描述</div>
<div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
<div class="flex-row justify-content-between border-radius-2 f12 color-000 short-message-btn">
<span class="cursor-pointer">修改手机号</span>
<span class="cursor-pointer">重发</span>
<span class="cursor-pointer">忽略</span>
</div>
</el-card>
</el-scrollbar>
</div>
<div v-if="rightActive === 4">
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
<div class="tab-content-title f16 f-weight600 pb-8">视频记录</div>
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
<div class="timeline-layout pt-8">
<div class="timeline-layout-100 mb-16">
<div class="flex-row justify-content-between">
<div class="flex-row">
<div>17:15:00</div>
<div class="pl-8 pr-8">
陈陈陈
</div>
<!-- 视频 -->
<div class="text-center icon-bg icon-phone">
<i class="callvideo-icon"></i>
</div>
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">-->
<!-- <i v-if="itemrecord.callWay == 1" class="callphone-icon"></i>-->
<!-- <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation != 1" class="callbackphone-icon"></i>-->
<!-- <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation == 1" class="nocallphone-icon"></i>-->
<!-- </div>-->
<!-- 视频 -->
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 2">-->
<!-- <i class="callvideo-icon"></i>-->
<!-- </div>-->
<!-- 微信 -->
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 3">-->
<!-- <i class="callwechat-icon"></i>-->
<!-- </div>-->
</div>
<span class="cursor-pointer"><i class="ml-8 f14 el-icon-edit"></i></span>
</div>
<div class="timeline-layout-w-records mt-8 mb-8">
<div class="flex-row align-items-center">
<div>
<span>
陈继平 134****9447
<el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
</span>
</div>
<el-tag size="small" effect="plain">重点客户</el-tag>
<!-- <div>-->
<!-- <span class="pr-8" v-for="(itemperson,index) in itemrecord.linkedPersonInfo" :key="index">-->
<!-- {{ itemperson.name}}-->
<!-- {{ itemrecord.linkedWay == 1 ? itemperson.phone :''}}-->
<!-- <el-tag class="mr-8" size="small" effect="plain" style="height: 22px;">{{itemperson.labelName}}</el-tag>-->
<!-- </span>-->
<!-- </div>-->
<!-- <el-tag size="small" effect="plain" style="height: 22px;" v-if="itemrecord.mediateStatus != null">{{ materialTypeOptions.find(item => item.value == itemrecord.mediateStatus).label }}</el-tag>-->
</div>
<!-- 电话 -->
<div class="flex-row align-items-center pt-6">
<div >视频1秒</div>
<el-divider direction="vertical"></el-divider>
<div class="text-el-icon-video-play"><i class="f14 el-icon-video-play"></i> 播放视频</div>
</div>
<!-- <div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">-->
<!-- <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>-->
<!-- <el-divider direction="vertical"></el-divider>-->
<!-- <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>-->
<!-- </div>-->
<!-- 视频 -->
<!-- <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">-->
<!-- <div>视频{{itemrecord.linkedDuration}}秒</div>-->
<!-- <el-divider direction="vertical"></el-divider>-->
<!-- <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div>-->
<!-- </div>-->
<!-- 微信 -->
<!-- <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">-->
<!-- &lt;!&ndash; <div>通话44秒</div> &ndash;&gt;-->
<!-- <el-divider direction="vertical"></el-divider>-->
<!-- <div class="text-center cursor-pointer">查看文件</div>-->
<!-- </div>-->
</div>
<div>沟通备注：<span class="color-FF7D00">111</span></div>
</div>
<div class="timeline-layout-100 timeline-layout-ai">
<div class="flex-row align-items-center">
<div class="mr-8 ai-logo-img"></div>
<div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
</div>
<div class="pt-8 f12">
由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
</div>
</div>
</div>
</el-scrollbar>
</div>
<div v-if="rightActive === 5">
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
<div class="tab-content-title f16 f-weight600 pb-8">签字记录</div>
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
<el-card shadow="never" class="mt-8">
<div class="f-weight600 pb-6">(2022)川092701民诉02号</div>
<div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
<div class="mb-8 flex-row align-items-center border-radius-4 agreement-pdf">
<a class="case-img"><img :src="imgPdf"/></a>
<div class="ml-8">调解协议.PDF</div>
</div>
<div class="flex-row align-items-center">
<div class="flex-row align-items-center mr-16">张三<el-tag class="ml-8" size="small" effect="danger">未签</el-tag></div>
<div class="flex-row align-items-center">李四<el-tag class="ml-8" size="small" effect="success">已签</el-tag></div>
</div>
</el-card>
<el-card shadow="never" class="mt-8">
<div class="f-weight600 pb-6">(2022)川092701民诉02号</div>
<div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
<div class="mb-8 flex-row align-items-center border-radius-4 agreement-pdf">
<a class="case-img"><img :src="imgPdf"/></a>
<div class="ml-8">调解协议.PDF</div>
</div>
<div class="flex-row align-items-center">
<div class="flex-row align-items-center mr-16">张三<el-tag class="ml-8" size="small" effect="danger">未签</el-tag></div>
<div class="flex-row align-items-center">李四<el-tag class="ml-8" size="small" effect="success">已签</el-tag></div>
</div>
</el-card>
</el-scrollbar>
</div>
<div v-if="rightActive === 6">
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
<div class="tab-content-title f16 f-weight600 pb-8">调解日志</div>
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
<el-timeline class="padding-2">
<el-timeline-item timestamp="2024-12-09" placement="top" type="primary">
<el-card shadow="never">
<div class="mb-8">09:36 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:还款计划通知</div>
<div class="mb-8">09:33 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:调解通知</div>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2024-12-08" placement="top" type="primary">
<el-card shadow="never">
<div>09:27 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:还款计划通知</div>
</el-card>
</el-timeline-item>
</el-timeline>
</el-scrollbar>
</div>
<div v-if="rightActive === 7">
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
<div class="tab-content-title f16 f-weight600 pb-8">质检评价</div>
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
</el-scrollbar>
@ -145,7 +299,7 @@
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
content="触达记录"
placement="left">
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
@click="handleToggle(1)"
@ -156,7 +310,7 @@
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
content="沟通记录"
placement="left">
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
@click="handleToggle(2)"
@ -167,7 +321,7 @@
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
content="短信记录"
placement="left">
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
@click="handleToggle(3)"
@ -178,7 +332,7 @@
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
content="视频记录"
placement="left">
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
@click="handleToggle(4)"
@ -189,7 +343,7 @@
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
content="签字记录"
placement="left">
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
@click="handleToggle(5)"
@ -200,7 +354,7 @@
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
content="调解日志"
placement="left">
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
@click="handleToggle(6)"
@ -211,7 +365,7 @@
<el-tooltip
popper-class="custom-tooltip"
effect="dark"
content="XXX"
content="质检评价"
placement="left">
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
@click="handleToggle(7)"
@ -241,7 +395,7 @@ export default {
data(){
return{
rightActive: 0,
imgPdf: require('@/assets/image/util/pdf_img.jpg')
}
},
computed: {
@ -257,7 +411,8 @@ export default {
}else {
this.rightActive = val;
}
}
},
}
}
</script>
@ -290,7 +445,7 @@ export default {
background-color: #ffffff;
}
}
//
.timeline-layout{
border-top: 1px solid #F2F3F5;
.timeline-layout-100{
@ -352,4 +507,30 @@ export default {
}
}
// 短信记录
.dxjl-svg{
width: 18px;
height: 18px;
}
.short-message-btn{
padding: 8px 16px;
background-color: #F2F3F5;
}
// 签字记录
.agreement-pdf{
background-color: #F2F3F5;
padding: 6px 12px;
.case-img {
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
img {
width: 24px;
height: 24px;
}
}
}
</style>