即时通讯

src/main/java/com/supplier/config/InterceptConfig.java

@@ -33,6 +33,6 @@ public class InterceptConfig implements WebMvcConfigurer {
     public void addInterceptors(InterceptorRegistry registry) {
         registry.addInterceptor(new JWTIntercept())
                 .addPathPatterns("/**")   // 正常情况下 拦截所有请求/**，因测试需要就先拦截/user/test
-                .excludePathPatterns("/page/*", "/js/**", "/css/**", "/images/**", "/layui/**", "/remixicon/**", "/wxpay/**");  //放心登录接口，因为要通过登录获取token
+                .excludePathPatterns("/page/*", "/js/**", "/css/**", "/images/**", "/layui/**", "/remixicon/**", "/wxpay/**", "http://a1-v2.easemob.com/**", "http://39.97.9.52/*", "http://47.95.246.247/**", "ws://39.102.159.61/**");  //放心登录接口，因为要通过登录获取token
     }
 }

src/main/resources/static/css/demandForSingle/offer.css

@@ -266,6 +266,7 @@
     height: 100%;
     resize: none;
     border: unset;
+    font-size: 16px;
 }
 .editor-assets[data-v-400c2eb9] {
     margin-top: 24px;
@@ -481,6 +482,7 @@
 }
 .select_template{
     width: 236px;
+    min-width: 236px;
     height: 60px;
     background: #0095f3;
     border-radius: 30px;
@@ -550,6 +552,7 @@
 .name_private_offer span{
     float: left;
     width: 150px;
+    min-width: 150px;
     font-size: 18px;
     font-family: PingFang SC, PingFang SC-Bold;
     font-weight: 700;

src/main/resources/static/css/indexHome/index.css

@@ -177,4 +177,403 @@ cite img{
 }
 .layui-nav-tree .layui-nav-child, .layui-nav-tree .layui-nav-child a:hover{
     background: #0095F3 0 0;
+}
+.chat__room-wrapper {
+    --chat-room-title-height: 100px;
+    --chat-room-title-border-color: #e6e6e6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+}
+.van-popup--center {
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%,-50%,0);
+}
+.van-popup {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background: #fff;
+    transition: transform .3s;
+    -webkit-overflow-scrolling: touch;
+    border-radius: 20px;
+    display: none;
+}
+.chat__room {
+    display: flex;
+    width: 1200px;
+    overflow: hidden;
+    background-color: #fff;
+    height: 768px;
+    max-height: 90vh;
+}
+.chat__room-session-list {
+    display: flex;
+    flex: 1 1;
+    flex-direction: column;
+    height: 100%;
+    padding: 0 36px;
+    overflow: auto;
+}
+.chat__room-session-search {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100px;
+}
+.chat__room-session-search-info {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 54px;
+    padding: 0 22px;
+    background-color: #f2f6ff;
+    border-radius: 27px;
+}
+.chat__room-session-search-info svg {
+    width: 22px;
+    color: #434343;
+}
+.chat__room-session-search-info input {
+    flex: 1 1;
+    min-width: 0;
+    padding-left: 32px;
+    margin-left: 32px;
+    font-size: 16px;
+    background-color: transparent;
+    border: unset;
+    border-left: 1px solid #d1d1d1;
+}
+.chat__room-session-group {
+    flex: 1 1;
+    overflow: hidden;
+}
+.el-scrollbar {
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+}
+.el-scrollbar {
+    --el-scrollbar-opacity: .3;
+    --el-scrollbar-bg-color: #909399;
+    --el-scrollbar-hover-opacity: .5;
+    --el-scrollbar-hover-bg-color: #909399;
+}
+.el-scrollbar__wrap {
+    overflow: auto;
+    height: 100%;
+}
+.chat__room-session-item {
+    position: relative;
+    display: flex;
+    padding: 12px;
+    cursor: pointer;
+}
+.chat__room-session-item img {
+    width: 60px;
+    height: 60px;
+    border-radius: 6px;
+    object-fit: cover;
+}
+.chat__room-session-item-unread {
+    position: absolute;
+    top: 6px;
+    left: 56px;
+    width: 20px;
+    height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #fff;
+    text-align: center;
+    background-color: red;
+    border-radius: 50%;
+}
+.chat__room-user {
+    display: flex;
+    flex: 1 1;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 2px 0;
+    margin-left: 22px;
+    overflow: hidden;
+}
+.chat__room-user p:first-child {
+    font-size: 16px;
+    font-weight: 700;
+    color: #333;
+}
+.chat__room-user p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.chat__room-user-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.chat__room-user p:last-child {
+    font-size: 14px;
+    color: #666;
+}
+.chat__room-user p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.el-scrollbar__bar.is-horizontal {
+    height: 6px;
+    left: 2px;
+}
+.el-scrollbar__bar {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1;
+    border-radius: 4px;
+}
+.el-scrollbar__bar.is-horizontal>div {
+    height: 100%;
+}
+.el-scrollbar__thumb {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-radius: inherit;
+    background-color: #909399;
+    transition: .3s background-color;
+    opacity: .3;
+}
+.el-scrollbar__bar.is-vertical {
+    width: 6px;
+    top: 2px;
+}
+.chat__room-info {
+    display: flex;
+    flex-direction: column;
+    width: 800px;
+    padding: 0 50px;
+    overflow: hidden;
+    background-color: #f2f6ff;
+}
+.chat__room-info-title {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: 100px;
+    border-bottom: 1px solid #e6e6e6;
+}
+.chat__room-info-title h4 {
+    flex: 1 1;
+    margin-right: 14px;
+    overflow: hidden;
+    font-size: 24px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.chat__room-info-title img {
+    display: none;
+    width: 22px;
+    margin-right: 6px;
+}
+.chat__room-info-title svg {
+    display: none;
+    width: 20px;
+    color: #999;
+    cursor: pointer;
+    transition: transform .3s;
+}
+.chat__room-content-scroll {
+    flex: 1 1;
+}
+.chat__room-content {
+    padding: 20px;
+}
+.chat__room-message {
+    display: flex;
+    margin-bottom: 20px;
+    white-space: pre-line;
+}
+.chat__room-message .avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.chat__room-message-text-wrapper {
+    position: relative;
+    max-width: 50%;
+    min-height: 30px;
+    padding: 10px;
+    font-size: 14px;
+    color: #fff;
+    background-color: #0095f3;
+    border-radius: 12px;
+    border-top-left-radius: unset;
+    word-break: break-all;
+}
+.chat__room-message-text-wrapper p {
+    padding: 0 14px;
+}
+.chat__room-message-text-wrapper p:nth-child(2) {
+    padding-top: 6px;
+    margin-top: 6px;
+    font-size: 12px;
+    color: inherit;
+    border-top: 1px solid #eee;
+}
+.chat__room-info-input {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 20px 16px;
+    border-top: 1px solid #e6e6e6;
+}
+.chat__room-info-input {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 20px 16px;
+    border-top: 1px solid #e6e6e6;
+}
+.chat__room-info-control svg {
+    width: 26px;
+    cursor: pointer;
+    fill: #0095f3;
+}
+.chat__room-info-input textarea {
+    flex: 1 1;
+    margin-bottom: 10px;
+    font-size: 14px;
+    resize: none;
+    background-color: transparent;
+    border: unset;
+}
+.chat__room-message-text {
+    --chat-message-color: #0095f3;
+    --chat-message-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    margin-left: 12px;
+}
+.chat__room-message-text-info {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+.chat__room-message-text-info .arrow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 16px;
+    height: 50%;
+    margin-top: 0;
+    overflow: hidden;
+    content: "";
+    background-color: #0095f3;
+    transform: translate(-11px);
+}
+.chat__room-message-text-info .arrow:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 200%;
+    height: 200%;
+    content: "";
+    background-color: #f2f6ff;
+    border-radius: 50%;
+    transform: translate3d(-66%,0,0);
+}
+.chat__room-message-text span {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #999;
+}
+.chat__room-message-reverse {
+    flex-direction: row-reverse;
+}
+.chat__room-message-reverse .chat__room-message-text {
+    --chat-message-color: white;
+    align-items: flex-end;
+    margin-right: 12px;
+}
+.chat__room-message-reverse .chat__room-message-text .chat__room-message-text-info {
+    justify-content: flex-end;
+}
+.chat__room-message-reverse .chat__room-message-text-wrapper {
+    margin-left: unset;
+    color: #333;
+    border-top-left-radius: 12px;
+    border-top-right-radius: unset;
+    background-color: white;
+}
+.chat__room-message-reverse .arrow {
+    right: 0;
+    left: unset;
+    background-color: #fff;
+    transform: translate(11px) rotateY(180deg);
+}
+.chat__room-message-img {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 12px;
+}
+.chat__room-message-img .el-image {
+    max-width: 300px;
+    max-height: 500px;
+    cursor: pointer;
+}
+.el-image {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+}
+.chat__room-message-img .el-image img {
+    width: 100%;
+}
+.el-image__preview {
+    cursor: pointer;
+}
+.el-image__inner {
+    vertical-align: top;
+}
+.chat__room-message-img span {
+    display: block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: #999;
+    text-align: left;
+}
+.chat__room-user-title span:last-child {
+    font-size: 14px;
+    color: #666;
+}
+.chat__room-user-title span:first-child {
+    display: block;
+    flex: 1 1;
+    margin-right: 10px;
+    overflow: hidden;
+    font-size: 20px;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.chat__room-message-reverse .chat__room-message-img {
+    align-items: flex-end;
+    margin-right: 12px;
 }

src/main/resources/static/js/custom.js

@@ -353,4 +353,29 @@ function tablespan(tb1, find) {
 			}
 		}
 	}
+}
+//时间戳转换时间
+function add0(m){return m<10?'0'+m:m }
+//年月日时分秒
+function format(shijianchuo){
+	//是整数，否则要parseInt转换
+	var time = new Date(shijianchuo);
+	var y = time.getFullYear();
+	var m = time.getMonth()+1;
+	var d = time.getDate();
+	var h = time.getHours();
+	var mm = time.getMinutes();
+	var s = time.getSeconds();
+	return y+'-'+add0(m)+'-'+add0(d)+'|'+add0(h)+':'+add0(mm);
+}
+function formatNotss(shijianchuo){
+	//是整数，否则要parseInt转换
+	var time = new Date(shijianchuo);
+	var y = time.getFullYear();
+	var m = time.getMonth()+1;
+	var d = time.getDate();
+	var h = time.getHours();
+	var mm = time.getMinutes();
+	var s = time.getSeconds();
+	return y+'-'+add0(m)+'-'+add0(d)+ " " +add0(h)+':'+add0(mm)+":"+add0(s);
 }

src/main/resources/static/js/demandForSingle/offer/even.js

@@ -10,4 +10,10 @@ var addDate = null;
 var delteDate = null;
 var titleImg = null;
 var contractFile = null;//合同
+var now = new Date();
+var year = now.getFullYear(); //得到年份
+var month = now.getMonth()+1;//得到月份
+var date = now.getDate();//得到日期
+var nowTime = year + "-" + month + "-" + date
+
 var token = "07E20E117812C34B244EA73B99A65918CAD573DFB012FC523FD3CDA2E259EA06BC98731115C4DEFFF5C1226FE6DF81058A9E695C6C9BFF9BF5FBB7E7B96321821035BC7A5F3A72D83A63C8908F50DC71F2423C6B8589BE4D3CDE5714316AA5A7D61AD9E960E16E3A314D749FD7E91FA2973B42BE93AD177C9780E168022E7D8E09262E2F43C7060B38054CC7B5B6528EA32A51D05B2C9F1DBBE4676C13CD1F6EA455DC12032EE6C2";

src/main/resources/static/js/demandForSingle/offer/function.js

@@ -38,6 +38,8 @@ function operationOut(obj){
 }
 //新增天
 function addDay(addTiemVal){
+    console.log(nowTime)
+    console.log(addTiemVal)
    var uuid = guid();
    var dayNum = $(".pre-actived").attr("dayNum");
     $(".timeline ul").find("li").removeClass("pre-actived");
@@ -52,7 +54,7 @@ function addDay(addTiemVal){
         "                    <div class=\"layui-input-inline\">\n" +
         "                        <div class=\"date_content_div\">\n" +
         "                            <img class=\"date_content_img\" src=\"/images/demandForSingle/date.png\">\n" +
-        "                            <input value="+ (addTiemVal == null ? new Data() : addTiemVal) +" type=\"text\" class=\"layui-input date_content_input select_date_input"+ uuid +"\" name='planDate' placeholder=\"请输入时间 年.月.日\" lay-key=\"1\" readonly = \"readonly\">\n" +
+        "                            <input value="+ (addTiemVal == null ? nowTime : addTiemVal) +" type=\"text\" class=\"layui-input date_content_input select_date_input"+ uuid +"\" name='planDate' placeholder=\"请输入时间 年.月.日\" lay-key=\"1\" readonly = \"readonly\">\n" +
         "                        </div>\n" +
         "                    </div>\n" +
         "                </div>\n" +
@@ -120,7 +122,7 @@ function addDay(addTiemVal){
         "                            </svg>\n" +
         "                        </div>\n" +
         "                        <div class=\"icon-group\" data-v-67b53f28=\"\">\n" +
-        "                            <div class=\"icon-item\" data-v-67b53f28=\"\" onclick=\"addDay(this)\">\n" +
+        "                            <div class=\"icon-item\" data-v-67b53f28=\"\" onclick=\"addDay(\'"+ nowTime +"\')\")\">\n" +
         "                                <i class=\"icon icon-dir\" data-v-67b53f28=\"\"></i>\n" +
         "                                <span data-v-67b53f28=\"\">添加目录/天</span>\n" +
         "                            </div>\n" +
@@ -193,7 +195,7 @@ function addDay(addTiemVal){
         "                            </svg>\n" +
         "                        </div>\n" +
         "                        <div class=\"icon-group\" data-v-67b53f28=\"\">\n" +
-        "                           <div class=\"icon-item\" data-v-67b53f28=\"\" onClick=\"addDay(this)\">\n" +
+        "                           <div class=\"icon-item\" data-v-67b53f28=\"\" onClick=\"addDay(\'"+ nowTime +"\')\")\">\n" +
         "                               <i class=\"icon icon-dir\" data-v-67b53f28=\"\"></i>\n" +
         "                               <span data-v-67b53f28=\"\">添加目录/天</span>\n" +
         "                            </div>\n" +
@@ -312,7 +314,7 @@ function addUrl(uuid){
             ,acceptMime: 'video/*'
             ,headers: {token: token}
             ,done: function(res){
-                $(this.item[0]).parent().next().append("<video src="+ res.data +" controls=\"\" data-v-400c2eb9=\"\"></video>");
+                $(this.item[0]).parent().next().append("<video src="+ res.data +" controls=\"\" onclick='clickVideo(this)' data-v-400c2eb9=\"\"></video>");
             }
             ,error: function(){
                 //请求异常回调
@@ -329,7 +331,7 @@ function addUrl(uuid){
             ,headers: {token: token}
             ,done: function(res){
                 $(this.item[0]).parent().next().append("<div class=\"editor-assets-content-info\" data-v-400c2eb9=\"\">\n" +
-                    "                                    <div class=\"el-image\" data-v-400c2eb9=\"\"><img style='width: 100px;height: 100px;' alt=\"upload-assets\"\n" +
+                    "                                    <div class=\"el-image\" data-v-400c2eb9=\"\"><img style='width: 100px;height: 100px;' onclick='clickImg(this)' alt=\"upload-assets\"\n" +
                     "                                                                                  src="+ res.data +"\n" +
                     "                                                                                  class=\"el-image__inner el-image__preview\"\n" +
                     "                                                                                  style=\"object-fit: cover;\"><!--v-if-->\n" +
@@ -347,7 +349,7 @@ function addUrl(uuid){
 
         laydate1.render({
             elem: '.select_date_input' + uuid
-            ,format: 'yyyy.MM.dd'
+            ,format: 'yyyy-MM-dd'
         });
 
         laydate.render({
@@ -478,7 +480,7 @@ function elementDrawing(data){
                 "                            </svg>\n" +
                 "                        </div>\n" +
                 "                        <div class=\"icon-group\" data-v-67b53f28=\"\">\n" +
-                "                            <div class=\"icon-item\" data-v-67b53f28=\"\" onClick=\"addDay(this)\">\n" +
+                "                            <div class=\"icon-item\" data-v-67b53f28=\"\" onClick=\"addDay(\'"+ nowTime +"\')\")\">\n" +
                 "                                <i class=\"icon icon-dir\" data-v-67b53f28=\"\"></i>\n" +
                 "                                <span data-v-67b53f28=\"\">添加目录/天</span>\n" +
                 "                            </div>\n" +
@@ -499,10 +501,10 @@ function elementDrawing(data){
                 "                        </div>\n" +
                 "                        <div class=\"editor-assets\" data-v-400c2eb9=\"\">\n" +
                 "                            <div class=\"editor-assets-control\" data-v-400c2eb9=\"\">\n" +
-                "                                <div class=\"editor-assets-control-item file_videos\" data-v-400c2eb9=\"\"><i\n" +
+                "                                <div class=\"editor-assets-control-item file_videos"+ uuid +"\" data-v-400c2eb9=\"\"><i\n" +
                 "                                        class=\"assets-icon assets-videos-icon\" data-v-400c2eb9=\"\"></i><span\n" +
                 "                                        data-v-400c2eb9=\"\">插入视频</span></div>\n" +
-                "                                <div class=\"editor-assets-control-item file_img file_margin\" data-v-400c2eb9=\"\"><i\n" +
+                "                                <div class=\"editor-assets-control-item file_img"+ uuid +" file_margin\" data-v-400c2eb9=\"\"><i\n" +
                 "                                        class=\"assets-icon assets-images-icon\" data-v-400c2eb9=\"\"></i><span\n" +
                 "                                        data-v-400c2eb9=\"\">插入图片</span></div>\n" +
                 "                            </div>\n" +
@@ -527,10 +529,10 @@ function elementDrawing(data){
                 "                        </div>\n" +
                 "                        <div class=\"editor-assets\" data-v-400c2eb9=\"\">\n" +
                 "                            <div class=\"editor-assets-control\" data-v-400c2eb9=\"\">\n" +
-                "                                <div class=\"editor-assets-control-item file_videos\" data-v-400c2eb9=\"\"><i\n" +
+                "                                <div class=\"editor-assets-control-item file_videos"+ uuid +"\" data-v-400c2eb9=\"\"><i\n" +
                 "                                        class=\"assets-icon assets-videos-icon\" data-v-400c2eb9=\"\"></i><span\n" +
                 "                                        data-v-400c2eb9=\"\">插入视频</span></div>\n" +
-                "                                <div class=\"editor-assets-control-item file_img file_margin\" data-v-400c2eb9=\"\"><i\n" +
+                "                                <div class=\"editor-assets-control-item file_img"+ uuid +" file_margin\" data-v-400c2eb9=\"\"><i\n" +
                 "                                        class=\"assets-icon assets-images-icon\" data-v-400c2eb9=\"\"></i><span\n" +
                 "                                        data-v-400c2eb9=\"\">插入图片</span></div>\n" +
                 "                            </div>\n" +
@@ -552,7 +554,7 @@ function elementDrawing(data){
                 "                            </svg>\n" +
                 "                        </div>\n" +
                 "                        <div class=\"icon-group\" data-v-67b53f28=\"\">\n" +
-                "                            <div class=\"icon-item\" data-v-67b53f28=\"\" onClick=\"addDay(this)\">\n" +
+                "                            <div class=\"icon-item\" data-v-67b53f28=\"\" onClick=\"addDay(\'"+ nowTime +"\')\">\n" +
                 "                                <i class=\"icon icon-dir\" data-v-67b53f28=\"\"></i>\n" +
                 "                                <span data-v-67b53f28=\"\">添加目录/天</span>\n" +
                 "                            </div>\n" +
@@ -567,7 +569,7 @@ function elementDrawing(data){
         var videoUrlArray = elem.videoUrl == null ? new Array() : elem.videoUrl.split(",");
         for(var i = 0; i < imgUrlArray.length; i++){
             $("."+ elem.uuid + "-" + elem.typeVal +" .editor-assets-content").append("<div class=\"editor-assets-content-info\" data-v-400c2eb9=\"\">\n" +
-                "                                    <div class=\"el-image\" data-v-400c2eb9=\"\"><img style='width: 100px;height: 100px;' alt=\"upload-assets\"\n" +
+                "                                    <div class=\"el-image\" data-v-400c2eb9=\"\"><img style='width: 100px;height: 100px;' onclick='clickImg(this)' alt=\"upload-assets\"\n" +
                 "                                                                                  src="+ imgUrlArray[i] +"\n" +
                 "                                                                                  class=\"el-image__inner el-image__preview\"\n" +
                 "                                                                                  style=\"object-fit: cover;\"><!--v-if-->\n" +
@@ -863,4 +865,28 @@ function selectTemplate(uuidTemplate){
 //选择模板
 function clickTemplae(obj){
     $(obj).addClass("order-selected");
+}
+//全屏预览图片
+function clickImg(obj){
+    var imgUrl = $(obj).attr("src");
+    layer.open({
+        type: 1,
+        title: false,
+        area: ['600px', '80%'],
+        closeBtn: 2,
+        anim: 2,
+        content: "<img src='"+ imgUrl +"' width='100%' height='100%'/>"
+    })
+}
+//全屏预览视频
+function clickVideo(obj){
+    var videoUrl = $(obj).attr("src");
+    layer.open({
+        type: 1,
+        title: false,
+        area: ['600px', '80%'],
+        closeBtn: 2,
+        anim: 2,
+        content: "<video src="+ videoUrl +" controls=\"\" data-v-400c2eb9=\"\"></video>"
+    })
 }

src/main/resources/static/js/demandForSingle/offer/index.js

@@ -13,7 +13,7 @@ layui.use(["layer", "form", "laydate", "upload"], function(){
         ,acceptMime: 'video/*'
         ,headers: {token: token}
         ,done: function(res){
-            $(this.item[0]).parent().next().append("<video src="+ res.data +" controls=\"\" data-v-400c2eb9=\"\"></video>");
+            $(this.item[0]).parent().next().append("<video src="+ res.data +" onclick='clickVideo(this)' controls=\"\" data-v-400c2eb9=\"\"></video>");
         }
         ,error: function(){
             //请求异常回调
@@ -30,7 +30,7 @@ layui.use(["layer", "form", "laydate", "upload"], function(){
         ,headers: {token: token}
         ,done: function(res){
             $(this.item[0]).parent().next().append("<div class=\"editor-assets-content-info\" data-v-400c2eb9=\"\">\n" +
-                "                                    <div class=\"el-image\" data-v-400c2eb9=\"\"><img style='width: 100px;height: 100px;' alt=\"upload-assets\"\n" +
+                "                                    <div class=\"el-image\" data-v-400c2eb9=\"\"><img style='width: 100px;height: 100px;' onclick='clickImg(this)' alt=\"upload-assets\"\n" +
                 "                                                                                  src="+ res.data +"\n" +
                 "                                                                                  class=\"el-image__inner el-image__preview\"\n" +
                 "                                                                                  style=\"object-fit: cover;\"><!--v-if-->\n" +
@@ -92,7 +92,7 @@ layui.use(["layer", "form", "laydate", "upload"], function(){
 
     laydate.render({
         elem: '.select_date_input'
-        ,format: 'yyyy.MM.dd'
+        ,format: 'yyyy-MM-dd'
     });
     laydate.render({
         elem: '.date_hours_content_input'
@@ -115,7 +115,6 @@ layui.use(["layer", "form", "laydate", "upload"], function(){
         let uuidTemplate = $(".order-selected").attr("uuidTemplate");
         selectTemplate(uuidTemplate);
     });
-
     getPrivateOrder(); //数据渲染
     getData();//内容渲染
 });

src/main/resources/static/js/easmeob-im/chatroom.js

@@ -0,0 +1,242 @@
+$(function () {
+    //获取聊天室列表
+    $('#getRoomsList').click(function () {
+        var option = {
+            apiUrl: 'https://a1.easemob.com',
+            pagenum: 1,                                 // 页数
+            pagesize: 20,                               // 每页个数
+            success: function (res) {
+                console.log('获取聊天室列表成功', res);
+            },
+            error: function (err) {
+                console.log('获取聊天室列表失败', err);
+            }
+        };
+        WebIM.conn.getChatRooms(option);
+    });
+    //获取聊天室成员
+    $('#getRoomsMember').click(function () {
+        WebIM.conn.listChatRoomMember({
+            pageNum: 1,
+            pageSize: 10,
+            chatRoomId: gid,
+            success: function (res) {
+                console.log('获取聊天室成员', res)
+            },
+            error: function (err) {
+                console.log('获取聊天室成员失败', err)
+            }
+        })
+    })
+    //加入聊天室
+    $('#joinRoom').click(function () {
+        WebIM.conn.joinChatRoom({
+            roomId: gid, // 聊天室id
+            success: function (res) {
+                console.log('加入聊天室成功', res)
+            }
+        });
+    });
+    //退出聊天室
+    $('#quitRoom').click(function () {
+        WebIM.conn.quitChatRoom({
+            roomId: gid,// 聊天室id
+            success: function (res) {
+                console.log('退出聊天室成功', res)
+            }
+        });
+    });
+    //上传/修改聊天室公告
+    $('#setChatroomAnnouncement').click(function () {
+        var options = {
+            roomId: gid,            // 群组id   
+            announcement: 'test Announcement',        // 公告内容                        
+            success: function (res) {
+                console.log('设置群公告成功', res)
+            },
+            error: function (err) {
+                console.log('设置群公告失败', err)
+            }
+        };
+        WebIM.conn.updateChatRoomAnnouncement(options);
+    });
+    //获取聊天室公告
+    $('#getChatroomAnnouncement').click(function () {
+        var options = {
+            roomId: gid,            // 群组id                          
+            success: function (res) {
+                console.log('获取群公告成功', res)
+            },
+            error: function (err) {
+                console.log('获取群公告失败', err)
+            }
+        };
+        WebIM.conn.fetchChatRoomAnnouncement(options);
+    });
+    //将成员禁言
+    $('#setChatroomMute').click(function () {
+        var options = {
+            username: toID,                      // 成员用户名
+            muteDuration: -1000,               // 禁言的时长，单位是毫秒 -1000 是永久
+            chatRoomId: gid,
+            success: function (res) {
+                console.log('成员禁言成功', res)
+            },
+            error: function (err) {
+                console.log('成员禁言失败', err)
+            }
+        };
+        WebIM.conn.muteChatRoomMember(options);
+    });
+    //将成员解除禁言
+    $('#removeRoomMute').click(function () {
+        var options = {
+            chatRoomId: gid,                  // 群组ID
+            username: toID,                    // 成员用户名
+            success: function (res) {
+                console.log('移除禁言成功', res)
+            },
+            error: function (err) {
+                console.log('移除禁言失败', err)
+            }
+        };
+        WebIM.conn.removeMuteChatRoomMember(options);
+    });
+    //获取聊天室禁言列表
+    $('#getRoomMuteList').click(function () {
+        var options = {
+            chatRoomId: gid,                // 群组ID
+            success: function (res) {
+                console.log('获取禁言列表成功', res)
+            },
+            error: function (err) {
+                console.log('获取禁言列表失败', err)
+            }
+        };
+        WebIM.conn.getChatRoomMuted(options);
+    });
+    //开启聊天室全员禁言
+    $('#setMuteAll').click(function () {
+        var options = {
+            chatRoomId: gid, //群组id
+            success: function (res) {
+                console.log('全员禁言成功', res)
+            },
+            error: function (err) {
+                console.log('全员禁言失败', err)
+            }
+        };
+        WebIM.conn.disableSendChatRoomMsg(options);
+    });
+    //关闭聊天室全员禁言
+    $('#removeMuteAll').click(function () {
+        var options = {
+            chatRoomId: gid, //群组id
+            success: function (res) {
+                console.log('解除全员禁言成功', res)
+            },
+            error: function (err) {
+                console.log('解除全员禁言失败', err)
+            }
+        };
+        WebIM.conn.enableSendChatRoomMsg(options)
+    });
+    //将用户添加到白名单
+    $('#setRoomWhite').click(function () {
+        var options = {
+            chatRoomId: gid, //群组id
+            users: [toID], //成员id列表
+            success: function (res) {
+                console.log('添加群组白名单成功', res)
+            },
+            error: function (err) {
+                console.log('添加群组白名单失败', err)
+            }
+        };
+        WebIM.conn.addUsersToChatRoomWhitelist(options);
+    });
+    //将用户在白名单移除
+    $('#removeRoomWhite').click(function () {
+        var options = {
+            chatRoomId: gid, //群组id
+            userName: toID, //要移除的成员
+            success: function (res) {
+                console.log('移除群组白名单成功', res)
+            },
+            error: function (err) {
+                console.log('移除群组白名单失败', err)
+            }
+        }
+        WebIM.conn.rmUsersFromChatRoomWhitelist(options)
+    });
+    //获取聊天室白名单列表
+    $('#getRoomWhiteList').click(function () {
+        var options = {
+            chatRoomId: gid, //群组id
+            userName: toID, //要查询的成员
+            success: function (res) {
+                console.log('查询成功', res)
+            },
+            error: function (err) {
+                console.log('查询失败', err)
+            }
+        }
+        WebIM.conn.getChatRoomWhitelist(options)
+    });
+    //查看成员是否为白名单用户
+    $('#getRoomMemberWhite').click(function () {
+        var options = {
+            chatRoomId: gid, //群组id
+            userName: toID, //要查询的成员
+            success: function (res) {
+                console.log('查询成功', res)
+            },
+            error: function (err) {
+                console.log('查询失败', err)
+            }
+        }
+        WebIM.conn.isChatRoomWhiteUser(options)
+    });
+    //获取聊天室黑名单列表
+    $('#getRoomBlack').click(function () {
+        var option = {
+            chatRoomId: gid,
+            success: function (res) {
+                console.log('查询群组黑名单成功', res)
+            },
+            error: function (err) {
+                console.log('查询群组黑名单失败', err)
+            }
+        };
+        WebIM.conn.getChatRoomBlacklistNew(option);
+    });
+    //将成员加入到聊天室黑名单  /单个
+    $('#setRoomBlack').click(function () {
+        var options = {
+            chatRoomId: gid,                     // 群组ID
+            username: toID,                         // 将要被加入黑名单的用户名
+            success: function (res) {
+                console.log('加入群组黑名单成功', res)
+            },
+            error: function (err) {
+                console.log('加入群组黑名单失败', err)
+            }
+        };
+        WebIM.conn.chatRoomBlockSingle(options);
+    });
+    //将成员移除聊天室黑名单  /单个
+    $('#removeRoomBlack').click(function () {
+        var options = {
+            chatRoomId: gid,                     // 群组ID              
+            username: toID,                             // 需要移除的用户名
+            success: function (res) {
+                console.log('移除群组黑名单成功', res)
+            },
+            error: function (err) {
+                console.log('移除群组黑名单失败', err)
+            }
+        }
+        WebIM.conn.removeChatRoomBlockSingle(options);
+    });
+
+})

src/main/resources/static/js/easmeob-im/friend.js

@@ -0,0 +1,57 @@
+
+$(function () {
+    //获取好友
+    $('#getRoasters').click(function () {
+        WebIM.conn.getRoster({
+            success: function (res) {
+                console.log('获取好友')
+            }
+        })
+    })
+    //添加好友
+    $("#addRoster").click(function () {
+        WebIM.conn.subscribe({
+            to: toID,
+            message: '加个好友呗!'
+        });
+        $('toName').val('');
+    })
+    //删除好友
+    $('#removeRoster').click(function () {
+        WebIM.conn.removeRoster({
+            to: toID
+        });
+        $('#toName').val('');
+    })
+    //获取黑名单列表
+    $('#getBlackList').click(function () {
+        WebIM.conn.getBlacklist();
+    })
+    //将好友加入黑名单
+    $('#addBlackList').click(function () {
+        WebIM.conn.addToBlackList({
+            name: [toID],
+            success: function (res) {
+                console.log('加入黑名单成功', res);
+            },
+            error: function (err) {
+                console.log('加入黑名单失败', err);
+            }
+        });
+        $('#toName').val('');
+    })
+    //将好友移除黑名单
+    $('#removeFromBlackList').click(function () {
+        WebIM.conn.removeFromBlackList({
+            name: [toID],
+            success: function (res) {
+                console.log('移除黑名单成功', res);
+            },
+            error: function (err) {
+                console.log('移除黑名单失败', err)
+            }
+        });
+        $('#toName').val('');
+    })
+    
+})

src/main/resources/static/js/easmeob-im/group.js

@@ -0,0 +1,446 @@
+
+$(function () {
+    //获取当前登陆账号已加入的群组列表
+    $('#getGroupList').click(function () {
+        var options = {
+            success: function (resp) {
+                console.log("获取已加入群组成功", resp)
+            },
+            error: function (err) {
+                console.log("获取已加入群组失败", err)
+            }
+        }
+        WebIM.conn.getGroup(options)
+    });
+    //分页获取公开群组
+    $('#getPubGroupList').click(function () {
+        var limit = 20,
+            options = {
+            limit: limit,                                   // 预期每页获取的记录数
+            cursor: cursor || '',                           // 游标，第一次为空
+            success: function (resp) {
+                console.log("Response: ", resp);
+                $('#gCursor').val() = resp.cursor;
+            },
+            error: function (e) { }
+        };
+        WebIM.conn.listGroups(options);
+    });
+    ////创建群组
+    $('#createGroups').click(function () {
+        var options = {
+            data: {
+                groupname: 'test1',                    // 群组名
+                desc: '测试群组',                       // 群组描述                      
+                public: true,                         // pub等于true时，创建为公开群
+                approval: false,                      // approval为true，加群需审批，为false时加群无需审批
+                allowinvites: false
+            },
+            success: function (res) {
+                console.log('创建群组成功', res)
+            },
+            error: function (error) {
+                console.log('创建群组失败', error)
+            }
+        };
+        if(toID != undefined){
+            options.data.members = [toID];  // 用户名组成的数组
+        };
+        WebIM.conn.createGroupNew(options);
+    });
+    //获取群组信息
+    $('#getGroupInfo').click(function () {
+        var options = {
+            groupId: gid,                                //群组id
+            success: function (res) {
+                console.log("获取群组信息成功", res);
+            },
+            error: function (err) {
+                console.log("获取群组信息失败", err);
+            }
+        };
+        WebIM.conn.getGroupInfo(options);
+    });
+    //修改群组信息
+    $('#putGroupInfo').click(function () {
+        var option = {
+            groupId: gid,
+            groupName: 'ChangeTest',                         // 群组名称
+            description: 'Change group information test',  // 群组简介
+            success: function (res) {
+                console.log('修改群组成功', res);
+            }
+        };
+        WebIM.conn.modifyGroup(option);
+    });
+    //获取群组成员
+    $('#getGroupMember').click(function () {
+        var pageNum = 1,
+            pageSize = 1000;
+        var options = {
+            pageNum: pageNum,                                               // 页码
+            pageSize: pageSize,                                             // 预期每页获取的记录数
+            groupId: gid,
+            success: function (res) {
+                console.log("获取群成员成功", res)
+            },
+            error: function (err) {
+                console.log("获取群成员失败", err)
+            }
+        };
+        WebIM.conn.listGroupMember(options);
+    });
+    //将好友加入群组
+    $('#inviteGroupMember').click(function () {
+        var option = {
+            users: [toID],
+            groupId: gid
+        };
+        WebIM.conn.inviteToGroup(option);
+    });
+    //将成员移除群组
+    $('#removeGroupMember').click(function () {
+        var option = {
+            groupId: gid,
+            username: toID,                         // 群组成员名称
+            success: function (res) {
+                console.log('移除成员成功', res);
+            },
+            error: function (err) {
+                console.log('移除成员失败', err)
+            }
+        };
+        WebIM.conn.removeSingleGroupMember(option);
+    });
+    //退出群组
+    $('#quitGroup').click(function () {
+        var option = {
+            groupId: gid,
+            success: function (res) {
+                console.log('退出群组成功', res);
+            },
+            error: function (err) {
+                console.log('退出群组失败', err);
+            }
+        };
+        WebIM.conn.quitGroup(option);
+    });
+    //解散群组
+    $('#disGroup').click(function () {
+        var option = {
+            groupId: gid,
+            success: function () {
+                console.log('解散群组成功');
+            }
+        };
+        WebIM.conn.dissolveGroup(option);
+    });
+    //获取群组管理员
+    $('#getGroupAdmin').click(function () {
+        var options = {
+            groupId: gid,                 // 群组id
+            success: function (res) {
+                console.log('获取群组管理员成功', res)
+            },
+            error: function (err) {
+                console.log('获取群组管理员失败', err)
+            }
+        };
+        WebIM.conn.getGroupAdmin(options);
+    });
+    //设置群组管理员
+    $('#setGroupAdmin').click(function () {
+        var options = {
+            groupId: gid,            // 群组id
+            username: toID,              // 用户名
+            success: function (res) {
+                console.log('设置管理员成功', res)
+            },
+            error: function (err) {
+                console.log('设置管理员失败', err)
+            }
+        };
+        WebIM.conn.setAdmin(options);
+    });
+    //移除群组管理员
+    $('#removeGroupAdmin').click(function () {
+        var options = {
+            groupId: gid,             // 群组id
+            username: toID,               // 用户名
+            success: function (res) {
+                console.log('移除管理员成功', res)
+            },
+            error: function (err) {
+                console.log('移除管理员失败', err)
+            }
+        };
+        WebIM.conn.removeAdmin(options);
+    });
+    //申请加入群组
+    $('#applyJoinGroup').click(function () {
+        var options = {
+            groupId: gid,                              // 群组ID
+            success: function (res) {
+                console.log("申请发送群组成功", res);
+            },
+            error: function (err) {
+                console.log("申请加入群组失败", err);
+            }
+        };
+        WebIM.conn.joinGroup(options);
+    });
+    //获取群组禁言列表
+    $('#getMuteGroupList').click(function () {
+        var options = {
+            groupId: gid,                // 群组ID
+            success: function (res) {
+                console.log('获取禁言列表成功', res)
+            },
+            error: function (err) {
+                console.log('获取禁言列表失败', err)
+            }
+        };
+        WebIM.conn.getMuted(options);
+    });
+    //将成员禁言
+    $('#setMuteGroupMember').click(function () {
+        var options = {
+            username: toID,                      // 成员用户名
+            muteDuration: 886400000,               // 禁言的时长，单位是毫秒
+            groupId: gid,
+            success: function (res) {
+                console.log('成员禁言成功', res)
+            },
+            error: function (err) {
+                console.log('成员禁言失败', err)
+            }
+        };
+        WebIM.conn.mute(options);
+    });
+    //移除群组禁言
+    $('#removeMuteGroupMember').click(function () {
+        var options = {
+            groupId: gid,                  // 群组ID
+            username: toID,                    // 成员用户名
+            success: function (res) {
+                console.log('移除禁言成功', res)
+            },
+            error: function (err) {
+                console.log('移除禁言失败', err)
+            }
+        };
+        WebIM.conn.removeMute(options);
+    });
+    //一键全员禁言
+    $('#setMuteAll').click(function () {
+        var options = {
+            groupId: gid, //群组id
+            success: function (res) {
+                console.log('全员禁言成功', res)
+            },
+            error: function (err) {
+                console.log('全员禁言失败', err)
+            }
+        };
+        WebIM.conn.disableSendGroupMsg(options);
+    });
+    //一键解除全员禁言
+    $('#removeMuteAll').click(function () {
+        var options = {
+            groupId: gid, //群组id
+            success: function (res) {
+                console.log('解除全员禁言成功', res)
+            },
+            error: function (err) {
+                console.log('解除全员禁言失败', err)
+            }
+        };
+        WebIM.conn.enableSendGroupMsg(options)
+    });
+    //查询群组白名单
+    $('#getGroupWhite').click(function () {
+        var options = {
+            groupId: gid, //群组id
+            success: function (res) {
+                console.log('获取群组白名单成功', res)
+            },
+            error: function (err) {
+                console.log('获取群组白名单失败', err)
+            }
+        }
+        WebIM.conn.getGroupWhitelist(options)
+    });
+    //将成员加入白名单
+    $('#setGroupWhite').click(function () {
+        var options = {
+            groupId: gid, //群组id
+            users: [toID], //成员id列表
+            success: function (res) {
+                console.log('添加群组白名单成功', res)
+            },
+            error: function (err) {
+                console.log('添加群组白名单失败', err)
+            }
+        };
+        WebIM.conn.addUsersToGroupWhitelist(options);
+    });
+    //将成员移除白名单
+    $('#removeGroupWhite').click(function () {
+        var options = {
+            groupId: gid, //群组id
+            userName: toID, //要移除的成员
+            success: function (res) {
+                console.log('移除群组白名单成功', res)
+            },
+            error: function (err) {
+                console.log('移除群组白名单失败', err)
+            }
+        }
+        WebIM.conn.rmUsersFromGroupWhitelist(options)
+    });
+    //查询成员是否是白名单用户
+    $('#getGroupMemberWhite').click(function () {
+        var options = {
+            groupId: gid, //群组id
+            userName: toID, //要查询的成员
+            success: function (res) {
+                console.log('查询成功', res)
+            },
+            error: function (err) {
+                console.log('查询失败', err)
+            }
+        }
+        WebIM.conn.isGroupWhiteUser(options)
+    });
+    //获取群组黑名单列表
+    $('#getGroupBlack').click(function () {
+        var option = {
+            groupId: gid,
+            success: function (res) {
+                console.log('查询群组黑名单成功', res)
+            },
+            error: function (err) {
+                console.log('查询群组黑名单失败', err)
+            }
+        };
+        WebIM.conn.getGroupBlacklistNew(option);
+    });
+    //将成员加入群组黑名单 /单个
+    $('#setGroupBlack').click(function () {
+        var options = {
+            groupId: gid,                     // 群组ID
+            username: toID,                         // 将要被加入黑名单的用户名
+            success: function (res) {
+                console.log('加入群组黑名单成功', res)
+            },
+            error: function (err) {
+                console.log('加入群组黑名单失败', err)
+            }
+        };
+        WebIM.conn.groupBlockSingle(options);
+    });
+    //将群组黑名单成员移除  /单个
+    $('#removeGroupBlack').click(function () {
+        var options = {
+            groupId: gid,                     // 群组ID              
+            username: toID,                             // 需要移除的用户名
+            success: function (res) {
+                console.log('移除群组黑名单成功', res)
+            },
+            error: function (err) {
+                console.log('移除群组黑名单失败', err)
+            }
+        }
+        WebIM.conn.removeGroupBlockSingle(options);
+    });
+    //上传/修改 群公告
+    $('#putAnnouncement').click(function () {
+        var options = {
+            groupId: gid,            // 群组id   
+            announcement: 'test Announcement',        // 公告内容                        
+            success: function (res) {
+                console.log('设置群公告成功', res)
+            },
+            error: function (err) {
+                console.log('设置群公告失败', err)
+            }
+        };
+        WebIM.conn.updateGroupAnnouncement(options);
+    });
+    //获取群组公告
+    $('#getAnnouncement').click(function () {
+        var options = {
+            groupId: gid,            // 群组id                          
+            success: function (res) {
+                console.log('获取群公告成功', res)
+            },
+            error: function (err) {
+                console.log('获取群公告失败', err)
+            }
+        };
+        WebIM.conn.fetchGroupAnnouncement(options);
+    });
+    //获取群组文件
+    $('#getGroupFile').click(function () {
+        var options = {
+            groupId: gid,                  // 群组id                        
+            success: function (res) {
+                console.log('获取文件成功', res)
+            },
+            error: function (err) {
+                console.log('获取群文件失败', err)
+            }
+        };
+        WebIM.conn.fetchGroupSharedFileList(options);
+    });
+    //上传群文件，需要在 file 上传
+    $('#setGroupFile').click(function () {
+        var options = {
+            groupId: gid,                                // 群组id 
+            file: $("#fileMsg")[0],                      // <input type="file"/>获取的file文件对象                         
+            onFileUploadProgress: function (res) {
+                console.log('开始上传文件', res)
+            },   // 上传进度的回调
+            onFileUploadComplete: function (res) {
+                console.log('上传文件成功', res)
+            },   // 上传完成时的回调
+            onFileUploadError: function (err) {
+                console.log('上传文件失败', err)
+            },         // 上传失败的回调
+            onFileUploadCanceled: function (err) {
+                console.log('取消上传文件', err)
+            }       // 上传取消的回调
+        };
+        WebIM.conn.uploadGroupSharedFile(options);
+    });
+    //下载群文件
+    $('#downGroupFile').click(function () {
+        var options = {
+            groupId: gid,                  // 群组id 
+            fileId: gFileId,                          // 文件id                        
+            onFileDownloadComplete: function (res,resp) {
+                console.log('下载群文件成功', res,resp)
+            }, // 下载成功的回调
+            onFileDownloadError: function (err) {
+                console.log('下载群文件失败', err)
+            },       // 下载失败的回调
+        };
+        WebIM.conn.downloadGroupSharedFile(options);
+    });
+    //删除群文件
+    $('#removeGroupFile').click(function () {
+        var options = {
+            groupId: gid,                  // 群组id 
+            fileId: gFileId,                          // 文件id                        
+            success: function (res) {
+                console.log('删除群文件成功', res)
+            },
+            error: function (err) {
+                console.log('删除群文件失败', err)
+            }
+        };
+        WebIM.conn.deleteGroupSharedFile(options);
+    });
+})
+
+

src/main/resources/static/js/easmeob-im/info.js

@@ -0,0 +1,34 @@
+
+$(function () {
+    //设置/修改 用户属性
+    $('#updateInfo').click(function () {
+        let options = {
+            nickname: userNickname,
+            avatarurl: userAvatarUrl,
+            mail: '123@qq.com',
+            phone: '16888888888',
+            gender: 'female',
+            birth: '2000-01-01',
+            sign: 'a sign',
+            ext: JSON.stringify({
+                nationality: 'China',
+                merit: 'Hello，世界！'
+            })
+        }
+        WebIM.conn.updateOwnUserInfo(options).then((res) => {
+            console.log('修改属性成功',res)
+        })
+    })
+
+    //获取用户属性
+    $('#fetchInfo').click(function () {
+        if (toID) {
+            WebIM.conn.fetchUserInfoById(toID).then((res) => {
+                console.log('获取属性成功', res)
+            })           
+        }else {
+            alert('请输入要拉取信息的ID/接收方ID！')
+        }
+        
+    })
+})

src/main/resources/static/js/easmeob-im/login.js

@@ -0,0 +1,41 @@
+
+$(function () {
+    //注册账号
+    $('#register').click(function () {
+        var options = {
+            username: uname,
+            password: upwd,
+            nickname: 'nickname',
+            appKey: WebIM.config.appkey,
+            success: function (res) {
+                console.log('注册成功', res)
+            },
+            error: function (err) {
+                console.log('注册失败', err)
+            },
+            apiUrl: WebIM.config.apiURL
+        };
+        WebIM.conn.registerUser(options);
+    })
+    //登陆
+    $('#login').click(function () {
+        options = {
+            apiUrl: WebIM.config.apiURL,
+            user: uname,
+            pwd: upwd,
+            appKey: WebIM.config.appkey
+        };
+        WebIM.conn.open(options);
+    })
+    //退出
+    $('#logout').click(function () {
+        WebIM.conn.close();
+    });
+})
+
+
+
+
+
+
+

src/main/resources/static/js/easmeob-im/message.js

@@ -0,0 +1,334 @@
+
+
+$(function (e) {
+    //文本消息
+    $('#privateText').click(function () {
+        var id = WebIM.conn.getUniqueId();
+        var msg = new WebIM.message('txt', id);
+        msg.set({
+            msg: msgContent,
+            to: toID,
+            ext: {
+                time: newDate,
+            },
+            success: function (id, serverMsgId) {
+                console.log('发送文本消息成功', id, serverMsgId);
+            },
+            fail: function (err) {
+                console.log("发送文本消息失败", err);
+            }
+        });
+        //判断消息类型是否为群组
+        if (gType != undefined) {
+            msg.setGroup('groupchat')
+        };
+        //判断是否为聊天室
+        if (roomType != undefined) {
+            msg.set.roomType = true
+        }
+        WebIM.conn.send(msg.body);
+    });
+    //命令消息
+    $('#privateCmd').click(function () {
+        var id = WebIM.conn.getUniqueId();
+        var msg = new WebIM.message('cmd', id);
+        msg.set({
+            msg: 'test msg',
+            to: toID,
+            action: msgContent,
+            ext: {
+                time: newDate,
+            },
+            success: function (id, serverMsgId) {
+                console.log('发送命令消息成功', id, serverMsgId);
+            },
+            fail: function (err) {
+                console.log("发送命令消息失败", err);
+            }
+        });
+        //判断消息类型是否为群组
+        if (gType != undefined) {
+            msg.setGroup('groupchat')
+        };
+        //判断是否为聊天室
+        if (roomType != undefined) {
+            msg.set.roomType = true
+        }
+        WebIM.conn.send(msg.body);
+    })
+    //位置消息
+    $('#privateLoc').click(function () {
+        var id = WebIM.conn.getUniqueId();                 // 生成本地消息id
+        var msg = new WebIM.message('location', id);      // 创建位置消息
+        msg.set({
+            to: toID,                          // 接收消息对象（用户id）
+            roomType: false,
+            addr: "北京四通桥",
+            lat: "39.9666",
+            lng: "116.322",
+            success: function (id, serverMsgId) {
+                console.log('发送位置消息成功', id, serverMsgId)
+            }
+        })
+        //判断消息类型是否为群组
+        if (gType != undefined) {
+            msg.setGroup('groupchat')
+        };
+        //判断是否为聊天室
+        if (roomType != undefined) {
+            msg.set.roomType = true
+        }
+        WebIM.conn.send(msg.body);
+    })
+    //Url 图片消息
+    $('#privateUrlImg').click(function () {
+        var id = WebIM.conn.getUniqueId();                   // 生成本地消息id
+        var msg = new WebIM.message('img', id);        // 创建图片消息
+        var option = {
+            body: {
+                type: 'file',
+                url: msgContent,            //填写Url 地址
+                size: {
+                    width: '1123',
+                    height: '2234',
+                },
+                length: '11223',            //目前自定义的，需要获取到url 图片信息后再赋值
+                filename: 'tup.jpg',
+                filetype: 'img'
+            },
+            to: toID,
+            success: function (id, serverMsgId) {
+                console.log('发送url图片成功', id, serverMsgId)
+                //发送成功后，将文本框置空
+            }
+        };
+        msg.set(option);
+        //判断消息类型是否为群组
+        if (gType != undefined) {
+            msg.setGroup('groupchat')
+        }
+        WebIM.conn.send(msg.body);
+    })
+    //图片消息
+    $('#privateImg').click(function () {
+        var id = WebIM.conn.getUniqueId();
+        var msg = new WebIM.message('img', id);
+        var input = $("#imgMsg")[0]  // 选择图片的input
+        var file = WebIM.utils.getFileUrl(input);      // 将图片转化为二进制文件
+        var allowType = {        // 设置支持的图片类型
+            'jpg': true,
+            'gif': true,
+            'png': true,
+            'bmp': true
+        };
+        if (file.filetype.toLowerCase() in allowType) {
+            var option = {
+                apiUrl: WebIM.config.apiURL,
+                file: file,
+                to: toID,
+                ext: {
+                    'time': newDate,
+                },
+                width: '1123',
+                height: '2234',
+                // 接收消息对象
+                roomType: false,
+                chatType: 'singleChat',
+                onFileUploadError: function (err) {      // 消息上传失败
+                    console.log('onFileUploadError', err);
+                },
+                onFileUploadComplete: function (res) {   // 消息上传成功
+                    console.log('onFileUploadComplete', res);
+                },
+                success: function (id, serverMsgId) {                // 消息发送成功
+                    console.log('发送图片消息成功', id, serverMsgId);
+                },
+                flashUpload: WebIM.flashUpload
+            };
+            msg.set(option);
+            //判断消息类型是否为群组
+            if (gType != undefined) {
+                msg.setGroup('groupchat')
+            };
+            //判断是否为聊天室
+            if (roomType != undefined) {
+                option.roomType = true
+            };
+            WebIM.conn.send(msg.body);
+        }
+    })
+    //音频消息
+    $('#privateAudio').click(function () {
+        var id = WebIM.conn.getUniqueId();             // 生成本地消息id
+        var msg = new WebIM.message('audio', id);      // 创建音频消息
+        var input = $("#audioMsg")[0];                    // 选择音频的input
+        var file = WebIM.utils.getFileUrl(input);      // 将音频转化为二进制文件
+        var allowType = {
+            'mp3': true,
+            'amr': true,
+            'wmv': true,
+            'm4a': true
+        };
+        if (file.filetype.toLowerCase() in allowType) {
+            var option = {
+                apiUrl: WebIM.config.apiURL,
+                file: file,
+                to: toID,
+                ext: {
+                    'time': newDate,
+                    file_length: file.data.size
+                },
+                roomType: false,
+                chatType: 'singleChat',
+                onFileUploadError: function (err) {      // 消息上传失败
+                    console.log('onFileUploadError', err);
+                },
+                onFileUploadComplete: function (res) {   // 消息上传成功
+                    console.log('onFileUploadComplete', res);
+                    var msgUrl = res.uri + '/' + res.entities[0].uuid
+                    console.log('>>>>>', msgUrl)
+                    window.localStorage.setItem('updateUrl', msgUrl)
+                },
+                success: function (id, serverMsgId) {                // 消息发送成功
+                    console.log('发送音频消息成功', id, serverMsgId);
+                },
+                flashUpload: WebIM.flashUpload
+            };
+            msg.set(option);
+            //判断消息类型是否为群组
+            if (gType != undefined) {
+                msg.setGroup('groupchat')
+            };
+            //判断是否为聊天室
+            if (roomType != undefined) {
+                option.roomType = true
+            };
+            WebIM.conn.send(msg.body);
+        }
+    })
+    //视频消息
+    $('#privateVideo').click(function () {
+        var id = WebIM.conn.getUniqueId();                   // 生成本地消息id
+        var msg = new WebIM.message('video', id);      // 创建视频消息
+        var input = $('#videoMsg')[0];  // 选择视频的input
+        var file = WebIM.utils.getFileUrl(input);      // 将视频转化为二进制文件
+        var allowType = {
+            'mp4': true,
+            'wmv': true,
+            'avi': true,
+            'rmvb': true,
+            'mkv': true
+        };
+        if (file.filetype.toLowerCase() in allowType) {
+            var option = {
+                apiUrl: WebIM.config.apiURL,
+                file: file,
+                to: toID,                       // 接收消息对象
+                roomType: false,
+                ext: {
+                    'time': newDate,
+                    file_length: file.data.size
+                },
+                onFileUploadError: function (err) {      // 消息上传失败
+                    console.log('onFileUploadError', err);
+                },
+                onFileUploadComplete: function (res) {   // 消息上传成功
+                    console.log('onFileUploadComplete', res);
+                },
+                success: function (id, serverMsgId) {                // 消息发送成功
+                    console.log('发送视频消息成功', id, serverMsgId);
+                },
+                flashUpload: WebIM.flashUpload
+            };
+            msg.set(option);
+            //判断消息类型是否为群组
+            if (gType != undefined) {
+                msg.setGroup('groupchat')
+            };
+            //判断是否为聊天室
+            if (roomType != undefined) {
+                option.roomType = true
+            };
+            WebIM.conn.send(msg.body);
+        }
+    })
+    //文件消息
+    $('#privateFile').click(function () {
+        var id = WebIM.conn.getUniqueId();                   // 生成本地消息id
+        var msg = new WebIM.message('file', id);        // 创建文件消息
+        var input = $('#fileMsg')[0];  // 选择文件的input
+        var file = WebIM.utils.getFileUrl(input);      // 将文件转化为二进制文件
+        var allowType = {
+            'jpg': true,
+            'gif': true,
+            'png': true,
+            'bmp': true,
+            'zip': true,
+            'txt': true,
+            'doc': true,
+            'pdf': true
+        };
+        if (file.filetype.toLowerCase() in allowType) {
+            var option = {
+                apiUrl: WebIM.config.apiURL,
+                file: file,
+                to: toID,                       // 接收消息对象
+                roomType: false,
+                ext: {
+                    'time': newDate,
+                    // file_length: file.data.size
+                },
+                onFileUploadError: function (err) {      // 消息上传失败
+                    console.log('onFileUploadError', err);
+                },
+                onFileUploadComplete: function (res) {   // 消息上传成功
+                    console.log('onFileUploadComplete', res);
+                },
+                success: function (id, serverMsgId) {                // 消息发送成功
+                    console.log('发送附件消息成功', id, serverMsgId);
+                },
+                flashUpload: WebIM.flashUpload
+            };
+            msg.set(option);
+            //判断消息类型是否为群组
+            if (gType != undefined) {
+                msg.setGroup('groupchat')
+            };
+            //判断是否为聊天室
+            if (roomType != undefined) {
+                option.roomType = true
+            };
+            WebIM.conn.send(msg.body);
+
+        }
+    })
+    //撤回消息
+    $('#recallMsg').click(function () {
+        WebIM.conn.recallMessage({
+            mid: mid,
+            to: toID,
+            // type: chat || groupchat,
+            success: function (id) {
+                console.log('撤回成功', id) // id为撤回通知的id
+            },
+            fail: function (err) {
+                console.log('撤回失败', err)
+            }
+        })
+    })
+    //拉取漫游消息
+    $('#getHistory').click(function () {
+        var options = {
+            queue: toID,
+            isGroup: false,
+            count: 10,
+            success: function (res) {
+                console.log('拉取消息成功', res)
+            },
+            fail: function (err) {
+                console.log('拉取消息成功', err)
+            }
+        }
+        WebIM.conn.fetchHistoryMessages(options)
+    })
+})

src/main/resources/static/js/huanxin.js

@@ -0,0 +1,169 @@
+var conn = null;///创建连接
+
+
+conn = {};
+WebIM.config = config;
+conn = WebIM.conn = new WebIM.connection({
+    appKey: WebIM.config.appkey,
+    isHttpDNS: WebIM.config.isHttpDNS,
+    url: WebIM.config.xmppURL,
+    apiUrl: WebIM.config.apiURL,
+    autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
+    delivery: WebIM.config.delivery,
+    useOwnUploadFun: WebIM.config.useOwnUploadFun
+});
+
+//添加回调函数
+conn.listen({
+    onOpened: function () {},                  //连接成功回调
+    onClosed: function () {},                  //连接关闭回调
+    onTextMessage: function (message) {      //收到文本消息
+        //判断发送消息者是否为新好友
+        var userIDArray = new Array();
+        $.each($(".left_el_scrollbar .chat__room-session-item"), (index, ele) => {
+            userIDArray.push($(ele).attr("id") + ",");
+        });
+        if(userIDArray.indexOf(message.from + ",") < 0){
+            conn.fetchUserInfoById([message.from], ['nickname', 'avatarurl']).then((res) => {
+                var userMap = {};
+                $.each(res.data, (index, itemVal) => {
+                    userMap.nickname = itemVal.nickname;
+                    userMap.avatarurl = itemVal.avatarurl;
+                });
+                $(".left_el_scrollbar").append("<div id='"+ message.from +"' name='"+ userMap.nickname +"' onclick='clickMessage(this)' class=\"chat__room-session-item\"><img\n" +
+                    "                                        src=\""+ userMap.avatarurl +"\"\n" +
+                    "                                        alt=\""+ userMap.nickname +"头像\"><span class=\"chat__room-session-item-unread\"\n" +
+                    "                                                                style=\"display: none;\">0</span>\n" +
+                    "                                    <div class=\"chat__room-user\"><p class=\"chat__room-user-title\"><span\n" +
+                    "                                            title=\""+ userMap.nickname +"\">"+ userMap.nickname +"</span><span>"+ format(message.time).split("|")[1] +"</span></p>\n" +
+                    "                                        <p title=\""+ message.msg  +"\">"+ message.msg +"</p></div>\n" +
+                    "                                </div>");
+            })
+        }
+        if(!clickMessageType){
+            countSum++;
+            $(".message_num").html(countSum);
+        }
+        var userMap = {};
+        if(message.from == userID){
+            conn.fetchUserInfoById([message.from], ['nickname', 'avatarurl']).then((res) => {
+                $.each(res.data, (index, itemVal) => {
+                    userMap.nickname = itemVal.nickname;
+                    userMap.avatarurl = itemVal.avatarurl;
+                });
+                $(".right_el_scrollbar").append("<div class=\"chat__room-message\"\n" +
+                    "                                     cid=\""+ message.id +"\"><img\n" +
+                    "                                        src=\""+ userMap.avatarurl +"\"\n" +
+                    "                                        alt=\"avatar\" class=\"avatar\">\n" +
+                    "                                    <div class=\"chat__room-message-text\">\n" +
+                    "                                        <div class=\"chat__room-message-text-info\"><!----><!---->\n" +
+                    "                                            <div class=\"chat__room-message-text-wrapper\"><p>"+ message.data +"</p>\n" +
+                    "                                                <p style=\"display: none;\"></p><i class=\"arrow\"></i></div>\n" +
+                    "                                        </div>\n" +
+                    "                                        <span>"+ formatNotss(parseInt(message.time)) +"</span></div><!----></div>")
+            })
+        }else{
+            var numVal = $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-session-item-unread").html();
+            $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-session-item-unread").html(parseInt(numVal) + 1);
+            $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-session-item-unread").show();
+        }
+        $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-user-title").next().html(message.data);
+        $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-user-title").next().attr("title", message.data);
+        $(".left_el_scrollbar div[id="+ message.from +"] .chat__room-user-title").find("span").eq(1).html(format(parseInt(message.time)).split("|")[1]);
+    },
+    onEmojiMessage: function ( message ) {},   //收到表情消息
+    onPictureMessage: function ( message ) {
+        //判断发送消息者是否为新好友
+        var userIDArray = new Array();
+        $.each($(".left_el_scrollbar .chat__room-session-item"), (index, ele) => {
+            userIDArray.push($(ele).attr("id") + ",");
+        });
+        if(userIDArray.indexOf(message.from + ",") < 0){
+            conn.fetchUserInfoById([message.from], ['nickname', 'avatarurl']).then((res) => {
+                var userMap = {};
+                $.each(res.data, (index, itemVal) => {
+                    userMap.nickname = itemVal.nickname;
+                    userMap.avatarurl = itemVal.avatarurl;
+                });
+                $(".left_el_scrollbar").append("<div id='"+ message.from +"' name='"+ userMap.nickname +"' onclick='clickMessage(this)' class=\"chat__room-session-item\"><img\n" +
+                    "                                        src=\""+ userMap.avatarurl +"\"\n" +
+                    "                                        alt=\""+ userMap.nickname +"头像\"><span class=\"chat__room-session-item-unread\"\n" +
+                    "                                                                style=\"display: none;\">0</span>\n" +
+                    "                                    <div class=\"chat__room-user\"><p class=\"chat__room-user-title\"><span\n" +
+                    "                                            title=\""+ userMap.nickname +"\">"+ userMap.nickname +"</span><span>"+ format(message.time).split("|")[1] +"</span></p>\n" +
+                    "                                        <p title=\"[图片]\">[图片]</p></div>\n" +
+                    "                                </div>");
+            })
+        }
+        if(!clickMessageType){
+            countSum++;
+            $(".message_num").html(countSum);
+        }
+        var userMap = {};
+        if(message.from == userID){
+            conn.fetchUserInfoById([message.from], ['nickname', 'avatarurl']).then((res) => {
+                $.each(res.data, (index, itemVal) => {
+                    userMap.nickname = itemVal.nickname;
+                    userMap.avatarurl = itemVal.avatarurl;
+                });
+                $(".right_el_scrollbar").append("<div class=\"chat__room-message\"\n" +
+                    "                                     cid=\""+ message.id +"\"><img\n" +
+                    "                                        src=\""+ userMap.avatarurl +"\"\n" +
+                    "                                        alt=\"avatar\" class=\"avatar\"><!---->\n" +
+                    "                                    <div class=\"chat__room-message-img\">\n" +
+                    "                                        <div class=\"el-image\"><img onclick='clickImg(this)' alt=\"fileImage\"\n" +
+                    "                                                                   src=\""+ message.url +"\"\n" +
+                    "                                                                   class=\"el-image__inner el-image__preview\"\n" +
+                    "                                                                   style=\"object-fit: cover;\"><!--v-if--></div>\n" +
+                    "                                        <span>"+ formatNotss(parseInt(message.time)) +"</span></div>\n" +
+                    "                                </div>")
+            })
+        }else{
+            var numVal = $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-session-item-unread").html();
+            $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-session-item-unread").html(parseInt(numVal) + 1);
+            $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-session-item-unread").show();
+        }
+        $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-user-title").next().html("[图片]");
+        $(".left_el_scrollbar div[id="+ message.from +"]").find(".chat__room-user-title").next().attr("title", message.data);
+        $(".left_el_scrollbar div[id="+ message.from +"] .chat__room-user-title").find("span").eq(1).html(format(parseInt(message.time)).split("|")[1]);
+    }, //收到图片消息
+    onCmdMessage: function ( message ) {},     //收到命令消息
+    onAudioMessage: function ( message ) {},   //收到音频消息
+    onLocationMessage: function ( message ) {},//收到位置消息
+    onFileMessage: function ( message ) {},    //收到文件消息
+    onCustomMessage: function ( message ) {},  //收到自定义消息
+    onVideoMessage: function (message) {
+        var node = document.getElementById('privateVideo');
+        var option = {
+            url: message.url,
+            headers: {
+                'Accept': 'audio/mp4'
+            },
+            onFileDownloadComplete: function (response) {
+                var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
+                node.src = objectURL;
+            },
+            onFileDownloadError: function () {
+                console.log('File down load error.')
+            }
+        };
+        WebIM.utils.download.call(conn, option);
+    },   //收到视频消息
+    onPresence: function ( message ) {},       //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
+    onRoster: function ( message ) {},         //处理好友申请
+    onInviteMessage: function ( message ) {},  //处理群组邀请
+    onOnline: function () {},                  //本机网络连接成功
+    onOffline: function () {},                 //本机网络掉线
+    onError: function ( message ) {},          //失败回调
+    onBlacklistUpdate: function (list) {       //黑名单变动
+        // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
+        console.log(list);
+    },
+    onRecallMessage: function(message){},      //收到撤回消息回调
+    onReceivedMessage: function(message){},    //收到消息送达服务器回执
+    onDeliveredMessage: function(message){},   //收到消息送达客户端回执
+    onReadMessage: function(message){},        //收到消息已读回执
+    onCreateGroup: function(message){},        //创建群组成功回执（需调用createGroupNew）
+    onMutedMessage: function(message){},       //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
+    onChannelMessage: function(message){}      //收到整个会话已读的回执，在对方发送channel ack时会在这个回调里收到消息
+});

src/main/resources/static/js/indexHome.js

@@ -1,81 +0,0 @@
-var $ = null;
-var form = null;
-var layer = null;
-layui.use(["layer", "form"], function(){
-    $ = layui.$;
-    form = layui.form;
-    layer = layui.layer;
-    //注销 退出
-    $(".head_portrait").on("click", (e) => {
-        localStorage.clear(); //清空缓存
-        window.location.href="http://116.62.173.33:3033/login?type=manager";
-    })
-});
-//菜单点击监听事件
-function clickItem(obj){
-    if($(obj).hasClass("layui-nav-itemed")){
-        $.each($(".layui-nav-item"), (index, item) => {
-            $(item).find("a cite img").attr("src",  "/images/indeHome/" + $(item).attr("title") + ".png");
-        });
-        $(obj).find("a cite img").attr("src",  "/images/indeHome/" + $(obj).attr("title") + "_click.png");
-        //个人信息特殊处理
-        if($(obj).find("a cite").text() == "个人信息"){
-            iframeClick(obj);
-        }
-    }else{
-        $(obj).find("a cite img").attr("src",  "/images/indeHome/" + $(obj).attr("title") + ".png");
-    }
-}
-//iframe选择
-function iframeClick(obj){
-    //上一级名称
-    var parentName = $(obj).parent().parent().prev().find("cite").text();
-    //点击名称
-    var thisClickName = $(obj).find("cite").text();
-    //路径上参数
-    var idVal = $(obj).attr("idVal");
-    $(".select_button").removeClass("check_div");
-    var flag = false;
-    $.each($(".select_button"), (index, item) => {
-        if(index > 0){
-            if($(item).find("span").html().indexOf(thisClickName) != -1){
-                flag = true;
-                return false;
-            }
-        }
-    });
-    if(flag){
-        $(".center_top div[name="+ thisClickName +"]").click();
-    } else {
-        if(parentName == "报价单"){
-            $(".center_top").append("<div onClick='switchMenu(this)' name="+ thisClickName +" src='/page/demandForSingleIndex?idVal="+ idVal +"' class=\"select_button check_div\">\n" +
-                "                    <span>"+ thisClickName +"</span>\n" +
-                "                    <div class=\"close_button\" onclick='removeThis(this)'><i class=\"layui-icon layui-icon-close\"></i></div>\n" +
-                "                </div>");
-            $("iframe").attr("src", "/page/demandForSingleIndex?idVal=" + idVal);
-        }
-        if(thisClickName == "个人信息"){
-            $(".center_top").append("<div onClick='switchMenu(this)' name='个人信息' src='/page/personalIndex' class=\"select_button check_div\">\n" +
-                "                    <span>"+ thisClickName +"</span>\n" +
-                "                    <div class=\"close_button\" onclick='removeThis(this)'><i class=\"layui-icon layui-icon-close\"></i></div>\n" +
-                "                </div>");
-            $("iframe").attr("src", "/page/personalIndex");
-        }
-    }
-
-
-}
-//头部菜单切换
-function switchMenu(obj){
-    $(".select_button").removeClass("check_div");
-    $(obj).addClass("check_div")
-    var srcVal = $(obj).attr("src");
-    $("iframe").attr("src", srcVal);
-
-}
-//删除顶部选中菜单
-function removeThis(obj){
-    window.event.cancelBubble = true;//阻止冒泡
-    $(obj).parent().prev().click();
-    $(obj).parent().remove();
-}

src/main/resources/static/js/indexHome/even.js

@@ -0,0 +1,10 @@
+var $ = null;
+var form = null;
+var layer = null;
+var upload = null;
+var userID = null;//用户Id
+var countSum = 0;//消息数量
+var username = 'CUS0000001';
+var nickname = 'tuya_1供应商';
+var headImg = "https://lidaotech.oss-cn-beijing.aliyuncs.com/test/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220622112747.png";
+var token = "07E20E117812C34B244EA73B99A65918CAD573DFB012FC523FD3CDA2E259EA06BC98731115C4DEFFF5C1226FE6DF81058A9E695C6C9BFF9B76AD417F0197BFAE1035BC7A5F3A72D83A63C8908F50DC71694CD87D43569EC0780735CCF3CAEE9AD61AD9E960E16E3AC579537E6988ABF60F55C8F450841D1EEFCD60426F863A11285781E8DEA450B4AE0F96727599F65106ECB2C95D9352601E59C3551D80B98AAAAA71AAACC80578";

src/main/resources/static/js/indexHome/function.js

@@ -0,0 +1,297 @@
+//菜单点击监听事件
+function clickItem(obj){
+    if($(obj).hasClass("layui-nav-itemed")){
+        $.each($(".layui-nav-item"), (index, item) => {
+            $(item).find("a cite img").attr("src",  "/images/indeHome/" + $(item).attr("title") + ".png");
+        });
+        $(obj).find("a cite img").attr("src",  "/images/indeHome/" + $(obj).attr("title") + "_click.png");
+        //个人信息特殊处理
+        if($(obj).find("a cite").text() == "个人信息"){
+            iframeClick(obj);
+        }
+    }else{
+        $(obj).find("a cite img").attr("src",  "/images/indeHome/" + $(obj).attr("title") + ".png");
+    }
+}
+//iframe选择
+function iframeClick(obj){
+    //上一级名称
+    var parentName = $(obj).parent().parent().prev().find("cite").text();
+    //点击名称
+    var thisClickName = $(obj).find("cite").text();
+    //路径上参数
+    var idVal = $(obj).attr("idVal");
+    $(".select_button").removeClass("check_div");
+    var flag = false;
+    $.each($(".select_button"), (index, item) => {
+        if(index > 0){
+            if($(item).find("span").html().indexOf(thisClickName) != -1){
+                flag = true;
+                return false;
+            }
+        }
+    });
+    if(flag){
+        $(".center_top div[name="+ thisClickName +"]").click();
+    } else {
+        if(parentName == "报价单"){
+            $(".center_top").append("<div onClick='switchMenu(this)' name="+ thisClickName +" src='/page/demandForSingleIndex?idVal="+ idVal +"' class=\"select_button check_div\">\n" +
+                "                    <span>"+ thisClickName +"</span>\n" +
+                "                    <div class=\"close_button\" onclick='removeThis(this)'><i class=\"layui-icon layui-icon-close\"></i></div>\n" +
+                "                </div>");
+            $("iframe").attr("src", "/page/demandForSingleIndex?idVal=" + idVal);
+        }
+        if(thisClickName == "个人信息"){
+            $(".center_top").append("<div onClick='switchMenu(this)' name='个人信息' src='/page/personalIndex' class=\"select_button check_div\">\n" +
+                "                    <span>"+ thisClickName +"</span>\n" +
+                "                    <div class=\"close_button\" onclick='removeThis(this)'><i class=\"layui-icon layui-icon-close\"></i></div>\n" +
+                "                </div>");
+            $("iframe").attr("src", "/page/personalIndex");
+        }
+    }
+
+
+}
+//头部菜单切换
+function switchMenu(obj){
+    $(".select_button").removeClass("check_div");
+    $(obj).addClass("check_div")
+    var srcVal = $(obj).attr("src");
+    $("iframe").attr("src", srcVal);
+
+}
+//删除顶部选中菜单
+function removeThis(obj){
+    window.event.cancelBubble = true;//阻止冒泡
+    $(obj).parent().prev().click();
+    $(obj).parent().remove();
+}
+//聊天显示
+var clickMessageType = false;
+function messageShow(){
+    countSum = 0;//消息数量;
+    $(".message_num").html(countSum);
+    clickMessageType = true;
+    layer.open({
+        type: 1,
+        title: false,
+        offset: ["1366px","auto"],
+        closeBtn: 2,
+        anim: 2,
+        shadeClose: true,
+        content: $(".van-popup"),
+        end: () => {
+            clickMessageType = false;
+        }
+    })
+}
+//注册并登录环信账号
+function registerUser(){
+    var options = {
+        username: username.toLowerCase(),
+        password: '123456',
+        nickname: nickname,
+        appKey: WebIM.config.appkey,
+        success: function () { },
+        error: function (err) {
+            let errorData = JSON.parse(err.data);
+        },
+    };
+    conn.registerUser(options);
+
+    var options1 = {
+        user: username.toLowerCase(),
+        pwd: '123456',
+        appKey: WebIM.config.appkey
+    };
+    conn.open(options1);
+    //
+    setTimeout(function (){
+        let options = {
+            nickname: nickname,
+            avatarurl: headImg,
+        }
+        //修改用户信息
+        conn.updateOwnUserInfo(options);
+        //查询列表
+        conn.getSessionList().then((res) => {
+            console.log(res)
+            $(".left_el_scrollbar div").remove();//删除所有记录重新渲染
+            $.each(res.data.channel_infos, (index, item) => {
+                var dataVal = JSON.parse(item.meta.payload);//最新消息
+                var time = item.meta.timestamp;//发送消息时间戳
+                var timeVal;//时间选择 如果大于当前时间则显示yyyy-mm-dd 如果相等显示mm:ss
+                var userMap = {};
+                var fromTo = dataVal.from;
+                if(dataVal.from == username.toLowerCase()){
+                    fromTo = dataVal.to;
+                }
+                conn.fetchUserInfoById([fromTo], ['nickname', 'avatarurl']).then((res) => {
+                    $.each(res.data, (index, itemVal) => {
+                        userMap.nickname = itemVal.nickname;
+                        userMap.avatarurl = itemVal.avatarurl;
+                    });
+                    if(format(time).split("|")[0] == format(Date.parse(new Date())).split("|")[0]){
+                        timeVal = format(time).split("|")[1]
+                    } else {
+                        timeVal = format(time).split("|")[0]
+                    }
+                    //判断是图片还是文字
+                    if(dataVal.bodies[0].type == "txt"){
+                        $(".left_el_scrollbar").append("<div id='"+ fromTo +"' name='"+ userMap.nickname +"' onclick='clickMessage(this)' class=\"chat__room-session-item\"><img\n" +
+                            "                                        src=\""+ userMap.avatarurl +"\"\n" +
+                            "                                        alt=\""+ userMap.nickname +"头像\"><span class=\"chat__room-session-item-unread\"\n" +
+                            "                                                                style=\"display: none;\">0</span>\n" +
+                            "                                    <div class=\"chat__room-user\"><p class=\"chat__room-user-title\"><span\n" +
+                            "                                            title=\""+ userMap.nickname +"\">"+ userMap.nickname +"</span><span>"+ timeVal +"</span></p>\n" +
+                            "                                        <p title=\""+ dataVal.bodies[0].msg  +"\">"+ dataVal.bodies[0].msg +"</p></div>\n" +
+                            "                                </div>");
+                    } else {
+                        $(".left_el_scrollbar").append("<div id='"+ fromTo +"' name='"+ userMap.nickname +"' onclick='clickMessage(this)' class=\"chat__room-session-item\"><img\n" +
+                            "                                        src=\""+ userMap.avatarurl +"\"\n" +
+                            "                                        alt=\""+ userMap.nickname +"头像\"><span class=\"chat__room-session-item-unread\"\n" +
+                            "                                                                style=\"display: none;\">0</span>\n" +
+                            "                                    <div class=\"chat__room-user\"><p class=\"chat__room-user-title\"><span\n" +
+                            "                                            title=\""+ userMap.nickname +"\">"+ userMap.nickname +"</span><span>"+ timeVal +"</span></p>\n" +
+                            "                                        <p title=\"[图片]\">[图片]</p></div>\n" +
+                            "                                </div>");
+                    }
+                });
+            });
+        })
+    },2000);
+}
+// 单聊发送文本消息
+function sendPrivateText(textVal) {
+    if(userID == null){
+        layer.msg("暂未选择聊天对象", {icon: 2});
+        return false;
+    }
+    let id = conn.getUniqueId();                 // 生成本地消息id
+    let msg = new WebIM.message('txt', id);      // 创建文本消息
+    msg.set({
+        msg: textVal,                         // 消息内容
+        to: userID,                          // 接收消息对象（用户id）
+        chatType: 'singleChat',              // 设置为单聊
+        success: function (id, serverMsgId) {
+            $(".right_el_scrollbar").append("<div class=\"chat__room-message chat__room-message-reverse\"\n" +
+                "                                     cid=\""+ id +"\"><img\n" +
+                "                                        src=\""+ headImg +"\"\n" +
+                "                                        alt=\"avatar\" class=\"avatar\">\n" +
+                "                                    <div class=\"chat__room-message-text\">\n" +
+                "                                        <div class=\"chat__room-message-text-info\"><!----><!---->\n" +
+                "                                            <div class=\"chat__room-message-text-wrapper\"><p>"+ textVal +"</p>\n" +
+                "                                                <p style=\"display: none;\"></p><i class=\"arrow\"></i></div>\n" +
+                "                                        </div>\n" +
+                "                                        <span>"+ formatNotss(Date.parse(new Date())) +"</span></div><!----></div>")
+        },
+        fail: function(e){
+            console.log("失败");
+        }
+    });
+    conn.send(msg.body);
+    $(".chat__room-info-input textarea").val("");
+}
+//消息切换
+function clickMessage(obj){
+    conn.mr_cache = [];
+    var id = $(obj).attr("id");
+    var name = $(obj).attr("name");
+    var avatarUrl = $(obj).find("img").attr("src");
+    userID = id;
+    $(".chat__room-info-title h4").html(name);
+    $(".right_el_scrollbar div").remove();
+    $(obj).find(".chat__room-session-item-unread").html(0);
+    $(obj).find(".chat__room-session-item-unread").hide();
+    var options = {
+        queue: id, //需特别注意queue属性值为大小写字母混合，以及纯大写字母，会导致拉取漫游为空数组，因此注意将属性值装换为纯小写
+        isGroup: false,
+        count: 10,
+        success: function(res){
+            //获取拉取成功的历史消息
+            $.each(res, (index, item) => {
+                var time = item.time;
+                if(item.from != username.toLowerCase()){
+                    messageLoad(item, avatarUrl, time);
+                } else {
+                    messageLoad(item, headImg, time);
+                }
+            });
+        },
+        fail: function(){}
+    }
+    conn.fetchHistoryMessages(options);
+
+    var height = $(".right_el_scrollbar")[0].scrollHeight;
+    console.log(height)
+    $(".right_el_scrollbar").scrollTop(height);
+}
+
+//全屏预览图片
+function clickImg(obj){
+    var imgUrl = $(obj).attr("src");
+    layer.open({
+        type: 1,
+        title: false,
+        area: ['80%', '80%'],
+        closeBtn: 2,
+        anim: 2,
+        content: "<img src='"+ imgUrl +"' width='100%' height='100%'/>"
+    })
+}
+//消息渲染
+function messageLoad(item, img, time){
+    if(item.contentsType == "TEXT"){
+        //判断是否是自己的消息
+        if(item.from == username.toLowerCase()){
+            $(".right_el_scrollbar").append("<div class=\"chat__room-message chat__room-message-reverse\"\n" +
+                "                                     cid=\""+ item.id +"\"><img\n" +
+                "                                        src=\""+ img +"\"\n" +
+                "                                        alt=\"avatar\" class=\"avatar\">\n" +
+                "                                    <div class=\"chat__room-message-text\">\n" +
+                "                                        <div class=\"chat__room-message-text-info\"><!----><!---->\n" +
+                "                                            <div class=\"chat__room-message-text-wrapper\"><p>"+ item.data +"</p>\n" +
+                "                                                <p style=\"display: none;\"></p><i class=\"arrow\"></i></div>\n" +
+                "                                        </div>\n" +
+                "                                        <span>"+ formatNotss(parseInt(time)) +"</span></div><!----></div>")
+        } else {
+            $(".right_el_scrollbar").append("<div class=\"chat__room-message\"\n" +
+                "                                     cid=\""+ item.id +"\"><img\n" +
+                "                                        src=\""+ img +"\"\n" +
+                "                                        alt=\"avatar\" class=\"avatar\">\n" +
+                "                                    <div class=\"chat__room-message-text\">\n" +
+                "                                        <div class=\"chat__room-message-text-info\"><!----><!---->\n" +
+                "                                            <div class=\"chat__room-message-text-wrapper\"><p>"+ item.data +"</p>\n" +
+                "                                                <p style=\"display: none;\"></p><i class=\"arrow\"></i></div>\n" +
+                "                                        </div>\n" +
+                "                                        <span>"+ formatNotss(parseInt(time)) +"</span></div><!----></div>")
+        }
+    } else {
+        //判断是否是自己的消息
+        if(item.from == username.toLowerCase()){
+            $(".right_el_scrollbar").append("<div class=\"chat__room-message chat__room-message-reverse\"\n" +
+                "                                     ><img\n" +
+                "                                        src=\""+ img +"\"\n" +
+                "                                        alt=\"avatar\" class=\"avatar\"><!---->\n" +
+                "                                    <div class=\"chat__room-message-img\">\n" +
+                "                                        <div class=\"el-image\"><img onclick='clickImg(this)' alt=\"fileImage\"\n" +
+                "                                                                   src=\""+ item.url +"\"\n" +
+                "                                                                   class=\"el-image__inner el-image__preview\"\n" +
+                "                                                                   style=\"object-fit: cover;\"><!--v-if--></div>\n" +
+                "                                        <span>"+ formatNotss(parseInt(time)) +"</span></div>\n" +
+                "                                </div>")
+        } else {
+            $(".right_el_scrollbar").append("<div class=\"chat__room-message\"\n" +
+                "                                     ><img\n" +
+                "                                        src=\""+ img +"\"\n" +
+                "                                        alt=\"avatar\" class=\"avatar\"><!---->\n" +
+                "                                    <div class=\"chat__room-message-img\">\n" +
+                "                                        <div class=\"el-image\"><img onclick='clickImg(this)' alt=\"fileImage\"\n" +
+                "                                                                   src=\""+ item.url +"\"\n" +
+                "                                                                   class=\"el-image__inner el-image__preview\"\n" +
+                "                                                                   style=\"object-fit: cover;\"><!--v-if--></div>\n" +
+                "                                        <span>"+ formatNotss(parseInt(time)) +"</span></div>\n" +
+                "                                </div>")
+        }
+    }
+}

src/main/resources/static/js/indexHome/index.js

@@ -0,0 +1,93 @@
+layui.use(["layer", "form", "upload"], function(){
+    $ = layui.$;
+    form = layui.form;
+    layer = layui.layer;
+    upload = layui.upload;
+
+    //注销 退出
+    $(".head_portrait").on("click", (e) => {
+        localStorage.clear(); //清空缓存
+        conn.close();
+        window.location.href="http://116.62.173.33:3033/login?type=manager";
+    });
+
+    $(".chat__room-info-input textarea").keydown(function (e){
+        // 当 keyCode 是13时,是回车操作
+        if (e.keyCode == 13){
+            var textVal = $(".chat__room-info-input textarea").val();
+            sendPrivateText(textVal);
+            e.preventDefault();
+        }
+    });
+
+    $(".chat__room-info-control").on("click", (e) => {
+        $("#uploadImg").click();
+    });
+
+    const input = document.querySelector("#uploadImg");
+    input.addEventListener('change',function(){
+        // 通过onchange事件获取files,函数要使用function定义,箭头函数this指向父级作用域
+        if(userID == null){
+            layer.msg("暂未选择聊天对象", {icon: 2});
+            return false;
+        }
+
+        let id = conn.getUniqueId();                 // 生成本地消息id
+        let msg = new WebIM.message('img', id);      // 创建图片消息
+
+        var input = document.getElementById('uploadImg');  // 选择图片的input
+        var fileVal = WebIM.utils.getFileUrl(input);      // 将图片转化为二进制文件
+        var allowType = {
+            'jpg': true,
+            'gif': true,
+            'png': true,
+            'bmp': true
+        };
+        var imgUrl = fileVal.url; //用户上传的图片
+        if (fileVal.filetype.toLowerCase() in allowType) {
+            var option = {
+                file: fileVal,
+                length: '3000',                       // 视频文件时，单位(ms)
+                ext: {
+                    file_length: fileVal.data.size       // 文件大小
+                },
+                to: userID,                       // 接收消息对象
+                chatType: 'singleChat',               // 设置为单聊
+                onFileUploadError: function () {      // 消息上传失败
+                    console.log('onFileUploadError');
+                },
+                onFileUploadProgress: function (e) { // 上传进度的回调
+                    console.log(e)
+                },
+                onFileUploadComplete: function (e) {   // 消息上传成功
+                    console.log('onFileUploadComplete');
+                    console.log(e)
+                },
+                success: function (e) {                // 消息发送成功
+                    console.log('Success');
+                    console.log(e)
+                    $(".right_el_scrollbar").append("<div class=\"chat__room-message chat__room-message-reverse\"\n" +
+                        "                                     ><img\n" +
+                        "                                        src=\""+ headImg +"\"\n" +
+                        "                                        alt=\"avatar\" class=\"avatar\"><!---->\n" +
+                        "                                    <div class=\"chat__room-message-img\">\n" +
+                        "                                        <div class=\"el-image\"><img onclick='clickImg(this)' alt=\"fileImage\"\n" +
+                        "                                                                   src=\""+ imgUrl +"\"\n" +
+                        "                                                                   class=\"el-image__inner el-image__preview\"\n" +
+                        "                                                                   style=\"object-fit: cover;\"><!--v-if--></div>\n" +
+                        "                                        <span>"+ formatNotss(parseInt(Date.parse(new Date()))) +"</span></div>\n" +
+                        "                                </div>")
+                },
+                fail: function(e){
+                    console.log("Fail");              //如禁言、拉黑后发送消息会失败
+                },
+                flashUpload: WebIM.flashUpload
+            };
+            msg.set(option);
+            conn.send(msg.body);
+        }
+
+    },false);
+
+    registerUser();//登录即时通讯
+});

src/main/resources/static/js/personal/index.js

@@ -32,6 +32,7 @@ layui.use(["layer", "form", "laydate", 'laypage'], function() {
                     if(data.msg == "200"){
                         layer.closeAll();
                         parent.layer.msg("修改成功", {icon: 1});
+                        parent.conn.updateCurrentUserNick($("input[name=nameVal]").val())
                         load();
                     } else if(data.msg == "300"){
                         layer.closeAll("loading");

src/main/resources/static/js/webIm/WebIMConfig.js

@@ -18,10 +18,6 @@ function getUrl(){
         apiUrl = (window.location.protocol === "https:" ? "https:" : "http:") + "//a1-hsb-ly.easemob.com"
         xmppUrl = "im-api.easemob.com"
     }
-    // else if(window.location.href.indexOf("webim-hsb.easemob.com") !== -1){
-    //     apiUrl = (window.location.protocol === "https:" ? "https:" : "http:") + "//a1-hsb.easemob.com"
-    //     xmppUrl = "im-api-hsb.easemob.com"
-    // }
     return {
         apiUrl: apiUrl,
         xmppUrl: xmppUrl
@@ -33,108 +29,22 @@ var config = {
     /*
      * XMPP server
      */
-    xmppURL: (window.location.protocol === "https:" ? "https:" : "http:") + "//im-api-v2.easemob.com/ws",
-    // xmppURL: "im-api.easemob.com",
-    // xmppURL: '172.17.2.139:5280',
-    /*
-     * Backend REST API URL
-     */
-    // apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
-    // ios must be https!!! by lwz
-    // apiURL: "https://a1.easemob.com",
-    apiURL: (window.location.protocol === "https:" ? "https:" : "http:") + "//a1.easemob.com",
-    // apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//172.17.3.155:8080',
-    /*
-     * Application AppKey
-     */
-    appkey: "easemob-demo#easeim",
-    // appkey: "1108200309157490#bpttest",
-    
+    xmppURL: "https://im-api-v2.easemob.com", // socket Server地址
 
-    /*
-     * Application Host
-     */
-    Host: "easemob.com",
-    /*
-     * Whether to use HTTPS
-     * @parameter {Boolean} true or false
-     */
-    https: true,
-    isHttpDNS: false,
-    /*
-     * isMultiLoginSessions
-     * true: A visitor can sign in to multiple webpages and receive messages at all the webpages.
-     * false: A visitor can sign in to only one webpage and receive messages at the webpage.
-     */
-    isMultiLoginSessions: true,
-    /**
-     * Whether to use window.doQuery()
-     * @parameter {Boolean} true or false
-     */
-    isWindowSDK: false,
-    /**
-     * isSandBox=true:  xmppURL: 'im-api.sandbox.easemob.com',  apiURL: '//a1.sdb.easemob.com',
-     * isSandBox=false: xmppURL: 'im-api.easemob.com',          apiURL: '//a1.easemob.com',
-     * @parameter {Boolean} true or false
-     */
-    isSandBox: false,
-    /**
-     * Whether to console.log in strophe.log()
-     * @parameter {Boolean} true or false
-     */
-    isDebug: true,
-    /**
-     * Whether to show logs in strophe
-     * @parameter {Boolean} true or false
-     */
-    isStropheLog: false,
-    /**
-     * will auto connect the xmpp server autoReconnectNumMax times in background when client is offline.
-     * won't auto connect if autoReconnectNumMax=0.
-     */
-    autoReconnectNumMax: 5,
-    /**
-     * the interval secons between each atuo reconnectting.
-     * works only if autoReconnectMaxNum >= 2.
-     */
-    autoReconnectInterval: 2,
-    /**
-     * webrtc supports WebKit and https only
-     */
-    isWebRTC: window.RTCPeerConnection && /^https\:$/.test(window.location.protocol),
-    /**
-     *  cn: chinese
-     *  us: english
-     */
-    i18n: "cn",
-    /*
-     * Set to auto sign-in
-     */
-    isAutoLogin: true,
-    /**
-     * Size of message cache for person to person
-     */
-    p2pMessageCacheSize: 500,
-    /**
-     * When a message arrived, the receiver send an ack message to the
-     * sender, in order to tell the sender the message has delivered.
-     * See call back function onReceivedMessage
-     */
-    delivery: false,
-    /**
-     * Size of message cache for group chating like group, chatroom etc
-     */
-    groupMessageCacheSize: 200,
-    /**
-     * 5 actual logging methods, ordered and available:
-     * 'TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR'
-     */
+    apiURL: "https://a1.easemob.com",// rest Server地址
 
-    loglevel: "ERROR",
+    appkey: "1164220627109996#demo",// App key
 
-    /**
-     * enable localstorage for history messages
-     */
-    enableLocalStorage: true
+    isHttpDNS: true,// 是否使用https
+
+    https : false,
+
+    isDebug: true,// 打开调试，会自动打印log，在控制台的console中查看log
+
+    autoReconnectNumMax: 1,// 断线重连最大次数
+
+    delivery: true,// 是否发送已读回执
+
+    useOwnUploadFun: false, // 是否使用自己的网址提交
 }
 

src/main/resources/static/js/webIm/initWeb.js

@@ -0,0 +1,221 @@
+//初始化IM SDK
+WebIM.config = config;
+WebIM.conn = new WebIM.connection({
+    appKey: WebIM.config.appkey,
+    isHttpDNS: WebIM.config.isHttpDNS,
+    isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
+    host: WebIM.config.Host,
+    https: WebIM.config.https,
+    url: WebIM.config.xmppURL,
+    apiUrl: WebIM.config.apiURL,
+    isAutoLogin: false,
+    heartBeatWait: WebIM.config.heartBeatWait,
+    autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
+    autoReconnectInterval: WebIM.config.autoReconnectInterval,
+    isStropheLog: WebIM.config.isStropheLog,
+    delivery: WebIM.config.delivery
+})
+
+
+//实时获取时间
+var newDate;
+window.onload = function () {
+    setInterval(function () {
+        var time = new Date();   // 程序计时的月从0开始取值后+1   
+        var m = time.getMonth() + 1;
+        var t = time.getFullYear() + "-" + m + "-"
+            + time.getDate() + " " + time.getHours() + ":"
+            + time.getMinutes() + ":" + time.getSeconds();
+        newDate = t;
+    }, 1000);
+};
+
+//注册IM 回调
+WebIM.conn.listen({
+    onOpened: function (message) {          //连接成功回调
+        console.log("%c [opened] 连接已成功建立", "color: green", newDate);
+    },
+    onClosed: function (message) {
+        console.log("退出登陆", newDate);
+    },         //连接关闭回调
+    onTextMessage: function (message) {
+        console.log('onTextMessage: ', message);
+        //判断是否有扩展字段，会议ID是否为空，如果有会议ID 就加入会议
+    },    //收到文本消息
+    onEmojiMessage: function (message) {
+        console.log('onEmojiMessage: ', message);
+    },   //收到表情消息
+    onPictureMessage: function (message) {
+        console.log('onPicMessage: ', message);
+    }, //收到图片消息
+    onCmdMessage: function (message) {
+        console.log('onCmdMessage: ', message);
+    },     //收到命令消息
+    onAudioMessage: function (message) {
+        console.log('onAudioMessage: ', message);
+        window.localStorage.setItem('audioUrl', message.url)
+        let options = {
+            url: message.url,
+            headers: {
+                Accept: "audio/mp3"
+            },
+            onFileDownloadComplete: function (response) {
+                console.log('>>>', response)
+                // let objectUrl = WebIM.default.utils.parseDownloadResponse.call(WebIM.conn, response);
+                var audio = document.createel;
+                var audio = document.createElement('audio');
+                document.body.appendChild(audio);
+                audio.src = options.url;
+                audio.controls = true
+
+            },
+            onFileDownloadError: function () {
+                console.log("音频下载失败");
+            }
+        };
+        WebIM.utils.download.call(WebIM.conn, options)
+    },   //收到音频消息
+    onLocationMessage: function (message) {
+        console.log('onLocMessage: ', message);
+    },//收到位置消息
+    onFileMessage: function (message) {
+        console.log('onFileMessage: ', message);
+    },    //收到文件消息
+    recallMessage: function (message) {
+        console.log('recallMessage', message);
+    }, //消息撤回
+    onVideoMessage: function (message) {
+        console.log('onVideoMessage: ', message);
+        var node = document.getElementById('getVideo');
+        var option = {
+            url: message.url,
+            headers: {
+                'Accept': 'audio/mp4'
+            },
+            onFileDownloadComplete: function (response) {
+                var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
+                node.src = objectURL;
+            },
+            onFileDownloadError: function () {
+                console.log('File down load error.')
+            }
+        };
+        WebIM.utils.download.call(conn, option);
+    },   //收到视频消息
+    onPresence: function (message) {
+        var myDate = new Date().toLocaleString();
+        console.log('onPresence: ', myDate + JSON.stringify(message));
+        switch (message.type) {
+            case 'subscribe': // 对方请求添加好友
+                var truthBeTold = window.confirm((message.from + "申请添加您为好友:"));
+                if (truthBeTold) {
+                    // 同意对方添加好友
+                    WebIM.conn.subscribed({
+                        to: message.from,
+                        message: "[resp:true]"
+                    });
+                    console.log("同意添加好友");
+                } else {
+                    // 拒绝对方添加好友
+                    WebIM.conn.unsubscribed({
+                        to: message.from,
+                        message: "rejectAddFriend" // 拒绝添加好友回复信息
+                    });
+                    console.log("拒绝添加好友");
+                }
+                break;
+            case 'subscribed': // 对方同意添加好友，已方同意添加好友
+                break;
+            case 'unsubscribe': // 对方删除好友
+                break;
+            case 'unsubscribed': // 被拒绝添加好友，或被对方删除好友成功
+                break;
+            case 'memberJoinPublicGroupSuccess': // 成功加入聊天室
+                console.log('join chat room success' + myDate);
+                console.log(new Date().toLocaleString());
+                break;
+            case 'joinChatRoomFaild': // 加入聊天室失败
+                console.log('join chat room faild');
+                break;
+            case 'joinPublicGroupSuccess': // 意义待查
+                console.log('join public group success', message.from);
+                break;
+
+            case "joinGroupNotifications":  //收到申请加群通知
+                var groupNotifications = window.confirm((message.from + "申请加入群组: " + message, groupid));
+                if (groupNotifications) {
+                    // 同意申请
+                    var options = {
+                        applicant: message.from,                          // 申请加群的用户名
+                        groupId: message, groupid,                              // 群组ID
+                        success: function (res) {
+                            console.log('同意进群', res);
+                        }
+                    };
+                    WebIM.conn.agreeJoinGroup(options);
+                } else {
+                    // 拒绝申请
+                    var options = {
+                        applicant: message.from,                // 申请加群的用户名
+                        groupId: message, groupid,                    // 群组ID
+                        success: function (res) {
+                            console.log('同意进群', res);
+                        }
+                    };
+                    WebIM.conn.rejectJoinGroup(options);
+                }
+                break;
+            case "direct_joined":
+                console.log('收到群组邀请', message)
+                break;
+            case 'createGroupACK':
+                conn.createGroupAsync({
+                    from: message.from,
+                    success: function (option) {
+                        console.log('Create Group Succeed');
+                    }
+                });
+                break;
+        }
+    },       //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
+    onRoster: function (message) {
+        for (var i = 0, l = message.length; i < l; i++) {
+            var ros = message[i];
+            if (ros.subscription === 'both' || ros.subscription === 'to') {
+                console.log(ros.name)
+            }
+        }
+    },         //处理好友申请
+    onInviteMessage: function (message) {
+        console.log('Invite');
+    },  //处理群组邀请
+    onOnline: function () {
+        console.log("onOnline");
+    },                  //本机网络连接成功
+    onOffline: function () {
+        console.log('offline');
+    },                 //本机网络掉线
+    onError: function (message) {
+        console.log('onError: ', message);
+
+    },          //失败回调
+    onBlacklistUpdate: function (list) {       //黑名单变动
+        // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
+        console.log(list);
+    },
+    onReceivedMessage: function (message) {
+        console.log('onReceivedMessage: ', message);
+    },    //收到消息送达服务器回执
+    onDeliveredMessage: function (message) {
+        console.log('onDeliveredMessage：', message);
+    },   //收到消息送达客户端回执
+    onReadMessage: function (message) {
+        console.log('onReadMessage: ', message);
+    },        //收到消息已读回执
+    onCreateGroup: function (message) {
+        console.log('onCreateGroup: ', message);
+    },        //创建群组成功回执（需调用createGroupNew）
+    onMutedMessage: function (message) {
+        console.log('onMutedMessage: ', message);
+    }         //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
+});

src/main/resources/templates/home/index.html

@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
+    <link rel="stylesheet" href="/layui/css/layui.css">
     <link rel="stylesheet" href="/css/common.css">
-    <script src="https://www.layuicdn.com/layui/layui.js"></script>
+    <script src="/layui/layui.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
     <style>
         /** 初始化 */