111

Application/Common/Conf/config_url.php

@@ -49,6 +49,8 @@ return array(
         'bulkupload' => 'Home/Index/bulkupload',
         'bulkupload' => 'Home/Index/bulkupload',
         'uploadresult' => 'Home/Index/uploadresult',
         'uploadresult' => 'Home/Index/uploadresult',
         'integral' => 'Home/Index/integral',
         'integral' => 'Home/Index/integral',
-        'notice' => 'Home/Index/notice'
+        'notice' => 'Home/Index/notice',
+        'chat' => 'Home/Index/chat'
+
     ),
     ),
 );
 );
\ No newline at end of file

Application/Home/Controller/IndexController.class.php

@@ -180,4 +180,11 @@ class IndexController extends Controller
     {
     {
         $this->display('Notice/index');
         $this->display('Notice/index');
     }
     }
+      /**
+     * 聊天
+     */
+    public function chat()
+    {
+        $this->display('Chat/index');
+    }
 }
 }

Application/Home/View/public/navleft.html

@@ -34,8 +34,8 @@
                         <span class="li_title">抢单专区</span>
                         <span class="li_title">抢单专区</span>
                     </a>
                     </a>
                 </li>
                 </li>
-                <li class="content_ul_li <if condition="(ACTION_NAME eq '')">active</if>">
-                    <a href="" class="out">
+                <li class="content_ul_li <if condition="(ACTION_NAME eq 'chat')">active</if>">
+                    <a href="/chat" class="out">
                         <span class="li_icon   icon iconfont iconjuxing7"></span>
                         <span class="li_icon   icon iconfont iconjuxing7"></span>
                         <span class="li_title">在线沟通</span>
                         <span class="li_title">在线沟通</span>
                     </a>
                     </a>

dist/css/chat.css

+.chat_content .content {
+  position: relative;
+}
+.chat_content .content .content_div {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  right: 20px;
+  bottom: 20px;
+  background: #fff;
+}
+.chat_content .content .content_div .notice_left {
+  width: 247px;
+  border-right: 1px solid #F5F9FC;
+  height: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 0 0 10px 10px;
+}
+.chat_content .content .content_div .notice_left::-webkit-scrollbar {
+  width: 2px;
+}
+.chat_content .content .content_div .notice_left .notice_left_content {
+  min-height: 100%;
+  border-top: 1px solid #fff;
+}
+.chat_content .content .content_div .notice_left .notice_classify {
+  padding: 18px 20px 20px;
+  cursor: pointer;
+  margin-top: 10px;
+  position: relative;
+}
+.chat_content .content .content_div .notice_left .notice_classify:hover,
+.chat_content .content .content_div .notice_left .notice_classify.active {
+  background-color: rgba(97, 160, 242, 0.2);
+}
+.chat_content .content .content_div .notice_left .notice_classify .user_logo {
+  height: 40px;
+  width: 40px;
+  border-radius: 50% 50%;
+}
+.chat_content .content .content_div .notice_left .notice_classify .user_right {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  left: 70px;
+  bottom: 0;
+}
+.chat_content .content .content_div .notice_left .notice_classify .user_right div.clr {
+  margin-top: 18px;
+}
+.chat_content .content .content_div .notice_left .notice_classify .user_right div.clr h3 {
+  font-size: 16px;
+  color: #515559;
+  margin-right: 36px;
+  padding-right: 5px;
+}
+.chat_content .content .content_div .notice_left .notice_classify .user_right div.message {
+  font-size: 12px;
+  color: #ADB6BF;
+  margin-top: 5px;
+}
+.chat_content .content .content_div .notice_left .notice_classify .user_right div.message p {
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -icab-text-overflow: ellipsis;
+  -khtml-text-overflow: ellipsis;
+  -moz-text-overflow: ellipsis;
+  -webkit-text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.chat_content .content .content_div .notice_left .notice_classify .num {
+  font-size: 11px;
+  color: #fff;
+  border-radius: 8px;
+  background: #FC4C4C;
+  height: 16px;
+  line-height: 16px;
+  padding: 0 5px;
+}
+.chat_content .content .content_div .notice_right {
+  position: absolute;
+  top: 0;
+  left: 248px;
+  right: 0;
+  bottom: 0;
+}
+.chat_content .content .content_div .notice_right .layui-layedit {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.chat_content .content .content_div .notice_right .title {
+  border-bottom: 2px solid #E6ECF2;
+}
+.chat_content .content .content_div .notice_right .title h3 {
+  font-size: 20px;
+  margin-right: 180px;
+  padding: 28px 10px 33px 40px;
+}
+.chat_content .content .content_div .notice_right .btn {
+  width: 140px;
+  color: #8A9299;
+  margin: 22px 40px 0 0;
+}
+.chat_content .content .content_div .notice_right .page {
+  position: absolute;
+  bottom: 15px;
+  right: 47px;
+}
+.chat_content .content .content_div .notice_right .notice_list {
+  position: absolute;
+  top: 90px;
+  left: 0;
+  right: 0;
+  bottom: 244px;
+  overflow: auto;
+  padding: 10px 20px;
+}
+.chat_content .content .content_div .notice_right .notice_list::-webkit-scrollbar {
+  width: 2px;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item {
+  margin-top: 20px;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item.left {
+  text-align: left;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content {
+  margin-left: 60px;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item.left .notice_content p {
+  background-color: #DFECFC;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item.right {
+  text-align: right;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item.right .notice_content {
+  margin-right: 60px;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item.right .notice_content p {
+  background-color: #FCF2DF;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item .user_logo {
+  height: 40px;
+  width: 40px;
+  border-radius: 50% 50%;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item .notice_content p {
+  display: inline-block;
+  font-size: 16px;
+  color: #515559;
+  padding: 10px 15px;
+  border-radius: 4px;
+}
+.chat_content .content .content_div .notice_right .notice_list .notice_item .notice_content div {
+  font-size: 12px;
+  color: #ADB6BF;
+  padding: 10px 15px;
+}

dist/css/chat.less

+.chat_content {
+    .content {
+        position: relative;
+
+        .content_div {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            bottom: 20px;
+            background: #fff;
+
+            .notice_left {
+                width: 247px;
+                border-right: 1px solid #F5F9FC;
+                height: 100%;
+                overflow: hidden;
+                overflow-y: auto;
+                padding: 0 0 10px 10px;
+
+                &::-webkit-scrollbar {
+                    width: 2px;
+                }
+
+                .notice_left_content {
+                    min-height: 100%;
+                    border-top: 1px solid #fff;
+
+                }
+
+                .notice_classify {
+                    padding: 18px 20px 20px;
+                    cursor: pointer;
+                    margin-top: 10px;
+                    position: relative;
+
+                    &:hover,
+                    &.active {
+                        background-color: rgba(97, 160, 242, .2);
+                    }
+
+                    .user_logo {
+                        height: 40px;
+                        width: 40px;
+                        border-radius: 50% 50%
+                    }
+
+                    .user_right {
+                        position: absolute;
+                        top: 0;
+                        right: 20px;
+                        left: 70px;
+                        bottom: 0;
+
+                        div {
+                            &.clr {
+                                margin-top: 18px;
+
+                                h3 {
+                                    font-size: 16px;
+                                    color: #515559;
+                                    margin-right: 36px;
+                                    padding-right: 5px;
+                                }
+                            }
+
+                            &.message {
+                                font-size: 12px;
+                                color: #ADB6BF;
+                                margin-top: 5px;
+
+                                p {
+                                    text-overflow: ellipsis;
+                                    -o-text-overflow: ellipsis;
+                                    -icab-text-overflow: ellipsis;
+                                    -khtml-text-overflow: ellipsis;
+                                    -moz-text-overflow: ellipsis;
+                                    -webkit-text-overflow: ellipsis;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                }
+                            }
+                        }
+
+
+
+
+                    }
+
+                    .num {
+                        font-size: 11px;
+                        color: #fff;
+                        border-radius: 8px;
+                        background: #FC4C4C;
+                        height: 16px;
+                        line-height: 16px;
+                        padding: 0 5px;
+                    }
+                }
+            }
+
+            .notice_right {
+                position: absolute;
+                top: 0;
+                left: 248px;
+                right: 0;
+                bottom: 0;
+
+                .layui-layedit {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                }
+
+                .title {
+                    border-bottom: 2px solid #E6ECF2;
+
+                    h3 {
+                        font-size: 20px;
+                        margin-right: 180px;
+                        padding: 28px 10px 33px 40px;
+                    }
+                }
+
+                .btn {
+                    width: 140px;
+                    color: #8A9299;
+                    margin: 22px 40px 0 0;
+                }
+
+                .page {
+                    position: absolute;
+                    bottom: 15px;
+                    right: 47px;
+                }
+
+                .notice_list {
+                    position: absolute;
+                    top: 90px;
+                    left: 0;
+                    right: 0;
+                    bottom: 244px;
+                    overflow: auto;
+                    padding: 10px 20px;
+
+                    &::-webkit-scrollbar {
+                        width: 2px;
+                    }
+
+                    .notice_item {
+                        margin-top: 20px;
+
+                        &.left {
+                            text-align: left;
+
+                            .notice_content {
+                                margin-left: 60px;
+
+                                p {
+                                    background-color: #DFECFC
+                                }
+                            }
+                        }
+
+                        &.right {
+                            text-align: right;
+
+                            .notice_content {
+                                margin-right: 60px;
+
+                                p {
+                                    background-color: #FCF2DF
+                                }
+                            }
+                        }
+
+                        .user_logo {
+                            height: 40px;
+                            width: 40px;
+                            border-radius: 50% 50%;
+
+                        }
+
+                        .notice_content {
+                            p {
+                                display: inline-block;
+                                font-size: 16px;
+                                color: #515559;
+                                padding: 10px 15px;
+                                border-radius: 4px;
+
+                            }
+
+                            div {
+                                font-size: 12px;
+                                color: #ADB6BF;
+                                padding: 10px 15px;
+
+
+                            }
+                        }
+
+
+                    }
+
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

dist/css/common/base.css

@@ -510,7 +510,7 @@ body {
   text-align: center;
   text-align: center;
   margin-top: 5px;
   margin-top: 5px;
 }
 }
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
   .index_wrapper {
   .index_wrapper {
     display: none;
     display: none;
   }
   }
@@ -518,7 +518,7 @@ body {
     display: block;
     display: block;
   }
   }
 }
 }
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 769px) {
   .index_wrapper {
   .index_wrapper {
     display: block;
     display: block;
   }
   }
@@ -812,4 +812,3 @@ body {
   color: #ADB6BF;
   color: #ADB6BF;
   cursor: pointer;
   cursor: pointer;
 }
 }
-/*# sourceMappingURL=base.css.map */
\ No newline at end of file

dist/css/common/base.less

@@ -641,7 +641,7 @@ body {
 }
 }
 
 
 
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
   .index_wrapper {
   .index_wrapper {
     display: none;
     display: none;
   }
   }
@@ -651,7 +651,7 @@ body {
   }
   }
 }
 }
 
 
-@media screen and (min-width: 1025px) {
+@media screen and (min-width:769px) {
   .index_wrapper {
   .index_wrapper {
     display: block;
     display: block;
   }
   }

dist/js/chat/swfupload.cookie.js

+/*
+Cookie Plug-in
+This plug in automatically gets all the cookies for this site and adds them to the post_params.
+Cookies are loaded only on initialization.  The refreshCookies function can be called to update the post_params.
+The cookies will override any other post params with the same name.
+*/
+ 
+var SWFUpload;
+if (typeof(SWFUpload) === "function") {
+    SWFUpload.prototype.initSettings = function (old_initSettings) {
+        return function (init_settings) {
+            if (typeof(old_initSettings) === "function") {
+                old_initSettings.call(this, init_settings);
+            }
+            this.refreshCookies(false);     // The false parameter must be sent since SWFUpload has not initialzed at this point
+        };
+    }(SWFUpload.prototype.initSettings);
+        // refreshes the post_params and updates SWFUpload.  The send_to_flash parameters is optional and defaults to True
+    SWFUpload.prototype.refreshCookies = function (send_to_flash) {
+        if (send_to_flash !== false) send_to_flash = true;
+        // Get the post_params object
+        var post_params = this.getSetting("post_params");
+        // Get the cookies
+        var i, cookie_array = document.cookie.split(';'), ca_length = cookie_array.length, c, eq_index, name, value;
+        for(i = 0; i < ca_length; i++) {
+            c = cookie_array[i];
+            // Left Trim spaces
+            while (c.charAt(0) == " ") {
+                c = c.substring(1, c.length);
+            }
+            eq_index = c.indexOf("=");
+            if (eq_index > 0) {
+                name = c.substring(0, eq_index);
+                value = c.substring(eq_index+1);
+                post_params[name] = value;
+            }
+        }
+        if (send_to_flash) {
+            this.setPostParams(post_params);
+        }
+    };
+}

dist/js/chat/uploadShim.js

+var Demo = {}
+Demo.IMGTYPE = {
+    gif: 1,
+    bmp: 1,
+    jpg: 1,
+    png: 1
+};
+function UploadShim(options, conn) {
+    var swfupload;
+
+    var flashUpload = function (url) {
+        swfupload.setUploadURL(url);
+        swfupload.startUpload();
+    };
+
+    var startUpload = function () {
+        console.log('start', conn)
+        WebIM.utils.uploadFile.call(conn, {
+            apiUrl: WebIM.config.apiURL,
+            flashUpload: flashUpload
+        });
+    };
+
+    var upload = {
+        shim: function (fileInputId) {
+            if (!WebIM.utils.isCanUploadFile) {
+                return;
+            }
+
+            var pageTitle = document.title;
+            var uploadBtn = document.getElementById(options.fileInputId);
+
+            if (typeof SWFUpload === 'undefined' || !uploadBtn) {
+                return;
+            }
+
+            return new SWFUpload({
+                file_post_name: 'file'
+                , flash_url: 'swfupload/swfupload.swf'
+                , button_placeholder_id: options.fileInputId
+                , button_width: 120
+                , button_height: 30
+                , button_cursor: SWFUpload.CURSOR.HAND
+                , button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT
+                , file_size_limit: 10485760
+                , file_upload_limit: 0
+                , file_queued_error_handler: function () {
+                }
+                , file_dialog_start_handler: function () {
+                }
+                , file_dialog_complete_handler: function () {
+                }
+                , file_queued_handler: function (file) {
+                    if (this.getStats().files_queued > 1) {
+                        this.cancelUpload();
+                    }
+                    if (10485760 < file.size) {
+                        // Demo.api.NotifyError(Demo.lan.exceed);
+                        this.cancelUpload();
+                    } else if (Demo.IMGTYPE[file.type.slice(1).toLowerCase()]) {
+                        this.filetype = 'img';
+                        startUpload();
+                    } else if (Demo.FILETYPE[file.type.slice(1).toLowerCase()]) {
+                        this.filetype = 'audio';
+                        startUpload();
+                    } else if (Demo.AUDIOTYPE[file.type.slice(1).toLowerCase()]) {
+                        this.filetype = 'file';
+                        startUpload();
+                    } else {
+                        // Demo.api.NotifyError(Demo.lan.invalidType + file.type);
+                        this.cancelUpload();
+                    }
+                }
+                , upload_error_handler: function (file, code, msg) {
+                    if (code != SWFUpload.UPLOAD_ERROR.FILE_CANCELLED
+                        && code != SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED
+                        && code != SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED) {
+                        // var option = {
+                        //     data: Demo.lan.uploadFileFailed,
+                        //     to: Demo.selected
+                        // };
+                        // Demo.api.addToChatRecord(option, 'txt');
+                        // Demo.api.appendMsg(option, 'txt');
+                        console.log('fail')
+                    }
+                }
+                , upload_success_handler: function (file, response) {
+                    if (!file || !response) {
+                        return;
+                    }
+
+                    var me = this;
+
+                    try {
+                        var res = WebIM.utils.parseUploadResponse(response);
+                        res = JSON.parse(res);
+                        if (file && !file.url && res.entities && res.entities.length > 0) {
+                            file.url = ( (location.protocol != 'https:' && WebIM.config.isHttpDNS) ? conn.apiUrl : res.uri) + '/' + res.entities[0].uuid;
+                        }
+
+                        var msg = new WebIM.message(this.filetype, conn.getUniqueId());
+
+
+                        var opt = {
+                            body: {
+                                type: this.filetype,
+                                url: file.url,
+                                filename: file.name
+                            },
+                            file: file,
+                            //todo
+                            // to: Demo.selected,
+                            // roomType: Demo.selectedCate === 'chatrooms',
+                            success: function (id) {
+                                console.log('success: ', file.url)
+                                // var option = {
+                                //     data: file.url,
+                                //     from: Demo.user,
+                                //     to: Demo.selected
+                                // };
+                                // Demo.api.addToChatRecord(option, me.filetype);
+                                // Demo.api.appendMsg(option, me.filetype);
+                            }
+                        };
+
+                        msg.set(opt);
+
+                        // todo
+                        // if (Demo.selectedCate === 'groups') {
+                        //     msg.setGroup(Demo.groupType);
+                        // } else if (Demo.selectedCate === 'chatrooms') {
+                        //     msg.setGroup(Demo.groupType);
+                        // }
+
+                        conn.send(msg.body);
+
+                    } catch (e) {
+                        // Demo.api.NotifyError('文件发送失败');
+                    }
+                }
+            });
+        }
+    };
+
+    if (!WebIM.utils.isCanUploadFileAsync && WebIM.utils.isCanUploadFile) {
+        swfupload = upload.shim(options.fileInputId);
+    }
+
+    return upload;
+};

dist/js/chat/webim.config.js

+/**
+ * git do not control webim.config.js
+ * everyone should copy webim.config.js.demo to webim.config.js
+ * and have their own configs.
+ * In this way , others won't be influenced by this config while git pull.
+ *
+ */
+var WebIM = {};
+WebIM.config = {
+    /*
+     * XMPP server
+     */
+    xmppURL: 'im-api.easemob.com',
+    /*
+     * Backend REST API URL 
+     */
+    apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',
+    /*
+     * Application AppKey
+     */
+    appkey: 'easemob-demo#chatdemoui',
+    /*
+     * Whether to use wss
+     * @parameter {Boolean} true or false
+     */
+    https: 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: false,
+    /*
+     * Set to auto sign-in
+     */
+    isAutoLogin: false,
+    /**
+     * 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: false,
+    /**
+     * will auto connect the xmpp server autoReconnectNumMax times in background when client is offline.
+     * won't auto connect if autoReconnectNumMax=0.
+     */
+    autoReconnectNumMax: 2,
+    /**
+     * the interval secons between each atuo reconnectting.
+     * works only if autoReconnectMaxNum >= 2.
+     */
+    autoReconnectInterval: 2,
+    /**
+     * webrtc supports WebKit and https only
+     */
+    isWebRTC: /WebKit/.test(navigator.userAgent) && /^https\:$/.test(window.location.protocol),
+    /**
+     * while http access,use ip directly,instead of ServerName,avoiding DNS problem.
+     */
+    isHttpDNS: false
+};