|
@@ -3,7 +3,46 @@
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
|
|
|
<div class="w_1200">
|
|
|
- <el-col :span="24" class="one" @click="toChat">聊天记录</el-col>
|
|
|
+ <el-container>
|
|
|
+ <el-aside width="400px" class="aside">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-col :span="24" class="one_1">
|
|
|
+ <el-col :span="4" class="left">
|
|
|
+ <el-image class="image" :src="kf" fit="fill" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="right">
|
|
|
+ {{ user.nick_name || '游客' }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one_2">
|
|
|
+ <a-input placeholder="查找联系人">
|
|
|
+ <template #prefix><SearchOutlined /></template>
|
|
|
+ </a-input>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <el-col
|
|
|
+ :span="24"
|
|
|
+ class="list"
|
|
|
+ v-for="(item, index) in chatList"
|
|
|
+ :key="index"
|
|
|
+ @click="toView(item)"
|
|
|
+ >
|
|
|
+ <div class="line" v-if="item._id == _id"></div>
|
|
|
+ <el-col :span="4" class="left">
|
|
|
+ <el-image class="image" :src="item.url" fit="fill" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="right">
|
|
|
+ <el-col :span="24" class="right_1">{{ item.name }}</el-col>
|
|
|
+ <el-col :span="24" class="right_2">{{ item.content }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-aside>
|
|
|
+ <el-main style="background: #eee">
|
|
|
+ <Chat></Chat>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -31,6 +70,8 @@
|
|
|
// 基础
|
|
|
import { get } from 'lodash-es'
|
|
|
const $checkRes = inject('$checkRes')
|
|
|
+import Chat from './parts/chat.vue'
|
|
|
+import { SearchOutlined } from '@ant-design/icons-vue'
|
|
|
// 接口
|
|
|
import { DemandStore } from '@/store/api/platform/demand'
|
|
|
import { DictDataStore } from '@/store/api/system/dictData'
|
|
@@ -47,6 +88,23 @@ const route = useRoute()
|
|
|
const loading = ref(false)
|
|
|
// 是否弹框客服
|
|
|
const dialog = ref(false)
|
|
|
+const _id = ref('')
|
|
|
+const chatList = ref([
|
|
|
+ { _id: '1', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '2', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '3', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '4', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '5', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '6', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '7', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '8', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '9', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '10', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' }
|
|
|
+])
|
|
|
+const list = ref([
|
|
|
+ { _id: '1', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' },
|
|
|
+ { _id: '2', url: kf, name: '新浪微博', content: '内容', type: '0', time: '2024-03-30' }
|
|
|
+])
|
|
|
// 请求
|
|
|
onMounted(async () => {
|
|
|
loading.value = true
|
|
@@ -62,12 +120,99 @@ const search = async () => {
|
|
|
}
|
|
|
}
|
|
|
const searchOther = async () => {}
|
|
|
-const toChat = async () => {
|
|
|
- dialog.value = true
|
|
|
+const toView = async (item) => {
|
|
|
+ _id.value = item._id
|
|
|
}
|
|
|
+// provide
|
|
|
+provide('_id', _id)
|
|
|
+provide('list', list)
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.main {
|
|
|
+ margin: 10px 0;
|
|
|
+ .aside {
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
+ background: #33353a;
|
|
|
+ .one {
|
|
|
+ .one_1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #292b2e;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ image {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ margin: 0 0 0 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one_2 {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #404247;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ :deep(.ant-input-affix-wrapper) {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #ccc !important;
|
|
|
+ }
|
|
|
+ :deep(.ant-input) {
|
|
|
+ height: 32px;
|
|
|
+ position: relative;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ caret-color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 6px 0;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ &::placeholder {
|
|
|
+ color: #ccc !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 57vh;
|
|
|
+ .list {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #2c2e31;
|
|
|
+ .right {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 5px 0 0 10px;
|
|
|
+ .right_1 {
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .right_2 {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ position: absolute;
|
|
|
+ background: #ff8f2c;
|
|
|
+ width: 2px;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 85px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list:hover {
|
|
|
+ background-color: #3a3c42;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
:deep(.el-dialog__body) {
|
|
|
padding: 0 !important;
|