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 08:55:52 +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

17
im/src/components/chat/messaege/TextMessage.vue
View File

@@ -1,12 +1,9 @@
<template>
<div
class="text-message"
:class="{
left: float == 'left',
right: float == 'right',
'max-width': !fullWidth,
}"
>
<div class="text-message" :class="{
left: float == 'left',
right: float == 'right',
'max-width': !fullWidth,
}">
<div v-if="arrow" class="arrow"></div>
<pre v-html="html" />
</div>
@@ -35,12 +32,12 @@ export default {
default: false,
},
},
data() {
data () {
return {
html: "",
};
},
created() {
created () {
const text = textReplaceLink(
this.content,
this.float == "right" ? "#ffffff" : "rgb(9 149 208)"

133
im/src/components/chat/panel/OtherLink.vue
View File

@@ -1,7 +1,7 @@
<template>
<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">
<div style="margin-left: 12px;">
<GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId"
@sendMessage="submitSendMessage" />
<FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" :orderList="orderPrintList"
@@ -18,8 +18,7 @@
<script>
import { Tabs, TabPane } from 'element-ui'
import { ServeGetStoreDetail, ServeGetUserDetail, ServeGetFootPrint, ServeGetOrderPrint } from '@/api/user'
import { ServeGetGoodsDetail } from '@/api/goods'
import { ServeGetStoreDetail, ServeGetUserDetail, ServeGetFootPrint, ServeGetOrderPrint, ServeGetGoodsDetail, ServeStoreGetFootPrint,ServeStoreGetOrderPrint } from '@/api/user'
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";
@@ -53,6 +52,23 @@ export default {
index_name: (state) => state.dialogue.index_name,
}),
},
watch:{
toUser(){
localStorage.setItem('storeFlag', this.toUser.storeFlag)
this.footPrintList = []
this.orderPrintList = []
if (this.toUser.storeFlag) {
this.getStoreDetail()
}
// else {
// this.getMemberDetail()
// }
this.getFootPrint()
if (this.goodsParams && this.toUser.storeFlag == true) {
this.getGoodsDetail()
}
}
},
data () {
return {
activeName: 'history',
@@ -70,13 +86,15 @@ export default {
}
},
mounted () {
localStorage.setItem('storeFlag', this.toUser.storeFlag)
if (this.toUser.storeFlag) {
this.getStoreDetail()
} else {
this.getMemberDetail()
}
}
// else {
// this.getMemberDetail()
// }
this.getFootPrint()
if (this.goodsParams) {
if (this.goodsParams && this.toUser.storeFlag == true) {
this.getGoodsDetail()
}
},
@@ -94,53 +112,78 @@ export default {
this.getFootPrint()
},
handleClick () { },
getMemberDetail () {
ServeGetUserDetail(this.toUser.userId).then(res => {
if (res.success) {
this.memberInfo = res.result
}
})
},
// getMemberDetail () {
// ServeGetUserDetail(this.toUser.userId).then(res => {
// if (res.success) {
// this.memberInfo = res.result
// }
// })
// },
getGoodsDetail () {
ServeGetGoodsDetail(this.goodsParams).then(res => {
if (res.success) {
this.goodsDetail = res.result.data
}
})
if(this.toUser.storeFlag){
ServeGetGoodsDetail(this.goodsParams).then(res => {
if (res.success) {
this.goodsDetail = res.result.data
}
})
}
},
getFootPrint () {
getFootPrint() {
if (this.toUser.storeFlag) {
this.footPrintParams.memberId = this.id
this.footPrintParams.storeId = this.toUser.userId
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)
}
});
this.footPrintList.push(...res.result.records)
})
// 订单列表
ServeGetOrderPrint(this.footPrintParams).then((res) => {
if (res.code == 200) {
res.result.records.forEach((item) => {
this.orderPrintList.push({
...item,
btnHide: 1
})
})
}
})
} else {
this.footPrintParams.memberId = this.toUser.userId
this.footPrintParams.storeId = this.id
}
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)
}
});
this.footPrintList.push(...res.result.records)
})
// 订单列表
ServeGetOrderPrint(this.footPrintParams).then((res) => {
if (res.code == 200) {
res.result.records.forEach((item) => {
this.orderPrintList.push({
...item,
btnHide: 1
ServeStoreGetFootPrint(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)
}
});
this.footPrintList.push(...res.result.records)
})
ServeStoreGetOrderPrint(this.footPrintParams).then((res) => {
if (res.code == 200) {
res.result.records.forEach((item) => {
this.orderPrintList.push({
...item,
btnHide: 1
})
})
})
// this.orderPrintList.push(...res.result.records)
}
})
}
})
}
},
// 发送消息回调事件

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;

192
im/src/components/chat/panel/template/footPrint.vue
View File

@@ -7,37 +7,60 @@
<dd v-for="item in list" v-infinite-scroll="loadMore">
<div class="base">
<div>
<img :src="item.thumbnail" class="image" />
<img style="width: 60px; height: 60px;margin-left: 40px;box-sizing: border-box;" :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 class="recent_views">
<el-tooltip class="item" effect="dark" :content="item.goodsName" placement="top-start">
<a class="goods_name" @click="linkToGoods(item.goodsId, item.id)">{{ item.goodsName }}</a>
</el-tooltip>
<div style="display: flex;">
<div style="margin-top: 20px;">
<span style="color: red;">￥{{ item.price }}</span>
<div class="goods_store_button">
<el-button type="danger" v-if="item.btnHide == 1 && toUser.storeFlag" size="mini"
@click="submitSendGoodsMessage(item)" plain>发送</el-button>
</div>
</div>
</div>
</div>
</div>
<div class="Underline"></div>
</dd>
</dl>
</el-tab-pane>
<el-tab-pane label="订单列表" name="orders">
<dl>
<dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
<div style="margin-bottom: 20px;">
<span class="orderSn">订单号：{{ item.sn }}</span>
<img :src="item.groupImages" alt=""
style="height: 100px; width: 100px;margin-top: 10px; vertical-align: middle; ">
<span class="orderGoodsName" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span>
<span style="margin-left: 10px; color: red;">{{ item.paymentTime }}</span>
<div class="orderBtn">
<el-button type="danger" class="store-button" v-if="item.btnHide == 1" size="mini"
@click="submitSendOrderMessage(item, index)" plain>发送</el-button>
<div class="orderlist">
<div class="order_top">
<span class="order_sn">订单号:{{ item.sn }}</span>
</div>
<div class="order_section">
<img :src="item.groupImages" alt="">
<el-tooltip class="item" effect="dark" :content="item.groupName" placement="top-start">
<span class="orderGoodsName" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span>
</el-tooltip>
<div class="orderBtn">
<el-button type="danger" class="store-button" v-if="item.btnHide == 1 && toUser.storeFlag"
size="mini" @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
</div>
</div>
<div class="order_footer">
<span> 订单金额： <span style="color: red;">￥{{ item.orderItems[0].goodsPrice }}</span></span>
<span class="order_status" v-if="item.orderStatus"
:style="{ 'color': item.orderStatus == 'CANCELLED' || item.orderStatus == 'UNPAID' || item.orderStatus == 'TAKE' ? '#5a606b' : '#f23030' }">{{
item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus ==
'PAID' ? '已付款' : item.orderStatus == 'UNDELIVERED' ? '待发货' : item.orderStatus == 'DELIVERED'
? '已发货' : item.orderStatus == 'COMPLETED' ? '已完成' : item.orderStatus == 'TAKE' ? '待校验' : ''
}}</span>
</div>
</div>
</div>
<div class="Underline"></div>
</dd>
</dl>
</el-tab-pane>
@@ -53,7 +76,7 @@ export default {
directives: {
"infinite-scroll": InfiniteScroll,
},
data () {
data() {
return {
activeName: 'goods',
btnHide: undefined,
@@ -64,7 +87,6 @@ export default {
...mapGetters(["talkItems"]),
...mapState({
id: (state) => state.user.id,
toUser: (state) => state.user.toUser,
}),
},
@@ -77,17 +99,17 @@ export default {
methods: {
//跳转订单列表
scrollBottom (e) {
scrollBottom(e) {
const { scrollTop, scrollHeight, clientHeight } = e.srcElement
if (scrollTop + clientHeight >= scrollHeight) {
this.$emit('loadMore')
}
},
loadMore () {
loadMore() {
},
// 发送消息回调事件
submitSendGoodsMessage (item) {
submitSendGoodsMessage(item) {
const context = {
id: item.id,
goodsId: item.goodsId,
@@ -108,12 +130,15 @@ export default {
item.btnHide = 0
},
// 发送订单列表
submitSendOrderMessage (item, index) {
submitSendOrderMessage(item, index) {
console.log(item, 'item');
const context = {
sn: item.sn,
groupImages: item.groupImages,
paymentTime: item.paymentTime,
groupName: item.groupName,
flowPrice: item.flowPrice,
orderStatus: item.orderStatus
}
const record = {
operation_type: "MESSAGE",
@@ -127,7 +152,7 @@ export default {
localStorage.setItem(item.goodsId, 0)
item.btnHide = 0
},
handleClick (tab, event) {
handleClick(tab, event) {
console.log(tab, event);
}
},
@@ -139,10 +164,11 @@ export default {
orderList: {
type: Array,
default: []
}
},
},
mounted () {
console.log(this.orderList, 'orderList');
mounted() {
// state.user.toUser
console.log(this.orderList, ' this.$store.state.user.toUser this.$store.state.user.toUser this.$store.state.user.toUser');
this.btnHide = localStorage.getItem('btnHide')
}
}
@@ -150,6 +176,94 @@ export default {
</script>
<style scoped lang="less">
.order_status {
height: 25px;
width: 60px;
background: #ffeded;
margin-right: 20px;
text-align: center;
line-height: 25px;
}
.Underline {
border: 1px solid silver;
width: 90%;
margin: 0 auto;
}
.recent_views {
margin-left: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 260px;
}
.box {
width: 400px;
.top {
text-align: center;
}
.left {
float: left;
width: 60px;
}
.right {
float: right;
width: 60px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
}
.Underline {
// border: 5px solid red;
}
.orderlist {
margin-bottom: 10px;
background: #fff;
color: #5a606b;
}
.order_top {
border-bottom: 1px solid #f2f2f2;
.order_sn {}
}
.order_section {
border-bottom: 1px solid #f2f2f2;
height: 100px;
img {
width: 80px;
height: 80px;
margin-top: 20px;
}
}
.order_footer {
border-bottom: 1px solid #f2f2f2;
display: flex;
justify-content: space-between;
}
.orderGoodsName {
width: 200px;
overflow: hidden;
@@ -158,6 +272,7 @@ export default {
position: absolute;
margin-left: 10px;
margin-top: 10px;
font-weight: 500;
}
.orderSn {
@@ -171,18 +286,13 @@ export default {
justify-content: flex-end;
margin-right: 15px;
position: relative;
bottom: 30px;
bottom: 55px;
}
.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;
white-space: nowrap
}
/deep/ .el-tabs__item.is-top:last-child {
@@ -215,9 +325,17 @@ export default {
margin-top: 10px;
}
.goods_store_button {
display: inline;
background-color: white;
border-color: #F56C6C;
position: absolute;
left: 70%;
}
.base {
margin-top: 5px;
height: 120px;
height: 80px;
display: flex;
.price {

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

@@ -11,7 +11,7 @@
<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"
<el-button class="store-button" type="danger" v-if="btnHide == 1 && toUser.storeFlag" size="mini"
@click="submitSendMessage()" plain>发送</el-button>
</div>
</div>
@@ -27,7 +27,6 @@ import SocketInstance from "@/im-server/socket-instance";
export default {
data () {
return {
sendFlag: false,
btnHide: undefined,
hide: true
}
@@ -169,7 +168,7 @@ export default {
.image {
height: 100px;
margin-top: 3px;
width: 100px
width: 100px;
}
}

38
im/src/components/chat/panel/template/storeDetail.vue
View File

@@ -6,11 +6,11 @@
</div>
<div style="margin-left: 13px">
<div class="div-zoom">
{{ storeInfo.storeName }}
<el-tag type="danger" v-if="storeInfo.selfOperated" size="mini">自营</el-tag>
<span class="title_left_name"> 店铺名称：</span> <span class="title_right_name">{{ storeInfo.storeName }}</span>
<el-tag style="margin-left: 10px;" type="danger" v-if="storeInfo.selfOperated" size="mini">自营</el-tag>
</div>
<div>
联系方式: {{ storeInfo.memberName }}
<span class="title_left_name"> 联系方式:</span> <span class="title_right_name">{{ storeInfo.memberName }}</span>
</div>
<div>
<el-button class="store-button" type="danger" @click="linkToStore(storeInfo.id)" size="mini"
@@ -19,22 +19,32 @@
</div>
</div>
<hr class="separate" />
<div class="separate">店铺评分: <span>{{ storeInfo.serviceScore }}</span></div>
<div class="separate">服务评分: <span>{{ storeInfo.descriptionScore }}</span></div>
<div class="separate">物流评分: <span>{{ storeInfo.deliveryScore }}</span></div>
<div class="separate">店铺评分: <el-rate v-model="storeInfo.serviceScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
<div class="separate">服务评分: <el-rate v-model="storeInfo.descriptionScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
<div class="separate">物流评分: <el-rate v-model="storeInfo.deliveryScore" disabled show-score text-color="#ff9900"
score-template="{value}">
</el-rate></div>
</div>
</template>
<script>
import { Tag, button } from 'element-ui'
import { Tag, button, rate } from 'element-ui'
export default {
data () {
return {
value: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900']
}
},
components: {
"el-tag": Tag,
"el-button": button,
"el-rate": rate
},
methods: {
},
@@ -49,6 +59,16 @@ export default {
</script>
<style scoped lang="less">
.title_left_name {
font-size: 12px;
color: #a1a6af;
}
.title_right_name {
font-size: 12px;
color: #343036;
}
.store-button {
background-color: white;
border-color: #F56C6C;
@@ -73,5 +93,9 @@ export default {
.separate {
margin-top: 8px;
// display: inline;
display: flex;
font-size: 12px;
color: #a1a6af;
}
</style>

141
im/src/components/editor/MeEditor.vue
View File

@@ -33,99 +33,66 @@
<p class="tip-title">发起投票</p>
</li> -->
<!-- <p class="text-tips no-select">-->
<!-- <span>按Enter发送 / Shift+Enter 换行</span>-->
<!-- <el-popover placement="top-end" width="600" trigger="click">-->
<!-- <div class="editor-books">-->
<!-- <div class="books-title">编辑说明:</div>-->
<!-- <p>-->
<!-- 1.-->
<!-- 支持上传QQ及微信截图，在QQ或微信中截图后使用Ctrl+v上传图片。-->
<!-- </p>-->
<!-- <p>-->
<!-- 2.-->
<!-- 支持浏览器及Word文档中的图片复制上传、复制后使用Ctrl+v上传图片。-->
<!-- </p>-->
<!-- <p>3. 支持图片拖拽上传。</p>-->
<!-- <p>4. 支持文件上传 ( 文件小于100M ) 。</p>-->
<!-- <p>5. 按Enter发送 / Shift+Enter 换行。</p>-->
<!-- <p>-->
<!-- 6.-->
<!-- 注意：当文件正在上传时，请勿关闭网页或离开当前对话框，否则将导致文件停止上传或上传失败。-->
<!-- </p>-->
<!-- </div>-->
<!-- <i class="el-icon-info" slot="reference" />-->
<!-- </el-popover>-->
<!-- </p>-->
<!-- <p class="text-tips no-select">-->
<!-- <span>按Enter发送 / Shift+Enter 换行</span>-->
<!-- <el-popover placement="top-end" width="600" trigger="click">-->
<!-- <div class="editor-books">-->
<!-- <div class="books-title">编辑说明:</div>-->
<!-- <p>-->
<!-- 1.-->
<!-- 支持上传QQ及微信截图，在QQ或微信中截图后使用Ctrl+v上传图片。-->
<!-- </p>-->
<!-- <p>-->
<!-- 2.-->
<!-- 支持浏览器及Word文档中的图片复制上传、复制后使用Ctrl+v上传图片。-->
<!-- </p>-->
<!-- <p>3. 支持图片拖拽上传。</p>-->
<!-- <p>4. 支持文件上传 ( 文件小于100M ) 。</p>-->
<!-- <p>5. 按Enter发送 / Shift+Enter 换行。</p>-->
<!-- <p>-->
<!-- 6.-->
<!-- 注意：当文件正在上传时，请勿关闭网页或离开当前对话框，否则将导致文件停止上传或上传失败。-->
<!-- </p>-->
<!-- </div>-->
<!-- <i class="el-icon-info" slot="reference" />-->
<!-- </el-popover>-->
<!-- </p>-->
</ul>
<el-popover
ref="popoverEmoticon"
placement="top-start"
trigger="click"
width="300"
popper-class="no-padding el-popover-em"
>
<el-popover ref="popoverEmoticon" placement="top-start" trigger="click" width="300"
popper-class="no-padding el-popover-em">
<MeEditorEmoticon ref="editorEmoticon" @selected="selecteEmoticon" />
</el-popover>
<form
enctype="multipart/form-data"
style="display: none"
ref="fileFrom"
>
<input
type="file"
ref="restFile"
accept="image/*"
@change="uploadImageChange"
/>
<form enctype="multipart/form-data" style="display: none" ref="fileFrom">
<input type="file" ref="restFile" accept="image/*" @change="uploadImageChange" />
<input type="file" ref="restFile2" @change="uploadFileChange" />
</form>
</el-header>
<el-main class="no-padding textarea">
<textarea
ref="textarea"
v-paste="pasteImage"
v-drag="dragPasteImage"
v-model.trim="editorText"
rows="6"
placeholder="你想要的聊点什么呢 ..."
@keydown="keydownEvent($event)"
@input="inputEvent($event)"
/>
<textarea ref="textarea" v-paste="pasteImage" v-drag="dragPasteImage" v-model.trim="editorText" rows="6"
placeholder="你想要的聊点什么呢 ..." @keydown="keydownEvent($event)" @input="inputEvent($event)" />
</el-main>
</el-container>
<!-- 图片查看器 -->
<MeEditorImageView
ref="imageViewer"
v-model="imageViewer.isShow"
:file="imageViewer.file"
@confirm="confirmUploadImage"
/>
<MeEditorImageView ref="imageViewer" v-model="imageViewer.isShow" :file="imageViewer.file"
@confirm="confirmUploadImage" />
<MeEditorRecorder v-if="recorder" @close="recorder = false" />
<!-- 代码块编辑器 -->
<TalkCodeBlock
v-if="codeBlock.isShow"
:edit-mode="codeBlock.editMode"
@close="codeBlock.isShow = false"
@confirm="confirmCodeBlock"
/>
<TalkCodeBlock v-if="codeBlock.isShow" :edit-mode="codeBlock.editMode" @close="codeBlock.isShow = false"
@confirm="confirmCodeBlock" />
<!-- 文件上传管理器 -->
<MeEditorFileManage ref="filesManager" v-model="filesManager.isShow" />
<MeEditorVote
v-if="vote.isShow"
@close="
() => {
this.vote.isShow = false;
}
"
/>
<MeEditorVote v-if="vote.isShow" @close="
() => {
this.vote.isShow = false;
}
" />
</div>
</template>
@@ -156,20 +123,20 @@ export default {
MeEditorVote,
},
computed: {
talkUser() {
talkUser () {
return this.$store.state.dialogue.index_name;
},
isGroupTalk() {
isGroupTalk () {
return this.$store.state.dialogue.talk_type == 2;
},
},
watch: {
talkUser(n_index_name) {
talkUser (n_index_name) {
this.$refs.filesManager.clear();
this.editorText = this.getDraftText(n_index_name);
},
},
data() {
data () {
return {
// 当前编辑的内容
editorText: "",
@@ -205,13 +172,13 @@ export default {
},
methods: {
// 读取对话编辑草稿信息 并赋值给当前富文本
getDraftText(index_name) {
getDraftText (index_name) {
console.log("findTalk(index_name)", findTalk(index_name));
return findTalk(index_name)?.draft_text || "";
},
//复制粘贴图片回调方法
pasteImage(e) {
pasteImage (e) {
let files = getPasteImgs(e);
if (files.length == 0) return;
@@ -219,19 +186,19 @@ export default {
},
//拖拽上传图片回调方法
dragPasteImage(e) {
dragPasteImage (e) {
let files = getDragPasteImg(e);
if (files.length == 0) return;
this.openImageViewer(files[0]);
},
inputEvent(e) {
inputEvent (e) {
this.$emit("keyboard-event", e.target.value);
},
// 键盘按下监听事件
keydownEvent(e) {
keydownEvent (e) {
if (e.keyCode == 13 && this.editorText == "") {
e.preventDefault();
}
@@ -256,13 +223,13 @@ export default {
},
// 选择图片文件后回调方法
uploadImageChange(e) {
uploadImageChange (e) {
this.openImageViewer(e.target.files[0]);
this.$refs.restFile.value = null;
},
// 选择文件回调事件
uploadFileChange(e) {
uploadFileChange (e) {
let maxsize = 100 * 1024 * 1024;
if (e.target.files.length == 0) {
return false;
@@ -288,13 +255,13 @@ export default {
},
// 打开图片查看器
openImageViewer(file) {
openImageViewer (file) {
this.imageViewer.isShow = true;
this.imageViewer.file = file;
},
// 代码块编辑器确认完成回调事件
confirmCodeBlock(data) {
confirmCodeBlock (data) {
const { talk_type, receiver_id } = this.$store.state.dialogue;
ServeSendTalkCodeBlock({
talk_type,
@@ -315,7 +282,7 @@ export default {
},
// 确认上传图片消息回调事件
confirmUploadImage() {
confirmUploadImage () {
let fileData = new FormData();
fileData.append("file", this.imageViewer.file);
@@ -340,7 +307,7 @@ export default {
},
// 选中表情包回调事件
selecteEmoticon(data) {
selecteEmoticon (data) {
if (data.type == 1) {
let value = this.editorText;
let el = this.$refs.textarea;

5
im/src/components/layout/WelcomeModule.vue
View File

@@ -2,7 +2,6 @@
<div class="welcome-box">
<div class="famous-box">
<img src="~@/assets/image/chat.png" width="300" />
</div>
</div>
</template>
@@ -10,10 +9,10 @@
<script>
export default {
components: {},
data() {
data () {
return {}
},
created() {},
created () { },
methods: {},
}
</script>