upload.wxml 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <wxs src="../common/utils.wxs" module="_" />
  2. <wxs src="./upload.wxs" module="this" />
  3. <view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
  4. <t-grid gutter="{{gutter}}" border="{{false}}" align="center" column="{{column}}">
  5. <!-- 图片/视频 -->
  6. <t-grid-item
  7. wx:for="{{customFiles}}"
  8. wx:key="index"
  9. wx:for-item="file"
  10. t-class="{{classPrefix}}__grid {{classPrefix}}__grid-file"
  11. t-class-content="{{classPrefix}}__grid-content"
  12. aria-role="presentation"
  13. >
  14. <view
  15. class="{{classPrefix}}__wrapper"
  16. style="{{gridItemStyle}}"
  17. aria-role="{{ariaRole || this.getWrapperAriaRole(file)}}"
  18. aria-label="{{ariaLabel || this.getWrapperAriaLabel(file)}}"
  19. >
  20. <t-image
  21. wx:if="{{file.type !== 'video'}}"
  22. data-file="{{file}}"
  23. bind:tap="onProofTap"
  24. data-index="{{index}}"
  25. t-class="{{classPrefix}}__thumbnail"
  26. style="{{imageProps.style || ''}}"
  27. src="{{file.url}}"
  28. mode="{{imageProps.mode || 'aspectFill'}}"
  29. error="{{imageProps.error || 'default'}}"
  30. lazy="{{imageProps.lazy || false}}"
  31. loading="{{imageProps.loading || 'default'}}"
  32. shape="{{imageProps.shape || 'round'}}"
  33. webp="{{imageProps.webp || false}}"
  34. showMenuByLongpress="{{imageProps.showMenuByLongpress || false}}"
  35. />
  36. <video
  37. data-file="{{file}}"
  38. bind:tap="onFileClick"
  39. wx:if="{{file.type === 'video'}}"
  40. class="{{classPrefix}}__thumbnail"
  41. src="{{file.url}}"
  42. controls
  43. autoplay="{{false}}"
  44. objectFit="contain"
  45. />
  46. <!-- 失败重试 -->
  47. <view
  48. data-index="{{index}}"
  49. wx:if="{{file.status && file.status != 'done'}}"
  50. class="{{classPrefix}}__progress-mask"
  51. data-file="{{file}}"
  52. bind:tap="onFileClick"
  53. >
  54. <block wx:if="{{file.status == 'loading'}}">
  55. <t-icon t-class="{{classPrefix}}__progress-loading" name="loading" size="24" aria-hidden />
  56. <view class="{{classPrefix}}__progress-text">{{file.percent ? file.percent + '%' : '上传中...'}}</view>
  57. </block>
  58. <t-icon wx:else name="{{file.status == 'reload' ? 'refresh' : 'close-circle'}}" size="24" aria-hidden />
  59. <view wx:if="{{file.status == 'reload' || file.status == 'failed'}}" class="{{classPrefix}}__progress-text">
  60. {{file.status == 'reload' ? '重新上传' : '上传失败'}}
  61. </view>
  62. </view>
  63. </view>
  64. <!-- 删除 -->
  65. <view
  66. class="{{classPrefix}}__close-btn hotspot-expanded"
  67. bindtap="onDelete"
  68. data-index="{{index}}"
  69. aria-role="button"
  70. aria-label="删除"
  71. >
  72. <t-icon name="close" size="16" color="#fff" />
  73. </view>
  74. </t-grid-item>
  75. <!-- 添加 -->
  76. <t-grid-item
  77. wx:if="{{customLimit > 0}}"
  78. t-class="{{classPrefix}}__grid"
  79. t-class-content="{{classPrefix}}__grid-content"
  80. bindclick="onAddTap"
  81. aria-label="上传"
  82. >
  83. <view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}">
  84. <slot name="add-content" />
  85. <block wx:if="{{addContent}}">{{addContent}}</block>
  86. <view wx:else class="{{classPrefix}}__add-icon">
  87. <t-icon name="add" />
  88. </view>
  89. </view>
  90. </t-grid-item>
  91. </t-grid>
  92. </view>