app-diy-page.vue 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873
  1. <template>
  2. <view class="app-diy-page" :style="shareFixed?'padding-top:160rpx':''" v-bind:class="mp_link_top ? 'mp_link_top' : ''">
  3. <view class="nav-bar dir-left-nowrap" v-bind:class="mp_link_top ? 'mp_link_top' : ''" v-if="newData.show_navs == 1">
  4. <block v-for="(nav, index) in newData.navs" :key="index">
  5. <view class="nav-bar-one cross-center box-grow-0"
  6. v-bind:class="nav_active === index ? 'active ' + theme + '-m-text ' + theme : ''"
  7. v-on:click='changeNav(index)'
  8. >
  9. {{nav.name}}
  10. </view>
  11. </block>
  12. </view>
  13. <view class="diy-template">
  14. <block v-for="(item, index) in newData.navs" :key="index">
  15. <template v-if="nav_active === index">
  16. <block v-for="(temp, temp_index) in item.template.data" :key="temp_index" v-if="temp">
  17. <template v-if="temp.id === 'background'">
  18. <view
  19. class="app-diy-bg"
  20. :style="[
  21. {'background-color':`${temp.data.backgroundColor}`,
  22. 'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
  23. 'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
  24. 'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
  25. 'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
  26. ]"
  27. ></view>
  28. </template>
  29. <!--搜索-->
  30. <template v-else-if="temp.id === 'search'">
  31. <app-search-for v-bind:value="temp.data"></app-search-for>
  32. </template>
  33. <!--轮播图-->
  34. <template v-else-if="temp.id === 'banner'">
  35. <template v-if="temp.data.banners.length > 0">
  36. <view :style="{height: temp.data.height + 'rpx'}" v-if="temp.data.effect == 1 || !temp.data.effect">
  37. <app-swiper
  38. :list="temp.data.banners"
  39. :autoplay="temp.data.autoplay === 0 ? true : false"
  40. name="pic_url"
  41. :effect3d="temp.data.style === 2 ? true : false"
  42. :height="temp.data.height"
  43. :effect3dPreviousMargin="50"
  44. :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
  45. :interval="temp.data.interval ? temp.data.interval : 3000"
  46. :duration="temp.data.duration ? temp.data.duration : 500"
  47. :mode="temp.data.mode"
  48. ></app-swiper>
  49. </view>
  50. <view :style="{height: temp.data.height + 'rpx'}" v-if="temp.data.effect == 2">
  51. <u-swiper
  52. :list="temp.data.banners"
  53. name="pic_url"
  54. :height="temp.data.height"
  55. :interval="temp.data.interval ? temp.data.interval : 3000"
  56. :duration="temp.data.duration ? temp.data.duration : 500"
  57. :mode="temp.data.mode"
  58. :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
  59. :autoplay="temp.data.autoplay === 0 ? true : false"
  60. >
  61. </u-swiper>
  62. </view>
  63. </template>
  64. </template>
  65. <!-- 普通商品列表 -->
  66. <template v-else-if="temp.id === 'goods'">
  67. <view
  68. :style="[
  69. {'background-color':`${temp.data.backgroundColor}`,
  70. 'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
  71. 'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
  72. 'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
  73. 'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
  74. ]">
  75. <template v-if="temp.data.catPosition === 'top'">
  76. <u-ordinary-list
  77. v-bind:theme="theme"
  78. v-bind:show-cat="temp.data.showCat"
  79. v-bind:cat-list="temp.data.catList"
  80. v-bind:cat-style="temp.data.catStyle"
  81. v-bind:list="temp.data.list"
  82. v-bind:list-style="temp.data.listStyle"
  83. v-bind:goods-style="temp.data.goodsStyle"
  84. v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
  85. v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
  86. v-bind:show-goods-tag="temp.data.showGoodsTag"
  87. v-bind:show-goods-name="temp.data.showGoodsName"
  88. v-bind:show-goods-price="temp.data.showGoodsPrice"
  89. v-bind:show-buy-btn="temp.data.showBuyBtn"
  90. v-bind:buy-btn="temp.data.buyBtn"
  91. v-bind:buy-btn-style="temp.data.buyBtnStyle"
  92. v-bind:buy-btn-text="temp.data.buyBtnText"
  93. v-bind:button-color="temp.data.buttonColor"
  94. v-bind:text-style="temp.data.textStyle"
  95. v-bind:is-under-line-price="temp.data.isUnderLinePrice"
  96. v-bind:fill="temp.data.fill"
  97. v-bind:isDIY="true"
  98. v-bind:is-rank="true"
  99. v-on:buyProduct="buyProduct"
  100. :theme-object="themeObject"
  101. >
  102. </u-ordinary-list>
  103. </template>
  104. <template v-else>
  105. <app-recommended-product-list
  106. v-bind:show-cat="temp.data.showCat"
  107. v-bind:show-buy-btn="temp.data.showBuyBtn"
  108. v-bind:cat-style="temp.data.catStyle"
  109. v-bind:cat-list="temp.data.catList"
  110. v-bind:list="temp.data.list" :list-style="temp.data.listStyle"
  111. v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
  112. v-bind:fill="temp.data.fill" :goods-style="temp.data.goodsStyle"
  113. v-bind:show-goods-name="temp.data.showGoodsName"
  114. v-bind:show-goods-price="temp.data.showGoodsPrice"
  115. v-bind:buy-btn="temp.data.buyBtn" :sign="temp.id"
  116. v-bind:buy-btn-style="temp.data.buyBtnStyle"
  117. v-bind:buy-btn-text="temp.data.buyBtnText"
  118. v-bind:show-goods-tag="temp.data.showGoodsTag"
  119. v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
  120. v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
  121. v-bind:button-color="temp.data.buttonColor"
  122. v-bind:is-under-line-price="temp.data.isUnderLinePrice"
  123. v-bind:theme="theme"
  124. v-bind:cat-position="temp.data.catPosition"
  125. ></app-recommended-product-list>
  126. </template>
  127. </view>
  128. </template>
  129. <!-- 插件商品列表 -->
  130. <template v-else-if="temp.id === 'pintuan'
  131. || temp.id === 'miaosha'
  132. || temp.id === 'advance'
  133. || temp.id === 'booking'
  134. || temp.id === 'bargain'
  135. || temp.id === 'pick'
  136. || temp.id === 'lottery'
  137. || temp.id === 'integral-mall'
  138. || temp.id === 'gift'
  139. || temp.id === 'exchange'
  140. || temp.id === 'composition'
  141. || temp.id === 'flash-sale'
  142. || temp.id === 'wholesale'">
  143. <view :style="[
  144. {'background-color':`${temp.data.backgroundColor}`,
  145. 'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
  146. 'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
  147. 'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
  148. 'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
  149. >
  150. <template v-if="temp.id === 'integral-mall' && temp.data.showCoupon">
  151. <app-exclusive-coupon
  152. v-bind:none-color="true"
  153. v-bind:list="temp.data.coupon_list"
  154. v-bind:sign="temp.id"
  155. v-bind:text-color="temp.data.couponColor"
  156. v-bind:show-top="false"
  157. v-bind:coupon_req="coupon_req"
  158. v-bind:unclaimed-bg="temp.data.couponPicUrl"
  159. ></app-exclusive-coupon>
  160. </template>
  161. <app-diy-goods-list
  162. v-bind:show-buy-btn="temp.data.showBuyBtn"
  163. v-bind:list="temp.data.list"
  164. v-bind:list-style="temp.data.listStyle"
  165. v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
  166. v-bind:fill="temp.data.fill"
  167. v-bind:goods-style="temp.data.goodsStyle"
  168. v-bind:show-goods-name="temp.data.showGoodsName"
  169. v-bind:text-style="temp.data.textStyle"
  170. v-bind:sign="temp.id"
  171. v-bind:button-color="temp.data.buttonColor"
  172. v-bind:buy-btn-style="temp.data.buyBtnStyle"
  173. v-bind:buy-btn-text="temp.data.buyBtnText"
  174. v-bind:show-goods-tag="temp.data.showGoodsTag"
  175. v-bind:page-hide="pageHide"
  176. v-bind:show-progress-bar="temp.data.showProgressBar"
  177. v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
  178. v-bind:is-under-line-price="temp.data.isUnderLinePrice"
  179. v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
  180. v-bind:theme="theme"
  181. ></app-diy-goods-list>
  182. </view>
  183. </template>
  184. <template v-else-if="temp.id === 'rubik'">
  185. <view style="position: relative">
  186. <app-image-ad
  187. v-bind:image-style="temp.data.style"
  188. v-bind:list="temp.data.list"
  189. v-bind:height="temp.data.height"
  190. ></app-image-ad>
  191. <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
  192. <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
  193. </block>
  194. </view>
  195. </template>
  196. <template v-else-if="temp.id === 'notice'">
  197. <u-announcement
  198. v-bind:bgColor="temp.data.background"
  199. v-bind:btn-color="temp.data.btnColor"
  200. v-bind:btn-height="temp.data.btnHeight"
  201. v-bind:btn-radius="`${temp.data.btnRadius}rpx`"
  202. v-bind:btn-text="temp.data.btnText"
  203. v-bind:btn-text-color="temp.data.btnTextColor"
  204. v-bind:btn-width="temp.data.btnWidth"
  205. v-bind:content="temp.data.content"
  206. v-bind:header-url="temp.data.headerUrl"
  207. v-bind:icon="temp.data.icon"
  208. v-bind:name="temp.data.name"
  209. v-bind:textColor="temp.data.textColor"
  210. ></u-announcement>
  211. </template>
  212. <template v-else-if="temp.id === 'nav'">
  213. <!-- 新数据 -->
  214. <template v-if="temp.data.modeType">
  215. <app-navigation-two-icon
  216. v-bind:mode-type="temp.data.modeType"
  217. v-bind:background="temp.data.backgroundColor"
  218. v-bind:color="temp.data.color"
  219. v-bind:navs="temp.data.navs"
  220. v-bind:columns="temp.data.columns"
  221. v-bind:temp-index="temp_index"
  222. v-bind:nav-type="temp.data.navType"
  223. v-bind:alone-num="temp.data.aloneNum"
  224. v-bind:line-num="temp.data.lineNum"
  225. v-bind:swiper-type="temp.data.swiperType"
  226. v-bind:swiper-color="temp.data.swiperColor"
  227. v-bind:swiper-no-color="temp.data.swiperNoColor"
  228. ></app-navigation-two-icon>
  229. </template>
  230. <!-- 老数据 -->
  231. <template v-else>
  232. <view
  233. :style="[
  234. {'background-color':`${temp.data.backgroundColor}`,
  235. 'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
  236. 'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
  237. 'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
  238. 'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
  239. >
  240. <app-navigation-icon
  241. v-bind:background="''"
  242. v-bind:color="temp.data.color"
  243. v-bind:rows="temp.data.rows"
  244. v-bind:columns="temp.data.columns"
  245. v-bind:scroll="temp.data.scroll"
  246. v-bind:navs="temp.data.navs"
  247. ></app-navigation-icon>
  248. </view>
  249. </template>
  250. </template>
  251. <template v-else-if="temp.id === 'video'">
  252. <app-video :pic-url="temp.data.pic_url" :url="temp.data.url"></app-video>
  253. </template>
  254. <template v-else-if="temp.id === 'link'">
  255. <app-associated-link
  256. v-bind:arrows-switch="temp.data.arrowsSwitch"
  257. v-bind:background="temp.data.background"
  258. v-bind:color="temp.data.color"
  259. v-bind:position="temp.data.position"
  260. v-bind:style-color="temp.data.styleColor"
  261. v-bind:link="Object.assign({}, temp.data.link)"
  262. v-bind:styleNum="temp.data.style"
  263. v-bind:pic-switch="temp.data.picSwitch"
  264. v-bind:pic-url="temp.data.picUrl"
  265. v-bind:font-size="temp.data.fontSize"
  266. v-bind:title="temp.data.title"
  267. ></app-associated-link>
  268. </template>
  269. <template v-else-if="temp.id === 'topic'">
  270. <template v-if="temp.data.style === 'normal'">
  271. <app-special-topic
  272. v-bind:count="temp.data.count"
  273. v-bind:icon="temp.data.icon"
  274. v-bind:logo_1="temp.data.logo_1"
  275. v-bind:logo_2="temp.data.logo_2"
  276. v-bind:topic_list="temp.data.topic_list"
  277. ></app-special-topic>
  278. </template>
  279. <template v-else-if="temp.data.style === 'list'">
  280. <app-special-topic-list
  281. v-bind:cat-show="temp.data.cat_show"
  282. v-bind:list="temp.data.list"
  283. v-bind:theme="theme"
  284. v-bind:topic-list="temp.data.topic_list"
  285. ></app-special-topic-list>
  286. </template>
  287. </template>
  288. <template v-else-if="temp.id === 'store'">
  289. <app-shop
  290. v-bind:list="temp.data.list"
  291. v-bind:nav-pic-url="temp.data.navPicUrl"
  292. v-bind:score-pic-url="temp.data.scorePicUrl"
  293. v-bind:show-name="temp.data.showName"
  294. v-bind:show-score="temp.data.showScore"
  295. v-bind:show-tel="temp.data.showTel"
  296. v-bind:scrollTop="scrollTop"
  297. ></app-shop>
  298. </template>
  299. <template v-else-if="temp.id === 'copyright'">
  300. <app-copyright
  301. v-bind:background-color="temp.data.backgroundColor"
  302. v-bind:text="temp.data.text"
  303. v-bind:pic-url="temp.data.picUrl"
  304. v-bind:link="temp.data.link"
  305. ></app-copyright>
  306. </template>
  307. <template v-else-if="temp.id === 'user-info'">
  308. <app-user-center
  309. v-bind:top-pic-url="temp.data.backgroundPicUrl"
  310. v-bind:member-pic-url="userCenter.member_pic_url"
  311. v-bind:top-style="temp.data.style"
  312. ></app-user-center>
  313. </template>
  314. <template v-else-if="temp.id === 'user-order'">
  315. <app-my-order
  316. v-bind:order_bar="temp.data.navs"
  317. v-bind:background-color="temp.data.backgroundColor"
  318. v-bind:theme="theme"
  319. ></app-my-order>
  320. </template>
  321. <!-- 优惠券 -->
  322. <template v-else-if="temp.id === 'coupon'">
  323. <app-exclusive-coupon-two
  324. background="#FFFFFF"
  325. v-bind:list="temp.data.coupon_list"
  326. v-bind:receive-bg="temp.data.receiveBg"
  327. v-bind:text-color="temp.data.textColor"
  328. v-bind:unclaimed-bg="temp.data.unclaimedBg"
  329. v-bind:coupon_req="coupon_req"
  330. v-bind:coupon-bg="temp.data.couponBg ? temp.data.couponBg : `#D9BC8B`"
  331. v-bind:coupon-bg-type="temp.data.couponBgType"
  332. v-bind:add-type="temp.data.addType"
  333. v-bind:page_id="page_id"
  334. v-bind:template_id="item.template_id"
  335. v-bind:d-index="[nav_active,temp_index]"
  336. v-bind:m-index="dIndex"
  337. v-bind:d-type="dType"
  338. ></app-exclusive-coupon-two>
  339. </template>
  340. <template v-else-if="temp.id === 'timer'">
  341. <app-diy-timer
  342. v-bind:pic-url="temp.data.picUrl"
  343. v-bind:start-date-time="temp.data.startDateTime"
  344. v-bind:end-date-time="temp.data.endDateTime"
  345. v-bind:page-hide="pageHide"
  346. v-bind:bg-pic-url="temp.data.bgPicUrl"
  347. v-bind:link="temp.data.link"
  348. ></app-diy-timer>
  349. </template>
  350. <template v-else-if="temp.id === 'mch'">
  351. <view :style="[
  352. {'background-color':`${temp.data.backgroundColor}`,
  353. 'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
  354. 'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
  355. 'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
  356. 'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
  357. >
  358. <app-goods-shop
  359. v-bind:card-style="temp.data.cardStyle"
  360. v-bind:background-color="temp.data.backgroundColor"
  361. type="diy"
  362. v-bind:theme="theme"
  363. v-bind:mch_list="temp.data.list"
  364. v-bind:coupon_req="coupon_req"
  365. v-bind:is_required="is_required"
  366. v-bind:show-goods="temp.data.showGoods"
  367. ></app-goods-shop>
  368. </view>
  369. </template>
  370. <template v-else-if="temp.id === 'empty'">
  371. <app-empty
  372. v-bind:height="temp.data.height"
  373. v-bind:background-color="temp.data.background"
  374. ></app-empty>
  375. </template>
  376. <template v-else-if="temp.id === 'ad'">
  377. <app-ad
  378. v-bind:unit-id="temp.data.id"
  379. v-bind:type="temp.data.type"
  380. v-bind:coupon-url="coupon_url"
  381. v-bind:video-url="temp.data.video_url"
  382. v-bind:pic-url="temp.data.pic_url"
  383. v-bind:coupon-params="item | getObje"
  384. ></app-ad>
  385. </template>
  386. <template v-else-if="temp.id === 'modal'">
  387. <app-popup-ad
  388. v-bind:opened="temp.data.opened"
  389. v-bind:times="temp.data.times"
  390. v-bind:list="temp.data.list"
  391. v-bind:multiple="true"
  392. v-bind:is_storage="is_storage"
  393. v-bind:mark="homePages.id + '-' + homePages.navs[nav_active].id + '-' + temp_index"
  394. ></app-popup-ad>
  395. </template>
  396. <template v-else-if="temp.id === 'quick-nav' && temp.data.navSwitch == 1">
  397. <app-quick-navigation
  398. v-bind:value="temp.data"
  399. v-bind:use-mall-config="temp.data.useMallConfig"
  400. ></app-quick-navigation>
  401. </template>
  402. <!-- #ifdef MP-WEIXIN -->
  403. <template v-else-if="temp.id === 'mp-link'">
  404. <view v-bind:class="temp.data.position === 'top' ? `mp-link-top` : ``">
  405. <official-account
  406. v-on:load="mpLink(temp.data.position)"
  407. v-on:error="mpLinkError"
  408. ></official-account>
  409. </view>
  410. </template>
  411. <!-- #endif -->
  412. <!-- #ifndef MP-TOUTIAO -->
  413. <template v-else-if="temp.id === 'map'">
  414. <app-map
  415. v-bind:background-pic-url="temp.data.backgroundPicUrl"
  416. v-bind:height="temp.data.height"
  417. v-bind:latitude="temp.data.latitude"
  418. v-bind:longitude="temp.data.longitude"
  419. v-bind:margin-top="temp.data.marginTop"
  420. v-bind:margin-top-color="temp.data.marginTopColor"
  421. v-bind:padding-x="temp.data.paddingX"
  422. v-bind:padding-y="temp.data.paddingY"
  423. ></app-map>
  424. </template>
  425. <!-- #endif -->
  426. <template v-else-if="temp.id === 'check-in'">
  427. <app-check-in
  428. v-bind:background-pic-url="temp.data.backgroundPicUrl"
  429. v-bind:hotspot="temp.data.hotspot"
  430. v-bind:show-text="temp.data.showText"
  431. v-bind:text-color="temp.data.textColor"
  432. v-bind:text-position="temp.data.textPosition"
  433. ></app-check-in>
  434. </template>
  435. <template v-else-if="temp.id === 'image-text'">
  436. <view style="padding: 0 24rpx;">
  437. <app-rich v-bind:content='temp.data.content'></app-rich>
  438. </view>
  439. </template>
  440. <template v-else-if="temp.id === 'form'">
  441. <app-diy-form
  442. v-bind:title="temp.name"
  443. v-bind:list="temp.data.formDialog"
  444. v-bind:item-padding-x="temp.data.inputPadding"
  445. v-bind:item-margin-y="temp.data.marginBottom"
  446. v-bind:item-height="temp.data.height"
  447. v-bind:show-item-border="false"
  448. v-bind:label-position="transLabelPosition(temp.data.style)"
  449. v-bind:label-color="temp.data.inputLabel"
  450. label-text-align="left"
  451. v-bind:show-input-border="true"
  452. v-bind:input-background="temp.data.inputBackground"
  453. v-bind:input-border-color="temp.data.inputBorder"
  454. v-bind:input-text-color="temp.data.inputText"
  455. v-bind:input-placeholder-color="temp.data.inputTip"
  456. v-bind:input-radius="temp.data.radius"
  457. v-bind:show-submit="true"
  458. v-bind:submit-url="diyFormSubmitUrl"
  459. v-bind:submit-btn-text="temp.data.borderContent"
  460. v-bind:submit-btn-height="temp.data.buttonHeight"
  461. v-bind:submit-btn-padding="temp.data.buttonPadding"
  462. v-bind:submit-btn-margin="temp.data.buttonMargin"
  463. v-bind:submit-btn-radius="temp.data.buttonRadius"
  464. v-bind:submit-btn-background="temp.data.borderBackground"
  465. v-bind:submit-btn-border-color="temp.data.borderBorder"
  466. v-bind:submit-btn-text-color="temp.data.borderText"
  467. v-bind:background-color="temp.data.backgroundColor"
  468. v-bind:background-image="temp.data.backgroundPicUrl"
  469. v-bind:background-width="temp.data.backgroundWidth"
  470. v-bind:background-height="temp.data.backgroundHeight"
  471. v-bind:background-position="transLabelBackgroundPosition(temp.data.position)"
  472. v-bind:background-repeat="transLabelBackgroundRepeat(temp.data.mode)"
  473. v-bind:margin-top="temp.data.marginTop"
  474. v-bind:margin-color="temp.data.marginColor"
  475. v-bind:padding-top="temp.data.padding"
  476. v-bind:padding-bottom="temp.data.padding"
  477. v-bind:select-box-color="temp.data.selectBoxColor"
  478. ></app-diy-form>
  479. </template>
  480. <!--超级会员卡组件-->
  481. <template v-else-if="temp.id === 'vip-card'">
  482. <app-vip-card
  483. v-bind:value="temp.data" top="0"
  484. v-bind:background="temp.data.background"
  485. ></app-vip-card>
  486. </template>
  487. <!--直播组件-->
  488. <!-- #ifdef MP-WEIXIN -->
  489. <template v-else-if="temp.id === 'live'">
  490. <app-live v-bind:value="temp.data"></app-live>
  491. </template>
  492. <!-- #endif -->
  493. <template v-else-if="temp.id === 'module' && is_module">
  494. <app-module
  495. v-bind:tab-type="temp.data.tabType"
  496. v-bind:tab-color="temp.data.tabColor"
  497. v-bind:text-color="temp.data.textColor"
  498. v-bind:tab-background="temp.data.tabBackground"
  499. v-bind:list="temp.data.list"
  500. v-bind:d-index="[index, temp_index]"
  501. v-bind:theme="theme"
  502. v-bind:page-hide="pageHide"
  503. v-bind:home-pages="homePages"
  504. v-bind:is_storage="is_storage"
  505. v-bind:page_id="page_id"
  506. v-bind:is_required="is_required"
  507. v-bind:coupon_req="coupon_req"
  508. @buyProduct="buyProduct"
  509. ></app-module>
  510. </template>
  511. </block>
  512. </template>
  513. </block>
  514. </view>
  515. </view>
  516. </template>
  517. <script>
  518. import {mapState} from 'vuex';
  519. import appSearchFor from '../../page-component/app-search-for/app-search-for.vue';
  520. import appSwiper from '../../page-component/app-swiper/app-swiper.vue';
  521. import uSwiper from '../../page-component/app-swiper/swiper.vue';
  522. import uAnnouncement from '../../page-component/u-announcement/u-announcement.vue';
  523. import appNavigationIcon from '../../page-component/app-navigation-icon/app-navigation-icon.vue';
  524. import appNavigationTwoIcon from '../../page-component/app-navigation-icon/app-navigation-two-icon.vue';
  525. import appVideo from '../../page-component/app-video/app-video.vue';
  526. import appAssociatedLink from '../../page-component/app-associated-link/app-associated-link.vue';
  527. import appSpecialTopic from '../../page-component/app-special-topic/app-special-topic-normal.vue';
  528. import appSpecialTopicList from '../../page-component/app-special-topic/app-special-topic-list.vue';
  529. import appImageAd from '../../page-component/app-image-ad/app-image-ad.vue';
  530. import appHotspot from '../../basic-component/app-hotspot/app-hotspot.vue';
  531. import appShop from '../../page-component/app-shop/app-shop.vue';
  532. import appCopyright from '../../page-component/app-copyright/app-copyright.vue';
  533. import appUserCenter from '../../page-component/app-user-center-top/app-user-center-top.vue';
  534. import appMyOrder from '../../page-component/app-my-order/app-my-order.vue';
  535. import appRecommendedProductList from '../../page-component/app-recommended-product/app-recommended-product-list.vue';
  536. import appExclusiveCoupon from '../../page-component/app-exclusive-coupon/app-exclusive-coupon.vue';
  537. import appExclusiveCouponTwo from '../../page-component/app-exclusive-coupon/app-exclusive-coupon-two.vue';
  538. import appDiyTimer from '../../page-component/app-diy-timer/app-diy-timer.vue';
  539. import appGoodsShop from '../../page-component/app-good-shop-recommendation/app-good-shop-recommendation.vue';
  540. import appEmpty from '../../basic-component/app-empty/app-empty.vue';
  541. import appPopupAd from '../../page-component/app-popup-ad/app-popup-ad.vue';
  542. import appQuickNavigation from '../../page-component/app-quick-navigation/app-quick-navigation.vue';
  543. import appCheckIn from '../../page-component/app-check-in/app-check-in.vue';
  544. import appRich from '../../basic-component/app-rich/parse.vue';
  545. import appReservation from "../../page-component/app-reservation/app-reservation.vue";
  546. import appSpike from "../../page-component/app-spike/app-spike.vue";
  547. import appDiyGoodsList from "../../page-component/app-diy-goods-list/app-diy-goods-list.vue";
  548. import appDiyForm from "../../page-component/app-diy-form/app-diy-form.vue";
  549. import appVipCard from "../../page-component/app-vip-card/app-vip-card.vue";
  550. import appAd from "../../page-component/app-ad/app-ad.vue";
  551. import appModule from "../../page-component/index/app-module.vue";
  552. import uOrdinaryList from '../u-goods-list/u-ordinary-list.vue';
  553. // #ifdef MP-WEIXIN
  554. import appLive from "../../page-component/app-live/app-live.vue";
  555. // #endif
  556. // #ifndef MP-TOUTIAO
  557. import appMap from "../../page-component/app-map/app-map.vue";
  558. // #endif
  559. export default {
  560. name: "app-diy-page",
  561. components: {
  562. 'app-search-for': appSearchFor,
  563. 'app-swiper': appSwiper,
  564. uAnnouncement,
  565. 'app-navigation-icon': appNavigationIcon,
  566. 'app-navigation-two-icon': appNavigationTwoIcon,
  567. 'app-video': appVideo,
  568. 'app-associated-link': appAssociatedLink,
  569. 'app-special-topic': appSpecialTopic,
  570. 'app-special-topic-list': appSpecialTopicList,
  571. 'app-image-ad': appImageAd,
  572. 'app-hotspot': appHotspot,
  573. 'app-shop': appShop,
  574. 'app-copyright': appCopyright,
  575. 'app-user-center': appUserCenter,
  576. 'app-my-order': appMyOrder,
  577. 'app-recommended-product-list': appRecommendedProductList,
  578. 'app-exclusive-coupon': appExclusiveCoupon,
  579. appExclusiveCouponTwo,
  580. 'app-diy-timer': appDiyTimer,
  581. 'app-goods-shop': appGoodsShop,
  582. 'app-empty': appEmpty,
  583. 'app-popup-ad': appPopupAd,
  584. 'app-quick-navigation': appQuickNavigation,
  585. 'app-check-in': appCheckIn,
  586. 'app-rich': appRich,
  587. 'app-reservation': appReservation,
  588. 'app-spike': appSpike,
  589. 'app-diy-goods-list': appDiyGoodsList,
  590. 'app-diy-form': appDiyForm,
  591. 'app-vip-card': appVipCard,
  592. // 普通商品列表
  593. uOrdinaryList,
  594. // #ifndef MP-TOUTIAO
  595. appMap,
  596. // #endif
  597. appAd,
  598. appModule,
  599. // #ifdef MP-WEIXIN
  600. appLive,
  601. // #endif
  602. uSwiper
  603. },
  604. props: {
  605. dIndex: {
  606. type: Array,
  607. default() {
  608. return [0, 0];
  609. }
  610. },
  611. dType: String, //module 模块
  612. homePages: {
  613. type: Object,
  614. default() {
  615. return {
  616. navs: []
  617. };
  618. }
  619. },
  620. scrollTop: {
  621. type: Number,
  622. default() {
  623. return 0;
  624. }
  625. },
  626. is_storage: Boolean,
  627. shareFixed: Boolean,
  628. pageHide: Boolean,
  629. theme: String,
  630. coupon_req: Boolean,
  631. is_required: Boolean,
  632. page_id: Number,
  633. is_module: {
  634. type: Boolean,
  635. default() {
  636. return true;
  637. }
  638. }
  639. },
  640. computed: {
  641. newData() {
  642. if (this.homePages) {
  643. if (this.homePages.title) {
  644. uni.setNavigationBarTitle({
  645. title: this.homePages.title,
  646. });
  647. }
  648. return this.homePages;
  649. } else {
  650. return {
  651. navs: [],
  652. }
  653. }
  654. },
  655. ...mapState({
  656. userCenter: state => state.mallConfig.user_center,
  657. }),
  658. diyFormSubmitUrl() {
  659. return this.$api.diy.page_store;
  660. },
  661. themeObject:function() {
  662. return {
  663. back: this.theme + '-m-back ' + this.theme,
  664. backP: this.theme + '-m-back-p ' + this.theme,
  665. backO: this.theme + '-m-back-o ' + this.theme,
  666. theme: this.theme,
  667. color: this.theme + '-m-text ' + this.theme,
  668. sBack: this.theme + '-s-back ' + this.theme,
  669. border: this.theme + '-m-border ' + this.theme,
  670. }
  671. },
  672. },
  673. data() {
  674. return {
  675. nav_active: 0,
  676. mp_link_top: false,
  677. coupon_url: this.$api.diy.receive,
  678. coupon_params: {},
  679. };
  680. },
  681. filters: {
  682. getObje(data) {
  683. if (!data) return;
  684. return {
  685. template_id: data.template_id
  686. }
  687. }
  688. },
  689. methods: {
  690. changeNav(index) {
  691. this.nav_active = index;
  692. this.mp_link_top = false;
  693. },
  694. rubikHotspot(hotspot) {
  695. if (hotspot && hotspot.link) {
  696. hotspot.link.url = hotspot.link.value;
  697. hotspot.link.openType = hotspot.link.open_type;
  698. }
  699. return hotspot;
  700. },
  701. mpLink(position) {
  702. if (position === 'top') {
  703. this.mp_link_top = true;
  704. }
  705. },
  706. transLabelPosition(val) {
  707. val = Number(val);
  708. switch (val) {
  709. case 3:
  710. return 'top';
  711. case 2:
  712. return 'inset';
  713. default:
  714. return 'left';
  715. }
  716. },
  717. transLabelBackgroundPosition(val) {
  718. val = Number(val);
  719. switch (val) {
  720. case 1:
  721. return 'left top';
  722. case 2:
  723. return 'center top';
  724. case 3:
  725. return 'right top';
  726. case 4:
  727. return 'left center';
  728. case 5:
  729. return 'center center';
  730. case 6:
  731. return 'right center';
  732. case 7:
  733. return 'left bottom';
  734. case 8:
  735. return 'center bottom';
  736. case 9:
  737. return 'right bottom';
  738. default:
  739. return 'center';
  740. }
  741. },
  742. transLabelBackgroundRepeat(val) {
  743. val = Number(val);
  744. switch (val) {
  745. case 1:
  746. return 'no-repeat';
  747. case 2:
  748. return 'repeat-x';
  749. case 3:
  750. return 'repeat-y';
  751. case 4:
  752. return 'repeat';
  753. default:
  754. return 'no-repeat';
  755. }
  756. },
  757. mpLinkError() {
  758. this.mp_link_top = false;
  759. },
  760. buyProduct(data) {
  761. this.$emit('buyProduct', data);
  762. },
  763. }
  764. }
  765. </script>
  766. <style scoped lang="scss">
  767. .app-diy-bg {
  768. position: fixed;
  769. top: 0;
  770. left: 0;
  771. width: 100%;
  772. height: 100%;
  773. z-index: -1;
  774. }
  775. //#ifdef MP-ALIPAY
  776. .app-diy-page /deep/ .app-diy-page {
  777. position: static !important;
  778. z-index: auto !important;
  779. }
  780. //#endif
  781. .app-diy-page {
  782. width: 100%;
  783. height: 100%;
  784. .nav-bar {
  785. position: fixed;
  786. left: 0;
  787. top: 0;
  788. z-index: 1500;
  789. background-color: #ffffff;
  790. width: 100%;
  791. height: #{44px};
  792. padding: 0 #{30rpx};
  793. overflow-x: auto;
  794. border-bottom: #{1rpx} solid #e2e2e2;
  795. .nav-bar-one {
  796. width: auto;
  797. margin-right: #{30rpx};
  798. padding: 0 #{15rpx};
  799. &.active {
  800. border-bottom: #{4rpx} solid;
  801. }
  802. }
  803. &.mp_link_top {
  804. top: #{84px};
  805. }
  806. &.mp_link_top ~ .diy-template {
  807. margin-top: #{44px + 84px};
  808. }
  809. & ~ .diy-template {
  810. margin-top: #{44px};
  811. }
  812. }
  813. .mp-link-top {
  814. position: fixed;
  815. top: 0;
  816. left: 0;
  817. z-index: 1500;
  818. width: 100%;
  819. }
  820. &.mp_link_top {
  821. margin-top: #{168rpx};
  822. }
  823. }
  824. </style>