首页增加公告弹窗

packageA/pages/user/editor/editor.vue

@@ -1,87 +1,93 @@
 <template>
 	<view class="container">
 		<view class="page-body">
-			<view class="select-input">
-				<input class="input" style="display:none;" />
-				<text>标题：</text><input class="input" placeholder="请输入标题" />
-			</view>
-			<view class="head-wrapper">
-				<view class='wrapper'>
-					<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
-						<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
-						</view>
-						<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
-							data-name="italic"></view>
-						<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
-							data-name="underline"></view>
-						<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
-							data-name="strike"></view>
-						<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
-							data-name="align" data-value="left"></view>
-						<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
-							data-name="align" data-value="center"></view>
-						<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
-							data-name="align" data-value="right"></view>
-						<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
-							data-name="align" data-value="justify"></view>
-						<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
-							data-name="lineHeight" data-value="2"></view>
-						<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
-							data-name="letterSpacing" data-value="2em"></view>
-						<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
-							data-name="marginTop" data-value="20px"></view>
-						<view :class="formats.previewarginBottom ? 'ql-active' : ''"
-							class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px">
-						</view>
-						<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
-						<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
-							data-name="fontFamily" data-value="Pacifico"></view>
-						<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
-							data-name="fontSize" data-value="24px"></view>
-
-						<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
-							data-name="color" data-value="#0000ff"></view>
-						<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
-							class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
-
-						<view class="iconfont icon-date" @tap="insertDate"></view>
-						<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
-						<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
-							data-name="list" data-value="ordered"></view>
-						<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
-							data-name="list" data-value="bullet"></view>
-						<view class="iconfont icon-undo" @tap="undo"></view>
-						<view class="iconfont icon-redo" @tap="redo"></view>
-
-						<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
-						<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
-						<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
-						<view class="iconfont icon-charutupian" @tap="insertImage"></view>
-						<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
-							data-name="header" :data-value="1"></view>
-						<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
-							data-name="script" data-value="sub"></view>
-						<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
-							data-name="script" data-value="super"></view>
-						<view class="iconfont icon-shanchu" @tap="clear"></view>
-						<view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
-							class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
+			<form @submit="formSubmit" @reset="formReset">
+				<view class="select-input">
+					<input class="input" style="display:none;" />
+					<text>标题：</text><input class="input" name="title" placeholder="请输入标题" />
+				</view>
+				<view class="head-wrapper">
+					<view class='wrapper'>
+						<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
+							<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu"
+								data-name="bold">
+							</view>
+							<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
+								data-name="italic"></view>
+							<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
+								data-name="underline"></view>
+							<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
+								data-name="strike"></view>
+							<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
+								data-name="align" data-value="left"></view>
+							<view :class="formats.align === 'center' ? 'ql-active' : ''"
+								class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
+							<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
+								data-name="align" data-value="right"></view>
+							<view :class="formats.align === 'justify' ? 'ql-active' : ''"
+								class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
+							<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
+								data-name="lineHeight" data-value="2"></view>
+							<view :class="formats.letterSpacing ? 'ql-active' : ''"
+								class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em">
+							</view>
+							<view :class="formats.marginTop ? 'ql-active' : ''"
+								class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" data-value="20px">
+							</view>
+							<view :class="formats.previewarginBottom ? 'ql-active' : ''"
+								class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px">
+							</view>
+							<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
+							<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
+								data-name="fontFamily" data-value="Pacifico"></view>
+							<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
+								data-name="fontSize" data-value="24px"></view>
 
-					</view>
+							<view :class="formats.color === '#0000ff' ? 'ql-active' : ''"
+								class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
+							<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
+								class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00">
+							</view>
+
+							<view class="iconfont icon-date" @tap="insertDate"></view>
+							<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
+							<view :class="formats.list === 'ordered' ? 'ql-active' : ''"
+								class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
+							<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
+								data-name="list" data-value="bullet"></view>
+							<view class="iconfont icon-undo" @tap="undo"></view>
+							<view class="iconfont icon-redo" @tap="redo"></view>
+
+							<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
+							<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
+							<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
+							<view class="iconfont icon-charutupian" @tap="insertImage"></view>
+							<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
+								data-name="header" :data-value="1"></view>
+							<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
+								data-name="script" data-value="sub"></view>
+							<view :class="formats.script === 'super' ? 'ql-active' : ''"
+								class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
+							<view class="iconfont icon-shanchu" @tap="clear"></view>
+							<view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
+								class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
+
+						</view>
 
-					<view class="editor-wrapper">
-						<editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar
-							showImgResize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
-						</editor>
+						<view class="editor-wrapper">
+							<editor  id="editor" class="ql-container" placeholder="开始输入..." showImgSize
+								showImgToolbar showImgResize @statuschange="onStatusChange" :read-only="readOnly"
+								@ready="onEditorReady">
+							</editor>
+						</view>
 					</view>
 				</view>
-			</view>
-			<!-- <button>提交</button> -->
-			<view class="btn-area">
-				<button type="primary" formType="submit">确认</button>
-			</view>
-
+				<!-- <button>提交</button> -->
+				<view class="btn-area">
+					<button type="primary" formType="submit">确认</button>
+				</view>
 
+			</form>
 		</view>
 
 	</view>
@@ -96,6 +102,17 @@
 			}
 		},
 		methods: {
+			formSubmit: function(e) {
+				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
+				this.editorCtx.getContents({
+					success: function(res) {
+						console.log(res.html)
+					},
+					fail: function(error) {
+						console.log(error)
+					}
+				})
+			},
 			readOnlyChange() {
 				this.readOnly = !this.readOnly
 			},
@@ -116,7 +133,7 @@
 					value
 				} = e.target.dataset
 				if (!name) return
-				// console.log('format', name, value)
+				console.log('format', name, value)
 				this.editorCtx.format(name, value)
 
 			},
@@ -163,12 +180,6 @@
 				})
 			}
 		},
-		onLoad() {
-			uni.loadFontFace({
-				family: 'Pacifico',
-				source: 'url("https://sungd.github.io/Pacifico.ttf")'
-			})
-		},
 	}
 </script>