176 lines
4.8 KiB
Vue
176 lines
4.8 KiB
Vue
<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="click-button" type="danger" v-if="!sendFlag" size="mini" @click="submitSendMessage()"
|
|
plain>发送</el-button>
|
|
</div>
|
|
</div>
|
|
<hr class="separate" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Tag, button } from 'element-ui'
|
|
import { mapState, mapGetters } from "vuex";
|
|
import SocketInstance from "@/im-server/socket-instance";
|
|
export default {
|
|
data() {
|
|
return {
|
|
sendFlag: false,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(["talkItems"]),
|
|
...mapState({
|
|
id: (state) => state.user.id,
|
|
index_name: (state) => state.dialogue.index_name,
|
|
toUser: (state) => state.user.toUser,
|
|
}),
|
|
},
|
|
mounted(){
|
|
|
|
},
|
|
components: {
|
|
"el-tag": Tag,
|
|
"el-button": button,
|
|
Storage
|
|
},
|
|
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;
|
|
},
|
|
},
|
|
props: {
|
|
goodsDetail: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.store-button {
|
|
background-color: white;
|
|
border-color: #F56C6C;
|
|
}
|
|
|
|
.base {
|
|
margin-top: 5px;
|
|
height: 120px;
|
|
display: flex;
|
|
|
|
div {
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
margin-top: 8px;
|
|
white-space: nowrap;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.image {
|
|
height: 100px;
|
|
margin-top: 3px;
|
|
width: 100px
|
|
}
|
|
|
|
}
|
|
.click-button{
|
|
margin-top: 8px;
|
|
background-color: white;
|
|
border-color: #F56C6C;
|
|
}
|
|
.separate {
|
|
margin-top: 8px;
|
|
}
|
|
</style> |