관리-도구
편집 파일: StoreBannerEdit.1a5c97a32ce998b7.js
/*! For license information please see StoreBannerEdit.1a5c97a32ce998b7.js.LICENSE.txt */ "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[5432],{14784:(t,e,r)=>{r.r(e),r.d(e,{default:()=>m});var n=r(72505),o=r.n(n);function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function a(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,i,a,s=[],c=!0,u=!1;try{if(i=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(s.push(n.value),s.length!==e);c=!0);}catch(t){u=!0,o=t}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return s}}(t,e)||function(t,e){if(t){if("string"==typeof t)return s(t,e);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?s(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function c(){c=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},a="function"==typeof Symbol?Symbol:{},s=a.iterator||"@@iterator",u=a.asyncIterator||"@@asyncIterator",l=a.toStringTag||"@@toStringTag";function f(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{f({},"")}catch(t){f=function(t,e,r){return t[e]=r}}function h(t,e,r,n){var i=e&&e.prototype instanceof b?e:b,a=Object.create(i.prototype),s=new P(n||[]);return o(a,"_invoke",{value:S(t,r,s)}),a}function p(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=h;var v="suspendedStart",m="suspendedYield",d="executing",g="completed",y={};function b(){}function w(){}function _(){}var x={};f(x,s,(function(){return this}));var L=Object.getPrototypeOf,O=L&&L(L(I([])));O&&O!==r&&n.call(O,s)&&(x=O);var j=_.prototype=b.prototype=Object.create(x);function C(t){["next","throw","return"].forEach((function(e){f(t,e,(function(t){return this._invoke(e,t)}))}))}function E(t,e){function r(o,a,s,c){var u=p(t[o],t,a);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==i(f)&&n.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,s,c)}),(function(t){r("throw",t,s,c)})):e.resolve(f).then((function(t){l.value=t,s(l)}),(function(t){return r("throw",t,s,c)}))}c(u.arg)}var a;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return a=a?a.then(o,o):o()}})}function S(e,r,n){var o=v;return function(i,a){if(o===d)throw Error("Generator is already running");if(o===g){if("throw"===i)throw a;return{value:t,done:!0}}for(n.method=i,n.arg=a;;){var s=n.delegate;if(s){var c=$(s,n);if(c){if(c===y)continue;return c}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===v)throw o=g,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=d;var u=p(e,r,n);if("normal"===u.type){if(o=n.done?g:m,u.arg===y)continue;return{value:u.arg,done:n.done}}"throw"===u.type&&(o=g,n.method="throw",n.arg=u.arg)}}}function $(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,$(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),y;var i=p(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,y;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,y):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,y)}function k(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function P(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(k,this),this.reset(!0)}function I(e){if(e||""===e){var r=e[s];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return a.next=a}}throw new TypeError(i(e)+" is not iterable")}return w.prototype=_,o(j,"constructor",{value:_,configurable:!0}),o(_,"constructor",{value:w,configurable:!0}),w.displayName=f(_,l,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===w||"GeneratorFunction"===(e.displayName||e.name))},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,_):(t.__proto__=_,f(t,l,"GeneratorFunction")),t.prototype=Object.create(j),t},e.awrap=function(t){return{__await:t}},C(E.prototype),f(E.prototype,u,(function(){return this})),e.AsyncIterator=E,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new E(h(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},C(j),f(j,l,"Generator"),f(j,s,(function(){return this})),f(j,"toString",(function(){return"[object Generator]"})),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},e.values=I,P.prototype={constructor:P,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(T),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return s.type="throw",s.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],s=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var c=n.call(a,"catchLoc"),u=n.call(a,"finallyLoc");if(c&&u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(c){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!u)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,y):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),y},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),y}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;T(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:I(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),y}},e}function u(t,e,r,n,o,i,a){try{var s=t[i](a),c=s.value}catch(t){return void r(t)}s.done?e(c):Promise.resolve(c).then(n,o)}function l(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function a(t){u(i,n,o,a,s,"next",t)}function s(t){u(i,n,o,a,s,"throw",t)}a(void 0)}))}}function f(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function h(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?f(Object(r),!0).forEach((function(e){p(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function p(t,e,r){return(e=function(t){var e=function(t,e){if("object"!=i(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var n=r.call(t,e||"default");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==i(e)?e:e+""}(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}const v={metaInfo:{title:"Store Banner Form"},props:{id:{type:String,required:!1,default:"new"}},data:function(){return{loading:!0,saving:!1,form:{title:"",position:"top_left",active:!0,image:null},preview:null,imgW:null,imgH:null,positions:[{value:"top_left",text:"Top — Left"},{value:"top_right",text:"Top — Right"},{value:"center_left",text:"Center — Left"},{value:"center_right",text:"Center — Right"},{value:"footer_left",text:"Footer — Left"},{value:"footer_right",text:"Footer — Right"}],rec:{top_left:{w:1200,h:600,label:"Top — Left"},top_right:{w:1200,h:600,label:"Top — Right"},center_left:{w:1200,h:600,label:"Center — Left"},center_right:{w:1200,h:600,label:"Center — Right"},footer_left:{w:1200,h:600,label:"Footer — Left"},footer_right:{w:1200,h:600,label:"Footer — Right"}}}},computed:{isNew:function(){return"new"===this.id||!this.id},posInfo:function(){var t=this.rec[this.form.position]||{w:1200,h:600,label:"—"};return h(h({},t),{},{ratioText:this.toRatioText(t.w,t.h)})},uploadedRatioText:function(){return this.imgW&&this.imgH?this.toRatioText(this.imgW,this.imgH):"—"},aspectMismatch:function(){if(!this.imgW||!this.imgH)return!1;var t=this.posInfo.w/this.posInfo.h,e=this.imgW/this.imgH;return Math.abs(e-t)/t>.05}},mounted:function(){this.init()},methods:{init:function(){var t=this;return l(c().mark((function e(){var r,n;return c().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.isNew){e.next=8;break}return e.next=3,o().get("/store/banners/".concat(t.id));case 3:r=e.sent,n=r.data,Object.assign(t.form,h(h({},n),{},{image:null})),t.preview=n.image_url||(n.image?"/".concat(n.image):null),t.preview&&t.readImageDims(t.preview);case 8:t.loading=!1;case 9:case"end":return e.stop()}}),e)})))()},onFile:function(t){var e=this;if(this.form.image=t.target.files[0],this.imgW=this.imgH=null,this.form.image){var r=new FileReader;r.onload=function(){e.preview=r.result,e.readImageDims(e.preview)},r.readAsDataURL(this.form.image)}},readImageDims:function(t){var e=this,r=new Image;r.onload=function(){e.imgW=r.width,e.imgH=r.height},r.src=t},toRatioText:function(t,e){var r=function(t,e){return e?r(e,t%e):t},n=r(Math.round(t),Math.round(e))||1,o=Math.round(t/n),i=Math.round(e/n);return"".concat(o,":").concat(i)},save:function(){var t=this;return l(c().mark((function e(){var r;return c().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.saving=!0,e.prev=1,r=new FormData,Object.entries(t.form).forEach((function(e){var n=a(e,2),o=n[0],i=n[1];"image"===o?i&&r.append("image",i):"active"===o?r.append("active",t.form.active?"1":"0"):r.append(o,null!=i?i:"")})),!t.isNew){e.next=9;break}return e.next=7,o().post("/store/banners",r);case 7:e.next=11;break;case 9:return e.next=11,o().post("/store/banners/".concat(t.id,"?_method=PUT"),r);case 11:t.$bvToast&&t.$bvToast.toast(t.$t("Saved_successfully"),{title:t.$t("Banners"),variant:"success"}),t.$router.push({name:"StoreBanners"});case 13:return e.prev=13,t.saving=!1,e.finish(13);case 16:case"end":return e.stop()}}),e,null,[[1,,13,16]])})))()}}};const m=(0,r(14486).A)(v,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"main-content"},[e("breadcumb",{attrs:{page:t.isNew?t.$t("Create"):t.$t("Edit"),folder:t.$t("Banners")}}),t._v(" "),t.loading?e("div",{staticClass:"loading_page spinner spinner-primary mr-3"}):e("b-card",{staticClass:"wrapper"},[e("b-form",{on:{submit:function(e){return e.preventDefault(),t.save.apply(null,arguments)}}},[e("div",{staticClass:"row"},[e("div",{staticClass:"col-md-8"},[e("b-form-group",{attrs:{label:t.$t("Title")}},[e("b-form-input",{attrs:{required:""},model:{value:t.form.title,callback:function(e){t.$set(t.form,"title",e)},expression:"form.title"}})],1),t._v(" "),e("b-form-group",{attrs:{label:t.$t("Position")}},[e("b-form-select",{attrs:{options:t.positions},model:{value:t.form.position,callback:function(e){t.$set(t.form,"position",e)},expression:"form.position"}}),t._v(" "),e("div",{staticClass:"mt-2 p-2 border rounded bg-light d-flex align-items-center"},[e("div",{staticClass:"mr-2"},[t._v("🖼️")]),t._v(" "),e("div",{staticClass:"small",staticStyle:{color:"#ffff"}},[e("div",{staticClass:"mb-1"},[e("strong",[t._v(t._s(t.posInfo.label))]),t._v(" —\n "+t._s(t.$t("Recommended"))+": "+t._s(t.posInfo.w)+" × "+t._s(t.posInfo.h)+" ("+t._s(t.posInfo.ratioText)+")\n ")]),t._v(" "),t.imgW&&t.imgH?e("div",{staticClass:"small"},[t._v("\n "+t._s(t.$t("Uploaded"))+": "+t._s(t.imgW)+" × "+t._s(t.imgH)+" ("+t._s(t.uploadedRatioText)+")\n "),t.aspectMismatch?e("span",[t._v("• "+t._s(t.$t("Aspect ratio differs from recommendation")))]):e("span",[t._v("• "+t._s(t.$t("Looks good"))+" ✅")])]):t._e()])])],1),t._v(" "),e("b-form-group",{attrs:{label:t.$t("Image")}},[e("b-form-file",{attrs:{accept:"image/*"},on:{change:t.onFile}}),t._v(" "),t.preview?e("div",{staticClass:"mt-2"},[e("img",{staticClass:"img-thumbnail",staticStyle:{"max-height":"120px"},attrs:{src:t.preview}})]):t._e()],1)],1),t._v(" "),e("div",{staticClass:"col-md-4"},[e("b-form-group",{attrs:{label:t.$t("Active")}},[e("b-form-checkbox",{attrs:{switch:""},model:{value:t.form.active,callback:function(e){t.$set(t.form,"active",e)},expression:"form.active"}},[t._v("\n "+t._s(t.form.active?t.$t("Active"):t.$t("Disabled"))+"\n ")])],1),t._v(" "),e("b-button",{attrs:{type:"submit",disabled:t.saving,variant:"btn btn-primary btn-icon m-1"}},[t.saving?e("span",{staticClass:"spinner-border spinner-border-sm mr-2"}):t._e(),t._v(" "),e("i",{staticClass:"i-Yes"}),t._v(" "+t._s(t.$t("Save"))+"\n ")]),t._v(" "),e("b-button",{attrs:{variant:"btn btn-outline-secondary m-1"},on:{click:function(e){return t.$router.back()}}},[t._v("\n "+t._s(t.$t("Cancel"))+"\n ")]),t._v(" "),e("div",{staticClass:"mt-3 p-2 border rounded small text-muted"},[e("div",{staticClass:"mb-1"},[e("strong",[t._v(t._s(t.$t("Size guide")))])]),t._v(" "),e("ul",{staticClass:"mb-0 pl-3"},[e("li",[t._v("Top (Left/Right): 1200×600 (2:1)")]),t._v(" "),e("li",[t._v("Center (Left/Right): 1200×600 (2:1)")]),t._v(" "),e("li",[t._v("Footer (Left/Right): 1200×600 (2:1)")])]),t._v(" "),e("div",{staticClass:"mt-1"},[t._v(t._s(t.$t("Tip"))+": "+t._s(t.$t("Use 2x for retina (e.g., 2400×1200).")))])])],1)])])],1)],1)}),[],!1,null,null,null).exports}}]);