add.php 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867
  1. {extend name="public/container"}
  2. {block name='head_top'}
  3. <style>
  4. .layui-form-item .special-label {
  5. width: 50px;
  6. float: left;
  7. height: 30px;
  8. line-height: 38px;
  9. margin-left: 10px;
  10. margin-top: 5px;
  11. border-radius: 5px;
  12. background-color: #0092DC;
  13. text-align: center;
  14. }
  15. .layui-form-item .special-label i {
  16. display: inline-block;
  17. width: 18px;
  18. height: 18px;
  19. font-size: 18px;
  20. color: #fff;
  21. }
  22. .layui-form-item .label-box {
  23. border: 1px solid;
  24. border-radius: 10px;
  25. position: relative;
  26. padding: 10px;
  27. height: 30px;
  28. color: #fff;
  29. background-color: #393D49;
  30. text-align: center;
  31. cursor: pointer;
  32. display: inline-block;
  33. line-height: 10px;
  34. }
  35. .layui-form-item .label-box p {
  36. line-height: inherit;
  37. }
  38. .layui-form-mid {
  39. margin-left: 18px;
  40. }
  41. .m-t-5 {
  42. margin-top: 5px;
  43. }
  44. .edui-default .edui-for-image .edui-icon {
  45. background-position: -380px 0px;
  46. }
  47. .layui-tab-content {
  48. padding-right: 150px;
  49. padding-left: 150px;
  50. }
  51. .layui-tab-title .layui-this:after {
  52. border-bottom-color: #fff !important;
  53. }
  54. .upload-image-box .mask p {
  55. width: 50px;
  56. }
  57. [v-cloak]{
  58. display: none;
  59. }
  60. </style>
  61. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/third-party/zeroclipboard/ZeroClipboard.js"></script>
  62. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script>
  63. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script>
  64. {/block}
  65. {block name="content"}
  66. <div v-cloak id="app" class="layui-fluid">
  67. <div class="layui-card">
  68. <div class="layui-card-body">
  69. <form class="layui-form" action="">
  70. <div class="layui-tab" lay-filter="tab">
  71. <ul class="layui-tab-title">
  72. <li class="layui-this">基本设置</li>
  73. <li>素材选择</li>
  74. <li>价格设置</li>
  75. </ul>
  76. <div class="layui-tab-content">
  77. <div class="layui-tab-item layui-show">
  78. <div class="layui-form-item m-t-5">
  79. <label class="layui-form-label">专题名称:</label>
  80. <div class="layui-input-block">
  81. <input type="text" name="title" v-model="formData.title" autocomplete="off" placeholder="请输入专题名称" maxlength="30" class="layui-input">
  82. </div>
  83. </div>
  84. <div class="layui-form-item m-t-5">
  85. <label class="layui-form-label">课程分类:</label>
  86. <div class="layui-input-block">
  87. <select name="subject_id" v-model="formData.subject_id" lay-search="" lay-filter="subject_id">
  88. <option value="0">请选分类</option>
  89. <optgroup v-if="item.special_subject" v-for="item in subject_list" :label="item.name">
  90. <option v-if="item.special_subject" :value="chaild_item.id" v-for="chaild_item in item.special_subject">|----{{chaild_item.name}}</option>
  91. </optgroup>
  92. </select>
  93. </div>
  94. </div>
  95. <div class="layui-form-item m-t-5">
  96. <label class="layui-form-label">讲师选择:</label>
  97. <div class="layui-input-block">
  98. <select name="subject_id" v-model="formData.lecturer_id" lay-search="" lay-filter="lecturer_id">
  99. <option value="0">请选讲师</option>
  100. <option :value="item.id" v-for="item in lecturer_list">{{item.lecturer_name}}</option>
  101. </select>
  102. </div>
  103. </div>
  104. <div class="layui-form-item m-t-5">
  105. <label class="layui-form-label">专题简介:</label>
  106. <div class="layui-input-block">
  107. <textarea placeholder="请输入专题简介" v-model="formData.abstract" class="layui-textarea"></textarea>
  108. </div>
  109. </div>
  110. <div class="layui-form-item m-t-5">
  111. <label class="layui-form-label">专题短语:</label>
  112. <div class="layui-input-block">
  113. <textarea placeholder="请输入专题短语" v-model="formData.phrase" class="layui-textarea"></textarea>
  114. </div>
  115. </div>
  116. <div class="layui-form-item m-t-5">
  117. <label class="layui-form-label">专题排序:</label>
  118. <div class="layui-input-block">
  119. <input type="number" style="width: 300px" name="sort" v-model="formData.sort" autocomplete="off" class="layui-input">
  120. </div>
  121. </div>
  122. <div class="layui-form-item m-t-5">
  123. <div class="layui-inline">
  124. <label class="layui-form-label">专题标签:</label>
  125. <div class="layui-input-block">
  126. <input type="text" v-model="label" name="price_min" placeholder="最多6个字" autocomplete="off" class="layui-input" style="float: left;width: 300px">
  127. <button type="button" class="layui-btn layui-btn-normal" @click="addLabrl" >
  128. <i class="layui-icon">&#xe654;</i>
  129. </button>
  130. <div class="layui-form-mid layui-word-aux">输入标签名称后点击”+“号按钮添加;最多写入6个字;点击标签即可删除</div>
  131. </div>
  132. </div>
  133. <div class="layui-input-block">
  134. <div class="label-box" v-for="(item,index) in formData.label" @click="delLabel(index)">
  135. <p>{{item}}</p>
  136. </div>
  137. </div>
  138. </div>
  139. <div class="layui-form-item m-t-5">
  140. <label class="layui-form-label">
  141. <div>专题封面:</div>
  142. <div>(710*400px)</div>
  143. </label>
  144. <div class="layui-input-block">
  145. <div class="upload-image-box" v-if="formData.image" @mouseenter="mask.image = true" @mouseleave="mask.image = false">
  146. <img :src="formData.image" alt="">
  147. <div class="mask" v-show="mask.image" style="display: block">
  148. <p><i class="fa fa-eye" @click="look(formData.image)"></i>
  149. <i class="fa fa-trash-o" @click="delect('image')"></i>
  150. </p>
  151. </div>
  152. </div>
  153. <div class="upload-image" v-show="!formData.image" @click="upload('image')">
  154. <div class="fiexd"><i class="fa fa-plus"></i></div>
  155. <p>选择图片</p>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="layui-form-item m-t-5">
  160. <label class="layui-form-label">
  161. <div>专题banner:</div>
  162. <div>(710*400px)</div>
  163. </label>
  164. <div class="layui-input-block">
  165. <div class="upload-image-box" v-if="formData.banner.length" v-for="(item,index) in formData.banner" @mouseenter="enter(item)" @mouseleave="leave(item)">
  166. <img :src="item.pic" alt="">
  167. <div class="mask" v-show="item.is_show" style="display: block">
  168. <p>
  169. <i class="fa fa-eye" @click="look(item.pic)"></i>
  170. <i class="fa fa-trash-o" @click="delect('banner',index)"></i>
  171. </p>
  172. </div>
  173. </div>
  174. <div class="upload-image" v-show="formData.banner.length <= 3" @click="upload('banner',5)">
  175. <div class="fiexd"><i class="fa fa-plus"></i></div>
  176. <p>选择图片</p>
  177. </div>
  178. </div>
  179. </div>
  180. <div class="layui-form-item m-t-5">
  181. <label class="layui-form-label">
  182. <div>推广海报:</div>
  183. <div>(690*590px)</div>
  184. </label>
  185. <div class="layui-input-block">
  186. <div class="upload-image-box" v-if="formData.poster_image" @mouseenter="mask.poster_image = true" @mouseleave="mask.poster_image = false">
  187. <img :src="formData.poster_image" alt="">
  188. <div class="mask" v-show="mask.poster_image" style="display: block">
  189. <p>
  190. <i class="fa fa-eye" @click="look(formData.poster_image)"></i>
  191. <i class="fa fa-trash-o" @click="delect('poster_image')"></i>
  192. </p>
  193. </div>
  194. </div>
  195. <div class="upload-image" v-show="!formData.poster_image" @click="upload('poster_image')">
  196. <div class="fiexd"><i class="fa fa-plus"></i></div>
  197. <p>选择图片</p>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="layui-form-item m-t-5">
  202. <label class="layui-form-label">
  203. <div>客服二维码:</div>
  204. <div>(200*200px)</div>
  205. </label>
  206. <div class="layui-input-block">
  207. <div class="upload-image-box" v-if="formData.service_code" @mouseenter="mask.service_code = true" @mouseleave="mask.service_code = false">
  208. <img :src="formData.service_code" alt="">
  209. <div class="mask" v-show="mask.service_code" style="display: block">
  210. <p>
  211. <i class="fa fa-eye" @click="look(formData.service_code)"></i>
  212. <i class="fa fa-trash-o" @click="delect('service_code')"></i>
  213. </p>
  214. </div>
  215. </div>
  216. <div class="upload-image" v-show="!formData.service_code" @click="upload('service_code')">
  217. <div class="fiexd"><i class="fa fa-plus"></i></div>
  218. <p>选择图片</p>
  219. </div>
  220. </div>
  221. </div>
  222. <div class="layui-form-item m-t-5">
  223. <label class="layui-form-label">插入视频:</label>
  224. <div class="layui-input-block">
  225. <input type="text" name="title" v-model="link" style="width:300px;display:inline-block;margin-right: 10px;" autocomplete="off" placeholder="请输入视频链接" class="layui-input">
  226. <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="uploadVideo()">确认添加</button>
  227. <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="ossupload">上传视频</button>
  228. <div class="layui-form-mid layui-word-aux" style="float: none;display: inline-block;">输入链接将视为添加视频直接添加,请确保视频链接的正确性</div>
  229. </div>
  230. <input type="file" name="video" v-show="" ref="video">
  231. <div class="layui-input-block" style="width: 50%;margin-top: 20px" v-show="is_video">
  232. <div class="layui-progress" style="margin-bottom: 10px">
  233. <div class="layui-progress-bar layui-bg-blue" :style="'width:'+videoWidth+'%'"></div>
  234. </div>
  235. <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" @click="cancelUpload">取消</button>
  236. </div>
  237. </div>
  238. <div class="layui-form-item m-t-5">
  239. <label class="layui-form-label">专题详情:</label>
  240. <div class="layui-input-block">
  241. <textarea id="myEditor" style="width:100%;height: 500px">{{formData.content}}</textarea>
  242. </div>
  243. </div>
  244. </div>
  245. <div class="layui-tab-item">
  246. <div class="layui-form-item m-t-5">
  247. <div class="layui-form-item m-t-5">
  248. <label class="layui-form-label">素材选择:</label>
  249. <div class="layui-input-block">
  250. <input type="hidden" id="check_source_tmp" name="check_source_tmp"/>
  251. <button type="button" class="layui-btn layui-btn-normal " @click='search_task'>
  252. 选择素材
  253. </button>
  254. <div class="layui-form-mid layui-word-aux" style="float: none;display: inline-block;">如果素材列表中没有你要的素材,请:<a @click='add_source' style="color: #0093dd;">前往添加素材</a></div>
  255. </div>
  256. </div>
  257. <div class="layui-form-item m-t-5">
  258. <label class="layui-form-label">素材展示:</label>
  259. <div class="layui-input-block">
  260. <input type="hidden" id="check_source_sure" name="check_source_sure"/>
  261. <table class="layui-hide" id="showSourceList" lay-filter="showSourceList"></table>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. <div class="layui-tab-item">
  267. <div class="layui-form-item">
  268. <label class="layui-form-label">付费方式:</label>
  269. <div class="layui-input-block">
  270. <input type="radio" name="pay_type" lay-filter="pay_type" v-model="formData.pay_type" value="1" title="付费">
  271. <input type="radio" name="pay_type" lay-filter="pay_type" v-model="formData.pay_type" value="0" title="免费">
  272. </div>
  273. </div>
  274. <div class="layui-form-item" v-show="formData.pay_type == 1">
  275. <label class="layui-form-label">购买金额:</label>
  276. <div class="layui-input-block">
  277. <input style="width: 20%" type="number" name="money" lay-verify="number" v-model="formData.money" autocomplete="off" class="layui-input" min="0">
  278. </div>
  279. <div class="layui-form-item">
  280. <label class="layui-form-label" style="padding: 9px 0;">会员付费方式:</label>
  281. <div class="layui-input-block">
  282. <input type="radio" name="member_pay_type" lay-filter="member_pay_type" v-model="formData.member_pay_type" value="1" title="付费">
  283. <input type="radio" name="member_pay_type" lay-filter="member_pay_type" v-model="formData.member_pay_type" value="0" title="免费">
  284. </div>
  285. </div>
  286. <div class="layui-form-item" v-show="formData.member_pay_type == 1">
  287. <label class="layui-form-label" style="padding: 9px 0;">会员购买金额:</label>
  288. <div class="layui-input-block">
  289. <input style="width: 20%" type="number" name="member_money" lay-verify="number" v-model="formData.member_money" autocomplete="off" class="layui-input" min="0">
  290. </div>
  291. </div>
  292. </div>
  293. <div class="layui-form-item" v-show="formData.pay_type == 1">
  294. <label class="layui-form-label">拼团状态:</label>
  295. <div class="layui-input-block">
  296. <input type="radio" name="is_pink" lay-filter="is_pink" v-model="formData.is_pink" value="0" title="关闭" checked="">
  297. <input type="radio" name="is_pink" lay-filter="is_pink" v-model="formData.is_pink" value="1" title="开启">
  298. </div>
  299. </div>
  300. <div class="layui-form-item" v-show="formData.is_pink">
  301. <div class="layui-inline">
  302. <label class="layui-form-label">拼团金额:</label>
  303. <div class="layui-input-inline">
  304. <input type="number" name="pink_money" v-model="formData.pink_money" autocomplete="off" class="layui-input" min="0">
  305. </div>
  306. </div>
  307. <div class="layui-inline">
  308. <label class="layui-form-label">拼团人数:</label>
  309. <div class="layui-input-inline">
  310. <input type="number" name="pink_number" v-model="formData.pink_number" autocomplete="off" class="layui-input" min="0">
  311. </div>
  312. </div>
  313. </div>
  314. <div class="layui-form-item" v-show="formData.is_pink">
  315. <div class="layui-inline">
  316. <label class="layui-form-label">开始时间:</label>
  317. <div class="layui-input-inline">
  318. <input type="text" name="pink_strar_time" v-model="formData.pink_strar_time" id="start_time" autocomplete="off" class="layui-input">
  319. </div>
  320. </div>
  321. <div class="layui-inline">
  322. <label class="layui-form-label">结束时间:</label>
  323. <div class="layui-input-inline">
  324. <input type="text" name="pink_end_time" v-model="formData.pink_end_time" id="end_time" autocomplete="off" class="layui-input">
  325. </div>
  326. </div>
  327. </div>
  328. <div class="layui-form-item" v-show="formData.is_pink">
  329. <label class="layui-form-label" style="padding: 9px 0;">拼团时间(小时):</label>
  330. <div class="layui-input-block">
  331. <input style="width: 20%" type="number" v-model="formData.pink_time" autocomplete="off" class="layui-input">
  332. </div>
  333. </div>
  334. <div class="layui-form-item" v-show="formData.is_pink">
  335. <label class="layui-form-label">模拟成团:</label>
  336. <div class="layui-input-block">
  337. <input type="radio" name="is_fake_pink" lay-filter="is_fake_pink" v-model="formData.is_fake_pink" value="1" title="开启" checked="">
  338. <input type="radio" name="is_fake_pink" lay-filter="is_fake_pink" v-model="formData.is_fake_pink" value="0" title="关闭">
  339. </div>
  340. </div>
  341. <div class="layui-form-item" v-show="formData.is_fake_pink && formData.is_pink">
  342. <label class="layui-form-label">补齐比例:</label>
  343. <div class="layui-input-block">
  344. <input style="width: 20%" type="number" v-model="formData.fake_pink_number" autocomplete="off" class="layui-input" min="0">
  345. </div>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. <div class="layui-form-item">
  351. <div class="layui-input-block" style="margin-left:260px">
  352. <button class="layui-btn layui-btn-normal" type="button" @click="save">{$id ?
  353. '确认修改':'立即提交'}
  354. </button>
  355. <button class="layui-btn layui-btn-primary clone" type="button" @click="clone_form">取消
  356. </button>
  357. </div>
  358. </div>
  359. </form>
  360. </div>
  361. </div>
  362. </div>
  363. <script type="text/javascript" src="{__ADMIN_PATH}js/layuiList.js"></script>
  364. {/block}
  365. {block name='script'}
  366. <script>
  367. var id = {$id},
  368. special = <?=isset($special) ? $special : "{}"?>,
  369. sourceCheckList = <?= isset($sourceCheckList) ? $sourceCheckList : "{}"?>;
  370. require(['vue', 'zh-cn', 'request', 'plupload', 'aliyun-oss', 'OssUpload'], function (Vue) {
  371. new Vue({
  372. el: "#app",
  373. data: {
  374. subject_list: [],
  375. source_tmp_list: [],//用于子页父业选中素材传值的临时变量
  376. source_list: [],
  377. lecturer_list: [],
  378. formData: {
  379. subjectIds: '',
  380. phrase: special.phrase || '',
  381. label: special.label || [],
  382. abstract: special.abstract || '',
  383. title: special.title || '',
  384. subject_id: special.subject_id || 0,
  385. lecturer_id: special.lecturer_id || 0,
  386. task_id: 0,
  387. image: special.image || '',
  388. banner: special.banner || [],
  389. poster_image: special.poster_image || '',
  390. service_code: special.service_code || '',
  391. money: special.money || 0.00,
  392. pink_money: special.pink_money || 0.00,
  393. pink_number: special.pink_number || 0,
  394. pink_strar_time: special.pink_strar_time || '',
  395. pink_end_time: special.pink_end_time || '',
  396. fake_pink_number: special.fake_pink_number || 0,
  397. sort: special.sort || 0,
  398. is_pink: special.is_pink || 0,
  399. is_fake_pink: special.is_fake_pink || 1,
  400. fake_sales: special.fake_sales || 0,
  401. browse_count: special.browse_count || 0,
  402. pink_time: special.pink_time || 0,
  403. content: special.profile ? (special.profile.content || '') : '',
  404. pay_type: special.pay_type == 1 ? 1 : 0,
  405. check_source_sure: sourceCheckList ? sourceCheckList : "",
  406. member_pay_type: special.member_pay_type == 1 ? 1 : 0,
  407. member_money: special.member_money || 0.00,
  408. },
  409. but_title: '上传视频',
  410. link: '',
  411. label: '',
  412. host: ossUpload.host + '/',
  413. mask: {
  414. poster_image: false,
  415. image: false,
  416. service_code: false,
  417. },
  418. ue: null,
  419. is_video: false,
  420. //上传类型
  421. mime_types: {
  422. Image: "jpg,gif,png,JPG,GIF,PNG",
  423. Video: "mp4,MP4",
  424. },
  425. videoWidth: 0,
  426. //is_live:is_live,
  427. uploader: null,
  428. },
  429. methods: {
  430. //取消
  431. cancelUpload: function () {
  432. this.uploader.stop();
  433. this.is_video = false;
  434. this.videoWidth = 0;
  435. },
  436. //删除图片
  437. delect: function (key, index) {
  438. var that = this;
  439. if (index != undefined) {
  440. that.formData[key].splice(index, 1);
  441. that.$set(that.formData, key, that.formData[key]);
  442. } else {
  443. that.$set(that.formData, key, '');
  444. }
  445. },
  446. //查看图片
  447. look: function (pic) {
  448. parent.$eb.openImage(pic);
  449. },
  450. //鼠标移入事件
  451. enter: function (item) {
  452. if (item) {
  453. item.is_show = true;
  454. } else {
  455. this.mask = true;
  456. }
  457. },
  458. //鼠标移出事件
  459. leave: function (item) {
  460. if (item) {
  461. item.is_show = false;
  462. } else {
  463. this.mask = false;
  464. }
  465. },
  466. changeIMG: function (key, value, multiple) {
  467. if (multiple) {
  468. var that = this;
  469. value.map(function (v) {
  470. that.formData[key].push({pic: v, is_show: false});
  471. });
  472. this.$set(this.formData, key, this.formData[key]);
  473. } else {
  474. this.$set(this.formData, key, value);
  475. }
  476. },
  477. uploadVideo: function () {
  478. if (this.link.substr(0, 7).toLowerCase() == "http://" || this.link.substr(0, 8).toLowerCase() == "https://") {
  479. this.setContent(this.link);
  480. } else {
  481. layList.msg('请输入正确的视频链接');
  482. }
  483. },
  484. setContent: function (link) {
  485. this.formData.link = link;
  486. this.ue.setContent('<div><video style="width: 100%" src="' + link + '" class="video-ue" controls="controls"><source src="' + link + '"></source></video></div><span style="color:white">.</span>', true);
  487. },
  488. //上传图片
  489. upload: function (key, count) {
  490. ossUpload.createFrame('请选择图片', {fodder: key, max_count: count === undefined ? 0 : count}, {w:800,h:550});
  491. },
  492. //获取分类
  493. get_subject_list: function () {
  494. var that = this;
  495. layList.baseGet(layList.U({a: 'get_subject_list'}), function (res) {
  496. that.$set(that, 'subject_list', res.data);
  497. that.$nextTick(function () {
  498. layList.form.render('select');
  499. })
  500. });
  501. },
  502. //获取讲师
  503. get_lecturer_list: function () {
  504. var that = this;
  505. layList.baseGet(layList.U({a: 'get_lecturer_list'}), function (res) {
  506. that.$set(that, 'lecturer_list', res.data);
  507. that.$nextTick(function () {
  508. layList.form.render('select');
  509. })
  510. });
  511. },
  512. delLabel: function (index) {
  513. this.formData.label.splice(index, 1);
  514. this.$set(this.formData, 'label', this.formData.label);
  515. },
  516. addLabrl: function () {
  517. if (this.label) {
  518. if (this.label.length > 6) return layList.msg('您输入的标签字数太长');
  519. var length = this.formData.label.length;
  520. if (length >= 2) return layList.msg('标签最多添加2个');
  521. for (var i = 0; i < length; i++) {
  522. if (this.formData.label[i] == this.label) return layList.msg('请勿重复添加');
  523. }
  524. this.formData.label.push(this.label);
  525. this.$set(this.formData, 'label', this.formData.label);
  526. this.label = '';
  527. }
  528. },
  529. save: function () {
  530. var that = this, banner = new Array();
  531. that.formData.content = that.ue.getContent();
  532. if (!that.formData.subject_id) return layList.msg('请选择分类');
  533. if (Object.keys(that.formData.check_source_sure).length == 0) return layList.msg('请选择素材');
  534. if (!that.formData.title) return layList.msg('请输入专题标题');
  535. if (!that.formData.abstract) return layList.msg('请输入专题简介');
  536. if (!that.formData.phrase) return layList.msg('请输入专题短语');
  537. if (!that.formData.label.length) return layList.msg('请输入标签');
  538. if (!that.formData.image) return layList.msg('请上传专题封面');
  539. if (!that.formData.banner.length) return layList.msg('请上传banner图,最少1张');
  540. if (!that.formData.poster_image) return layList.msg('请上传推广海报');
  541. if (!that.formData.service_code) return layList.msg('请上传客服二维码');
  542. if (!that.formData.content) return layList.msg('请编辑内容在进行保存');
  543. if (that.formData.is_pink) {
  544. if (!that.formData.pink_money) return layList.msg('请填写拼团金额');
  545. if (!that.formData.pink_number) return layList.msg('请填写拼团人数');
  546. if (!that.formData.pink_strar_time) return layList.msg('请选择拼团开始时间');
  547. if (!that.formData.pink_end_time) return layList.msg('请选择拼团结束时间');
  548. if (!that.formData.pink_time) return layList.msg('请填写拼团时间');
  549. if (that.formData.is_fake_pink && !that.formData.fake_pink_number) return layList.msg('请填写补齐比例');
  550. }
  551. that.formData.subjectIds = JSON.stringify(that.formData.check_source_sure);
  552. if (that.formData.pay_type == 1) {
  553. if (!that.formData.money || that.formData.money == 0.00) return layList.msg('请填写购买金额');
  554. }
  555. if (that.formData.member_pay_type == 1) {
  556. if (!that.formData.member_money || that.formData.member_money == 0.00) return layList.msg('请填写会员购买金额');
  557. }
  558. var data={};
  559. for (var key in that.formData) {
  560. if (key !== 'check_source_sure') {
  561. data[key] = that.formData[key]
  562. }
  563. }
  564. layList.loadFFF();
  565. layList.basePost(layList.U({
  566. a: 'save_special',
  567. q: {id: id, special_type: '{$special_type}'}
  568. }), data, function (res) {
  569. layList.loadClear();
  570. if (parseInt(id) == 0) {
  571. layList.layer.confirm('添加成功,您要继续添加专题吗?', {
  572. btn: ['继续添加', '立即提交'] //按钮
  573. }, function () {
  574. window.location.reload();
  575. }, function () {
  576. parent.layer.closeAll();
  577. });
  578. } else {
  579. layList.msg('修改成功', function () {
  580. parent.layer.closeAll();
  581. window.location.href = layList.U({
  582. a: 'index',
  583. p: {type: 1, special_type: '{$special_type}'}
  584. });
  585. })
  586. }
  587. }, function (res) {
  588. layList.msg(res.msg);
  589. layList.loadClear();
  590. });
  591. },
  592. clone_form: function () {
  593. var that = this;
  594. if (parseInt(id) == 0) {
  595. if (that.formData.image.pic) return layList.msg('请先删除上传的图片在尝试取消');
  596. if (that.formData.poster_image.pic) return layList.msg('请先删除上传的图片在尝试取消');
  597. if (that.formData.banner.length) return layList.msg('请先删除上传的图片在尝试取消');
  598. if (that.formData.service_code.pic) return layList.msg('请先删除上传的图片在尝试取消');
  599. parent.layer.closeAll();
  600. }
  601. parent.layer.closeAll();
  602. },
  603. //素材
  604. search_task: function () {
  605. var that = this;
  606. var url = "{:Url('admin/special.special_type/searchs_task')}?special_id=" + id + "&special_type={$special_type}";
  607. var title = '选择素材';
  608. that.searchTask = true;
  609. layer.open({
  610. type: 2 //Page层类型
  611. , area: ['80%', '90%']
  612. , title: title
  613. , shade: 0.6 //遮罩透明度
  614. , maxmin: true //允许全屏最小化
  615. , anim: 1 //0-6的动画形式,-1不开启
  616. , content: url,
  617. btn: '确定',
  618. btnAlign: 'c', //按钮居中
  619. closeBtn: 1,
  620. yes: function () {
  621. layer.closeAll();
  622. var source_tmp = $("#check_source_tmp").val();
  623. that.source_tmp_list = JSON.parse(source_tmp);
  624. that.formData.check_source_sure = JSON.parse(source_tmp);
  625. that.show_source_list();
  626. }
  627. });
  628. },
  629. add_source:function(){
  630. var that=this;
  631. var url="{:Url('admin/special.special_type/addSources')}";
  632. var title='添加素材';
  633. layer.open({
  634. type: 2 //Page层类型
  635. ,area: ['80%', '90%']
  636. ,title: title
  637. ,shade: 0.6 //遮罩透明度
  638. ,maxmin: true //允许全屏最小化
  639. ,anim: 1 //0-6的动画形式,-1不开启
  640. ,content: url
  641. ,end:function () {
  642. layer.closeAll();
  643. }
  644. });
  645. },
  646. show_source_list: function () {
  647. var that = this;
  648. var table = layui.table, form = layui.form;
  649. table.render({
  650. elem: '#showSourceList',
  651. cols: [[
  652. {field: 'id', title: '编号', align: 'center',width:60},
  653. {field: 'title', title: '素材标题', edit: 'title', align: 'center'},
  654. {
  655. field: 'image',
  656. title: '封面',
  657. templet: '<div><img src="{{ d.image }}" style="width: 100%;"></div>',
  658. align: 'center'
  659. },
  660. {field: 'sort', title: '排序',edit:'sort',align: 'center'},
  661. {
  662. field: 'pay_status', title: '状态', align: 'center', templet: function (d) {
  663. var is_checked = d.pay_status == 0 ? "checked" : "";
  664. return "<input type='checkbox' name='pay_status' lay-skin='switch' value='" + d.id + "' lay-filter='pay_status' lay-text='免费|收费' " + is_checked + ">";
  665. }
  666. },
  667. {
  668. field: 'right', title: '操作', align: 'center', templet: function (d) {
  669. return '<div><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i> 移除</a></div>';
  670. }
  671. },
  672. ]],
  673. data: (Object.keys(that.formData.check_source_sure).length > 0) ? that.formData.check_source_sure : [],
  674. page: {
  675. theme: '#0092DC'
  676. },
  677. id: 'table'
  678. });
  679. table.on('tool(showSourceList)', function(obj){
  680. var data = obj.data;
  681. if(obj.event === 'del'){
  682. if (that.formData.check_source_sure) {
  683. for(var i=0;i<that.formData.check_source_sure.length;i++){
  684. if(that.formData.check_source_sure[i].id==data.id){
  685. that.formData.check_source_sure.splice(i,1);
  686. }
  687. }
  688. that.formData.check_source_sure=that.formData.check_source_sure;
  689. that.show_source_list();
  690. }
  691. }
  692. });
  693. //监听单元格编辑
  694. table.on('edit(showSourceList)', function(obj){
  695. var id=obj.data.id,values=obj.value;
  696. switch (obj.field) {
  697. case 'sort':
  698. if (that.formData.check_source_sure) {
  699. $.each(that.formData.check_source_sure, function(index, value){
  700. if(value.id == id){
  701. that.formData.check_source_sure[index].sort = values;
  702. }
  703. })
  704. }
  705. break;
  706. }
  707. });
  708. //监听素材是否免费操作
  709. form.on('switch(pay_status)', function (obj) {
  710. if (that.formData.check_source_sure) {
  711. $.each(that.formData.check_source_sure, function (index, value) {
  712. if (value.id == obj.value) {
  713. that.formData.check_source_sure[index].pay_status = obj.elem.checked == true ? 0 : 1;
  714. }
  715. })
  716. }
  717. });
  718. //监听素材是否删除
  719. form.on('switch(delect)', function (obj) {
  720. if (that.formData.check_source_sure) {
  721. for (var i = 0; i < that.formData.check_source_sure.length; i++) {
  722. if (that.formData.check_source_sure[i].id == obj.value) {
  723. that.formData.check_source_sure.splice(i, 1);
  724. }
  725. }
  726. that.formData.check_source_sure = that.formData.check_source_sure;
  727. that.show_source_list();
  728. }
  729. });
  730. }
  731. },
  732. mounted: function () {
  733. var that = this;
  734. window.changeIMG = that.changeIMG;
  735. layList.date({
  736. elem: '#start_time',
  737. theme: '#393D49',
  738. type: 'datetime',
  739. done: function (value) {
  740. that.formData.pink_strar_time = value;
  741. }
  742. });
  743. layList.date({
  744. elem: '#end_time',
  745. theme: '#393D49',
  746. type: 'datetime',
  747. done: function (value) {
  748. that.formData.pink_end_time = value;
  749. }
  750. });
  751. //选择图片
  752. function changeIMG(index, pic) {
  753. $(".image_img").css('background-image', "url(" + pic + ")");
  754. $(".active").css('background-image', "url(" + pic + ")");
  755. $('#image_input').val(pic);
  756. }
  757. //选择图片插入到编辑器中
  758. window.insertEditor = function (list) {
  759. that.ue.execCommand('insertimage', list);
  760. };
  761. this.$nextTick(function () {
  762. layList.form.render();
  763. layui.element.on('tab(tab)', function () {
  764. layui.table.resize('table');
  765. });
  766. //实例化编辑器
  767. UE.registerUI('imagenone', function (editor, name) {
  768. var $btn = new UE.ui.Button({
  769. name: 'image',
  770. onclick: function () {
  771. ossUpload.createFrame('选择图片', {fodder: 'editor'}, {w: 800, h: 550});
  772. },
  773. title: '选择图片'
  774. });
  775. return $btn;
  776. });
  777. that.ue = UE.getEditor('myEditor');
  778. });
  779. //获取科目
  780. that.get_subject_list();
  781. //获取讲师
  782. that.get_lecturer_list();
  783. //获取素材展示
  784. that.show_source_list();
  785. //图片上传和视频上传
  786. layList.form.on('radio(is_pink)', function (data) {
  787. that.formData.is_pink = parseInt(data.value);
  788. });
  789. layList.form.on('radio(is_remind)', function (data) {
  790. that.formData.is_remind = parseInt(data.value);
  791. });
  792. layList.form.on('radio(is_recording)', function (data) {
  793. that.formData.is_recording = parseInt(data.value);
  794. });
  795. layList.form.on('radio(pay_type)', function (data) {
  796. that.formData.pay_type = parseInt(data.value);
  797. if (that.formData.pay_type != 1) {
  798. that.formData.is_pink = 0;
  799. that.formData.member_pay_type = 0;
  800. that.formData.member_money = 0;
  801. };
  802. that.$nextTick(function () {
  803. layList.form.render('radio');
  804. });
  805. });
  806. layList.form.on('radio(member_pay_type)', function (data) {
  807. that.formData.member_pay_type = parseInt(data.value);
  808. if (that.formData.member_pay_type != 1) {
  809. that.formData.member_money = 0;
  810. };
  811. that.$nextTick(function () {
  812. layList.form.render('radio');
  813. });
  814. });
  815. layList.select('subject_id', function (obj) {
  816. that.formData.subject_id = obj.value;
  817. });
  818. layList.select('lecturer_id', function (obj) {
  819. that.formData.lecturer_id = obj.value;
  820. });
  821. layList.form.on('radio(is_fake_pink)', function (data) {
  822. that.formData.is_fake_pink = parseInt(data.value);
  823. });
  824. that.$nextTick(function () {
  825. that.uploader = ossUpload.upload({
  826. id: 'ossupload',
  827. FilesAddedSuccess: function () {
  828. that.is_video = true;
  829. },
  830. uploadIng: function (file) {
  831. that.videoWidth = file.percent;
  832. },
  833. success: function (res) {
  834. layList.msg('上传成功');
  835. that.videoWidth = 0;
  836. that.is_video = false;
  837. that.setContent(res.url);
  838. },
  839. fail: function (err) {
  840. that.videoWidth = 0;
  841. that.is_video = false;
  842. layList.msg(err);
  843. }
  844. })
  845. });
  846. }
  847. })
  848. })
  849. </script>
  850. {/block}