{"version":3,"sources":["webpack:///./src/components/component/CardProductThemePc.vue?3c93","webpack:///./src/components/component/CardProductThemePc.vue?2959","webpack:///src/components/component/CardProductThemePc.vue","webpack:///./src/components/component/CardProductThemePc.vue?3bf6","webpack:///./src/components/component/CardProductThemePc.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","on","$event","clickDetail","card","style","imgField","img","preview_url","stopPropagation","attrs","_m","preventDefault","showMobilePreview","_v","_e","_l","tags","slice","tagLen","tag","idx","key","_s","name","simple_desc","discountedPrice","isDiscount","_f","price","discount_type","discountText","category2","undefined","status","class","statusText","staticRenderFns","staticStyle","component"],"mappings":"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","file":"js/chunk-6c72a387.3e8f71e7.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardProductThemePc.vue?vue&type=style&index=0&id=0f55b973&lang=stylus&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"card-container unselect\",on:{\"click\":function($event){return _vm.clickDetail(_vm.card)}}},[_c('div',{staticClass:\"card-img\",style:(_vm.imgField(_vm.card.img))},[(_vm.card.preview_url!=='')?_c('div',{staticClass:\"card-img-hover\"},[_c('div',{on:{\"click\":function($event){$event.stopPropagation();}}},[_c('a',{attrs:{\"href\":_vm.card.preview_url,\"target\":\"_blank\"}},[_vm._m(0)])]),_c('button',{staticClass:\"button is-gray\",on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.showMobilePreview(_vm.card.preview_url)}}},[_vm._v(\"모바일\"),_c('br'),_vm._v(\"미리보기\")])]):_vm._e()]),_c('div',{staticClass:\"card-content\"},[_c('div',{staticClass:\"flex-align\"},_vm._l((_vm.card.tags.slice(0,_vm.tagLen)),function(tag,idx){return _c('div',{key:'tag-'+idx,staticClass:\"tag body7 sub3\"},[_vm._v(\"#\"+_vm._s(tag))])}),0),_c('div',{staticClass:\"subtitle6 main margin-top-12\"},[_vm._v(_vm._s(_vm.card.name))]),_c('div',{staticClass:\"body4 sub2 ellipsis-2\"},[_vm._v(_vm._s(_vm.card.simple_desc))]),(_vm.discountedPrice(_vm.card)>0)?_c('div',{staticClass:\"margin-top-8\"},[(_vm.isDiscount(_vm.card))?_c('div',{staticClass:\"body6 sub4 text-line-through\"},[_vm._v(_vm._s(_vm._f(\"currency\")(_vm.card.price.price)))]):_vm._e(),_c('div',{staticClass:\"flex-align\"},[(_vm.card.price.discount_type===0)?_c('div',{staticClass:\"margin-right-4 primary body4-bold\"},[_vm._v(_vm._s(_vm.discountText(_vm.card)))]):_vm._e(),_c('div',{staticClass:\"body4-bold\"},[_c('span',{staticClass:\"sub\"},[_vm._v(_vm._s(_vm._f(\"currencyNum\")(_vm.discountedPrice(_vm.card))))]),_c('span',{staticClass:\"body4 sub2\"},[_vm._v(\"원\")]),(_vm.card.price.is_subscription)?_c('span',{staticClass:\"body4 sub3\"},[_vm._v(\"/월\")]):_vm._e(),(_vm.card.category2!==42)?_c('span',{staticClass:\"body4 sub2 margin-left-4\"},[_vm._v(\"~\")]):_vm._e()])]),(_vm.status!==undefined)?_c('div',{staticClass:\"flex-end\"},[_c('div',{class:(\"card-status-\" + _vm.status)},[(_vm.status===2)?_c('svg',{attrs:{\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\"}},[_c('path',{attrs:{\"d\":\"M20 6L9 17L4 12\",\"stroke\":\"#ffffff\",\"stroke-width\":\"4\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}})]):_vm._e(),_vm._v(_vm._s(_vm.statusText(_vm.status)))])]):_vm._e()]):_vm._e()])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{staticClass:\"button is-gray\",staticStyle:{\"width\":\"100%\"}},[_vm._v(\"데스크톱\"),_c('br'),_vm._v(\"미리보기\")])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"card-container unselect\" @click=\"clickDetail(card)\">\r\n    <div class=\"card-img\" :style=\"imgField(card.img)\">\r\n      <div class=\"card-img-hover\" v-if=\"card.preview_url!==''\">\r\n        <div @click.stop>\r\n          <a :href=\"card.preview_url\" target=\"_blank\">\r\n            <button class=\"button is-gray\" style=\"width:100%\">데스크톱<br>미리보기</button>\r\n          </a>\r\n        </div>\r\n        <button class=\"button is-gray\" @click.stop.prevent=\"showMobilePreview(card.preview_url)\">모바일<br>미리보기</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"card-content\">\r\n      <div class=\"flex-align\">\r\n        <div class=\"tag body7 sub3\" v-for=\"(tag,idx) in card.tags.slice(0,tagLen)\" :key=\"'tag-'+idx\">#{{ tag }}</div>\r\n      </div>\r\n      <!-- 파트너 -->\r\n      <!--<div class=\"flex-align margin-top-12\" v-if=\"card.partner\">\r\n        <img style=\"width:32px;height:32px\"\r\n             class=\"margin-right-8\"\r\n             :src=\"card.partner.img\" v-if=\"card.partner.img\">\r\n        <div class=\"body4 sub3\">{{ card.partner.name }}</div>\r\n      </div>-->\r\n      <div class=\"subtitle6 main margin-top-12\">{{ card.name }}</div>\r\n      <div class=\"body4 sub2 ellipsis-2\">{{ card.simple_desc }}</div>\r\n      <!-- 가격 정보 -->\r\n      <div v-if=\"discountedPrice(card)>0\" class=\"margin-top-8\">\r\n        <div class=\"body6 sub4 text-line-through\" v-if=\"isDiscount(card)\">{{ card.price.price | currency }}</div>\r\n        <div class=\"flex-align\">\r\n          <div class=\"margin-right-4 primary body4-bold\" v-if=\"card.price.discount_type===0\">{{ discountText(card) }}</div>\r\n          <div class=\"body4-bold\">\r\n            <span class=\"sub\">{{ discountedPrice(card) | currencyNum }}</span>\r\n            <span class=\"body4 sub2\">원</span>\r\n            <span class=\"body4 sub3\" v-if=\"card.price.is_subscription\">/월</span>\r\n            <span class=\"body4 sub2 margin-left-4\" v-if=\"card.category2!==42\">~</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"flex-end\" v-if=\"status!==undefined\">\r\n          <div :class=\"`card-status-${status}`\">\r\n            <svg v-if=\"status===2\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n              <path d=\"M20 6L9 17L4 12\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>{{ statusText(status) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    name: \"CardProductThemePc\",\r\n    props: {\r\n      card: {\r\n        type: Object\r\n      }\r\n    },\r\n    created() {\r\n      if(this.card.preview_url && this.card.preview_url.indexOf('demo')===-1) {\r\n        let key = this.card.preview_url.split('.')[0].replace('https://','');\r\n        this.card.preview_url += `/home?demo_test=${key}`;\r\n      }\r\n\r\n      this.setTagLength();\r\n    },\r\n    data() {\r\n      return {\r\n        tagLen: 0\r\n      }\r\n    },\r\n    watch: {\r\n      'card.tags'() {\r\n        this.setTagLength();\r\n      }\r\n    },\r\n    computed: {\r\n      status() {\r\n        /*const key = this.card.params.filter(i => { return i.name === 'key'})[0].value;\r\n        return this.userService && this.userService.packages && this.userService.packages.indexOf(key) > -1 ? 1 : 0;*/\r\n        return this.card.status;\r\n      },\r\n      grade() {\r\n        let grade = this.card.params.filter(i=> { return i.name === '플러그인 등급' });\r\n        if(grade.length === 0 || grade[0].value.length === 0) {\r\n          return '기본';\r\n        }\r\n        else {\r\n          return grade[0].value[0].name;\r\n        }\r\n      },\r\n    },\r\n    methods: {\r\n      showMobilePreview(preview_url) {\r\n        window.name = 'preview_parent';\r\n        let popup = window.open('', 'previewPopup', 'width=360, height=640, top=300, left=300, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=yes, scrollbar=no');\r\n        popup.location.href = preview_url;\r\n      },\r\n      setTagLength() {\r\n        this.tagLen = 0;\r\n        if(this.card.tags.length>0) {\r\n          let len = 0;\r\n          let limit = 20;\r\n          this.card.tags.forEach(tag => {\r\n            len += tag.length;\r\n            if(len < limit) {\r\n              this.tagLen++;\r\n              limit = this.tagLen === 1 ? 19 : 16;\r\n            }\r\n          });\r\n        }\r\n        if(this.tagLen===0) {\r\n          this.tagLen = 1;\r\n        }\r\n      },\r\n      statusText(status) {\r\n        const arr = {\r\n          0: '추가',\r\n          1: '신청 중',\r\n          2: '이용 중'\r\n        };\r\n\r\n        return this.grade === '기본' ? arr[status] : status === 0 ? '신청' : arr[status];\r\n      },\r\n      discountText(product) {\r\n        let text = '';\r\n        if (this.isDiscount(product)) {\r\n          if (product.price.discount_rate !== 0 && product.price.discount_type === 0) {\r\n            text = product.price.discount_rate + '%'\r\n          } else if (product.price.discount_price !== 0 && product.price.discount_type === 1) {\r\n            text = product.price.discount_price + '원';\r\n          }\r\n        }\r\n        return text;\r\n      },\r\n      // 할인 여부\r\n      isDiscount(product) {\r\n        if (product.price.is_discount && product.price.discount_start !== null && product.price.discount_end !== null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return !(currentDate < product.price.discount_start || currentDate > product.price.discount_end);\r\n        } else if (product.price.discount_start !== null && product.price.discount_end === null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return currentDate >= product.price.discount_start;\r\n        } else if (product.price.discount_start === null && product.price.discount_end !== null) {\r\n          let currentDate = this.dayjs().format('YYYY-MM-DD HH:mm');\r\n          return currentDate <= product.price.discount_end;\r\n        } else {\r\n          return false;\r\n        }\r\n      },\r\n      // 상품 가격\r\n      discountedPrice(product) {\r\n        let total = 0;\r\n        if (this.isDiscount(product)) {\r\n          if (product.price.discount_rate !== 0 && product.price.discount_type === 0) {\r\n            total = product.price.price * (1 - (product.price.discount_rate / 100))\r\n          } else if (product.price.discount_price !== 0 && product.price.discount_type === 1) {\r\n            total = product.price.price - product.price.discount_price;\r\n          }\r\n        } else total = product.price.price;\r\n        return total;\r\n      },\r\n      imgField(img) {\r\n        let style = {\r\n          backgroundImage: `url(${this.image(img)})`,\r\n          backgroundSize: 'cover',\r\n          backgroundPosition: 'center'\r\n        };\r\n        return style;\r\n      },\r\n      clickDetail(card) {\r\n        this.routeGa('',`테마 카드(${card.name})`, card.name);\r\n\r\n        let path = 'market';\r\n        if(this.$route.path.indexOf('app_market')>-1) {\r\n          path = 'app_market';\r\n        }\r\n\r\n        this.$router.push(`/${path}/detail?id=${card.id}`);\r\n      },\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n\r\n  .card-container\r\n    background-color white\r\n    border-radius 8px\r\n    border 1px solid $gray2\r\n\r\n  .card-img\r\n    position relative\r\n    width 100%\r\n    height 195px\r\n    border-top-left-radius 8px\r\n    border-top-right-radius 8px\r\n    background-color $gray4\r\n    border 1px solid $gray3\r\n  .card-img:hover\r\n    .card-img-hover\r\n      display grid\r\n\r\n  .card-img-hover\r\n    display none\r\n    position absolute\r\n    top 0\r\n    left 0\r\n    background rgba(0,0,0,0.3)\r\n    width 100%\r\n    height 100%\r\n    align-items center\r\n    justify-content center\r\n    grid-template-columns repeat(2, 1fr)\r\n    grid-column-gap 12px\r\n    padding 36px\r\n\r\n  .card-content\r\n    padding 16px\r\n\r\n  .tag\r\n    border 1px solid $gray1\r\n    border-radius 50px\r\n    padding 2px 8px\r\n    margin-right 4px\r\n\r\n  .card-status-0\r\n  .card-status-1\r\n  .card-status-2\r\n    border-radius 50px\r\n    padding 0 20px\r\n    line-height 32px\r\n    height 32px\r\n    margin-top 12px\r\n\r\n  .card-status-0\r\n    background-color $primary\r\n    color white\r\n  .card-status-1\r\n    background-color $gray2\r\n    color $sub2\r\n  .card-status-2\r\n    background-color $main\r\n    color white\r\n    svg\r\n      margin-right 4px\r\n      width 12px\r\n      height 12px\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardProductThemePc.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardProductThemePc.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CardProductThemePc.vue?vue&type=template&id=0f55b973&scoped=true&\"\nimport script from \"./CardProductThemePc.vue?vue&type=script&lang=js&\"\nexport * from \"./CardProductThemePc.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CardProductThemePc.vue?vue&type=style&index=0&id=0f55b973&lang=stylus&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"0f55b973\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}