code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-07 17:38:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

IM功能

Browse Source
This commit is contained in:
chc
2023-02-01 15:03:40 +08:00
parent 9df377677b a97ed0c3f6
commit d371fd0146
23 changed files with 758 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
im/src/components/chat/panel/TalkPanel.vue
View File

@@ -35,9 +35,9 @@
<!-- 其它对话消息 -->
<div v-else class="message-box record-box" :class="{
'direction-rt': item.float == 'right',
'checkbox-border': multiSelect.isOpen === true,
}">
'direction-rt': item.float == 'right',
'checkbox-border': multiSelect.isOpen === true,
}">
<aside v-show="multiSelect.isOpen" class="checkbox-column">
<i class="el-icon-success" :class="{ selected: verifyMultiSelect(item.id) }"
@click="triggerMultiSelect(item.id)" />
@@ -59,48 +59,63 @@
{{ unixToDate(item.createTime, "MM月dd日 hh:mm") }}
</span>
<!-- 文本消息 -->
<div v-if="item.messageType == 'MESSAGE'" class="text-message" :class="{
left: item.float == 'left',
right: item.float == 'right',
}">
<div v-if="item.messageType == 'MESSAGE'" style="background-color: #d0e9ff;color: black;"
class="text-message" :class="{
left: item.float == 'left',
right: item.float == 'right',
}">
<div class="arrow"></div>
<pre v-html="item.text" />
<pre v-if="!emojistwo.includes(item.text)" v-html="item.text" />
<pre v-if="emojistwo.includes(item.text)" v-html="textReplaceEmoji(item.text)" />
</div>
<div v-if="item.messageType == 'GOODS' && item.text != null" class="text-message" :class="{
left: item.float == 'left',
right: item.float == 'right',
}">
<div v-if="item.messageType == 'GOODS' && item.text != null" class="goodsStyle " :class="{
left: item.float == 'left',
right: item.float == 'right',
}">
<div class="base" @click="linkToGoods(item.text.goodsId, item.text.id)">
<div>
<img :src="item.text.thumbnail" class="image" />
</div>
<div style="margin-left: 13px">
<a> {{ item.text.goodsName }} </a>
<div>
<span style="color: red;">￥{{ item.text.price }}</span>
<div>
<div class="goods_name">
<el-tooltip class="item" effect="dark" :content="item.text.goodsName" placement="top-start">
<a> {{ item.text.goodsName }} </a>
</el-tooltip>
</div>
<div class="price">
<span>￥{{ item.text.price }}</span>
</div>
</div>
</div>
</div>
<div v-if="item.messageType == 'ORDER' && item.text != null" class="text-message" :class="{
left: item.float == 'left',
right: item.float == 'right',
}">
<a> 订单号:{{ item.text.sn }} </a>
<div v-if="item.messageType == 'ORDER' && item.text != null" class="oderStyle" :class="{
left: item.float == 'left',
right: item.float == 'right',
}">
<div class="oedersn">
<el-tooltip class="item" effect="dark" :content="item.text.sn" placement="top-start">
<a> 订单号:{{ item.text.sn }} </a>
</el-tooltip>
</div>
<div class="baseTwo">
<img :src="item.text.groupImages" style="height: 100px;width: 100px;margin-top: 10px;" />
<span class="orderGoodsName" @click="linkToOrders(item.text.sn)">{{ item.text.groupName }}</span>
<span class="orderGoodsTime">{{ item.text.paymentTime }}</span>
<span class="orderFlowPrice">
订单金额：￥{{ item.text.flowPrice }}
</span>
<span class="order_status"
:style="{ 'color': item.text.orderStatus == 'CANCELLED' || item.text.orderStatus == 'UNPAID' || item.text.orderStatus == ' TAKE' ? '#5a606b' : '#f23030' }">{{
item.text.orderStatus == 'CANCELLED' ? '已取消' : item.text.orderStatus == 'UNPAID' ? '未付款' :
item.text.orderStatus ==
'PAID' ? '已付款' : item.text.orderStatus == 'UNDELIVERED' ? '待发货' : item.text.orderStatus ==
'DELIVERED'
? '已发货' : item.text.orderStatus == ' COMPLETED' ? '已完成' : item.text.orderStatus == ' TAKE' ?
'待校验' : ''
}}</span>
</div>
</div>
<!-- 图片消息 -->
<!-- <image-message
v-else-if="item.messageType == 2 && item.file.file_type == 1"
:src="item.file.file_url"
@contextmenu.native="onCopy(idx, item, $event)"
/> -->
</div>
</main>
</div>
@@ -149,19 +164,19 @@
<!-- 消息管理器 -->
<transition name="el-fade-in-linear">
<TalkSearchRecord v-if="findChatRecord" :params="{
talk_type: params.talk_type,
receiver_id: params.receiver_id,
title: params.nickname,
}" @close="findChatRecord = false" />
talk_type: params.talk_type,
receiver_id: params.receiver_id,
title: params.nickname,
}" @close="findChatRecord = false" />
</transition>
<!-- 链接信息 -->
<OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" />
<OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" />
</div>
</template>
<script>
import { textReplaceLink } from "@/utils/functions";
import { textReplaceEmoji } from "@/utils/emojis";
import { textReplaceEmoji, emojistwo } from "@/utils/emojis";
import OtherLink from "@/components/chat/panel/OtherLink.vue";
import { mapState, mapGetters } from "vuex";
import TalkSearchRecord from "@/components/chat/TalkSearchRecord";
@@ -218,6 +233,7 @@ export default {
return {
// 记录加载相关参数
textReplaceEmoji,
emojistwo,
textReplaceLink,
loadRecord: {
status: 0,
@@ -277,6 +293,7 @@ export default {
mode: 0,
};
this.loadChatRecords();
},
},
mounted () {
@@ -372,7 +389,6 @@ export default {
// 回车键发送消息回调事件
submitSendMessage (content) {
console.log("发送", content);
const record = {
operation_type: "MESSAGE",
to: this.params.receiver_id,
@@ -381,6 +397,9 @@ export default {
context: content,
talk_id: this.params.talkId,
};
// if (record.messageType == 'MESSAGE"') {
// record.text = this.textReplaceEmoji(record.content)
// }
SocketInstance.emit("event_talk", record);
this.$store.commit("UPDATE_TALK_ITEM", {
@@ -400,8 +419,6 @@ export default {
text: content,
float: "right",
};
console.log("insterChat", insterChat);
// console.log("插入对话记录",'')
// 插入对话记录
this.$store.commit("PUSH_DIALOGUE", insterChat);
@@ -457,7 +474,6 @@ export default {
// 加载用户聊天详情信息
loadChatRecords () {
console.log(this.records.length, 'this.records.length ')
if (this.loadRecord.pageNumber === 0 || this.params.clickFlag) {
this.loadRecord.pageNumber = 1
this.params.clickFlag = false
@@ -486,6 +502,9 @@ export default {
if (item.messageType == 'GOODS') {
item.text = JSON.parse(item.text)
}
// if (item.messageType == 'MESSAGE"') {
// item.text = this.textReplaceEmoji(item.text)
// }
if (item.messageType == 'ORDER') {
item.text = JSON.parse(item.text)
}
@@ -496,7 +515,8 @@ export default {
? (this.loadRecord.status = 1)
: (this.loadRecord.status = 2);
this.$nextTick(() => {
if (data.record_id == 0 || !data.record_id) {
// if (data.record_id == 0 || !data.record_id) {
if (data.record_id == 0 || data.pageNumber == 1) {
el.scrollTop = el.scrollHeight
} else {
el.scrollTop = el.scrollHeight - scrollHeight
@@ -820,6 +840,67 @@ export default {
};
</script>
<style lang="less" scoped>
.order_status {
height: 30px;
width: 60px;
background: #ffeded;
margin-right: 20px;
text-align: center;
line-height: 25px;
margin-left: 15px;
border-radius: 10px;
}
.oderStyle {
border: 1px solid #f2f2f2;
width: 330px;
border-radius: 4px;
.oedersn {
margin: 10px 0 10px 5px;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.goodsStyle {
border: 1px solid #f2f2f2;
width: 300px;
height: 120px;
display: flex;
border-radius: 4px;
.goods_name {
color: black;
width: 150px;
font-size: 15px;
color: #333333;
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image {
height: 70px;
margin-top: 3px;
width: 70px;
background-size: cover;
margin: 20px;
}
.price {
color: #999;
margin-top: 20px;
}
.base {
display: flex;
}
}
.orderSn {
overflow: hidden;
text-overflow: ellipsis;
@@ -830,7 +911,7 @@ export default {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// white-space: nowrap;
position: absolute;
margin-top: 10px;
margin-left: 10px;
@@ -838,9 +919,14 @@ export default {
.orderGoodsTime {
margin-left: 10px;
color: red;
color: #999;
position: absolute;
margin-top: 35px;
margin-top: 70px;
}
.orderFlowPrice {
color: #999;
margin-bottom: 20px;
}
.main-box {
@@ -904,26 +990,26 @@ export default {
}
.base {
margin-top: 5px;
height: 120px;
display: flex;
// .base {
// margin-top: 5px;
// height: 120px;
// display: flex;
div {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 8px;
white-space: nowrap;
}
// div {
// width: 100px;
// // overflow: hidden;
// // text-overflow: ellipsis;
// margin-top: 8px;
// // white-space: nowrap;
// }
.image {
height: 100px;
margin-top: 3px;
width: 100px
}
// .image {
// height: 100px;
// margin-top: 3px;
// width: 100px
// }
}
// }
.talk-bubble {
position: absolute;
@@ -1101,7 +1187,7 @@ export default {
}
@bg-left-color: #f5f5f5;
@bg-right-color: #1ebafc;
@bg-right-color: #ffffff;
.text-message {
position: relative;