upload-image.js 6.0 KB

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