artDetail.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <view class="container">
  3. <view class="notice-item">
  4. <jyf-parser :html="description" ref="article"></jyf-parser>
  5. </view>
  6. <home></home>
  7. </view>
  8. </template>
  9. <script>
  10. import {
  11. getDetail,
  12. } from '@/api/index.js';
  13. import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
  14. export default {
  15. components: {
  16. jyfParser
  17. },
  18. data() {
  19. return {
  20. id: '',
  21. list: "",
  22. description: '',
  23. type: 0,
  24. }
  25. },
  26. onLoad(option) {
  27. this.id = option.id;
  28. this.loadData();
  29. },
  30. methods: {
  31. loadData() {
  32. let obj = this;
  33. getDetail(obj.id).then(function(e) {
  34. obj.list = e.data;
  35. if (obj.list.content != null) {
  36. obj.description = obj.list.content.replace(/<img/g,
  37. "<img style='max-width:100%;height:auto;'");
  38. } //小程序商品详情图超出屏幕问题
  39. });
  40. }
  41. }
  42. }
  43. </script>
  44. <style lang="scss">
  45. page {
  46. min-height: 100%;
  47. background: #FFFFFF;
  48. }
  49. .notice_name {
  50. font-size: 35rpx !important;
  51. color: #303133;
  52. padding: 25rpx 25rpx 0rpx 25rpx;
  53. margin-bottom: 25rpx;
  54. }
  55. .course-video {
  56. width: 100%;
  57. height: 500rpx;
  58. }
  59. .notice-item {
  60. width: 100%;
  61. height: 100%;
  62. color: #666666;
  63. padding: 35rpx 35rpx;
  64. font-size: 23rpx;
  65. padding-bottom: 30rpx;
  66. }
  67. </style>