index.wxml 2.9 KB

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