mobile_page_setting.html 46 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772
  1. {include file="public/header" /}
  2. <script src="{$Think.PLUGINS_SITE_ROOT}/jquery.SuperSlide.2.1.1.js"></script>
  3. <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/editable_page.css">
  4. <link href="{$Think.PLUGINS_SITE_ROOT}/colorpicker/evol.colorpicker.css" rel="stylesheet" type="text/css">
  5. <script src="{$Think.PLUGINS_SITE_ROOT}/colorpicker/evol.colorpicker.min.js"></script>
  6. <script type="text/javascript" charset="utf-8" src="{$Think.PLUGINS_SITE_ROOT}/ueditor/ueditor.config.js"></script>
  7. <script type="text/javascript" charset="utf-8" src="{$Think.PLUGINS_SITE_ROOT}/ueditor/ueditor.all.min.js"> </script>
  8. <script type="text/javascript" charset="utf-8" src="{$Think.PLUGINS_SITE_ROOT}/ueditor/lang/zh-cn/zh-cn.js"></script>
  9. <div class="page" style="min-height: 0;padding-bottom:0">
  10. <div class="fixed-bar" style="padding-bottom:0">
  11. <div class="item-title" style="border-bottom:0">
  12. <div class="subject">
  13. <h3>{$Think.lang.editable_page_h5}</h3>
  14. </div>
  15. {include file="public/admin_items" /}
  16. </div>
  17. </div>
  18. <div class="page-wrapper" style="top:65px;">
  19. <div class="component-list">
  20. <nav>
  21. <h3>公共设置</h3>
  22. <ul>
  23. <li data-config="page" title="页面设置">
  24. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/text.png">
  25. <span>页面设置</span>
  26. </li>
  27. <li data-config="jump" title="弹出广告">
  28. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/pop_adv.png">
  29. <span>弹出广告</span>
  30. </li>
  31. <li data-config="button" title="浮动按钮" class="">
  32. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/float_btn.png">
  33. <span>浮动按钮</span>
  34. </li>
  35. </ul>
  36. <h3>基础组件</h3>
  37. <ul>
  38. <li data-config="13" title="公告" class="">
  39. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/notice.png">
  40. <span>公告</span>
  41. </li>
  42. <li data-config="12" title="图文导航" class="">
  43. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/graphic_nav.png">
  44. <span>图文导航</span>
  45. </li>
  46. <li data-config="1" title="图片广告" class="">
  47. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/image_ads.png">
  48. <span>图片广告</span>
  49. </li>
  50. <li data-config="14" title="搜索" class="">
  51. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/search.png">
  52. <span>搜索</span>
  53. </li>
  54. <li data-config="2" title="富文本" class="">
  55. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/rich_text.png">
  56. <span>富文本</span>
  57. </li>
  58. <li data-config="15" title="魔方" class="">
  59. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/rubik_cube.png">
  60. <span>魔方</span>
  61. </li>
  62. <li data-config="16" title="辅助空白" class="">
  63. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/horz_blank.png">
  64. <span>辅助空白</span>
  65. </li>
  66. <li data-config="6" title="商品列表" class="">
  67. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/goods_list.png">
  68. <span>商品列表</span>
  69. </li>
  70. <li data-config="17" title="视频" class="">
  71. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/video_moba.png">
  72. <span>视频</span>
  73. </li>
  74. </ul>
  75. <h3>营销插件</h3>
  76. <ul>
  77. <li data-config="18" title="砍价" class="">
  78. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/bargain.png">
  79. <span>砍价</span>
  80. </li>
  81. <li data-config="19" title="团购" class="">
  82. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/groupbuy.png">
  83. <span>抢购</span>
  84. </li>
  85. <li data-config="20" title="拼团" class="">
  86. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/pintuan.png">
  87. <span>拼团</span>
  88. </li>
  89. <li data-config="21" title="预售" class="">
  90. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/presale.png">
  91. <span>预售</span>
  92. </li>
  93. <li data-config="22" title="秒杀" class="">
  94. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/seckill.png">
  95. <span>秒杀</span>
  96. </li>
  97. </ul>
  98. </nav>
  99. </div>
  100. <div class="preview-wrap">
  101. <div class="preview-restore-wrap">
  102. <div class="dv-wrap">
  103. <div class="diy-view-wrap">
  104. <div class="preview-head">
  105. <div class="preview-head_div">
  106. <span id="page_head">{$editable_page.editable_page_name|default=''}</span>
  107. </div>
  108. </div>
  109. <div class="float-button" id="float_button" style="display:{if !isset($editable_page['editable_page_theme_config']['if_show_button']) || $editable_page['editable_page_theme_config']['if_show_button']==0}none{else}block{/if};inset: {if isset($editable_page.editable_page_theme_config.button_position) && $editable_page.editable_page_theme_config.button_position==1}{$editable_page.editable_page_theme_config.button_margin|default='0'}px auto auto 0px{/if}{if isset($editable_page.editable_page_theme_config.button_position) && $editable_page.editable_page_theme_config.button_position==2}{$editable_page.editable_page_theme_config.button_margin|default='0'}px 0px auto auto{/if}{if isset($editable_page.editable_page_theme_config.button_position) && $editable_page.editable_page_theme_config.button_position==3}auto auto {$editable_page.editable_page_theme_config.button_margin|default='0'}px 0px{/if}{if isset($editable_page.editable_page_theme_config.button_position) && $editable_page.editable_page_theme_config.button_position==4}auto 0px {$editable_page.editable_page_theme_config.button_margin|default='0'}px auto{/if};padding-left: {$editable_page.editable_page_theme_config.page_margin|default='0'}px; padding-right: {$editable_page.editable_page_theme_config.page_margin|default='0'}px;"><img src="{$editable_page.editable_page_theme_config.button_image|default=''}" /></div>
  110. <div class="preview-content" id="page_content" style="background-color:{$editable_page.editable_page_theme_config.back_color|default='#f5f5f5'}; padding-left: {$editable_page.editable_page_theme_config.page_margin|default='0'}px; padding-right: {$editable_page.editable_page_theme_config.page_margin|default='0'}px; padding-bottom: {if !isset($editable_page['editable_page_theme_config']['if_show_footer']) || $editable_page['editable_page_theme_config']['if_show_footer']==1}60{else}0{/if}px; background-image: {$editable_page.editable_page_theme_config.back_image|default='unset'};">
  111. {if isset($config_list)}
  112. {foreach name='config_list' item='item' key='key'}
  113. <div onclick="setConfig({$key+1})" data-type="html" data-id="{$key+1}"><div class="model-del iconfont" onclick="delConfig({$key+1})">&#xe6e6;</div>{$item.html|raw}</div>
  114. {/foreach}
  115. {/if}
  116. </div>
  117. <div class="jump-adv-wrapper" id="jump_adv" style="display:none">
  118. <div class="jump-adv">
  119. <img class="jump-adv-image" src="{$editable_page.editable_page_theme_config.jump_image|default=''}" />
  120. <div class="jump-adv-button iconfont">&#xe696;</div>
  121. </div>
  122. </div>
  123. <div class="preview-foot" id="page_foot"{if isset($editable_page['editable_page_theme_config']['if_show_footer']) && $editable_page['editable_page_theme_config']['if_show_footer']==0} style="display:none"{/if}>
  124. <div class="preview-foot-item">
  125. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/icon_home_nor.png">
  126. <div>首页</div>
  127. </div>
  128. <div class="preview-foot-item">
  129. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/icon_classify_nor.png">
  130. <div>分类</div>
  131. </div>
  132. <div class="preview-foot-item">
  133. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/icon_seek_nor.png">
  134. <div>搜索</div>
  135. </div>
  136. <div class="preview-foot-item">
  137. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/icon_shopping_nor.png">
  138. <div>购物车</div>
  139. </div>
  140. <div class="preview-foot-item">
  141. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/icon_mine_nor.png">
  142. <div>我的</div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <div class="edit-attribute">
  150. <div class="attr-wrap">
  151. <div class="restore-wrap">
  152. <!-- 页面设置 -->
  153. <div data-type="config" data-id="page">
  154. <form onchange="changeForm($(this))">
  155. <input type="hidden" name="model_id" value="page" />
  156. <h2 class="attr-title">页面设置</h2>
  157. <div class="layui-form-item">
  158. <label class="layui-form-label sm">页面名称</label>
  159. <div class="layui-input-block">
  160. <input name="page_title" value="{$editable_page.editable_page_name|default=''}" type="text" placeholder="请输入页面名称" class="layui-input">
  161. </div>
  162. </div>
  163. <div class="layui-form-item">
  164. <label class="layui-form-label sm">页面颜色</label>
  165. <div class="layui-input-block">
  166. <div class="color-wrapper">
  167. <input id="back_color" value="{$editable_page.editable_page_theme_config.back_color|default=''}" type="text" name="back_color" />
  168. </div>
  169. </div>
  170. </div>
  171. <div class="layui-form-item">
  172. <label class="layui-form-label sm">页面边距</label>
  173. <div class="layui-input-block">
  174. <div class="range-wrapper">
  175. <input type="range" id="page_margin" name="page_margin" value="{$editable_page.editable_page_theme_config.page_margin|default='0'}"
  176. onchange="$(this).next().text($(this).val())">
  177. <span>{$editable_page.editable_page_theme_config.page_margin|default='0'}</span>
  178. </div>
  179. </div>
  180. </div>
  181. <div class="layui-form-item">
  182. <label class="layui-form-label sm">背景图片</label>
  183. <div class="layui-input-block">
  184. <div class="uploader-wrapper">
  185. <div class="uploader-image-wrapper" {if !isset($editable_page['editable_page_theme_config']['back_image']) || !$editable_page['editable_page_theme_config']['back_image']}style="display:none" {/if}>
  186. <img class='uploader-image' src='{if isset($editable_page['editable_page_theme_config']['back_image']) && $editable_page['editable_page_theme_config']['back_image']}{$editable_page['editable_page_theme_config']['back_image']}{/if}' />
  187. <div class="iconfont uploader-image-btn" onclick="delFile($(this))">&#xe696;</div>
  188. </div>
  189. <div class='uploader-content' {if isset($editable_page['editable_page_theme_config']['back_image']) && $editable_page['editable_page_theme_config']['back_image']}style="display:none"
  190. {/if}>
  191. <div class="uploader-icon iconfont">&#xe6bf;</div>
  192. <div class="uploader-text">点击上传</div>
  193. <div class="uploader-notice">1242×2688</div>
  194. <input type='file' class='uploader-file' onchange='uploadFile($(this))'>
  195. <input type='hidden' name='back_image'
  196. value='{$editable_page.editable_page_theme_config.back_image|default=""}'>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="layui-form-item">
  202. <label class="layui-form-label sm">底部导航</label>
  203. <div class="layui-input-block">
  204. <div class="onoff">
  205. <label for="if_show_footer1"
  206. class="cb-enable{if !isset($editable_page['editable_page_theme_config']['if_show_footer']) || $editable_page['editable_page_theme_config']['if_show_footer']==1} selected{/if}">{$Think.lang.ds_open}</label>
  207. <label for="if_show_footer0"
  208. class="cb-disable{if isset($editable_page['editable_page_theme_config']['if_show_footer']) && $editable_page['editable_page_theme_config']['if_show_footer']==0} selected{/if}">{$Think.lang.ds_close}</label>
  209. <input id="if_show_footer1" name="if_show_footer" value="1"
  210. type="radio"{if !isset($editable_page['editable_page_theme_config']['if_show_footer']) || $editable_page['editable_page_theme_config']['if_show_footer']==1} checked="checked"{/if}>
  211. <input id="if_show_footer0" name="if_show_footer" value="0"
  212. type="radio"{if isset($editable_page['editable_page_theme_config']['if_show_footer']) && $editable_page['editable_page_theme_config']['if_show_footer']==0} checked="checked"{/if}>
  213. </div>
  214. </div>
  215. </div>
  216. </form>
  217. </div>
  218. <!-- 弹出广告 -->
  219. <div data-type="config" style="display:none" data-id="jump">
  220. <form onchange="changeForm($(this))">
  221. <input type="hidden" name="model_id" value="jump" />
  222. <h2 class="attr-title">弹出广告</h2>
  223. <div class="layui-form-item">
  224. <label class="layui-form-label sm">弹出广告</label>
  225. <div class="layui-input-block">
  226. <div class="onoff">
  227. <label for="if_show_jump1"
  228. class="cb-enable{if isset($editable_page['editable_page_theme_config']['if_show_jump']) && $editable_page['editable_page_theme_config']['if_show_jump']==1} selected{/if}">{$Think.lang.ds_open}</label>
  229. <label for="if_show_jump0"
  230. class="cb-disable{if !isset($editable_page['editable_page_theme_config']['if_show_jump']) || $editable_page['editable_page_theme_config']['if_show_jump']==0} selected{/if}">{$Think.lang.ds_close}</label>
  231. <input id="if_show_jump1" name="if_show_jump" value="1"
  232. type="radio"{if isset($editable_page['editable_page_theme_config']['if_show_jump']) && $editable_page['editable_page_theme_config']['if_show_jump']==1} checked="checked"{/if}>
  233. <input id="if_show_jump0" name="if_show_jump" value="0"
  234. type="radio"{if !isset($editable_page['editable_page_theme_config']['if_show_jump']) || $editable_page['editable_page_theme_config']['if_show_jump']==0} checked="checked"{/if}>
  235. </div>
  236. </div>
  237. </div>
  238. <div class="layui-form-item">
  239. <label class="layui-form-label sm">广告图片</label>
  240. <div class="layui-input-block">
  241. <div class="uploader-wrapper">
  242. <div class="uploader-image-wrapper" {if !isset($editable_page['editable_page_theme_config']['jump_image']) || !$editable_page['editable_page_theme_config']['jump_image']}style="display:none" {/if}>
  243. <img class='uploader-image' src='{if isset($editable_page['editable_page_theme_config']['jump_image']) && $editable_page['editable_page_theme_config']['jump_image']}{$editable_page['editable_page_theme_config']['jump_image']}{/if}' />
  244. <div class="iconfont uploader-image-btn" onclick="delFile($(this))">&#xe696;</div>
  245. </div>
  246. <div class='uploader-content' {if isset($editable_page['editable_page_theme_config']['jump_image']) && $editable_page['editable_page_theme_config']['jump_image']}style="display:none"
  247. {/if}>
  248. <div class="uploader-icon iconfont">&#xe6bf;</div>
  249. <div class="uploader-text">点击上传</div>
  250. <div class="uploader-notice">1242×1242</div>
  251. <input type='file' class='uploader-file' onchange='uploadFile($(this))'>
  252. <input type='hidden' name='jump_image'
  253. value='{$editable_page.editable_page_theme_config.jump_image|default=""}'>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. <div class="layui-form-item">
  259. <label class="layui-form-label sm">跳转页面</label>
  260. <div class="layui-input-block">
  261. <input type="text" name="jump_link" value="{$editable_page.editable_page_theme_config.jump_link|default=''}" placeholder="请输入跳转页面" class="layui-input">
  262. </div>
  263. </div>
  264. </form>
  265. </div>
  266. <!-- 浮动按钮 -->
  267. <div data-type="config" style="display:none" data-id="button">
  268. <form onchange="changeForm($(this))">
  269. <input type="hidden" name="model_id" value="button" />
  270. <h2 class="attr-title">浮动按钮</h2>
  271. <div class="layui-form-item">
  272. <label class="layui-form-label sm">浮动按钮</label>
  273. <div class="layui-input-block">
  274. <div class="onoff">
  275. <label for="if_show_button1"
  276. class="cb-enable{if isset($editable_page['editable_page_theme_config']['if_show_button']) && $editable_page['editable_page_theme_config']['if_show_button']==1} selected{/if}">{$Think.lang.ds_open}</label>
  277. <label for="if_show_button0"
  278. class="cb-disable{if !isset($editable_page['editable_page_theme_config']['if_show_button']) || $editable_page['editable_page_theme_config']['if_show_button']==0} selected{/if}">{$Think.lang.ds_close}</label>
  279. <input id="if_show_button1" name="if_show_button" value="1"
  280. type="radio"{if isset($editable_page['editable_page_theme_config']['if_show_button']) && $editable_page['editable_page_theme_config']['if_show_button']==1} checked="checked"{/if}>
  281. <input id="if_show_button0" name="if_show_button" value="0"
  282. type="radio"{if !isset($editable_page['editable_page_theme_config']['if_show_button']) || $editable_page['editable_page_theme_config']['if_show_button']==0} checked="checked"{/if}>
  283. </div>
  284. </div>
  285. </div>
  286. <div class="layui-form-item">
  287. <label class="layui-form-label sm">按钮位置</label>
  288. <div class="layui-input-block">
  289. <div class="ds-icon-radio">
  290. <input type="hidden" name="button_position" value="{$editable_page.editable_page_theme_config.button_position|default='1'}" />
  291. <ul class="ds-icon">
  292. <li{if !isset($editable_page['editable_page_theme_config']['button_position']) || $editable_page['editable_page_theme_config']['button_position']==1} class="ds-icon-active"{/if} data-val="1" onclick="setRadio($(this))">
  293. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/left_top.png">
  294. <div class="text">左上</div>
  295. </li>
  296. <li{if isset($editable_page['editable_page_theme_config']['button_position']) && $editable_page['editable_page_theme_config']['button_position']==2} class="ds-icon-active"{/if} data-val="2" onclick="setRadio($(this))">
  297. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/right_top.png">
  298. <div class="text">右上</div>
  299. </li>
  300. <li{if isset($editable_page['editable_page_theme_config']['button_position']) && $editable_page['editable_page_theme_config']['button_position']==3} class="ds-icon-active"{/if} data-val="3" onclick="setRadio($(this))">
  301. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/left_bottom.png">
  302. <div class="text">左下</div>
  303. </li>
  304. <li{if isset($editable_page['editable_page_theme_config']['button_position']) && $editable_page['editable_page_theme_config']['button_position']==4} class="ds-icon-active"{/if} data-val="4" onclick="setRadio($(this))">
  305. <img src="{$Think.HOME_SITE_ROOT}/images/editable_page/right_bottom.png">
  306. <div class="text">右下</div>
  307. </li>
  308. </ul>
  309. </div>
  310. </div>
  311. </div>
  312. <div class="layui-form-item">
  313. <label class="layui-form-label sm">上下边距</label>
  314. <div class="layui-input-block">
  315. <div class="range-wrapper">
  316. <input type="range" name="button_margin" id="button_margin" value="{$editable_page.editable_page_theme_config.button_margin|default='0'}"
  317. onchange="$(this).next().text($(this).val())">
  318. <span>{$editable_page.editable_page_theme_config.button_margin|default='0'}</span>
  319. </div>
  320. </div>
  321. </div>
  322. <div class="layui-form-item">
  323. <label class="layui-form-label sm">按钮图片</label>
  324. <div class="layui-input-block">
  325. <div class="uploader-wrapper">
  326. <div class="uploader-image-wrapper" {if !isset($editable_page['editable_page_theme_config']['button_image']) || !$editable_page['editable_page_theme_config']['button_image']}style="display:none" {/if}>
  327. <img class='uploader-image' src='{if isset($editable_page['editable_page_theme_config']['button_image']) && $editable_page['editable_page_theme_config']['button_image']}{$editable_page['editable_page_theme_config']['button_image']}{/if}' />
  328. <div class="iconfont uploader-image-btn" onclick="delFile($(this))">&#xe696;</div>
  329. </div>
  330. <div class='uploader-content' {if isset($editable_page['editable_page_theme_config']['button_image']) && $editable_page['editable_page_theme_config']['button_image']}style="display:none"
  331. {/if}>
  332. <div class="uploader-icon iconfont">&#xe6bf;</div>
  333. <div class="uploader-text">点击上传</div>
  334. <div class="uploader-notice">40×40</div>
  335. <input type='file' class='uploader-file' onchange='uploadFile($(this))'>
  336. <input type='hidden' name='button_image'
  337. value='{$editable_page.editable_page_theme_config.button_image|default=""}'>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. <div class="layui-form-item">
  343. <label class="layui-form-label sm">跳转页面</label>
  344. <div class="layui-input-block">
  345. <input type="text" name="button_link" value="{$editable_page.editable_page_theme_config.button_link|default=''}" placeholder="请输入跳转页面" class="layui-input">
  346. </div>
  347. </div>
  348. </form>
  349. </div>
  350. <div data-type="load">
  351. {if isset($config_list)}
  352. {foreach name='config_list' item='item' key="key"}
  353. <div data-type="config" data-id="{$key+1}" style="display:none">{$item.config|raw}</div>
  354. {/foreach}
  355. {/if}
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. <div class="footer-btn">
  361. <input class="btn" type="button" value="{$Think.lang.ds_save}" onclick="saveForm()" />
  362. <a href="{$Think.config.ds_config.h5_site_url}/home/special?special_id={$Request.param.editable_page_id}" target="_blank"><input class="btn btn-red" type="button" value="预览"/></a>
  363. </div>
  364. </div>
  365. </div>
  366. <script>
  367. var ue={}
  368. EDITABLE_PAGE_URL='{$Think.ADMIN_SITE_URL}/editable_page'
  369. window.UEDITOR_HOME_URL='{$Think.PLUGINS_SITE_ROOT}/ueditor/'
  370. var goods_class={}
  371. function loadGoodsClass(level,id,obj){
  372. id=parseInt(id)
  373. if(goods_class['i_'+id]){
  374. addGoodsClass(level,id,obj)
  375. }else if(level==4){
  376. $('#'+obj).find('*[data-input]').val(id)
  377. }else if(level==1 || id>0){
  378. $.getJSON(EDITABLE_PAGE_URL+'/goods_class?parent_id='+id,function(data){
  379. if(data.code!=10000){
  380. layer.msg(data.message)
  381. }else if(data.result.length){
  382. goods_class['i_'+id]=data.result
  383. addGoodsClass(level,id,obj)
  384. }
  385. })
  386. }
  387. }
  388. function getGoodsClass(id,obj){
  389. $.getJSON(EDITABLE_PAGE_URL+'/goods_class?id='+id,function(data){
  390. if(data.code!=10000){
  391. layer.msg(data.message)
  392. }else{
  393. if(data.result.id.length){
  394. var temp=''
  395. for(var i in data.result.id){
  396. if(i==0){
  397. goods_class['i_0']=data.result.list[i]
  398. }else{
  399. goods_class['i_'+data.result.id[i-1]]=data.result.list[i]
  400. }
  401. i=parseInt(i)
  402. temp+='<select data-level="'+(i+1)+'" onchange="loadGoodsClass('+(i+2)+',$(this).val(),\''+obj+'\')">'
  403. temp+='<option value="0">{$Think.lang.ds_please_choose}</option>'
  404. for(var j in data.result.list[i]){
  405. temp+='<option value="'+data.result.list[i][j]['gc_id']+'" '+(data.result.list[i][j]['gc_id']==data.result.id[i]?'selected=""':'')+'>'+data.result.list[i][j]['gc_name']+'</option>'
  406. }
  407. temp+='</select>'
  408. }
  409. $('#'+obj+' [data-select]').append(temp)
  410. if($('#'+obj+' tbody').length){
  411. var temp=''
  412. var json
  413. var v=$('#'+obj+' *[data-type="template"]').attr('data-value')
  414. if(v){
  415. json=JSON.parse(v)
  416. }
  417. for(var i in data.result.list[data.result.list.length-1]){
  418. temp+='<tr><td class="tl"><label class="checkbox-label"><i class="checkbox-common"><input type="checkbox" onchange="checkboxChange($(this))" /></i><span>'+data.result.list[data.result.list.length-1][i].gc_name+'</span></label></td><td><input type="text" size="1" name="'+$('#'+obj+' *[data-type="template"]').attr('data-name')+'['+data.result.list[data.result.list.length-1][i].gc_id+'][sort]" value="'+((json && json[data.result.list[data.result.list.length-1][i].gc_id])?json[data.result.list[data.result.list.length-1][i].gc_id].sort:"255")+'" '+((json && json[data.result.list[data.result.list.length-1][i].gc_id])?"disabled=''":"")+' /></td></tr>'
  419. }
  420. $('#'+obj+' tbody').html(temp)
  421. }
  422. }
  423. }
  424. })
  425. }
  426. function checkboxChange(obj){
  427. if(obj.is(':checked')){
  428. obj.parents('tr').find('input[type="text"]').removeAttr('disabled');
  429. obj.parent().addClass('selected');
  430. }else{
  431. obj.parents('tr').find('input[type="text"]').attr('disabled','');
  432. obj.parent().removeClass('selected');
  433. }
  434. }
  435. function addGoodsClass(level,id,obj){
  436. if(level==1 || id>0){
  437. $('#'+obj).find('*[data-input]').val(id)
  438. if(goods_class['i_'+id]){
  439. var temp='<option value="0">{$Think.lang.ds_please_choose}</option>'
  440. for(var i in goods_class['i_'+id]){
  441. temp+='<option value="'+goods_class['i_'+id][i]['gc_id']+'">'+goods_class['i_'+id][i]['gc_name']+'</option>'
  442. }
  443. if($('#'+obj).find('select[data-level='+level+']').length){
  444. $('#'+obj).find('select[data-level='+level+']').html(temp)
  445. $('#'+obj).find('select[data-level]:gt('+($('#'+obj).find('select[data-level='+level+']').index()-1)+')').remove()
  446. }else{
  447. $('#'+obj+' [data-select]').append('<select data-level="'+level+'" onchange="loadGoodsClass('+(level+1)+',$(this).val(),\''+obj+'\')">'+temp+'</select>')
  448. }
  449. }
  450. }else{
  451. if(level>2){
  452. $('#'+obj).find('*[data-input]').val($('#'+obj).find('select[data-level='+(level-2)+']').val())
  453. }else{
  454. $('#'+obj).find('*[data-input]').val(0)
  455. }
  456. $('#'+obj).find('select[data-level]:gt('+($('#'+obj).find('select[data-level='+(level-1)+']').index()-1)+')').remove()
  457. }
  458. if($('#'+obj+' tbody').length){
  459. var temp=''
  460. $('#'+obj+' select:last-child').find('option').each(function(){
  461. if($(this).val()>0){
  462. temp+='<tr><td class="tl"><label class="checkbox-label"><i class="checkbox-common"><input type="checkbox" onchange="checkboxChange($(this))" /></i><span>'+$(this).text()+'</span></label></td><td><input type="text" size="1" name="'+$('#'+obj+' *[data-type="template"]').attr('data-name')+'['+$(this).val()+'][sort]" value="255" disabled="" /></td></tr>'
  463. }
  464. })
  465. $('#'+obj+' tbody').html(temp)
  466. }
  467. }
  468. var id={if isset($config_list)}{:count($config_list)}{else}0{/if};
  469. $(function(){
  470. {if isset($config_list)}
  471. {foreach name='config_list' item='item' key='key'}
  472. if(typeof(window['loadHtml{$item.val.editable_page_model_id}'])!='undefined'){
  473. window['loadHtml{$item.val.editable_page_model_id}']($('*[data-type="html"][data-id={$key+1}]'))
  474. }
  475. if(typeof(window['loadConfig{$item.val.editable_page_model_id}'])!='undefined'){
  476. window['loadConfig{$item.val.editable_page_model_id}']($('*[data-type="config"][data-id={$key+1}]'))
  477. }
  478. {/foreach}
  479. {/if}
  480. $('#page_content').sortable();
  481. $('#page_content').disableSelection();
  482. $('#back_color').colorpicker({showOn: 'both'});
  483. $('.component-list li').click(function(){
  484. $('*[data-type="config"]').hide()
  485. var config=$(this).attr('data-config')
  486. if(!isNaN(config)){
  487. $.getJSON(EDITABLE_PAGE_URL+'/config_load?if_h5=1&model_id='+config,function(data){
  488. if(data.code!=10000) {
  489. layer.msg(data.message);
  490. }else{
  491. id++
  492. var obj=$('.active[data-type="html"]')
  493. $('*[data-type="html"]').removeClass('active');
  494. var temp='<div onclick="setConfig('+id+')" class="active" data-type="html" data-id="'+id+'"><div class="model-del iconfont" onclick="delConfig('+id+')">&#xe6e6;</div>'+data.result.html+'</div>'
  495. if(obj.length){
  496. obj.after(temp)
  497. }else{
  498. $('#page_content').append(temp)
  499. }
  500. $('#page_content').animate({scrollTop:($('*[data-type="html"][data-id='+id+']').offset().top-$('#page_content').offset().top+$('#page_content').scrollTop()) + "px"}, 500);
  501. $('*[data-type="load"]').prepend('<div data-type="config" data-id="'+id+'">'+data.result.config+'</div>')
  502. if(typeof(window['loadHtml'+config])!='undefined'){
  503. window['loadHtml'+config]($('*[data-type="html"][data-id='+id+']'))
  504. }
  505. if(typeof(window['loadConfig'+config])!='undefined'){
  506. window['loadConfig'+config]($('*[data-type="config"][data-id='+id+']'))
  507. }
  508. }
  509. })
  510. }else{
  511. $('*[data-type="config"][data-id='+config+']').show()
  512. }
  513. if(config=='jump' && $('*[data-type="config"][data-id="jump"] [name="if_show_jump"]:checked').val()==1){
  514. $('#jump_adv').show()
  515. }else{
  516. $('#jump_adv').hide()
  517. }
  518. })
  519. })
  520. // 图片上传ajax
  521. function uploadFile(obj,callback) {
  522. if(!event.target.files[0]){
  523. return false;
  524. }
  525. var formData = new FormData();
  526. formData.append('config_id',0);
  527. formData.append('name','file');
  528. formData.append('file', event.target.files[0]);
  529. $.ajax({
  530. type: "POST",
  531. url : EDITABLE_PAGE_URL+'/image_upload',
  532. dataType : 'json',
  533. data : formData,
  534. contentType: false,
  535. processData: false,
  536. success : function (data, status) {
  537. if (data.code!=10000) {
  538. layer.msg(data.message);
  539. } else {
  540. obj.parents('.uploader-wrapper').find('input[type="hidden"]').val(data.result.file_path);
  541. obj.parents('.uploader-wrapper').find('.uploader-content').hide();
  542. obj.parents('.uploader-wrapper').find('.uploader-image').attr('src', data.result.file_path);
  543. obj.parents('.uploader-wrapper').find('.uploader-image-wrapper').show();
  544. var temp=obj.parents('form')
  545. temp.change()
  546. if(callback){
  547. callback(data.result.file_path,obj)
  548. }
  549. }
  550. }
  551. });
  552. return false;
  553. }
  554. function delFile(obj){
  555. obj.parents('.uploader-wrapper').find('input[type="hidden"]').val('');
  556. obj.parents('.uploader-wrapper').find('.uploader-content').show();
  557. obj.parents('.uploader-wrapper').find('.uploader-image').attr('src', '');
  558. obj.parents('.uploader-wrapper').find('.uploader-image-wrapper').hide();
  559. var temp=obj.parents('form')
  560. temp.change()
  561. }
  562. function setRadio(obj,callback){
  563. obj.parents('.ds-icon-radio').find('li').removeClass('ds-icon-active')
  564. obj.addClass('ds-icon-active')
  565. obj.parents('.ds-icon-radio').find('input[type="hidden"]').val(obj.attr('data-val'))
  566. var temp=obj.parents('form')
  567. temp.change()
  568. if(callback){
  569. callback()
  570. }
  571. }
  572. function setConfig(id){
  573. $('*[data-type="html"].active').removeClass('active')
  574. $('*[data-type="html"][data-id='+id+']').addClass('active')
  575. $('*[data-type="config"]').hide()
  576. $('*[data-type="config"][data-id='+id+']').show()
  577. }
  578. function delConfig(id){
  579. var nid=$('*[data-type="html"][data-id='+id+']').next().attr('data-id')
  580. if(!nid){
  581. nid=$('*[data-type="html"][data-id='+id+']').prev().attr('data-id')
  582. }
  583. if(nid){
  584. setConfig(nid)
  585. }else{
  586. $('*[data-config="page"]').click()
  587. }
  588. $('*[data-type="html"][data-id='+id+']').remove()
  589. $('*[data-type="config"][data-id='+id+']').remove()
  590. event.stopPropagation()
  591. }
  592. var index={}
  593. var html={}
  594. function addModel(obj,id){
  595. index['i_'+id]++
  596. obj.before('<div class="model-item">'+html['i_'+id].replace(/\[i_\d+\]/g,'[i_'+index['i_'+id]+']')+'<div class="model-del iconfont" onclick="delModel($(this))">&#xe696;</div>'+'</div>')
  597. if(typeof(window['loadConfig'+id])!='undefined'){
  598. window['loadConfig'+id](obj.parents('*[data-type="config"]'))
  599. }
  600. }
  601. function delModel(obj){
  602. obj.parents('.model-item').remove()
  603. }
  604. function saveForm(){
  605. var data=[]
  606. data.push(formartForm($('*[data-type="config"][data-id="page"]').find('form').serializeArray()))
  607. data.push(formartForm($('*[data-type="config"][data-id="jump"]').find('form').serializeArray()))
  608. data.push(formartForm($('*[data-type="config"][data-id="button"]').find('form').serializeArray()))
  609. $('*[data-type="html"]').each(function(){
  610. data.push(formartForm($('*[data-type="config"][data-id='+$(this).attr('data-id')+']').find('form').serializeArray()))
  611. })
  612. $.ajax({
  613. type: "POST",
  614. url : EDITABLE_PAGE_URL+'/config_edit?if_h5=1&page_id={$Request.param.editable_page_id}',
  615. dataType : 'json',
  616. data : {config_list:data},
  617. success : function (data, status) {
  618. layer.msg(data.message)
  619. }
  620. })
  621. }
  622. function formartForm(temp){
  623. var formData={}
  624. var m_s=[]
  625. var m_i=[]
  626. var r={}
  627. for(var i in temp){
  628. var m=temp[i]['name'].match(/(\[([^\[\]]+)\])+?/g)
  629. if(m){
  630. var w={}
  631. for(var j=m.length-1;j>=0;j--){
  632. var o=m[j].match(/\[(.+)\]/)
  633. var t=(j==m.length-1)?temp[i]['value']:w
  634. w={}
  635. if(o[1].match(/^i_\d+$/)){
  636. if(m_s[j]!=o[1]){
  637. if(!m_s[j] || parseInt(o[1].substr(2))<parseInt(m_s[j].substr(2))){
  638. m_i[j]=0
  639. }else{
  640. m_i[j]++
  641. }
  642. m_s[j]=o[1]
  643. }
  644. w[m_i[j]]=t
  645. }else if(o[1].match(/^\d+$/)){
  646. w[o[1].toString()]=t
  647. }else{
  648. w[o[1]]=t
  649. }
  650. }
  651. var n=temp[i]['name'].match(/^([^\[\]]+)/)
  652. r={}
  653. r[n[1]]=w
  654. formData=setAttr(formData,r)
  655. }else{
  656. formData[temp[i]['name']]=temp[i]['value']
  657. }
  658. }
  659. function setAttr(obj,val){
  660. for(var j in val){
  661. if(obj[j]){
  662. obj[j]=setAttr(obj[j],val[j])
  663. return obj
  664. }else{
  665. return Object.assign(obj,val)
  666. }
  667. }
  668. }
  669. return formData
  670. }
  671. function changeForm(obj){
  672. var id=obj.find('input[name="model_id"]').val()
  673. var temp=obj.serializeArray()
  674. var formData=formartForm(temp)
  675. if(!isNaN(id)){
  676. $.ajax({
  677. type: "POST",
  678. url : EDITABLE_PAGE_URL+'/config_load?if_h5=1&model_id='+id,
  679. dataType : 'json',
  680. data : {config_info:formData},
  681. success : function (data, status) {
  682. if (data.code!=10000) {
  683. layer.msg(data.message);
  684. } else {
  685. $('*[data-type="html"][data-id='+obj.parents('*[data-type="config"]').attr('data-id')+']').html('<div class="model-del iconfont" onclick="delConfig('+obj.parents('*[data-type="config"]').attr('data-id')+')">&#xe6e6;</div>'+data.result.html)
  686. if(typeof(window['loadHtml'+id])!='undefined'){
  687. window['loadHtml'+id]($('*[data-type="html"][data-id='+obj.parents('*[data-type="config"]').attr('data-id')+']'))
  688. }
  689. }
  690. }
  691. })
  692. }else{
  693. switch(id){
  694. case 'page':
  695. $('#page_head').text(formData['page_title']?formData['page_title']:'{$Think.config.ds_config.site_name}')
  696. $('#page_content').css('background-color',formData['back_color']?formData['back_color']:'#f5f5f5')
  697. $('#page_content').css('padding-left',(formData['page_margin']?formData['page_margin']:'0')+'px')
  698. $('#page_content').css('padding-right',(formData['page_margin']?formData['page_margin']:'0')+'px')
  699. $('#float_button').css('padding-left',(formData['page_margin']?formData['page_margin']:'0')+'px')
  700. $('#float_button').css('padding-right',(formData['page_margin']?formData['page_margin']:'0')+'px')
  701. $('#page_content').css('background-image',formData['back_image']?('url('+formData['back_image']+')'):'unset')
  702. if(formData['if_show_footer']==1){
  703. $('#page_foot').show()
  704. $('#page_content').css('padding-bottom','60px')
  705. }else{
  706. $('#page_foot').hide()
  707. $('#page_content').css('padding-bottom','0')
  708. }
  709. break
  710. case 'jump':
  711. if(formData['if_show_jump']==1){
  712. $('#jump_adv').show()
  713. }else{
  714. $('#jump_adv').hide()
  715. }
  716. $('#jump_adv img').attr('src',formData['jump_image']?formData['jump_image']:'')
  717. break
  718. case 'button':
  719. if(formData['if_show_button']==1){
  720. $('#float_button').show()
  721. }else{
  722. $('#float_button').hide()
  723. }
  724. $('#float_button').css('top','auto').css('bottom','auto').css('left','auto').css('right','auto')
  725. $('#float_button img').attr('src',formData['button_image']?formData['button_image']:'')
  726. switch(formData['button_position']){
  727. case '1':
  728. $('#float_button').css('top',(formData['button_margin']?formData['button_margin']:'0')+'px').css('left',0)
  729. break
  730. case '2':
  731. $('#float_button').css('top',(formData['button_margin']?formData['button_margin']:'0')+'px').css('right',0)
  732. break
  733. case '3':
  734. $('#float_button').css('bottom',(formData['button_margin']?formData['button_margin']:'0')+'px').css('left',0)
  735. break
  736. case '4':
  737. $('#float_button').css('bottom',(formData['button_margin']?formData['button_margin']:'0')+'px').css('right',0)
  738. break
  739. }
  740. break
  741. }
  742. }
  743. }
  744. </script>