{"version":3,"sources":["webpack:///./src/components/component/oldCardProduct.vue?0b49","webpack:///src/components/component/oldCardProduct.vue","webpack:///./src/components/component/oldCardProduct.vue?19cc","webpack:///./src/components/component/oldCardProduct.vue?5378","webpack:///./src/components/component/oldCardProduct.vue?e8d1"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","staticStyle","attrs","cards","length","style","_l","card","idx","key","on","$event","clickDetail","imgField","imgs","_v","_s","discount_title","_e","availableColor","available","name","cardType","simple_desc","discount","_f","price","discountPrice","price_type","staticRenderFns","component"],"mappings":"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","file":"js/chunk-26478886.9db9d4ed.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\",staticStyle:{\"padding\":\"15px\",\"overflow-y\":\"unset\",\"min-height\":\"421px\"}},[_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.cards.length>0)?_c('div',{staticClass:\"columns is-multiline\",style:(_vm.dragCardList)},_vm._l((_vm.cards),function(card,idx){return _c('div',{key:'card'+idx,staticClass:\"column is-4\"},[_c('div',{staticClass:\"card-wrap\",style:(_vm.boxShadow),on:{\"click\":function($event){return _vm.clickDetail(card)}}},[_c('div',{staticClass:\"card-overlay\"}),_c('div',{staticClass:\"card-img\",style:(_vm.imgField(card.imgs[0]))},[(card.discount_title)?_c('div',{staticClass:\"discount\"},[_vm._v(_vm._s(card.discount_title))]):_vm._e(),(card.available)?_c('span',{staticClass:\"cardAvailable\",style:(_vm.availableColor(card.available))},[_vm._v(_vm._s(card.available))]):_vm._e()]),_c('div',{staticClass:\"card-title-content box-shadow\"},[_c('div',{staticClass:\"card-media\"},[_c('div',{staticClass:\"card-media-content flex\",staticStyle:{\"justify-content\":\"space-between\"}},[_c('div',{staticClass:\"card-title\"},[_vm._v(_vm._s(card.name))])]),_c('div',{staticClass:\"card-pack\"},[_vm._v(_vm._s(card.cardType))])]),_c('div',{staticClass:\"content\"},[_vm._v(_vm._s(card.simple_desc))]),_c('div',{staticClass:\"lp-card-footer\"},[_c('div',{staticClass:\"discount-pay\"},[(card.discount>0)?_c('div',[_c('span',{staticClass:\"card-pay\"},[_vm._v(_vm._s(_vm._f(\"currencyNum\")(card.price)))]),_c('span',{staticStyle:{\"font-weight\":\"700\",\"font-size\":\"18px\"}},[_vm._v(_vm._s(_vm._f(\"currencyNum\")(_vm.discountPrice(card))))]),_c('span',[_vm._v(\"원\"),(card.price_type===1)?_c('span',[_vm._v(\"/월\")]):_vm._e()])]):_c('div',[_c('span',{staticStyle:{\"font-weight\":\"700\",\"font-size\":\"18px\"}},[_vm._v(_vm._s(_vm._f(\"currencyNum\")(card.price)))]),_c('span',[_vm._v(\"원\"),(card.price_type===1)?_c('span',[_vm._v(\"/월\")]):_vm._e()])])]),_c('button',{staticClass:\"btn-look\"},[_vm._v(\"상세보기\")])])])])])}),0):_vm._e()])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <!--서비스 상품 카드뷰-->\r\n  <div class=\"container\" style=\"padding:15px;overflow-y: unset;min-height:421px\">\r\n    <!--<card-service v-for=\"pack, idx in packages\" :key=\"'pack-'+idx\"-->\r\n    <!--:card=\"pack\"></card-service>-->\r\n    <transition name=\"fade\">\r\n      <div class=\"columns is-multiline\" v-if=\"cards.length>0\" :style=\"dragCardList\">\r\n      <div class=\"column is-4\" v-for=\"(card, idx) in cards\" :key=\"'card'+idx\">\r\n        <div class=\"card-wrap\"\r\n             :style=\"boxShadow\"\r\n             @click=\"clickDetail(card)\">\r\n          <div class=\"card-overlay\"></div>\r\n          <div class=\"card-img\" :style=\"imgField(card.imgs[0])\">\r\n            <div class=\"discount\" v-if=\"card.discount_title\">{{card.discount_title}}</div>\r\n            <span class=\"cardAvailable\"\r\n                  :style=\"availableColor(card.available)\"\r\n                  v-if=\"card.available\">{{card.available}}</span>\r\n          </div>\r\n\r\n          <div class=\"card-title-content box-shadow\">\r\n            <div class=\"card-media\">\r\n              <div class=\"card-media-content flex\" style=\"justify-content:space-between\">\r\n                <div class=\"card-title\">{{card.name}}</div>\r\n<!--                <div class=\"card-num\" >{{card.cardNum}}개 신청</div>-->\r\n              </div>\r\n\r\n              <div class=\"card-pack\">{{card.cardType}}</div>\r\n            </div>\r\n\r\n            <div class=\"content\">{{card.simple_desc}}</div>\r\n            <div class=\"lp-card-footer\">\r\n              <div class=\"discount-pay\">\r\n                <div v-if=\"card.discount>0\">\r\n                  <span class=\"card-pay\">{{card.price|currencyNum}}</span>\r\n                  <span style=\"font-weight:700;font-size:18px\">{{discountPrice(card)|currencyNum}}</span>\r\n                  <span>원<span v-if=\"card.price_type===1\">/월</span></span>\r\n                </div>\r\n                <div v-else>\r\n                  <span style=\"font-weight:700;font-size:18px\">{{card.price|currencyNum}}</span>\r\n                  <span>원<span v-if=\"card.price_type===1\">/월</span></span>\r\n                </div>\r\n              </div>\r\n              <!--<div class=\"btn-look\">-->\r\n                <button class=\"btn-look\">상세보기</button>\r\n              <!--</div>-->\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </transition>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n    export default {\r\n      name: \"CardProduct\",\r\n      props: ['products', 'shadow', 'drag'],\r\n      created() {\r\n        this.cards = this.products;\r\n        this.addAvailable();\r\n      },\r\n      data() {\r\n        return {\r\n          cards: [],\r\n          avail_color: [],\r\n          colors: ['#0ead9d', '#d0ae45', '#f45853', '#393e46', '#ff6600'],\r\n          ishover: false\r\n        }\r\n      },\r\n      watch: {\r\n        products(n){\r\n          this.cards = n;\r\n          this.addAvailable();\r\n        }\r\n      },\r\n      computed: {\r\n        dragCardList() {\r\n          if(this.drag) return 'flex-wrap:unset;overflow-x:auto';\r\n          else return '';\r\n        },\r\n        boxShadow() {\r\n          if(this.shadow) return 'box-shadow: 0px 2px 10px 0 #ccc8c8;';\r\n          else return '';\r\n        }\r\n      },\r\n      methods: {\r\n        // 상세 페이지 이동\r\n        clickDetail(card) {\r\n          this.setGa(`테마 카드(${card.name})`, '클릭', card.name);\r\n          if(this.$route.path.search('detail')>-1) {\r\n            this.$router.push(`/store/detail?id=${card.id}`)\r\n          }\r\n          else {\r\n            this.$router.push(`store/detail?id=${card.id}`)\r\n          }\r\n        },\r\n        // 신청 시 바로 이용가능 , 신청 시 2주후 이용 가능\r\n        availableColor(text) {\r\n          if (!text) return '';\r\n          for(let i=0; i<this.avail_color.length; i++){\r\n            if(this.avail_color[i].label===text) {\r\n              return `color: ${this.avail_color[i].value}`;\r\n            }\r\n          }\r\n        },\r\n        imgField(img) {\r\n          return 'background-image: url('+this.image(img)+');' +\r\n            'background-size: cover;' +\r\n            ' background-position: center';\r\n        },\r\n        // 이용가능한 값 넣기\r\n        addAvailable(){\r\n          let param_arr = [];\r\n\r\n          for(let i=0; i<this.cards.length; i++){\r\n            for(let j=0; j<this.cards[i].params.length; j++){\r\n              let param = this.cards[i].params[j];\r\n              if(param.name.indexOf(\"신청시 이용가능\")>-1){\r\n                /*if(param.value_select.length>0) {\r\n                  let name = find(param.choice_items,'id', param.value_select[0]).name;\r\n                  this.cards[i]['available'] = name;\r\n                  param_arr.push(name);\r\n                }*/\r\n                this.cards[i]['available'] = param.value_name;\r\n                param_arr.push(param.value_name);\r\n              }\r\n            }\r\n          }\r\n\r\n          // 중복 제거\r\n          let uniq = param_arr.reduce(function(a,b){\r\n            if (a.indexOf(b) < 0 ) a.push(b);\r\n            return a;\r\n          },[]);\r\n\r\n          //console.log(uniq)\r\n\r\n          // 이용가능한 값 컬러랑 매칭시켜 재조합\r\n          for(let x=0; x<uniq.length; x++){\r\n            this.avail_color.push({'label': uniq[x], 'value': this.colors[x]});\r\n          }\r\n\r\n        },\r\n        /*contentAvailable(available) {\r\n          if (available === 1) {\r\n            return '신청 시 바로 이용 가능'\r\n          }\r\n          else if (available === 2) {\r\n            return '신청 시 2주후 이용 가능'\r\n          }\r\n        },*/\r\n        contentAvailable1(available) {\r\n          if (available === 1) {\r\n            return true;\r\n          } else {\r\n            return false;\r\n          }\r\n        },\r\n        contentAvailable2(available) {\r\n          if (available === 2) {\r\n            return true;\r\n          } else {\r\n            return false;\r\n          }\r\n        },\r\n        contentImg(img) {\r\n          return {\r\n            backgroundImage: `url(${img})`,\r\n            width: '',\r\n            height: ''\r\n          }\r\n        },\r\n        // 할인 금액\r\n        discountPrice(product){\r\n          return product.price - (product.price * product.discount / 100);\r\n        },\r\n        convertParamToInter(params) {\r\n          for(let i=0; i<params.length; i++) {\r\n            if(params[i].param_type===1 && params[i].value_integer) return params[i].value_integer;\r\n            else 2;\r\n          }\r\n        }\r\n      }\r\n    }\r\n</script>\r\n\r\n<style scoped>\r\n\r\n\r\n  .card-container-container{\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    margin: 0 auto;\r\n    width: 1366px;\r\n    /*justify-content: baseline;*/\r\n  }\r\n  /*.box-shadow{*/\r\n  /*box-shadow: 2px 5px 10px 0 #7b8074;*/\r\n  /*}*/\r\n\r\n  .pro-num{\r\n    font-weight: 700;\r\n  }\r\n  .card-wrap{\r\n    /*width: 100%;*/\r\n    /*height: 390px;*/\r\n    position: relative;\r\n    /*margin-left: 40px;*/\r\n    border-radius: 10px;\r\n    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);\r\n    /*margin:20px 0 0 20px;*/\r\n    cursor: pointer;\r\n  }\r\n\r\n  .card-overlay {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 193px;\r\n    background-color: rgba(0,0,0,0.3);\r\n    z-index: 10;\r\n    border-radius:10px 10px 0 0;\r\n  }\r\n\r\n  .card-img {\r\n    position: relative;\r\n    width: 100%;\r\n    height:193px;\r\n    border-radius:10px 10px 0 0;\r\n    background-color: yellow;\r\n  }\r\n  .card-title-content{\r\n    background-color:#ffffff;\r\n    border-radius: 0 0 20px 20px;\r\n\r\n    padding: 20px 16px 16px 16px;\r\n    height: 220px;\r\n  }\r\n  .discount{\r\n    position: absolute;\r\n    top: 0;\r\n    right: 16px;\r\n    background-color: #f45858;\r\n    border-radius: 2px;\r\n    color: white;\r\n    text-align: center;\r\n    font-size: 12px;\r\n    padding: 8px 12px;\r\n    z-index: 11;\r\n  }\r\n\r\n  .discount-pay{\r\n    /*width: 145px;*/\r\n    height: 27px;\r\n    text-align: left;\r\n    /*display: inline-block;*/\r\n  }\r\n\r\n  .card-title {\r\n    padding-right:12px;\r\n    font-size:18px;\r\n    font-weight: 500;\r\n    line-height: 27px;\r\n    color:#303030;\r\n  }\r\n  .subtitle{\r\n    text-align: left;\r\n  }\r\n  .cardAvailable{\r\n    font-size: 12px;\r\n    background-color:#ffffff;\r\n    padding: 0 12px;\r\n    height:32px;\r\n    position: absolute;\r\n    top:162px;\r\n    left:0;\r\n    border-radius: 0 5px 0 0;\r\n    text-align: center;\r\n    line-height: 32px;\r\n    z-index: 11;\r\n  }\r\n\r\n  .available1{\r\n    font-size:12px;\r\n    color:#0ead9d;\r\n  }\r\n  .available2{\r\n    font-size:12px;\r\n    color:red;\r\n  }\r\n  .card-pack{\r\n    text-align: left;\r\n    font-size:12px;\r\n    color:#a0a0a0;\r\n    margin: 4px 0 10px 0;\r\n  }\r\n  .content{\r\n    color: #a0a0a0;\r\n    font-size: 14px;\r\n    text-align: left;\r\n    line-height: 22px;\r\n    margin-top: 8px;\r\n    margin-bottom:12px;\r\n    height: 54px;\r\n    overflow: hidden;\r\n    white-space: normal;\r\n    word-wrap: break-word;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n  }\r\n\r\n  .lp-card-footer{\r\n    position: absolute;\r\n    bottom: 16px;\r\n    left: 16px;\r\n    width: calc(100% - 32px);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n  }\r\n  .card-pay{\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    color:#a0a0a0;\r\n    text-decoration: line-through;\r\n  }\r\n  .card-num{\r\n    /*width: 76px;*/\r\n    /*height: 32px;*/\r\n    /*background-color: #f7f7f7;*/\r\n    font-size:12px;\r\n    color:#a0a0a0;\r\n    line-height: 32px;\r\n    text-align: right;\r\n    flex-shrink: 0;\r\n    /*border-radius: 3px;*/\r\n\r\n    /*display: inline-block;*/\r\n  }\r\n  .btn-look{\r\n    height: 32px;\r\n    border-radius: 3px;\r\n    background-color: #ff6600;\r\n    border: 1px solid #ff6600;\r\n    cursor: pointer;\r\n    color:#ffffff;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .lp-card-container {\r\n    /*padding: 80px 0;*/\r\n    /*margin: 0 auto;*/\r\n    width: 100%;\r\n    height:100%;\r\n  }\r\n  @media (max-width: 321px) {\r\n    .card-wrap{\r\n      border-radius: 10px;\r\n      /*width: 100%;*/\r\n    }\r\n    .card-overlay,\r\n    .card-img{\r\n      border-radius: 10px 10px 0 0;\r\n    }\r\n  }\r\n\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!./oldCardProduct.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!./oldCardProduct.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./oldCardProduct.vue?vue&type=template&id=5a7f9062&scoped=true&\"\nimport script from \"./oldCardProduct.vue?vue&type=script&lang=js&\"\nexport * from \"./oldCardProduct.vue?vue&type=script&lang=js&\"\nimport style0 from \"./oldCardProduct.vue?vue&type=style&index=0&id=5a7f9062&scoped=true&lang=css&\"\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  \"5a7f9062\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./oldCardProduct.vue?vue&type=style&index=0&id=5a7f9062&scoped=true&lang=css&\""],"sourceRoot":""}