潜入app, 上传图片添加loading与重新上传

 'use strict';
-const _ = require('lodash');
 const orderModel = require('../../home/models/order');
 const crypto = global.yoho.crypto;
-const indexModel = require('../../home/models/index');
 const imApi = require('../../serverAPI/im');
 const imModel = require('../models/im');
 const helpers = global.yoho.helpers;
 
-exports.page = (req, res, next) => {
+exports.appAdapter = (req, res, next) => {
+    if (req.yoho.isApp) {
+        let uid = (req.query.uid || '').trim();
+
+        req.user.uid = uid;
+    }
+
+    next();
+};
+
+exports.page = (req, res) => {
     res.render('chat/index', {
         module: 'service',
         page: 'chat',
@@ -42,9 +50,9 @@ exports.getOrders = (req, res, next) => {
 /**
  *  获取历史消息
  *  Request:
- *      
+ *
  */
-exports.msghistory = (req, res, next) => {
+exports.msghistory = (req, res) => {
     const uid = req.user.uid;
 
     imApi.fetchImHistory(uid).then(result => {
@@ -59,7 +67,7 @@ exports.msghistory = (req, res, next) => {
  *      conversationId  会话id
  *      content    留言内容
  */
-exports.saveMSG = (req, res, next) => {
+exports.saveMSG = (req, res) => {
     const uid = req.user.uid;
     const conversationId = req.body.conversationId;
     const content = req.body.content;
@@ -78,7 +86,7 @@ exports.saveMSG = (req, res, next) => {
  *      1.  分页， 目前接口不支持
  *      2.  失败情况
  */
-exports.fetchOrders = (req, res, next) => {
+exports.fetchOrders = (req, res) => {
     const uid = req.user.uid;
 
     imApi.fetchOrderList(uid)

@@ -13,8 +13,12 @@ const chat = require(`${cRoot}/chat`);
 
 const chatQa = require(`${cRoot}/chatQa`); // 问题搜索列表页
 
+// middlware
+
+const authGuard = require('../../doraemon/middleware/auth');
+
 // Your controller here
-router.get('/im', chat.page);
+router.get('/im', chat.appAdapter, authGuard, chat.page);
 router.get('/getOrders', chat.getOrders);
 router.get('/msghistory', chat.msghistory);
 router.get('/order-list', chat.fetchOrders);

@@ -152,7 +152,7 @@ var chat = {
             .on('click.orderList', '[data-trigger=order-list]', function() {
                 self.orderListView.trigger('show.OderListView');
             })
-            .on('click.chat.switchServer', '[data-action=change-human]', function(){
+            .on('click.chat.switchServer', '[data-action=change-human]', function() {
                 self.switchService('human');
             })
             .on('keydown.chat.sendText', '.text-in', function(event) {
@@ -221,8 +221,12 @@ var chat = {
      *      data: object //消息数据
      *  }
      *
+     *  @param {boolean} noDraw 默认false  渲染并发送
+     *
+     *  @return {jquery}  $elem
+     *
      */
-    sendMSG: function(msg) {
+    sendMSG: function(msg, noDraw = false) {
         if (!msg || !msg.data) {
             return;
         }
@@ -265,13 +269,19 @@ var chat = {
 
         // TODO 时间
 
-        let $msg = this._drawMSG(msg);
+        !noDraw && this._drawMSG(msg);
 
         socket.send(JSON.stringify(cmEntity));
 
         return this;
     },
 
+    sendPic: function() {
+        // 1. 渲染 dom， state loading
+        // 2. ajax done, show pic
+        // 2. ajax fail, show error
+    },
+
     /**
      *  处理 conversationMessage, 生成 渲染用的数据
      */
@@ -342,7 +352,7 @@ var chat = {
             msgType = message.type,
             allTypes = socketConf.recType;
 
-        var uuid = rec.uuid;
+        // var uuid = rec.uuid;
         var viewData;
 
         // 服务状态: 离线
@@ -442,8 +452,13 @@ var chat = {
     /**
      *  对话消息
      *  @param 【object|array] viewData 订单消息模版数据
+     *  @param {function} cusAction 自定义处理函数
+     *    function ($html) {
+     *      // $html 模版渲染出来的jquery
+     *      // this ----> chat
+     *    }
      */
-    _drawMSG: function(viewData) {
+    _drawMSG: function(viewData, cusAction = null) {
         let chatWin = this.$chatWin[0];
 
         if (!$.isArray(viewData)) {
@@ -454,8 +469,12 @@ var chat = {
         let $html = $(this.messageT(viewData));
 
         this.checkTime();
-        $html.appendTo(this.$chatWin);
-        chatWin.scrollTop = chatWin.scrollHeight;
+        if (cusAction) {
+            cusAction.apply(this, [$html]);
+        } else {
+            $html.appendTo(this.$chatWin);
+            chatWin.scrollTop = chatWin.scrollHeight;
+        }
 
         return $html;
     },
@@ -497,7 +516,7 @@ var chat = {
     },
 
     // 获取10条历史记录
-    fetchHistoryMsg: function(cb) {
+    fetchHistoryMsg: function() {
         const self = this;
 
         if (msgHistory.totalCount !== null && msgHistory.curCount >= msgHistory.totalCount) {
@@ -506,7 +525,7 @@ var chat = {
 
         return api.msghistory(uid, encryptedUid, msgHistory.endTime)
             .done(function(result) {
-                if (!result || result.code !== 200) {
+                if (!result || result.code !== 200 || !result.data) {
                     return false;
                 }
 
@@ -527,7 +546,9 @@ var chat = {
                     }
                 });
 
-                self._drawMSG(arr);
+                self._drawMSG(arr, function($html) {
+                    self.$historyLoader.after($html);
+                });
 
                 if (records.length) {
                     msgHistory.endTime = records[0].sendTime;
@@ -547,7 +568,8 @@ var chat = {
             socket.send(JSON.stringify(cmEntity));
             this._sysInfo();
         } else {
-            //TODO 切换rebot
+
+            // TODO 切换rebot
         }
     },
 
@@ -604,25 +626,44 @@ $upload.on('change', function() {
     formData.append('files[]', files[0]);
 
 
-    $.ajax({
-        type: 'POST',
-        url: `${gDomains.imServer}/fileManage/uploadFile`,
-        data: formData,
-        processData: false,  // 告诉jQuery不要去处理发送的数据
-        contentType: false
-    }).done(function(res) {
-        if (res.code === 200) {
-            chat.sendMSG({
-                type: 'picture',
-                data: {
-                    content: res.data.filePath
-                }
-            });
+    var msg = {
+        type: 'picture',
+        from: 'customer',
+        avatar: userAvatar,
+        data: {
+            content: ''
         }
-    })
-    .fail(function(res) {
-        chat._sysInfo('图片上传失败,请稍后再试');
-    });
+    };
+    var $elem = chat._drawMSG(msg);
+
+
+    var _action = function() {
+        $elem.removeClass('send-fail').addClass('send-loading');
+        $.ajax({
+            type: 'POST',
+            url: `${gDomains.imServer}/fileManage/uploadFile`,
+            data: formData,
+            processData: false,  // 告诉jQuery不要去处理发送的数据
+            contentType: false
+        })
+        .done(function(res) {
+            if (res.code === 200) {
+                $elem.removeClass('send-loading')
+                    .find('.chat-image').attr('src', res.data.filePath);
+
+                chat.sendMSG(msg, true); // only send msg, no draw msg;
+            }
+        })
+        .fail(function() {
+            chat._sysInfo('图片上传失败,请稍后再试');
+            $elem
+                .removeClass('send-loading')
+                .addClass('send-fail')
+                .one('click', _action);
+        });
+    };
+
+    _action();
 });
 
 
@@ -642,4 +683,4 @@ $('#chat-window').on('click', '.chat-image', function() {
 
 window.$ = $;
 window.chat = chat;
-window.cmEntity = cmEntity;
\ No newline at end of file
+window.cmEntity = cmEntity;

@@ -77,20 +77,6 @@ let api = {
 };
 
 
-
-
-// 消息中心
-//--------------------------------------------------------
-let bus = new EventEmitter();
-
-bus.on('save.LeaveMSGView', (event, view, data) => {
-    api.leaveMsg(...data)
-        .then(res => {
-            console.log(res);
-            view.toggleHide(true);
-        });
-});
-
 module.exports = {
     EventEmitter,
     api

@@ -11,13 +11,12 @@
         position: relative;
         overflow: hidden;
 
-
         span.image {
             padding: 15px;
         }
 
         .chat-image {
-            max-width: 520px;
+            max-width: 100%;
             max-height: 540px;
         }
     }
@@ -28,7 +27,7 @@
         font-size: 28px;
         word-break: break-all;
         border-radius: 10px;
-
+        /* 
         &.msg-txt {
 
         }
@@ -40,6 +39,7 @@
         &.msg-order {
 
         }
+         */
     }
 
     .fake-img-wrap {
@@ -69,7 +69,6 @@
     }
 
     .send-msg {
-
         .msg-content {
             float: right;
             margin: 0 12px 0 0;
@@ -96,10 +95,6 @@
             float: right;
         }
 
-        .send-status {
-
-        }
-
         .msg-status {
             float: right;
             display: inline-block;
@@ -113,23 +108,24 @@
             border-radius: 50%;
         }
 
-        &.send-fail .msg-status{
+        &.send-fail .msg-status {
             color: #ff575c;
+
             &:after {
-                content: '\e61f'
+                content: "\e61f";
             }
         }
 
-        &.send-loading .msg-status{
+        &.send-loading .msg-status {
             color: transparent;
             background-image: resolve("service/chat/loading.gif");
             background-size: 100% 100%;
         }
     }
 
-    .send-msg-status {
+    /*.send-msg-status {
 
-    }
+    }*/
 
     .recevied-msg {
         .head-icon {