SkuImgUploader.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports["default"] = void 0;
  5. var _utils = require("../../utils");
  6. var _icon = _interopRequireDefault(require("../../icon"));
  7. var _loading = _interopRequireDefault(require("../../loading"));
  8. var _uploader = _interopRequireDefault(require("../../uploader"));
  9. var _use = (0, _utils.use)('sku-img-uploader'),
  10. sfc = _use[0],
  11. bem = _use[1];
  12. var _default = sfc({
  13. props: {
  14. value: String,
  15. uploadImg: Function,
  16. maxSize: {
  17. type: Number,
  18. "default": 6
  19. }
  20. },
  21. data: function data() {
  22. return {
  23. // 正在上传的图片 base64
  24. paddingImg: ''
  25. };
  26. },
  27. computed: {
  28. imgList: function imgList() {
  29. return this.value && !this.paddingImg ? [this.value] : [];
  30. }
  31. },
  32. methods: {
  33. afterReadFile: function afterReadFile(file) {
  34. var _this = this;
  35. // 上传文件
  36. this.paddingImg = file.content;
  37. this.uploadImg(file.file, file.content).then(function (img) {
  38. _this.$emit('input', img);
  39. _this.$nextTick(function () {
  40. _this.paddingImg = '';
  41. });
  42. })["catch"](function () {
  43. _this.paddingImg = '';
  44. });
  45. },
  46. onOversize: function onOversize() {
  47. this.$toast("\u6700\u5927\u53EF\u4E0A\u4F20\u56FE\u7247\u4E3A" + this.maxSize + "MB\uFF0C\u8BF7\u5C1D\u8BD5\u538B\u7F29\u56FE\u7247\u5C3A\u5BF8");
  48. }
  49. },
  50. render: function render(h) {
  51. var _this2 = this;
  52. var imgList = this.imgList,
  53. paddingImg = this.paddingImg;
  54. var ImageList = (paddingImg || imgList.length > 0) && h("div", {
  55. "class": "van-clearfix"
  56. }, [imgList.map(function (img) {
  57. return h("div", {
  58. "class": bem('img')
  59. }, [h("img", {
  60. "attrs": {
  61. "src": img
  62. }
  63. }), h(_icon["default"], {
  64. "attrs": {
  65. "name": "clear"
  66. },
  67. "class": bem('delete'),
  68. "on": {
  69. "click": function click() {
  70. _this2.$emit('input', '');
  71. }
  72. }
  73. })]);
  74. }), paddingImg && h("div", {
  75. "class": bem('img')
  76. }, [h("img", {
  77. "attrs": {
  78. "src": paddingImg
  79. }
  80. }), h(_loading["default"], {
  81. "attrs": {
  82. "type": "spinner"
  83. },
  84. "class": bem('uploading')
  85. })])]);
  86. return h("div", {
  87. "class": bem()
  88. }, [h(_uploader["default"], {
  89. "attrs": {
  90. "disabled": !!paddingImg,
  91. "afterRead": this.afterReadFile,
  92. "maxSize": this.maxSize * 1024 * 1024
  93. },
  94. "on": {
  95. "oversize": this.onOversize
  96. }
  97. }, [h("div", {
  98. "class": bem('header')
  99. }, [paddingImg ? h("div", ["\u6B63\u5728\u4E0A\u4F20..."]) : [h(_icon["default"], {
  100. "attrs": {
  101. "name": "photograph"
  102. }
  103. }), h("span", {
  104. "class": "label"
  105. }, [this.value ? '重拍' : '拍照', " \u6216 "]), h(_icon["default"], {
  106. "attrs": {
  107. "name": "photo"
  108. }
  109. }), h("span", {
  110. "class": "label"
  111. }, [this.value ? '重新选择照片' : '选择照片'])]])]), ImageList]);
  112. }
  113. });
  114. exports["default"] = _default;