短信界面

talkview/src/js/controller/smsController.js

@@ -7,7 +7,7 @@ angular.module('appMessage').controller('SmsController', ['$scope', '$state', '$
     $scope.nowDate = $filter("date")($scope.now, "yyyy/MM/dd HH:mm:ss");
     $scope.selectDate = $scope.nowDate;
     $scope.checkId = false;
-    $scope.counts = 0;
+    $scope.activeData = '按Ctrl+Enter键发送消息';
 
     $scope.disable = function($event) {
         var dataForm = $($event.currentTarget.previousElementSibling.children);
@@ -22,23 +22,66 @@ angular.module('appMessage').controller('SmsController', ['$scope', '$state', '$
 
     $scope.activeClick = function($event) {
         var activeClick = $($event.target.firstElementChild);
-        var activeData = $event.target.innerText;
-        console.log(activeData);
+        $scope.activeData = $event.target.innerText;
+        console.log($scope.activeData);
         angular.element(".active").addClass("hid");
         activeClick.removeClass("hid");
     };
 
-    $scope.mobSet = function() {
-        var mobLen = $scope.inputMob.length;
-        if (mobLen < 12)
-            $scope.counts = 0;
-        else
-            $scope.counts = Math.floor($scope.inputMob.length / 11);
-        mobLen = mobLen - $scope.counts;
-        console.log(mobLen);
-        if (mobLen % 11 == 0 && mobLen !== 0) {
-            $scope.inputMob = $scope.inputMob + ','
-            $scope.counts = Math.floor($scope.inputMob.length / 11);
+    $scope.enKeyup = function(e) {
+        var sendmsg = $(e.target);
+        var mediamsg = $(e.target.parentElement.previousElementSibling);
+        var keycode = window.event ? e.keyCode : e.which;
+        var len = _.trim(sendmsg[0].textContent).length;
+        console.log(sendmsg);
+        var html = '<div class="feed-element"><div class="media-body "><p><span class="glyphicon glyphicon-menu-right"><span>15906422850</span>16:28:50</span><span class="glyphicon glyphicon-ok"></span></p>' +
+            '<div class = "well m-l-xs m-t-xs fit-content" >' +
+            '<span class = "text-message">' + sendmsg[0].textContent + '</span> </div></div></div>';
+        if (len !== 0 && $scope.activeData == '按Enter键发送消息') {
+            if (!e.ctrlKey && keycode == 13) {
+                mediamsg.append(html);
+                sendmsg[0].textContent = "";
+            } else if (e.ctrlKey && e.which == 13)
+                sendmsg.append('\r\n');
+        } else if (len !== 0 && $scope.activeData == '按Ctrl+Enter键发送消息') {
+            if (e.ctrlKey && e.which == 13) {
+                mediamsg.append(html);
+                sendmsg[0].textContent = "";
+            }
+        }
+    };
+
+    $scope.sendMsg = function($event) {
+        var sendmsg = $($event.target.parentElement.previousElementSibling);
+        var mediamsg = $($event.target.parentElement.previousElementSibling.parentElement.previousElementSibling);
+        var len = _.trim(sendmsg[0].textContent).length;
+        console.log(sendmsg);
+        var html = '<div class="feed-element"><div class="media-body "><p><span class="glyphicon glyphicon-menu-right"><span>15906422850</span>16:28:50</span><span class="glyphicon glyphicon-ok"></span></p>' +
+            '<div class = "well m-l-xs m-t-xs fit-content" >' +
+            '<span class = "text-message">' + sendmsg[0].textContent + '</span> </div></div></div>';
+        if (len !== 0) {
+            mediamsg.append(html);
+            sendmsg[0].textContent = "";
+        }
+    };
+    // $scope.mobAdd = function() {
+    //     var mobLen = $scope.inputMob.length;
+    //     if (mobLen < 12)
+    //         $scope.counts = 0;
+    //     mobLen = mobLen - $scope.counts;
+    //     console.log(mobLen);
+    //     if (mobLen % 11 == 0 && mobLen !== 0) {
+    //         $scope.inputMob = $scope.inputMob + ','
+    //         $scope.counts = $scope.counts + 1;
+    //            $scope.counts = Math.floor($scope.inputMob.length / 11);
+    //     }
+    // };
+    $scope.mobReset = function() {
+        if ($scope.inputMob) {
+            if ($scope.inputMob instanceof Array)
+                $scope.inputMob = $scope.inputMob.join(",");
+            console.log($scope.inputMob);
+            $scope.inputMob = $scope.inputMob.match(/\d{11}/ig);
         }
     };
 }]);

talkview/src/less/app.main.less

@@ -59,7 +59,7 @@
     }
     p>span {
         margin-top: 1px;
-        float: left;
+        /*float: left;*/
         margin-left: 5px;
         color: #007FE0;
         >span {
@@ -668,6 +668,14 @@ body {
                 height: 25px;
                 padding: 2px;
                 font-size: 11px;
+                width: 101%;
+            }
+            .glyphicon-refresh {
+                color: green;
+                float: right;
+                text-decoration:none;
+                margin-top: 0px;
+                margin-right: -7px;
             }
         }
     }
@@ -677,6 +685,7 @@ body {
         border-radius: 5px;
         margin: 0px 10px;
         background: #fff;
+        overflow-y: auto;
     }
     #sms-inbox {
         height: 125px;
@@ -686,7 +695,7 @@ body {
         background: #fff;
         #sms-input {
             height: 80px;
-            padding: 5px 20px 5px 5px;
+            padding: 5px 25px 5px 5px;
             margin-right: -20px;
             overflow-y: auto;
             &:focus {

talkview/src/templates/smsSend.html

@@ -22,11 +22,12 @@
     <div id="sms-mob">
         <div class="input-group">
             <span class="input-group-addon" id="basic-addon3">手机号码</span>
-            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="请输入接收短信的手机号码，多个号码之间以逗号隔开. . ." ng-model="inputMob" ng-change="mobSet()">
+            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="请输入接收短信的手机号码，多个号码之间以逗号隔开. . ." ng-model="inputMob">
+            <span class="input-group-addon" ng-click="mobReset()" title="自动排序"><a class="glyphicon glyphicon-refresh"></a></span>
         </div>
     </div>
     <div id="sms-media">
-        <div class="feed-element">
+        <!--<div class="feed-element">
             <div class="media-body ">
                 <p><span class="glyphicon glyphicon-menu-right"><span>短信群发</span>16:28:40</span><span class="glyphicon glyphicon-ok"></span>
                 </p>
@@ -34,8 +35,8 @@
                     <span class="text-message">手动建开发技术的发是打发是否阿萨德发按时大家阿萨德发 圣诞节法律考试及地方akjsdklfajs 按时大奖是离开的房间阿萨德发是对方可爱上了对方快递费阿斯顿发阿萨德发啊阿萨德f</span>
                 </div>
             </div>
-        </div>
-        <div class="feed-element">
+        </div>-->
+        <!--<div class="feed-element">
             <div class="media-body ">
                 <p><span class="glyphicon glyphicon-menu-right"><span>15906422850</span>16:28:50</span><span class="glyphicon glyphicon-remove"></span>
                 </p>
@@ -43,21 +44,20 @@
                     <span class="text-message">手动建开发技术的发是打发是否阿萨德发按时大家阿萨德发 圣诞节法律考试及地方akjsdklfajs 按时大奖是离开的房间阿萨德发是对方可爱上了对方快递费阿斯顿发阿萨德发啊阿萨德f</span>
                 </div>
             </div>
-        </div>
+        </div>-->
     </div>
     <div id="sms-inbox">
-        <div id="sms-input" contenteditable="true">
-        </div>
+        <div id="sms-input" contenteditable="plaintext-only" ng-keyup="enKeyup($event)"></div>
         <div id="sms-button">
-            <button type="button" class="btn btn-success">发送</button>
+            <button type="button" class="btn btn-success" ng-click="sendMsg($event)">发送</button>
             <div class="btn-group">
                 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                 </button>
                 <ul class="dropdown-menu">
-                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active"></span> 按Enter键发送消息</a></li>
-                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active hid"></span> 按Ctrl+Enter键发送消息</a></li>
+                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active hid"></span> 按Enter键发送消息</a></li>
+                    <li><a href="#" ng-click="activeClick($event)"><span class="glyphicon glyphicon-ok active"></span> 按Ctrl+Enter键发送消息</a></li>
                 </ul>
             </div>
         </div>