details.wxml 3.7 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.dan === 0 ? '初级' : itemlist.dan === 1 ? '中级' : itemlist.dan === 2 ? '高级' : '' }} {{ itemlist.level }} 段</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 class="preview-btns shoucang">
  44. <image class="download-iconss" src="{{shouchang}}" />
  45. 收藏
  46. </button> -->
  47. <button bindtap="goToGoodsLists" data-item="{{itemlist}}" class="download-btn xiazai">
  48. <image class="download-iconss" src="{{xia}}" />
  49. 下载
  50. </button>
  51. </view>
  52. <view class="related-courses">相关课件推荐</view>
  53. <!-- 列表 -->
  54. <view class="course-list">
  55. <block wx:for="{{courseList}}" wx:key="id">
  56. <view class="card" bindtap="goToGoodsList" data-item="{{item}}">
  57. <view class="cardimg">
  58. <image style="width: 100%; height: 100%;" src="{{item.cover}}" />
  59. <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>
  60. </view>
  61. <view class="item-content">
  62. <view class="item-title">{{item.name}}</view>
  63. <view style="display: flex; justify-content: space-between;">
  64. <view class="item-subtitle">
  65. {{item.describe}}
  66. </view>
  67. <view class="item-download-count">
  68. 已有{{item.download_count}}人下载
  69. </view>
  70. </view>
  71. <view class="item-buttons">
  72. <button class="preview-btn"><image class="download-icons" src="{{show_1}}" />在线预览</button>
  73. <image class="download-icon" src="{{xiazi}}" />
  74. </view>
  75. </view>
  76. </view>
  77. </block>
  78. </view>
  79. <float />
  80. </view>
  81. </view>