artDetail.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="center">
  3. <view class="title clamp">{{ item.title }}</view>
  4. <view class="time">{{ item.add_time }}</view>
  5. <view class="main" v-for="(ls, index) in item.content" :key="index">
  6. <view v-if="ls.type == 'rich-text'" v-html="ls.value" class="main"></view>
  7. <video v-if="ls.type == 'video' && ls.value" :src="ls.value" style="width:100%;height: 300px"
  8. frameborder="0"></video>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. import {
  14. details
  15. } from '@/api/user.js';
  16. export default {
  17. data() {
  18. return {
  19. id: '',
  20. item: ''
  21. };
  22. },
  23. onLoad(option) {
  24. this.id = option.id;
  25. this.loadData();
  26. },
  27. methods: {
  28. loadData() {
  29. details({}, this.id).then(({
  30. data
  31. }) => {
  32. console.log(data);
  33. data.content = data.content.replace(/<img/g, '<img class="rich-img"').replace(/<p>\s*<img/g,
  34. '<p class="pHeight"><img');
  35. data.content = this.getVideo(data.content);
  36. this.item = data;
  37. });
  38. },
  39. // 富文本视频解析
  40. getVideo(data) {
  41. let videoList = [];
  42. let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
  43. let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
  44. let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组
  45. let articleList = data.split('</video>'); // 把字符串 从视频标签分成数组
  46. arr.forEach((item, index) => {
  47. var src = item.match(srcReg);
  48. videoList.push(src[1]); //所要显示的字符串中 所有的video 标签 的路径
  49. });
  50. let needArticleList = [];
  51. articleList.forEach((item, index) => {
  52. if (item != '' && item != undefined) {
  53. // 常见的标签渲染
  54. needArticleList.push({
  55. type: 'rich-text',
  56. value: item + '</video>'
  57. });
  58. }
  59. let articleListLength = articleList.length; // 插入到原有video 标签位置
  60. if (index < articleListLength && videoList[index] != undefined) {
  61. needArticleList.push({
  62. type: 'video',
  63. value: videoList[index]
  64. });
  65. }
  66. });
  67. return needArticleList;
  68. }
  69. }
  70. };
  71. </script>
  72. <style lang="scss">
  73. page {
  74. min-height: 100%;
  75. height: 0;
  76. }
  77. .center {
  78. min-height: 100%;
  79. height: auto;
  80. background: #ffffff;
  81. padding: 30rpx 24rpx 0;
  82. }
  83. .title {
  84. font-size: 32rpx;
  85. font-family: PingFang SC;
  86. font-weight: bold;
  87. color: #333333;
  88. text-align: center;
  89. }
  90. .time {
  91. font-size: 24rpx;
  92. font-family: PingFangSC;
  93. font-weight: 500;
  94. color: #999999;
  95. margin-top: 40rpx;
  96. }
  97. .main {
  98. margin-top: 60rpx;
  99. }
  100. /deep/ .main {
  101. .rich-img {
  102. width: 100% !important;
  103. height: auto;
  104. }
  105. }
  106. </style>