|
|
@@ -31,33 +31,125 @@ export default {
|
|
|
Modal,
|
|
|
},
|
|
|
|
|
|
- props: {
|
|
|
- 'className':{
|
|
|
- type: String,
|
|
|
- default: null,
|
|
|
- },
|
|
|
- 'imageName':{
|
|
|
- type: String,
|
|
|
- default: null,
|
|
|
- },
|
|
|
- },
|
|
|
|
|
|
data: function () {
|
|
|
return {
|
|
|
'src': null,
|
|
|
modal: false,
|
|
|
+ authSrc:null,
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ 'authSrc': function (newValue, oldValue) {
|
|
|
+ if (newValue != oldValue) {
|
|
|
+ this.loadImage(newValue);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ this.noImage = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJuby'
|
|
|
+ + 'I/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6'
|
|
|
+ + 'Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTk'
|
|
|
+ + '5NzQ5MzQ4ODIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0'
|
|
|
+ + 'iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjcwNzciIHhtbG5'
|
|
|
+ + 'zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9I'
|
|
|
+ + 'jIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJN'
|
|
|
+ + 'NTc2IDkyOGMtNiAwLTExLjktMS43LTE3LjEtNS05LjMtNS45LTE0LjktMTYuMS0xNC45LTI3VjU1NC4zY'
|
|
|
+ + 'zAtMTIuNCA3LjEtMjMuNiAxOC4zLTI4LjlsMjg4LTEzNi4xYzkuOS00LjcgMjEuNS00IDMwLjggMS45czE'
|
|
|
+ + '0LjkgMTYuMSAxNC45IDI3djM0MS43YzAgMTIuNC03LjEgMjMuNi0xOC4zIDI4LjlsLTI4OCAxMzYuMWMtNC'
|
|
|
+ + '40IDIuMS05IDMuMS0xMy43IDMuMXogbTMyLTM1My41djI3MWwyMjQtMTA1Ljh2LTI3MUw2MDggNTc0LjV6TT'
|
|
|
+ + 'Q0OCA5MjhjLTQuNyAwLTkuMy0xLTEzLjctMy4xbC0yODgtMTM2LjFjLTExLjItNS4zLTE4LjMtMTYuNi0xOC4'
|
|
|
+ + 'zLTI4LjlWNDE4LjJjMC0xMSA1LjYtMjEuMiAxNC45LTI3IDkuMy01LjkgMjAuOS02LjYgMzAuOC0xLjlsMjg4I'
|
|
|
+ + 'DEzNi4xYzExLjIgNS4zIDE4LjMgMTYuNiAxOC4zIDI4LjlWODk2YzAgMTEtNS42IDIxLjItMTQuOSAyNy01LjIg'
|
|
|
+ + 'My4zLTExLjEgNS0xNy4xIDV6TTE5MiA3MzkuN2wyMjQgMTA1Ljh2LTI3MUwxOTIgNDY4Ljd2Mjcxek01MTIgNTA'
|
|
|
+ + 'xLjFjLTQuNyAwLTkuNC0xLTEzLjgtMy4xbC0zNTItMTY4LjFjLTExLjItNS40LTE4LjMtMTYuNy0xOC4yLTI5LjI'
|
|
|
+ + 'gMC4xLTEyLjQgNy40LTIzLjcgMTguOC0yOC44bDM1Mi0xNTkuOWM4LjQtMy44IDE4LjEtMy44IDI2LjUgMGwzNTI'
|
|
|
+ + 'gMTU5LjljMTEuMyA1LjEgMTguNiAxNi40IDE4LjggMjguOCAwLjEgMTIuNC03IDIzLjgtMTguMiAyOS4yTDUyNS4'
|
|
|
+ + '4IDQ5OGMtNC40IDItOS4xIDMuMS0xMy44IDMuMXpNMjM1LjggMzAxLjdMNTEyIDQzMy42bDI3Ni4yLTEzMS45TDUx'
|
|
|
+ + 'MiAxNzYuMiAyMzUuOCAzMDEuN3oiIHAtaWQ9IjcwNzgiPjwvcGF0aD48L3N2Zz4=';
|
|
|
+
|
|
|
+ this.errorImage = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhR'
|
|
|
+ + 'E9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1'
|
|
|
+ + 'NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTk5NzQ4MDIyMDk5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDE'
|
|
|
+ + 'wMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0MjQiIHht'
|
|
|
+ + 'bG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+P'
|
|
|
+ + 'HN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODQ4IDg2NGwtOTYgMGMtOC44MzIgMC0xNi'
|
|
|
+ + '03LjE2OC0xNi0xNnM3LjE2OC0xNiAxNi0xNmw4MCAwIDAtODBjMC04LjgzMiA3LjE2OC0xNiAxNi0xNiA4LjggMCAxNiA3LjE'
|
|
|
+ + '2OCAxNiAxNmwwIDk2YzAgOC44MzItNy4yIDE2LTE2IDE2ek04NDggNjcyYy04LjgzMiAwLTE2LTcuMTY4LTE2LTE2bDAtOTZj'
|
|
|
+ + 'MC04LjgzMiA3LjE2OC0xNiAxNi0xNiA4LjggMCAxNiA3LjE2OCAxNiAxNmwwIDk2YzAgOC44MzItNy4yIDE2LTE2IDE2ek04N'
|
|
|
+ + 'DggNDgwYy04LjgzMiAwLTE2LTcuMTY4LTE2LTE2bDAtOTZjMC04LjgzMiA3LjE2OC0xNiAxNi0xNiA4LjggMCAxNiA3LjE2OC'
|
|
|
+ + 'AxNiAxNmwwIDk2YzAgOC44MzItNy4yIDE2LTE2IDE2ek04NDggMjg4Yy04LjgzMiAwLTE2LTcuMTY4LTE2LTE2bDAtODAtODA'
|
|
|
+ + 'gMGMtOC44MzIgMC0xNi03LjE2OC0xNi0xNnM3LjE2OC0xNiAxNi0xNmw5NiAwYzguOCAwIDE2IDcuMTY4IDE2IDE2bDAgOTZj'
|
|
|
+ + 'MCA4LjgzMi03LjIgMTYtMTYgMTZ6TTY1NiA4NjRsLTk2IDBjLTguODMyIDAtMTYtNy4xNjgtMTYtMTZzNy4xNjgtMTYgMTYtM'
|
|
|
+ + 'TZsOTYgMGM4LjggMCAxNiA3LjE2OCAxNiAxNnMtNy4yIDE2LTE2IDE2ek02NTYgMTkybC05NiAwYy04LjgzMiAwLTE2LTcuMT'
|
|
|
+ + 'Y4LTE2LTE2czcuMTY4LTE2IDE2LTE2bDk2IDBjOC44IDAgMTYgNy4xNjggMTYgMTZzLTcuMiAxNi0xNiAxNnpNNDY0IDE5Mmw'
|
|
|
+ + 'tOTYgMGMtOC44MzIgMC0xNi03LjE2OC0xNi0xNnM3LjE2OC0xNiAxNi0xNmw5NiAwYzguOCAwIDE2IDcuMTY4IDE2IDE2cy03'
|
|
|
+ + 'LjIgMTYtMTYgMTZ6TTI3MiA4NjRsLTk2IDBjLTguODMyIDAtMTYtNy4xNjgtMTYtMTZsMC05NmMwLTguODMyIDcuMTY4LTE2I'
|
|
|
+ + 'DE2LTE2czE2IDcuMTY4IDE2IDE2bDAgODAgODAgMGM4LjgzMiAwIDE2IDcuMTY4IDE2IDE2cy03LjE2OCAxNi0xNiAxNnpNMj'
|
|
|
+ + 'cyIDE5MmwtODAgMCAwIDgwYzAgOC44MzItNy4xNjggMTYtMTYgMTZzLTE2LTcuMTY4LTE2LTE2bDAtOTZjMC04LjgzMiA3LjE'
|
|
|
+ + '2OC0xNiAxNi0xNmw5NiAwYzguODMyIDAgMTYgNy4xNjggMTYgMTZzLTcuMTY4IDE2LTE2IDE2ek0xNzYgMzUyYzguODMyIDAg'
|
|
|
+ + 'MTYgNy4xNjggMTYgMTZsMCA5NmMwIDguODMyLTcuMTY4IDE2LTE2IDE2cy0xNi03LjE2OC0xNi0xNmwwLTk2YzAtOC44MzIgN'
|
|
|
+ + 'y4xNjgtMTYgMTYtMTZ6TTE3NiA1NDRjOC44MzIgMCAxNiA3LjE2OCAxNiAxNmwwIDk2YzAgOC44MzItNy4xNjggMTYtMTYgMT'
|
|
|
+ + 'ZzLTE2LTcuMTY4LTE2LTE2bDAtOTZjMC04LjgzMiA3LjE2OC0xNiAxNi0xNnpNNjYzLjU1MiA2MzEuMTM2bC0zMi40NDggMzI'
|
|
|
+ + 'uNDQ4Yy01Ljk1MiA1Ljk4NC0xNS42MTYgNS45ODQtMjEuNiAwbC05MS44NC05MS44NC05MS44NCA5MS44NGMtNS45ODQgNS45'
|
|
|
+ + 'ODQtMTUuNjE2IDUuOTg0LTIxLjYgMGwtMzIuNDE2LTMyLjQ0OGMtNS45ODQtNS45ODQtNS45ODQtMTUuNjE2IDAtMjEuNmw5M'
|
|
|
+ + 'S44NzItOTEuODQtOTEuODcyLTkxLjg0Yy01Ljk4NC01Ljk1Mi01Ljk4NC0xNS42MTYgMC0yMS42bDMyLjQxNi0zMi40MTZjNS'
|
|
|
+ + '45ODQtNS45ODQgMTUuNjE2LTUuOTg0IDIxLjYgMGw5MS44NCA5MS44NCA5MS44NC05MS44NGM1Ljk4NC01Ljk4NCAxNS42NDg'
|
|
|
+ + 'tNS45ODQgMjEuNiAwbDMyLjQ0OCAzMi40MTZjNS45NTIgNS45ODQgNS45NTIgMTUuNjQ4IDAgMjEuNmwtOTEuODcyIDkxLjg0'
|
|
|
+ + 'IDkxLjg3MiA5MS44NGM1Ljk1MiA1Ljk1MiA1Ljk1MiAxNS42MTYgMCAyMS42ek0zNjggODMybDk2IDBjOC44IDAgMTYgNy4xN'
|
|
|
+ + 'jggMTYgMTZzLTcuMiAxNi0xNiAxNmwtOTYgMGMtOC44MzIgMC0xNi03LjE2OC0xNi0xNnM3LjE2OC0xNiAxNi0xNnoiIHAtaW'
|
|
|
+ + 'Q9IjQ0MjUiPjwvcGF0aD48L3N2Zz4=';
|
|
|
+
|
|
|
+ this.loadingImage = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhR'
|
|
|
+ + 'E9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWR'
|
|
|
+ + 'y8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTk5NzQ3OTg0Nzc1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgM'
|
|
|
+ + 'TAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2ODgiIHhtbG5zOnhsa'
|
|
|
+ + 'W5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5c'
|
|
|
+ + 'GU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTEwLjIyMjIyMiA0NTUuMTExMTExdjU2Ljg4ODg4OWgtMjI3L'
|
|
|
+ + 'jU1NTU1NVY0NTUuMTExMTExaDIyNy41NTU1NTV6TTI4NC40NDQ0NDQgNDU1LjExMTExMXY1Ni44ODg4ODlINTYuODg4ODg5VjQ1N'
|
|
|
+ + 'S4xMTExMTFoMjI3LjU1NTU1NXogbTE3MC42NjY2NjcgMjI3LjU1NTU1Nmg1Ni44ODg4ODl2MjI3LjU1NTU1NUg0NTUuMTExMTExd'
|
|
|
+ + 'i0yMjcuNTU1NTU1ek00NTUuMTExMTExIDU2Ljg4ODg4OWg1Ni44ODg4ODl2MjI3LjU1NTU1NUg0NTUuMTExMTExVjU2Ljg4ODg4O'
|
|
|
+ + 'XpNNzk2LjQ0NDQ0NCA3NTYuNjIyMjIybC0zOS44MjIyMjIgMzkuODIyMjIyLTE1OS4yODg4ODktMTU5LjI4ODg4OCAzOS44MjIyM'
|
|
|
+ + 'jMtMzkuODIyMjIzIDE1OS4yODg4ODggMTU5LjI4ODg4OXpNMzY5Ljc3Nzc3OCAzMjkuOTU1NTU2bC0zOS44MjIyMjIgMzkuODIyM'
|
|
|
+ + 'jIyTDE3MC42NjY2NjcgMjEwLjQ4ODg4OWwzOS44MjIyMjItMzkuODIyMjIyIDE1OS4yODg4ODkgMTU5LjI4ODg4OXogbS0zOS44M'
|
|
|
+ + 'jIyMjIgMjY3LjM3Nzc3N2wzOS44MjIyMjIgMzkuODIyMjIzTDIxMC40ODg4ODkgNzk2LjQ0NDQ0NGwtMzkuODIyMjIyLTM5LjgyM'
|
|
|
+ + 'jIyMiAxNTkuMjg4ODg5LTE1OS4yODg4ODl6TTc1Ni42MjIyMjIgMTcwLjY2NjY2N2wzOS44MjIyMjIgMzkuODIyMjIyLTE1OS4yO'
|
|
|
+ + 'Dg4ODggMTU5LjI4ODg4OS0zOS44MjIyMjMtMzkuODIyMjIyTDc1Ni42MjIyMjIgMTcwLjY2NjY2N3oiIGZpbGw9IiMzMzMzMzMiI'
|
|
|
+ + 'HAtaWQ9IjM2ODkiPjwvcGF0aD48L3N2Zz4=';
|
|
|
+ this.src = this.loadingImage;
|
|
|
+ this.loadImage(this.authSrc);
|
|
|
+ },
|
|
|
|
|
|
methods: {
|
|
|
+ loadImage: function (url) {
|
|
|
+ let _self = this;
|
|
|
+
|
|
|
+ if (url == null || url == '') {
|
|
|
+ _self.src = this.noImage;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.src = this.loadingImage;
|
|
|
+ let request = new XMLHttpRequest();
|
|
|
+ request.responseType = 'blob';
|
|
|
+ request.open('get', url, true);
|
|
|
+ request.setRequestHeader('token', localStorage.getItem('#token'));
|
|
|
+ request.onload = function (e) {
|
|
|
+ if (this.status == 200) {
|
|
|
+ _self.src = URL.createObjectURL(this.response);
|
|
|
+ } else {
|
|
|
+ _self.src = _self.errorImage;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ request.send(null);
|
|
|
+ },
|
|
|
/**
|
|
|
* 预览图片
|
|
|
*/
|
|
|
- preview: function (className, imageName) {
|
|
|
- if (imageName != null && imageName != '') {
|
|
|
- this.modal = true;
|
|
|
- this.src = Common.getImageSrc(className, imageName);
|
|
|
- }
|
|
|
+ preview: function (url) {
|
|
|
+ this.modal = true;
|
|
|
+ this.authSrc = url;
|
|
|
+ this.loadImage(url);
|
|
|
+ // this.src = Common.getImageSrc(className, imageName);
|
|
|
},
|
|
|
|
|
|
/**
|