修改客服记录

src/components/scCustomer/index.vue

@@ -21,7 +21,11 @@
 										</el-avatar>
 									</div>
 									<div class="msgText">
-										<div class="msgTitle">{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}</div>
+										<div class="msgTitle">
+											<span class="leftTime" v-if="user_id != item.to_user_id">{{item.created_at}}</span>
+											{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
+											<span class="time" v-if="user_id === item.to_user_id">{{item.created_at}}</span>
+										</div>
 										<div class="textCom">
 											<div v-html="item.to_message"></div>
 										</div>
@@ -37,7 +41,7 @@
 					</el-scrollbar>
 				</div>
 				<div class="footer">
-					<el-input class="customTextarea" v-model="params.to_message" resize="none" type="textarea" :row="2" placeholder="请简短描述您的问题"></el-input>
+					<el-input class="customTextarea" v-model="params.to_message" @keydown="handleKeydown" resize="none" type="textarea" :row="2" placeholder="Shift+Enter换行 请简短描述您的问题"></el-input>
 					<div class="saveBtn" :class="params.to_message!==''?'saveActive':''" @click="sendCustomer">发 送</div>
 				</div>
 			</div>
@@ -136,6 +140,15 @@ export default {
 		typeActive(item){
 			this.params.type = item.value;
 		},
+
+		handleKeydown(event){
+			if(event.key === 'Enter' && !event.shiftKey){
+				event.preventDefault(); // 阻止输入框的默认行为
+				this.sendCustomer();
+			}else if(event.key === 'Enter' && event.shiftKey){
+				this.params.to_message += '';
+			}
+		},
 		async sendCustomer() {
 			if(this.params.to_message =="") return
 			const res = await this.$API.customer.send.post(this.params);
@@ -180,7 +193,7 @@ export default {
 .customerBox{
 	position: absolute;
 	right: 40px;
-	bottom: 40px;
+	bottom: 80px;
 	z-index: 1000;
 	.img{
 		width: 56px;
@@ -240,7 +253,7 @@ export default {
 					padding: 10px;
 					.msgItem{
 						display: flex;
-						margin-bottom: 8px;
+						margin-bottom: 12px;
 						.avatar{
 							padding-right: 10px;
 						}
@@ -248,11 +261,23 @@ export default {
 							.msgTitle{
 								padding: 0 0 8px 0;
 								color: #555;
+								.time{
+									margin-left: 8px;
+									font-size: 12px;
+									color: #888;
+								}
+								.leftTime{
+									margin-right: 8px;
+									font-size: 12px;
+									color: #888;
+								}
 							}
 							.textCom{
 								background: #f5f5f5;
 								border-radius: 4px;
 								padding: 10px;
+								display: inline-block;
+								text-align: left;
 							}
 						}
 					}
@@ -263,12 +288,14 @@ export default {
 							padding-right: 0;
 						}
 						.msgText{
+							text-align: right;
 							.msgTitle{
 								text-align: right;
 							}
 							.textCom{
 								background: var(--el-color-primary);
 								color: var(--el-color-white);
+								text-align: left;
 							}
 						}
 					}