web-test/src/views/hall/hallDetail.vue

<template>
  <div id="liveList">
    <div class="pz_top">
      <div class="w_0100">
        <div class="livetop">
          <div class="w_1200">
            <div class="title">
              吉林省计算中心对接直播中心
            </div>
            <div class="zhuban">
              <span>主办方:</span>
              <span>吉林省计算中心直播大厅</span>
            </div>
            <div class="num">
              <p>
                <span>同时在线</span>
                <span>1人</span>
              </p>
              <p>
                <span>特邀嘉宾</span>
                <span>1人</span>
              </p>
              <p>
                <span>洽谈合作</span>
                <span>1人</span>
              </p>
              <p>
                <span>达成意愿</span>
                <span>1人</span>
              </p>
              <p>
                <span>展示成果</span>
                <span>1人</span>
              </p>
              <p>
                <span>发布需求</span>
                <span>1人</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pz_main">
      <div class="w_0100">
        <div class="w_1200">
          <el-col :span="24" class="hallDetail">
            <el-col :span="18" class="left">
              <el-col :span="24" class="top">
                图文直播
              </el-col>
              <el-col :span="24" class="info" style="height: 402px;overflow: auto;" id="chatSell">
                <template v-for="(i, index) in mainTalk">
                  <span :key="`sellTime${i.id}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
                  <span v-html="i.content" :key="`sellContent${i.id}${index}`"></span>
                </template>
              </el-col>
            </el-col>
            <el-col :span="6" class="right">
              <el-col :span="24" class="top">
                聊天记录
              </el-col>
              <el-col :span="24" class="info" style="height: 402px;overflow: auto;" id="chatBuy">
                <template v-for="(i, index) in otherTalk">
                  <span :key="`buyTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
                  <span v-html="i.content" :key="`buyContent${i.id}${index}`"></span>
                </template>
              </el-col>
            </el-col>
            <el-col :span="24" class="hallDetailInput" style="text-align:center">
              <wang-editor v-model="content" style="height:130px;padding-bottom:120px" ref="editor"></wang-editor>
              <el-button type="primary" @click="sendMessage">发送</el-button>
            </el-col>
          </el-col>
        </div>
      </div>
    </div>
    <div class="pz_down">
      <div class="w_0100">
        <div class="superdown">
          <div class="w_1200">
            <p>版权所有：吉林省技术算中心</p>
            <p>
              <span>技术支持：长春福瑞科技有限公司</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>邮编：130000</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>传真：239823982</span>
            </p>
            <p>
              <span>地址：吉林省长春市朝阳区前进大街1244号</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>电话：0134-1234567</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>邮箱：123456@163.com</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wangEditor from '@/components/wang-editor.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: roomchat } = createNamespacedHelpers('roomchat');
export default {
  name: 'hallDetail',
  props: {},
  components: { wangEditor },
  data: () => ({
    content: '',
    mainTalk: [],
    otherTalk: [],
    info: {},
    buyerList: [],
    sellerList: [],
    sending: true,
    text: '',
  }),
  created() {
    this.search();
  },
  mounted() {
    this.channel();
  },
  methods: {
    ...dock(['fetch']),
    ...roomchat(['create']),
    async search() {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        let { apply, ...info } = res.data;
        this.$set(this, `info`, info);
        let buyList = apply.filter(f => f.buyer == '0');
        this.$set(this, `buyerList`, buyList);
        let sellList = apply.filter(f => f.buyer == '1');
        this.$set(this, `sellerList`, sellList);
      }
    },
    async sendMessage() {
      this.$set(this, `sending`, false);
      // if (!this.user.uid) {
      //   this.$message.error('游客不能发言,请先注册');
      //   return;
      // }
      if (this.content != '') {
        let object = { number: this.id, sender_name: this.user.name, content: this.content };
        if (this.user.uid) object.sender_id = this.user.uid;
        let res = await this.create(object);
        this.$refs.editor.setContent();
        this.$set(this, `content`, '');
        this.$forceUpdate();
        this.$checkRes(res, null, res.errmsg || '发言失败');
      } else this.$message.error('请输入信息后发送');
      this.$set(this, `sending`, true);
    },
    channel() {
      this.$stomp({
        [`/exchange/room_chat/${this.id}`]: this.onMessage,
      });
    },
    onMessage(message) {
      // console.log('receive a message: ', message.body);
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        let is_seller = this.sellerList.find(f => f.user_id == body.sender_id);
        if (is_seller) this.mainTalk.push({ id: body._id, sender_name: body.sender_name, send_time: body.send_time, content: body.content });
        else this.otherTalk.push({ id: body._id, sender_name: body.sender_name, send_time: body.send_time, content: body.content });
        this.$nextTick(() => {
          document.getElementById('chatBuy').scrollTop = document.getElementById('chatBuy').scrollHeight + 150;
          document.getElementById('chatSell').scrollTop = document.getElementById('chatSell').scrollHeight + 150;
        });
      }
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less">
@import '~@/style/style.css';
.hallDetail {
  height: 800px;
  border: 1px solid red;
  margin: 0 0 20px 0;
}
.hallDetail .left {
  height: 450px;
  border: 1px solid #cccccc;
}
.hallDetail .left .top {
  height: 40px;
  line-height: 40px;
  padding: 0px 15px;
  font-size: 18px;
  border-bottom: 1px dashed #ccc;
}
.hallDetail .right {
  border: 1px solid #ccc;
  height: 450px;
}
.hallDetail .right .top {
  height: 40px;
  line-height: 40px;
  padding: 0px 15px;
  font-size: 18px;
  border-bottom: 1px dashed #ccc;
}
.hallDetailInput {
  padding: 30px 100px 0px 100px;
}
.hallDetailInput .el-input {
  width: 70%;
}
</style>