移动端任务窗口聊天loading优化

This commit is contained in:
kuaifan 2022-06-05 20:13:15 +08:00
parent dace5b92c7
commit 7fa2c0d6e7
4 changed files with 32 additions and 24 deletions

View File

@ -69,7 +69,12 @@
<!-- 发送按钮 -->
<li class="chat-send" :class="sendClass" v-touchmouse="clickSend">
<ETooltip placement="top" :disabled="!$isDesktop" :content="$L('发送')">
<div>
<div v-if="loading">
<div class="chat-load">
<Loading/>
</div>
</div>
<div v-else>
<transition name="mobile-send">
<i v-if="sendClass === 'recorder'" class="taskfont">&#xe609;</i>
</transition>

View File

@ -403,16 +403,14 @@
ref="chatInput"
:task-id="taskId"
v-model="msgText"
:loading="sendLoad > 0"
:maxlength="20000"
:placeholder="$L('输入消息...')"
@on-more="onEventMore"
@on-file="onSelectFile"
@on-record="onRecord"
@on-send="onSend"/>
<div v-if="sendLoad > 0 || taskDetail.msg_num" class="input-badge" @click.stop="onSend">
<Loading v-if="sendLoad > 0"/>
<em v-else>{{taskDetail.msg_num > 99 ? '99+' : taskDetail.msg_num}}</em>
</div>
<div v-if="sendLoad === 0 && taskDetail.msg_num" class="input-badge" @click.stop="onSend">{{taskDetail.msg_num > 99 ? '99+' : taskDetail.msg_num}}</div>
</div>
<div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
<div class="drag-text">{{$L('拖动到这里发送')}}</div>

View File

@ -165,6 +165,20 @@
transition: all 0.3s ease;
color: #ffffff;
}
.chat-load {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%) scale(1);
display: flex;
align-items: center;
justify-content: center;
.common-loading {
width: 20px;
height: 20px;
}
}
}
&.chat-record-recwave {
position: absolute;

View File

@ -592,25 +592,16 @@
top: 2px;
right: 22px;
z-index: 2;
.common-loading {
width: 20px;
height: 20px;
margin: 0;
}
> em {
display: inline-block;
height: 20px;
border-radius: 10px;
min-width: 20px;
background: #ed4014;
color: #fff;
line-height: 20px;
text-align: center;
padding: 0 6px;
font-size: 12px;
font-style: normal;
white-space: nowrap;
}
height: 20px;
border-radius: 10px;
min-width: 20px;
background: #ed4014;
color: #fff;
line-height: 20px;
text-align: center;
padding: 0 6px;
font-size: 12px;
white-space: nowrap;
}
}
.drag-over {