add

src/components/LemonUI/components/editor.vue

@@ -278,10 +278,13 @@ export default {
       this._checkSubmitDisabled();
     },
     async selectFile(accept) {
-      // this.accept = accept;
-      // await this.$nextTick();
-      // this.$refs.fileInput.click();
-      this.$emit("pickImg", this.clipboardBlob);
+        if(accept=="*"){
+            this.accept = accept;
+            await this.$nextTick();
+            this.$refs.fileInput.click();
+        }else{
+            this.$emit("pickImg", this.clipboardBlob);
+        }
     },
     _handlePaste(e) {
       e.preventDefault();

src/components/LemonUI/components/message/elise-audio.vue

@@ -0,0 +1,158 @@
+<template>
+	<view v-if='url' class='flex audio' :class="{active:status}" :style="{width:getWith(durationS),  background:audioColor}"  @click='play(audioId)' >
+		<view class='mr-3' >
+			<view class="wifi-symbol " :class="status?'active':''">
+            <view class="wifi-circle first"></view>
+            <view class="wifi-circle second"></view>
+            <view class="wifi-circle third"></view>
+        </view>
+		</view>
+		<view class='ml-3'>{{durationS ? durationS + 's' : ''}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				context: null,
+				duration: 100,
+				status: false,
+			}
+		},
+		props: {
+			url: {
+        type:String,
+        default:''
+      },
+			audioColor: {
+				type: String,
+				default: '#5ba5ef'
+			},
+      durationS:[String,Number],
+			audioId: [String,Number]
+		},
+		created() {
+			this.context = uni.createInnerAudioContext();
+			this.context.src = this.url;
+			this.onEnded();
+			uni.$on('stop',(id)=> {
+				if(id && id != this.audioId) {
+					this.context.stop();
+					this.status = false;
+				} else if(!id){
+					this.context.stop();
+					this.status = false;
+				}
+			})
+		},
+		methods: {
+			play(id) { //点击播放
+				if(this.status) {
+					this.context.pause();
+					this.status = !this.status;
+				}else {
+					uni.$emit('stop',id)
+					this.context.play()
+					this.status = !this.status;
+				}
+			},
+			onEnded() { //播放结束
+				this.context.onEnded(()=> {
+					this.status = false;
+				})
+			},
+      getWith(s){
+        if(s){
+          const w = s *10 + 150
+           return  w > 520?'520rpx' :(s *10 + 150)+'rpx'
+        }
+      },
+		}
+	}
+</script>
+
+<style  lang="scss">
+	.audio {
+		background: #68d7bb;
+    height: 58rpx;
+    border-radius: 50rpx;
+    width: 200rpx;
+    align-items: center;
+		// padding: 20rpx;
+    &.active {
+		  opacity: 0.8;
+    }
+    
+	}
+	.flex {
+		display: flex;
+		flex-direction: row;
+    justify-content: space-between;
+	}
+	.flex-1 {
+		flex: 1;
+	}
+	.ml-3 {
+		margin-right: 30rpx;
+    color: #fff;
+	}
+	.mr-3 {
+		margin-left: 30rpx;
+	}
+  .wifi-symbol {
+      width: 50rpx;
+      height: 50rpx;
+      box-sizing: border-box;
+      overflow: hidden;
+      transform: rotate(135deg) translate3d(0, 0, 0);
+      -webkit-transform: rotate(135deg) translate3d(0, 0, 0);
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+  }
+  .wifi-circle {
+      border: 5rpx solid #fff;
+      border-radius: 50%;
+      position: absolute;
+  }
+  .first {
+      width: 5rpx;
+      height: 5rpx;
+      background: #fff;
+      top: 45rpx;
+      left: 45rpx;
+  }
+  .second {
+      width: 25rpx;
+      height: 25rpx;
+      top: 35rpx;
+      left: 35rpx;
+  }
+  .third {
+      width: 40rpx;
+      height: 40rpx;
+      top: 25rpx;
+      left: 25rpx;
+  }
+  .active {
+     .second {
+        animation: fadeInOut 1s infinite 0.2s;
+       -webkit-animation: fadeInOut 1s infinite 0.2s;
+    }
+
+    .third {
+        animation: fadeInOut 1s infinite 0.4s;
+        -webkit-animation: fadeInOut 1s infinite 0.4s;
+    }
+  }
+
+  @keyframes fadeInOut {
+      0% {
+          opacity: 0; /*初始状态 透明度为0*/
+      }
+      100% {
+          opacity: 1; /*结尾状态 透明度为1*/
+      }
+  }
+
+</style>

src/components/LemonUI/components/message/voice.vue

@@ -3,6 +3,16 @@ export default {
   name: "lemonMessageVoice",
   inheritAttrs: false,
   inject: ["IMUI"],
+  data() {
+    return {
+        context: null,
+				duration: 100,
+				status: false,
+    };
+  },
+  	created() {
+			
+		},
   render() {
     return (
       <lemon-message-basic
@@ -10,21 +20,148 @@ export default {
         props={{ ...this.$attrs }}
         scopedSlots={{
           content: props => {
-            return <span>{props.content}&nbsp;🔈</span>;
+            console.log("qxj props:"+JSON.stringify(props));
+            return  this.renderHtml(props);
           }
         }}
       />
     );
+  },
+   methods: {
+      renderHtml(data){  
+               
+        return <audio block="true" showDuration='false' duration={data.duration} controls src={data.content}  ></audio>;
+        // return <span>{props.content}&nbsp;🔈</span>;
+      },
+
+      renderNew(data){
+       //this.context.src = data.url;
+       return  <view  class='flex audio active'  style='width:520rpx,  background:#5ba5ef'  click='play(1)' >
+                    <view class='mr-3' >
+                      <view class='wifi-symbol status'>
+                            <view class="wifi-circle first"></view>
+                            <view class="wifi-circle second"></view>
+                            <view class="wifi-circle third"></view>
+                        </view>
+                    </view>
+                 <view class='ml-3'>{data.duration ? data.duration + 's' : ''}</view>
+             </view>
+      },
+      play(id) { //点击播放
+        console.log("qxj play:"+id);
+				if(this.status) {
+					this.context.pause();
+					this.status = !this.status;
+				}else {
+					uni.$emit('stop',id)
+					this.context.play()
+					this.status = !this.status;
+				}
+			},
+			onEnded() { //播放结束
+				this.context.onEnded(()=> {
+					this.status = false;
+				})
+			},
+      getWith(s){
+        if(s){
+          const w = s *10 + 150
+           return  w > 520?'520rpx' :(s *10 + 150)+'rpx'
+        }
+      },
+
+
   }
 };
 </script>
+
 <style lang="stylus">
+
 .lemon-message.lemon-message-voice
   user-select none
   .lemon-message__content
-    border 2px solid #000
+    border 0px solid #000
     font-size 12px
     cursor pointer
     &::before
       display none
+
+
+
+      .audio 
+          background #68d7bb
+          height 58rpx
+          border-radius 50rpx
+          width 200rpx
+          align-items center
+        
+          
+      .flex 
+        display flex
+        flex-direction row
+        justify-content space-between
+        
+        .flex-1 
+          flex 1
+        
+        .ml-3 
+          margin-right 30rpx
+          color #fff
+        
+        .mr-3 
+          margin-left 30rpx
+        
+        .wifi-symbol 
+            width 50rpx
+            height 50rpx
+            box-sizing border-box
+            overflow hidden
+            transform rotate(135deg) translate3d(0, 0, 0)
+            -webkit-transform rotate(135deg) translate3d(0, 0, 0)
+            backface-visibility hidden
+            -webkit-backface-visibility hidden
+        
+        .wifi-circle 
+            border 5rpx solid #fff
+            border-radius 50%
+            position absolute
+        
+        .first 
+            width 5rpx
+            height 5rpx
+            background #fff
+            top 45rpx
+            left 45rpx
+        
+        .second 
+            width 25rpx
+            height 25rpx
+            top 35rpx
+            left 35rpx
+        
+        .third 
+            width 40rpx
+            height 40rpx
+            top 25rpx
+            left 25rpx
+        
+        .active 
+          .second 
+              animation fadeInOut 1s infinite 0.2s
+            -webkit-animation fadeInOut 1s infinite 0.2s
+          
+
+          .third 
+              animation fadeInOut 1s infinite 0.4s
+              -webkit-animation fadeInOut 1s infinite 0.4s
+    
+  
+  @keyframes fadeInOut 
+      0% 
+        opacity 0 
+      
+      100% 
+        opacity 1
+      
+
 </style>

src/components/LemonUI/index.js

@@ -14,6 +14,7 @@ import lemonMessageFile from "./components/message/file";
 import lemonMessageEvent from "./components/message/event";
 import LemonMessageVoice from "./components/message/voice";
 
+
 import LemonIMUI from "./components/index";
 import "./styles/common/index.styl";
 const version = "1.4.2";

src/components/Material/index.vue

@@ -76,8 +76,7 @@
                     :before-upload="beforeUpload"
                     :on-success="handleSuccess"
                     :data="multipartFile"
-                    multiple
-                  >
+                    multiple>
                     <el-button size="small" type="primary">批量上传</el-button>
                   </el-upload>
                 </el-col>
@@ -90,8 +89,7 @@
                 type="info"
                 :closable="false"
                 center
-                show-icon
-              />
+                show-icon/>
               <el-row :gutter="5">
                 <el-checkbox-group v-model="urls" :max="num - value.length">
                   <el-col v-for="(item,index) in tableData" :key="index" :span="4" >
@@ -365,7 +363,7 @@ export default {
       var data=this.tableData.find(item =>  item.url == this.urls) || {};
       this.$emit('pickImageData', data);
       this.listDialogVisible = false;
-      this.urls=null;
+      this.urls=[];
     }
   }
 }

src/components/elise-audio/elise-audio.vue

@@ -0,0 +1,158 @@
+<template>
+	<view v-if='url' class='flex audio' :class="{active:status}" :style="{width:getWith(durationS),  background:audioColor}"  @click='play(audioId)' >
+		<view class='mr-3' >
+			<view class="wifi-symbol " :class="status?'active':''">
+            <view class="wifi-circle first"></view>
+            <view class="wifi-circle second"></view>
+            <view class="wifi-circle third"></view>
+        </view>
+		</view>
+		<view class='ml-3'>{{durationS ? durationS + 's' : ''}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				context: null,
+				duration: 100,
+				status: false,
+			}
+		},
+		props: {
+			url: {
+        type:String,
+        default:''
+      },
+			audioColor: {
+				type: String,
+				default: '#5ba5ef'
+			},
+      durationS:[String,Number],
+			audioId: [String,Number]
+		},
+		created() {
+			this.context = uni.createInnerAudioContext();
+			this.context.src = this.url;
+			this.onEnded();
+			uni.$on('stop',(id)=> {
+				if(id && id != this.audioId) {
+					this.context.stop();
+					this.status = false;
+				} else if(!id){
+					this.context.stop();
+					this.status = false;
+				}
+			})
+		},
+		methods: {
+			play(id) { //点击播放
+				if(this.status) {
+					this.context.pause();
+					this.status = !this.status;
+				}else {
+					uni.$emit('stop',id)
+					this.context.play()
+					this.status = !this.status;
+				}
+			},
+			onEnded() { //播放结束
+				this.context.onEnded(()=> {
+					this.status = false;
+				})
+			},
+      getWith(s){
+        if(s){
+          const w = s *10 + 150
+           return  w > 520?'520rpx' :(s *10 + 150)+'rpx'
+        }
+      },
+		}
+	}
+</script>
+
+<style  lang="scss">
+	.audio {
+		background: #68d7bb;
+    height: 58rpx;
+    border-radius: 50rpx;
+    width: 200rpx;
+    align-items: center;
+		// padding: 20rpx;
+    &.active {
+		  opacity: 0.8;
+    }
+    
+	}
+	.flex {
+		display: flex;
+		flex-direction: row;
+    justify-content: space-between;
+	}
+	.flex-1 {
+		flex: 1;
+	}
+	.ml-3 {
+		margin-right: 30rpx;
+    color: #fff;
+	}
+	.mr-3 {
+		margin-left: 30rpx;
+	}
+  .wifi-symbol {
+      width: 50rpx;
+      height: 50rpx;
+      box-sizing: border-box;
+      overflow: hidden;
+      transform: rotate(135deg) translate3d(0, 0, 0);
+      -webkit-transform: rotate(135deg) translate3d(0, 0, 0);
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+  }
+  .wifi-circle {
+      border: 5rpx solid #fff;
+      border-radius: 50%;
+      position: absolute;
+  }
+  .first {
+      width: 5rpx;
+      height: 5rpx;
+      background: #fff;
+      top: 45rpx;
+      left: 45rpx;
+  }
+  .second {
+      width: 25rpx;
+      height: 25rpx;
+      top: 35rpx;
+      left: 35rpx;
+  }
+  .third {
+      width: 40rpx;
+      height: 40rpx;
+      top: 25rpx;
+      left: 25rpx;
+  }
+  .active {
+     .second {
+        animation: fadeInOut 1s infinite 0.2s;
+       -webkit-animation: fadeInOut 1s infinite 0.2s;
+    }
+
+    .third {
+        animation: fadeInOut 1s infinite 0.4s;
+        -webkit-animation: fadeInOut 1s infinite 0.4s;
+    }
+  }
+
+  @keyframes fadeInOut {
+      0% {
+          opacity: 0; /*初始状态 透明度为0*/
+      }
+      100% {
+          opacity: 1; /*结尾状态 透明度为1*/
+      }
+  }
+
+</style>

src/components/elise-audio/redme.md

@@ -0,0 +1,40 @@
+## 参数
+
+| url      | audioColor | durationS       | audioId         |                                               |
+| -------- | ----------- | -------------- | -------------- | ----------------------------------------------------- |
+| 音频链接 | 背景颜色  | 音频长度 | 组件id | 
+
+## 使用方法
+
+```javascript
+//html
+<template>
+  <elise-audio
+    audioId="audio1"
+    :url="url"
+    audioColor="#68d7bb"
+    :durationS="5"
+  ></elise-audio>
+</template>
+
+//js
+<script>
+import eliseAudio from '@/components/elise-audio/elise-audio.vue'
+export default {
+    components: {eliseAudio},
+    data() {
+        return{
+            url: ''
+        }
+    },
+    methods: {
+      //暂停播放-
+      onPauseAudio(){
+        uni.$emit('stop')
+      }
+    },
+} 
+</script>
+
+```
+

src/views/qw/qwChat/qq.vue

@@ -567,7 +567,7 @@ export default {
     
     //收到消息后添加消息显示
     appendMessageAction(msgData){
-          if(msgData.type=="text"){   //文本   text  image  video  voice 
+          if(msgData.type=="text" || msgData.type=="image" || msgData.type=="voice"){     //文本   text  image  video  voice 
               const message = {
                     id: msgData.id,
                     status: msgData.status,
@@ -581,7 +581,7 @@ export default {
               };
               this.appendRemoteMessage(message);
            }
-           if(msgData.type=="image"){   //图片
+           else{
               const message = {
                     id: msgData.id,
                     status: msgData.status,
@@ -593,18 +593,8 @@ export default {
               };
               this.appendRemoteMessage(message);
            }
-           if(msgData.type=="voice"){   //音频
-              const message = {
-                    id: msgData.id,
-                    status: msgData.status,
-                    type: msgData.type,
-                    sendTime: msgData.sendTime,
-                    url: msgData.content,
-                    toContactId: msgData.toContactId,
-                    fromUser: msgData.fromUser,
-              };
-              this.appendRemoteMessage(message);
-           }
+
+           
     },
 
     //发送消息