details.wxml 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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="file-preview">
  10. <view class="file-preview" wx:if="{{itemlist.type === 0}}">
  11. <video 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 class="preview-btns yulan"><image class="download-iconss" src="{{show_1}}" />在线预览</button>
  40. <button class="preview-btns shoucang"><image class="download-iconss" src="{{shouchang}}" />收藏</button>
  41. <button bindtap="goToGoodsLists" data-item="{{itemlist}}" class="download-btn xiazai"><image class="download-iconss" src="{{xia}}" />下载</button>
  42. </view>
  43. <view class="related-courses">相关课件推荐</view>
  44. <!-- 列表 -->
  45. <view class="course-list">
  46. <block wx:for="{{courseList}}" wx:key="id">
  47. <view class="card" bindtap="goToGoodsList" data-item="{{item}}">
  48. <view class="cardimg">
  49. <image style="width: 100%; height: 100%;" src="{{item.cover}}" />
  50. <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>
  51. </view>
  52. <view class="item-content">
  53. <view class="item-title">{{item.name}}</view>
  54. <view style="display: flex; justify-content: space-between;">
  55. <view class="item-subtitle">
  56. {{item.describe}}
  57. </view>
  58. <view class="item-download-count">
  59. 已有{{item.download_count}}人下载
  60. </view>
  61. </view>
  62. <view class="item-buttons">
  63. <button class="preview-btn"><image class="download-icons" src="{{show_1}}" />在线预览</button>
  64. <image class="download-icon" src="{{xiazi}}" />
  65. </view>
  66. </view>
  67. </view>
  68. </block>
  69. </view>
  70. </view>
  71. </view>