AI销管
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

trees.vue 13 KiB

2 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. <template>
  2. <view :class="'interlayer '+(c||'')" :style="s">
  3. <block v-for="(n, i) in nodes" v-bind:key="i">
  4. <!--图片-->
  5. <view v-if="n.name=='img'" :class="'_img '+n.attrs.class" :style="n.attrs.style" :data-attrs="n.attrs" @tap.stop="imgtap">
  6. <rich-text v-if="ctrl[i]!=0" :nodes="[{attrs:{src:loading&&(ctrl[i]||0)<2?loading:(lazyLoad&&!ctrl[i]?placeholder:(ctrl[i]==3?errorImg:n.attrs.src||'')),alt:n.attrs.alt||'',width:n.attrs.width||'',style:'-webkit-touch-callout:none;max-width:100%;display:block'+(n.attrs.height?';height:'+n.attrs.height:'')},name:'img'}]" />
  7. <image class="_image" :src="lazyLoad&&!ctrl[i]?placeholder:n.attrs.src" :lazy-load="lazyLoad"
  8. :show-menu-by-longpress="!n.attrs.ignore" :data-i="i" :data-index="n.attrs.i" data-source="img" @load="loadImg"
  9. @error="error" />
  10. </view>
  11. <!--文本-->
  12. <text v-else-if="n.type=='text'" decode>{{n.text}}</text>
  13. <!--#ifndef MP-BAIDU-->
  14. <text v-else-if="n.name=='br'">\n</text>
  15. <!--#endif-->
  16. <!--视频-->
  17. <view v-else-if="((n.lazyLoad&&!n.attrs.autoplay)||(n.name=='video'&&!loadVideo))&&ctrl[i]==undefined" :id="n.attrs.id"
  18. :class="'_video '+(n.attrs.class||'')" :style="n.attrs.style" :data-i="i" @tap.stop="_loadVideo" />
  19. <video v-else-if="n.name=='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||ctrl[i]==0"
  20. :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[ctrl[i]||0]"
  21. :unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" :data-i="i" data-source="video" @error="error" @play="play" />
  22. <!--音频-->
  23. <audio v-else-if="n.name=='audio'" :ref="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author"
  24. :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster"
  25. :src="n.attrs.source[ctrl[i]||0]" :data-i="i" :data-id="n.attrs.id" data-source="audio" @error.native="error"
  26. @play.native="play" />
  27. <!--链接-->
  28. <view v-else-if="n.name=='a'" :id="n.attrs.id" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style"
  29. :data-attrs="n.attrs" @tap.stop="linkpress">
  30. <trees class="_span" c="_span" :nodes="n.children" />
  31. </view>
  32. <!--广告-->
  33. <!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :unit-id="n.attrs['unit-id']" :appid="n.attrs.appid" :apid="n.attrs.apid" :type="n.attrs.type" :adpid="n.attrs.adpid" data-source="ad" @error="error" />-->
  34. <!--列表-->
  35. <view v-else-if="n.name=='li'" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:flex;flex-direction:row'">
  36. <view v-if="n.type=='ol'" class="_ol-bef">{{n.num}}</view>
  37. <view v-else class="_ul-bef">
  38. <view v-if="n.floor%3==0" class="_ul-p1">█</view>
  39. <view v-else-if="n.floor%3==2" class="_ul-p2" />
  40. <view v-else class="_ul-p1" style="border-radius:50%">█</view>
  41. </view>
  42. <trees class="_li" c="_li" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" />
  43. </view>
  44. <!--表格-->
  45. <view v-else-if="n.name=='table'&&n.c&&n.flag" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:grid'">
  46. <trees v-for="(cell,n) in n.children" v-bind:key="n" :class="cell.attrs.class" :c="cell.attrs.class" :style="cell.attrs.style"
  47. :s="cell.attrs.style" :nodes="cell.children" />
  48. </view>
  49. <view v-else-if="n.name=='table'&&n.c" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:table'">
  50. <view v-for="(tbody, o) in n.children" v-bind:key="o" :class="tbody.attrs.class" :style="(tbody.attrs.style||'')+(tbody.name[0]=='t'?';display:table-'+(tbody.name=='tr'?'row':'row-group'):'')">
  51. <view v-for="(tr, p) in tbody.children" v-bind:key="p" :class="tr.attrs.class" :style="(tr.attrs.style||'')+(tr.name[0]=='t'?';display:table-'+(tr.name=='tr'?'row':'cell'):'')">
  52. <trees v-if="tr.name=='td'" :nodes="tr.children" />
  53. <trees v-else v-for="(td, q) in tr.children" v-bind:key="q" :class="td.attrs.class" :c="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')"
  54. :s="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')" :nodes="td.children" />
  55. </view>
  56. </view>
  57. </view>
  58. <!--#ifdef APP-PLUS-->
  59. <iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder"
  60. :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
  61. <embed v-else-if="n.name=='embed'" :style="n.attrs.style" :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
  62. <!--#endif-->
  63. <!--富文本-->
  64. <!--#ifdef MP-WEIXIN || MP-QQ || APP-PLUS-->
  65. <rich-text v-else-if="handler.use(n)" :id="n.attrs.id" :class="'_p __'+n.name" :nodes="[n]" />
  66. <!--#endif-->
  67. <!--#ifndef MP-WEIXIN || MP-QQ || APP-PLUS-->
  68. <rich-text v-else-if="!n.c" :id="n.attrs.id" :nodes="[n]" style="display:inline" />
  69. <!--#endif-->
  70. <trees v-else :class="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" :c="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')"
  71. :style="n.attrs.style" :s="n.attrs.style" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" />
  72. </block>
  73. </view>
  74. </template>
  75. <script module="handler" lang="wxs" src="./handler.wxs"></script>
  76. <script>
  77. global.Parser = {};
  78. import trees from './trees'
  79. const errorImg = require('../libs/config.js').errorImg;
  80. export default {
  81. components: {
  82. trees
  83. },
  84. name: 'trees',
  85. data() {
  86. return {
  87. ctrl: [],
  88. placeholder: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="225"/>',
  89. errorImg,
  90. loadVideo: typeof plus == 'undefined',
  91. // #ifndef MP-ALIPAY
  92. c: '',
  93. s: ''
  94. // #endif
  95. }
  96. },
  97. props: {
  98. nodes: Array,
  99. lazyLoad: Boolean,
  100. loading: String,
  101. // #ifdef MP-ALIPAY
  102. c: String,
  103. s: String
  104. // #endif
  105. },
  106. mounted() {
  107. for (this.top = this.$parent; this.top.$options.name != 'parser'; this.top = this.top.$parent);
  108. this.init();
  109. },
  110. // #ifdef APP-PLUS
  111. beforeDestroy() {
  112. this.observer && this.observer.disconnect();
  113. },
  114. // #endif
  115. methods: {
  116. init() {
  117. for (var i = this.nodes.length, n; n = this.nodes[--i];) {
  118. if (n.name == 'img') {
  119. this.top.imgList.setItem(n.attrs.i, n.attrs['original-src'] || n.attrs.src);
  120. // #ifdef APP-PLUS
  121. if (this.lazyLoad && !this.observer) {
  122. this.observer = uni.createIntersectionObserver(this).relativeToViewport({
  123. top: 500,
  124. bottom: 500
  125. });
  126. setTimeout(() => {
  127. this.observer.observe('._img', res => {
  128. if (res.intersectionRatio) {
  129. for (var j = this.nodes.length; j--;)
  130. if (this.nodes[j].name == 'img')
  131. this.$set(this.ctrl, j, 1);
  132. this.observer.disconnect();
  133. }
  134. })
  135. }, 0)
  136. }
  137. // #endif
  138. } else if (n.name == 'video' || n.name == 'audio') {
  139. var ctx;
  140. if (n.name == 'video') {
  141. ctx = uni.createVideoContext(n.attrs.id
  142. // #ifndef MP-BAIDU
  143. , this
  144. // #endif
  145. );
  146. } else if (this.$refs[n.attrs.id])
  147. ctx = this.$refs[n.attrs.id][0];
  148. if (ctx) {
  149. ctx.id = n.attrs.id;
  150. this.top.videoContexts.push(ctx);
  151. }
  152. }
  153. }
  154. // #ifdef APP-PLUS
  155. // APP 上避免 video 错位需要延时渲染
  156. setTimeout(() => {
  157. this.loadVideo = true;
  158. }, 1000)
  159. // #endif
  160. },
  161. play(e) {
  162. var contexts = this.top.videoContexts;
  163. if (contexts.length > 1 && this.top.autopause)
  164. for (var i = contexts.length; i--;)
  165. if (contexts[i].id != e.currentTarget.dataset.id)
  166. contexts[i].pause();
  167. },
  168. imgtap(e) {
  169. var attrs = e.currentTarget.dataset.attrs;
  170. if (!attrs.ignore) {
  171. var preview = true,
  172. data = {
  173. id: e.target.id,
  174. src: attrs.src,
  175. ignore: () => preview = false
  176. };
  177. global.Parser.onImgtap && global.Parser.onImgtap(data);
  178. this.top.$emit('imgtap', data);
  179. if (preview) {
  180. var urls = this.top.imgList,
  181. current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0);
  182. uni.previewImage({
  183. current,
  184. urls
  185. })
  186. }
  187. }
  188. },
  189. loadImg(e) {
  190. var i = e.currentTarget.dataset.i;
  191. if (this.lazyLoad && !this.ctrl[i]) {
  192. // #ifdef QUICKAPP-WEBVIEW
  193. this.$set(this.ctrl, i, 0);
  194. this.$nextTick(function() {
  195. // #endif
  196. // #ifndef APP-PLUS
  197. this.$set(this.ctrl, i, 1);
  198. // #endif
  199. // #ifdef QUICKAPP-WEBVIEW
  200. })
  201. // #endif
  202. } else if (this.loading && this.ctrl[i] != 2) {
  203. // #ifdef QUICKAPP-WEBVIEW
  204. this.$set(this.ctrl, i, 0);
  205. this.$nextTick(function() {
  206. // #endif
  207. this.$set(this.ctrl, i, 2);
  208. // #ifdef QUICKAPP-WEBVIEW
  209. })
  210. // #endif
  211. }
  212. },
  213. linkpress(e) {
  214. var jump = true,
  215. attrs = e.currentTarget.dataset.attrs;
  216. attrs.ignore = () => jump = false;
  217. global.Parser.onLinkpress && global.Parser.onLinkpress(attrs);
  218. this.top.$emit('linkpress', attrs);
  219. if (jump) {
  220. // #ifdef MP
  221. if (attrs['app-id']) {
  222. return uni.navigateToMiniProgram({
  223. appId: attrs['app-id'],
  224. path: attrs.path
  225. })
  226. }
  227. // #endif
  228. if (attrs.href) {
  229. if (attrs.href[0] == '#') {
  230. if (this.top.useAnchor)
  231. this.top.navigateTo({
  232. id: attrs.href.substring(1)
  233. })
  234. } else if (attrs.href.indexOf('http') == 0 || attrs.href.indexOf('//') == 0) {
  235. // #ifdef APP-PLUS
  236. plus.runtime.openWeb(attrs.href);
  237. // #endif
  238. // #ifndef APP-PLUS
  239. uni.setClipboardData({
  240. data: attrs.href,
  241. success: () =>
  242. uni.showToast({
  243. title: '链接已复制'
  244. })
  245. })
  246. // #endif
  247. } else
  248. uni.navigateTo({
  249. url: attrs.href,
  250. fail() {
  251. uni.switchTab({
  252. url: attrs.href,
  253. })
  254. }
  255. })
  256. }
  257. }
  258. },
  259. error(e) {
  260. var target = e.currentTarget,
  261. source = target.dataset.source,
  262. i = target.dataset.i;
  263. if (source == 'video' || source == 'audio') {
  264. // 加载其他 source
  265. var index = this.ctrl[i] ? this.ctrl[i].i + 1 : 1;
  266. if (index < this.nodes[i].attrs.source.length)
  267. this.$set(this.ctrl, i, index);
  268. if (e.detail.__args__)
  269. e.detail = e.detail.__args__[0];
  270. } else if (errorImg && source == 'img') {
  271. this.top.imgList.setItem(target.dataset.index, errorImg);
  272. this.$set(this.ctrl, i, 3);
  273. }
  274. this.top && this.top.$emit('error', {
  275. source,
  276. target,
  277. errMsg: e.detail.errMsg
  278. });
  279. },
  280. _loadVideo(e) {
  281. this.$set(this.ctrl, e.target.dataset.i, 0);
  282. }
  283. }
  284. }
  285. </script>
  286. <style>
  287. /* 在这里引入自定义样式 */
  288. /* 链接和图片效果 */
  289. ._a {
  290. display: inline;
  291. padding: 1.5px 0 1.5px 0;
  292. color: #366092;
  293. word-break: break-all;
  294. }
  295. ._hover {
  296. text-decoration: underline;
  297. opacity: 0.7;
  298. }
  299. ._img {
  300. display: inline-block;
  301. max-width: 100%;
  302. overflow: hidden;
  303. }
  304. /* #ifdef MP-WEIXIN */
  305. :host {
  306. display: inline;
  307. }
  308. /* #endif */
  309. /* #ifndef MP-ALIPAY || APP-PLUS */
  310. .interlayer {
  311. display: inherit;
  312. flex-direction: inherit;
  313. flex-wrap: inherit;
  314. align-content: inherit;
  315. align-items: inherit;
  316. justify-content: inherit;
  317. width: 100%;
  318. white-space: inherit;
  319. }
  320. /* #endif */
  321. ._b,
  322. ._strong {
  323. font-weight: bold;
  324. }
  325. /* #ifndef MP-ALIPAY */
  326. ._blockquote,
  327. ._div,
  328. ._p,
  329. ._ol,
  330. ._ul,
  331. ._li {
  332. display: block;
  333. }
  334. /* #endif */
  335. ._code {
  336. font-family: monospace;
  337. }
  338. ._del {
  339. text-decoration: line-through;
  340. }
  341. ._em,
  342. ._i {
  343. font-style: italic;
  344. }
  345. ._h1 {
  346. font-size: 2em;
  347. }
  348. ._h2 {
  349. font-size: 1.5em;
  350. }
  351. ._h3 {
  352. font-size: 1.17em;
  353. }
  354. ._h5 {
  355. font-size: 0.83em;
  356. }
  357. ._h6 {
  358. font-size: 0.67em;
  359. }
  360. ._h1,
  361. ._h2,
  362. ._h3,
  363. ._h4,
  364. ._h5,
  365. ._h6 {
  366. display: block;
  367. font-weight: bold;
  368. }
  369. ._image {
  370. display: block;
  371. width: 100%;
  372. height: 360px;
  373. margin-top: -360px;
  374. opacity: 0;
  375. }
  376. ._ins {
  377. text-decoration: underline;
  378. }
  379. ._li {
  380. flex: 1;
  381. width: 0;
  382. }
  383. ._ol-bef {
  384. width: 36px;
  385. margin-right: 5px;
  386. text-align: right;
  387. }
  388. ._ul-bef {
  389. display: block;
  390. margin: 0 12px 0 23px;
  391. line-height: normal;
  392. }
  393. ._ol-bef,
  394. ._ul-bef {
  395. flex: none;
  396. user-select: none;
  397. }
  398. ._ul-p1 {
  399. display: inline-block;
  400. width: 0.3em;
  401. height: 0.3em;
  402. overflow: hidden;
  403. line-height: 0.3em;
  404. }
  405. ._ul-p2 {
  406. display: inline-block;
  407. width: 0.23em;
  408. height: 0.23em;
  409. border: 0.05em solid black;
  410. border-radius: 50%;
  411. }
  412. ._q::before {
  413. content: '"';
  414. }
  415. ._q::after {
  416. content: '"';
  417. }
  418. ._sub {
  419. font-size: smaller;
  420. vertical-align: sub;
  421. }
  422. ._sup {
  423. font-size: smaller;
  424. vertical-align: super;
  425. }
  426. /* #ifdef MP-ALIPAY || APP-PLUS || QUICKAPP-WEBVIEW */
  427. ._abbr,
  428. ._b,
  429. ._code,
  430. ._del,
  431. ._em,
  432. ._i,
  433. ._ins,
  434. ._label,
  435. ._q,
  436. ._span,
  437. ._strong,
  438. ._sub,
  439. ._sup {
  440. display: inline;
  441. }
  442. /* #endif */
  443. /* #ifdef MP-WEIXIN || MP-QQ */
  444. .__bdo,
  445. .__bdi,
  446. .__ruby,
  447. .__rt {
  448. display: inline-block;
  449. }
  450. /* #endif */
  451. ._video {
  452. position: relative;
  453. display: inline-block;
  454. width: 300px;
  455. height: 225px;
  456. background-color: black;
  457. }
  458. ._video::after {
  459. position: absolute;
  460. top: 50%;
  461. left: 50%;
  462. margin: -15px 0 0 -15px;
  463. content: '';
  464. border-color: transparent transparent transparent white;
  465. border-style: solid;
  466. border-width: 15px 0 15px 30px;
  467. }
  468. </style>