gdxz/miniprogram-doctor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化聊天界面

Browse Source
This commit is contained in:
haomingming
2023-03-30 08:49:38 +08:00
parent 5ba50e4e61
commit 9859b0cbea
28 changed files with 422 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TUIKit/components/TUIChat/components/MessageElements/CustomMessage/index.js
+31
View File
@@ -78,6 +78,7 @@ Component({
},
parseCustom(message) {
const { BUSINESS_ID_TEXT } = constant;
const { GDXZ_CUSTOM_MSEEAGE } = constant;
// 群消息解析
if (message.payload.data === BUSINESS_ID_TEXT.CREATE_GROUP) {
const renderDom = [{
@@ -118,6 +119,36 @@ Component({
}];
return renderDom;
}
// 1:消息内页横条
if (customMessage.message_type === GDXZ_CUSTOM_MSEEAGE.TRABECULA) {
const renderDom = [{
type: 'trabecula',
title: customMessage.title,
desc: customMessage.desc,
}];
return renderDom;
}
// 2:订单结束评价弹出
if (customMessage.message_type === GDXZ_CUSTOM_MSEEAGE.ORDER_EVALUATION) {
let data = customMessage.data;
const renderDom = [{
type: 'order_evaluation',
order_inquiry_id: data.order_inquiry_id
}];
return renderDom;
}
// 6:处方开具成功
if (customMessage.message_type === GDXZ_CUSTOM_MSEEAGE.PRESCRIBE) {
console.log("处方");
let data = customMessage.data;
const renderDom = [{
type: 'prescribe',
product_name: data.product_name,
order_prescription_id: data.order_prescription_id,
pharmacist_verify_time: data.pharmacist_verify_time.substring(0,10),
}];
return renderDom;
}
} catch (error) {
}
// 客服咨询
TUIKit/components/TUIChat/components/MessageElements/CustomMessage/index.json
+3 -1
View File
@@ -1,4 +1,6 @@
{
"component": true,
"usingComponents": {}
"usingComponents": {
"van-rate": "@vant/weapp/rate/index"
}
}
TUIKit/components/TUIChat/components/MessageElements/CustomMessage/index.wxml
+28
View File
@@ -40,5 +40,33 @@
<view wx:if="{{renderDom[0].type ==='notSupport'}}" class="message-body-span text-message" >
<view class="message-body-span-text">{{renderDom[0].text}}</view>
</view>
<!-- 自定义横条样式 -->
<view wx:if="{{renderDom[0].type==='trabecula'}}" class="gdxz_custom_trabecula_message">
<view class="gdxz_custom_message_title">{{renderDom[0].title}}</view>
<view class="gdxz_custom_message_desc">{{renderDom[0].desc}}</view>
</view>
<!-- 自定义评价样式 -->
<view wx:if="{{renderDom[0].type==='order_evaluation'}}" class="gdxz_custom_order_evaluation_message" bindtap="showPop">
<view class="evaluation_title">请您对本次问诊服务进行评价</view>
<view class="evaluation_ratebox">
<van-rate disabled value="{{0}}" size="40rpx" gutter="46rpx" color="#ffd21e" void-icon="star" void-color="#e7e7e7" readonlygutter="20"/>
</view>
<view class="evaluation_button">点击评价</view>
</view>
<!-- 自定义开处方样式 -->
<view wx:if="{{renderDom[0].type==='prescribe'}}" class="gdxz_custom_order_prescribe_message" bindtap="toBuy">
<view class="prescribe_title">
处方已开具
</view>
<view class="prescribe_box">
<view class="prescribe_box_top">
<view class="prescribe_box_top_product_name"><text style="color: #999;"> RP：</text>{{renderDom[0].product_name}}</view>
<view class="prescribe_box_top_pharmacist_verify_time"><text style="color: #999;">开方日期：</text> {{renderDom[0].pharmacist_verify_time}}</view>
</view>
<view class="prescribe_box_bottom" data-order_prescription_id="{{renderDom[0].order_prescription_id}}">
<view class="prescribe_box_buy">去查看</view>
</view>
</view>
</view>
</view>
TUIKit/components/TUIChat/components/MessageElements/CustomMessage/index.wxss
+113
View File
@@ -120,3 +120,116 @@ line-height: 42rpx;
letter-spacing: 0;
margin-bottom: 12rpx;
}
/* 自定义评价样式 */
/* 横条样式 */
.gdxz_custom_trabecula_message{
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
}
.gdxz_custom_message_title{
flex: 1;
display: flex;
max-width: 92vw;
justify-content: center;
background-color: #E1E1E1;
padding: 5rpx 40rpx;
font-size: 28rpx;
border-radius: 5rpx;
}
.gdxz_custom_message_desc{
margin-top: 30rpx;
display: flex;
max-width: 92vw;
letter-spacing: 2rpx;
justify-content: center;
color: #666666;
font-size: 24rpx;
}
/* 评价样式 */
.gdxz_custom_order_evaluation_message{
display: flex;
justify-content: center;
flex-direction: column;
width: 80vw;
margin-right: 10vw;
border-radius: 10px;
background-color: #ffffff;
height: 250rpx;
overflow: hidden;
box-shadow: 0 0 10px 10px rgba(143, 142, 142, 0.2);
}
.evaluation_title{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
}
.evaluation_ratebox{
flex: 1;
display: flex;
justify-content: center;
align-items:baseline;
}
.evaluation_button{
flex: 1;
background-color: rgb(226, 247, 247);
color: #3CC7C0;
display: flex;
align-items: center;
justify-content: center;
font-size: 34rpx;
}
/* 开具处方样式 */
.gdxz_custom_order_prescribe_message{
width: 60vw;
position: relative;
border-radius: 10px 10px 10px 10px;
background: rgb(212, 239, 241);
border: 1rpx solid #1ACAD3;
/* background: rgb(255, 255, 255);
border: 1rpx solid #E7E7E7; */
}
.gdxz_custom_order_prescribe_message::after{
content:'';
position: absolute;
top: 35rpx;
right: -19rpx;
transform: translate(-50%,-50%) rotate(-135deg);
width: 16rpx;
height: 16rpx;
background: rgb(212, 239, 241);
border: 1rpx solid #1ACAD3;
/* background: rgb(255, 255, 255);
border: 1rpx solid #E7E7E7; */
border-style: none none solid solid;
}
.prescribe_title{
font-size: 34rpx;
border-bottom: 1px solid #E7E7E7;
margin: 0 20rpx;
padding: 20rpx 0;
}
.prescribe_box{
margin: 0 20rpx;
padding: 20rpx 0;
font-size: 28rpx;
}
.prescribe_box_top_pharmacist_verify_time{
margin-top: 20rpx;
}
.prescribe_box_bottom{
display: flex;
justify-content: center;
}
.prescribe_box_buy{
margin: 20rpx 20rpx 0 20rpx;
background-color: #3CC7C0;
color: #fff;
padding: 15rpx 30rpx;
border-radius: 40rpx;
font-size: 30rpx;
}
TUIKit/components/TUIChat/components/MessageInput/index.js
+6 -1
View File
@@ -250,6 +250,10 @@ Component({
this.setData({
displayFlag: targetFlag,
});
var myEventDetail = {} // detail对象，提供给事件监听函数
myEventDetail.displayFlag = targetFlag;
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myhandleExtensions', myEventDetail, myEventOption)
},
error(e) {
@@ -392,7 +396,8 @@ Component({
app.go("/Pages/yishi/case/index?order_inquiry_id="+this.data.order_inquiry_id)
break;
case '11'://在线开方
let userID = wx.getStorageSync('user_id');
let usertype = wx.getStorageSync('usertype');
let userID = wx.getStorageSync('user_id_'+usertype);
let multi_point_status = wx.getStorageSync(userID+'_multi_point_status');
if(multi_point_status == 1){
app.go("/Pages/yishi/onlinechufang/index?order_inquiry_id="+this.data.order_inquiry_id)
TUIKit/components/TUIChat/components/MessageInput/index.wxss
+3
View File
@@ -43,6 +43,7 @@
flex: 2;
display: flex;
justify-content: center;
align-items: center;
}
.TUI-message-input-main {
min-height: 78rpx;
@@ -108,6 +109,8 @@
justify-content: center;
border-radius: 10rpx;
color: #fff;
max-height: 200rpx;
padding: 20rpx 0;
}
.TUI-sendMessage-btn-input{
background-color: #3CC7C0;
TUIKit/components/TUIChat/components/MessageList/index.js
+26 -24
View File
@@ -1,8 +1,7 @@
import dayjs from '../../../../utils/dayjs';
import logger from '../../../../utils/logger';
import constant from '../../../../utils/constant';
import { API } from './../../../../../utils/network/api'
const api = new API()
const { GDXZ_CUSTOM_MSEEAGE } = constant;
// eslint-disable-next-line no-undef
const app = getApp();
Component({
@@ -87,7 +86,6 @@ Component({
errorMessage: {},
errorMessageID: '',
typingMessage: {},
dialog_visible: false,
},
@@ -133,26 +131,7 @@ Component({
},
methods: {
//结束问诊
putDoctorInquiryFinish() {
this.setData({
dialog_visible: true
})
},
cancelDialog(){
this.setData({
dialog_visible: false
})
},
confirmDialog(){
api.putDoctorInquiryFinish({order_inquiry_id: this.data.order_inquiry_id}).then(response => {
console.log(response);
}).catch(errors => {console.error(errors);})
this.setData({
dialog_visible: false
})
},
// 刷新消息列表
refresh() {
if (this.data.isCompleted) {
@@ -171,6 +150,8 @@ Component({
},
// 获取消息列表
getMessageList(conversation) {
if (!this.data.isCompleted) {
wx.$TUIKit.getMessageList({
conversationID: conversation.conversationID,
@@ -183,7 +164,12 @@ Component({
let HMM_messageList = HMM_data.messageList;
HMM_messageList.forEach(item => {
let HMM_type = item.type;
if(HMM_type == "TIMCustomElem") return;
console.log(item)
//去除自定义消息
// if(HMM_type == "TIMCustomElem") return;
let show_avatar = this.checkShowAvatar(item);
item.show_avatar = show_avatar;
HMM_messageList_del.push(item);
})
HMM_data.messageList = HMM_messageList_del;
@@ -200,6 +186,18 @@ Component({
});
}
},
checkShowAvatar(message){
let type = message.type;
let show_avatar = true;
if(type == "TIMCustomElem"){
const customMessage = JSON.parse(message.payload.data);
if(customMessage.message_type != GDXZ_CUSTOM_MSEEAGE.PRESCRIBE){
show_avatar = false;
}
}
return show_avatar;
},
// 历史消息渲染
$handleMessageRender(messageList, currentMessageList) {
this.showHistoryMessageTime(currentMessageList);
@@ -246,6 +244,7 @@ Component({
// 收到的消息
$onMessageReceived(value) {
const message = value.data[0];
message.show_avatar = this.checkShowAvatar(message);
wx.$TUIKit.setMessageRead({ conversationID: this.data.conversation.conversationID }).then(() => {
logger.log('| MessageList | setMessageRead | ok');
});
@@ -315,6 +314,9 @@ Component({
},
// 自己的消息上屏
updateMessageList(message) {
//自己的消息有头像
message.show_avatar = this.checkShowAvatar(message);
if (message.conversationID !== this.data.conversation.conversationID) return;
wx.$TUIKit.setMessageRead({ conversationID: this.data.conversation.conversationID }).then(() => {
logger.log('| MessageList | setMessageRead | ok');
TUIKit/components/TUIChat/components/MessageList/index.json
+1 -2
View File
@@ -12,7 +12,6 @@
"FaceMessage": "../MessageElements/FaceMessage/index",
"FileMessage": "../MessageElements/FileMessage/index",
"MergerMessage": "../MessageElements/MergerMessage/index",
"RevokeMessage": "../MessageElements/RevokeMessage/index",
"t-dialog": "tdesign-miniprogram/dialog/dialog"
"RevokeMessage": "../MessageElements/RevokeMessage/index"
}
}
TUIKit/components/TUIChat/components/MessageList/index.wxml
+3 -14
View File
@@ -34,7 +34,7 @@
</view>
<TipMessage wx:if="{{item.type === 'TIMGroupTipElem'}}" message="{{item}}"/>
<view wx:if="{{item.type !== 'TIMGroupTipElem'}}" class="{{item.flow === 'out' ? 't-self-message':'t-recieve-message'}}" >
<image class="t-message-avatar" wx:if="{{item.flow === 'in'}}" src="{{item.avatar || 'https://gdxz-hospital.oss-cn-chengdu.aliyuncs.com/applet/doctor/static/images/default_photo.png'}}" data-value="{{item}}" bindtap="getMemberProfile" />
<image class="t-message-avatar" wx:if="{{item.flow === 'in' && item.show_avatar }}" src="{{item.avatar || 'https://gdxz-hospital.oss-cn-chengdu.aliyuncs.com/applet/doctor/static/images/default_photo.png'}}" data-value="{{item}}" bindtap="getMemberProfile" />
<view class="read-receipts" wx:if="{{conversation.type === 'C2C' && item.flow==='out' }}">
<!-- <view wx:if="{{item.isPeerRead}}" >已读</view>
<view wx:else>未读</view> -->
@@ -52,7 +52,7 @@
<FileMessage wx:if="{{item.type === 'TIMFileElem'}}" message="{{item}}" isMine="{{item.flow === 'out'}}"/>
<MergerMessage wx:if="{{item.type === 'TIMRelayElem'}}" message="{{item}}" isMine="{{item.flow === 'out'}}"/>
</view>
<image class="t-message-avatar" wx:if="{{item.flow === 'out'}}" src="{{item.avatar || 'https://gdxz-hospital.oss-cn-chengdu.aliyuncs.com/applet/doctor/static/images/default_photo.png'}}" data-value="{{item}}" bindtap="getMemberProfile"/>
<image class="t-message-avatar" wx:if="{{item.flow === 'out' && item.show_avatar }}" src="{{item.avatar || 'https://gdxz-hospital.oss-cn-chengdu.aliyuncs.com/applet/doctor/static/images/default_photo.png'}}" data-value="{{item}}" bindtap="getMemberProfile"/>
</view>
</view>
</view>
@@ -80,15 +80,4 @@
</view>
<wxs src = './concat.wxs' module = 'concat'/>
<t-dialog
visible="{{ dialog_visible }}"
title="温馨提示"
content="您确认结束问诊？"
>
<view slot="cancel-btn" class="dialog dialog_cancel_btn" bindtap="cancelDialog">
取消
</view>
<view slot="confirm-btn" class="dialog dialog_confirm_btn" bindtap="confirmDialog">
确定
</view>
</t-dialog>
TUIKit/components/TUIChat/components/MessageList/index.wxss
-14
View File
@@ -252,17 +252,3 @@
padding-left: 5px;
color: blue;
}
.dialog{
width: 50%;
text-align: center;
height: 100rpx;
line-height: 100rpx;
}
.dialog_cancel_btn{
border-top: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}
.dialog_confirm_btn{
border-top: 1px solid #E9E9E9;
color: #3CC7C0;
}
TUIKit/components/TUIChat/index.js
+52 -6
View File
@@ -8,11 +8,11 @@ const app = getApp();
const inputStyle = `
--padding: 0px;
z-index: 9999999;
`;
let newInputStyle = `
--padding: 0px
--padding: 0px;
position: absolute;
`;
const setNewInputStyle = (number) => {
@@ -118,6 +118,7 @@ Component({
viewData: {
style: inputStyle,
},
input_area_style:"",
KeyboardHeight: 0,
showTips: false,
showGroupTips: false,
@@ -127,13 +128,35 @@ Component({
title: '', //导航栏 中间的标题
},
baseInfo: {},
navbar_height: 0
navbar_height: 0,
dialog_visible: false,
},
/**
* 组件的方法列表
*/
methods: {
//结束问诊
putDoctorInquiryFinish() {
this.setData({
dialog_visible: true
})
},
cancelDialog(){
this.setData({
dialog_visible: false
})
},
confirmDialog(){
api.putDoctorInquiryFinish({order_inquiry_id: this.data.order_inquiry_id}).then(response => {
console.log(response);
}).catch(errors => {console.error(errors);})
this.setData({
dialog_visible: false
})
},
//获取问诊订单消息内页基础数据
getInquiryMessageBasic() {
console.log("order_inquiry_id: ", this.data.order_inquiry_id);
@@ -222,18 +245,41 @@ Component({
resendMessage(event) {
this.selectComponent('#MessageInput').onInputValueChange(event);
},
myhandleExtensions(e){
console.log("myhandleExtensionsmyhandleExtensions: ", e);
let displayFlag = e.detail.displayFlag;
if(displayFlag){
this.setData({
input_area_style: "position: absolute; bottom: 30px;"
})
}else{
this.setData({
input_area_style: ""
})
}
},
// 监听键盘，获取焦点时将输入框推到键盘上方
pullKeysBoards(event) {
setNewInputStyle(event.detail.event.detail.height);
this.setData({
'viewData.style': newInputStyle,
input_area_style: "position: absolute; bottom: 30px;"
});
},
// 监听键盘，失去焦点时收起键盘
downKeysBoards(event) {
this.setData({
'viewData.style': inputStyle,
});
console.log(event)
let value = event.detail.event.detail.value;
if(value){
this.setData({
'viewData.style': inputStyle,
});
}else{
this.setData({
'viewData.style': inputStyle,
input_area_style: ""
});
}
},
typing(event) {
const { STRING_TEXT, FEAT_NATIVE_CODE } = constant;
TUIKit/components/TUIChat/index.json
+2 -1
View File
@@ -4,7 +4,8 @@
"MessageList": "./components/MessageList/index",
"MessageInput": "./components/MessageInput/index",
"TUIGroup": "../TUIGroup/index",
"te-nav-bar": "/commpents/te_navbar"
"te-nav-bar": "/commpents/te_navbar",
"t-dialog": "tdesign-miniprogram/dialog/dialog"
},
"disableScroll":true
}
TUIKit/components/TUIChat/index.wxml
+17 -5
View File
@@ -23,20 +23,32 @@
<span class="report" bindtap="handleReport">点此投诉</span>
</view> -->
<!-- </view> -->
<scroll-view class="message-list" bindtap="triggerClose">
<!-- <scroll-view class="message-list" bindtap="triggerClose"> -->
<MessageList id="MessageList" conversation="{{conversation}}" unreadCount="{{unreadCount}}" bind:changeMemberCount="changeMemberCount" bind:resendMessage="resendMessage" bind:typing="typing" order_inquiry_id="{{order_inquiry_id}}"></MessageList>
</scroll-view>
<!-- </scroll-view> -->
</view>
<view class="group-profile">
<TUIGroup id="TUIGroup" wx:if="{{isShow}}" conversation="{{conversation}}" bind:groupCall="groupCall" bind:showConversationList="showConversationList"></TUIGroup>
</view>
<view class="input-area">
<view class="input-area" style="{{input_area_style}}">
<view class="message-input" style="{{viewData.style}}" wx:if="{{showChat}}">
<MessageInput id="MessageInput" inquiry_type="{{inquiry_type}}" order_inquiry_id="{{order_inquiry_id}}" conversation="{{conversation}}" hasCallKit="{{hasCallKit}}" bind:sendMessage="sendMessage" bind:downKeysBoards="downKeysBoards" bind:pullKeysBoards="pullKeysBoards" bind:showMessageErrorImage="showMessageErrorImage"
<MessageInput bind:myhandleExtensions="myhandleExtensions" id="MessageInput" inquiry_type="{{inquiry_type}}" order_inquiry_id="{{order_inquiry_id}}" conversation="{{conversation}}" hasCallKit="{{hasCallKit}}" bind:sendMessage="sendMessage" bind:downKeysBoards="downKeysBoards" bind:pullKeysBoards="pullKeysBoards" bind:showMessageErrorImage="showMessageErrorImage"
bind:handleCall="handleCall" ></MessageInput>
</view>
</view>
<view style="height: 30px;position: fixed;bottom: 0;width: 100%;background-color: #fff;">
<view style="height: 40px;position: fixed;bottom: 0;width: 100%;background-color: #fff;">
</view>
</view>
<t-dialog
visible="{{ dialog_visible }}"
title="温馨提示"
content="您确认结束问诊？"
>
<view slot="cancel-btn" class="dialog dialog_cancel_btn" bindtap="cancelDialog">
取消
</view>
<view slot="confirm-btn" class="dialog dialog_confirm_btn" bindtap="confirmDialog">
确定
</view>
</t-dialog>
TUIKit/components/TUIChat/index.wxss
+20 -3
View File
@@ -96,10 +96,10 @@
top: 246rpx;
}
.input-area {
position: absolute;
bottom: 20px;
position: relative;
z-index: 999999;
/* height: 200rpx; */
/* position: absolute;
bottom: 20px; */
}
.message-list {
width: 100%;
@@ -157,10 +157,13 @@
.name{
font-size: 34rpx;
color: #3CC7C0;
flex: 1;
text-align: center;
}
.age{
font-size: 34rpx;
color: #666666;
flex: 1;
}
.status{
background: #FFF2E8;
@@ -169,4 +172,18 @@
font-size: 24rpx;
color: #FA541C;
padding: 10rpx 20rpx;
}
.dialog{
width: 50%;
text-align: center;
height: 100rpx;
line-height: 100rpx;
}
.dialog_cancel_btn{
border-top: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}
.dialog_confirm_btn{
border-top: 1px solid #E9E9E9;
color: #3CC7C0;
}