style.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. // 顶部内容组件
  2. var pintuanTopConHtml = '<div>';
  3. pintuanTopConHtml += '<template v-if="data.style == 1">';
  4. pintuanTopConHtml += '<div class="goods-head">';
  5. pintuanTopConHtml += '<div class="title-wrap">';
  6. // pintuanTopConHtml += '<div class="left-icon" v-if="list.imageUrl"><img v-bind:src="$parent.$parent.changeImgUrl(list.imageUrl)" /></div>';
  7. // pintuanTopConHtml += '<span class="name">{{list.title}}</span>';
  8. pintuanTopConHtml += '<template v-for="(item, index) in list" v-if="item.style == 1">';
  9. pintuanTopConHtml += '<div class="left-icon" v-if="item.imageUrl && item.imageUrl.split(\'/\')[0] == \'public\'"><img v-bind:src="imgUrl1" /></div>';
  10. pintuanTopConHtml += '<div class="left-icon" v-if="item.imageUrl && item.imageUrl.split(\'/\')[0] != \'public\'"><img v-bind:src="$parent.$parent.changeImgUrl(item.imageUrl)" /></div>';
  11. pintuanTopConHtml += '<span class="name">{{item.title}}</span>';
  12. pintuanTopConHtml += '</template>';
  13. pintuanTopConHtml += '</div>';
  14. pintuanTopConHtml += '<div class="more violet" v-if="data.bgSelect==\'violet\'">';
  15. pintuanTopConHtml += '<span>';
  16. pintuanTopConHtml += '<span style="color: #8662FD;">更多</span>';
  17. pintuanTopConHtml += '<span style="color: #627BFD;">拼团</span>';
  18. pintuanTopConHtml += '</span>';
  19. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" style="color: #627BFD;"></i>';
  20. pintuanTopConHtml += '</div>';
  21. pintuanTopConHtml += '<div class="more red" v-if="data.bgSelect==\'red\'">';
  22. pintuanTopConHtml += '<span>';
  23. pintuanTopConHtml += '<span style="color: #FF7B91;">更多</span>';
  24. pintuanTopConHtml += '<span style="color: #FF5151;">拼团</span>';
  25. pintuanTopConHtml += '</span>';
  26. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" style="color: #FF5151;"></i>';
  27. pintuanTopConHtml += '</div>';
  28. pintuanTopConHtml += '<div class="more blue" v-if="data.bgSelect==\'blue\'">';
  29. pintuanTopConHtml += '<span>';
  30. pintuanTopConHtml += '<span style="color: #12D0AE;">更多</span>';
  31. pintuanTopConHtml += '<span style="color: #0ECFD3;">拼团</span>';
  32. pintuanTopConHtml += '</span>';
  33. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" style="color: #0ECFD3;"></i>';
  34. pintuanTopConHtml += '</div>';
  35. pintuanTopConHtml += '<div class="more yellow" v-if="data.bgSelect==\'yellow\'">';
  36. pintuanTopConHtml += '<span>';
  37. pintuanTopConHtml += '<span style="color: #FEB632;">更多</span>';
  38. pintuanTopConHtml += '<span style="color: #FE6232;">拼团</span>';
  39. pintuanTopConHtml += '</span>';
  40. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" style="color: #FE6232;"></i>';
  41. pintuanTopConHtml += '</div>';
  42. pintuanTopConHtml += '</div>';
  43. pintuanTopConHtml += '</template>';
  44. pintuanTopConHtml += '<template v-if="data.style == 2">';
  45. pintuanTopConHtml += '<div class="title-wrap title-wrap-2">';
  46. pintuanTopConHtml += '<div class="title-left">';
  47. pintuanTopConHtml += '<template v-for="(item, index) in list" v-if="item.style == 2">';
  48. pintuanTopConHtml += '<img v-if="item.imageUrl && item.imageUrl.split(\'/\')[0] == \'public\'" :src="imgUrl2" />';
  49. pintuanTopConHtml += '<img v-if="item.imageUrl && item.imageUrl.split(\'/\')[0] != \'public\'" :src="$parent.$parent.changeImgUrl(item.imageUrl)" />';
  50. pintuanTopConHtml += '</template>';
  51. pintuanTopConHtml += '</div>';
  52. pintuanTopConHtml += '<div class="title-right"><span>更多拼团</span><i class="iconfont iconyoujiantou"></i> </div>';
  53. pintuanTopConHtml += '</div>';
  54. pintuanTopConHtml += '</template>';
  55. pintuanTopConHtml += '<template v-if="data.style == 3">';
  56. pintuanTopConHtml += '<div class="title-wrap title-wrap-3">';
  57. pintuanTopConHtml += '<div class="title-left">';
  58. pintuanTopConHtml += '<template v-for="(item, index) in list" v-if="item.style == 3">';
  59. pintuanTopConHtml += '<img v-if="item.imageUrl && item.imageUrl.split(\'/\')[0] == \'public\'" :src="imgUrl3" />';
  60. pintuanTopConHtml += '<img v-if="item.imageUrl && item.imageUrl.split(\'/\')[0] != \'public\'" :src="$parent.$parent.changeImgUrl(item.imageUrl)" />';
  61. pintuanTopConHtml += '</template>';
  62. pintuanTopConHtml += '</div>';
  63. pintuanTopConHtml += '</div>';
  64. pintuanTopConHtml += '</template>';
  65. pintuanTopConHtml += '<template v-if="data.style == 4">';
  66. pintuanTopConHtml += '<div class="goods-head">';
  67. pintuanTopConHtml += '<div class="title-wrap">';
  68. pintuanTopConHtml += '<template v-for="(item, index) in list" v-if="item.style == 4">';
  69. pintuanTopConHtml += '<div class="left-icon" v-if="item.imageUrl && item.imageUrl.split(\'/\')[0] == \'public\'"><img v-bind:src="imgUrl1" /></div>';
  70. pintuanTopConHtml += '<div class="left-icon" v-if="item.imageUrl && item.imageUrl.split(\'/\')[0] != \'public\'"><img v-bind:src="$parent.$parent.changeImgUrl(item.imageUrl)" /></div>';
  71. pintuanTopConHtml += '<span class="name">{{item.title}}</span>';
  72. pintuanTopConHtml += '</template>';
  73. pintuanTopConHtml += '</div>';
  74. pintuanTopConHtml += '<div class="more violet" v-if="data.bgSelect==\'violet\'">';
  75. pintuanTopConHtml += '<span>';
  76. pintuanTopConHtml += '<span style="color: #8662FD;">更多</span>';
  77. pintuanTopConHtml += '<span style="color: #627BFD;">拼团</span>';
  78. pintuanTopConHtml += '</span>';
  79. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" style="color: #627BFD;"></i>';
  80. pintuanTopConHtml += '</div>';
  81. pintuanTopConHtml += '<div class="more red" v-if="data.bgSelect==\'red\'">';
  82. pintuanTopConHtml += '<span>';
  83. pintuanTopConHtml += '<span style="color: #FF7B91;">更多</span>';
  84. pintuanTopConHtml += '<span style="color: #FF5151;">拼团</span>';
  85. pintuanTopConHtml += '</span>';
  86. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" style="color: #FF5151;"></i>';
  87. pintuanTopConHtml += '</div>';
  88. pintuanTopConHtml += '<div class="more blue" v-if="data.bgSelect==\'blue\'">';
  89. pintuanTopConHtml += '<span>';
  90. pintuanTopConHtml += '<span style="color: #12D0AE;">更多</span>';
  91. pintuanTopConHtml += '<span style="color: #0ECFD3;">拼团</span>';
  92. pintuanTopConHtml += '</span>';
  93. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" style="color: #0ECFD3;"></i>';
  94. pintuanTopConHtml += '</div>';
  95. pintuanTopConHtml += '<div class="more yellow" v-if="data.bgSelect==\'yellow\'">';
  96. pintuanTopConHtml += '<span>';
  97. pintuanTopConHtml += '<span style="color: #FEB632;">更多</span>';
  98. pintuanTopConHtml += '<span style="color: #FE6232;">拼团</span>';
  99. pintuanTopConHtml += '</span>';
  100. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" style="color: #FE6232;"></i>';
  101. pintuanTopConHtml += '</div>';
  102. pintuanTopConHtml += '</div>';
  103. pintuanTopConHtml += '</template>';
  104. /* pintuanTopConHtml += '<div class="more ns-red-color" v-if="listMore.title">';
  105. pintuanTopConHtml += '<span v-bind:style="{color: data.moreTextColor?data.moreTextColor:\'rgba(0,0,0,0)\'}">{{listMore.title}}</span>';
  106. pintuanTopConHtml += '<div class="right-icon" v-if="listMore.imageUrl"><img v-bind:src="$parent.$parent.changeImgUrl(listMore.imageUrl)" /></div>';
  107. pintuanTopConHtml += '<i class="iconfont iconyoujiantou" v-else v-bind:style="{color: data.moreTextColor?data.moreTextColor:\'rgba(0,0,0,0)\'}"></i>';
  108. pintuanTopConHtml += '</div>'; */
  109. pintuanTopConHtml +='</div>';
  110. Vue.component("pintuan-top-content", {
  111. data: function () {
  112. return {
  113. data: this.$parent.data,
  114. list: this.$parent.data.list,
  115. listMore: this.$parent.data.listMore,
  116. imgUrl1: "",
  117. imgUrl2: "",
  118. imgUrl3: "",
  119. imgUrl4: ""
  120. }
  121. },
  122. created: function () {
  123. this.imgUrl1 = this.list[0].imageUrl;
  124. this.imgUrl2 = this.list[1].imageUrl;
  125. this.imgUrl3 = this.list[2].imageUrl;
  126. this.imgUrl4 = this.list[3].imageUrl;
  127. if(!this.$parent.data.verify) this.$parent.data.verify = [];
  128. this.$parent.data.verify.push(this.verify);//加载验证方法
  129. },
  130. methods: {
  131. verify : function () {
  132. var res = { code : true, message : "" };
  133. return res;
  134. },
  135. },
  136. template: pintuanTopConHtml
  137. });
  138. /**
  139. * 空的验证组件,后续如果增加业务,则更改组件
  140. */
  141. var pintuanListHtml = '<div class="goods-list-edit layui-form">';
  142. pintuanListHtml += '<div class="layui-form-item ns-icon-radio">';
  143. pintuanListHtml += '<label class="layui-form-label sm">商品来源</label>';
  144. pintuanListHtml += '<div class="layui-input-block">';
  145. pintuanListHtml += '<template v-for="(item, index) in goodsSources" v-bind:k="index">';
  146. pintuanListHtml += '<span :class="[item.value == data.sources ? \'\' : \'layui-hide\']">{{item.text}}</span>';
  147. pintuanListHtml += '</template>';
  148. pintuanListHtml += '<ul class="ns-icon">';
  149. pintuanListHtml += '<li v-for="(item, index) in goodsSources" v-bind:k="index" :class="[item.value == data.sources ? \'ns-text-color ns-border-color ns-bg-color-diaphaneity\' : \'\']" @click="data.sources=item.value">';
  150. pintuanListHtml += '<img v-if="item.value == data.sources" :src="item.selectedSrc" />'
  151. pintuanListHtml += '<img v-else :src="item.src" />'
  152. pintuanListHtml += '</li>';
  153. pintuanListHtml += '</ul>';
  154. /* pintuanListHtml += '<template v-for="(item,index) in goodsSources" v-bind:k="index">';
  155. pintuanListHtml += '<div v-on:click="data.sources=item.value" v-bind:class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : (data.sources==item.value) }"><i class="layui-anim layui-icon">&#xe63f;</i><div>{{item.text}}</div></div>';
  156. pintuanListHtml += '</template>'; */
  157. pintuanListHtml += '</div>';
  158. pintuanListHtml += '</div>';
  159. pintuanListHtml += '<div class="layui-form-item" v-if="data.sources == \'diy\'">';
  160. pintuanListHtml += '<label class="layui-form-label sm">手动选择</label>';
  161. pintuanListHtml += '<div class="layui-input-block">';
  162. pintuanListHtml += '<a href="#" class="ns-input-text selected-style" v-on:click="addGoods">选择<i class="layui-icon layui-icon-right"></i></a>';
  163. pintuanListHtml += '</div>';
  164. pintuanListHtml += '</div>';
  165. /* pintuanListHtml += '<div class="layui-form-item" v-show="data.sources == \'default\'">';
  166. pintuanListHtml += '<label class="layui-form-label sm">商品数量</label>';
  167. pintuanListHtml += '<div class="layui-input-block">';
  168. pintuanListHtml += '<input type="number" class="layui-input goods-account" v-on:keyup="shopNum" v-model="data.goodsCount"/>';
  169. pintuanListHtml += '</div>';
  170. pintuanListHtml += '</div>';
  171. pintuanListHtml += '<div class="layui-form-item" v-show="data.sources == \'default\'">';
  172. pintuanListHtml += '<label class="layui-form-label sm"></label>';
  173. pintuanListHtml += '<div class="layui-input-block">';
  174. pintuanListHtml += '<template v-for="(item,index) in goodsCount" v-bind:k="index">';
  175. pintuanListHtml += '<div v-on:click="data.goodsCount=item" v-bind:class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : (data.goodsCount==item) }"><i class="layui-anim layui-icon">&#xe63f;</i><div>{{item}}</div></div>';
  176. pintuanListHtml += '</template>';
  177. pintuanListHtml += '</div>';
  178. pintuanListHtml += '</div>'; */
  179. pintuanListHtml += '<slide v-bind:data="{ field : \'goodsCount\', label: \'商品数量\', max: 9, min: 1}" v-show="data.sources == \'default\'"></slide>';
  180. // pintuanListHtml += '<p class="hint">商品数量选择 0 时,前台会自动上拉加载更多</p>';
  181. pintuanListHtml += '</div>';
  182. var select_goods_list = []; //配合商品选择器使用
  183. Vue.component("pintuan-list", {
  184. template: pintuanListHtml,
  185. data: function () {
  186. return {
  187. data: this.$parent.data,
  188. goodsSources: [
  189. {
  190. text: "默认",
  191. value: "default",
  192. src: pintuanResourcePath + "/pintuan/img/goods.png",
  193. selectedSrc: pintuanResourcePath + "/pintuan/img/goods_1.png"
  194. },
  195. {
  196. text : "手动选择",
  197. value : "diy",
  198. src: pintuanResourcePath + "/pintuan/img/manual.png",
  199. selectedSrc: pintuanResourcePath + "/pintuan/img/manual_1.png"
  200. }
  201. ],
  202. categoryList: [],
  203. isLoad: false,
  204. isShow: false,
  205. selectIndex: 0,//当前选中的下标
  206. goodsCount: [6, 12, 18, 24, 30],
  207. }
  208. },
  209. created:function() {
  210. if(!this.$parent.data.verify) this.$parent.data.verify = [];
  211. this.$parent.data.verify.push(this.verify);//加载验证方法
  212. },
  213. methods: {
  214. shopNum: function () {
  215. if (this.$parent.data.goodsCount > 50) {
  216. layer.msg("商品数量最多为50");
  217. this.$parent.data.goodsCount = 50;
  218. }
  219. if (this.$parent.data.goodsCount.length > 0 && this.$parent.data.goodsCount < 1) {
  220. layer.msg("商品数量不能小于0");
  221. this.$parent.data.goodsCount = 1;
  222. }
  223. },
  224. verify: function () {
  225. var res = {code: true, message: ""};
  226. if (this.data.goodsCount.length === 0) {
  227. res.code = false;
  228. res.message = "请输入商品数量";
  229. }
  230. if (this.data.goodsCount < 0) {
  231. res.code = false;
  232. res.message = "商品数量不能小于0";
  233. }
  234. if (this.data.goodsCount > 50) {
  235. res.message = "商品数量最多为50";
  236. }
  237. return res;
  238. },
  239. addGoods: function () {
  240. var self = this;
  241. goodsSelect(function (res) {
  242. // if (!res.length) return false;
  243. // self.$parent.data.goodsId = [];
  244. // for (var i = 0; i < res.length; i++) {
  245. // self.$parent.data.goodsId.push(res[i]);
  246. // }
  247. self.$parent.data.goodsId = res;
  248. }, self.$parent.data.goodsId, {mode: "spu", promotion: "pintuan", disabled: 0, post: post});
  249. }
  250. }
  251. });
  252. var pintuanStyleHtml = '<div class="layui-form-item">';
  253. pintuanStyleHtml += '<label class="layui-form-label sm">选择风格</label>';
  254. pintuanStyleHtml += '<div class="layui-input-block">';
  255. // pintuanStyleHtml += '<span>{{data.styleName}}</span>';
  256. pintuanStyleHtml += '<div v-if="data.styleName" class="ns-input-text ns-text-color selected-style" v-on:click="selectGroupbuyStyle">{{data.styleName}} <i class="layui-icon layui-icon-right"></i></div>';
  257. pintuanStyleHtml += '<div v-else class="ns-input-text selected-style" v-on:click="selectGroupbuyStyle">选择 <i class="layui-icon layui-icon-right"></i></div>';
  258. pintuanStyleHtml += '</div>';
  259. pintuanStyleHtml += '</div>';
  260. Vue.component("pintuan-style", {
  261. template: pintuanStyleHtml,
  262. data: function() {
  263. return {
  264. data: this.$parent.data,
  265. }
  266. },
  267. created:function() {
  268. if(!this.$parent.data.verify) this.$parent.data.verify = [];
  269. this.$parent.data.verify.push(this.verify);//加载验证方法
  270. },
  271. methods: {
  272. verify: function () {
  273. var res = { code: true, message: "" };
  274. return res;
  275. },
  276. selectGroupbuyStyle: function() {
  277. var self = this;
  278. layer.open({
  279. type: 1,
  280. title: '风格选择',
  281. area:['930px','630px'],
  282. btn: ['确定', '返回'],
  283. content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .pintuan-list-style").html(),
  284. success: function(layero, index) {
  285. $(".layui-layer-content input[name='style']").val(self.data.style);
  286. $(".layui-layer-content input[name='style_name']").val(self.data.styleName);
  287. $("body").on("click", ".layui-layer-content .style-list-con-pintuan .style-li-pintuan", function () {
  288. $(this).addClass("selected ns-border-color").siblings().removeClass("selected ns-border-color");
  289. $(".layui-layer-content input[name='style']").val($(this).index() + 1);
  290. $(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
  291. });
  292. },
  293. yes: function (index, layero) {
  294. self.data.style = $(".layui-layer-content input[name='style']").val();
  295. self.data.styleName = $(".layui-layer-content input[name='style_name']").val();
  296. layer.closeAll()
  297. }
  298. });
  299. },
  300. }
  301. })
  302. // 图片上传
  303. var pintuanTopHtml = '<ul class="fenxiao-addon-title">';
  304. pintuanTopHtml += '<li>';
  305. pintuanTopHtml += '<template v-if="data.style == 1">';
  306. pintuanTopHtml += '<div class="layui-form-item">';
  307. pintuanTopHtml += '<label class="layui-form-label sm">顶部图片</label>';
  308. pintuanTopHtml += '<template v-for="(item, index) in list" v-if="item.style == data.style">';
  309. pintuanTopHtml += '<div class="layui-input-block ns-img-upload">';
  310. pintuanTopHtml += '<img-sec-upload v-bind:data="{ data : item, text: \'\' }"></img-sec-upload>';
  311. pintuanTopHtml += '</div>';
  312. pintuanTopHtml += '</template>';
  313. pintuanTopHtml += '<div class="ns-word-aux ns-diy-word-aux">建议上传顶部图片大小:710px * 300px</div>';
  314. pintuanTopHtml += '</div>';
  315. pintuanTopHtml += '</template>';
  316. pintuanTopHtml += '<template v-if="data.style == 2">';
  317. pintuanTopHtml += '<div class="layui-form-item">';
  318. pintuanTopHtml += '<label class="layui-form-label sm">左侧图标</label>';
  319. pintuanTopHtml += '<template v-for="(item, index) in list" v-if="item.style == data.style">';
  320. pintuanTopHtml += '<div class="layui-input-block ns-img-upload">';
  321. pintuanTopHtml += '<img-sec-upload v-bind:data="{ data : item, text: \'\' }"></img-sec-upload>';
  322. pintuanTopHtml += '</div>';
  323. pintuanTopHtml += '</template>';
  324. pintuanTopHtml += '<div class="ns-word-aux ns-diy-word-aux">建议上传图片大小:131px * 37px</div>';
  325. pintuanTopHtml += '</div>';
  326. pintuanTopHtml += '</template>';
  327. pintuanTopHtml += '<template v-if="data.style == 3">';
  328. pintuanTopHtml += '<div class="layui-form-item">';
  329. pintuanTopHtml += '<label class="layui-form-label sm">顶部图标</label>';
  330. pintuanTopHtml += '<template v-for="(item, index) in list" v-if="item.style == data.style">';
  331. pintuanTopHtml += '<div class="layui-input-block ns-img-upload">';
  332. pintuanTopHtml += '<img-sec-upload v-bind:data="{ data : item, text: \'\' }"></img-sec-upload>';
  333. pintuanTopHtml += '</div>';
  334. pintuanTopHtml += '</template>';
  335. pintuanTopHtml += '<div class="ns-word-aux ns-diy-word-aux">建议上传图片大小:174px * 37px</div>';
  336. pintuanTopHtml += '</div>';
  337. pintuanTopHtml += '</template>';
  338. pintuanTopHtml += '<template v-if="data.style == 4">';
  339. pintuanTopHtml += '<div class="layui-form-item">';
  340. pintuanTopHtml += '<label class="layui-form-label sm">左侧图标</label>';
  341. pintuanTopHtml += '<template v-for="(item, index) in list" v-if="item.style == data.style">';
  342. pintuanTopHtml += '<div class="layui-input-block ns-img-upload">';
  343. pintuanTopHtml += '<img-sec-upload v-bind:data="{ data : item, text: \'\' }"></img-sec-upload>';
  344. pintuanTopHtml += '</div>';
  345. pintuanTopHtml += '</template>';
  346. pintuanTopHtml += '<div class="ns-word-aux ns-diy-word-aux">建议上传图标大小:125px * 30px</div>';
  347. pintuanTopHtml += '</div>';
  348. pintuanTopHtml += '<div class="content-block">';
  349. pintuanTopHtml += '<div class="layui-form-item">';
  350. pintuanTopHtml += '<label class="layui-form-label sm">标题内容</label>';
  351. pintuanTopHtml += '<template v-for="(item, index) in list" v-if="item.style == data.style">';
  352. pintuanTopHtml += '<div class="layui-input-block">';
  353. pintuanTopHtml += '<input type="text" name=\'title\' v-model="item.title" class="layui-input" />';
  354. pintuanTopHtml += '</div>';
  355. pintuanTopHtml += '</template>';
  356. pintuanTopHtml += '</div>';
  357. pintuanTopHtml += '</div>';
  358. pintuanTopHtml += '</template>';
  359. // pintuanTopHtml += '<color v-bind:data="{ field : \'titleTextColor\', label : \'标题颜色\', defaultcolor: \'#000\' }"></color>';
  360. pintuanTopHtml += '</li>';
  361. /* pintuanTopHtml += '<li>';
  362. pintuanTopHtml += '<div class="content-block">';
  363. pintuanTopHtml += '<div class="layui-form-item">';
  364. pintuanTopHtml += '<label class="layui-form-label sm">文本内容</label>';
  365. pintuanTopHtml += '<div class="layui-input-block">';
  366. pintuanTopHtml += '<input type="text" name=\'title\' v-model="listMore.title" class="layui-input" />';
  367. pintuanTopHtml += '</div>';
  368. pintuanTopHtml += '</div>';
  369. pintuanTopHtml += '<color v-bind:data="{ field : \'moreTextColor\', defaultcolor: \'#858585\' }"></color>';
  370. pintuanTopHtml += '</div>';
  371. pintuanTopHtml += '</li>'; */
  372. pintuanTopHtml += '</ul>';
  373. Vue.component("pintuan-top-list",{
  374. template : pintuanTopHtml,
  375. data : function(){
  376. return {
  377. data : this.$parent.data,
  378. list : this.$parent.data.list,
  379. listMore: this.$parent.data.listMore
  380. };
  381. },
  382. created : function(){
  383. if(!this.$parent.data.verify) this.$parent.data.verify = [];
  384. this.$parent.data.verify.push(this.verify);//加载验证方法
  385. },
  386. watch : {
  387. },
  388. methods : {
  389. verify:function () {
  390. var res = { code : true, message : "" };
  391. var _self = this;
  392. $(".draggable-element[data-index='" + this.data.index + "'] .graphic-navigation .graphic-nav-list>ul>li").each(function(index){
  393. if(_self.selectedTemplate == "imageNavigation"){
  394. $(this).find("input[name='title']").removeAttr("style");//清空输入框的样式
  395. //检测是否有未上传的图片
  396. if(_self.list[index].imageUrl == ""){
  397. res.code = false;
  398. res.message = "请选择一张图片";
  399. $(this).find(".error-msg").text("请选择一张图片").show();
  400. return res;
  401. }else{
  402. $(this).find(".error-msg").text("").hide();
  403. }
  404. }else{
  405. if(_self.list[index].title == ""){
  406. res.code = false;
  407. res.message = "请输入标题";
  408. $(this).find("input[name='title']").attr("style","border-color:red !important;").focus();
  409. $(this).find(".error-msg").text("请输入标题").show();
  410. return res;
  411. }else{
  412. $(this).find("input[name='title']").removeAttr("style");
  413. $(this).find(".error-msg").text("").hide();
  414. }
  415. }
  416. });
  417. return res;
  418. }
  419. }
  420. });
  421. // 背景颜色可选
  422. var pintuanColorHtml = '<div class="layui-form-item ns-bg-select">';
  423. pintuanColorHtml += '<label class="layui-form-label sm">背景颜色</label>';
  424. pintuanColorHtml += '<div class="layui-input-block">';
  425. pintuanColorHtml += '<ul class="ns-bg-select-ul">';
  426. pintuanColorHtml += '<li v-for="(item, index) in colorList" v-bind:k="index" :class="[item.className == data.bgSelect ? \'ns-text-color ns-border-color\' : \'\']" @click="data.bgSelect = item.className">';
  427. pintuanColorHtml += '<div :style="{background: item.color}"></div>';
  428. pintuanColorHtml += '</li>';
  429. pintuanColorHtml += '</ul>';
  430. pintuanColorHtml += '</div>';
  431. pintuanColorHtml += '</div>';
  432. Vue.component("pintuan-color", {
  433. template: pintuanColorHtml,
  434. data: function () {
  435. return {
  436. data: this.$parent.data,
  437. colorList: [
  438. {name: "红", className: "red", color: "#FFD7D7"},
  439. {name: "蓝", className: "blue", color: "#D7FAFF"},
  440. {name: "黄", className: "yellow", color: "#FFF4E0"},
  441. {name: "紫", className: "violet", color: "#F9E5FF"}
  442. ]
  443. };
  444. },
  445. created: function () {
  446. if(!this.$parent.data.verify) this.$parent.data.verify = [];
  447. this.$parent.data.verify.push(this.verify);//加载验证方法
  448. },
  449. methods: {
  450. verify : function () {
  451. var res = { code : true, message : "" };
  452. return res;
  453. }
  454. },
  455. });
  456. // 切换方式
  457. var changeType = '<div class="layui-form-item ns-icon-radio">';
  458. changeType += '<label class="layui-form-label sm">滑动方式</label>';
  459. changeType += '<div class="layui-input-block align-right">';
  460. changeType += '<template v-for="(item,index) in changeTypeList" v-bind:k="index">';
  461. changeType += '<div v-on:click="data.changeType=item.value" v-bind:class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : (data.changeType==item.value) }"><i class="layui-anim layui-icon">&#xe63f;</i><div>{{item.name}}</div></div>';
  462. changeType += '</template>';
  463. changeType += '</div>';
  464. /* changeType += '<label class="layui-form-label sm">滑动方式</label>';
  465. changeType += '<div class="layui-input-block">';
  466. changeType += '<template v-for="(item, index) in changeTypeList" v-bind:k="index">';
  467. changeType += '<span :class="[item.value == data.changeType ? \'\' : \'layui-hide\']">{{item.name}}</span>';
  468. changeType += '</template>';
  469. changeType += '<ul class="ns-icon">';
  470. changeType += '<li v-for="(item, index) in changeTypeList" v-bind:k="index" :class="[item.value == data.changeType ? \'ns-text-color ns-border-color\' : \'\']" @click="data.changeType = item.value">';
  471. changeType += '<img v-if="item.value == data.changeType" :src="item.selectedSrc" />'
  472. changeType += '<img v-else :src="item.src" />'
  473. changeType += '</li>';
  474. changeType += '</ul>';
  475. changeType += '</div>'; */
  476. changeType += '</div>';
  477. Vue.component("change-type", {
  478. template: changeType,
  479. data: function () {
  480. return {
  481. data: this.$parent.data,
  482. changeTypeList: [
  483. {name: "平移滑动", value: 1, src: pintuanResourcePath + "/pintuan/img/manual.png", selectedSrc: pintuanResourcePath + "/pintuan/img/manual_1.png"},
  484. {name: "切屏滑动", value: 2, src: pintuanResourcePath + "/pintuan/img/manual.png", selectedSrc: pintuanResourcePath + "/pintuan/img/manual_1.png"},
  485. ]
  486. };
  487. },
  488. created: function () {
  489. if(!this.$parent.data.verify) this.$parent.data.verify = [];
  490. this.$parent.data.verify.push(this.verify);//加载验证方法
  491. },
  492. methods: {
  493. verify : function () {
  494. var res = { code : true, message : "" };
  495. return res;
  496. }
  497. },
  498. });