create.php 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. {extend name="public/container"}
  2. {block name='head_top'}
  3. <style>
  4. .layui-form-item .special-label i{display: inline-block;width: 18px;height: 18px;font-size: 18px;color: #fff;}
  5. .layui-form-item .label-box p{line-height: inherit;}
  6. .m-t-5{margin-top:5px;}
  7. #app .layui-barrage-box{margin-bottom: 10px;margin-top: 10px;margin-left: 10px;border: 1px solid #0092DC;border-radius: 5px;cursor: pointer;position: relative;}
  8. #app .layui-barrage-box.border-color{border-color: #0bb20c;}
  9. #app .layui-barrage-box .del-text{position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.5);color: #ffffff;width: 92%;text-align: center;}
  10. #app .layui-barrage-box p{padding:5px 5px; }
  11. #app .layui-empty-text{text-align: center;font-size: 18px;}
  12. #app .layui-empty-text p{padding: 10px 10px;}
  13. .edui-default .edui-for-image .edui-icon {background-position: -380px 0px;}
  14. .layui-form-item .special-label {width: 50px;float: left;height: 30px;line-height: 38px;margin-left: 10px;margin-top: 5px;border-radius: 5px;background-color: #0092DC;text-align: center;}
  15. .layui-form-item .special-label i {display: inline-block;width: 18px;height: 18px;font-size: 18px;color: #fff;}
  16. .layui-form-item .label-box {border: 1px solid;border-radius: 10px;position: relative;padding: 10px;height: 30px;color: #fff;background-color: #393D49;text-align: center;cursor: pointer;display: inline-block;line-height: 10px;}
  17. .layui-form-item .label-box p {line-height: inherit;}
  18. </style>
  19. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/third-party/zeroclipboard/ZeroClipboard.js"></script>
  20. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script>
  21. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script>
  22. <script src="{__PLUG_PATH}reg-verify.js"></script>
  23. {/block}
  24. {block name="content"}
  25. <div class="layui-fluid" id="app" v-cloak>
  26. <div class="layui-card">
  27. <div class="layui-card-header">{{id ? '编辑讲师':'添加讲师'}}</div>
  28. <div class="layui-card-body">
  29. <form action="" class="layui-form">
  30. <div class="layui-form-item">
  31. <div class="layui-form-item required">
  32. <label class="layui-form-label">名称:</label>
  33. <div class="layui-input-inline">
  34. <input type="text" name="lecturer_name" v-model.trim="formData.lecturer_name" required autocomplete="off" placeholder="请输入讲师名称" maxlength="8" class="layui-input">
  35. </div>
  36. </div>
  37. <div class="layui-form-item required">
  38. <label class="layui-form-label">领域:</label>
  39. <div class="layui-input-inline">
  40. <input type="text" v-model.trim="label" :disabled="formData.label.length === 3" name="price_min" required autocomplete="off" placeholder="请输入领域" maxlength="6" class="layui-input">
  41. </div>
  42. <div class="layui-input-inline" style="width: auto;">
  43. <button type="button" :class="[formData.label.length === 3 ? 'layui-btn-disabled' : 'layui-btn-normal', 'layui-btn']" :disabled="formData.label.length === 3" @click="addLabrl" ><i class="layui-icon layui-icon-add-1" style="margin-right: 0;font-size: 18px;"></i></button>
  44. </div>
  45. <div class="layui-form-mid layui-word-aux">每个领域1-6个字,可添加1-3个领域,点击“+”按钮添加输入的领域,点击已添加领域可删除</div>
  46. </div>
  47. <div v-if="formData.label.length" class="layui-form-item">
  48. <div class="layui-input-block">
  49. <button v-for="item in formData.label" :key="item" type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="delLabel(item)">{{item}}</button>
  50. </div>
  51. </div>
  52. <div class="layui-form-item required">
  53. <label class="layui-form-label">头像:(200*200)</label>
  54. <div class="layui-input-block">
  55. <div class="upload-image-box" v-if="formData.lecturer_head" >
  56. <img :src="formData.lecturer_head" alt="">
  57. <div class="mask" style="display: block">
  58. <p>
  59. <i class="fa fa-eye" @click="look(formData.lecturer_head)"></i>
  60. <i class="fa fa-trash-o" @click="delect('lecturer_head')"></i>
  61. </p>
  62. </div>
  63. </div>
  64. <div class="upload-image" v-show="!formData.lecturer_head" @click="upload('lecturer_head')">
  65. <div class="fiexd"><i class="fa fa-plus"></i></div>
  66. <p>选择图片</p>
  67. </div>
  68. </div>
  69. </div>
  70. <div class="layui-form-item">
  71. <label class="layui-form-label required">手机:</label>
  72. <div class="layui-input-inline">
  73. <input type="text" name="phone" v-model.trim="formData.phone" required autocomplete="off" maxlength="11" placeholder="请输入手机号" class="layui-input">
  74. </div>
  75. </div>
  76. <div class="layui-form-item required">
  77. <label class="layui-form-label">简介:</label>
  78. <div class="layui-input-block">
  79. <input type="text" name="explain" v-model.trim="formData.explain" required autocomplete="off" maxlength="20" placeholder="请输入讲师简介" class="layui-input">
  80. </div>
  81. </div>
  82. <div class="layui-form-item required">
  83. <label class="layui-form-label">介绍:</label>
  84. <div class="layui-input-block">
  85. <textarea id="editor">{{formData.introduction}}</textarea>
  86. </div>
  87. </div>
  88. <div class="layui-form-item submit">
  89. <label class="layui-form-label">排序:</label>
  90. <div class="layui-input-inline">
  91. <input type="number" name="sort" v-model="formData.sort" min="0" max="9999" class="layui-input" v-sort>
  92. </div>
  93. </div>
  94. <div class="layui-form-item">
  95. <label class="layui-form-label">状态:</label>
  96. <div class="layui-input-block">
  97. <input type="radio" name="is_show" value="1" title="显示" v-model="formData.is_show" lay-filter="is_show" >
  98. <input type="radio" name="is_show" value="0" title="隐藏" v-model="formData.is_show" lay-filter="is_show">
  99. </div>
  100. </div>
  101. <div class="layui-form-item submit">
  102. <div class="layui-input-block">
  103. <button class="layui-btn layui-btn-normal" type="button" @click="save">{{id ? '立即修改':'立即提交'}}</button>
  104. <button class="layui-btn layui-btn-primary clone" type="button" @click="clone_form">取消</button>
  105. </div>
  106. </div>
  107. </form>
  108. </div>
  109. </div>
  110. </div>
  111. <script type="text/javascript" src="{__ADMIN_PATH}js/layuiList.js"></script>
  112. {/block}
  113. {block name='script'}
  114. <script>
  115. var id={$id},lecturer=<?=isset($lecturer) ? $lecturer : []?>;
  116. require(['vue','helper','zh-cn','request','plupload','aliyun-oss','OssUpload'],function(Vue,$h) {
  117. new Vue({
  118. el: "#app",
  119. directives: {
  120. sort: {
  121. bind: function (el, binding, vnode) {
  122. var vm = vnode.context;
  123. el.addEventListener('change', function () {
  124. if (!this.value || this.value < 0) {
  125. vm.formData.sort = 0;
  126. } else if (this.value > 9999) {
  127. vm.formData.sort = 9999;
  128. } else {
  129. vm.formData.sort = parseInt(this.value);
  130. }
  131. });
  132. }
  133. }
  134. },
  135. data: {
  136. formData:{
  137. lecturer_name:lecturer.lecturer_name || '',
  138. lecturer_head: lecturer.lecturer_head || '',
  139. label: lecturer.label || [],
  140. phone: lecturer.phone || '',
  141. explain: lecturer.explain || '',
  142. introduction: lecturer.introduction || '',
  143. sort:Number(lecturer.sort) || 0,
  144. is_show:lecturer.is_show || 1
  145. },
  146. label: '',
  147. },
  148. methods:{
  149. //查看图片
  150. look: function (pic) {
  151. parent.$eb.openImage(pic);
  152. },
  153. //上传图片
  154. upload: function (key, count) {
  155. ossUpload.createFrame('请选择图片', {fodder: key, max_count: count === undefined ? 0 : count},{w:800,h:550});
  156. },
  157. // 删除领域
  158. delLabel: function (label) {
  159. this.formData.label.splice(this.formData.label.indexOf(label), 1);
  160. },
  161. // 添加领域
  162. addLabrl: function () {
  163. if (this.label) {
  164. var length = this.formData.label.length;
  165. for (var i = 0; i < length; i++) {
  166. if (this.formData.label[i] == this.label) return layList.msg('请勿重复添加');
  167. }
  168. this.formData.label.push(this.label);
  169. this.label = '';
  170. }
  171. },
  172. clone_form: function () {
  173. var that = this;
  174. if (parseInt(id) == 0) {
  175. parent.layer.closeAll();
  176. }
  177. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  178. parent.layer.close(index); //再执行关闭
  179. },
  180. save:function () {
  181. var that=this;
  182. that.formData.introduction = that.ue.getContent();
  183. that.$nextTick(function () {
  184. if (!that.formData.lecturer_name) return layList.msg('请输入讲师名称');
  185. if (!that.formData.label.length) return layList.msg('请输入领域');
  186. if (!that.formData.lecturer_head) return layList.msg('请上传讲师头像');
  187. if (!that.formData.phone) return layList.msg('请输入手机号');
  188. if(!$reg.isPhone(that.formData.phone)){
  189. return layList.msg('请输入正确的手机号');
  190. }
  191. if (!that.formData.explain) return layList.msg('请输入讲师简介');
  192. if (!that.formData.introduction) return layList.msg('请输入讲师介绍');
  193. layList.loadFFF();
  194. layList.basePost(layList.U({a: 'save_lecturer', q: {id: id}}), that.formData, function (res) {
  195. layList.loadClear();
  196. if (parseInt(id) == 0) {
  197. layList.layer.confirm('添加成功,您要继续添加讲师吗?', {
  198. btn: ['继续添加', '立即提交']
  199. }, function (index) {
  200. layList.layer.close(index);
  201. }, function (index) {
  202. layList.layer.close(index);
  203. var index = parent.layer.getFrameIndex(window.name);
  204. parent.layer.close(index);
  205. });
  206. } else {
  207. layList.msg('修改成功', function () {
  208. parent.layer.closeAll();
  209. })
  210. }
  211. }, function (res) {
  212. layList.msg(res.msg);
  213. layList.loadClear();
  214. });
  215. })
  216. },
  217. delect:function(key){
  218. var that=this;
  219. that.formData[key]='';
  220. },
  221. changeIMG: function (key, value, multiple) {
  222. if (multiple) {
  223. var that = this;
  224. value.map(function (v) {
  225. that.formData[key].push({pic: v, is_show: false});
  226. });
  227. this.$set(this.formData, key, this.formData[key]);
  228. } else {
  229. this.$set(this.formData, key, value);
  230. }
  231. },
  232. },
  233. mounted:function () {
  234. var that=this;
  235. window.changeIMG = that.changeIMG;
  236. //选择图片插入到编辑器中
  237. window.insertEditor = function(list,fodder){
  238. that.ue.execCommand('insertimage', list);
  239. };
  240. this.$nextTick(function () {
  241. layList.form.render();
  242. //实例化编辑器
  243. UE.registerUI('选择图片', function (editor, uiName) {
  244. var btn = new UE.ui.Button({
  245. name: uiName,
  246. title: uiName,
  247. cssRules: 'background-position: -380px 0;',
  248. onclick: function() {
  249. ossUpload.createFrame(uiName, { fodder: editor.key }, { w: 800, h: 550 });
  250. }
  251. });
  252. return btn;
  253. });
  254. that.ue = UE.getEditor('editor');
  255. });
  256. layList.form.on('radio(is_show)',function (data) {
  257. that.formData.is_show=data.value;
  258. });
  259. }
  260. })
  261. })
  262. </script>
  263. {/block}