Domů Procházet Nápověda
Registrovat se Přihlásit se
orderqueen
/
oqpo-view
Sledovat 3
Oblíbit 0
Rozštěpit 0
Soubory Úkoly 0 Požadavky na natažení 0 Wiki
Procházet zdrojové kódy

모바일 화면 구성

juney před 2 roky
rodič
f8fa6bc704
revize
b135b38648
7 změnil soubory, kde provedl 3146 přidání a 64 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 54 32
      src/main/webapp/mobile/app/login.html
  2. 44 10
      src/main/webapp/mobile/app/main.html
  3. 2 2
      src/main/webapp/mobile/css/style.css
  4. 3 4
      src/main/webapp/mobile/js/app/login.js
  5. 68 16
      src/main/webapp/mobile/js/app/main.js
  6. 2970 0
      src/main/webapp/mobile/js/config.js
  7. 5 0
      src/main/webapp/mobile/js/properties.js

+ 54 - 32
src/main/webapp/mobile/app/login.html
Zobrazit soubor 

@@ -2,46 +2,68 @@
2 2 
 <html lang="ko">
3 3 
   <head>
4 4 
     <meta charset="UTF-8">
5 
+    <meta http-equiv="Content-Type" content="text/html; utf-8">
5 6 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
8 
+    <meta name="format-detection" content="telephone=no">
7 9 
     <title>로그인</title>
8 
-    <link rel="stylesheet" href="../..//css/style.m.css">
10 
+
11 
+    <link rel="stylesheet" href="../../bootstrap/dist/css/bootstrap.min.css" />
12 
+    <link rel="stylesheet" href="../../bootstrap-datepicker/css/bootstrap-datepicker3.css" />
13 
+    <link rel="stylesheet" href="../../bootstrap-fileUpload/dist/bootstrap-FileUpload.css" />
14 
+    <link rel="stylesheet" href="../../css/ui.jqgrid-bootstrap.css" />
15 
+    <link rel="stylesheet" href="../css/style.css" />
16 
+
17 
+    <script>
18 
+      const VIEW_PAGE = 'LOGIN'; //config.js 에서 로그인 페이지 인지 아닌지 확인하기 위한 변수
19 
+      var CONN_KEY; //Jwt 토큰을 담기위한 변수
20 
+    </script>
21 
+
22 
+    <script src="../js/properties.js"></script>
23 
+    <script src="../../js/require.min.js" data-main="../js/config.js"></script>
9 24 
   </head>
25 
+  <body>
10 26 
     <div id="ITP_LOGIN">
11 
-      <div class="login_popup">
12 
-        <div class="login_info">
13 
-          <h1>서비스<br>VISUAL IMAGE</h1>
14 
-        </div>
15 
-        <div class="num_area">
16 
-          <div class="input_area">
17 
-            <input type="text" name="id" id="id"  required>
18 
-            <label for="id">사업자번호</label>
19 
-            <button>연결</button>
20 
-          </div>
21 
-          <div class="brand_list">
22 
-            <select name="" id="">
23 
-              <option>브랜드 리스트</option>
24 
-              <option>asdfasdf</option>
25 
-            </select>
27 
+      <form id="ITP_FORM_MOBILE_LOGIN" class="form-horizontal" action="" method="post" onsubmit="return false;">
28 
+        <input id="userId" name="userId" type="hidden" value="" />
29 
+        <input id="password" name="password" type="hidden" value="" />
30 
+        <div class="login_popup">
31 
+          <div class="login_info">
32 
+            <h1>서비스<br>VISUAL IMAGE</h1>
26 33 
           </div>
27 
-        </div>
28 
-        <div class="login_page">
29 
-          <div class="input_area">
30 
-            <input type="text" name="id" id="id"  required>
31 
-            <label for="id">아이디</label>
34 
+          <!--<div class="num_area">
35 
+            <div class="input_area">
36 
+              <input type="text" name="id" id="id"  required>
37 
+              <label for="id">사업자번호</label>
38 
+              <button>연결</button>
39 
+            </div>
40 
+            <div class="brand_list">
41 
+              <select name="" id="">
42 
+                <option>브랜드 리스트</option>
43 
+                <option>asdfasdf</option>
44 
+              </select>
45 
+            </div>
46 
+          </div>-->
47 
+          <div class="login_page">
48 
+            <div class="input_area">
49 
+              <input type="text" name="id" id="ITP_FORM_LOGIN_USER_ID" required>
50 
+              <label for="ITP_FORM_LOGIN_USER_ID">아이디</label>
51 
+            </div>
52 
+            <div class="input_area">
53 
+              <input type="password" name="pw" id="ITP_FORM_LOGIN_USER_PW" required>
54 
+              <label for="ITP_FORM_LOGIN_USER_PW">비밀번호</label>
55 
+            </div>
32 56 
           </div>
33 
-          <div class="input_area">
34 
-            <input type="password" name="pw" id="pw"  required>
35 
-            <label for="pw">비밀번호</label>
57 
+          <div class="error">
58 
+            <label>사업자번호와 관련된 브랜드 정보가 없습니다.</label>
36 59 
           </div>
37 60 
         </div>
38 
-        <div class="error">
39 
-          <label>사업자번호와 관련된 브랜드 정보가 없습니다.</label>
61 
+        <div class="login_btn">
62 
+          <button type="submit" id="login_btn" class="btn btn-primary btn-lg itp_btn">로그인</button>
40 63 
         </div>
41 
-      </div>
42 
-      <div class="login_btn">
43 
-        <button>로그인</button>
44 
-      </div>
45 
-    </div>
64 
+      </form>
65 
+    </div>
66 
+    <script src="../js/app/login.js?version=20210826"></script>
67 
+  </body>
46 68 
 </html>
47 69

+ 44 - 10
src/main/webapp/mobile/app/main.html
Zobrazit soubor 

@@ -2,17 +2,41 @@
2 2 
 <html lang="ko">
3 3 
 <head>
4 4 
 	<meta charset="UTF-8">
5 
+	<meta http-equiv="Content-Type" content="text/html; utf-8">
5 6 
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
8 
+	<meta name="format-detection" content="telephone=no">
7 9 
 	<title>모바일 수발주</title>
8 
-	<link rel="stylesheet" href="../..//css/style.m.css">
10 
+
11 
+	<link rel="stylesheet" href="../../bootstrap/dist/css/bootstrap.min.css" />
12 
+	<link rel="stylesheet" href="../../bootstrap-datepicker/css/bootstrap-datepicker3.css" />
13 
+	<link rel="stylesheet" href="../../bootstrap-fileUpload/dist/bootstrap-FileUpload.css" />
14 
+	<link rel="stylesheet" href="../../css/ui.jqgrid-bootstrap.css" />
15 
+	<link rel="stylesheet" href="../css/style.css" />
16 
+
17 
+	<script>
18 
+		const ITP_SYSTEM_ADMIN_YN = 'Y';
19 
+		const VIEW_PAGE = 'MAIN'; //config.js 에서 로그인 페이지 인지 아닌지 확인하기 위한 변수
20 
+
21 
+		var CONN_KEY; //Jwt 토큰을 담기위한 변수
22 
+		var CODE_LIST; //코드리스트를 담기위한 변수
23 
+		var AUTH_MENU_LIST; //메뉴리스트를 담기위한 변수
24 
+		var ACT_LIST; //액션리스트를 담기위한 변수
25 
+		var LOGIN_USER_INFO; // 로그인 사용자 정보를 담기위한 변수
26 
+		var POP_LIST; //팝업 리스트
27 
+		var USER_ID; //사용자ID
28 
+		var USER_NM; //사용자명
29 
+	</script>
30 
+
31 
+	<script src="../js/properties.js"></script>
32 
+	<script src="../../js/require.min.js" data-main="../js/config.js"></script>
9 33 
 </head>
10 34 
 	<body>
11 35 
 		<div id="ITP_WRAPPER">
12 36 
 			<header>
13 37 
 				<div class="header_wrap">
14 38 
 					<div class="fnBrandLogo">
15 
-						<img src="/img/naver.png">
39 
+						<img src="../img/naver.png">
16 40 
 					</div>
17 41 
 					<div class="name_info">
18 42 
 						<label>
 
@@ -30,8 +54,8 @@
30 54 
 					</div>
31 55 
 				</div>
32 56 
 			</header>
33 
-			<div class="main">
34 
-				<div class="wicon">
57 
+			<div id="ITP_CONTAINER" class="main">
58 
+				<!--<div class="wicon">
35 59 
 					<div class="icon_left">
36 60 
 						<button>
37 61 
 							<label>ICON<br>구매요청생성</label>
 
@@ -66,26 +90,36 @@
66 90 
 							<label>ICON<br>구매요청현황</label>
67 91 
 						</button>
68 92 
 					</div>
69 
-				</div>
93 
+				</div>-->
70 94 
 			</div>
71 95 
 			<div class="footer">
72 96 
 				<div class="footer_btn_bar">
73 97 
 					<div class="home">
74 
-						<button><img src="/img/home.png" alt=""></button>
98 
+						<button><img src="../img/home.png" alt=""></button>
75 99 
 					</div>
76 100 
 					<div class="manage_btn_bar">
77 
-						<div class="manage">
101 
+						<!--<div class="manage col_4" data-top-menu="3212">
78 102 
 							<button>발주관리</button>
79 103 
 						</div>
80 
-						<div class="manage">
104 
+						<div class="manage col_4" data-top-menu="3213">
81 105 
 							<button>반품관리</button>
82 106 
 						</div>
83 
-						<div class="manage">
107 
+						<div class="manage col_4" data-top-menu="3214">
84 108 
 							<button>반품관리</button>
85 109 
 						</div>
110 
+						<div class="manage col_4" data-top-menu="3212">
111 
+							<button>발주관리</button>
112 
+						</div>
113 
+						<div class="manage col_4" data-top-menu="3213">
114 
+							<button>반품관리</button>
115 
+						</div>
116 
+						<div class="manage col_4" data-top-menu="3214">
117 
+							<button>반품관리</button>
118 
+						</div>-->
86 119 
 					</div>
87 120 
 				</div>
88 121 
 			</div>
89 122 
 		</div>
123 
+		<script src="../js/app/main.js?version=20210826"></script>
90 124 
 	</body>
91 125 
 </html>

+ 2 - 2
src/main/webapp/mobile/css/style.css
Zobrazit soubor 

@@ -1,4 +1,4 @@
1 
-@font-face { font-family: 'NanumBarunGothic';src: url('/fonts/NanumBarunGothic.eot');src: url('/fonts/NanumBarunGothic.eot') format('embedded-opentype'),url('/fonts/NanumBarunGothic.woff') format('woff');}
1 
+@font-face { font-family: 'NanumBarunGothic';src: url('../fonts/NanumBarunGothic.eot');src: url('../fonts/NanumBarunGothic.eot') format('embedded-opentype'),url('../fonts/NanumBarunGothic.woff') format('woff');}
2 2 
 * {margin: 0; padding: 0; box-sizing: border-box; text-align: center; font-family: 'NanumBarunGothic', 'serif';}
3 3 
 section { background-color: #eee; width: 100%; height: 100%;}
4 4 
 body{background: #fff; position: relative; width: 100%; height: 500px;}
 
@@ -97,7 +97,7 @@ button:hover {background: rgb(229, 248, 202); color: #000;}
97 97 
 #ITP_LOGIN .login_popup .num_area .input_area {margin-bottom: 10px;}
98 98 
 #ITP_LOGIN .login_popup .num_area .input_area input {width:52%; font-size: 0.8rem; }
99 99 
 #ITP_LOGIN .login_popup .num_area .input_area button {font-weight: 700; margin-left: 0.1%; width: 16.5%; height: 40px; background-color: blue; color: #eee; font-size: 1rem; padding: 0;}
100 
-#ITP_LOGIN .login_popup .num_area .brand_list select {padding-left: 10px; width: 70%; height: 40px; font-size: 0.8rem; background: url(/img/down.png)no-repeat 100% 50%/70px auto; -webkit-appearance:none; appearance:none;}
100 
+#ITP_LOGIN .login_popup .num_area .brand_list select {padding-left: 10px; width: 70%; height: 40px; font-size: 0.8rem; background: url(../img/down.png)no-repeat 100% 50%/70px auto; -webkit-appearance:none; appearance:none;}
101 101 
 #ITP_LOGIN .login_popup .num_area .brand_list select option {text-align: left; width: 70%; height: 50px; border: 1px solid #000; font-size: 20px;}
102 102
103 103 
 #ITP_LOGIN .login_page {position: relative; width: 100%;  margin-bottom: 30px;}

+ 3 - 4
src/main/webapp/mobile/js/app/login.js
Zobrazit soubor 

@@ -7,7 +7,7 @@ require(['config'], function() {
7 7 
 	    	location.replace('./main.html');
8 8 
 	    }
9 9
10 
-		itp_fn_login_init();
10 
+		// itp_fn_login_init();
11 11
12 12 
 		$('#ITP_LOGIN').on('keyup', 'input, textarea', function() {
13 13 
 			var $th = $(this);
 
@@ -17,7 +17,7 @@ require(['config'], function() {
17 17 
 		$('#login_btn').click(function() {
18 18 
 			if(itp_fn_login_validate()) {
19 19 
 				itp_fn_login_proc();
20 
-			}
20 
+			}
21 21 
 		});
22 22
23 23 
 		var callbackFn = function(result) {
 
@@ -67,7 +67,6 @@ function itp_fn_login_validate() {
67 67 
 };
68 68
69 69 
 function itp_fn_login_proc() {
70 
-
71 70 
 	var callbackFn = function(result) {
72 71 
 		var hashed = fnHashed(result.hashed);
73 72 
 		$('#userId').val(CryptoJS.AES.encrypt($('#ITP_FORM_LOGIN_USER_ID').val(), hashed));
 
@@ -80,7 +79,7 @@ function itp_fn_login_proc() {
80 79 
 			}));
81 80 
 	    	$(location).attr('href', MOBILE_CONTEXTPATH + '/app/main.html');
82 81 
 		};
83 
-		var params = $('#command').serializeObject();
82 
+		var params = $('#ITP_FORM_MOBILE_LOGIN').serializeObject();
84 83 
 		fn_ajax_call('/api/member/sign-in', JSON.stringify(params), loginFn, 'POST'); //암호화 해서 보내는 경우 먼저 해시키를 가져와서 암호화해서 보낸다
85 84 
 	};
86 85 
 	fn_ajax_call('/api/session/hashed', null, callbackFn, 'GET'); //Crypto 암호화를 위한 해쉬키.. 로그인 후에는 Jwt 포함인 /api/session/hashedKey 이걸로 호출해서 사용한다.

+ 68 - 16
src/main/webapp/mobile/js/app/main.js
Zobrazit soubor 

@@ -8,31 +8,83 @@ let NTICE_DETAIL_GRID_LIST = '/api/ntice/detail-grid-list';
8 8
9 9 
 require(['config'], function() {
10 10 
 	require([
11 
-		'jquery',
12 
-		'jquery.bootstrap.fileUpload' //파일 업로드가 있는 페이지에서 로딩
13 11 
 	], function($) {
14 12
15 13 
 		setTimeout(function() {
16 
-			// 시간지정
17 
-			$('#ITP_FORM_MAIN_NOTICE_SEARCH_SCH_DT').val(itp_fn_date_format(new Date(), 2));
18 
-			$('#ITP_FORM_MAIN_NOTICE_SEARCH_USER_ID').val(USER_ID);
19 
-
20 
-			// 그리드
21 
-			itp_fn_jqgrid_resize(MAIN_NOTICE_GRID_ID, MAIN_NOTICE_GRID_LIST, 'lg');
22 
-			itp_fn_MAIN_NOTICE_grid.init();
23 
-	    	itp_fn_fire_window_resize();
24 
-
25 
-			// 조회
26 
-	    	itp_fn_MAIN_NOTICE_search();
27 
-
28 
-	    	// Barcode
29 
-			itp_fn_barcode.init();
14 
+			// // 시간지정
15 
+			// $('#ITP_FORM_MAIN_NOTICE_SEARCH_SCH_DT').val(itp_fn_date_format(new Date(), 2));
16 
+			// $('#ITP_FORM_MAIN_NOTICE_SEARCH_USER_ID').val(USER_ID);
17 
+			//
18 
+			// // 그리드
19 
+			// itp_fn_jqgrid_resize(MAIN_NOTICE_GRID_ID, MAIN_NOTICE_GRID_LIST, 'lg');
20 
+			// itp_fn_MAIN_NOTICE_grid.init();
21 
+	    	// itp_fn_fire_window_resize();
22 
+			//
23 
+			// // 조회
24 
+	    	// itp_fn_MAIN_NOTICE_search();
25 
+			//
26 
+	    	// // Barcode
27 
+			// itp_fn_barcode.init();
30 28
31 29 
 		}, 100);
32 30
33 31 
 	});
34 32 
 });
35 33
34 
+var itp_fn_mobile_MAIN_MENU = {
35 
+	init: function() {
36 
+		this.topMenuMake();
37 
+		this.button();
38 
+	},
39 
+	button: function() {
40 
+		var _this = this;
41 
+		$(document).on('click', '.manage_btn_bar button', function() {
42 
+			$('#ITP_CONTAINER').empty();
43 
+			_this.subMenuMake($(this).data('top-menu'));
44 
+		});
45 
+		$(document).on('click', '#ITP_CONTAINER button', function() {
46 
+			console.log('===> ' + $(this).data('sub-menu'));
47 
+		});
48 
+	},
49 
+	topMenuMake: function() {
50 
+		var _this = this;
51 
+		$.each(AUTH_MENU_LIST, function(key, value) {
52 
+			if(value.topMenuNo === 200) {
53 
+				var menuDIV = 	'<div class="manage col_4">' +
54 
+								'	<button data-top-menu="' + value.menuNo + '">' + value.menuNm + '</button>' +
55 
+								'</div>';
56 
+				$('.manage_btn_bar').append(menuDIV);
57 
+				if(key === 0) {
58 
+					_this.subMenuMake(value.menuNo);
59 
+				}
60 
+			}
61 
+		});
62 
+	},
63 
+	subMenuMake: function(topMenuNo) {
64 
+		var seq = 0;
65 
+		var pos = 'icon_left';
66 
+		var menuDIV = '<div class="wicon">\n';
67 
+		$.each(AUTH_MENU_LIST, function(key, value) {
68 
+			if(value.topMenuNo === topMenuNo) {
69 
+				if(seq > 0 && seq % 2 === 0) {
70 
+					menuDIV += '</div>\n';
71 
+					menuDIV += '<div class="wicon">\n';
72 
+					pos = 'icon_left';
73 
+				}
74 
+				menuDIV += 	'	<div class="' + pos + '">\n' +
75 
+							'		<button data-sub-menu="' + value.menuNo + '">\n' +
76 
+							'			<label>ICON<br>' + value.menuNm + '</label>\n' +
77 
+							'		</button>\n' +
78 
+							'	</div>\n';
79 
+				seq++;
80 
+				pos = 'icon_right';
81 
+			}
82 
+		});
83 
+		menuDIV += '</div>';
84 
+		$('#ITP_CONTAINER').append(menuDIV);
85 
+	}
86 
+};
87 
+
36 88 
 var itp_fn_MAIN_NOTICE_grid = {
37 89 
 	init: function() {
38 90 
 		// 데이터 없을때

Diff nebyl zobrazen, protože je příliš veliký
+ 2970 - 0
src/main/webapp/mobile/js/config.js


+ 5 - 0
src/main/webapp/mobile/js/properties.js
Zobrazit soubor 

@@ -0,0 +1,5 @@
1 
+
2 
+const DOMAIN = 'http://106.246.249.162:38050';
3 
+const ITP_CONTEXTPATH = '/oqpo-view';
4 
+const MOBILE_CONTEXTPATH = ITP_CONTEXTPATH + '/mobile';
5 
+const ITP_LANGUAGE = 'ko';