detail.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <view class="container">
  3. <view class="">
  4. <view class="ft36 header-title">
  5. {{info.title}}
  6. </view>
  7. <view class="ft24 coh header-time">
  8. {{info.create_time}}
  9. {{info.click}}次阅读
  10. </view>
  11. </view>
  12. <view class="pd10rpx">
  13. <rich-text :nodes="nodes" style="font-size: 14px;"></rich-text>
  14. </view>
  15. <view class="video" v-if="tabType==2">
  16. <video :src="video_url" controls></video>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. nodes:"",
  25. info:{},
  26. video_url:"",
  27. tabType:1,
  28. }
  29. },
  30. onLoad(e) {
  31. console.log(e,"e")
  32. this.tabType=e.tabType;
  33. let url=e.tabType==1?"Content/jcdetail":"Content/vddetail";
  34. wx.setNavigationBarTitle({
  35. title:e.tabType==1?'教程详情':'视频详情',
  36. success: (res) => {},
  37. fail: (res) => {},
  38. complete: (res) => {},
  39. })
  40. this.request({
  41. url,
  42. data: {
  43. id: e.id,
  44. },
  45. }).then(res => {
  46. console.log(res,"res")
  47. if (res.code === '200') {
  48. if(e.tabType==1){
  49. this.info=res.data;
  50. this.nodes = res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
  51. }else{
  52. this.info=res.data;
  53. this.nodes = res.data.desc.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
  54. this.video_url = res.data.video_url;
  55. }
  56. }
  57. });
  58. },
  59. onShareAppMessage(e) {
  60. },
  61. methods: {
  62. }
  63. }
  64. </script>
  65. <style>
  66. page{
  67. width: 100%;
  68. height: 100%;
  69. }
  70. .container{
  71. padding: 0 40rpx;
  72. width: 100%;
  73. height: 100%;
  74. }
  75. .pd10rpx{
  76. padding: 0 10px;
  77. }
  78. .header-title{
  79. margin-bottom: 16rpx;
  80. }
  81. .header-time{
  82. margin-bottom: 20rpx;
  83. }
  84. .video{
  85. width: 100%;
  86. }
  87. .video video{
  88. width: 100%;
  89. }
  90. </style>