goods.blade.php 66 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048
  1. @extends('layouts.base')
  2. @section('title', '基础设置')
  3. @section('content')
  4. <link rel="stylesheet" href="{{resource_get('plugins/new-poster/views/admin/index.css')}}">
  5. <link rel="stylesheet" href="{{resource_get('plugins/new-poster/views/admin/edit.css')}}">
  6. <link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
  7. <style>
  8. /* 导航 */
  9. .el-radio-button .el-radio-button__inner,.el-radio-button:first-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;border-left: 0px;}
  10. .el-radio-button__inner{border:0;}
  11. .el-radio-button:last-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;}
  12. .upload-boxed .el-icon-close {position: absolute;top: -5px;right: -5px;color: #fff;background: #333;border-radius: 50%;cursor: pointer;}
  13. .el-radio__inner { border: 1px solid #cfcfcf;}
  14. .edit-poster .el-form-item__label{width:20%!important}
  15. .edit-poster .el-form-item__content{margin-left:20%!important}
  16. </style>
  17. <div class="all">
  18. <div id="app" v-cloak>
  19. <el-form ref="form" :model="form" :rules="rules" label-width="15%">
  20. <div class="vue-head">
  21. <el-radio-group v-model="order_type">
  22. <el-radio-button label="1">海报设置</el-radio-button>
  23. </el-radio-group>
  24. </div>
  25. <div v-show="order_type==1">
  26. <div class="vue-head">
  27. <div class="vue-main-title">
  28. <div class="vue-main-title-left"></div>
  29. <div class="vue-main-title-content">基础设置</div>
  30. </div>
  31. <div class="vue-main-form">
  32. <el-form-item label="海报名称" prop="title">
  33. <el-input v-model="form.title" style="width:70%;" ref="title"></el-input>
  34. </el-form-item>
  35. <el-form-item label="是否启用" prop="status">
  36. <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
  37. </el-form-item>
  38. </div>
  39. </div>
  40. <div class="vue-head" style="margin-top:20px">
  41. <div class="vue-main-title">
  42. <div class="vue-main-title-left"></div>
  43. <div class="vue-main-title-content">海报设计</div>
  44. </div>
  45. <div class="vue-main-form">
  46. <div style="width:85%;margin:auto;display:flex;margin-bottom:30px;">
  47. <div style="width: 320px;height: 504px;border: 1px solid #ccc;position: relative;" :style="{backgroundColor:(background_type==0?form.color:'')}">
  48. <img v-if="form.background_url&&background_type==1" :src="form.background_url" alt="" style="width:100%;height:100%;">
  49. <drag-resize
  50. v-for="(rect, index) in rects"
  51. :key="index"
  52. :w="rect.width"
  53. :h="rect.height"
  54. :x="rect.left"
  55. :y="rect.top"
  56. :axis="rect.axis"
  57. :is-active="rect.active"
  58. :minw="rect.minw"
  59. :minh="rect.minh"
  60. :is-draggable="rect.draggable"
  61. :is-resizable="rect.resizable"
  62. :parent-limitation="rect.parentLim"
  63. :aspect-ratio="rect.aspectRatio"
  64. :z="rect.zIndex"
  65. :content-class="rect.class"
  66. v-on:activated="activateEv(index)"
  67. v-on:deactivated="deactivateEv(index)"
  68. v-on:dragging="changePosition($event, index)"
  69. v-on:resizing="changeSize($event, index)"
  70. style="position: absolute;"
  71. >
  72. <!-- logo -->
  73. <img v-if="rect.type=='logo'" :src="rect.logo_type?rect.src_url:logo_url" alt="" style="width:100%;height:100%;">
  74. <!-- logo -->
  75. <!-- 商品主图 -->
  76. <img v-if="rect.type=='img'" :src="goods_url" alt="" style="width:100%;height:100%;">
  77. <!-- 商品主图 -->
  78. <!-- 商品名称 -->
  79. <!-- bold:0,italic:0,slide:0,under:0 -->
  80. <div v-if="rect.type=='title'"
  81. :style="{color:rect.color,fontSize:rect.size+'px',fontWeight:(rect.bold?'bold':''),fontStyle:(rect.italic?'italic':''),textDecoration:((rect.slide||rect.under)?rect.slide?'line-through':'underline':'')}"
  82. style="width:100%;height:100%;white-space:nowrap;overflow:hidden"
  83. >
  84. <template v-if="poster_type==21">商户名称商户名称商户名称商户名称商户名称商户名称商户名称商户名称</template>
  85. <template v-if="poster_type!=21&&poster_type!=23">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</template>
  86. <template v-if="poster_type==23">[[package_deliver_name]]名称[[package_deliver_name]]名称[[package_deliver_name]]名称[[package_deliver_name]]名称[[package_deliver_name]]名称[[package_deliver_name]]名称[[package_deliver_name]]名称[[package_deliver_name]]名称</template>
  87. </div>
  88. <!-- 商品名称 -->
  89. <!-- 图片 -->
  90. <img v-if="rect.type=='other_img'" :src="rect.src_url" alt="" style="width:100%;height:100%;">
  91. <!-- 图片 -->
  92. <!-- 会员价 -->
  93. <div v-if="rect.type=='member_price'"
  94. :style="{color:rect.color,fontSize:rect.size+'px',fontWeight:(rect.bold?'bold':''),fontStyle:(rect.italic?'italic':''),textDecoration:((rect.slide||rect.under)?rect.slide?'line-through':'underline':'')}"
  95. style="width:100%;height:100%;white-space:nowrap;overflow:hidden"
  96. >
  97. 会员价:¥20.00
  98. </div>
  99. <!-- 会员价 -->
  100. <!-- 原价 -->
  101. <div v-if="rect.type=='market_price'"
  102. :style="{color:rect.color,fontSize:rect.size+'px',fontWeight:(rect.bold?'bold':''),fontStyle:(rect.italic?'italic':''),textDecoration:((rect.slide||rect.under)?rect.slide?'line-through':'underline':'')}"
  103. style="width:100%;height:100%;white-space:nowrap;overflow:hidden"
  104. >
  105. 原价:¥20.00
  106. </div>
  107. <!-- 原价 -->
  108. <!-- 现价 -->
  109. <div v-if="rect.type=='price'"
  110. :style="{color:rect.color,fontSize:rect.size+'px',fontWeight:(rect.bold?'bold':''),fontStyle:(rect.italic?'italic':''),textDecoration:((rect.slide||rect.under)?rect.slide?'line-through':'underline':'')}"
  111. style="width:100%;height:100%;white-space:nowrap;overflow:hidden"
  112. >
  113. 现价:¥20.00
  114. </div>
  115. <!-- 现价 -->
  116. <!-- 头像 -->
  117. <img v-if="rect.type=='head'" :src="head_url" alt="" style="width:100%;height:100%;">
  118. <!-- 关注二维码 -->
  119. <img v-if="rect.type=='qr'" :src="qr_url" alt="" style="width:100%;height:100%;">
  120. <!-- 关注二维码 -->
  121. <!-- <img v-if="rect.type=='img'" :src="rect.src_url" alt="" style="width:100%;height:100%;"> -->
  122. <div v-if="rect.type=='nickname'"
  123. :style="{color:rect.color,fontSize:rect.size+'px'}"
  124. style="width:100%;height:100%;"
  125. >
  126. 昵称
  127. </div>
  128. <div v-if="rect.type=='invite'"
  129. :style="{color:rect.color,fontSize:rect.size+'px'}"
  130. style="width:100%;height:100%;"
  131. >
  132. A1H3U5GF
  133. </div>
  134. <div v-if="rect.type=='mid'"
  135. :style="{color:rect.color,fontSize:rect.size+'px'}"
  136. style="width:100%;height:100%;"
  137. >
  138. 8888
  139. </div>
  140. <div v-if="rect.type=='coupon_store_offline_price'"
  141. :style="{color:rect.color,fontSize:rect.size+'px'}"
  142. style="width:100%;height:100%;"
  143. >
  144. 到店付价格
  145. </div>
  146. <div v-if="rect.type=='coupon_store_offline_cost_price'"
  147. :style="{color:rect.color,fontSize:rect.size+'px'}"
  148. style="width:100%;height:100%;"
  149. >
  150. 到店付原价
  151. </div>
  152. <div v-if="rect.type=='coupon_store_offline_percent'"
  153. :style="{color:rect.color,fontSize:rect.size+'px'}"
  154. style="width:100%;height:100%;"
  155. >
  156. 到店付折扣率
  157. </div>
  158. </drag-resize>
  159. </div>
  160. <div class="edit-poster" style="flex:1;margin-left:10%">
  161. <!-- <div>背景图片</div> -->
  162. <el-form-item label="背景" prop="background">
  163. <el-radio v-model="background_type" :label="0">颜色</el-radio>
  164. <el-radio v-model="background_type" :label="1">自定义图片</el-radio>
  165. </el-form-item>
  166. <el-form-item label="" prop="background" v-if="background_type==1">
  167. <div class="upload-box" @click="openUpload('background')" v-if="!form.background_url">
  168. <i class="el-icon-plus" style="font-size:32px"></i>
  169. </div>
  170. <div @click="openUpload('background')" class="upload-boxed" v-if="form.background_url" style="height:236.25px">
  171. <img :src="form.background_url" alt="" style="width:150px;height:236.25px;border-radius: 5px;cursor: pointer;">
  172. <i class="el-icon-close" @click.stop="clearImg('background')" title="点击清除图片"></i>
  173. <div class="upload-boxed-text">点击重新上传</div>
  174. </div>
  175. <div class="tip">建议背景图片尺寸: 640*1008
  176. <span v-if="isDecorate">
  177. <span @click.stop="jumpUrl" style="color: #196dfa;font-weight: 600;margin-left: 15px;cursor:pointer;">图片智能在线设计</span><i class="el-icon-question" style="color:#196dfa;margin-left:2px;" @click="showIntroduce = true;"></i>
  178. </span>
  179. </div>
  180. </el-form-item>
  181. <el-form-item label="" prop="" v-else>
  182. <el-color-picker v-model="form.color" style="display:inline-block"></el-color-picker>
  183. </el-form-item>
  184. <el-form-item label="海报元素" prop="" >
  185. <div style="width:500px;">
  186. <template v-if="poster_type!=21&&poster_type!=23">
  187. <el-button size="small" @click="addEle('logo')">商城logo</el-button>
  188. <el-button size="small" @click="addEle('img')">商品主图</el-button>
  189. <el-button size="small" @click="addEle('title')">商品名称</el-button>
  190. <el-button size="small" @click="addEle('price')">现价</el-button>
  191. <el-button size="small" @click="addEle('qr')">商品二维码</el-button>
  192. </template>
  193. <template v-if="poster_type!=22&&poster_type!=21&&poster_type!=23">
  194. <el-button size="small" @click="addEle('member_price')">会员价</el-button>
  195. <el-button size="small" @click="addEle('market_price')">原价</el-button>
  196. </template>
  197. <template v-if="poster_type==21">
  198. <el-button size="small" @click="addEle('img')">商户banner图</el-button>
  199. <el-button size="small" @click="addEle('logo')">商户logo</el-button>
  200. <el-button size="small" @click="addEle('qr')">商户二维码</el-button>
  201. <el-button size="small" @click="addEle('title')">商户名称</el-button>
  202. </template>
  203. <template v-if="poster_type==23">
  204. <el-button size="small" @click="addEle('qr')">[[package_deliver_name]]二维码</el-button>
  205. <el-button size="small" @click="addEle('title')">[[package_deliver_name]]名称</el-button>
  206. </template>
  207. <template v-if="poster_type!=23">
  208. <el-button size="small" @click="addEle('head')">头像</el-button>
  209. <el-button size="small" @click="addEle('nickname')">昵称</el-button>
  210. <el-button size="small" @click="addEle('invite')">邀请码</el-button>
  211. <el-button size="small" @click="addEle('mid')">会员ID</el-button>
  212. </template>
  213. <el-button size="small" @click="addEle('other_img')">图片</el-button>
  214. <el-button type="text" v-if="choosed_index!=-1" icon="iconfont icon-ht_operation_delete" @click="delEle" title="删除当前元素" style="color:#F56C6C"></el-button>
  215. <el-button size="small" @click="addEle('coupon_store_offline_price')" v-if="poster_type==22">到店付价格</el-button>
  216. <el-button size="small" @click="addEle('coupon_store_offline_cost_price')" v-if="poster_type==22">到店付原价</el-button>
  217. <el-button size="small" @click="addEle('coupon_store_offline_percent')" v-if="poster_type==22">到店付折扣率</el-button>
  218. </div>
  219. </el-form-item>
  220. <!-- logo设置项 -->
  221. <div v-if="choosed_obj.type=='logo'">
  222. <el-form-item label="商城logo" prop="background">
  223. <el-radio v-model="choosed_obj.logo_type" :label="0">默认</el-radio>
  224. <el-radio v-model="choosed_obj.logo_type" :label="1">自定义</el-radio>
  225. </el-form-item>
  226. <el-form-item label="图片设置" prop="" v-if="choosed_obj.logo_type==1">
  227. <div class="upload-box" @click="openUpload('src',2)" v-if="!choosed_obj.src_url">
  228. <i class="el-icon-plus" style="font-size:32px"></i>
  229. </div>
  230. <div @click="openUpload('src',2)" class="upload-boxed" v-if="choosed_obj.src_url" style="height:150px">
  231. <img :src="choosed_obj.src_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
  232. <i class="el-icon-close" @click.stop="clearImg('src',2)" title="点击清除图片"></i>
  233. <div class="upload-boxed-text">点击重新上传</div>
  234. </div>
  235. </el-form-item>
  236. </div>
  237. <!-- 商品主图设置项 -->
  238. <!-- <div v-if="choosed_obj.type=='img'">
  239. <el-form-item label="商品主图圆角" prop="background">
  240. <el-slider v-model="choosed_obj.borderRadius" style="width:500px" show-input></el-slider>
  241. </el-form-item>
  242. </div> -->
  243. <!-- 商品名称设置项 -->
  244. <div v-if="choosed_obj.type=='title'">
  245. <el-form-item :label="goods_text_font_color_name" prop="banner1">
  246. <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
  247. </el-form-item>
  248. <el-form-item :label="goods_text_font_size_name" prop="banner1">
  249. <el-input v-model="choosed_obj.size" style="width:200px">
  250. <template slot="append">PX</template>
  251. </el-input>
  252. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_blod" @click="changeText('b')" title="加粗" :style="{color:choosed_obj.bold?'':'#000'}"></el-button> -->
  253. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_italic" @click="changeText('i')" title="斜体" :style="{color:choosed_obj.italic?'':'#000'}"></el-button> -->
  254. <el-button type="text" icon="iconfont icon-ht_textstyle_delete" @click="changeText('s')" title="中划线" :style="{color:choosed_obj.slide?'':'#000'}"></el-button>
  255. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_delete1" @click="changeText('u')" title="下划线" :style="{color:choosed_obj.under?'':'#000'}"></el-button> -->
  256. </el-form-item>
  257. </div>
  258. <!-- 图片设置项 -->
  259. <div v-if="choosed_obj.type=='other_img'">
  260. <el-form-item label="图片设置" prop="">
  261. <div class="upload-box" @click="openUpload('src',2)" v-if="!choosed_obj.src_url">
  262. <i class="el-icon-plus" style="font-size:32px"></i>
  263. </div>
  264. <div @click="openUpload('src',2)" class="upload-boxed" v-if="choosed_obj.src_url" style="height:150px">
  265. <img :src="choosed_obj.src_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
  266. <i class="el-icon-close" @click.stop="clearImg('src',2)" title="点击清除图片"></i>
  267. <div class="upload-boxed-text">点击重新上传</div>
  268. </div>
  269. </el-form-item>
  270. </div>
  271. <!-- 会员价设置项 -->
  272. <div v-if="choosed_obj.type=='member_price'">
  273. <el-form-item label="会员价文字颜色" prop="banner1">
  274. <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
  275. </el-form-item>
  276. <el-form-item label="会员价文字大小" prop="banner1">
  277. <el-input v-model="choosed_obj.size" style="width:200px">
  278. <template slot="append">PX</template>
  279. </el-input>
  280. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_blod" @click="changeText('b')" title="加粗" :style="{color:choosed_obj.bold?'':'#000'}"></el-button> -->
  281. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_italic" @click="changeText('i')" title="斜体" :style="{color:choosed_obj.italic?'':'#000'}"></el-button> -->
  282. <el-button type="text" icon="iconfont icon-ht_textstyle_delete" @click="changeText('s')" title="中划线" :style="{color:choosed_obj.slide?'':'#000'}"></el-button>
  283. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_delete1" @click="changeText('u')" title="下划线" :style="{color:choosed_obj.under?'':'#000'}"></el-button> -->
  284. </el-form-item>
  285. </div>
  286. <!-- 原价设置项 -->
  287. <div v-if="choosed_obj.type=='market_price'">
  288. <el-form-item label="原价文字颜色" prop="">
  289. <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
  290. </el-form-item>
  291. <el-form-item label="原价文字大小" prop="">
  292. <el-input v-model="choosed_obj.size" style="width:200px">
  293. <template slot="append">PX</template>
  294. </el-input>
  295. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_blod" @click="changeText('b')" title="加粗" :style="{color:choosed_obj.bold?'':'#000'}"></el-button> -->
  296. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_italic" @click="changeText('i')" title="斜体" :style="{color:choosed_obj.italic?'':'#000'}"></el-button> -->
  297. <el-button type="text" icon="iconfont icon-ht_textstyle_delete" @click="changeText('s')" title="中划线" :style="{color:choosed_obj.slide?'':'#000'}"></el-button>
  298. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_delete1" @click="changeText('u')" title="下划线" :style="{color:choosed_obj.under?'':'#000'}"></el-button> -->
  299. </el-form-item>
  300. </div>
  301. <!-- 现价设置项 -->
  302. <div v-if="choosed_obj.type=='price'">
  303. <el-form-item label="现价文字颜色" prop="">
  304. <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
  305. </el-form-item>
  306. <el-form-item label="现价文字大小" prop="">
  307. <el-input v-model="choosed_obj.size" style="width:200px">
  308. <template slot="append">PX</template>
  309. </el-input>
  310. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_blod" @click="changeText('b')" title="加粗" :style="{color:choosed_obj.bold?'':'#000'}"></el-button> -->
  311. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_italic" @click="changeText('i')" title="斜体" :style="{color:choosed_obj.italic?'':'#000'}"></el-button> -->
  312. <el-button type="text" icon="iconfont icon-ht_textstyle_delete" @click="changeText('s')" title="中划线" :style="{color:choosed_obj.slide?'':'#000'}"></el-button>
  313. <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_delete1" @click="changeText('u')" title="下划线" :style="{color:choosed_obj.under?'':'#000'}"></el-button> -->
  314. </el-form-item>
  315. </div>
  316. <!-- 昵称、邀请码、会员ID设置项 -->
  317. <div v-if="choosed_obj.type=='nickname' || choosed_obj.type=='invite' || choosed_obj.type=='mid' || choosed_obj.type=='coupon_store_offline_price' || choosed_obj.type=='coupon_store_offline_cost_price' || choosed_obj.type=='coupon_store_offline_percent'">
  318. <el-form-item label="文字颜色" prop="banner1">
  319. <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
  320. </el-form-item>
  321. <el-form-item label="文字大小" prop="banner1">
  322. <el-input v-model="choosed_obj.size" style="width:200px">
  323. <template slot="append">PX</template>
  324. </el-input>
  325. </el-form-item>
  326. </div>
  327. <!-- 小程序二维码设置项 -->
  328. <div v-if="choosed_obj.type=='qr'&&poster_type==2">
  329. <el-form-item label="小程序二维码链接跳转" prop="">
  330. <el-input v-model="choosed_obj.mini_link" style="width:300px;"></el-input>
  331. <el-button @click="showLink('mini','mini_link',2)">选择链接</el-button>
  332. <div class="tip">默认跳转小程序首页</div>
  333. </el-form-item>
  334. </div>
  335. <!-- H5二维码设置项 -->
  336. <div v-if="choosed_obj.type=='qr'&&poster_type==5">
  337. <el-form-item label="二维码链接跳转" prop="">
  338. <el-input v-model="choosed_obj.h5_link" style="width:300px;"></el-input>
  339. <el-button @click="showLink('link','h5_link',5)">选择链接</el-button>
  340. <div class="tip">默认跳转商城首页</div>
  341. </el-form-item>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. </div>
  348. </el-form>
  349. <!-- 分页 -->
  350. <div class="vue-page">
  351. <div class="vue-center">
  352. <el-button type="primary" @click="submitForm('form')">提交</el-button>
  353. <el-button @click="goBack">返回</el-button>
  354. </div>
  355. </div>
  356. <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
  357. <pop :show="show" @replace="changeLink" @add="parHref"></pop>
  358. <program :pro="pro" @replacepro="changeprogram" @addpro="parpro"></program>
  359. </div>
  360. </div>
  361. @include('public.admin.uploadImg')
  362. @include('public.admin.vueDragResize')
  363. @include('public.admin.pop')
  364. @include('public.admin.program')
  365. <script>
  366. const CktUrl = "{!! $ckt_url !!}"; //* 创客贴url
  367. const IsDecorate = "{!! $is_decorate !!}";
  368. </script>
  369. <script>
  370. const qr_url = `{!! resource_get('plugins/new-poster/assets/img/qr.png') !!}`;
  371. const head_url = `{!! resource_get('plugins/new-poster/assets/img/head.jpg') !!}`;
  372. const thumb_url = `{!! resource_get('plugins/new-poster/assets/img/img.jpg') !!}`;
  373. const app_qr_url = `{!! resource_get('plugins/new-poster/assets/img/qr_app_share.jpg') !!}`;
  374. const qr_shop = `{!! resource_get('plugins/new-poster/assets/img/qr_shop.jpg') !!}`;
  375. const logo_url = `{!! resource_get('plugins/new-poster/assets/img/logo.png') !!}`;
  376. const goods_url = `{!! resource_get('plugins/new-poster/assets/img/goods.png') !!}`;
  377. let data = {!! json_encode($data)?:'[]' !!};
  378. let poster = {!! json_encode($poster)?:'{}' !!};
  379. let shop_credit1 = {!! json_encode($shop_credit1)?:'{}' !!};
  380. let id = 0;
  381. let supplement = {};
  382. let background_type = 1;
  383. if(data==null) {
  384. data = [];
  385. }
  386. if(poster==null) {
  387. poster = {};
  388. }
  389. else{
  390. supplement = poster.supplement;
  391. id = poster.id;
  392. background_type = poster.background?1:0;
  393. }
  394. if(shop_credit1==null) {
  395. shop_credit1 = "";
  396. }
  397. console.log(data);
  398. console.log(poster);
  399. console.log(shop_credit1);
  400. console.log(id);
  401. console.log(background_type);
  402. var app = new Vue({
  403. el:"#app",
  404. delimiters: ['[[', ']]'],
  405. name: 'test',
  406. data() {
  407. let package_deliver_name = '{!! $package_deliver_name !!}';
  408. return{
  409. goods_text_font_color_name:'商品名称文字颜色',
  410. goods_text_font_size_name:'商品名称文字大小',
  411. id:id,
  412. poster_type:1,
  413. background_type:background_type,
  414. label_word:"",
  415. label_show:false,
  416. history_show:false,
  417. label_list:[],
  418. label_total:0,
  419. label_per_page:0,
  420. label_current_page:0,
  421. show:false,//是否开启公众号弹窗
  422. pro:false ,//是否开启小程序弹窗
  423. chooseLink:'',
  424. chooseMiniLink:'',
  425. link_type:1,
  426. coupon_word:"",
  427. coupon_show:false,
  428. coupon_list:[],
  429. coupon_total:0,
  430. coupon_per_page:0,
  431. coupon_current_page:0,
  432. coupon_type:0,
  433. rects:[],
  434. data:data,
  435. zIndex:0,//全局层次
  436. choosed_obj:{},
  437. choosed_index:-1,
  438. qr_url :qr_url,
  439. head_url :head_url,
  440. thumb_url:thumb_url,
  441. app_qr_url:app_qr_url,
  442. logo_url:logo_url,
  443. qr_shop:qr_shop,
  444. goods_url:goods_url,
  445. listWidth:"",
  446. listHeight:"",
  447. color1:'1',
  448. order_type:1,
  449. link_show:false,
  450. link_ref : "",
  451. link_type : "",
  452. link_form:{
  453. },
  454. form:{
  455. // poster
  456. title:poster.title || "",
  457. status:poster.status || 0,
  458. background:poster.background || "",
  459. background_url:poster.background_url || "",
  460. color:poster.color || "",
  461. },
  462. coupon_word1:"",
  463. coupon_word2:"",
  464. uploadShow:false,
  465. chooseImgName:'',
  466. img_type:"",
  467. submit_url:'',
  468. showVisible:false,
  469. loading: false,
  470. rules:{
  471. name:{ required: true, message: '请输入'}
  472. },
  473. isDecorate:IsDecorate,
  474. package_deliver_name:package_deliver_name,
  475. }
  476. },
  477. created() {
  478. },
  479. mounted() {
  480. if(this.id) {
  481. this.submit_url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.editGoods') !!}'
  482. }
  483. else {
  484. this.submit_url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.addGoods') !!}'
  485. }
  486. this.poster_type = this.getParam('poster_type');
  487. console.log(this.poster_type)
  488. this.setPosterView(this.data);
  489. if(this.poster_type == 21){
  490. this.goods_text_font_color_name = '商户名称文字颜色';
  491. this.goods_text_font_size_name = '商户名称文字大小';
  492. }else if(this.poster_type == 23){
  493. this.goods_text_font_color_name = this.package_deliver_name + '名称文字颜色';
  494. this.goods_text_font_size_name = this.package_deliver_name + '名称文字大小';
  495. }
  496. },
  497. methods: {
  498. setPosterView(data) {
  499. data.forEach((item,index) => {
  500. let width = parseInt(item.width);
  501. let height = parseInt(item.height);
  502. let top = parseInt(item.top);
  503. let left =parseInt(item.left);
  504. if(item.type=='logo') {
  505. this.rects.push(
  506. {zIndex:this.zIndex+1,type:item.type,src:item.src,src_url:item.src_url,logo_type:item.logo_type,width:width,height:width,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
  507. )
  508. }
  509. else if(item.type=='img') {
  510. this.rects.push(
  511. {zIndex:this.zIndex+1,type:item.type,width:width,height:width,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  512. )
  513. }
  514. else if(item.type=='title') {
  515. let size = Number(item.size.split('p')[0]);
  516. this.rects.push(
  517. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  518. )
  519. }
  520. else if(item.type=="other_img") {
  521. this.rects.push(
  522. {zIndex:this.zIndex+1,type:item.type,src:item.src,src_url:item.src_url,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  523. )
  524. }
  525. else if(item.type=="member_price") {
  526. let size = Number(item.size.split('p')[0]);
  527. this.rects.push(
  528. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  529. )
  530. }
  531. else if(item.type=="market_price") {
  532. let size = Number(item.size.split('p')[0]);
  533. this.rects.push(
  534. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  535. )
  536. }
  537. else if(item.type=="price") {
  538. let size = Number(item.size.split('p')[0]);
  539. this.rects.push(
  540. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  541. )
  542. }
  543. else if(item.type=="qr"){
  544. this.rects.push(
  545. {zIndex:this.zIndex+1,type:item.type,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
  546. )
  547. }
  548. else if(item.type=="nickname") {
  549. let size = Number(item.size.split('p')[0]);
  550. this.rects.push(
  551. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  552. )
  553. }
  554. else if(item.type=="invite") {
  555. let size = parseInt(item.size);
  556. this.rects.push(
  557. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  558. )
  559. }
  560. else if(item.type=="mid") {
  561. let size = Number(item.size.split('p')[0]);
  562. this.rects.push(
  563. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  564. )
  565. }
  566. else if(item.type=="head") {
  567. this.rects.push(
  568. {zIndex:this.zIndex+1,type:item.type,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
  569. )
  570. }
  571. else if(item.type=="coupon_store_offline_price") {
  572. let size = Number(item.size.split('p')[0]);
  573. this.rects.push(
  574. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  575. )
  576. }
  577. else if(item.type=="coupon_store_offline_cost_price") {
  578. let size = Number(item.size.split('p')[0]);
  579. this.rects.push(
  580. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  581. )
  582. }
  583. else if(item.type=="coupon_store_offline_percent") {
  584. let size = Number(item.size.split('p')[0]);
  585. this.rects.push(
  586. {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  587. )
  588. }
  589. this.zIndex++;
  590. })
  591. },
  592. submitForm(formName) {
  593. console.log(this.form)
  594. console.log(this.rects)
  595. let that = this;
  596. let json = {
  597. poster:{
  598. poster_type:this.poster_type,
  599. title:this.form.title,
  600. status:this.form.status,
  601. background:this.form.background,
  602. background_url:this.form.background_url,
  603. color:this.form.color,
  604. },
  605. poster_supplement:{
  606. },
  607. data:[],
  608. };
  609. // 背景类型
  610. if(this.background_type==1) {
  611. json.poster.color = "";
  612. }
  613. else {
  614. json.poster.background = "";
  615. json.poster.background_url = "";
  616. }
  617. this.rects.forEach((item,index) => {
  618. if(item.type=="logo") {
  619. json.data.push({src:item.src,src_url:item.src_url,logo_type:item.logo_type,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,})
  620. }
  621. if(item.type=="img") {
  622. json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  623. }
  624. if(item.type=="title") {
  625. json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  626. }
  627. if(item.type=="other_img") {
  628. json.data.push({src:item.src,src_url:item.src_url,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,})
  629. }
  630. if(item.type=="member_price") {
  631. json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  632. }
  633. if(item.type=="market_price") {
  634. json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  635. }
  636. if(item.type=="price") {
  637. json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  638. }
  639. if(item.type=="qr"){
  640. json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  641. }
  642. if(item.type=="nickname") {
  643. json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  644. }
  645. if(item.type=="invite") {
  646. json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  647. }
  648. if(item.type=="mid") {
  649. json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  650. }
  651. if(item.type=="head") {
  652. json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
  653. }
  654. if(item.type=='coupon_store_offline_price'){
  655. json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,size:item.size+'px',color:item.color})
  656. }
  657. if(item.type=='coupon_store_offline_cost_price'){
  658. json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,size:item.size+'px',color:item.color})
  659. }
  660. if(item.type=='coupon_store_offline_percent'){
  661. json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,size:item.size+'px',color:item.color})
  662. }
  663. });
  664. let json1 = {
  665. form_data : json,
  666. }
  667. if(this.id) {
  668. json1.id = this.id
  669. }
  670. this.$refs[formName].validate((valid) => {
  671. if (valid) {
  672. let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
  673. this.$http.post(this.submit_url, json1).then(response => {
  674. if (response.data.result) {
  675. this.$message({type: 'success',message: '操作成功!'});
  676. this.goBack();
  677. } else {
  678. this.$message({message: response.data.msg,type: 'error'});
  679. }
  680. loading.close();
  681. },response => {
  682. loading.close();
  683. });
  684. }
  685. else {
  686. console.log('error submit!!');
  687. return false;
  688. }
  689. });
  690. },
  691. goBack() {
  692. history.go(-1)
  693. },
  694. openUpload(str,img_type) {
  695. this.chooseImgName = str;
  696. this.uploadShow = true;
  697. this.img_type = img_type;
  698. },
  699. changeProp(val) {
  700. if(val == true) {
  701. this.uploadShow = false;
  702. }
  703. else {
  704. this.uploadShow = true;
  705. }
  706. },
  707. sureImg(name,image,image_url) {
  708. if(this.img_type) {
  709. this.rects[this.choosed_index][name] = image;
  710. this.rects[this.choosed_index][name+'_url'] = image_url;
  711. this.choosed_obj[name] = image;
  712. this.choosed_obj[name+'_url'] = image_url;
  713. this.$forceUpdate();
  714. }
  715. else {
  716. this.form[name] = image;
  717. this.form[name+'_url'] = image_url;
  718. }
  719. console.log(this.rects)
  720. },
  721. clearImg(str,type) {
  722. if(type) {
  723. this.rects[this.choosed_index][str] = "";
  724. this.rects[this.choosed_index][str+'_url'] = "";
  725. this.choosed_obj[str] = "";
  726. this.choosed_obj[str+'_url'] = "";
  727. }
  728. else {
  729. this.form[str] = "";
  730. this.form[str+'_url'] = "";
  731. }
  732. this.$forceUpdate();
  733. },
  734. openCoupon(type) {
  735. this.coupon_type = type;
  736. this.coupon_show = true;
  737. },
  738. searchCoupon() {
  739. this.$http.post('{!! yzWebFullUrl('plugin.new-poster.admin.poster.getCouponByWord') !!}',{coupon_kwd:this.coupon_word}).then(response => {
  740. if (response.data.result) {
  741. this.coupon_list = response.data.data.list.data;
  742. this.coupon_total = response.data.data.list.total;
  743. this.coupon_per_page = response.data.data.list.per_page;
  744. this.coupon_current_page = response.data.data.list.current_page;
  745. } else {
  746. this.$message({message: response.data.msg,type: 'error'});
  747. }
  748. },response => {
  749. });
  750. },
  751. chooseCoupon(row) {
  752. if(this.coupon_type==1) {
  753. this.form.recommender_coupon_id = row.id;
  754. this.form.recommender_coupon_name = row.name;
  755. this.coupon_word1 = `【ID:】`+this.form.recommender_coupon_id+``+this.form.recommender_coupon_name;
  756. }
  757. else if(this.coupon_type==2) {
  758. this.form.subscriber_coupon_id = row.id;
  759. this.form.subscriber_coupon_name = row.name;
  760. this.coupon_word2 = `【ID:】`+this.form.subscriber_coupon_id+``+this.form.subscriber_coupon_name;
  761. }
  762. this.coupon_show = false;
  763. console.log(this.form)
  764. },
  765. clearCoupon(type) {
  766. if(type==1) {
  767. this.form.recommender_coupon_id = "";
  768. this.form.recommender_coupon_name = "";
  769. this.coupon_word1 = "";
  770. }
  771. else if(type==2) {
  772. this.form.subscriber_coupon_id = "";
  773. this.form.subscriber_coupon_name = "";
  774. this.coupon_word2 = "";
  775. }
  776. },
  777. addEle(type) {
  778. let is_true = false;
  779. let choose_index = -1;
  780. this.rects.some((item,index) => {
  781. if(item.type == type) {
  782. is_true = true;
  783. choose_index = index
  784. return true
  785. }
  786. })
  787. if(is_true) {
  788. this.rects[choose_index].active = true;
  789. return false;
  790. }
  791. if(type=="logo") {
  792. this.rects.push(
  793. {zIndex:this.zIndex+1,type:type,src:"",src_url:"",logo_type:0,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  794. )
  795. }
  796. if(type=="img") {
  797. this.rects.push(
  798. {zIndex:this.zIndex+1,type:type,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  799. )
  800. }
  801. if(type=="title") {
  802. this.rects.push(
  803. {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  804. )
  805. }
  806. if(type=="other_img") {
  807. this.rects.push(
  808. {zIndex:this.zIndex+1,type:type,src:thumb_url,src_url:thumb_url,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  809. )
  810. }
  811. if(type=="member_price") {
  812. this.rects.push(
  813. {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  814. )
  815. }
  816. if(type=="market_price") {
  817. this.rects.push(
  818. {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  819. )
  820. }
  821. if(type=="price") {
  822. this.rects.push(
  823. {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  824. )
  825. }
  826. if(type=="qr"){
  827. this.rects.push(
  828. {zIndex:this.zIndex+1,type:type,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
  829. )
  830. }
  831. if(type=="nickname") {
  832. this.rects.push(
  833. {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:130,height:30,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  834. )
  835. }
  836. if(type=="invite") {
  837. this.rects.push(
  838. {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:110,height:30,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  839. )
  840. }
  841. if(type=="mid") {
  842. this.rects.push(
  843. {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:54,height:30,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  844. )
  845. }
  846. if(type=="head") {
  847. this.rects.push(
  848. {zIndex:this.zIndex+1,type:type,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
  849. )
  850. }
  851. if(type=="coupon_store_offline_price") {
  852. this.rects.push(
  853. {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:130,height:30,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  854. )
  855. }
  856. if(type=="coupon_store_offline_cost_price") {
  857. this.rects.push(
  858. {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:130,height:30,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  859. )
  860. }
  861. if(type=="coupon_store_offline_percent") {
  862. this.rects.push(
  863. {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:130,height:30,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
  864. )
  865. }
  866. this.zIndex++;
  867. console.log(this.rects)
  868. },
  869. delEle() {
  870. console.log(this.rects);
  871. let list = JSON.parse(JSON.stringify(this.rects));
  872. list.splice(this.choosed_index,1);
  873. console.log(list);
  874. this.rects = [];
  875. // 样式处理
  876. setTimeout(() => {
  877. list.forEach((item,index) => {
  878. this.rects.push(item)
  879. })
  880. },10)
  881. this.choosed_obj = {};
  882. console.log(this.rects);
  883. this.choosed_index = -1;
  884. },
  885. activateEv(index) {
  886. console.log(index);
  887. if(this.choosed_index!=-1) {
  888. this.rects[this.choosed_index].active = false;
  889. }
  890. this.choosed_obj = this.rects[index];
  891. this.choosed_index = index;
  892. this.rects[index].active = true;
  893. },
  894. deactivateEv(index) {
  895. console.log(index)
  896. // this.rects[index].active = false;
  897. // this.choosed_index!=-1;
  898. },
  899. changePosition(newRect, index) {
  900. this.rects[index].top = newRect.top;
  901. this.rects[index].left = newRect.left;
  902. this.rects[index].width = newRect.width;
  903. this.rects[index].height = newRect.height;
  904. },
  905. changeSize(newRect, index) {
  906. this.rects[index].top = newRect.top;
  907. this.rects[index].left = newRect.left;
  908. this.rects[index].width = newRect.width;
  909. this.rects[index].height = newRect.height;
  910. },
  911. showLink(type,name,link_type) {
  912. if(type=="link") {
  913. this.chooseLink = name;
  914. this.show = true;
  915. }
  916. else {
  917. this.chooseMiniLink = name;
  918. this.pro = true;
  919. }
  920. this.link_type = link_type;
  921. },
  922. changeProp(val) {
  923. if(val == true) {
  924. this.uploadShow = false;
  925. }
  926. else {
  927. this.uploadShow = true;
  928. }
  929. },
  930. //弹窗显示与隐藏的控制
  931. changeLink(item){
  932. this.show=item;
  933. },
  934. //当前链接的增加
  935. parHref(child,confirm){
  936. this.show=confirm;
  937. // this.form.link=child;
  938. if(this.link_type!=5) {
  939. this.form[this.chooseLink] = child;
  940. }
  941. else {
  942. this.rects[this.choosed_index]['h5_link'] = child;
  943. this.$forceUpdate();
  944. }
  945. },
  946. changeprogram(item){
  947. this.pro=item;
  948. },
  949. parpro(child,confirm){
  950. this.pro=confirm;
  951. // this.form.prolink=child;
  952. if(this.link_type!=2) {
  953. this.form[this.chooseMiniLink] = child;
  954. }
  955. else {
  956. this.rects[this.choosed_index]['mini_link'] = child;
  957. this.$forceUpdate();
  958. }
  959. },
  960. changeText(type) {
  961. if(type=='b') {
  962. this.choosed_obj.bold = this.choosed_obj.bold==1?0:1;
  963. this.rects[this.choosed_index].bold = this.choosed_obj.bold;
  964. }
  965. if(type=='i') {
  966. this.choosed_obj.italic = this.choosed_obj.italic==1?0:1;
  967. this.rects[this.choosed_index].italic = this.choosed_obj.italic;
  968. }
  969. if(type=='s') {
  970. this.choosed_obj.slide = this.choosed_obj.slide==1?0:1;
  971. this.rects[this.choosed_index].slide = this.choosed_obj.slide;
  972. if(this.rects[this.choosed_index].slide) {
  973. this.rects[this.choosed_index].under = 0;
  974. }
  975. }
  976. if(type=='u') {
  977. this.choosed_obj.under = this.choosed_obj.under==1?0:1;
  978. this.rects[this.choosed_index].under = this.choosed_obj.under;
  979. if(this.rects[this.choosed_index].under) {
  980. this.rects[this.choosed_index].slide = 0;
  981. }
  982. }
  983. },
  984. getParam(name) {
  985. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  986. var r = window.location.search.substr(1).match(reg);
  987. if (r != null) return unescape(r[2]);
  988. return null;
  989. },
  990. jumpUrl() {
  991. window.open(CktUrl);
  992. },
  993. },
  994. })
  995. </script>
  996. @endsection