|
@@ -0,0 +1,258 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="trainchat">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="24" class="style">
|
|
|
|
+ <el-col :span="24" class="list" v-for="(i, index) in list" :key="index">
|
|
|
|
+ <span v-if="!isEmotion(i.content)">
|
|
|
|
+ <el-col :span="24" class="one">
|
|
|
|
+ [<span>{{ i.send_time | getTime }}</span
|
|
|
|
+ >]
|
|
|
|
+ <span>{{ i.sender_name }}</span>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24" class="two">
|
|
|
|
+ <span> {{ i.content }}</span>
|
|
|
|
+ </el-col>
|
|
|
|
+ </span>
|
|
|
|
+ <span v-else>
|
|
|
|
+ <el-col :span="24" class="thr">
|
|
|
|
+ <span class="textOver">{{ i.sender_name }}</span>
|
|
|
|
+ <span>送出一朵/个</span>
|
|
|
|
+ <span v-html="i.content"></span>
|
|
|
|
+ </el-col>
|
|
|
|
+ </span>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-col :span="24" class="sendtxt">
|
|
|
|
+ <van-button icon="chat" type="info" round @click="show = true" />
|
|
|
|
+ </el-col>
|
|
|
|
+ <van-popup v-model="show" position="bottom" class="popup">
|
|
|
|
+ <van-col span="24" class="one">
|
|
|
|
+ <p>快捷发言</p>
|
|
|
|
+ <p>
|
|
|
|
+ <span v-for="(i, index) in kjfyList" :key="index" @click="changekjfy(i.name)">{{ i.name }}</span>
|
|
|
|
+ </p>
|
|
|
|
+ </van-col>
|
|
|
|
+ <van-col span="24" class="two">
|
|
|
|
+ <van-col span="19">
|
|
|
|
+ <van-field v-model="text" placeholder="请输入内容" />
|
|
|
|
+ </van-col>
|
|
|
|
+ <van-col span="5" style="text-align:center;">
|
|
|
|
+ <van-button round type="info" @click="send()">发言</van-button>
|
|
|
|
+ </van-col>
|
|
|
|
+ </van-col>
|
|
|
|
+ </van-popup>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
|
+const { mapActions: trainchat } = createNamespacedHelpers('trainchat');
|
|
|
|
+var moment = require('moment');
|
|
|
|
+import _ from 'lodash';
|
|
|
|
+export default {
|
|
|
|
+ metaInfo() {
|
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
|
+ },
|
|
|
|
+ name: 'trainchat',
|
|
|
|
+ props: {},
|
|
|
|
+ components: {},
|
|
|
|
+ data: function() {
|
|
|
|
+ return {
|
|
|
|
+ list: [],
|
|
|
|
+ // 发言
|
|
|
|
+ show: false,
|
|
|
|
+ text: '',
|
|
|
|
+ // 快捷发言列表
|
|
|
|
+ kjfyList: [{ name: '欢迎欢迎' }, { name: '科技创新' }, { name: '大咖云集' }],
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ async created() {
|
|
|
|
+ this.search();
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.channel();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ ...trainchat(['query', 'create']),
|
|
|
|
+ async search() {
|
|
|
|
+ const res = await this.query({ skip: 0, unit_id: this.id });
|
|
|
|
+ if (this.$checkRes(res)) this.$set(this, `list`, res.data);
|
|
|
|
+ },
|
|
|
|
+ isEmotion(word) {
|
|
|
|
+ return word.startsWith('<img');
|
|
|
|
+ },
|
|
|
|
+ channel() {
|
|
|
|
+ this.$stomp({
|
|
|
|
+ [`/exchange/train_live/${this.id}`]: this.onMessage,
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ onMessage(message) {
|
|
|
|
+ console.log(message);
|
|
|
|
+ let body = _.get(message, 'body');
|
|
|
|
+ if (body) {
|
|
|
|
+ body = JSON.parse(body);
|
|
|
|
+ this.list.push(body);
|
|
|
|
+ this.text = '';
|
|
|
|
+ }
|
|
|
|
+ this.search();
|
|
|
|
+ },
|
|
|
|
+ // 发言
|
|
|
|
+ async send() {
|
|
|
|
+ if (this.text != '') {
|
|
|
|
+ let object = { sender_name: this.user.user_title, content: this.text, unit_id: this.id };
|
|
|
|
+ if (this.user._id) {
|
|
|
|
+ object.sender_id = this.user._id;
|
|
|
|
+ }
|
|
|
|
+ let res = await this.create(object);
|
|
|
|
+ this.text = '';
|
|
|
|
+ this.show = false;
|
|
|
|
+ this.$checkRes(res, null, res.errmsg || '发言失败');
|
|
|
|
+ } else this.$message.error('请输入信息后发送');
|
|
|
|
+ },
|
|
|
|
+ // 选择快捷发言
|
|
|
|
+ changekjfy(data) {
|
|
|
|
+ this.$set(this, `text`, data);
|
|
|
|
+ this.send();
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ filters: {
|
|
|
|
+ getTime(date) {
|
|
|
|
+ if (!date) return '很久以前';
|
|
|
|
+ let today = moment().format('YYYY-MM-DD');
|
|
|
|
+ let dd = moment(date).format('YYYY-MM-DD');
|
|
|
|
+ let time;
|
|
|
|
+ if (today == dd) time = moment(date).format('HH:mm');
|
|
|
|
+ else time = moment(date).format('YYYY-MM-DD');
|
|
|
|
+ return time;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ // ...mapState(['user']),
|
|
|
|
+ user() {
|
|
|
|
+ let user = localStorage.getItem('user');
|
|
|
|
+ if (user) user = JSON.parse(user);
|
|
|
|
+ return user;
|
|
|
|
+ },
|
|
|
|
+ id() {
|
|
|
|
+ return this.$route.query.id;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ watch: {},
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.style {
|
|
|
|
+ // min-height: 365px;
|
|
|
|
+ // max-height: 365px;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ .list {
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ .one {
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ span:nth-child(1) {
|
|
|
|
+ color: #ff0000;
|
|
|
|
+ }
|
|
|
|
+ span:nth-child(2) {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #999;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .two {
|
|
|
|
+ min-height: 30px;
|
|
|
|
+ span {
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ background: #f1f1f1;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ min-width: 30%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .thr {
|
|
|
|
+ text-align: center;
|
|
|
|
+ background: #f1f1f1;
|
|
|
|
+ border-radius: 25px;
|
|
|
|
+ width: 80%;
|
|
|
|
+ margin: 0 10%;
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ span:nth-child(1) {
|
|
|
|
+ color: #db7093;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: -3px;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 45%;
|
|
|
|
+ }
|
|
|
|
+ span:nth-child(2) {
|
|
|
|
+ color: #000000;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: -7px;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ }
|
|
|
|
+ span:nth-child(3) {
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 2px;
|
|
|
|
+ left: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+// 发言
|
|
|
|
+.sendtxt {
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 10px;
|
|
|
|
+ right: 10px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ text-align: right;
|
|
|
|
+}
|
|
|
|
+.popup {
|
|
|
|
+ .one {
|
|
|
|
+ color: #fff;
|
|
|
|
+ p:nth-child(1) {
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 25px 0;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+ p:nth-child(2) {
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ span {
|
|
|
|
+ background-color: #409eff9f;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ border-radius: 25px;
|
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
+ }
|
|
|
|
+ span:nth-child(4n) {
|
|
|
|
+ margin: 0 0 10px 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .two {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ background: #fff;
|
|
|
|
+ padding: 5px 5px;
|
|
|
|
+ height: 40px;
|
|
|
|
+ /deep/.van-cell {
|
|
|
|
+ padding: 3px 5px;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ width: 98%;
|
|
|
|
+ }
|
|
|
|
+ /deep/.van-button {
|
|
|
|
+ height: 31px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+/deep/.van-popup {
|
|
|
|
+ height: 30%;
|
|
|
|
+ background-color: #0000005f !important;
|
|
|
|
+}
|
|
|
|
+</style>
|