|
|
@ -4,8 +4,8 @@
|
|
|
|
<div class="body">
|
|
|
|
<div class="body">
|
|
|
|
<div class="aside">
|
|
|
|
<div class="aside">
|
|
|
|
<div class="aside-header">近期会话</div>
|
|
|
|
<div class="aside-header">近期会话</div>
|
|
|
|
<ul class="session-list">
|
|
|
|
<el-scrollbar class="session-list">
|
|
|
|
<li v-for="(item, index) in sessionList" :key="index" class="session-item">
|
|
|
|
<div v-for="(item, index) in sessionList" :key="index" class="session-item">
|
|
|
|
<el-badge class="session-count" :hidden="item.count === 0" :max="99" :value="item.count">
|
|
|
|
<el-badge class="session-count" :hidden="item.count === 0" :max="99" :value="item.count">
|
|
|
|
<el-avatar circle :src="item.avatar" />
|
|
|
|
<el-avatar circle :src="item.avatar" />
|
|
|
|
</el-badge>
|
|
|
|
</el-badge>
|
|
|
@ -18,8 +18,8 @@
|
|
|
|
<div class="session-content">{{ item.content }}</div>
|
|
|
|
<div class="session-content">{{ item.content }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</div>
|
|
|
|
</ul>
|
|
|
|
</el-scrollbar>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-header">
|
|
|
|
<div class="content-header">
|
|
|
@ -29,10 +29,13 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content-header-right">
|
|
|
|
<div class="content-header-right">
|
|
|
|
|
|
|
|
<el-button>个人订单</el-button>
|
|
|
|
<el-button>转移会话</el-button>
|
|
|
|
<el-button>转移会话</el-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="message-list"></div>
|
|
|
|
<el-scrollbar class="message-list">
|
|
|
|
|
|
|
|
<MessageItem v-for="(item, index) in sessionMessageList" :key="index" :message="item" />
|
|
|
|
|
|
|
|
</el-scrollbar>
|
|
|
|
<div class="operation-bar">
|
|
|
|
<div class="operation-bar">
|
|
|
|
<el-button type="text">
|
|
|
|
<el-button type="text">
|
|
|
|
<el-icon name="chat-smile-3-fill" size="24" />
|
|
|
|
<el-icon name="chat-smile-3-fill" size="24" />
|
|
|
@ -56,6 +59,7 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
import MessageItem from './message.vue';
|
|
|
|
const sessionList = reactive([
|
|
|
|
const sessionList = reactive([
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: '小可爱',
|
|
|
|
name: '小可爱',
|
|
|
@ -86,18 +90,96 @@
|
|
|
|
const currentSession = computed(() => {
|
|
|
|
const currentSession = computed(() => {
|
|
|
|
return sessionList[state.currentIndex];
|
|
|
|
return sessionList[state.currentIndex];
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
const sessionMessageList = reactive([
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: 'text',
|
|
|
|
|
|
|
|
content: '你好,请问这个能有优惠吗?',
|
|
|
|
|
|
|
|
time: '2019-12-12',
|
|
|
|
|
|
|
|
from: 'customer',
|
|
|
|
|
|
|
|
avatar: 'https://placem.at/people',
|
|
|
|
|
|
|
|
name: '小可爱',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: 'notify',
|
|
|
|
|
|
|
|
content: '小马 将该会话转移给 小艾,并留言:发货问题',
|
|
|
|
|
|
|
|
time: '2019-12-12',
|
|
|
|
|
|
|
|
from: 'system',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: 'text',
|
|
|
|
|
|
|
|
content: '没有',
|
|
|
|
|
|
|
|
time: '2019-12-12',
|
|
|
|
|
|
|
|
from: 'employee',
|
|
|
|
|
|
|
|
avatar: 'https://placem.at/people',
|
|
|
|
|
|
|
|
name: '小爱',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: 'product',
|
|
|
|
|
|
|
|
content: `{
|
|
|
|
|
|
|
|
"id": 18,
|
|
|
|
|
|
|
|
"name": "柏战K20青轴机械键盘 混光机械键盘青轴电竞网吧游戏键盘电脑键盘",
|
|
|
|
|
|
|
|
"categoryId": 51,
|
|
|
|
|
|
|
|
"startingPrice": 79.0,
|
|
|
|
|
|
|
|
"totalStock": 1200,
|
|
|
|
|
|
|
|
"mainPicture": "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/mall-product/productO1CN011nFEoP1DrheUNhNgU_!!3435280270-0-cib.jpg",
|
|
|
|
|
|
|
|
"remoteAreaPostage": 10.0,
|
|
|
|
|
|
|
|
"singleBuyLimit": 0,
|
|
|
|
|
|
|
|
"isEnable": true,
|
|
|
|
|
|
|
|
"remark": "柏战K20青轴机械键盘 混光机械键盘青轴电竞网吧游戏键盘电脑键盘"
|
|
|
|
|
|
|
|
}`,
|
|
|
|
|
|
|
|
time: '2019-12-12',
|
|
|
|
|
|
|
|
from: 'customer',
|
|
|
|
|
|
|
|
avatar: 'https://placem.at/people',
|
|
|
|
|
|
|
|
name: '小可爱',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: 'order',
|
|
|
|
|
|
|
|
content: `{
|
|
|
|
|
|
|
|
"orderId": 392016,
|
|
|
|
|
|
|
|
"orderNo": "6391f99d063e",
|
|
|
|
|
|
|
|
"userId": 513,
|
|
|
|
|
|
|
|
"userPhone": "17683712911",
|
|
|
|
|
|
|
|
"payAmount": 859.0,
|
|
|
|
|
|
|
|
"orderStatus": 2,
|
|
|
|
|
|
|
|
"orderStatusDesc": "已关闭",
|
|
|
|
|
|
|
|
"payType": 1,
|
|
|
|
|
|
|
|
"payTypeDesc": "未支付",
|
|
|
|
|
|
|
|
"orderSource": 2,
|
|
|
|
|
|
|
|
"orderSourceDesc": "安卓端APP",
|
|
|
|
|
|
|
|
"submitTime": "2022-05-10 20:36:59",
|
|
|
|
|
|
|
|
"product": {
|
|
|
|
|
|
|
|
"id": 18,
|
|
|
|
|
|
|
|
"name": "柏战K20青轴机械键盘 混光机械键盘青轴电竞网吧游戏键盘电脑键盘",
|
|
|
|
|
|
|
|
"categoryId": 51,
|
|
|
|
|
|
|
|
"startingPrice": 79.0,
|
|
|
|
|
|
|
|
"totalStock": 1200,
|
|
|
|
|
|
|
|
"mainPicture": "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/mall-product/productO1CN011nFEoP1DrheUNhNgU_!!3435280270-0-cib.jpg",
|
|
|
|
|
|
|
|
"remoteAreaPostage": 10.0,
|
|
|
|
|
|
|
|
"singleBuyLimit": 0,
|
|
|
|
|
|
|
|
"isEnable": true,
|
|
|
|
|
|
|
|
"remark": "柏战K20青轴机械键盘 混光机械键盘青轴电竞网吧游戏键盘电脑键盘"
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}`,
|
|
|
|
|
|
|
|
time: '2019-12-12',
|
|
|
|
|
|
|
|
from: 'customer',
|
|
|
|
|
|
|
|
avatar: 'https://placem.at/people',
|
|
|
|
|
|
|
|
name: '小可爱',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]);
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.chat-container {
|
|
|
|
.chat-container {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
.header {
|
|
|
|
.header {
|
|
|
|
padding: @layout-space 0;
|
|
|
|
padding: @layout-space 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.body {
|
|
|
|
.body {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
border: 1px solid #eee;
|
|
|
|
border: 1px solid #eee;
|
|
|
|
.aside {
|
|
|
|
.aside {
|
|
|
@ -190,6 +272,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.message-list {
|
|
|
|
.message-list {
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
background-color: #f1f1f1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.operation-bar {
|
|
|
|
.operation-bar {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|