Browse Source

更新用户信息页面

lqq 9 years ago
parent
commit
b60c586bc6

+ 2 - 1
dist/bower.json

@@ -23,6 +23,7 @@
     "angular-animate": "^1.5.8",
     "animate.css": "^3.5.2",
     "angular-bootstrap": "^2.2.0",
-    "angular-sanitize": "^1.5.8"
+    "angular-sanitize": "^1.5.8",
+    "jquery-qrcode": "*"
   }
 }

File diff suppressed because it is too large
+ 0 - 1
dist/userview/app-41358024d2.css


File diff suppressed because it is too large
+ 1 - 0
dist/userview/app-df411b9e0b.css


File diff suppressed because it is too large
+ 1 - 0
dist/userview/app-e046324764.js


File diff suppressed because it is too large
+ 0 - 1
dist/userview/app-ef26b6f97d.js


+ 23 - 19
dist/userview/index.html

@@ -1,20 +1,24 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<title>chat view</title>
-	<meta charset="utf-8" />
-	<!-- 新 Bootstrap 核心 CSS 文件 -->
-	<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
-	<link rel="stylesheet" href="app-41358024d2.css">
-</head>
-
-<body ng-app="app" ng-controller="UserController" class="full-client" onselectstart="return false">
-	<ui-view></ui-view>
-	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
-	<script src="../bower_components/angular/angular.min.js"></script>
-	<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
-	<script src="app-ef26b6f97d.js"></script>
-</body>
-
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>chat view</title>
+	<meta charset="utf-8" />
+	<!-- 新 Bootstrap 核心 CSS 文件 -->
+	<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
+	<link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
+	<link rel="stylesheet" href="app-df411b9e0b.css">
+</head>
+
+<body ng-app="app" ng-controller="UserController" class="full-client">
+	<ui-view></ui-view>
+	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+	<script src="../bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="../bower_components/jquery-qrcode/jquery.qrcode.min.js"></script>
+	<script src="../bower_components/angular/angular.min.js"></script>
+	<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
+	<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
+	<script src="app-e046324764.js"></script>
+</body>
+
 </html>

+ 97 - 97
userview/Gulpfile.js

@@ -1,98 +1,98 @@
-var gulp = require('gulp');
-// var sass = require('gulp-sass');
-var less = require('gulp-less');
-var del = require('del');
-var concat = require('gulp-concat');
-var rev = require('gulp-rev');
-var revCollector = require('gulp-rev-collector');
-var minifycss = require('gulp-minify-css');
-var minifyhtml = require('gulp-minify-html');
-var minifyjs = require('gulp-uglify');
-var autoprefixer = require('gulp-autoprefixer');
-// var imagemin = require('gulp-imagemin');
-// var pngquant = require('imagemin-pngquant');
-var templateCache = require('gulp-angular-templatecache');
-
-// Paths to your asset files
-var paths = {
-    frontend: {
-        scripts: [
-            '../common/*.js',
-            'src/js/**/*.js'   
-        ],
-        styles: [            
-			'temp/css/*'    
-        ],
-        less: [
-            // '../common/*.less',
-            'src/less/*.less'
-        ],
-        imgs: [
-            'src/imgs/*'
-        ],
-        template: [
-            'src/templates/*.html'
-        ]
-    }
-}
-
-var distpath = '../dist/userview';
-
-gulp.task('app-css', function() {
-    del([distpath + '/app-*.css'],{cwd:process.cwd(),force:true});
-    return gulp.src(paths.frontend.less)
-        .pipe(less())
-        .pipe(concat('app.css'))
-        .pipe(minifycss())
-        .pipe(rev())
-        .pipe(gulp.dest(distpath))
-        .pipe(rev.manifest('app-css-manifest.json'))
-        .pipe(gulp.dest('temp/manifest'));
-});
-
-gulp.task('rev', ['app-css','js'], function() {    
-    return gulp.src(['temp/manifest/*.json', 'src/html/index.html'])
-        .pipe(revCollector())
-        .pipe(gulp.dest(distpath));
-});
-
-gulp.task('template', function() {
-    return gulp.src(paths.frontend.template)
-        .pipe(templateCache('templates.js', { module:'templatescache', standalone:true, root: 'templates/' }))
-        .pipe(gulp.dest('src/js'));
-});
-
-gulp.task('js', ['template'], function() {
-    // Cleanup old assets
-    del([distpath + '/app-*.js'], {cwd:process.cwd(),force:true});
-    
-    return gulp.src(paths.frontend.scripts)
-        .pipe(concat('app.js'))
-        .pipe(minifyjs())
-        .pipe(rev())
-        .pipe(gulp.dest(distpath))
-        .pipe(rev.manifest('app-js-manifest.json'))
-        .pipe(gulp.dest('temp/manifest'));
-});
-
-// gulp.task('imgs', function () {
-//     return gulp.src(paths.frontend.imgs)
-//         .pipe(imagemin({
-//             progressive: true,
-//             svgoPlugins: [{removeViewBox: false}],
-//             use: [pngquant()]
-//         }))
-//         .pipe(gulp.dest('dest/assets/imgs'));
-// });
-
-gulp.task('build', ['app-css', 'template', 'js', 'rev']);
-
-gulp.task('watch', function(){
-    gulp.watch('src/less/*.less', ['app-css', 'rev']);
-    gulp.watch('src/html/**/*.html', ['rev']);
-    gulp.watch('src/templates/**/*.html', ['template', 'js', 'rev']);
-    gulp.watch('src/js/**/*.js', ['js', 'rev']);
-});
-
-// The default task (called when you run `gulp` from cli)
+var gulp = require('gulp');
+// var sass = require('gulp-sass');
+var less = require('gulp-less');
+var del = require('del');
+var concat = require('gulp-concat');
+var rev = require('gulp-rev');
+var revCollector = require('gulp-rev-collector');
+var minifycss = require('gulp-minify-css');
+var minifyhtml = require('gulp-minify-html');
+var minifyjs = require('gulp-uglify');
+var autoprefixer = require('gulp-autoprefixer');
+// var imagemin = require('gulp-imagemin');
+// var pngquant = require('imagemin-pngquant');
+var templateCache = require('gulp-angular-templatecache');
+
+// Paths to your asset files
+var paths = {
+    frontend: {
+        scripts: [
+            '../common/*.js',
+            'src/js/**/*.js'   
+        ],
+        styles: [            
+			'temp/css/*'    
+        ],
+        less: [
+            // '../common/*.less',
+            'src/less/*.less'
+        ],
+        imgs: [
+            'src/imgs/*'
+        ],
+        template: [
+            'src/templates/*.html'
+        ]
+    }
+}
+
+var distpath = '../dist/userview';
+
+gulp.task('app-css', function() {
+    del([distpath + '/app-*.css'],{cwd:process.cwd(),force:true});
+    return gulp.src(paths.frontend.less)
+        .pipe(less())
+        .pipe(concat('app.css'))
+        .pipe(minifycss())
+        .pipe(rev())
+        .pipe(gulp.dest(distpath))
+        .pipe(rev.manifest('app-css-manifest.json'))
+        .pipe(gulp.dest('temp/manifest'));
+});
+
+gulp.task('rev', ['app-css','js'], function() {    
+    return gulp.src(['temp/manifest/*.json', 'src/html/index.html'])
+        .pipe(revCollector())
+        .pipe(gulp.dest(distpath));
+});
+
+gulp.task('template', function() {
+    return gulp.src(paths.frontend.template)
+        .pipe(templateCache('templates.js', { module:'templatescache', standalone:true, root: 'templates/' }))
+        .pipe(gulp.dest('src/js'));
+});
+
+gulp.task('js', ['template'], function() {
+    // Cleanup old assets
+    del([distpath + '/app-*.js'], {cwd:process.cwd(),force:true});
+    
+    return gulp.src(paths.frontend.scripts)
+        .pipe(concat('app.js'))
+        .pipe(minifyjs())
+        .pipe(rev())
+        .pipe(gulp.dest(distpath))
+        .pipe(rev.manifest('app-js-manifest.json'))
+        .pipe(gulp.dest('temp/manifest'));
+});
+
+// gulp.task('imgs', function () {
+//     return gulp.src(paths.frontend.imgs)
+//         .pipe(imagemin({
+//             progressive: true,
+//             svgoPlugins: [{removeViewBox: false}],
+//             use: [pngquant()]
+//         }))
+//         .pipe(gulp.dest('dest/assets/imgs'));
+// });
+
+gulp.task('build', ['app-css', 'template', 'js', 'rev']);
+
+gulp.task('watch', function(){
+    gulp.watch('src/less/*.less', ['app-css', 'rev']);
+    gulp.watch('src/html/**/*.html', ['rev']);
+    gulp.watch('src/templates/**/*.html', ['template', 'js', 'rev']);
+    gulp.watch('src/js/**/*.js', ['js', 'rev']);
+});
+
+// The default task (called when you run `gulp` from cli)
 gulp.task('default', ['build', 'watch']);

+ 4 - 0
userview/src/html/index.html

@@ -6,14 +6,18 @@
 	<meta charset="utf-8" />
 	<!-- 新 Bootstrap 核心 CSS 文件 -->
 	<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
+	<link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
 	<link rel="stylesheet" href="app.css">
 </head>
 
 <body ng-app="app" ng-controller="UserController" class="full-client">
 	<ui-view></ui-view>
 	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+	<script src="../bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="../bower_components/jquery-qrcode/jquery.qrcode.min.js"></script>
 	<script src="../bower_components/angular/angular.min.js"></script>
 	<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
+	<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
 	<script src="app.js"></script>
 </body>
 

+ 6 - 5
userview/src/js/app.js

@@ -1,6 +1,7 @@
-'use strict';
-
-var app = angular.module('app', [
-    'ui.router',
-    'templatescache'
+'use strict';
+
+var app = angular.module('app', [
+    'ui.router',
+    'templatescache',
+    'ngAnimate'
     ]);

+ 9 - 2
userview/src/js/controller/userController.js

@@ -20,7 +20,7 @@ angular.module('app').controller('UserController', ['$scope', '$state', function
   //   shortL:'lslqq'
   // };
 
-  $scope.getSex = function(sex){
+  $scope.getSex = function (sex) {
     if ($scope.user === undefined)
       return '保密';
     if ($scope.user.sex == 0)
@@ -30,6 +30,11 @@ angular.module('app').controller('UserController', ['$scope', '$state', function
     else
       return '保密';
   }
+  $scope.isActive = $state.$current.name == 'details-new.info' ? true : false;
+  $scope.$on('$stateChangeStart',
+    function (event, toState, toParams, fromState, fromParams, options) {
+      $scope.isActive = toState.name == 'details-new.info' ? true : false;
+    });
 
   $scope.update = function (userJson) {
     var user = JSON.parse(userJson);
@@ -37,7 +42,7 @@ angular.module('app').controller('UserController', ['$scope', '$state', function
     $scope.user = user;
     var reg = /-([\W\w]*)/;
     var group = reg.exec($scope.user.l);
-    $scope.user.shortL = group == null? $scope.user.l : group[1];
+    $scope.user.shortL = group == null ? $scope.user.l : group[1];
 
     //宁夏企税通企业版使用
     // if ($state.current.name == 'simple-enterprise' || $state.current.name == 'simple') {
@@ -56,4 +61,6 @@ angular.module('app').controller('UserController', ['$scope', '$state', function
     // }
 
   }
+
+
 }]);

+ 46 - 0
userview/src/js/directive/qrcode.js

@@ -0,0 +1,46 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('app')
+        .directive('qrcode', Directive);
+    Directive.$inject = ['Utilities'];
+    function Directive(Utilities) {
+        // Usage:
+        //
+        // Creates:
+        //
+        var directive = {
+            link: link,
+            restrict: 'A',
+            scope: {
+                user: '=ngUser'
+            }
+        };
+        return directive;
+
+        function link($scope, element, attrs) {
+            var codeText = "BEGIN:VCARD \r\n" +
+                "VERSION:3.0" + "\r\n" +
+                "FN:" + $scope.user.name + "\r\n" +
+                "TEL;HOME:" + $scope.user.sMob + "\r\n" +
+                "TEL;WORK:" + $scope.user.tel + "\r\n" +
+                "TEL;CELL:" + $scope.user.mob + "\r\n" +
+                "ORG:" + $scope.user.comp + "\r\n" +
+                "TITLE:" + $scope.user.duty + "\r\n" +
+                "EMAIL:" + $scope.user.email + "\r\n" +
+                "END:VCARD\r\n";
+            element.qrcode({
+                render: "canvas",
+                text: Utilities.toUtf8(codeText),
+                width: 200,
+                height: 200,
+                typeNumber: -1, //计算模式  
+                correctLevel: 0, //纠错等级 
+                background: "#ffffff",
+                foreground: "#2D7B94"
+            });
+            // jQuery('#code')
+        }
+    }
+})();

+ 37 - 25
userview/src/js/router.js

@@ -1,26 +1,38 @@
-angular.module('app').run(['$rootScope', '$state', '$stateParams', 
-    function ($rootScope, $state, $stateParams) {
-        $rootScope.$state = $state;
-        $rootScope.$stateParams = $stateParams;
-    }
-]).config(['$stateProvider', '$urlRouterProvider',
-    function($stateProvider, $urlRouterProvider){
-        $urlRouterProvider.otherwise('/simple');
-        $stateProvider.state('simple',{
-            url:'/simple',
-            templateUrl:'templates/simple.html'
-        })
-        .state('details',{
-            url:'/details',
-            templateUrl:'templates/details.html'
-        })
-        .state('simple-enterprise',{
-            url:'/simple-enterprise',
-            templateUrl:'templates/simple-enterprise.html'
-        })
-        .state('details-enterprise',{
-            url:'/details-enterprise',
-            templateUrl:'templates/details-enterprise.html'
-        });
-    }
+angular.module('app').run(['$rootScope', '$state', '$stateParams', 
+    function ($rootScope, $state, $stateParams) {
+        $rootScope.$state = $state;
+        $rootScope.$stateParams = $stateParams;
+    }
+]).config(['$stateProvider', '$urlRouterProvider',
+    function($stateProvider, $urlRouterProvider){
+        $urlRouterProvider.otherwise('/simple');
+        $stateProvider.state('simple',{
+            url:'/simple',
+            templateUrl:'templates/simple.html'
+        })
+        .state('details',{
+            url:'/details',
+            templateUrl:'templates/details.html'
+        })
+        .state('simple-enterprise',{
+            url:'/simple-enterprise',
+            templateUrl:'templates/simple-enterprise.html'
+        })
+        .state('details-enterprise',{
+            url:'/details-enterprise',
+            templateUrl:'templates/details-enterprise.html'
+        })
+        .state('details-new',{
+            url:'/details-new',
+            templateUrl:'templates/details-new.html'
+        })
+        .state('details-new.qrcode',{
+            url:'/qrcode',
+            templateUrl:'templates/details-new-qrcode.html'
+        })
+        .state('details-new.info',{
+            url:'/info',
+            templateUrl:'templates/details-new-info.html'
+        });
+    }
 ])

+ 24 - 0
userview/src/js/service/utilities.js

@@ -0,0 +1,24 @@
+angular.module('app')
+    .factory('Utilities', function() {
+        return {
+            toUtf8: function(str) {
+                var out, i, len, c;
+                out = "";
+                len = str.length;
+                for (i = 0; i < len; i++) {
+                    c = str.charCodeAt(i);
+                    if ((c >= 0x0001) && (c <= 0x007F)) {
+                        out += str.charAt(i);
+                    } else if (c > 0x07FF) {
+                        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
+                        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
+                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
+                    } else {
+                        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
+                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
+                    }
+                }
+                return out;
+            }
+        }
+    });

File diff suppressed because it is too large
+ 3 - 0
userview/src/js/templates.js


+ 156 - 0
userview/src/less/app.details.new.less

@@ -0,0 +1,156 @@
+
+.fadeOutLeftBig {
+	-webkit-animation-name: fadeOutLeftBig;
+	animation-name: fadeOutLeftBig;
+}
+.fadeInRightBig {
+	-webkit-animation-name: fadeInRightBig;
+	animation-name: fadeInRightBig;
+}
+
+.fade-in-right-big.ng-enter {
+  -webkit-animation: fadeInRightBig 0.5s;
+          animation: fadeInRightBig 0.5s;
+}
+
+.fade-in-right-big.ng-leave {
+  -webkit-animation: fadeOutLeftBig 1s;
+          animation: fadeOutLeftBig 1s;
+}
+
+#details{
+    width: 400px;
+    height: 700px;
+    margin: auto;
+    overflow: hidden;
+    text-align: center;
+    #userHead{
+        height: 230px;
+        background: -o-linear-gradient(#96CEDF, #5EB0D2); /* Opera 11.1 - 12.0 */
+        background: linear-gradient(#96CEDF, #5EB0D2); /* 标准的语法(必须放在最后) */
+        box-shadow: 0px 5px 5px #ccc;
+        overflow: hidden;
+        #icoImg {
+            width: 110px;
+            height: 110px;
+            margin: 20px auto 15px;
+            border-radius: 100%;
+            border:4px solid #eee;
+            background: #96CEDF;
+            >img {
+                border-radius: 100%;
+                width: 100%;
+                height: 100%;
+                }
+        }
+        .displayName {
+            color: #fff;
+            font-size: 18px;
+            margin-left:5px; 
+            font-family: "微软雅黑","宋体";
+            text-shadow:0px 0px 2px #666;
+        }
+        #watch {
+            text-align: left;
+            font-family: "楷体_GB2312:KaiTi_GB2312","宋体";
+            background: #7FC1D7;
+            color: #fff;
+            margin-top: 15px;
+            font-size: 12px;
+            padding: 8px 10px;
+            text-shadow:0px 0px 2px #999;
+            white-space: nowrap; /* 自适应宽度,不换行*/
+            >input {
+                margin-left:-7px; 
+                border: none;
+                outline: none;
+                background: #7FC1D7;
+                width: 85%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-shadow:0px 0px 2px #999;
+            }
+        }
+    }
+    #userInfo {
+        height: 430px;
+        margin-top:4px;
+        background: #E8F4F8;
+        #sInfo {
+            float:right;
+            margin: 10px 2px;
+            width: 50px;
+            height: 30px;
+            >a {
+            padding-left:13px; 
+            font-size: 24px;
+            color: #3EB0D2;
+            text-decoration:none;
+            &:hover {
+                color:#5EB0D2;
+            }
+            }
+        }
+        #sCode {
+            float:right;
+            margin: 9px 2px;
+            width: 50px;
+            height: 30px;
+            >a {
+            padding-left:12px; 
+            font-size: 24px;
+            color: #3EB0D2;
+            text-decoration:none;
+            &:hover {
+                color:#5EB0D2;
+            }
+            }
+        }
+        .navdown {
+            display: none;
+        }
+        #content {
+            position: relative;
+            >ul {
+                position: absolute;
+                list-style: none;
+                margin: 0px 30px 0px -10px;
+                #head {
+                    width: 100px;
+                    padding-top:20px;
+                    padding-bottom: 30px;
+                    margin-left:-10px;  
+                    text-align: left;
+                    font-weight: bold;
+                    font-size: 16px;
+                }
+                >li {
+                    font-family: "微软雅黑","宋体";
+                    padding-bottom:22px;
+                    text-align: left;
+                    font-size: 12px;
+                    color: #444;
+                    white-space: nowrap; /* 自适应宽度,不换行*/
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    span.lr {
+                        margin-left: 40px;
+                    }
+                }
+            }
+        }
+        #userCode {
+            position: relative;
+            top: 90px;
+            left: 90px;
+            #code {
+                position: absolute;
+                width: 220px;
+                height: 216px;
+                border: 8px solid #fff;
+                box-shadow:0px 0px 1px #999;
+            }
+        }
+    }
+}

+ 14 - 0
userview/src/templates/details-new-info.html

@@ -0,0 +1,14 @@
+<div id="content">
+    <ul>
+        <li id="head">个人资料</li>
+        <li><span class="lf">单位名称</span> <span class="lr" title="{{user.comp}}">{{user.comp}}</span></li>
+        <li><span class="lf">处室名称</span> <span class="lr">{{user.branch}}</span></li>
+        <li><span class="lf">职务名称</span> <span class="lr">{{user.duty}}</span></li>
+        <li><span class="lf">用户性别</span> <span class="lr">{{getSex()}}</span></li>
+        <li><span class="lf">办公电话</span> <span class="lr">{{user.tel}}</span></li>
+        <li><span class="lf">办公室号</span> <span class="lr">{{user.officeID}}</span></li>
+        <li><span class="lf">手机号码</span> <span class="lr">{{user.mob}}</span></li>
+        <li><span class="lf">手机短号</span> <span class="lr">{{user.sMob}}</span></li>
+        <li><span class="lf">办公邮箱</span> <span class="lr">{{user.email}}</span></li>
+    </ul>
+</div>

+ 3 - 0
userview/src/templates/details-new-qrcode.html

@@ -0,0 +1,3 @@
+<div id="userCode">
+    <div id="code" qrcode ng-user="user"> </div>
+</div>

+ 20 - 0
userview/src/templates/details-new.html

@@ -0,0 +1,20 @@
+<div id="details">
+    <div id="userHead">
+        <div id="icoImg">
+            <img src="../img/DefaultHeadImage_96.png">
+        </div>
+        <span class="displayName"> {{user.name}}&nbsp;({{user.shortL}})</span>
+        <div id="watch">
+            <span>个性签名:</span>
+            <input type="text" readonly="readonly" class="watchword" title="{{user.watchword}}" value="{{user.watchword !== null || user.watchword !== undefined || user.watchword !== ''?user.watchword:'他什么都没有留下'}}">
+        </div>
+    </div>
+    <div id="userInfo">
+        <span id="sCode" ng-class="{true: 'navdown', false: ''}[isActive]" ui-sref=".info"><a href="" class="glyphicon glyphicon-user"></a>
+        </span>
+        <span id="sInfo" ng-class="{true: '', false: 'navdown'}[isActive]" ui-sref=".qrcode"><a href="" class="glyphicon glyphicon-qrcode"></a>
+        </span>
+        <div ui-view class="fade-in-right-big"></div>
+
+    </div>
+</div>

+ 1 - 1
userview/temp/manifest/app-css-manifest.json

@@ -1,3 +1,3 @@
 {
-  "app.css": "app-41358024d2.css"
+  "app.css": "app-df411b9e0b.css"
 }

+ 1 - 1
userview/temp/manifest/app-js-manifest.json

@@ -1,3 +1,3 @@
 {
-  "app.js": "app-ef26b6f97d.js"
+  "app.js": "app-e046324764.js"
 }