cnhis-design-vue 2.2.3 → 2.2.6

package/packages/multi-chat/chat/voice.vue

@@ -1,431 +0,0 @@
-<template>
-  <div class="voice-page" v-show="canRecordering">
-    <div class="voice-containter">
-      <a-icon class="close-icon" type="close" @click="closeVoice" />
-      <div class="img-wrap">
-        <div class="end-wrap" v-if="!isEndRecord">
-          <img src="../img/end-voice.png" alt="" />
-          <a-progress
-            @click.native="stopRecored"
-            class="progress-ele"
-            type="circle"
-            :percent="percent"
-            :showInfo="false"
-            :width="122"
-            :strokeWidth="2"
-            :showText="false"
-            :strokeColor="'#C80606'"
-          ></a-progress>
-        </div>
-        <div class="play-wrap" v-else>
-          <img v-if="!isRecordPlay" src="../img/audio-new.png" alt="" @click="toggleVoice(true)" />
-          <img v-else src="../img/audio-play.gif" alt="" @click="toggleVoice(false)" />
-        </div>
-      </div>
-      <p>{{ voiceText }}</p>
-      <div class="time-wrap">{{ handleVoiceTime }}</div>
-      <div class="btn-wrap">
-        <span @click="deleteVoice">删除</span>
-        <span @click="uploadFile" class="send-btn">发送</span>
-      </div>
-    </div>
-    <div style="display:none;">
-      <audio controls autoplay ref="audio" preload="auto" crossOrigin="anonymous" media-player="audioPlayer" :src="curAudioUrl" @ended="audioEnd"></audio>
-    </div>
-  </div>
-</template>
-<script>
-import { mapActions } from '../store/helper';
-import fetch from '@/utils/chatFetch';
-import Recorder from 'recorder-core';
-import 'recorder-core/src/engine/mp3';
-import 'recorder-core/src/engine/mp3-engine';
-// 由于大部分情况下ios-weixin的支持需要用到amr解码器，应当把amr引擎也加载进来
-import 'recorder-core/src/engine/beta-amr';
-import 'recorder-core/src/engine/beta-amr-engine';
-import { Icon, Progress } from 'ant-design-vue';
-
-export default {
-  name: 'Voice',
-  inject: ['store'],
-  components: {
-    [Progress.name]: Progress,
-    [Icon.name]:Icon,
-  },
-  props: {
-    showVoice: {
-      default: false
-    }
-  },
-  data() {
-    return {
-      rec: null,
-      recBlob: null,
-      recordTimer: null,
-      recordTime: 60,
-      voiceType: 2, // 1: C端, 2: B,
-      voiceTime: 0,
-
-      curDuration: 0,
-      voiceText: '',
-      curAudioUrl: '',
-      isEndRecord: false,
-      isRecordPlay: false,
-
-      voiceStartTime: 0,
-      isSendLoading: false,
-      isRecordering: false,
-      canRecordering: false
-    };
-  },
-
-  computed: {
-    handleVoiceTime() {
-      let res = this.voiceTime > 9 ? this.voiceTime : '0' + this.voiceTime;
-      return `00:${res}`;
-    },
-    percent() {
-      return (this.voiceTime / 60) * 100;
-    }
-  },
-  watch: {
-    showVoice: {
-      immediate: true,
-      handler(val) {
-        if (!val) return;
-        this.recOpen();
-      }
-    }
-  },
-  // 生命周期
-  beforeDestory() {
-    this.resetData();
-  },
-  created() {},
-
-  mounted() {},
-
-  // 方法
-  methods: {
-    ...mapActions(['sendMessage']),
-    handleEnv() {
-      this.recOpen(true);
-    },
-    closeVoice() {
-      this.resetData();
-      this.$emit('closeVoice');
-    },
-    resetData(isRestart) {
-      if (!isRestart) {
-        this.recClose();
-        this.rec = null;
-        this.curAudioUrl && (window.URL || window.webkitURL).revokeObjectURL(this.curAudioUrl);
-      }
-      this.recordTimer && clearInterval(this.recordTimer);
-      this.recBlob = null;
-      this.recordTimer = null;
-      this.recordTime = 60;
-      this.voiceTime = 0;
-      this.curDuration = 0;
-      this.voiceText = '点击停止录音';
-      this.curAudioUrl = '';
-      this.isEndRecord = false;
-      this.isRecordPlay = false;
-      this.voiceStartTime = 0;
-      this.isSendLoading = false;
-      this.isRecordering = false;
-    },
-    deleteVoice() {
-      let _this = this;
-      this.$confirm({
-        title: '确定要删除这段录音么',
-        okText: '确定',
-        cancelText: '取消',
-        onOk() {
-          _this.reStart();
-        },
-        onCancel() {}
-      });
-    },
-    reStart() {
-      this.resetData();
-      this.recOpen();
-    },
-    recOpen(flag) {
-      let _this = this;
-      _this.isRecordering = true;
-      _this.rec = Recorder({
-        type: 'mp3',
-        sampleRate: 16000,
-        bitRate: 16,
-        onProcess: function() {}
-      });
-      _this.voiceStartTime = new Date().getTime();
-
-      _this.rec?.open(
-        function() {
-          _this.canRecordering = true;
-          console.log('recOpen --- 已打开录音，可以点击开始了');
-          !flag && _this.recStart();
-          if (flag) {
-            setTimeout(() => {
-              _this.recStop();
-            }, 500);
-          }
-          // rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程
-        },
-        function(msg, isUserNotAllow) {
-          // 用户拒绝未授权或不支持
-          // clearTimeout(t);
-          _this.isRecordering = false;
-          _this.canRecordering = false;
-          _this.voiceText = '无法录音';
-          _this.closeVoice();
-          if (!flag) _this.$message.error('当前无法录音，请检查设备和权限');
-          console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg);
-        }
-      );
-    },
-    recStart() {
-      if (this.recordTimer) clearInterval(this.recordTimer);
-      if (this.rec && Recorder.IsOpen()) {
-        this.voiceText = '点击停止录音';
-        this.voiceStartTime = new Date().getTime();
-        this.rec.start();
-        this.recordTimer = setInterval(() => {
-          this.recordTime--;
-          this.voiceTime++;
-          if (this.recordTime <= 0) {
-            clearInterval(this.recordTimer);
-            this.recStop();
-          }
-        }, 1000);
-      } else {
-        console.log('未打开录音');
-      }
-    },
-    recStop() {
-      let _this = this;
-      if (_this.recordTimer) clearInterval(_this.recordTimer);
-      _this.isEndRecord = true;
-      _this.recordTime = 60;
-
-      if (!(_this.rec && Recorder.IsOpen())) {
-        console.log('recStop --- 未打开录音');
-        _this.isRecordering = false;
-        _this.resetVoiceSetting('未打开录音');
-        return;
-      }
-      _this.rec?.stop(
-        function(blob, duration) {
-          _this.recBlob = blob;
-          let tempDuration = Math.round(duration / 1000);
-          let curDuration;
-          if (tempDuration > 59) {
-            curDuration = 60;
-          } else {
-            curDuration = parseInt(duration / 1000);
-          }
-          _this.curDuration = curDuration;
-          if (curDuration < 1) {
-            _this.isRecordering = false;
-            _this.resetVoiceSetting('时间过短');
-            _this.$message.warning('时间过短');
-            return;
-          }
-          _this.recClose();
-        },
-        function(msg) {
-          _this.isRecordering = false;
-          _this.resetVoiceSetting('录音失败');
-          console.log('录音失败:' + msg, 1);
-        }
-      );
-    },
-    recClose() {
-      if (this.rec) {
-        this.rec.close();
-        this.voiceText = '录制完成，播放录音';
-        this.isRecordering = false;
-        console.log('recClose --- 已关闭');
-      } else {
-        this.isRecordering = false;
-        this.voiceText = '未打开录音';
-        console.log('recClose --- 未打开录音', 1);
-      }
-    },
-    stopRecored() {
-      this.recStop();
-    },
-    toggleVoice(isPlay) {
-      this.isRecordPlay = isPlay;
-      if (isPlay) {
-        this.recPlay();
-      } else {
-        this.audioEnd();
-      }
-    },
-    recPlay() {
-      if (!this.recBlob) {
-        console.log('请先录音，然后停止后再播放', 1);
-        return;
-      }
-      this.curAudioUrl = (window.URL || window.webkitURL).createObjectURL(this.recBlob);
-    },
-    audioEnd() {
-      this.curAudioUrl && (window.URL || window.webkitURL).revokeObjectURL(this.curAudioUrl);
-      this.curAudioUrl = '';
-      this.isRecordPlay = false;
-    },
-    uploadFile() {
-      if (this.isRecordering) return this.$message.warning('正在录音，请先点击停止录音，再次发送！');
-      if (this.isSendLoading) return this.$message.warning('正在发送...');
-      if (!this.recBlob) return;
-      if (this.curDuration < 1) {
-        return this.$message.warning('时间过短');
-      }
-      this.isSendLoading = true;
-      let form = new FormData();
-      form.append('file', this.recBlob, 'recorder.mp3');
-      // /hospitalUpload/file /api/inside/file
-      fetch
-        .post('/hospitalUpload/file', form)
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let { url = '' } = data?.map || {};
-            if (!url) return;
-            this.voiceSend(url, this.curDuration);
-          } else {
-            this.isSendLoading = false;
-            this.$message.warning(data.resultMsg || '上传失败');
-          }
-        })
-        .catch(err => {
-          this.resetVoiceSetting();
-          this.isSendLoading = false;
-          this.$message.warning(err?.resultMsg || '上传失败');
-          console.log(err, '上传失败的回调啦啦啦');
-        });
-    },
-    voiceSend(url, duration) {
-      if (!url) return;
-      let body = {
-        content: url,
-        type: 6,
-        duration
-      };
-      this.closeVoice();
-      this.sendMessage(body)
-        .then(() => {
-          this.isSendLoading = false;
-          this.recBlob = null;
-        })
-        .catch(() => {
-          this.isSendLoading = false;
-          this.$message.warning('发送失败');
-        });
-    },
-    resetVoiceSetting(text = '录制完成，播放录音') {
-      this.voiceText = text;
-      if (this.recordTimer) clearInterval(this.recordTimer);
-      this.voiceStartTime = 0;
-      this.curDuration = 0;
-      this.recordTime = 60;
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.voice-page {
-  &::before {
-    content: ' ';
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    cursor: default;
-  }
-  position: fixed;
-  z-index: 300000;
-  top: calc(50% - 232px);
-  left: calc(50% - 207px);
-  width: 414px;
-  height: 464px;
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0px 0px 16px 6px rgba(0, 0, 0, 0.14);
-  cursor: default;
-  .voice-containter {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    padding: 66px;
-    text-align: center;
-    .close-icon {
-      position: absolute;
-      top: 14px;
-      right: 14px;
-      font-size: 16px;
-      color: #979797;
-    }
-    .img-wrap {
-      width: 136px;
-      height: 136px;
-      margin: 26px auto;
-      cursor: pointer;
-      .end-wrap {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-        .progress-ele {
-          position: absolute;
-          top: 48%;
-          left: 49.8%;
-          transform: translate(-50%, -50%);
-        }
-      }
-      .play-wrap {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 120px;
-        height: 120px;
-        background: linear-gradient(180deg, #2d7aff 0%, #2c5df4 100%);
-        box-shadow: 0px 5px 8px 0px rgba(44, 101, 247, 0.39);
-        border-radius: 50%;
-        img {
-          width: 35px;
-        }
-      }
-    }
-    p {
-      margin-bottom: 10px;
-      font-size: 16px;
-    }
-    .time-wrap {
-      font-size: 30px;
-    }
-    .btn-wrap {
-      margin-top: 35px;
-      span {
-        display: inline-block;
-        padding: 8px 32px;
-        border-radius: 20px;
-        border: 1px solid #d9d9d9;
-        cursor: pointer;
-      }
-      .send-btn {
-        margin-left: 18px;
-        background: #2d7aff;
-        color: #fff;
-        border-color: #2d7aff;
-      }
-    }
-  }
-}
-</style>

package/packages/multi-chat/components/avatar.vue

@@ -1,113 +0,0 @@
-<script>
-export default {
-  functional: true,
-  props: {
-    className: {
-      type: String,
-      default: ''
-    },
-    customStyle: {
-      type: String,
-      default: ''
-    },
-    len: {
-      type: Number,
-      default: 1
-    },
-    size: {
-      type: Number,
-      default: 50
-    },
-    src: {
-      type: String,
-      default: ''
-    },
-    name: {
-      type: String,
-      default: ''
-    },
-    status: {
-      type: String,
-      default: ''
-    },
-    isShowStatus: {
-      type: Boolean,
-      default: false
-    }
-  },
-  render(_h, { props }) {
-    const src = props.src;
-    const size = props.size + 'px';
-    const className = props.className;
-    const customStyle = props.customStyle;
-    const isShowStatus = props.isShowStatus;
-    const onlineStatus = props.status === 'ON-LINE' ? 'online' : 'offline';
-    let name = '';
-    if (!src) {
-      name = (props.name || '').slice(-1 * props.len);
-    }
-    return src ? (
-      <div class="avatar-wrap">
-        <img class={['avatar-logo', className]} src={src} style={`width:${size};height:${size};${customStyle}`}></img>
-        {isShowStatus ? <span class={['user-status', onlineStatus]}></span> : ''}
-      </div>
-    ) : (
-      <div class="avatar-wrap">
-        <div class={['avatar-logo', className]} style={`width:${size};${customStyle}`}>
-          <div class="avatar-logo-content" data-name={name}></div>
-        </div>
-        {isShowStatus ? <span class={['user-status', onlineStatus]}></span> : ''}
-      </div>
-    );
-  }
-};
-</script>
-<style lang="less" scoped>
-.avatar-wrap {
-  position: relative;
-  .user-status {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    border: 1px solid #fff;
-    position: absolute;
-    background-color: #ccc;
-    right: 22px;
-    bottom: 2px;
-    &.online {
-      background-color: rgb(12, 198, 133);
-    }
-    &.offline {
-      background-color: rgb(217, 0, 27);
-    }
-  }
-  .avatar-logo {
-    width: 50px;
-    border-radius: 50%;
-    font-size: 18px;
-    line-height: 1;
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: middle;
-    &-content {
-      width: 100%;
-      padding-top: 100%;
-      height: 0;
-      text-align: center;
-      position: relative;
-      color: #fff;
-      background-color: #5585f5;
-      &::after {
-        content: attr(data-name);
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-</style>