{"version":3,"sources":["webpack:///./src/components/miniapp/market/GoldArticle.vue?38ca","webpack:///./src/components/miniapp/market/GoldArticle.vue?daab","webpack:///src/components/miniapp/market/GoldArticle.vue","webpack:///./src/components/miniapp/market/GoldArticle.vue?1193","webpack:///./src/components/miniapp/market/GoldArticle.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","_m","class","getClassFade","articles","ref","swiperOption","on","getIndex","_l","slice","page","article","index","key","id","$event","open","link","post_thumbnail_url","domProps","_s","title","rendered","slot","_e","staticRenderFns","_v","components","swiper","swiperSlide","data","slidesPerView","lazy","slidesOffsetBefore","spaceBetween","autoHeight","watchOverflow","pagination","el","clickable","navigation","nextEl","prevEl","slideChange","slideIndex","isFirstSlide","isLastSlide","goldArticleTag","mounted","getArticle","methods","$liff","openWindow","url","external","window","$refs","mySwiper","isBeginning","isEnd","component"],"mappings":"gHAAA,yBAAgnB,EAAG,G,gECAnnB,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,UAAU,CAACE,YAAY,wBAAwBC,MAAM,CAAC,GAAK,iBAAiB,CAACP,EAAIQ,GAAG,GAAGJ,EAAG,MAAM,CAACK,MAAMT,EAAIU,eAAeH,MAAM,CAAC,GAAK,sBAAsB,CAAEP,EAAIW,SAAe,OAAEP,EAAG,SAAS,CAACQ,IAAI,WAAWN,YAAY,eAAeC,MAAM,CAAC,QAAUP,EAAIa,cAAcC,GAAG,CAAC,YAAcd,EAAIe,WAAW,CAACf,EAAIgB,GAAIhB,EAAIW,SAASM,MAAM,EAAEjB,EAAIkB,OAAO,SAASC,EAAQC,GAAO,OAAOhB,EAAG,eAAe,CAACiB,IAAID,EAAMd,YAAY,aAAa,CAACF,EAAG,MAAM,CAACE,YAAY,iBAAiBC,MAAM,CAAC,cAAc,YAAY,cAAcY,EAAQG,GAAG,gBAAgB,eAAeR,GAAG,CAAC,MAAQ,SAASS,GAAQ,OAAOvB,EAAIwB,KAAKL,EAAQM,KAAK,oBAAoB,CAACrB,EAAG,MAAM,CAACE,YAAY,YAAYC,MAAM,CAAC,IAAMY,EAAQO,mBAAmB,QAAU,2CAA2CtB,EAAG,MAAM,CAACE,YAAY,eAAe,CAACF,EAAG,IAAI,CAACE,YAAY,iBAAiBqB,SAAS,CAAC,UAAY3B,EAAI4B,GAAGT,EAAQU,MAAQV,EAAQU,MAAMC,SAAW,gBAAe1B,EAAG,MAAM,CAACE,YAAY,oBAAoBC,MAAM,CAAC,KAAO,cAAcwB,KAAK,gBAAgB,GAAG/B,EAAIgC,MAAM,MAClmCC,EAAkB,CAAC,WAAa,IAAIjC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,OAAO,CAACE,YAAY,gBAAgB,CAACN,EAAIkC,GAAG,4B,4qBC+C1L,OACEC,WAAY,CACVC,OAAJ,YACIC,YAAJ,kBAEEC,KALF,WAMI,MAAO,CACLzB,aAAc,CACZ0B,cAAe,OACfC,MAAM,EACNC,mBAAoB,EACpBC,aAAc,GACdC,YAAY,EACZC,eAAe,EACfC,WAAY,CACVC,GAAI,qBACJC,WAAW,GAEbC,WAAY,CACVC,OAAQ,sBACRC,OAAQ,uBAEVpC,GAAI,CACFqC,YADV,eAKMxC,SAAU,GACVO,KAAM,GACNkC,WAAY,EACZC,cAAc,EACdC,aAAa,EACbC,eAAgB,MAGpBC,QAnCF,WAoCIvD,KAAKwD,cAEPC,QAAS,EAAX,GACA,sEADA,CAEI,WAFJ,+KAIA,GACA,yBACA,oBANA,SAQA,4BARA,OAQA,EARA,OASA,gBACA,iBAVA,yDAaA,gBAbA,iHAgBIlC,KAhBJ,SAgBA,GACM,IACEvB,KAAK0D,MAAMC,WAAW,CACpBC,IAAKA,EACLC,UAAU,IAEpB,SACQC,OAAOvC,KAAKqC,KAGhB,gBA1BJ,oEA0BA,GA1BA,iFA2BA,gBACA,cACA,kBACA,uBACA,aACA,MAEA,aAlCA,yGAqCI9C,SArCJ,WAsCMd,KAAKoD,aAAepD,KAAK+D,MAAMC,SAAS7B,OAAO8B,YAC/CjE,KAAKqD,YAAcrD,KAAK+D,MAAMC,SAAS7B,OAAO+B,OAEhDzD,aAzCJ,WA0CM,OAAIT,KAAKoD,aACA,aACf,iBACe,YAEA,2BCrIoW,I,wBCQ/We,EAAY,eACd,EACArE,EACAkC,GACA,EACA,KACA,WACA,MAIa,aAAAmC,E","file":"js/chunk-bac83a92.ec6013cf.js","sourcesContent":["import mod from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GoldArticle.vue?vue&type=style&index=0&id=f17e6af2&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GoldArticle.vue?vue&type=style&index=0&id=f17e6af2&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:\"section-trending-gold\",attrs:{\"id\":\"gold-article\"}},[_vm._m(0),_c('div',{class:_vm.getClassFade(),attrs:{\"id\":\"article-container\"}},[(_vm.articles.length)?_c('swiper',{ref:\"mySwiper\",staticClass:\"article-list\",attrs:{\"options\":_vm.swiperOption},on:{\"slideChange\":_vm.getIndex}},[_vm._l((_vm.articles.slice(0,_vm.page)),function(article,index){return _c('swiper-slide',{key:index,staticClass:\"post-card\"},[_c('div',{staticClass:\"post-card-link\",attrs:{\"data-action\":\"open_post\",\"data-postid\":article.id,\"data-listname\":\"market_gold\"},on:{\"click\":function($event){return _vm.open(article.link+'?webview=line')}}},[_c('img',{staticClass:\"thumbnail\",attrs:{\"src\":article.post_thumbnail_url,\"content\":\"width=device-width, initial-scale=1.0\"}}),_c('div',{staticClass:\"description\"},[_c('p',{staticClass:\"block-ellipsis\",domProps:{\"innerHTML\":_vm._s(article.title ? article.title.rendered : '')}})])])])}),_c('div',{staticClass:\"swiper-pagination\",attrs:{\"slot\":\"pagination\"},slot:\"pagination\"})],2):_vm._e()],1)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"header\"},[_c('span',{staticClass:\"header-title\"},[_vm._v(\"บทความเกี่ยวกับทอง\")])])}]\n\nexport { render, staticRenderFns }","<template>\n  <section id=\"gold-article\" class=\"section-trending-gold\">\n    <div class=\"header\">\n      <span class=\"header-title\">บทความเกี่ยวกับทอง</span>\n    </div>\n    <div id=\"article-container\" :class=\"getClassFade()\">\n      <swiper\n        v-if=\"articles.length\"\n        :options=\"swiperOption\"\n        class=\"article-list\"\n        @slideChange=\"getIndex\"\n        ref=\"mySwiper\"\n      >\n        <swiper-slide\n          class=\"post-card\"\n          v-for=\"(article, index) in articles.slice(0,page)\"\n          :key=\"index\"\n        >\n          <div\n            class=\"post-card-link\"\n            @click=\"open(article.link+'?webview=line')\"\n            data-action=\"open_post\"\n            :data-postid=\"article.id\"\n            data-listname=\"market_gold\"\n          >\n            <img\n              class=\"thumbnail\"\n              :src=\"article.post_thumbnail_url\"\n              content=\"width=device-width, initial-scale=1.0\"\n            />\n            <div class=\"description\">\n              <p class=\"block-ellipsis\" v-html=\"article.title ? article.title.rendered : ''\"></p>\n            </div>\n          </div>\n        </swiper-slide>\n\n        <div class=\"swiper-pagination\" slot=\"pagination\"></div>\n      </swiper>\n    </div>\n  </section>\n</template>\n\n<script>\nimport { mapActions } from \"vuex\";\nimport moment from \"moment\";\nimport { swiper, swiperSlide } from \"vue-awesome-swiper\";\nimport \"swiper/dist/css/swiper.css\";\n\nexport default {\n  components: {\n    swiper,\n    swiperSlide\n  },\n  data() {\n    return {\n      swiperOption: {\n        slidesPerView: \"auto\",\n        lazy: true,\n        slidesOffsetBefore: 0,\n        spaceBetween: 10,\n        autoHeight: true,\n        watchOverflow: true,\n        pagination: {\n          el: \".swiper-pagination\",\n          clickable: true\n        },\n        navigation: {\n          nextEl: \".swiper-button-next\",\n          prevEl: \".swiper-button-prev\"\n        },\n        on: {\n          slideChange() {}\n          //   tap() {}\n        }\n      },\n      articles: [],\n      page: 10,\n      slideIndex: 0,\n      isFirstSlide: true,\n      isLastSlide: false,\n      goldArticleTag: 103\n    };\n  },\n  mounted() {\n    this.getArticle();\n  },\n  methods: {\n    ...mapActions(\"article\", [\"findTagsByTagName\", \"findArticleByParams\"]),\n    async getArticle() {\n      try {\n        let obj = {\n          tags: this.goldArticleTag,\n          per_page: this.page\n        };\n        const rs_article = await this.findArticleByParams(obj);\n        if (rs_article && rs_article.length > 0) {\n          this.articles = rs_article;\n        }\n      } catch (error) {\n        throw new Error(error);\n      }\n    },\n    open(url) {\n      try {\n        this.$liff.openWindow({\n          url: url,\n          external: false\n        })\n      } catch (err) {\n        window.open(url)\n      }\n    },\n    async infiniteHandler($state) {\n      if (this.page <= 100) {\n        this.page += 10;\n        this.getArticle();\n        setTimeout(() => {\n          $state.loaded();\n        }, 1000);\n      } else {\n        $state.complete();\n      }\n    },\n    getIndex() {\n      this.isFirstSlide = this.$refs.mySwiper.swiper.isBeginning;\n      this.isLastSlide = this.$refs.mySwiper.swiper.isEnd;\n    },\n    getClassFade() {\n      if (this.isFirstSlide) {\n        return \"fade-right\";\n      } else if (this.isLastSlide) {\n        return \"fade-left\";\n      } else {\n        return \"fade-right fade-left\";\n      }\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n$radius-size: 8px;\n.article-list {\n  padding: 0 2px;\n}\n.swiper-pagination {\n  bottom: -6px;\n  position: relative;\n}\n\n#gold-article {\n  .header {\n    i {\n      color: $color-normal-text;\n    }\n    .header-title {\n      display: inline-block;\n      margin-top: 28px;\n      // margin-left: 8px;\n      margin-bottom: 8px;\n      @extend %font-size-m;\n      font-weight: bold;\n      color: $color-normal-text;\n    }\n  }\n\n  .post-card {\n    background-color: $color-white;\n    border-radius: $radius-size;\n    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);\n    -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);\n    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);\n    .post-card-link {\n      text-decoration: none;\n      div {\n        pointer-events: none;\n      }\n      img {\n        pointer-events: none;\n      }\n    }\n    .thumbnail {\n      border-top-left-radius: $radius-size;\n      border-top-right-radius: $radius-size;\n      display: block;\n      width: 100%;\n      height: 170px;\n      object-fit: cover;\n    }\n    .description {\n      @extend %font-size-ss;\n      font-weight: bold;\n      color: $color-normal-text;\n      padding: 16px;\n      margin: 0px;\n      display: flex;\n      .block-ellipsis {\n        display: inline-block;\n        display: -webkit-box;\n        margin: 0; // 0 auto\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 42px;\n        -webkit-line-clamp: 2;\n      }\n      .readmore {\n        text-decoration: underline;\n        color: $color-primary;\n        margin-left: 2px;\n        min-width: 3.9em;\n        display: inline-block;\n      }\n    }\n  }\n}\n\n.section-trending-gold {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  @include responsive(desktop) {\n    max-width: $container-width-desktop;\n  }\n  overflow-x: hidden;\n\n  .trending-list {\n    width: 110%;\n    padding: 10px 0 10px 3px;\n    .item {\n      width: 100%;\n      max-width: 104px;\n      border-radius: 4px;\n      box-shadow: 0 0 6px 0 rgba(217, 217, 217, 0.5);\n      background-color: $color-white;\n      height: 128px;\n      margin-right: 10px;\n      .trending-data {\n        position: relative;\n        padding: 8px;\n        line-height: 1;\n        height: 100%;\n        margin-right: auto;\n        margin-left: auto;\n        h4 {\n          margin: 0;\n          @extend %font-size-m;\n          font-weight: bold;\n          font-style: normal;\n          font-stretch: normal;\n          line-height: normal;\n          letter-spacing: normal;\n          color: #444444;\n          white-space: nowrap;\n          width: 85px;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n        time {\n          @extend %font-size-ss;\n          font-weight: normal;\n          font-style: normal;\n          font-stretch: normal;\n          line-height: 1;\n          letter-spacing: normal;\n          color: #d1d1d1;\n        }\n        .percent {\n          margin-top: 30px;\n          font-size: 14px;\n          font-weight: bold;\n          font-style: normal;\n          font-stretch: normal;\n          line-height: 1;\n          letter-spacing: normal;\n          color: #da1616;\n        }\n        .plus {\n          color: $color-plus;\n        }\n        .minus {\n          color: $color-minus;\n        }\n        .price {\n          font-size: 12px;\n          font-weight: normal;\n          font-style: normal;\n          font-stretch: normal;\n          line-height: normal;\n          letter-spacing: normal;\n          color: #444444;\n        }\n        .order-trending {\n          position: absolute;\n          bottom: 0;\n          right: 0;\n          font-size: 60px;\n          font-weight: bold;\n          color: #f9f9f9;\n          vertical-align: baseline;\n          line-height: 0.71;\n        }\n      }\n    }\n  }\n  .fade-right {\n    &:after {\n      content: \"\";\n      width: 25px;\n      height: 85%;\n      z-index: 1;\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      pointer-events: none;\n      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */\n      background: -moz-linear-gradient(\n        left,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 0.404) 100%\n      ); /* FF3.6-15 */\n      background: -webkit-linear-gradient(\n        left,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 0.404) 100%\n      ); /* Chrome10-25,Safari5.1-6 */\n      background: linear-gradient(\n        to right,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 0.404) 100%\n      ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */\n    }\n  }\n  .fade-left {\n    &:before {\n      content: \"\";\n      width: 25px;\n      height: 85%;\n      z-index: 2;\n      position: absolute;\n      left: -3px;\n      bottom: 0;\n      pointer-events: none;\n      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */\n      background: -moz-linear-gradient(\n        left,\n        rgba(255, 255, 255, 0.404) 0%,\n        rgba(255, 255, 255, 0) 100%\n      ); /* FF3.6-15 */\n      background: -webkit-linear-gradient(\n        left,\n        rgba(255, 255, 255, 0.404) 0%,\n        rgba(255, 255, 255, 0) 100%\n      ); /* Chrome10-25,Safari5.1-6 */\n      background: linear-gradient(\n        to right,\n        rgba(255, 255, 255, 0.404) 0%,\n        rgba(255, 255, 255, 0) 100%\n      ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */\n    }\n  }\n  .text-notfound {\n    @extend %font-size-ss;\n    text-align: center;\n    color: $color-normal-text;\n  }\n}\n</style>","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!./GoldArticle.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!./GoldArticle.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GoldArticle.vue?vue&type=template&id=f17e6af2&scoped=true&\"\nimport script from \"./GoldArticle.vue?vue&type=script&lang=js&\"\nexport * from \"./GoldArticle.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GoldArticle.vue?vue&type=style&index=0&id=f17e6af2&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  \"f17e6af2\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}