upload-image.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. "use strict";
  2. const common_vendor = require("../../../common/vendor.js");
  3. const sheep_index = require("../../index.js");
  4. require("../../url/index.js");
  5. require("../../store/index.js");
  6. require("../../store/app.js");
  7. require("../../api/promotion/diy.js");
  8. require("../../request/index.js");
  9. require("../../config/index.js");
  10. require("../../platform/index.js");
  11. require("../../platform/provider/wechat/index.js");
  12. require("../../platform/provider/wechat/miniProgram.js");
  13. require("../../api/member/auth.js");
  14. require("../../api/member/social.js");
  15. require("../../api/member/user.js");
  16. require("../../platform/provider/apple/index.js");
  17. require("../../platform/share.js");
  18. require("../../router/index.js");
  19. require("../../hooks/useModal.js");
  20. require("../../helper/index.js");
  21. require("../../helper/test.js");
  22. require("../../helper/digit.js");
  23. require("../../helper/throttle.js");
  24. require("../../platform/pay.js");
  25. require("../../api/pay/order.js");
  26. require("../../store/user.js");
  27. require("../../store/cart.js");
  28. require("../../api/trade/cart.js");
  29. require("../../api/pay/wallet.js");
  30. require("../../api/trade/order.js");
  31. require("../../api/promotion/coupon.js");
  32. require("../../store/sys.js");
  33. require("../../store/modal.js");
  34. require("../../config/zIndex.js");
  35. const _sfc_main = {
  36. name: "uploadImage",
  37. emits: ["uploadFiles", "choose", "delFile"],
  38. props: {
  39. filesList: {
  40. type: [Array, String],
  41. default() {
  42. return [];
  43. }
  44. },
  45. disabled: {
  46. type: Boolean,
  47. default: false
  48. },
  49. disablePreview: {
  50. type: Boolean,
  51. default: false
  52. },
  53. limit: {
  54. type: [Number, String],
  55. default: 9
  56. },
  57. imageStyles: {
  58. type: Object,
  59. default() {
  60. return {
  61. width: "auto",
  62. height: "auto",
  63. border: {}
  64. };
  65. }
  66. },
  67. delIcon: {
  68. type: Boolean,
  69. default: true
  70. },
  71. readonly: {
  72. type: Boolean,
  73. default: false
  74. }
  75. },
  76. computed: {
  77. list() {
  78. if (typeof this.filesList === "string") {
  79. if (this.filesList) {
  80. return [this.filesList];
  81. } else {
  82. return [];
  83. }
  84. }
  85. return this.filesList;
  86. },
  87. styles() {
  88. let styles = {
  89. width: "auto",
  90. height: "auto",
  91. border: {}
  92. };
  93. return Object.assign(styles, this.imageStyles);
  94. },
  95. boxStyle() {
  96. const { width = "auto", height = "auto" } = this.styles;
  97. let obj = {};
  98. if (height === "auto") {
  99. if (width !== "auto") {
  100. obj.height = this.value2px(width);
  101. obj["padding-top"] = 0;
  102. } else {
  103. obj.height = 0;
  104. }
  105. } else {
  106. obj.height = this.value2px(height);
  107. obj["padding-top"] = 0;
  108. }
  109. if (width === "auto") {
  110. if (height !== "auto") {
  111. obj.width = this.value2px(height);
  112. } else {
  113. obj.width = "33.3%";
  114. }
  115. } else {
  116. obj.width = this.value2px(width);
  117. }
  118. let classles = "";
  119. for (let i in obj) {
  120. classles += `${i}:${obj[i]};`;
  121. }
  122. return classles;
  123. },
  124. borderStyle() {
  125. let { border } = this.styles;
  126. let obj = {};
  127. const widthDefaultValue = 1;
  128. const radiusDefaultValue = 3;
  129. if (typeof border === "boolean") {
  130. obj.border = border ? "1px #eee solid" : "none";
  131. } else {
  132. let width = border && border.width || widthDefaultValue;
  133. width = this.value2px(width);
  134. let radius = border && border.radius || radiusDefaultValue;
  135. radius = this.value2px(radius);
  136. obj = {
  137. "border-width": width,
  138. "border-style": border && border.style || "solid",
  139. "border-color": border && border.color || "#eee",
  140. "border-radius": radius
  141. };
  142. }
  143. let classles = "";
  144. for (let i in obj) {
  145. classles += `${i}:${obj[i]};`;
  146. }
  147. return classles;
  148. }
  149. },
  150. methods: {
  151. getImageUrl(url) {
  152. if ("blob:http:" === url.substr(0, 10)) {
  153. return url;
  154. } else {
  155. return sheep_index.sheep.$url.cdn(url);
  156. }
  157. },
  158. uploadFiles(item, index) {
  159. this.$emit("uploadFiles", item);
  160. },
  161. choose() {
  162. this.$emit("choose");
  163. },
  164. delFile(index) {
  165. this.$emit("delFile", index);
  166. },
  167. previewImage(img, index) {
  168. let urls = [];
  169. if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) {
  170. this.$emit("choose");
  171. }
  172. if (this.disablePreview)
  173. return;
  174. this.list.forEach((i) => {
  175. urls.push(this.getImageUrl(i));
  176. });
  177. common_vendor.index.previewImage({
  178. urls,
  179. current: index
  180. });
  181. },
  182. value2px(value) {
  183. if (typeof value === "number") {
  184. value += "px";
  185. } else {
  186. if (value.indexOf("%") === -1) {
  187. value = value.indexOf("px") !== -1 ? value : value + "px";
  188. }
  189. }
  190. return value;
  191. }
  192. }
  193. };
  194. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  195. return common_vendor.e({
  196. a: common_vendor.f($options.list, (url, index, i0) => {
  197. return common_vendor.e({
  198. a: $options.getImageUrl(url),
  199. b: common_vendor.o(($event) => $options.previewImage(url, index), index)
  200. }, $props.delIcon && !$props.readonly ? {
  201. c: common_vendor.o(($event) => $options.delFile(index), index)
  202. } : {}, {
  203. d: index
  204. });
  205. }),
  206. b: $props.delIcon && !$props.readonly,
  207. c: common_vendor.s($options.borderStyle),
  208. d: common_vendor.s($options.boxStyle),
  209. e: $options.list.length < $props.limit && !$props.readonly
  210. }, $options.list.length < $props.limit && !$props.readonly ? {
  211. f: common_vendor.s($options.borderStyle),
  212. g: common_vendor.o((...args) => $options.choose && $options.choose(...args)),
  213. h: common_vendor.s($options.boxStyle)
  214. } : {});
  215. }
  216. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/RuHu.Xu/Desktop/mall-newfeifan-zx-app/sheep/components/s-uploader/upload-image.vue"]]);
  217. wx.createComponent(Component);