|
|
@@ -6,7 +6,35 @@
|
|
|
<el-tabs v-model="active" type="card">
|
|
|
<el-tab-pane label="公共聊天" name="first">
|
|
|
<el-col :span="24" class="first">
|
|
|
- 公共聊天
|
|
|
+ <el-col :span="24" class="first_1">
|
|
|
+ <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="24" class="name">
|
|
|
+ <span>[{{ item.send_time }}]</span>
|
|
|
+ <span>{{ item.sender_name }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="content">
|
|
|
+ {{ item.content }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="first_2">
|
|
|
+ <el-col :span="14" class="text">
|
|
|
+ <el-input v-model="text"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="btn">
|
|
|
+ <el-col :span="10" class="btn_1">
|
|
|
+ <el-button type="primary" size="mini" @click="send">发送</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="14" class="btn_1">
|
|
|
+ <el-popover placement="top" trigger="click">
|
|
|
+ <el-col :span="24">
|
|
|
+ <p class="textList" v-for="(item, index) in textList" :key="index" @click="textBtn(item.name)">{{ item.name }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-button slot="reference" type="primary" size="mini">快捷发言</el-button>
|
|
|
+ </el-popover>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
@@ -18,6 +46,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+var moment = require('moment');
|
|
|
export default {
|
|
|
name: 'chatData',
|
|
|
props: {},
|
|
|
@@ -25,11 +54,44 @@ export default {
|
|
|
data: function() {
|
|
|
return {
|
|
|
active: 'first',
|
|
|
- list: [],
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ send_time: '2021-01-01 10:00:00',
|
|
|
+ sender_name: '发言人',
|
|
|
+ content: '发言内容发言内容发言内容发言内容发言内容',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 发言内容
|
|
|
+ text: '',
|
|
|
+ textList: [{ name: '欢迎欢迎' }, { name: '科技创新' }, { name: '大咖云集' }],
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ async send() {
|
|
|
+ let data = {
|
|
|
+ dock_id: this.dock_id,
|
|
|
+ content: this.text,
|
|
|
+ sender_id: this.user ? this.user.id : this.getData(),
|
|
|
+ sender_name: this.user ? this.user.name : this.getData() + '游客',
|
|
|
+ };
|
|
|
+ if (data.content != '') {
|
|
|
+ console.log(data);
|
|
|
+ // const res = await this.create(data);
|
|
|
+ // this.$checkRes(res, null, '发言成功' || '发言失败');
|
|
|
+ this.$set(this, 'text', '');
|
|
|
+ } else this.$message.error('请输入信息后发送');
|
|
|
+ },
|
|
|
+ textBtn(text) {
|
|
|
+ this.$set(this, `text`, text);
|
|
|
+ this.send();
|
|
|
+ },
|
|
|
+ // 获取时间戳
|
|
|
+ getData() {
|
|
|
+ let date = moment(new Date()).valueOf();
|
|
|
+ if (date) return date;
|
|
|
+ },
|
|
|
+ },
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
dock_id() {
|
|
|
@@ -53,13 +115,68 @@ export default {
|
|
|
.main {
|
|
|
.one {
|
|
|
.first {
|
|
|
- padding: 0 10px;
|
|
|
- height: 410px;
|
|
|
+ padding: 0 5px;
|
|
|
+ height: 460px;
|
|
|
overflow-y: auto;
|
|
|
+ .first_1 {
|
|
|
+ height: 410px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+ .list {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .name {
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ span:nth-child(1) {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0 0 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ padding: 10px 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .first_2 {
|
|
|
+ height: 40px;
|
|
|
+ box-shadow: 0 0 5px #ccc;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ .text {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ .btn_1 {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
/deep/.el-tabs__header {
|
|
|
margin: 0 0 10px 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.textList {
|
|
|
+ text-align: center;
|
|
|
+ padding: 5px 0;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+}
|
|
|
+.textList:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
</style>
|
