1

suerprisePlus

2024-06-06 7acf7ad6948e3e952173a2551ea4a92a8ff56c35

 src/components/Chat/chatList.vue

@@ -1,31 +1,52 @@
<template>

  <div class="body">

    <div :style="pageConfig.width|setWidth">

    <div :style="pageConfig.width | setWidth">

      <div class="web__main" ref="main">

        <div

          class="web__main-item"

          v-for="(item,index) in list"

          v-for="(item, index) in list"

          :key="loding(index)"

          :class="{'web__main-item--mine':item.mine}"

          :class="{ 'web__main-item--mine': item.mine }"

        >

          <div class="web__main-user">

            <img :src="item.img" />

            <cite>

              {{item.name}}

              <i>{{item.date}}</i>

            </cite>

          <div class="web__main_content">

            <div>

              <img :src="item.img" />

            </div>

            <div class="web__main_Date">

              <div>

                <cite>

                  <div>

                    {{ item.name }}

                  </div>

                  <div>

                    {{ item.date }}

                  </div>

                </cite>

              </div>



              <div class="web__main-text">

                <div class="web__main-arrow"></div>

                <span

                  v-html="handleDetail(item.text.text)"

                  ref="content"

                ></span>

                <ul class="web__main-list" v-if="item.text.list">

                  <li

                    @click="handleItemMsg(citem)"

                    v-for="(citem, cindex) in item.text.list"

                    :key="cindex"

                  >

                    {{ citem.text }}

                  </li>

                </ul>

              </div>

            </div>

          </div>

          <div class="web__main-text">

            <div class="web__main-arrow"></div>

            <span v-html="handleDetail(item.text.text)" ref="content"></span>

            <ul class="web__main-list" v-if="item.text.list">

              <li

                @click="handleItemMsg(citem)"

                v-for="(citem,cindex) in item.text.list"

                :key="cindex"

              >{{citem.text}}</li>

            </ul>

          </div>

          <!-- <div class="web__main-user">



           
          </div> -->

          <!--  -->

        </div>

      </div>

    </div>

@@ -36,17 +57,17 @@
      :before-close="handleClose"

      class="web__dialog"

    >

      <img :src="imgSrc" v-if="imgSrc" style="width:100%;object-fit: cover;" />

      <img :src="imgSrc" v-if="imgSrc" style="width: 100%; object-fit: cover" />

      <video

        :src="videoSrc"

        v-if="videoSrc"

        style="width:100%;object-fit: cover;"

        style="width: 100%; object-fit: cover"

        controls="controls"

      ></video>

      <audio

        :src="audioSrc"

        v-if="audioSrc"

        style="width:100%;object-fit: cover;"

        style="width: 100%; object-fit: cover"

        controls="controls"

      ></audio>

    </el-dialog>

@@ -54,17 +75,17 @@
</template>



<script>

import emojiParser from 'wechat-emoji-parser'

import emojiParser from "wechat-emoji-parser";



export default {

  name: 'JwChat_list',

  name: "JwChat_list",

  filters: {

    setWidth (value) {

      let width = value

    setWidth(value) {

      let width = value;

      if (`${value}`.match(/^\d+$/)) {

        width = value + 'px'

        width = value + "px";

      }

      return width

      return width;

    }

  },

  props: {

@@ -76,114 +97,123 @@
    },

    list: {

      type: Array,

      default: () => ([])

      default: () => []

    }

  },

  data () {

  data() {

    return {

      load: false,

      show: false,

      imgSrc: '',

      videoSrc: '',

      audioSrc: ''

    }

      imgSrc: "",

      videoSrc: "",

      audioSrc: ""

    };

  },

  watch: {

    load (newval) {

    load(newval) {

      if (newval) {

        this.$emit('load', true)

        this.$emit("load", true);

        this.$nextTick(() => {

          this.load = false

        })

          this.load = false;

        });

      }

    }

  },

  methods: {

    loding (index) {

      const size = this.list.length

    loding(index) {

      const size = this.list.length;

      if (index == size - 1) {

        setTimeout(() => {

          this.load = true

          this.load = true;

        }, 200);

      }

      return index

      return index;

    },

    //处理排版

    handleDetail (html = '') {

    handleDetail(html = "") {

      // console.log(html)

      let result = html;

      result = emojiParser(result).replace(/(<img src)/g, '<img data-class="iconBox" data-src')

      result = emojiParser(result).replace(

        /(<img src)/g,

        '<img data-class="iconBox" data-src'

      );

      setTimeout(() => {

        const list = this.$refs.content;

        list.forEach(ele => {

        list.forEach((ele) => {

          for (let i = 0; i < ele.children.length; i++) {

            const child = ele.children[i];

            if (child.getAttribute('data-flag') != 0) {

              child.setAttribute('data-flag', 0)

            if (child.getAttribute("data-flag") != 0) {

              child.setAttribute("data-flag", 0);

              child.onclick = () => {

                this.handleEvent(child)

                this.handleEvent(child);

              };

              if (child.tagName === 'IMG') {

                child.className = 'web__msg--img'

                const icon = child.getAttribute('data-class')

                if (icon !== 'iconBox') child.type = "IMG"

                child.src = child.getAttribute('data-src')

              } else if (child.tagName === 'VIDEO') {

                child.type = "VIDEO"

                child.className = 'web__msg--video'

                child.src = child.getAttribute('data-src')

              } else if (child.tagName === 'AUDIO') {

                child.type = "AUDIO"

                child.className = 'web__msg--audio'

                child.controls = 'controls';

                child.src = child.getAttribute('data-src')

              } else if (child.tagName === 'FILE') {

                child.type = "FILE"

                child.className = 'web__msg--file'

                child.innerHTML = `<h2>File</h2><span>${child.getAttribute('data-name')}</span>`

              } else if (child.tagName === 'MAP') {

                child.type = "MAP"

                child.className = 'web__msg--file web__msg--map'

                child.innerHTML = `<h2>Map</h2><span>${child.getAttribute('data-longitude')} , ${child.getAttribute('data-latitude')}<br />${child.getAttribute('data-address')}</span>`

              if (child.tagName === "IMG") {

                child.className = "web__msg--img";

                const icon = child.getAttribute("data-class");

                if (icon !== "iconBox") child.type = "IMG";

                child.src = child.getAttribute("data-src");

              } else if (child.tagName === "VIDEO") {

                child.type = "VIDEO";

                child.className = "web__msg--video";

                child.src = child.getAttribute("data-src");

              } else if (child.tagName === "AUDIO") {

                child.type = "AUDIO";

                child.className = "web__msg--audio";

                child.controls = "controls";

                child.src = child.getAttribute("data-src");

              } else if (child.tagName === "FILE") {

                child.type = "FILE";

                child.className = "web__msg--file";

                child.innerHTML = `<h2>File</h2><span>${child.getAttribute(

                  "data-name"

                )}</span>`;

              } else if (child.tagName === "MAP") {

                child.type = "MAP";

                child.className = "web__msg--file web__msg--map";

                child.innerHTML = `<h2>Map</h2><span>${child.getAttribute(

                  "data-longitude"

                )} , ${child.getAttribute(

                  "data-latitude"

                )}<br />${child.getAttribute("data-address")}</span>`;

              }

            }

          }

        });

      }, 0)

      }, 0);

      return result;

    },

    //处理事件

    handleEvent (params) {

    handleEvent(params) {

      const callback = () => {

        if (params.type === 'IMG') {

        if (params.type === "IMG") {

          this.imgSrc = params.src;

          this.show = true;

        } else if (params.type === 'VIDEO') {

        } else if (params.type === "VIDEO") {

          this.videoSrc = params.src;

          this.show = true;

        } else if (params.type === 'AUDIO') {

        } else if (params.type === "AUDIO") {

          this.audioSrc = params.src;

          this.show = true;

        } else if (params.type === 'FILE') {

          window.open(params.src)

        } else if (params.type === "FILE") {

          window.open(params.src);

        }

      }

      if (typeof this.beforeOpen === 'function') {

        this.beforeOpen(params, callback)

      };

      if (typeof this.beforeOpen === "function") {

        this.beforeOpen(params, callback);

      } else {

        callback();

      }

    },

    handleClose (done) {

    handleClose(done) {

      this.imgSrc = undefined;

      this.videoSrc = undefined;

      this.audioSrc = undefined;

      done();

    },

  },

}

    }

  }

};

</script>

<style>

<style scoped>

.web__msg--img,

.web__msg--video,

.web__msg--file {

@@ -207,15 +237,14 @@
  display: inline-block;

}

</style>

<style  scoped>

<style scoped>

.web__main-item {

  position: relative;

  font-size: 0;

  margin-bottom:30px;

  padding-left: 60px;

  margin-bottom: 30px;

  /* padding-left: 60px; */

  min-height: 68px;

  text-align: left;

 
}



.web__main-user,

@@ -228,7 +257,8 @@
}



.web__main-user {

  position: absolute;

  width: 100%;

  /* position: absolute; */

  left: 3px;

}



@@ -239,36 +269,65 @@
}



.web__main-user cite {

  position: absolute;

  left: 60px;

  top: -2px;

  /* width: 500px; */

  /* position: absolute; */

  /* left: 60px;

  top: -2px; */

  line-height: 24px;

  font-size: 18px;

  white-space: nowrap;

  color: #999;

  text-align: left;

  font-style: normal;

  width: 100%;

  font-family: "Arial", sans-serif;

  display: flex;

  justify-content: space-between;

}



.web__main-user cite i {

  padding-left: 0px;

  font-style: normal;

}



.citeTitle {

  width: 100%;

  display: flex;

  justify-content: space-between;

}

.web__main-text {

  max-width: 40%;

  /* max-width: 40%; */

  width: 100%;

  position: relative;

  line-height: 22px;

  margin-top: 25px;

  padding: 8px 15px;

  background-color: #f3f3f3;

  /* margin-top: 25px; */

  padding: 8px 0px;

  /* background-color: #f3f3f3; */

  border-radius: 3px;

  border: 1px solid #f0f0f0;

  color: #000;

  /* border: 1px solid #f0f0f0; */

  color: #f2f2f2;

  font-family: "Arial", sans-serif;

  font-size: 16px;

  word-break: break-all;

}



.web__main_content {

  width: 100%;

  padding: 10px 0px;

  display: flex;

}

.web__main_Date {

  flex: 1;

  padding: 0px 15px;

}

.web__main_Date cite {

  line-height: 24px;

  font-size: 14px;

  white-space: nowrap;

  color: #f2f2f2;

  text-align: left;

  font-style: normal;

  width: 100%;

  display: flex;

  justify-content: space-between;

}

.web__main-arrow {

  top: 6px;

  left: -8px;

@@ -280,7 +339,7 @@
  border-style: solid;

  border-width: 8px;

  border-left-width: 0;

  border-right-color: #ebeef5;

  /* border-right-color: #ebeef5; */

  font-family: Microsoft YaHei;

}



@@ -296,7 +355,7 @@
  border-style: solid;

  border-width: 7px;

  border-left-width: 0;

  border-right-color: #ebeef5;

  /* border-right-color: #ebeef5; */

}



.web__main-item--mine .web__main-text .web__main-arrow {

@@ -306,7 +365,7 @@
  border-style: solid;

  border-width: 8px;

  border-right-width: 0;

  border-left-color: #f3f3f3;

  /* border-left-color: #f3f3f3; */

}



.web__main-item--mine .web__main-text .web__main-arrow::after {

@@ -316,7 +375,7 @@
  border-style: solid;

  border-width: 7px;

  border-right-width: 0;

  border-left-color: #f3f3f3;

  /* border-left-color: #f3f3f3; */

}



.web__main-list {

@@ -353,12 +412,13 @@


.web__main-item--mine .web__main-text {

  margin-left: 0;

  text-align: left;

  background-color: #f3f3f3;

  font-family: Microsoft YaHei;

  /* color: #fff; */

  text-align: right;

  /* background-color: #f3f3f3; */

  font-family: "Arial", sans-serif;

  font-size: 16px;

  color: #f2f2f2;

}

.web__main-text img {

  max-width: 200px;

}

</style>
</style>