index.wxml 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <wxs src="../wxs/utils.wxs" module="utils" />
  2. <view class="van-uploader">
  3. <view class="van-uploader__wrapper">
  4. <!-- 预览样式 -->
  5. <view
  6. wx:if="{{ previewImage }}"
  7. wx:for="{{ lists }}"
  8. wx:key="index"
  9. class="van-uploader__preview"
  10. data-index="{{ index }}"
  11. bindtap="onClickPreview"
  12. >
  13. <image
  14. wx:if="{{ item.isImage }}"
  15. mode="{{ imageFit }}"
  16. src="{{ item.thumb || item.url }}"
  17. alt="{{ item.name || ('图片' + index) }}"
  18. class="van-uploader__preview-image"
  19. style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
  20. data-index="{{ index }}"
  21. bind:tap="onPreviewImage"
  22. />
  23. <video
  24. wx:elif="{{ item.isVideo }}"
  25. src="{{ item.url }}"
  26. title="{{ item.name || ('视频' + index) }}"
  27. poster="{{ item.thumb }}"
  28. autoplay="{{ item.autoplay }}"
  29. class="van-uploader__preview-image"
  30. style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
  31. data-index="{{ index }}"
  32. bind:tap="onPreviewVideo"
  33. >
  34. </video>
  35. <view
  36. wx:else
  37. class="van-uploader__file"
  38. style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
  39. >
  40. <van-icon name="description" class="van-uploader__file-icon" />
  41. <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url }}</view>
  42. </view>
  43. <view
  44. wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}"
  45. class="van-uploader__mask"
  46. >
  47. <van-icon wx:if="{{ item.status === 'failed' }}" name="close" class="van-uploader__mask-icon" />
  48. <van-loading wx:else custom-class="van-uploader__loading" />
  49. <text wx:if="{{ item.message }}" class="van-uploader__mask-message">{{ item.message }}</text>
  50. </view>
  51. <view
  52. wx:if="{{ deletable && item.deletable }}"
  53. data-index="{{ index }}"
  54. class="van-uploader__preview-delete"
  55. catch:tap="deleteItem"
  56. >
  57. <van-icon name="cross" class="van-uploader__preview-delete-icon" />
  58. </view>
  59. </view>
  60. <!-- 上传样式 -->
  61. <block wx:if="{{ isInCount }}">
  62. <view class="van-uploader__slot" bindtap="startUpload">
  63. <slot />
  64. </view>
  65. <!-- 默认上传样式 -->
  66. <view
  67. wx:if="{{ showUpload }}"
  68. class="van-uploader__upload {{ disabled ? 'van-uploader__upload--disabled': ''}}"
  69. style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
  70. bindtap="startUpload"
  71. >
  72. <van-icon name="{{ uploadIcon }}" class="van-uploader__upload-icon" />
  73. <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>
  74. </view>
  75. </block>
  76. </view>
  77. </view>