滚动加载样式
程
parent
84d3dd247d
commit
779f6e4fa1
|
|
@ -28,6 +28,8 @@ export default {
|
|||
this.Handler = new Date().getTime() - this.beforeUnload;
|
||||
if (this.Handler <= 5) {
|
||||
localStorage.setItem('btnHide', 1)
|
||||
var storage = window.localStorage;
|
||||
storage.clear()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" :stretch=true>
|
||||
<el-tab-pane :label="toUser.storeFlag ? '正在咨询' : '他的足迹'" name="history">
|
||||
<div style="margin-left: 12px;" v-if="toUser.storeFlag">
|
||||
<GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId" />
|
||||
<FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" />
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
<GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId"
|
||||
@sendMessage="submitSendMessage" />
|
||||
<FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" @sendMessage="submitSendMessage" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="店铺信息" name="UserInfo" v-if="toUser.storeFlag">
|
||||
|
|
@ -24,6 +22,8 @@ import { ServeGetGoodsDetail } from '@/api/goods'
|
|||
import StoreDetail from "@/components/chat/panel/template/storeDetail.vue";
|
||||
import FootPrint from "@/components/chat/panel/template/footPrint.vue";
|
||||
import GoodsLink from "@/components/chat/panel/template/goodsLink.vue";
|
||||
import SocketInstance from "@/im-server/socket-instance";
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
"el-tabs": Tabs,
|
||||
|
|
@ -46,6 +46,12 @@ export default {
|
|||
default: null,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["talkItems"]),
|
||||
...mapState({
|
||||
index_name: (state) => state.dialogue.index_name,
|
||||
}),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: 'history',
|
||||
|
|
@ -112,6 +118,11 @@ export default {
|
|||
}
|
||||
ServeGetFootPrint(this.footPrintParams).then(res => {
|
||||
res.result.records.forEach((item, index) => {
|
||||
if (localStorage.getItem(item.goodsId)) {
|
||||
item.btnHide = 0
|
||||
} else {
|
||||
item.btnHide = 1
|
||||
}
|
||||
if (item.goodsId === this.goodsParams.goodsId) {
|
||||
res.result.records.splice(index, 1)
|
||||
}
|
||||
|
|
@ -121,12 +132,85 @@ export default {
|
|||
})
|
||||
//删除掉刚加入的商品
|
||||
},
|
||||
|
||||
// 发送消息回调事件
|
||||
submitSendMessage (record, context) {
|
||||
console.log("发送");
|
||||
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;
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
// /deep/ .el-tabs__nav.is-top {
|
||||
// }
|
||||
|
||||
/deep/ .el-tabs__nav {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex">
|
||||
<el-container class="ov-hidden flex-10 full-height ">
|
||||
<el-container class="ov-hidden flex-10 full-height ">
|
||||
<PanelHeader ref="panelHeader" :data="params" :online="isOnline" :keyboard="inputEvent"
|
||||
@event="handleHeaderEvent" />
|
||||
<!-- 主体信息 -->
|
||||
|
|
@ -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)" />
|
||||
|
|
@ -60,28 +60,28 @@
|
|||
</span>
|
||||
<!-- 文本消息 -->
|
||||
<div v-if="item.messageType == 'MESSAGE'" class="text-message" :class="{
|
||||
left: item.float == 'left',
|
||||
right: item.float == 'right',
|
||||
}">
|
||||
left: item.float == 'left',
|
||||
right: item.float == 'right',
|
||||
}">
|
||||
<div class="arrow"></div>
|
||||
|
||||
<pre v-html="item.text" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.messageType == 'GOODS'" class="text-message" :class="{
|
||||
left: item.float == 'left',
|
||||
right: item.float == 'right',
|
||||
}">
|
||||
<div class="base" @click="linkToGoods(item.text.goodsId,item.text.id)">
|
||||
<div v-else-if="item.messageType == 'GOODS' && item.text != null" class="text-message" :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>
|
||||
<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>
|
||||
<span style="color: red;">￥{{ item.text.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -133,18 +133,18 @@
|
|||
</template>
|
||||
</el-footer>
|
||||
<el-aside width="200px">
|
||||
|
||||
|
||||
</el-aside>
|
||||
|
||||
|
||||
</el-container>
|
||||
|
||||
<!-- 消息管理器 -->
|
||||
<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>
|
||||
|
||||
<!-- 链接信息 -->
|
||||
|
|
@ -206,7 +206,7 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
// 记录加载相关参数
|
||||
textReplaceEmoji,
|
||||
|
|
@ -260,7 +260,7 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
// 监听面板传递参数
|
||||
params() {
|
||||
params () {
|
||||
this.loadRecord.minRecord = 0;
|
||||
this.tipsBoard = false;
|
||||
this.multiSelect = {
|
||||
|
|
@ -271,7 +271,7 @@ export default {
|
|||
this.loadChatRecords();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.loadChatRecords();
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -279,7 +279,7 @@ export default {
|
|||
sendTime: formatTime,
|
||||
|
||||
// 处理 Header 组件事件
|
||||
handleHeaderEvent(event_name) {
|
||||
handleHeaderEvent (event_name) {
|
||||
switch (event_name) {
|
||||
case "history":
|
||||
this.findChatRecord = true;
|
||||
|
|
@ -303,7 +303,7 @@ export default {
|
|||
// },
|
||||
// #TODO 冗余代码
|
||||
|
||||
formatDateToString(date) {
|
||||
formatDateToString (date) {
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
|
|
@ -318,7 +318,7 @@ export default {
|
|||
* @param format 转换格式
|
||||
* @returns {*|string}
|
||||
*/
|
||||
unixToDate(unix, format) {
|
||||
unixToDate (unix, format) {
|
||||
if (!unix) return unix;
|
||||
let _format = format || "yyyy-MM-dd hh:mm:ss";
|
||||
const d = new Date(unix);
|
||||
|
|
@ -347,7 +347,7 @@ export default {
|
|||
return _format;
|
||||
},
|
||||
|
||||
formateDateAndTimeToString(date) {
|
||||
formateDateAndTimeToString (date) {
|
||||
var hours = date.getHours();
|
||||
var mins = date.getMinutes();
|
||||
var secs = date.getSeconds();
|
||||
|
|
@ -363,7 +363,7 @@ export default {
|
|||
// #冗余代码结束
|
||||
|
||||
// 回车键发送消息回调事件
|
||||
submitSendMessage(content) {
|
||||
submitSendMessage (content) {
|
||||
console.log("发送", content);
|
||||
const record = {
|
||||
operation_type: "MESSAGE",
|
||||
|
|
@ -417,7 +417,7 @@ export default {
|
|||
},
|
||||
|
||||
// 推送编辑事件消息
|
||||
onKeyboardEvent(text) {
|
||||
onKeyboardEvent (text) {
|
||||
this.$store.commit("UPDATE_TALK_ITEM", {
|
||||
index_name: this.index_name,
|
||||
draft_text: text,
|
||||
|
|
@ -448,7 +448,7 @@ export default {
|
|||
|
||||
|
||||
// 加载用户聊天详情信息
|
||||
loadChatRecords() {
|
||||
loadChatRecords () {
|
||||
console.log(this.records.length, 'this.records.length ')
|
||||
if (this.loadRecord.pageNumber === 0 || this.params.clickFlag) {
|
||||
this.loadRecord.pageNumber = 1
|
||||
|
|
@ -458,7 +458,7 @@ export default {
|
|||
}
|
||||
const user_id = this.id;
|
||||
const data = {
|
||||
pageNumber: this.loadRecord.pageNumber ,
|
||||
pageNumber: this.loadRecord.pageNumber,
|
||||
pageSize: this.loadChatRecords.pageSize,
|
||||
talkId: this.params.talkId,
|
||||
};
|
||||
|
|
@ -475,7 +475,7 @@ export default {
|
|||
if (item.toUser > 0) {
|
||||
item.float = item.fromUser == user_id ? "right" : "left";
|
||||
}
|
||||
if(item.messageType === 'GOODS'){
|
||||
if (item.messageType === 'GOODS') {
|
||||
item.text = JSON.parse(item.text)
|
||||
}
|
||||
return { ...item, [key]: key };
|
||||
|
|
@ -496,7 +496,7 @@ export default {
|
|||
},
|
||||
|
||||
// 多选处理方式
|
||||
handleMultiMode(value) {
|
||||
handleMultiMode (value) {
|
||||
if (value == "close") {
|
||||
this.closeMultiSelect();
|
||||
return false;
|
||||
|
|
@ -537,7 +537,7 @@ export default {
|
|||
},
|
||||
|
||||
// 确认消息转发联系人事件
|
||||
confirmSelectContacts(data) {
|
||||
confirmSelectContacts (data) {
|
||||
let user_ids = [];
|
||||
let group_ids = [];
|
||||
data.forEach((item) => {
|
||||
|
|
@ -568,7 +568,7 @@ export default {
|
|||
},
|
||||
|
||||
// 处理消息时间是否显示
|
||||
compareTime(index, datetime) {
|
||||
compareTime (index, datetime) {
|
||||
if (datetime == undefined) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -601,12 +601,12 @@ export default {
|
|||
},
|
||||
|
||||
// 查看好友用户信息
|
||||
catFriendDetail(value) {
|
||||
catFriendDetail (value) {
|
||||
this.$user(value);
|
||||
},
|
||||
|
||||
// 撤回消息
|
||||
revokeRecords(index, item) {
|
||||
revokeRecords (index, item) {
|
||||
ServeRevokeRecords({
|
||||
record_id: item.id,
|
||||
}).then((res) => {
|
||||
|
|
@ -617,7 +617,7 @@ export default {
|
|||
},
|
||||
|
||||
// 删除消息
|
||||
removeRecords(index, item) {
|
||||
removeRecords (index, item) {
|
||||
let receiver_id = item.receiver_id;
|
||||
if (item.talk_type == 1 && item.user_id != this.id) {
|
||||
receiver_id = item.user_id;
|
||||
|
|
@ -635,29 +635,29 @@ export default {
|
|||
},
|
||||
|
||||
// 从列表中删除记录
|
||||
delRecords(arr) {
|
||||
delRecords (arr) {
|
||||
this.$store.commit("BATCH_DELETE_DIALOGUE", arr);
|
||||
return this;
|
||||
},
|
||||
|
||||
// 开启多选模式
|
||||
openMultiSelect() {
|
||||
openMultiSelect () {
|
||||
this.multiSelect.isOpen = true;
|
||||
},
|
||||
|
||||
// 关闭多选模式
|
||||
closeMultiSelect() {
|
||||
closeMultiSelect () {
|
||||
this.multiSelect.isOpen = false;
|
||||
this.multiSelect.items = [];
|
||||
},
|
||||
|
||||
// 判断记录是否选中
|
||||
verifyMultiSelect(records_id) {
|
||||
verifyMultiSelect (records_id) {
|
||||
return this.multiSelect.items.indexOf(records_id) >= 0;
|
||||
},
|
||||
|
||||
// 触发多选事件
|
||||
triggerMultiSelect(records_id) {
|
||||
triggerMultiSelect (records_id) {
|
||||
let i = this.multiSelect.items.indexOf(records_id);
|
||||
if (i >= 0) {
|
||||
this.multiSelect.items.splice(i, 1);
|
||||
|
|
@ -674,14 +674,14 @@ export default {
|
|||
},
|
||||
|
||||
// 验证是否存在选择的指定类型的消息
|
||||
verifyMultiSelectType(type) {
|
||||
verifyMultiSelectType (type) {
|
||||
return this.records.some((item) => {
|
||||
return this.verifyMultiSelect(item.id) && item.messageType == type;
|
||||
});
|
||||
},
|
||||
|
||||
// 消息点击右键触发自定义菜单
|
||||
onCopy(idx, item, event) {
|
||||
onCopy (idx, item, event) {
|
||||
let menus = [];
|
||||
let content = "";
|
||||
if (document.getElementById("copy_class_" + item.id)) {
|
||||
|
|
@ -765,12 +765,12 @@ export default {
|
|||
event.preventDefault();
|
||||
},
|
||||
|
||||
hideChatGroup() {
|
||||
hideChatGroup () {
|
||||
this.group.panel = false;
|
||||
},
|
||||
|
||||
// 修改群聊免打扰状态
|
||||
disturbChange(detail) {
|
||||
disturbChange (detail) {
|
||||
this.$store.commit("UPDATE_TALK_ITEM", {
|
||||
index_name: `2_${this.params.receiver_id}`,
|
||||
is_disturb: parseInt(detail.status),
|
||||
|
|
@ -778,17 +778,17 @@ export default {
|
|||
},
|
||||
|
||||
// 退出群聊回调事件
|
||||
quitGroupSuccess() {
|
||||
quitGroupSuccess () {
|
||||
this.$emit("close-talk");
|
||||
},
|
||||
|
||||
// 同步群信息
|
||||
syncGroupInfo(groupInfo) {
|
||||
syncGroupInfo (groupInfo) {
|
||||
this.$refs.panelHeader.setGroupNum(groupInfo.members_num);
|
||||
},
|
||||
|
||||
// 对话面板滚动事件
|
||||
talkPanelScroll(e) {
|
||||
talkPanelScroll (e) {
|
||||
if (e.target.scrollTop == 0 && this.loadRecord.status == 1) {
|
||||
this.loadChatRecords();
|
||||
return;
|
||||
|
|
@ -802,7 +802,7 @@ export default {
|
|||
},
|
||||
|
||||
// 聊天版本滚动到底部
|
||||
talkPanelScrollBottom() {
|
||||
talkPanelScrollBottom () {
|
||||
let el = document.getElementById("lumenChatPanel");
|
||||
el.scrollTop = el.scrollHeight;
|
||||
},
|
||||
|
|
@ -869,26 +869,28 @@ export default {
|
|||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.base {
|
||||
margin-top: 5px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
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;
|
||||
left: 0px;
|
||||
|
|
|
|||
|
|
@ -1,39 +1,79 @@
|
|||
<template>
|
||||
<div class="box" @scroll="scrollBottom">
|
||||
<div class="tab">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="最近浏览" name="first"></el-tab-pane>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
|
||||
<el-tab-pane label="最近浏览" name="goods">
|
||||
<dl>
|
||||
<dd v-for="item in list" v-infinite-scroll="loadMore">
|
||||
<div class="base">
|
||||
<div>
|
||||
<img :src="item.thumbnail" class="image" />
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 13px">
|
||||
<a class="goods_name" @click="linkToGoods(item.goodsId, item.id)">{{ item.goodsName }}</a>
|
||||
<div style="margin-top: 8px;">
|
||||
<span style="color: red;">￥{{ item.price }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button class="store-button" type="danger" v-if="item.btnHide == 1" size="mini"
|
||||
@click="submitSendGoodsMessage(item)" plain>发送</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="订单列表" name="orders">
|
||||
<dl>
|
||||
<dd v-for="item in list" v-infinite-scroll="loadMore">
|
||||
<div class="base">
|
||||
<div>
|
||||
<img :src="item.thumbnail" class="image" />
|
||||
</div>
|
||||
<div style="margin-left: 13px">
|
||||
<a class="goods_name" @click="linkToGoods(item.goodsId, item.id)">{{ item.goodsName }}</a>
|
||||
<div style="margin-top: 10px;">
|
||||
<span style="color: red;">￥{{ item.price }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button class="store-button" type="danger" v-if="item.btnHide == 1" size="mini"
|
||||
@click="submitSendGoodsMessage(item)" plain>发送</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<dl>
|
||||
<dd v-for="item in list" v-infinite-scroll="loadMore">
|
||||
<div class="base" @click="linkToGoods(item.goodsId, item.id)">
|
||||
<div>
|
||||
<img :src="item.thumbnail" class="image" />
|
||||
</div>
|
||||
<div style="margin-left: 13px">
|
||||
<a>{{ item.goodsName }}</a>
|
||||
<div>
|
||||
<span style="color: red;">￥{{ item.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
export default {
|
||||
directives: {
|
||||
"infinite-scroll": InfiniteScroll,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: 'first'
|
||||
activeName: 'goods',
|
||||
btnHide: undefined,
|
||||
hide: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["talkItems"]),
|
||||
...mapState({
|
||||
id: (state) => state.user.id,
|
||||
|
||||
toUser: (state) => state.user.toUser,
|
||||
}),
|
||||
},
|
||||
components: {
|
||||
"el-tag": Tag,
|
||||
"el-button": button,
|
||||
|
|
@ -41,15 +81,37 @@ export default {
|
|||
"el-tab-pane": TabPane,
|
||||
},
|
||||
methods: {
|
||||
|
||||
scrollBottom (e) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.srcElement
|
||||
if (scrollTop + clientHeight >= scrollHeight) {
|
||||
if (this.noMore) return
|
||||
this.$emit('loadMore')
|
||||
}
|
||||
},
|
||||
loadMore () {
|
||||
|
||||
},
|
||||
// 发送消息回调事件
|
||||
submitSendGoodsMessage (item) {
|
||||
console.log("发送");
|
||||
const context = {
|
||||
id: item.id,
|
||||
goodsId: item.goodsId,
|
||||
thumbnail: item.thumbnail,
|
||||
price: item.price,
|
||||
goodsName: item.goodsName
|
||||
}
|
||||
const record = {
|
||||
operation_type: "MESSAGE",
|
||||
to: this.toUser.userId,
|
||||
from: this.id,
|
||||
message_type: "GOODS",
|
||||
context: context,
|
||||
talk_id: this.toUser.id,
|
||||
};
|
||||
this.$emit('sendMessage', record, context);
|
||||
localStorage.setItem(item.goodsId, 0)
|
||||
item.btnHide = 0
|
||||
},
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event);
|
||||
|
|
@ -63,12 +125,24 @@ export default {
|
|||
},
|
||||
mounted () {
|
||||
console.log(this.list, 'list');
|
||||
this.btnHide = localStorage.getItem('btnHide')
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.goods_name {
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item.is-top:last-child {
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -96,6 +170,7 @@ export default {
|
|||
.store-button {
|
||||
background-color: white;
|
||||
border-color: #F56C6C;
|
||||
|
||||
}
|
||||
|
||||
.base {
|
||||
|
|
@ -104,17 +179,18 @@ export default {
|
|||
display: flex;
|
||||
|
||||
div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 8px;
|
||||
white-space: nowrap;
|
||||
margin-top: 4px;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// margin-top: 8px;
|
||||
//
|
||||
// margin-top: 4px;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 100px;
|
||||
margin-top: 3px;
|
||||
width: 100px
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div style="width: 350px;">
|
||||
当前浏览
|
||||
<div class="base">
|
||||
<div>
|
||||
<img :src="goodsDetail.thumbnail" class="image" />
|
||||
|
|
@ -11,23 +10,21 @@
|
|||
<span style="color: red;">￥{{ goodsDetail.price }}</span>
|
||||
</div>
|
||||
<div v-if="hide">
|
||||
<el-button class="store-button" type="danger" v-if="!sendFlag && btnHide == 1" size="mini"
|
||||
@click="submitSendMessage()" plain>发送</el-button>
|
||||
<el-button class="store-button" type="danger" v-if="btnHide == 1" size="mini" @click="submitSendMessage()"
|
||||
plain>发送</el-button>
|
||||
</div>
|
||||
</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,
|
||||
btnHide: undefined,
|
||||
hide: true
|
||||
}
|
||||
|
|
@ -36,12 +33,12 @@ export default {
|
|||
...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')
|
||||
this.btnHide = localStorage.getItem(this.goodsDetail.goodsId)
|
||||
},
|
||||
components: {
|
||||
"el-tag": Tag,
|
||||
|
|
@ -59,7 +56,14 @@ export default {
|
|||
// 回车键发送消息回调事件
|
||||
submitSendMessage () {
|
||||
console.log("发送");
|
||||
const context = this.goodsDetail
|
||||
const context = {
|
||||
id: this.goodsDetail.id,
|
||||
goodsId: this.goodsDetail.goodsId,
|
||||
thumbnail: this.goodsDetail.thumbnail,
|
||||
price: this.goodsDetail.price,
|
||||
goodsName: this.goodsDetail.goodsName
|
||||
}
|
||||
|
||||
const record = {
|
||||
operation_type: "MESSAGE",
|
||||
to: this.toUser.userId,
|
||||
|
|
@ -68,74 +72,12 @@ export default {
|
|||
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,
|
||||
});
|
||||
}
|
||||
this.$emit('sendMessage', record, context);
|
||||
// 发送后隐藏按钮 0：隐藏 1：显示
|
||||
localStorage.setItem('btnHide', 0)
|
||||
localStorage.setItem(this.goodsDetail.goodsId, 0)
|
||||
this.hide = false
|
||||
},
|
||||
|
||||
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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue