{"version":3,"sources":["webpack:///./src/views/coupon/components/UnlockCouponItem.vue?3e8a","webpack:///./src/views/coupon/UnlockCoupon.vue?dd20","webpack:///./src/views/coupon/components/UnlockCouponItem.vue?3c69","webpack:///src/views/coupon/components/UnlockCouponItem.vue","webpack:///./src/views/coupon/components/UnlockCouponItem.vue?cb59","webpack:///./src/views/coupon/components/UnlockCouponItem.vue","webpack:///src/views/coupon/UnlockCoupon.vue","webpack:///./src/views/coupon/UnlockCoupon.vue?e2db","webpack:///./src/views/coupon/UnlockCoupon.vue","webpack:///./src/views/coupon/UnlockCoupon.vue?c489"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","banner","on","gotoRule","_v","typeSelect","model","value","callback","$$v","active","expression","_l","item","index","key","name","couponList","length","activeType","staticRenderFns","class","type","_m","_s","dayjs","couponItem","validFrom","format","validEnd","handleCounponType","scopeValue","handleQuantityType","usage","$event","gotoUse","route","remark","_e","btnClick","props","Object","required","Number","default","data","setup","status","appLinkUrl","path","console","info","font","component","components","vanTab","vanTabs","UnlockCouponItem","viewState","typeList","title","state","find","getCouponData","getAdvertisementsApi","methods","$router","push"],"mappings":"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","file":"js/chunk-1b0781bc.809bd4b6.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UnlockCouponItem.vue?vue&type=style&index=0&id=15f69e1e&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"banner-wrap\"},[_c('img',{attrs:{\"src\":_vm.banner,\"alt\":\"\"}}),_c('div',{staticClass:\"rule\",on:{\"click\":_vm.gotoRule}},[_c('div',{staticClass:\"icon\"}),_vm._v(\" 解锁规则 \")])]),_c('div',{staticClass:\"content mt-56\"},[_c('van-tabs',{attrs:{\"sticky\":\"\"},on:{\"change\":_vm.typeSelect},model:{value:(_vm.active),callback:function ($$v) {_vm.active=$$v},expression:\"active\"}},_vm._l((_vm.typeList),function(item,index){return _c('van-tab',{key:index,attrs:{\"title\":item.name}})}),1),(!_vm.couponList.length)?_c('div',{staticClass:\"nodata-container \"},[_c('img',{attrs:{\"src\":require(\"@/static/coupon_empty.png\"),\"alt\":\"\"}}),_c('div',{staticClass:\"S6 T3\"},[_vm._v(\"暂无此类型解锁券\")])]):_c('ul',{staticClass:\"payment-mode-list\"},_vm._l((_vm.couponList),function(item,index){return _c('UnlockCouponItem',{key:index,attrs:{\"couponItem\":item,\"type\":_vm.activeType}})}),1)],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"coupon-wrap flex\",class:{\n    'is-use-wrap': _vm.type === 1,\n    'is-due-wrap': _vm.type === 3\n  }},[_c('div',{staticClass:\"left\"},[_c('div',{staticClass:\"top\"},[_vm._m(0),_c('div',{staticClass:\"time\"},[_vm._v(\" 有效期 \"+_vm._s(_vm.dayjs(_vm.couponItem.validFrom).format('YYYY.MM.DD'))+\" ~ \"+_vm._s(_vm.dayjs(_vm.couponItem.validEnd).format('YYYY.MM.DD'))+\" \")])]),_c('div',{staticClass:\"bottom\"},[_c('div',{staticClass:\"coupon-name\"},[_c('span',[_vm._v(_vm._s(_vm.handleCounponType(_vm.couponItem.scopeValue)))]),_vm._v(\" \"+_vm._s(_vm.couponItem.name)+\" \")]),_c('div',{staticClass:\"coupon-desc\"},[_vm._v(\" 适用于解锁单\"+_vm._s(_vm.handleQuantityType(_vm.couponItem.scopeValue))+_vm._s(_vm.handleCounponType(_vm.couponItem.scopeValue))+\" \")])]),(_vm.type === 1 && _vm.couponItem.usage)?_c('div',{staticClass:\"use-course-wrap\"},[_c('div',{staticClass:\"use-course\",on:{\"click\":function($event){return _vm.gotoUse(_vm.couponItem.usage.route)}}},[_vm._v(\" 该券已解锁：\"),_c('span',[_vm._v(_vm._s(_vm.couponItem.usage.remark))])]),_c('div',{staticClass:\"arrow\"})]):_vm._e()]),(_vm.type < 1)?_c('div',{staticClass:\"right\",on:{\"click\":function($event){return _vm.btnClick(_vm.couponItem)}}},[_c('div',[_vm._v(\"立即使用\")])]):_c('div',{staticClass:\"status\"},[_vm._v(_vm._s(_vm.type === 1 ? '已使用' : '已过期'))])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"tilte-wrap flex\"},[_c('div',{staticClass:\"line\"}),_c('div',{staticClass:\"title\"},[_vm._v(\"解锁券\")])])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div\r\n    class=\"coupon-wrap flex\"\r\n    :class=\"{\r\n      'is-use-wrap': type === 1,\r\n      'is-due-wrap': type === 3\r\n    }\"\r\n  >\r\n    <div class=\"left\">\r\n      <div class=\"top\">\r\n        <div class=\"tilte-wrap flex\">\r\n          <div class=\"line\"></div>\r\n          <div class=\"title\">解锁券</div>\r\n        </div>\r\n        <div class=\"time\">\r\n          有效期 {{ dayjs(couponItem.validFrom).format('YYYY.MM.DD') }} ~\r\n          {{ dayjs(couponItem.validEnd).format('YYYY.MM.DD') }}\r\n        </div>\r\n      </div>\r\n      <div class=\"bottom\">\r\n        <div class=\"coupon-name\">\r\n          <span>{{ handleCounponType(couponItem.scopeValue) }}</span>\r\n          {{ couponItem.name }}\r\n        </div>\r\n        <div class=\"coupon-desc\">\r\n          适用于解锁单{{ handleQuantityType(couponItem.scopeValue)\r\n          }}{{ handleCounponType(couponItem.scopeValue) }}\r\n        </div>\r\n      </div>\r\n      <div class=\"use-course-wrap\" v-if=\"type === 1 && couponItem.usage\">\r\n        <div class=\"use-course\" @click=\"gotoUse(couponItem.usage.route)\">\r\n          该券已解锁：<span>{{ couponItem.usage.remark }}</span>\r\n        </div>\r\n        <div class=\"arrow\"></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"right\" @click=\"btnClick(couponItem)\" v-if=\"type < 1\">\r\n      <div>立即使用</div>\r\n    </div>\r\n    <div class=\"status\" v-else>{{ type === 1 ? '已使用' : '已过期' }}</div>\r\n  </div>\r\n</template>\r\n<script>\r\nimport dayjs from 'dayjs'\r\nimport isBetween from 'dayjs/plugin/isBetween'\r\nimport { openurl } from '@em/ym'\r\nimport { Toast } from 'vant'\r\ndayjs.extend(isBetween)\r\nexport default {\r\n  name: 'CouponItem',\r\n  props: {\r\n    couponItem: {\r\n      type: Object,\r\n      required: true\r\n    },\r\n    type: {\r\n      type: Number,\r\n      default: 0 //0.未使用 1.已使用和已锁定 2.已锁定 3.已过期\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  setup() {\r\n    function btnClick(item) {\r\n      if (item.status === 4) {\r\n        // 已冻结(退款后被冻结)\r\n        Toast('您正在退款流程中，优惠券暂无法使用')\r\n        return\r\n      }\r\n      if (item.appLinkUrl) openurl(item.appLinkUrl)\r\n    }\r\n\r\n    function gotoUse(path) {\r\n      console.info('path', path)\r\n      openurl(path)\r\n    }\r\n\r\n    function handleCounponType(scopeValue) {\r\n      //  1 锦囊 2 课程 4点金 8直播;\r\n      let font = ''\r\n      switch (scopeValue) {\r\n        case 1:\r\n          font = '锦囊'\r\n          break\r\n        case 2:\r\n          font = '课程'\r\n          break\r\n        case 4:\r\n          font = '点金'\r\n          break\r\n        case 8:\r\n          font = '直播'\r\n          break\r\n      }\r\n      return font\r\n    }\r\n\r\n    function handleQuantityType(scopeValue) {\r\n      //  1 锦囊 2 课程 4点金 8直播;\r\n      let font = '条'\r\n      switch (scopeValue) {\r\n        case 2:\r\n          font = '节'\r\n          break\r\n        case 4:\r\n          font = '条'\r\n          break\r\n      }\r\n      return font\r\n    }\r\n    return {\r\n      btnClick,\r\n      dayjs,\r\n      gotoUse,\r\n      handleCounponType,\r\n      handleQuantityType\r\n    }\r\n  }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.coupon-wrap {\r\n  width: 686px;\r\n  height: 214px;\r\n  background: url(./images/red.png) no-repeat;\r\n  background-size: cover;\r\n  margin: 0 auto 30px;\r\n  line-height: 1;\r\n  &.is-use-wrap {\r\n    height: 292px;\r\n    position: relative;\r\n    background-image: url('./images/use.png');\r\n    .left {\r\n      .bottom {\r\n        .coupon-name {\r\n          color: rgba(180, 180, 180, 1);\r\n          //span {\r\n          //  color: rgba(128, 128, 128, 1);\r\n          //}\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &.is-due-wrap {\r\n    height: 220px;\r\n    position: relative;\r\n    background-image: url('./images/gray.png');\r\n    .status {\r\n      top: 38%;\r\n    }\r\n    .left {\r\n      .bottom {\r\n        .coupon-name {\r\n          color: rgba(180, 180, 180, 1);\r\n          span {\r\n            color: rgba(128, 128, 128, 1);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .left {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%;\r\n    .use-course-wrap {\r\n      height: 80px;\r\n      font-size: 28px;\r\n      color: #ffffff;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      padding: 0 20px;\r\n      .use-course {\r\n        //单行省略\r\n        flex: 1;\r\n        text-overflow: ellipsis;\r\n        overflow: hidden;\r\n        white-space: nowrap;\r\n        margin-right: 20px;\r\n        width: 420px;\r\n      }\r\n      .arrow {\r\n        flex: none;\r\n        width: 24px;\r\n        height: 24px;\r\n        background: url(./images/arrow.png) no-repeat;\r\n        background-size: 100% 100%;\r\n      }\r\n    }\r\n\r\n    .bottom {\r\n      flex: 1;\r\n      padding: 0 20px;\r\n      .coupon-name {\r\n        font-size: 40px;\r\n        color: rgba(0, 0, 0, 1);\r\n        padding-top: 30px;\r\n        span {\r\n          color: rgba(250, 95, 85, 1);\r\n        }\r\n      }\r\n      .coupon-desc {\r\n        font-size: 28px;\r\n        color: rgba(128, 128, 128, 1);\r\n        margin-top: 16px;\r\n      }\r\n    }\r\n    .top {\r\n      padding: 0 20px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      height: 60px;\r\n      flex: none;\r\n      .line {\r\n        display: block;\r\n        content: '';\r\n        width: 4px;\r\n        height: 22px;\r\n        background: rgba(250, 95, 85, 1);\r\n        margin-right: 6px;\r\n      }\r\n      .title {\r\n        font-size: 28px;\r\n        color: rgba(50, 50, 50, 1);\r\n      }\r\n      .time {\r\n        font-size: 24px;\r\n        color: rgba(128, 128, 128, 1);\r\n      }\r\n    }\r\n  }\r\n  .right {\r\n    width: 60px;\r\n    flex: none;\r\n    color: rgba(255, 255, 255, 1);\r\n    font-size: 28px;\r\n    display: flex;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    div {\r\n      width: 30px;\r\n    }\r\n  }\r\n  .status {\r\n    position: absolute;\r\n    top: 34%;\r\n    right: 30px;\r\n    width: 100px;\r\n    height: 100px;\r\n    opacity: 1;\r\n    border-radius: 176px;\r\n    background: rgba(180, 180, 180, 1);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    color: #ffffff;\r\n    font-size: 28px;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UnlockCouponItem.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UnlockCouponItem.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UnlockCouponItem.vue?vue&type=template&id=15f69e1e&scoped=true&\"\nimport script from \"./UnlockCouponItem.vue?vue&type=script&lang=js&\"\nexport * from \"./UnlockCouponItem.vue?vue&type=script&lang=js&\"\nimport style0 from \"./UnlockCouponItem.vue?vue&type=style&index=0&id=15f69e1e&lang=scss&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  \"15f69e1e\",\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <div>\r\n    <div class=\"banner-wrap\">\r\n      <img :src=\"banner\" alt=\"\" />\r\n      <div class=\"rule\" @click=\"gotoRule\">\r\n        <div class=\"icon\"></div>\r\n        解锁规则\r\n      </div>\r\n    </div>\r\n    <div class=\"content mt-56\">\r\n      <van-tabs v-model=\"active\" sticky @change=\"typeSelect\">\r\n        <van-tab\r\n          v-for=\"(item, index) in typeList\"\r\n          :key=\"index\"\r\n          :title=\"item.name\"\r\n        ></van-tab>\r\n      </van-tabs>\r\n      <div class=\"nodata-container \" v-if=\"!couponList.length\">\r\n        <img src=\"@/static/coupon_empty.png\" alt />\r\n        <div class=\"S6 T3\">暂无此类型解锁券</div>\r\n      </div>\r\n      <ul class=\"payment-mode-list\" v-else>\r\n        <UnlockCouponItem\r\n          v-for=\"(item, index) in couponList\"\r\n          :key=\"index\"\r\n          :couponItem=\"item\"\r\n          :type=\"activeType\"\r\n        ></UnlockCouponItem>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nimport { ref, reactive, onMounted, toRefs } from '@vue/composition-api'\r\nimport api from '@/api/api'\r\nimport dayjs from 'dayjs'\r\nimport isBetween from 'dayjs/plugin/isBetween'\r\n// import { openurl } from '@em/ym'\r\n// import ym from '@/assets/js/ym.js'\r\nimport { Tab, Tabs } from 'vant'\r\nimport UnlockCouponItem from './components/UnlockCouponItem.vue'\r\n\r\ndayjs.extend(isBetween)\r\n\r\nexport default {\r\n  name: 'UnlockCoupon',\r\n  components: {\r\n    vanTab: Tab,\r\n    vanTabs: Tabs,\r\n    UnlockCouponItem\r\n  },\r\n  data() {\r\n    return {\r\n      active: 0\r\n    }\r\n  },\r\n  setup() {\r\n    const couponList = ref({})\r\n    const state = reactive({\r\n      viewState: '',\r\n      activeType: 0,\r\n      typeList: [\r\n        { name: '未使用', value: 0 },\r\n        { name: '已使用', value: 1 }, // 包含已锁定\r\n        { name: '已过期', value: 3 }\r\n      ],\r\n      banner: ''\r\n    })\r\n\r\n    onMounted(() => {\r\n      getAdvertisementsApi()\r\n\r\n      getCouponData()\r\n    })\r\n\r\n    async function getCouponData() {\r\n      const { detail, result } = await api.coupon.getCouponApi(\r\n        {\r\n          kind: 1, // 解锁劵\r\n          direction: state.viewState ? 2 : 0,\r\n          statusList: [state.activeType]\r\n        },\r\n        state.viewState\r\n      )\r\n      if (result.code === 0) {\r\n        couponList.value = detail.list.map(ite => {\r\n          const currentDate = dayjs()\r\n          ite.btnActive = dayjs(currentDate).isBetween(\r\n            ite.validFrom,\r\n            ite.validEnd\r\n          )\r\n          return ite\r\n        })\r\n      }\r\n    }\r\n\r\n    function typeSelect(name, title) {\r\n      state.activeType = state.typeList.find(a => a.name === title).value\r\n      state.viewState = ''\r\n      getCouponData()\r\n    }\r\n\r\n    async function getAdvertisementsApi() {\r\n      const { detail, result } = await api.coupon.getAdvertisementsApi({\r\n        codes: 'app_unlockCoupn_banner'\r\n      })\r\n      if (result.code === 0 && detail[0]) {\r\n        state.banner = detail[0].list[0].imageUrl\r\n      }\r\n    }\r\n\r\n    return {\r\n      ...toRefs(state),\r\n      couponList,\r\n      typeSelect,\r\n      dayjs\r\n    }\r\n  },\r\n  methods: {\r\n    gotoRule() {\r\n      this.$router.push({ path: './unlock-rule' })\r\n    }\r\n  }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.banner-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  background: #f5f5f5;\r\n  img {\r\n    display: block;\r\n    width: 100%;\r\n  }\r\n  .rule {\r\n    position: absolute;\r\n    left: 10px;\r\n    top: 10px;\r\n    color: rgba(255, 255, 255, 1);\r\n    font-size: 24px;\r\n    display: flex;\r\n    align-items: center;\r\n    .icon {\r\n      display: inline-block;\r\n      width: 24px;\r\n      height: 24px;\r\n      background: url('./images/rule-icon.png') no-repeat center;\r\n      background-size: contain;\r\n      margin-right: 6px;\r\n    }\r\n  }\r\n}\r\n.content {\r\n  padding: 0 30px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 100vh;\r\n\r\n  .title {\r\n    padding-bottom: 20px;\r\n  }\r\n}\r\n.flex {\r\n  display: flex;\r\n}\r\n.mt-5 {\r\n  margin-top: 5px;\r\n}\r\n.text-center {\r\n  text-align: center;\r\n}\r\n\r\n.payment-mode-list {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  margin-top: 20px;\r\n  height: 100%;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  .payment-mode {\r\n    position: relative;\r\n    height: 156px;\r\n    display: flex;\r\n    align-items: center;\r\n    margin-bottom: 21px;\r\n    background: url('./images/bg1.png') no-repeat center;\r\n    background-size: cover;\r\n\r\n    .icon {\r\n      width: 44px;\r\n      height: 100%;\r\n      margin-right: 20px;\r\n      background: no-repeat center;\r\n      background-size: contain;\r\n    }\r\n\r\n    .click-btn {\r\n      position: absolute;\r\n      right: 24px;\r\n      top: calc(50% - 22px);\r\n      bottom: 0;\r\n      width: 120px;\r\n      height: 44px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      border: 1px solid #858585;\r\n      border-radius: 8px;\r\n      &.is-active {\r\n        border: 1px solid #e64c2e;\r\n      }\r\n    }\r\n\r\n    .left-count {\r\n      flex: 0 0 180px;\r\n    }\r\n    .right-count {\r\n      flex: 0 0 100%;\r\n      padding-left: 54px;\r\n    }\r\n    .name {\r\n      font-family: PingFang SC, PingFang SC-Regular;\r\n      font-weight: bold;\r\n      margin-bottom: 20px;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      width: 300px;\r\n    }\r\n  }\r\n}\r\n.min-limit {\r\n  margin-top: 18px;\r\n  padding-left: 10px;\r\n}\r\n.filter-row {\r\n  align-items: flex-start;\r\n  display: flex;\r\n  margin-bottom: 6px;\r\n  margin-top: 40px;\r\n}\r\n\r\n.filter-row-content {\r\n  display: flex;\r\n  align-items: center;\r\n  align-content: space-between;\r\n  flex-flow: row wrap;\r\n  justify-content: space-between;\r\n  flex: 1;\r\n  div {\r\n    font-size: 24px;\r\n    color: #858585;\r\n  }\r\n  .select-item {\r\n    border: 1px solid #0079ff;\r\n    color: #0079ff;\r\n    background: #ffffff;\r\n  }\r\n}\r\n.filter-item-wrap {\r\n  width: 22%;\r\n  margin-right: 3%;\r\n  &:nth-child(4n) {\r\n    margin-right: 0;\r\n  }\r\n}\r\n.filter-item {\r\n  height: 50px;\r\n  color: #858585;\r\n  background-color: rgba(85, 85, 85, 0.1);\r\n  border-radius: 5px;\r\n  text-align: center;\r\n  line-height: 50px;\r\n  letter-spacing: 1px;\r\n  cursor: pointer;\r\n  flex: none;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.item-bottom-10 {\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.nodata-container {\r\n  width: 100%;\r\n  height: 800px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.nodata-container img {\r\n  width: 402px;\r\n  height: 194px;\r\n  margin-bottom: 26px;\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UnlockCoupon.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UnlockCoupon.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UnlockCoupon.vue?vue&type=template&id=5f04f68b&scoped=true&\"\nimport script from \"./UnlockCoupon.vue?vue&type=script&lang=js&\"\nexport * from \"./UnlockCoupon.vue?vue&type=script&lang=js&\"\nimport style0 from \"./UnlockCoupon.vue?vue&type=style&index=0&id=5f04f68b&lang=scss&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  \"5f04f68b\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UnlockCoupon.vue?vue&type=style&index=0&id=5f04f68b&lang=scss&scoped=true&\""],"sourceRoot":""}