滚动加载样式
程
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;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
<pre v-html="item.text" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.messageType == 'GOODS'" class="text-message" :class="{
|
||||
<div v-else-if="item.messageType == 'GOODS' && item.text != null" class="text-message" :class="{
|
||||
left: item.float == 'left',
|
||||
right: item.float == 'right',
|
||||
}">
|
||||
|
|
@ -869,6 +869,7 @@ export default {
|
|||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.base {
|
||||
margin-top: 5px;
|
||||
height: 120px;
|
||||
|
|
@ -889,6 +890,7 @@ export default {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.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>
|
||||
</div>
|
||||
<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" @click="linkToGoods(item.goodsId, item.id)">
|
||||
<div class="base">
|
||||
<div>
|
||||
<img :src="item.thumbnail" class="image" />
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 13px">
|
||||
<a>{{ item.goodsName }}</a>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
</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