uk_front_build/.nuxt/dist/server/components/price-to-img.js

exports.ids = [24];
exports.modules = {

/***/ 203:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/PriceToImg.vue?vue&type=template&id=2e991f10
var render = function render() {
  var _vm = this,
    _c = _vm._self._c;
  return _c('div', {
    ref: "printArea",
    staticStyle: {
      "font-family": "ProximaNova-Regular",
      "background-color": "#fff",
      "padding": "20px",
      "word-break": "break-word",
      "box-sizing": "border-box"
    }
  }, [_vm._ssrNode("<table><tbody><tr><td style=\"margin-right: 14px;\">" + (_vm.isImgSrc ? "<img" + _vm._ssrAttr("src", _vm.comInfo.image) + " width=\"320\" height=\"320\">" : "<img width=\"250\" height=\"250\">") + "</td> <td style=\"vertical-align: top;\"><p style=\"font-weight: bold;font-size: 22px;padding-bottom: 24px;color:#00213B\"><span style=\"margin-right: 5px;\">" + _vm._ssrEscape(_vm._s(_vm.pageData.product_code)) + "</span> <span>" + _vm._ssrEscape(_vm._s(_vm.pageData.product_name)) + "</span></p> <p style=\"line-height: 20px;color:#00213B;font-size: 14px;\">" + _vm._s(_vm.comInfo.description) + "</p></td></tr></tbody></table> <div><p style=\"font-weight: bold;font-size: 17px;margin: 12px 0 8px;color:#00213B\">Specifications</p> <table style=\"width:100%;border-collapse: collapse;font-size: 14px;table-layout: fixed;text-align:center;\"><tbody><tr style=\"background-color: #F7F8FC;font-weight: bold;\">" + _vm._ssrList(_vm.headerColumns, function (item, key) {
    return "<td style=\"padding:10px 0;color:#00213B;width: 25%;font-size: 14px;border:1px solid #EFEFEF\">" + _vm._ssrEscape(_vm._s(item.label)) + "</td>";
  }) + "</tr> <tr>" + _vm._ssrList(_vm.headerColumns, function (item, key) {
    return "<td style=\"padding:10px 0 6px;color:#00213B;border:1px solid #EFEFEF\">" + (_vm.specificationsObj[item.prop] ? "<div>" + (item.prop != 'addonArr' ? "<span>" + _vm._ssrEscape(_vm._s(_vm.specificationsObj[item.prop])) + "</span>" : _vm._ssrList(_vm.specificationsObj.addonArr, function (opt, idx) {
      return "<div style=\"padding-bottom:4px;\">" + _vm._ssrEscape(_vm._s(opt)) + "</div>";
    })) + "</div>" : "<span>-</span>") + "</td>";
  }) + "</tr></tbody></table></div> <div><p style=\"font-weight: bold;font-size: 17px;margin: 12px 0 8px;color:#00213B\">Quote</p> <table style=\"width:100%;border-collapse: collapse;font-size: 14px;table-layout: fixed;text-align:center;\"><tbody>" + (_vm.comLocationNum !== 1 ? "<tr style=\"background-color: #F7F8FC;font-weight: bold;\"><td" + _vm._ssrAttr("colspan", _vm.tableColumns.length - 1) + " style=\"padding:10px 0;color:#00213B;border:1px solid #EFEFEF\">Quote</td> <td" + _vm._ssrStyle({
    "padding": "10px 0",
    "color": "#00213B",
    "border": "1px solid #EFEFEF"
  }, {
    width: _vm.comWidth
  }, null) + ">Total</td></tr>" : "<!---->") + " <tr style=\"background-color: #F7F8FC;font-weight: bold;\">" + _vm._ssrList(_vm.tableColumns, function (item, key) {
    return "<td" + _vm._ssrStyle({
      "padding": "10px 0",
      "color": "#00213B",
      "border": "1px solid #EFEFEF"
    }, {
      width: _vm.comWidth
    }, null) + ">" + _vm._ssrEscape(_vm._s(item.label)) + "</td>";
  }) + "</tr> " + _vm._ssrList(_vm.tableData, function (row) {
    return "<tr style=\"padding:10px 0;\">" + _vm._ssrList(_vm.tableColumns, function (column) {
      return "<td" + _vm._ssrStyle({
        "padding": "10px 0",
        "color": "#00213B",
        "border": "1px solid #EFEFEF",
        "white-space": "nowrap"
      }, _vm.getColumnHeaderStyle(column), null) + ">" + _vm._ssrEscape("\n           " + _vm._s(row[column.prop].includes('.') ? '£' : '') + " " + _vm._s(row[column.prop] ? row[column.prop] : '0.00') + "\n          ") + "</td>";
    }) + "</tr>";
  }) + "</tbody></table></div> " + (_vm.emailForm.Comments ? "<div style=\"color:#00213B\"><p style=\"margin: 20px 0;\">" + _vm._ssrEscape(_vm._s(_vm.emailForm.Comments)) + "</p></div>" : "<!---->"))]);
};
var staticRenderFns = [];

// CONCATENATED MODULE: ./components/PriceToImg.vue?vue&type=template&id=2e991f10

// EXTERNAL MODULE: external "html2canvas"
var external_html2canvas_ = __webpack_require__(142);
var external_html2canvas_default = /*#__PURE__*/__webpack_require__.n(external_html2canvas_);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/PriceToImg.vue?vue&type=script&lang=js

/* harmony default export */ var PriceToImgvue_type_script_lang_js = ({
  props: {
    pageData: {
      type: Object,
      default: {}
    },
    specificationsObj: {
      type: Object,
      default: {}
    },
    tableData: {
      type: Array,
      default: []
    },
    tableColumns: {
      type: Array,
      default: []
    },
    comLocationNum: {
      type: Number,
      default: 1
    },
    emailForm: {
      type: Object,
      default: {}
    },
    loading: {
      type: Boolean,
      default: false
    },
    isImgSrc: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      headerColumns: [{
        label: "LeadTime",
        prop: "time",
        type: "pre" //去掉$符号
      }, {
        label: "Model",
        prop: "model",
        type: "pre" //去掉$符号
      }, {
        label: "Decoration",
        prop: "decoration",
        type: "pre" //去掉$符号
      }, {
        label: "Add On",
        prop: "addonArr",
        type: "pre" //去掉$符号
      }]
    };
  },
  computed: {
    comInfo() {
      var _this$pageData;
      return (_this$pageData = this.pageData) === null || _this$pageData === void 0 ? void 0 : _this$pageData.main;
    },
    comWidth() {
      return 100 / this.tableColumns.length + '%';
    }
  },
  created() {
    if (!this.isImgSrc) {
      this.getBase64Image(this.comInfo.image, 'productImg');
    }
  },
  methods: {
    getColumnHeaderStyle(column) {
      if (column.prop === 'project') {
        return {
          'font-weight': 'bold'
        };
      }
      return {};
    },
    //Base64生成产品图片，因为跨域
    getBase64Image(url, ref) {
      var that = this;
      var image = new Image();
      image.src = url + '?v=' + Math.random(); // 处理缓存
      image.crossOrigin = '*'; // 支持跨域图片
      image.onload = function () {
        var base64 = that.drawBase64Image(image);
        that.$refs[ref].src = base64;
      };
    },
    drawBase64Image(img) {
      var canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var dataURL = canvas.toDataURL('image/png');
      return dataURL;
    },
    htmlToPdf(title) {
      const element = this.$refs.printArea;
      const clientWidth = element.offsetWidth;
      const clientHeight = element.offsetHeight;
      const kh = [clientWidth, clientHeight];
      const opts = {
        scale: 1.5,
        // 缩放比例，提高生成图片清晰度
        useCORS: true,
        // 允许加载跨域的图片
        // allowTaint: true, // 允许图片跨域，和 useCORS 二者不可共同使用
        tainttest: true,
        // 检测每张图片已经加载完成
        logging: true // 日志开关，发布的时候记得改成 false
      };
      external_html2canvas_default()(element, opts).then(canvas => {
        const dataURL = canvas.toDataURL('image/png');
        this.downloadImage(dataURL, kh, title);
        this.$emit('update:loading', false);
      }).catch(() => {
        this.$emit('update:loading', false);
        // Bus.$emit("finishDownload");
      });
    },
    getUrlBase64(url, kh) {
      return new Promise(resolve => {
        let canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.crossOrigin = 'Anonymous'; // 允许跨域
        img.src = url;
        img.onload = () => {
          // eslint-disable-next-line prefer-destructuring
          canvas.height = kh[1];
          // eslint-disable-next-line prefer-destructuring
          canvas.width = kh[0];
          ctx.drawImage(img, 0, 0, kh[0], kh[1]);
          const dataURL = canvas.toDataURL('image/png');
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    downloadImage(imgUrl, kh, title) {
      this.getUrlBase64(imgUrl, kh).then(base64 => {
        const link = document.createElement('a');
        link.href = base64;
        link.download = `${title}.png`;
        link.click();
      });
    }
  }
});
// CONCATENATED MODULE: ./components/PriceToImg.vue?vue&type=script&lang=js
 /* harmony default export */ var components_PriceToImgvue_type_script_lang_js = (PriceToImgvue_type_script_lang_js); 
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(2);

// CONCATENATED MODULE: ./components/PriceToImg.vue





/* normalize component */

var component = Object(componentNormalizer["a" /* default */])(
  components_PriceToImgvue_type_script_lang_js,
  render,
  staticRenderFns,
  false,
  null,
  null,
  "dda7dca6"
  
)

/* harmony default export */ var PriceToImg = __webpack_exports__["default"] = (component.exports);

/***/ })

};;
//# sourceMappingURL=price-to-img.js.map