code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-18 00:45:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

聊天

Browse Source
This commit is contained in:
程
2022-12-28 11:23:46 +08:00
parent 3881370b6e
commit e8b7a85140
4 changed files with 279 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
im/src/components/chat/panel/template/goodsLink.vue
View File

@@ -1,21 +1,23 @@
<template>
<div>
当前浏览
<div class="base">
<div>
<img :src="goodsDetail.thumbnail" class="image" />
</div>
<div style="margin-left: 13px">
<a @click="linkToGoods(goodsDetail.goodsId,goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
<div>
<span style="color: red;">￥{{ goodsDetail.price }}</span>
</div>
<el-button class="store-button" type="danger" v-if="!sendFlag" size="mini" @click="submitSendMessage()"
plain>发送</el-button>
</div>
<div>
当前浏览
<div class="base">
<div>
<img :src="goodsDetail.thumbnail" class="image" />
</div>
<div style="margin-left: 13px">
<a @click="linkToGoods(goodsDetail.goodsId, goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
<div>
<span style="color: red;">￥{{ goodsDetail.price }}</span>
</div>
<hr class="separate" />
<div v-if="hide">
<el-button class="store-button" type="danger" v-if="!sendFlag && btnHide == 1" size="mini"
@click="submitSendMessage()" plain>发送</el-button>
</div>
</div>
</div>
<hr class="separate" />
</div>
</template>
<script>
@@ -23,146 +25,152 @@ import { Tag, button } from 'element-ui'
import { mapState, mapGetters } from "vuex";
import SocketInstance from "@/im-server/socket-instance";
export default {
data() {
return {
sendFlag: false,
}
data () {
return {
sendFlag: false,
btnHide: undefined,
hide: true
}
},
computed: {
...mapGetters(["talkItems"]),
...mapState({
id: (state) => state.user.id,
index_name: (state) => state.dialogue.index_name,
toUser: (state) => state.user.toUser,
}),
},
mounted () {
this.btnHide = localStorage.getItem('btnHide')
},
components: {
"el-tag": Tag,
"el-button": button,
Storage
},
methods: {
toGoods () {
alert("toGoods")
},
computed: {
...mapGetters(["talkItems"]),
...mapState({
id: (state) => state.user.id,
index_name: (state) => state.dialogue.index_name,
toUser: (state) => state.user.toUser,
}),
toMessage () {
alert(JSON.stringify(this.toUser))
alert("toMessage")
},
mounted(){
// 回车键发送消息回调事件
submitSendMessage () {
console.log("发送");
const context = this.goodsDetail
const record = {
operation_type: "MESSAGE",
to: this.toUser.userId,
from: this.id,
message_type: "GOODS",
context: context,
talk_id: this.toUser.id,
};
SocketInstance.emit("event_talk", record);
this.$store.commit("UPDATE_TALK_ITEM", {
index_name: this.index_name,
draft_text: "",
});
/**
* 插入数据
*/
const insterChat = {
createTime: this.formateDateAndTimeToString(new Date()),
fromUser: this.id,
toUser: record.to,
isRead: false,
messageType: "GOODS",
text: context,
float: "right",
};
console.log("insterChat", insterChat);
// console.log("插入对话记录",'')
// 插入对话记录
this.$store.commit("PUSH_DIALOGUE", insterChat);
// 获取聊天面板元素节点
let el = document.getElementById("lumenChatPanel");
// 判断的滚动条是否在底部
let isBottom =
Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
if (isBottom || record.to == this.id) {
this.$nextTick(() => {
el.scrollTop = el.scrollHeight;
});
} else {
this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
content: content,
nickname: record.name,
});
}
// 发送后隐藏按钮 0：隐藏 1：显示
localStorage.setItem('btnHide', 0)
this.hide = false
},
components: {
"el-tag": Tag,
"el-button": button,
Storage
formateDateAndTimeToString (date) {
var hours = date.getHours();
var mins = date.getMinutes();
var secs = date.getSeconds();
var msecs = date.getMilliseconds();
if (hours < 10) hours = "0" + hours;
if (mins < 10) mins = "0" + mins;
if (secs < 10) secs = "0" + secs;
if (msecs < 10) secs = "0" + msecs;
return (
this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
);
},
methods: {
toGoods() {
alert("toGoods")
},
toMessage() {
alert(JSON.stringify(this.toUser))
alert("toMessage")
},
// 回车键发送消息回调事件
submitSendMessage() {
console.log("发送");
const context = this.goodsDetail
const record = {
operation_type: "MESSAGE",
to: this.toUser.userId,
from: this.id,
message_type: "GOODS",
context: context,
talk_id: this.toUser.id,
};
SocketInstance.emit("event_talk", record);
this.$store.commit("UPDATE_TALK_ITEM", {
index_name: this.index_name,
draft_text: "",
});
/**
* 插入数据
*/
const insterChat = {
createTime: this.formateDateAndTimeToString(new Date()),
fromUser: this.id,
toUser: record.to,
isRead: false,
messageType: "GOODS",
text: context,
float: "right",
};
console.log("insterChat", insterChat);
// console.log("插入对话记录",'')
// 插入对话记录
this.$store.commit("PUSH_DIALOGUE", insterChat);
// 获取聊天面板元素节点
let el = document.getElementById("lumenChatPanel");
// 判断的滚动条是否在底部
let isBottom =
Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
if (isBottom || record.to == this.id) {
this.$nextTick(() => {
el.scrollTop = el.scrollHeight;
});
} else {
this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
content: content,
nickname: record.name,
});
}
},
formateDateAndTimeToString(date) {
var hours = date.getHours();
var mins = date.getMinutes();
var secs = date.getSeconds();
var msecs = date.getMilliseconds();
if (hours < 10) hours = "0" + hours;
if (mins < 10) mins = "0" + mins;
if (secs < 10) secs = "0" + secs;
if (msecs < 10) secs = "0" + msecs;
return (
this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
);
},
formatDateToString(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
return year + "-" + month + "-" + day;
},
formatDateToString (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
return year + "-" + month + "-" + day;
},
props: {
goodsDetail: {
type: Object,
default: null,
},
},
props: {
goodsDetail: {
type: Object,
default: null,
},
},
}
</script>
<style scoped lang="less">
.store-button {
background-color: white;
border-color: #F56C6C;
background-color: white;
border-color: #F56C6C;
}
.base {
margin-top: 5px;
height: 120px;
display: flex;
margin-top: 5px;
height: 120px;
display: flex;
div {
margin-top: 8px;
}
div {
margin-top: 8px;
}
.image {
height: 100px;
margin-top: 3px;
width: 100px
}
.image {
height: 100px;
margin-top: 3px;
width: 100px
}
}
.separate {
margin-top: 8px;
margin-top: 8px;
}
</style>