add.html 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609
  1. <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
  2. <!-- 自定义标题样式 -->
  3. <style>
  4. .section-title {
  5. font-size: 16px;
  6. font-weight: bold;
  7. color: #333;
  8. margin-bottom: 20px;
  9. padding-left: 15px;
  10. border-left: 4px solid #18bc9c;
  11. line-height: 1.5;
  12. }
  13. .section-content {
  14. margin-bottom: 20px;
  15. padding: 20px 0;
  16. background-color: #fff;
  17. }
  18. /* 任务设置样式 */
  19. .task-checkboxes label.checkbox-inline {
  20. font-weight: normal;
  21. padding: 8px 15px;
  22. border: 1px solid #ddd;
  23. border-radius: 4px;
  24. background-color: #f9f9f9;
  25. cursor: pointer;
  26. transition: all 0.3s ease;
  27. display: inline-block;
  28. min-width: 120px;
  29. text-align: center;
  30. }
  31. .task-checkboxes label.checkbox-inline:hover {
  32. border-color: #18bc9c;
  33. background-color: #f0f9f7;
  34. }
  35. .task-checkboxes label.checkbox-inline input[type="checkbox"] {
  36. margin-right: 5px;
  37. }
  38. .task-checkboxes label.checkbox-inline:has(input[type="checkbox"]:checked) {
  39. border-color: #18bc9c;
  40. background-color: #e8f5f0;
  41. color: #18bc9c;
  42. font-weight: bold;
  43. }
  44. /* 兼容性:对于不支持:has的浏览器 */
  45. .task-checkboxes label.checkbox-inline.checked {
  46. border-color: #18bc9c;
  47. background-color: #e8f5f0;
  48. color: #18bc9c;
  49. font-weight: bold;
  50. }
  51. .task-setting-item {
  52. margin-bottom: 15px;
  53. }
  54. .task-setting-item .panel-heading {
  55. background-color: #f5f5f5;
  56. border-bottom: 1px solid #ddd;
  57. }
  58. .task-setting-item .panel-title {
  59. font-size: 14px;
  60. font-weight: bold;
  61. color: #333;
  62. }
  63. .task-setting-item .panel-body {
  64. padding: 15px;
  65. }
  66. #selected-goods {
  67. font-size: 12px;
  68. line-height: 1.4;
  69. }
  70. /* 商品选择区域样式 */
  71. .goods-select-container {
  72. padding: 0;
  73. }
  74. .goods-select-row {
  75. display: flex;
  76. align-items: center;
  77. margin-bottom: 15px;
  78. }
  79. .goods-label {
  80. display: inline-block;
  81. width: 100px;
  82. margin-right: 20px;
  83. font-weight: normal;
  84. flex-shrink: 0;
  85. }
  86. .goods-options {
  87. display: flex;
  88. align-items: center;
  89. }
  90. .goods-options .radio-inline {
  91. margin-right: 30px;
  92. margin-bottom: 0;
  93. }
  94. .goods-button-row {
  95. margin-left: 120px;
  96. margin-bottom: 15px;
  97. }
  98. .goods-description-row {
  99. margin-left: 120px;
  100. }
  101. .goods-description-box {
  102. min-height: 40px;
  103. padding: 10px;
  104. border: 1px dashed #ddd;
  105. border-radius: 4px;
  106. background-color: #fafafa;
  107. font-size: 12px;
  108. line-height: 1.4;
  109. }
  110. /* 任务金额设置样式 */
  111. .task-amount-setting {
  112. display: flex;
  113. align-items: center;
  114. margin-bottom: 15px;
  115. flex-wrap: wrap;
  116. }
  117. .task-amount-label {
  118. display: inline-block;
  119. margin-right: 10px;
  120. font-weight: normal;
  121. white-space: nowrap;
  122. flex-shrink: 0;
  123. }
  124. .task-amount-input {
  125. width: 180px;
  126. margin-right: 10px;
  127. flex-shrink: 0;
  128. }
  129. .task-amount-desc {
  130. color: #666;
  131. font-size: 13px;
  132. white-space: nowrap;
  133. flex-shrink: 0;
  134. }
  135. .task-amount-help {
  136. color: #999;
  137. font-size: 12px;
  138. line-height: 1.4;
  139. margin-top: 5px;
  140. }
  141. .task-amount-help .fa-question-circle {
  142. color: #999;
  143. cursor: help;
  144. }
  145. .next-box{
  146. margin-top: 10px;
  147. background-color: #f4f6f8;
  148. padding: 30px 20px;
  149. border-radius: 2px;
  150. font-size: 14px;
  151. line-height: 20px;
  152. color: #262b30;
  153. }
  154. </style>
  155. <!-- 基础信息区域 -->
  156. <div class="section-content">
  157. <div class="section-title">基础信息</div>
  158. <!-- 活动名称 -->
  159. <div class="form-group">
  160. <label class="control-label col-xs-12 col-sm-2">活动名称:</label>
  161. <div class="col-xs-12 col-sm-8">
  162. <div class="input-group">
  163. <input id="c-name" maxlength="24" data-rule="required" class="form-control" name="row[name]" type="text" placeholder="请输入活动名称,最多24个字符">
  164. <span class="input-group-addon text-muted" id="activity-name-count">0/24</span>
  165. </div>
  166. <span class="help-block">活动名称最多24个字符</span>
  167. </div>
  168. </div>
  169. <!-- 活动时间 -->
  170. <div class="form-group">
  171. <label class="control-label col-xs-12 col-sm-2">活动时间:</label>
  172. <div class="col-xs-12 col-sm-8">
  173. <div class="input-daterange input-group">
  174. <input id="c-start_time" data-rule="required" class="form-control datetimepicker" name="row[start_time]" type="text" placeholder="请选择开始时间">
  175. <span class="input-group-addon">~</span>
  176. <input id="c-end_time" data-rule="required" class="form-control datetimepicker" name="row[end_time]" type="text" placeholder="请选择结束时间">
  177. </div>
  178. <span class="help-block">设置活动的开始和结束时间</span>
  179. </div>
  180. </div>
  181. <!-- 活动渠道 -->
  182. <div class="form-group">
  183. <label class="control-label col-xs-12 col-sm-2"> 活动渠道:</label>
  184. <div class="col-xs-12 col-sm-8">
  185. <label class="checkbox-inline"><input type="checkbox" name="row[channels][]" value="wechat_mp" data-rule="checked" data-rule-message="请至少选择一个活动渠道"> 微信公众号</label>
  186. <label class="checkbox-inline"><input type="checkbox" name="row[channels][]" value="wechat_mini" data-rule="checked" data-rule-message="请至少选择一个活动渠道"> 微信小程序</label>
  187. <label class="checkbox-inline"><input type="checkbox" name="row[channels][]" value="h5" data-rule="checked" data-rule-message="请至少选择一个活动渠道"> 手机浏览器H5</label>
  188. <label class="checkbox-inline"><input type="checkbox" name="row[channels][]" value="app" data-rule="checked" data-rule-message="请至少选择一个活动渠道"> APP</label>
  189. <span class="help-block">请选择本次活动投放的渠道,至少选择一个</span>
  190. </div>
  191. </div>
  192. <!-- 活动描述 -->
  193. <div class="form-group">
  194. <label class="control-label col-xs-12 col-sm-2">活动描述:</label>
  195. <div class="col-xs-12 col-sm-8">
  196. <textarea id="c-description" class="form-control" rows="3" name="row[description]" placeholder="请输入活动描述"></textarea>
  197. <span class="help-block">简要描述活动内容和规则</span>
  198. </div>
  199. </div>
  200. <!-- 活动封面 -->
  201. <div class="form-group">
  202. <label class="control-label col-xs-12 col-sm-2">活动封面:</label>
  203. <div class="col-xs-12 col-sm-8">
  204. <div class="input-group">
  205. <input id="c-cover_image" class="form-control" name="row[cover_image]" type="text" placeholder="请上传活动封面图片">
  206. <div class="input-group-addon no-border no-padding">
  207. <span><button type="button" id="plupload-cover_image" class="btn btn-danger plupload" data-input-id="c-cover_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-cover_image"><i class="fa fa-upload"></i> 上传</button></span>
  208. <span><button type="button" id="fachoose-cover_image" class="btn btn-primary fachoose" data-input-id="c-cover_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
  209. </div>
  210. </div>
  211. <ul class="row list-inline plupload-preview" id="p-cover_image"></ul>
  212. <span class="help-block">建议尺寸:750*400像素</span>
  213. </div>
  214. </div>
  215. <!-- 活动状态 -->
  216. <!-- <div class="form-group">
  217. <label class="control-label col-xs-12 col-sm-2">活动状态:</label>
  218. <div class="col-xs-12 col-sm-8">
  219. {foreach name="statusList" item="vo"}
  220. <label for="row[status]-{$key}" class="radio-inline">
  221. <input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {if condition="$key eq 0"}checked{/if}> {$vo}
  222. </label>
  223. {/foreach}
  224. <span class="help-block">草稿状态不会对外展示,进行中状态用户可参与</span>
  225. </div>
  226. </div> -->
  227. </div>
  228. <div class="section-content">
  229. <div class="section-title">开奖设置</div>
  230. <!-- 开奖方式 -->
  231. <div class="form-group">
  232. <label class="control-label col-xs-12 col-sm-2">开奖方式:</label>
  233. <div class="col-xs-12 col-sm-8">
  234. {foreach name="lotteryTypeList" item="vo"}
  235. <label for="row[lottery_type]-{$key}" class="radio-inline">
  236. <input id="row[lottery_type]-{$key}" name="row[lottery_type]" data-rule="checked" data-rule-message="请至少选择一种开奖方式" type="radio" value="{$key}" {if condition="$key eq 1"}checked{/if}> {$vo}
  237. </label>
  238. {/foreach}
  239. </div>
  240. </div>
  241. <!-- 开奖时间 -->
  242. <div class="form-group" data-favisible="lottery_type=2,3">
  243. <label class="control-label col-xs-12 col-sm-2">开奖时间:</label>
  244. <div class="col-xs-12 col-sm-8">
  245. <input id="c-lottery_time" data-rule="required" data-rule-message="请选择开奖时间" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" name="row[lottery_time]" type="text">
  246. </div>
  247. </div>
  248. <!-- 开奖人数 -->
  249. <div class="form-group" data-favisible="lottery_type=3">
  250. <label class="control-label col-xs-12 col-sm-2">开奖人数:</label>
  251. <div class="col-xs-12 col-sm-8">
  252. <input id="c-lottery_people_num" data-rule="required" data-rule-message="请输入开奖人数" class="form-control" name="row[lottery_people_num]" type="number" min="1">
  253. </div>
  254. </div>
  255. </div>
  256. <!-- 奖品设置区域 -->
  257. <div class="section-content">
  258. <div class="section-title">奖品设置</div>
  259. <div class="form-group">
  260. <label class="control-label col-xs-12 col-sm-2"><span class="text-danger">*</span> 奖品配置:</label>
  261. <div class="col-xs-12 col-sm-10">
  262. <!-- 添加奖品按钮和提示信息 -->
  263. <div style="margin-bottom: 15px;">
  264. <button type="button" id="add-prize-btn" class="btn btn-success btn-sm" onclick="addPrize()">
  265. <i class="fa fa-plus"></i> <span class="btn-text">添加奖品</span> (<span id="prize-count">1</span>/8)
  266. </button>
  267. <span class="text-muted" style="margin-left: 15px;">
  268. 当前总概率:<span id="total-rate" class="text-warning">0.00%</span>
  269. </span>
  270. <div id="prize-count-tip" class="text-muted" style="margin-top: 5px; font-size: 12px;">还需添加 7 个奖品</div>
  271. </div>
  272. <!-- 提示信息 -->
  273. <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 15px; font-size: 12px;">
  274. 所有奖品总概率必须等于100%,包含未中奖;当奖品库存不足时,抽奖结果自动置为"未中奖"
  275. </div>
  276. <!-- 奖品表格 -->
  277. <div class="table-responsive">
  278. <table class="table table-bordered" style="margin-bottom: 0;">
  279. <thead style="background-color: #f5f5f5;">
  280. <tr>
  281. <th width="60" class="text-center">排序</th>
  282. <th width="120">奖品名称</th>
  283. <th width="100">奖品详情</th>
  284. <th width="80" class="text-center">奖品图片</th>
  285. <th width="80" class="text-center">奖品数量 <i class="fa fa-question-circle" title="设置奖品库存数量"></i></th>
  286. <th width="100" class="text-center">中奖概率 <i class="fa fa-question-circle" title="设置中奖概率,所有奖品概率总和必须≤100%"></i></th>
  287. <th width="80" class="text-center">已发放</th>
  288. <th width="120" class="text-center">操作</th>
  289. </tr>
  290. </thead>
  291. <tbody class="prize-list">
  292. <!-- 默认未中奖项 -->
  293. <tr class="prize-item" data-type="no-prize">
  294. <td class="text-center">
  295. <i class="fa fa-bars prize-sort-handle" style="color: #ccc; cursor: move;"></i>
  296. </td>
  297. <td>谢谢参与
  298. <!-- 隐藏域存储未中奖项的表单数据 -->
  299. <input type="hidden" class="prize-name-input" name="prizes[0][name]" value="谢谢参与">
  300. <input type="hidden" class="prize-type-input" name="prizes[0][type]" value="1">
  301. <input type="hidden" class="prize-image-input" name="prizes[0][image]" value="{$prize_losing_lottery}">
  302. </td>
  303. <td>
  304. <span class="label label-default">未中奖</span>
  305. </td>
  306. <td class="text-center">
  307. <img src="{$prize_losing_lottery|cdnurl}" style="width: 40px; height: 40px;" class="img-rounded">
  308. </td>
  309. <td class="text-center">-</td>
  310. <td class="text-center">
  311. <div class="input-group" style="width: 100px; margin: 0 auto;">
  312. <input type="number" class="form-control input-sm prize-rate text-center" name="prizes[0][rate]" id="no-prize-rate-input" value="0" min="0" max="100" step="0.01">
  313. <span class="input-group-addon" style="padding: 4px 6px;">%</span>
  314. </div>
  315. </td>
  316. <td class="text-center">-</td>
  317. <td class="text-center">
  318. <button type="button" class="btn btn-xs btn-primary edit-prize" style="margin-right: 5px;">编辑</button>
  319. <br><span class="text-muted" style="font-size: 11px;">系统默认</span>
  320. </td>
  321. </tr>
  322. </tbody>
  323. </table>
  324. </div>
  325. <!-- 隐藏验证字段 -->
  326. <input type="hidden" name="prize_setting_check" data-rule="prize_setting_check" data-rule-message="请完善奖品设置" />
  327. <!-- 底部提示 -->
  328. <!-- <div class="text-danger" style="margin-top: 10px; font-size: 12px;">
  329. 必须添加8个奖品
  330. </div> -->
  331. </div>
  332. </div>
  333. <!-- 兑奖期限设置 -->
  334. <div class="form-group">
  335. <label class="control-label col-xs-12 col-sm-2">兑奖期限:</label>
  336. <div class="col-xs-12 col-sm-8">
  337. <label class="radio-inline">
  338. <input name="row[redeem_expire_type]" type="radio" value="1" checked data-rule="required" data-rule-message="请选择兑奖期限"> 永久有效
  339. </label>
  340. <label class="radio-inline">
  341. <input name="row[redeem_expire_type]" type="radio" value="2"> 固定时长
  342. </label>
  343. <div data-favisible="redeem_expire_type=2" style="margin-top: 10px;">
  344. <div class="input-group" style="width: 200px;">
  345. <input type="number" class="form-control" name="row[redeem_expire_days]" min="1" max="365" value="7" data-rule="range(1~365)" data-rule-message="兑奖期限必须在1-365天之间">
  346. <span class="input-group-addon">天</span>
  347. </div>
  348. </div>
  349. <span class="help-block">仅针对商品设置兑奖期限,其他奖品类型兑奖期限皆在中奖时直接发放</span>
  350. </div>
  351. </div>
  352. </div>
  353. <!-- 规则设置区域 -->
  354. <div class="section-content">
  355. <div class="section-title">规则设置</div>
  356. <!-- 适用人群 -->
  357. <div class="form-group">
  358. <label class="control-label col-xs-12 col-sm-2">适用人群:</label>
  359. <div class="col-xs-12 col-sm-8">
  360. {foreach name="userLimitTypeList" item="vo"}
  361. <label for="row[user_limit_type]-{$key}" class="radio-inline">
  362. <input id="row[user_limit_type]-{$key}" name="row[user_limit_type]" type="radio" value="{$key}" {if condition="$key eq 3"}checked{/if} data-rule="required" data-rule-message="请选择适用人群"> {$vo}
  363. </label>
  364. {/foreach}
  365. </div>
  366. </div>
  367. <!-- 任务设置 -->
  368. <div class="form-group">
  369. <label class="control-label col-xs-12 col-sm-2">任务设置:</label>
  370. <div class="col-xs-12 col-sm-10">
  371. <!-- 任务类型选择 -->
  372. <div class="task-checkboxes" style="margin-bottom: 15px;">
  373. {foreach name="conditionTypeList" item="vo"}
  374. <label class="checkbox-inline" style="margin-right: 15px; margin-bottom: 10px;">
  375. <input type="checkbox" name="row[task_type][]" value="{$key}" data-rule="checked" data-rule-message="请至少选择一种任务类型" >
  376. <span>{$vo}</span>
  377. </label>
  378. {/foreach}
  379. </div>
  380. <!-- 隐藏验证字段 -->
  381. <div class="help-block" style="margin-bottom: 15px;">每完成一次指定任务将获得一次抽奖机会</div>
  382. <!-- 任务详细设置区域 -->
  383. <div class="task-settings-container">
  384. <!-- 购买指定商品设置 -->
  385. <div class="task-setting-item" id="task-setting-1" style="display: none;">
  386. <div class="panel panel-default">
  387. <div class="panel-heading">
  388. <h4 class="panel-title">购买指定商品</h4>
  389. </div>
  390. <div class="panel-body">
  391. <div class="goods-select-container">
  392. <!-- 条件类型隐藏字段 -->
  393. <input type="hidden" name="condition[1][type]" value="1">
  394. <div class="goods-select-row">
  395. <span class="goods-label"><span class="text-danger">*</span> 选择商品:</span>
  396. <div class="goods-options">
  397. <label class="radio-inline">
  398. <input type="radio" name="condition[1][goods_rule]" value="1" checked> 指定商品参与
  399. </label>
  400. <label class="radio-inline">
  401. <input type="radio" name="condition[1][goods_rule]" value="2"> 指定商品不可参与
  402. </label>
  403. </div>
  404. </div>
  405. <div class="goods-button-row">
  406. <button type="button" class="btn btn-success btn-sm" onclick="selectTaskGoods('#selected-goods')">
  407. <i class="fa fa-plus"></i> 添加商品
  408. </button>
  409. </div>
  410. <div class="goods-description-row">
  411. <div id="selected-goods" class="goods-description-box">
  412. <span class="text-muted">该商品下单后将自动触发抽奖活动且发放一次抽奖机会,若用户产生维权退款,已发放的奖励自动回收。如果要制约用户使用其他无法回收:若该商品同时参与秒杀、砍价、拼团及其他营销活动,弹窗提醒将有次数限定 <i class="fa fa-question-circle" title="帮助说明"></i></span>
  413. </div>
  414. <!-- 商品ID列表隐藏字段,用于存储JSON格式的商品IDs -->
  415. <input type="hidden" name="condition[1][goods_ids]" value="" id="task-goods-ids-1">
  416. </div>
  417. </div>
  418. </div>
  419. </div>
  420. </div>
  421. <!-- 单笔订单消费满N元设置 -->
  422. <div class="task-setting-item" id="task-setting-2" style="display: none;">
  423. <div class="panel panel-default">
  424. <div class="panel-heading">
  425. <h4 class="panel-title">单笔订单消费满N元</h4>
  426. </div>
  427. <div class="panel-body">
  428. <!-- 条件类型隐藏字段 -->
  429. <input type="hidden" name="condition[2][type]" value="2">
  430. <div class="task-amount-setting">
  431. <span class="task-amount-label">单次消费满</span>
  432. <div class="input-group task-amount-input">
  433. <input type="number" class="form-control" name="condition[2][condition_value]" min="0.01" step="0.01" placeholder="请输入">
  434. <span class="input-group-addon">元</span>
  435. </div>
  436. <span class="task-amount-desc">可触发抽奖活动且发放一次抽奖机会</span>
  437. </div>
  438. <div class="task-amount-help">单次消费金额满足设置可触发抽奖活动,满足条件即可触发,消费金额不包含运费,整单维权成功后收回奖励</div>
  439. </div>
  440. </div>
  441. </div>
  442. <!-- 单次充值金额满N元设置 -->
  443. <div class="task-setting-item" id="task-setting-3" style="display: none;">
  444. <div class="panel panel-default">
  445. <div class="panel-heading">
  446. <h4 class="panel-title">单次充值金额满N元</h4>
  447. </div>
  448. <div class="panel-body">
  449. <!-- 条件类型隐藏字段 -->
  450. <input type="hidden" name="condition[3][type]" value="3">
  451. <div class="task-amount-setting">
  452. <span class="task-amount-label">单次充值满</span>
  453. <div class="input-group task-amount-input">
  454. <input type="number" class="form-control" name="condition[3][condition_value]" min="0.01" step="0.01" placeholder="请输入">
  455. <span class="input-group-addon">元</span>
  456. </div>
  457. <span class="task-amount-desc">可触发抽奖活动且发放一次抽奖机会</span>
  458. </div>
  459. <div class="task-amount-help">单次充值金额满足设置可触发抽奖活动,满足条件即可触发,充值页面将有进行提示 <i class="fa fa-question-circle" title="帮助说明"></i></div>
  460. </div>
  461. </div>
  462. </div>
  463. <!-- 活动期间累计消费N元设置 -->
  464. <div class="task-setting-item" id="task-setting-4" style="display: none;">
  465. <div class="panel panel-default">
  466. <div class="panel-heading">
  467. <h4 class="panel-title">活动期间累计消费N元</h4>
  468. </div>
  469. <div class="panel-body">
  470. <!-- 条件类型隐藏字段 -->
  471. <input type="hidden" name="condition[4][type]" value="4">
  472. <div class="task-amount-setting">
  473. <span class="task-amount-label">活动期间内累计消费满</span>
  474. <div class="input-group task-amount-input">
  475. <input type="number" class="form-control" name="condition[4][condition_value]" min="0.01" step="0.01" placeholder="请输入">
  476. <span class="input-group-addon">元</span>
  477. </div>
  478. <span class="task-amount-desc">可触发抽奖活动且发放一次抽奖机会</span>
  479. </div>
  480. <div class="task-amount-help">活动期间内累计消费金额满足设置可触发抽奖活动,满足条件即可触发,消费金额不包含运费,一旦发放抽奖次数无法收回 <i class="fa fa-question-circle" title="帮助说明"></i></div>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. </div>
  487. <!-- 引导样式 -->
  488. <div class="form-group">
  489. <label class="control-label col-xs-12 col-sm-2">引导样式:</label>
  490. <div class="col-xs-12 col-sm-8">
  491. {foreach name="guideStyleList" item="vo"}
  492. <label for="row[guide_style]-{$key}" class="radio-inline">
  493. <input id="row[guide_style]-{$key}" name="row[guide_style]" type="radio" value="{$key}" {if condition="$key eq 1"}checked{/if} data-rule="required" data-rule-message="请选择引导样式"> {$vo}
  494. </label>
  495. {/foreach}
  496. <!-- 默认样式预览 -->
  497. <div data-favisible="guide_style=1" class="next-box">
  498. <img src="{$lottery_guide|cdnurl}" style="width: 100px;">
  499. </div>
  500. </div>
  501. </div>
  502. <!-- 自定义引导样式 -->
  503. <div class="form-group" data-favisible="guide_style=2">
  504. <label class="control-label col-xs-12 col-sm-2">自定义引导图片:</label>
  505. <div class="col-xs-12 col-sm-8">
  506. <div class="input-group">
  507. <input id="c-guide_image" data-rule="required" class="form-control" name="row[guide_image]" type="text" placeholder="请上传引导图片">
  508. <div class="input-group-addon no-border no-padding">
  509. <span><button type="button" id="plupload-guide_image" class="btn btn-danger plupload" data-input-id="c-guide_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false"><i class="fa fa-upload"></i> 上传</button></span>
  510. </div>
  511. </div>
  512. </div>
  513. </div>
  514. <div class="form-group" data-visible="row[guide_style]=2">
  515. <label class="control-label col-xs-12 col-sm-2">引导文案:</label>
  516. <div class="col-xs-12 col-sm-8">
  517. <input id="c-guide_text" class="form-control" name="row[guide_text]" type="text" placeholder="请输入引导文案">
  518. </div>
  519. </div>
  520. <!-- 单人参与次数限制 -->
  521. <div class="form-group">
  522. <label class="control-label col-xs-12 col-sm-2">单人参与次数限制:</label>
  523. <div class="col-xs-12 col-sm-8">
  524. <input id="c-person_limit_num" class="form-control" name="row[person_limit_num]" type="number" value="1" min="1">
  525. <span class="help-block">设置每个用户最多可参与的抽奖次数</span>
  526. </div>
  527. </div>
  528. <!-- 抽奖介绍内容 -->
  529. <div class="form-group">
  530. <label class="control-label col-xs-12 col-sm-2">抽奖介绍内容:</label>
  531. <div class="col-xs-12 col-sm-8">
  532. <textarea id="c-intro_content" class="form-control editor" rows="5" name="row[intro_content]" placeholder="请输入抽奖活动的详细介绍"></textarea>
  533. <span class="help-block">支持富文本编辑,用于向用户展示活动详情</span>
  534. </div>
  535. </div>
  536. </div>
  537. <!-- 底部按钮 -->
  538. <div class="form-group layer-footer" style="margin-top: 30px;">
  539. <div class="col-xs-12 text-center">
  540. <button type="submit" class="btn btn-success btn-lg" style="margin-right: 10px;">
  541. <i class="fa fa-save"></i> 保存活动
  542. </button>
  543. <button type="reset" class="btn btn-default btn-lg">
  544. <i class="fa fa-refresh"></i> 重置
  545. </button>
  546. </div>
  547. </div>
  548. </form>
  549. <!-- 引入JavaScript模板 -->
  550. {include file="lottery/activity/scripttpl" /}