更改厂区模型

fuchengshen

2022-07-15 dfdcca599b595c7340b31ee7cd5878f29a3268eb

 src/cool/modules/chat/components/message.vue

@@ -1,112 +1,108 @@
<template>
   <div v-loading="!visible && loading" class="cl-chat-message" element-loading-text="消息加载中">
      <div
         :ref="setRefs('scroller')"
         class="cl-chat-message__scroller scroller1"
         :style="{
  <div v-loading="!visible && loading"
       class="cl-chat-message"
       element-loading-text="消息加载中">
    <div :ref="setRefs('scroller')"
         class="cl-chat-message__scroller scroller1"
         :style="{
            opacity: visible ? 1 : 0
         }"
      >
         <!-- 加载更多 -->
         <div v-show="list.length > 0" class="cl-chat-message__more">
            <el-button round size="mini" :loading="loading" @click="onLoadmore"
               >加载更多</el-button
            >
         </div>
         }">
      <!-- 加载更多 -->
      <div v-show="list.length > 0"
           class="cl-chat-message__more">
        <el-button round
                   size="mini"
                   :loading="loading"
                   @click="onLoadmore">加载更多</el-button>
      </div>

         <!-- 消息列表 -->
         <div class="cl-chat-message__list">
            <div
               v-for="item in list"
               :key="item.id || item.uid"
               class="cl-chat-message__item"
               :class="[item.type == 0 ? `is-right` : `is-left`, `is-${item.mode}`]"
            >
               <!-- 日期 -->
               <div v-if="item._date" class="date">
                  <span>{{ item._date }}</span>
               </div>
      <!-- 消息列表 -->
      <div class="cl-chat-message__list">
        <div v-for="item in list"
             :key="item.id || item.uid"
             class="cl-chat-message__item"
             :class="[item.type == 0 ? `is-right` : `is-left`, `is-${item.mode}`]">
          <!-- 日期 -->
          <div v-if="item._date"
               class="date">
            <span>{{ item._date }}</span>
          </div>

               <!-- 内容 -->
               <div class="main">
                  <!-- 头像 -->
                  <div class="avatar">
                     <img :src="item.avatarUrl" />
                  </div>
          <!-- 内容 -->
          <div class="main">
            <!-- 头像 -->
            <div class="avatar">
              <img :src="item.avatarUrl" />
            </div>

                  <div class="det">
                     <!-- 昵称 -->
                     <span class="name">{{ item.nickName }}</span>
            <div class="det">
              <!-- 昵称 -->
              <span class="name">{{ item.nickName }}</span>

                     <div
                        v-loading="item.loading"
                        class="content"
                        :element-loading-text="item.progress"
                        @click="onTap(item)"
                     >
                        <!-- 文本 -->
                        <template v-if="item.mode === 'text'">{{
              <div v-loading="item.loading"
                   class="content"
                   :element-loading-text="item.progress"
                   @click="onTap(item)">
                <!-- 文本 -->
                <template v-if="item.mode === 'text'">{{
                           item.content.text
                        }}</template>

                        <!-- 图片 -->
                        <template v-else-if="item.mode === 'image'">
                           <el-image
                              :key="item.uid"
                              :src="item.content.imageUrl"
                              :preview-src-list="[item.content.imageUrl]"
                              :z-index="3000"
                              :style="item.style"
                           >
                              <template #placeholder>
                                 <img
                                    :src="item.content.imageUrl"
                                    :style="item.style"
                                    alt=""
                                 />
                              </template>
                           </el-image>
                        </template>
                <!-- 图片 -->
                <template v-else-if="item.mode === 'image'">
                  <el-image :key="item.uid"
                            :src="item.content.imageUrl"
                            :preview-src-list="[item.content.imageUrl]"
                            :z-index="3000"
                            :style="item.style">
                    <template #placeholder>
                      <img :src="item.content.imageUrl"
                           :style="item.style"
                           alt="" />
                    </template>
                  </el-image>
                </template>

                        <!-- 表情 -->
                        <template v-else-if="item.mode === 'emoji'">
                           <img :src="item.content.imageUrl" />
                        </template>
                <!-- 表情 -->
                <template v-else-if="item.mode === 'emoji'">
                  <img :src="item.content.imageUrl" />
                </template>

                        <!-- 语音 -->
                        <template v-else-if="item.mode === 'voice'">
                           <icon-voice :play="item.isPlay" />
                           <span class="duration">{{ item.content.duration }}"</span>
                        </template>
                <!-- 语音 -->
                <template v-else-if="item.mode === 'voice'">
                  <icon-voice :play="item.isPlay" />
                  <span class="duration">{{ item.content.duration }}"</span>
                </template>

                        <!-- 视频 -->
                        <template v-else-if="item.mode === 'video'">
                           <div class="item">
                              <video
                                 :poster="item.content.videoUrl"
                                 :src="item.content.videoUrl"
                                 controls
                              ></video>
                           </div>
                        </template>
                <!-- 视频 -->
                <template v-else-if="item.mode === 'video'">
                  <div class="item">
                    <video :poster="item.content.videoUrl"
                           :src="item.content.videoUrl"
                           controls></video>
                  </div>
                </template>

                        <!-- 未知 -->
                        <template v-else>
                           <span>待扩展消息类型</span>
                           <i class="el-icon-warning-outline"></i>
                        </template>
                     </div>
                  </div>
               </div>
            </div>
                <!-- 未知 -->
                <template v-else>
                  <span>待扩展消息类型</span>
                  <i class="el-icon-warning-outline"></i>
                </template>
              </div>
            </div>
          </div>
        </div>

            <!-- 音频 -->
            <div class="voice">
               <audio ref="voice" style="display: none" :src="voice.url" controls></audio>
            </div>
         </div>
      </div>
   </div>
        <!-- 音频 -->
        <div class="voice">
          <audio ref="voice"
                 style="display: none"
                 :src="voice.url"
                 controls></audio>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
@@ -115,14 +111,14 @@
import { ElMessage } from "element-plus";
import { isString } from "/@/cool/utils";
import { useCool } from "/@/cool";
import IconVoice from "./icon-voice.vue";
// import IconVoice from "./icon-voice.vue";

import AvatarUrl from "../static/images/custom-avatar.png";

export default defineComponent({
   components: {
      IconVoice
   },
   // components: {
   //    IconVoice
   // },

   setup() {
      const { refs, setRefs, service, store, mitt } = useCool();