cxhxy/app/admin/view/wechat/material/text/add.html

<link rel="stylesheet" href="/assets/css/hema.diy.css?v={$version}">




<link rel="stylesheet" href="/assets/plugins/umeditor/themes/default/css/umeditor.css?v={$version}">




<div id="app" class="row-content am-cf">




    <div class="widget am-cf" style="min-width:100%;">




        <div class="widget-body">




			<fieldset>




				<form class="form-horizontal am-form tpl-form-line-form" id="signupForm">




					<div class="widget-head am-cf">




						<div class="widget-title am-fl">添加图文素材</div>




					</div>




					<div class="am-form-group">




						<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">素材集名称 </label>




						<div class="am-u-sm-9 am-u-end">




							<input type="text" class="tpl-form-input" v-model="newList[0].name"  placeholder="请输入素材集名称" >




						</div>




					</div>




					<!-- diy 工作区 -->




					<div class="work-diy dis-flex flex-x-between">




						<!-- 视图区 -->




						<div class="list-editor am-u-sm-2 am-u-md-2 am-u-lg-2">




							<div class="editor-title"><span>文章列表</span></div>	




							<div v-for="(item,index) in newList">




								<div class="operation-item">




									<span class="glyphicon glyphicon-chevron-up" aria-hidden="true" @click="itemUp(index)"></span>




								   <span class="glyphicon glyphicon-chevron-down" aria-hidden="true" @click="itemDown(index)"></span>




									<i class="iconfont iconshanchu" aria-hidden="true" v-if="index" @click="itemDel(index)"></i>




								</div>




								<div v-if="index == 0">




									<div  class="transition" :class="action==index ? 'active' :''" @click="isShow(index)">




										<img :src="item.url" style="width: 100%;height: 100%;"/>




									</div>




									<div @click="isShow(index)"><span v-text="item.title"></span></div>




								</div>




								<div v-else class="news-item-title transition" :class="action==index ? 'active' :''" style="margin-bottom: 20px" @click="isShow(index)">




									<div class="news_articel_item other">




										<div class="right-text" v-text="item.title"></div>




										<img class="left-image" :src="item.url"/>




									</div>




								</div>




							</div>




							<div v-if="newList.length < 8" class="add-news-items" @click="addItem"><i class="iconfont icontianjia"></i></div>




						</div>




						<!-- 编辑区 -->					




						<div class="wechat-editor">




							<div class="editor-title"><span>文章内容编辑</span></div>




							<div class="am-form-group">




								<label class="am-u-sm-3 am-form-label am-text-xs form-require">标题 </label>




								<div class="am-u-sm-8 am-u-end">




									<input class="tpl-form-input" type="text" name="title" maxlength="64" v-model="newListIndex.title"  placeholder="请在这里输入标题">




								</div>




							</div>	




							<div class="am-form-group">




								<label class="am-u-sm-3 am-form-label am-text-xs">作者 </label>




								<div class="am-u-sm-8 am-u-end">




									<input class="tpl-form-input" type="text" name="author" maxlength="8" v-model="newListIndex.author"  placeholder="请输入作者">




								</div>




							</div>




							<div class="am-form-group">




								<label class="am-u-sm-3 am-form-label am-text-xs form-require">封面 </label>




								<div class="am-u-sm-8 am-u-end">




									<button type="button" class="am-btn am-btn-primary am-btn-xs" @click="addImage">




										<i class="am-icon-cloud-upload"></i> 选择封面




									</button>




									<div class="help-block">




                                        <small>




										文件最大2Mb，支持bmp/png/jpeg/jpg/gif格式<br>




										首条封面建议尺寸750*319像素<br>




										下一条封面尺寸为长宽相等的正方形




										</small>




                                    </div>




								</div>




							</div>




							<div class="am-form-group">




								<label class="am-u-sm-3 am-form-label am-text-xs form-require">摘要 </label>




								<div class="am-u-sm-8 am-u-end">




									<textarea class="" rows="3" placeholder="请输入摘要内容" v-model="newListIndex.digest"></textarea>




								</div>




							</div>




							<div class="am-form-group">




								<label class="am-u-sm-3 am-form-label am-text-xs form-require">正文 </label>




								<div class="am-u-sm-8 am-u-end">




									<div class="help-block">




                                        <small>正文内的图片只支持JPG格式，且最大1M</small>




                                    </div>




									<textarea id="container" type="text/plain">{{newListIndex.content}}</textarea>




								</div>




							</div>




						</div>




					</div>




					<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading"></div>




					<!-- 表单提交按钮 -->




					<div class="am-form-group">




						<div class="am-u-sm-5 am-u-sm-push-5 am-margin-top-lg">




							<button class="am-btn am-btn-secondary" @click.stop="onSubmit" type="button">保存</button>




						</div>




					</div>




				</form>




			</fieldset>




        </div>




    </div>




</div>




<!-- 文件库弹窗 -->




{include file="../addons/upload/view/template/file_library.html" /}




<script src="/assets/js/hema.material.js?v={$version}"></script>




<script src="/assets/plugins/umeditor/umeditor.config.js?v={$version}"></script>




<script src="/assets/plugins/umeditor/umeditor.min.js?v={$version}"></script>




<script>




	function getContent() {




        return (UM.getEditor('container').getContent());




    };




    function hasContent() {




        return (UM.getEditor('container').hasContents());




    };




    function setContent(content) {




        return (UM.getEditor('container').setContent(content));




    };




	$(function () {




		// 富文本编辑器




        UM.getEditor('container', {




            initialFrameWidth: 375 + 15,




            initialFrameHeight: 600




        });




		new diyPhone(<?= $material?>);




    });




    




</script>