293 lines
11 KiB
JavaScript
293 lines
11 KiB
JavaScript
var e = require("../../@babel/runtime/helpers/interopRequireDefault")(require("../../@babel/runtime/regenerator")), t = require("../../@babel/runtime/helpers/asyncToGenerator"), a = require("../../@babel/runtime/helpers/toConsumableArray"), i = require("../../@babel/runtime/helpers/defineProperty");
|
|
|
|
Component({
|
|
options: {
|
|
multipleSlots: !0
|
|
},
|
|
properties: {
|
|
previewSize: {
|
|
type: Number,
|
|
value: 100
|
|
},
|
|
defaultGoodsId: {
|
|
type: Number,
|
|
value: 0,
|
|
observer: function(e) {
|
|
console.log("id", e), null == this.data.goodsId ? this.setData({
|
|
goodsId: e
|
|
}) : (console.log("来新的了"), this.setData({
|
|
goodsId: e,
|
|
newGoods: !0
|
|
}));
|
|
}
|
|
},
|
|
defaultImgUrlList: {
|
|
type: Array,
|
|
value: [],
|
|
observer: function(e) {
|
|
null != e && e.length && !this.data.imageUrlList.length ? (console.log("初始化-defaultImgUrlList"),
|
|
this.setData({
|
|
imageUrlList: e
|
|
})) : (console.log("未初始化aaa-defaultImgUrlList"), this.data.newGoods && (console.log("初始化bbb-defaultImgUrlList"),
|
|
this.setData({
|
|
imageUrlList: e
|
|
})));
|
|
}
|
|
},
|
|
defaultImgList: {
|
|
type: Array,
|
|
value: [],
|
|
observer: function(e) {
|
|
if (null != e && e.length && !this.data.dragImgList.length) {
|
|
console.log("初始化-defaultImgList");
|
|
var t = this.getDragImgList(e);
|
|
this.setUploaPosition(t.length), this.setData({
|
|
dragImgList: t
|
|
});
|
|
} else if (console.log("未初始化aaa-defaultImgList"), this.data.newGoods) {
|
|
console.log("初始化bbb-defaultImgList");
|
|
var a = this.getDragImgList(e);
|
|
this.setUploaPosition(a.length), this.setData({
|
|
dragImgList: a
|
|
});
|
|
}
|
|
}
|
|
},
|
|
maxCount: {
|
|
type: Number,
|
|
value: 9
|
|
},
|
|
columns: {
|
|
type: Number,
|
|
value: 3
|
|
},
|
|
gap: {
|
|
type: Number,
|
|
value: 9
|
|
},
|
|
deleteStyle: {
|
|
type: String,
|
|
value: ""
|
|
}
|
|
},
|
|
data: {
|
|
goodsId: null,
|
|
newGoods: !1,
|
|
imageUrlList: [],
|
|
dragImgList: [],
|
|
containerRes: {
|
|
top: 0,
|
|
left: 0,
|
|
width: 0,
|
|
height: 0
|
|
},
|
|
currentKey: -1,
|
|
currentIndex: -1,
|
|
tranX: 0,
|
|
tranY: 0,
|
|
uploadPosition: {
|
|
tranX: 0,
|
|
tranY: 0
|
|
}
|
|
},
|
|
lifetimes: {
|
|
ready: function() {
|
|
var e = this;
|
|
this.createSelectorQuery().select(".drag-container").boundingClientRect(function(t) {
|
|
var a, r = t.top, n = t.left;
|
|
e.setData((i(a = {}, "containerRes.top", r), i(a, "containerRes.left", n), a));
|
|
}).exec();
|
|
}
|
|
},
|
|
methods: {
|
|
longPress: function(e) {
|
|
var t = e.mark.index, a = e.touches[0], i = a.pageX, r = a.pageY, n = this.data, o = n.previewSize, s = n.containerRes, l = s.top, u = s.left;
|
|
this.setData({
|
|
currentIndex: t,
|
|
tranX: i - o / 2 - u,
|
|
tranY: r - o / 2 - l
|
|
});
|
|
},
|
|
touchMove: function(e) {
|
|
if (!(this.data.currentIndex < 0)) {
|
|
var t = e.touches[0], a = t.pageX, i = t.pageY, r = this.data, n = r.previewSize, o = r.containerRes, s = o.top, l = a - n / 2 - o.left, u = i - n / 2 - s;
|
|
this.setData({
|
|
tranX: l,
|
|
tranY: u
|
|
});
|
|
var g = e.mark.key, c = this.getMoveKey(l, u);
|
|
g !== c && this.data.currentKey !== g && (this.data.currentKey = g, this.replace(g, c));
|
|
}
|
|
},
|
|
getMoveKey: function(e, t) {
|
|
var a = this.data, i = a.dragImgList, r = a.previewSize, n = a.columns, o = function(e, t) {
|
|
var a = Math.round(e / r);
|
|
return a >= t ? t - 1 : a < 0 ? 0 : a;
|
|
}, s = n * o(t, Math.ceil(i.length / n)) + o(e, n);
|
|
return s >= i.length ? i.length - 1 : s;
|
|
},
|
|
replace: function(e, t) {
|
|
var a = this.data.dragImgList;
|
|
console.log("dragImgList", a), a.forEach(function(a) {
|
|
e < t ? a.key > e && a.key <= t ? a.key-- : a.key === e && (a.key = t) : e > t && (a.key >= t && a.key < e ? a.key++ : a.key === e && (a.key = t));
|
|
}), this.getListPosition(a);
|
|
},
|
|
getListPosition: function(e) {
|
|
var t = this.data, a = t.previewSize, i = t.columns, r = t.gap, n = e.map(function(e) {
|
|
return e.tranX = (a + r) * (e.key % i), e.tranY = Math.floor(e.key / i) * (a + r),
|
|
e;
|
|
});
|
|
this.setData({
|
|
dragImgList: n
|
|
}), this.updateEvent(n);
|
|
},
|
|
touchEnd: function() {
|
|
this.setData({
|
|
tranX: 0,
|
|
tranY: 0,
|
|
currentIndex: -1
|
|
}), this.data.currentKey = -1;
|
|
},
|
|
updateEvent: function(e) {
|
|
console.log(e);
|
|
var t = a(e).sort(function(e, t) {
|
|
return e.key - t.key;
|
|
}).map(function(e) {
|
|
return {
|
|
src: e.src,
|
|
image_id: e.imageId
|
|
};
|
|
});
|
|
this.triggerEvent("updateImageList", {
|
|
list: t
|
|
});
|
|
},
|
|
preview: function(e) {
|
|
var t = e.currentTarget.dataset.src;
|
|
console.log(t);
|
|
var a = this.data.imageUrlList;
|
|
console.log(a), wx.previewImage({
|
|
current: t,
|
|
urls: a
|
|
});
|
|
},
|
|
uploadImage: function() {
|
|
var a = this;
|
|
return t(e.default.mark(function t() {
|
|
var i, r, n, o, s, l, u;
|
|
return e.default.wrap(function(e) {
|
|
for (;;) switch (e.prev = e.next) {
|
|
case 0:
|
|
return i = a, r = a.data, n = r.dragImgList, o = r.maxCount, e.prev = 2, e.next = 5,
|
|
wx.chooseMedia({
|
|
count: o - n.length,
|
|
mediaType: [ "image" ],
|
|
sourceType: [ "album", "camera" ],
|
|
maxDuration: 30,
|
|
sizeType: [ "compressed" ],
|
|
camera: "back"
|
|
});
|
|
|
|
case 5:
|
|
if (s = e.sent, console.log("res", s), "chooseMedia:ok" == s.errMsg) {
|
|
e.next = 10;
|
|
break;
|
|
}
|
|
return wx.showToast({
|
|
title: "上传失败",
|
|
icon: "none",
|
|
duration: 3e3
|
|
}), e.abrupt("return");
|
|
|
|
case 10:
|
|
if ("image" == s.type) {
|
|
e.next = 13;
|
|
break;
|
|
}
|
|
return wx.showToast({
|
|
title: "只能上传图片类型",
|
|
icon: "none",
|
|
duration: 3e3
|
|
}), e.abrupt("return");
|
|
|
|
case 13:
|
|
for (wx.showLoading({
|
|
title: "图片上传中"
|
|
}), l = s.tempFiles, u = 0; u < l.length; u++) wx.uploadFile({
|
|
name: "iFile",
|
|
url: "https://wxminiapp.19year.cn/index.php?s=/api/upload/image&wxapp_id=10001",
|
|
filePath: l[u].tempFilePath,
|
|
success: function(e) {
|
|
console.log("resp", e);
|
|
var t = JSON.parse(e.data);
|
|
if (console.log("resp", t), 1 == t.code) {
|
|
var a = i.data.imageUrlList, r = {
|
|
file_path: t.data.file_path,
|
|
image_id: parseInt(t.data.file_id)
|
|
};
|
|
console.log("imageObj", r);
|
|
var o = i.getDragImgList([ r ], !1);
|
|
n = n.concat(o), i.setUploaPosition(n.length), a.push(t.data.file_path), i.setData({
|
|
dragImgList: n,
|
|
imageUrlList: a
|
|
}), i.updateEvent(n), wx.hideLoading();
|
|
} else wx.hideLoading(), wx.showModal({
|
|
title: "提示",
|
|
content: "上传失败",
|
|
showCancel: !1
|
|
});
|
|
}
|
|
});
|
|
e.next = 21;
|
|
break;
|
|
|
|
case 18:
|
|
e.prev = 18, e.t0 = e.catch(2), console.log(e.t0);
|
|
|
|
case 21:
|
|
case "end":
|
|
return e.stop();
|
|
}
|
|
}, t, null, [ [ 2, 18 ] ]);
|
|
}))();
|
|
},
|
|
getContainerRect: function(e) {
|
|
var t = this.data, a = t.columns, i = t.previewSize, r = t.maxCount, n = t.gap, o = e === r ? e : e + 1, s = Math.ceil(o / a);
|
|
return {
|
|
width: a * i + (a - 1) * n,
|
|
height: s * i + n * (s - 1)
|
|
};
|
|
},
|
|
getDragImgList: function(e) {
|
|
var t = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], a = this.data, i = a.dragImgList, r = a.previewSize, n = a.columns, o = a.gap;
|
|
return e.map(function(e, a) {
|
|
var s = (t ? 0 : i.length) + a;
|
|
return {
|
|
tranX: (r + o) * (s % n),
|
|
tranY: Math.floor(s / n) * (r + o),
|
|
src: e.file_path,
|
|
id: s,
|
|
key: s,
|
|
imageId: e.image_id
|
|
};
|
|
});
|
|
},
|
|
setUploaPosition: function(e) {
|
|
var t, a = this.data, r = a.previewSize, n = a.columns, o = a.gap, s = {
|
|
tranX: e % n * (r + o),
|
|
tranY: Math.floor(e / n) * (r + o)
|
|
}, l = this.getContainerRect(e), u = l.width, g = l.height;
|
|
this.setData((i(t = {
|
|
uploadPosition: s
|
|
}, "containerRes.width", u), i(t, "containerRes.height", g), t));
|
|
},
|
|
deleteImg: function(e) {
|
|
var t = e.mark.key, a = this.data.dragImgList.filter(function(e) {
|
|
return e.key !== t;
|
|
});
|
|
a.forEach(function(e) {
|
|
e.key > t && e.key--;
|
|
}), this.getListPosition(a), this.setUploaPosition(a.length);
|
|
}
|
|
}
|
|
}); |