details.wxml 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <view style="background: #f5f5f5; padding: 20rpx 0;">
  2. <view class="container">
  3. <view class="header">
  4. <text>{{ itemlist.name }}</text>
  5. <text>{{itemlist.publisher}} • {{ itemlist.createdAt }}</text>
  6. <text>{{itemlist.type === 0 ? '视频' : itemlist.type === 1 ? '音频' : itemlist.type === 2 ? 'PDF' : itemlist.type === 3 ? 'PPT' : '图文'}} 适用于 {{ itemlist.range }}</text>
  7. </view>
  8. <!-- 预览 -->
  9. <view class="{{itemlist.type === 1 ? '' : 'file-preview'}}">
  10. <view class="file-preview" wx:if="{{itemlist.type === 0}}">
  11. <video id="myVideo" class="course-videos" src="{{itemlist.url}}" controls></video>
  12. </view>
  13. <view class="file-previews" wx:elif="{{itemlist.type === 1}}">
  14. <audio
  15. class="course-videos"
  16. src="{{itemlist.url}}"
  17. controls
  18. autoplay
  19. loop
  20. poster="{{itemlist.cover}}"
  21. name="{{itemlist.name}}"
  22. author="作者"
  23. />
  24. </view>
  25. <view class="file-preview" wx:elif="{{itemlist.type === 2}}">
  26. <image style="width: 100%; height: 100%;" src="{{itemlist.cover}}" alt="" class="file-placeholder"/>
  27. <!-- <web-view src="{{itemlist.url}}"/> -->
  28. <view class="play-button">点击下方按钮预览课件</view>
  29. </view>
  30. <view class="file-preview" wx:elif="{{itemlist.type === 3}}">
  31. <image style="width: 100%; height: 100%;" src="{{itemlist.cover}}" alt="" class="file-placeholder"/>
  32. <view class="play-button">点击下方按钮预览课件</view>
  33. </view>
  34. <view class="file-preview" wx:else>
  35. <image style="width: 100%; height: 100%;" src="{{itemlist.cover}}" alt="" class="file-placeholder"/>
  36. </view>
  37. </view>
  38. <view class="buttons">
  39. <button bindtap="previewPDF" class="preview-btns yulan">
  40. <image class="download-iconss" src="{{show_1}}" />
  41. 在线预览
  42. </button>
  43. <button bindtap="goTocollect" data-item="{{itemlist}}" class="preview-btns shoucang {{isCollected ? 'active' : ''}}">
  44. <image wx:if="{{isCollected}}" class="download-iconss" src="{{shouchangs}}" />
  45. <image wx:else class="download-iconss" src="{{shouchang}}" />
  46. 收藏
  47. </button>
  48. <button bindtap="goToGoodsLists" data-item="{{itemlist}}" class="download-btn xiazai">
  49. <image class="download-iconss" src="{{xia}}" />
  50. 下载
  51. </button>
  52. </view>
  53. <view class="related-courses">相关课件推荐</view>
  54. <!-- 列表 -->
  55. <view class="course-list">
  56. <block wx:for="{{courseList}}" wx:key="id">
  57. <view class="card" bindtap="goToGoodsList" data-item="{{item}}">
  58. <view class="cardimg">
  59. <image style="width: 100%; height: 100%;" src="{{item.cover}}" />
  60. <view class="label {{item.type === 0 ? 'shipin' : item.type === 1 ? 'yinpin' : item.type === 2 ? 'PDF' : item.type === 3 ? 'PPT' : '图文'}} labelwg" >{{item.type === 0 ? '视频' : item.type === 1 ? '音频' : item.type === 2 ? 'PDF' : item.type === 3 ? 'PPT' : '图文'}}</view>
  61. </view>
  62. <view class="item-content">
  63. <view class="item-title">{{item.name}}</view>
  64. <view style="display: flex; justify-content: space-between;">
  65. <view class="item-subtitle">
  66. {{item.describe}}
  67. </view>
  68. <view class="item-download-count">
  69. 已有{{item.download_count}}人下载
  70. </view>
  71. </view>
  72. <view class="item-buttons">
  73. <button class="preview-btn"><image class="download-icons" src="{{show_1}}" />在线预览</button>
  74. <image class="download-icon" src="{{xiazi}}" />
  75. </view>
  76. </view>
  77. </view>
  78. </block>
  79. </view>
  80. <float />
  81. </view>
  82. </view>