jlst-company/src/layout/chatCommon/chat.vue

<template>
  <div id="chat">
    <van-row>
      <van-col span="24" class="main">
        <van-col span="24" class="one" :style="{ height: client.height - 87 + 'px' }">
          <template v-for="(i, index) in list">
            <template v-if="isSender(i, index)">
              <van-col span="24" class="senderTime" :key="`div${i.id}${index}`">
                <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
                <span v-if="i.type == '1'" v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
                <span v-else-if="i.type == '2'">
                  {{ getFile(i.file) }}<van-button type="info" size="mini" class="downBtn" @click="downFile(i.file)">下载</van-button>
                </span>
              </van-col>
            </template>
            <template v-else>
              <van-col span="24" class="receverTime" :key="`div${i.id}${index}`">
                <span :key="`receverTime${i.id}${index}`"> {{ i.sender_name }} [{{ i.send_time }}]</span>
                <span v-if="i.type == '1'" v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
                <span v-else-if="i.type == '2'">
                  {{ getFile(i.file) }}<van-button type="info" size="mini" class="downBtn" @click="downFile(i.file)">下载</van-button>
                </span>
              </van-col>
            </template>
          </template>
        </van-col>
        <van-col span="24" class="two">
          <van-col span="17" class="cont">
            <van-field v-model="content" placeholder="请输入内容" />
          </van-col>
          <van-col span="7" class="btn">
            <van-button type="info" size="small" @click="send">发送</van-button>
            <van-button type="info" size="small" @click="other">其它</van-button>
          </van-col>
        </van-col>
      </van-col>
    </van-row>
    <van-dialog v-model="show" class="dialog" title="文件" :showConfirmButton="false" :showCancelButton="false" :closeOnClickOverlay="false">
      <van-form>
        <van-field name="file" label="文件">
          <template #input>
            <van-uploader
              :fileList="fileForm.file"
              :max-count="1"
              :after-read="(file) => toUpload(file, 'file')"
              @delete="(file) => toDelete(file, 'file')"
              accept="file"
            />
          </template>
        </van-field>
        <div class="btn">
          <van-button type="danger" size="small" @click="twoClose">取消发送</van-button>
          <van-button type="info" size="small" @click="twoSend">提交发送</van-button>
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: upload } = createNamespacedHelpers('upload');
const { mapActions: adminLogin } = createNamespacedHelpers('adminLogin');
const { mapActions: patentchat } = createNamespacedHelpers('patentchat');
const _ = require('lodash');
export default {
  name: 'chat',
  props: {},
  components: {},
  data: function () {
    return {
      adminInfo: {},
      content: '',
      // 消息列表
      list: [],
      // 浏览器高度
      client: {},
      // 发送其他内容
      show: false,
      fileForm: {},
    };
  },
  created() {
    this.searchAdmin();
    this.search();
  },
  methods: {
    ...upload(['upload']),
    ...adminLogin({ adminQuery: 'query' }),
    ...patentchat(['create', 'query']),
    // 查询
    async search() {
      let res = await this.query({ id: this.user._id });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
      }
    },
    // 发言,正常内容
    async send() {
      if (this.content) {
        let arr = {
          type: '1',
          content: this.content,
          sender_id: this.user._id,
          sender_name: this.user.name,
          receiver_id: this.adminInfo._id,
          receiver_name: this.adminInfo.name,
        };
        let res = await this.create(arr);
        if (this.$checkRes(res)) {
          this.$toast({ type: `success`, message: `发言成功` });
          this.content = '';
          this.search();
        }
      } else {
        this.$toast({ type: `fail`, message: `缺少必要信息` });
      }
    },
    // 发言，发送文件
    other() {
      this.show = true;
    },
    // 提交发送
    async twoSend() {
      let data = this.fileForm;
      if (data.file) {
        let data = {
          type: '2',
          file: data.file,
          sender_id: this.user._id,
          sender_name: this.user.name,
          receiver_id: this.adminInfo._id,
          receiver_name: this.adminInfo.name,
        };
        let res = await this.create(data);
        if (this.$checkRes(res)) {
          this.$toast({ type: `success`, message: `发言成功` });
          this.fileForm = { file: [] };
          this.twoClose();
          this.search();
        }
      } else {
        this.$toast({ type: `fail`, message: `缺少必要信息` });
      }
    },
    // 取消发送
    twoClose() {
      this.show = false;
    },

    async toUpload({ file }, model) {
      // 上传,赋值
      const res = await this.upload({ file, dir: 'chat' });
      if (this.$checkRes(res)) {
        this.$set(this.fileForm, model, [{ name: res.name, url: res.uri }]);
      }
    },
    toDelete(file, model) {
      const index = this.fileForm[model].findIndex((f) => _.isEqual(f, file));
      this.fileForm[model].splice(index, 1);
    },
    // 处理文件
    getFile(data) {
      if (data.length > 0) {
        return data[0].name;
      }
    },
    // 下载文件
    downFile(data) {
      if (data.length > 0) {
        let url = data.map((i) => i.url);
        window.location.href = `${process.env.VUE_APP_HOST}/${url[0]}`;
      } else {
        this.$toast({ type: `fail`, message: `非正常文件，无法下载` });
      }
    },
    // 判断发言人
    isSender(data) {
      return this.user.id !== data.sender_id;
    },
    // 查询管理员
    async searchAdmin() {
      let res = await this.adminQuery({ code: 'JLKJQY' });
      if (this.$checkRes(res)) {
        this.$set(this, `adminInfo`, res.data[0]);
      }
    },
  },
  mounted() {
    let client = {
      height: document.documentElement.clientHeight || document.body.clientHeight,
      width: document.documentElement.clientWidth || document.body.clientWidth,
    };
    this.$set(this, `client`, client);
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 5px;
    .senderTime {
      float: left;
      width: 100%;
      text-align: left;
      color: #666;
      font-size: 14px;
      margin: 0 0 5px 0;
    }
    .senderTime span:last-child {
      float: left;
      width: 100%;
      text-align: left;
      color: #000;
    }
    .receverTime {
      float: right;
      width: 100%;
      color: #666;
      font-size: 14px;
      margin: 0 0 5px 0;
    }
    .receverTime span:first-child {
      float: right;
      width: 100%;
      text-align: right;
    }
    .receverTime span:last-child {
      float: right;
      width: 100%;
      text-align: right;
      color: #000;
    }
  }
  .two {
    height: 40px;
    border-top: 1px solid #ccc;
    .cont {
      /deep/.van-cell {
        line-height: 20px;
        padding: 10px;
      }
    }
    .btn {
      text-align: center;
      /deep/.van-button--small {
        width: 54px;
        height: 40px;
        padding: 0;
      }
    }
  }
}
.dialog {
  .btn {
    text-align: center;
    .van-button {
      margin: 8px;
    }
  }
}
.downBtn {
  margin: 0 0 0 8px;
  /deep/.van-button__text {
    color: #ffffff !important;
  }
}
</style>