烂笔头 Notpad OK

css/global.css

@@ -141,4 +141,8 @@ body {
 	color: #666666;
 	padding-top: 8px;
 	opacity: 0.8;
+}
+
+*[v-cloak] {
+	display: none;
 }

templete/notepad.html

@@ -31,8 +31,10 @@
 				color: white;
 				background-color: #444;
 			}
-			#subPage {
+			.subPage {
-				height: calc(100vh - 140px);
+				padding-top: 10px;
+				overflow-y: auto;
+				height: calc(100vh - 160px);
 				width: 100vw;
 				border: none;
 			}
@@ -42,7 +44,28 @@
 			<div class="indicator" data-url="notepad_index.html">信用卡</div>
 			<div class="indicator" data-url="notepad_index.html">阅看越想</div>
 		</div>
-		<iframe id="subPage" src="notepad_index.html"></iframe>
+		<div id="app" class="subPage" v-cloak>
+			<div class="row clearfix" v-for="(each, index) in noteData" :data-id="each.id">
+				<div class="left" v-if="!each.currentDelete" @click="edit(index)">
+					<div class="name">{{each.title}}</div>
+					<div class="created_time">创建时间：{{each.create_time}}</div>
+					<div class="updated_time">更改时间：{{each.update_time}}</div>
+				</div>
+				<div class="left" v-else>
+					<div class="name" style="color: red;font-weight: bolder;">你确定要删除么？</div>
+					<div class="small_title">{{each.title}}</div>
+				</div>
+				<div class="right" v-if="!each.currentDelete">
+					<div class="operation edit" @click.stop.prevent="edit(each.id)">编辑</div>
+					<div class="delete operation" @click.stop.prevent="triggerDelete(index)">删除</div>
+				</div>
+				<div class="right" v-else>
+					<div class="operation delete confirm" @click.stop.prevent="confirmDelete(index)">确认</div>
+					<div class="operation edit cancel" @click.stop.prevent="cancelDelete(index)">取消</div>
+				</div>
+			</div>
+		</div>
+
 		<div class="footer">
 			新增记事
 		</div>
@@ -50,6 +73,7 @@
 	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
+	<script src="../lib/vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
 	<script type="text/javascript">
 		mui.plusReady(function() {
 			var element;
@@ -60,8 +84,8 @@
 			element.onload = function() {
 				var style = [JZL.getCssUrl('notepad.css'), JZL.getCssUrl("global.css"), JZL.getCssUrl("header.css")];
 				JZL.css_init(style);
-//				var script = [JZL.getJsUrl('notepad.js')];
+				var script = [JZL.getJsUrl('notepad.js')];
-//				JZL.js_init(script);
+				JZL.js_init(script);
 				setTimeout(function() {
 					parent.style.visibility = "visible";
 				}, 100);
@@ -70,23 +94,6 @@
 			$('.indicator').click(function(){
 				$('.indicator').removeClass('act');
 				$(this).addClass('act');
-				$('#subPage').attr('src', $(this).data('url'));
-			})
-		})
-		mui.plusReady(function(){
-			$(".footer").click(function(){
-				mui.openWindow({
-					url: "notepad_edit.html",
-					id: "notepad_edit"+0,
-					extras: {
-						noteId: 0
-					},
-					createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
-					waiting: {
-						autoShow: true, //自动显示等待框，默认为true
-						title: '正在加载...', //等待对话框上显示的提示内容
-					}
-				})
 			})
 		})
 	</script>