{"version":3,"sources":["webpack:///./src/components/vue-popper/VuePopper.vue?8e96","webpack:///./src/assets/img/qrCode.jpg","webpack:///./src/components/vue-popper/VuePopper.vue?4a0f","webpack:///src/components/vue-popper/VuePopper.vue","webpack:///./src/components/vue-popper/VuePopper.vue?2f5c","webpack:///./src/components/vue-popper/VuePopper.vue","webpack:///./src/views/pages/host/host-common/subpages/host-common-posterEdit.vue?8acc","webpack:///./src/assets/img/empty.png","webpack:///./src/views/pages/host/host-common/subpages/host-common-posterEdit.vue?8e95","webpack:///src/views/pages/host/host-common/subpages/host-common-posterEdit.vue","webpack:///./src/views/pages/host/host-common/subpages/host-common-posterEdit.vue?e817","webpack:///./src/views/pages/host/host-common/subpages/host-common-posterEdit.vue"],"names":["module","exports","render","_vm","this","_h","$createElement","_c","_self","_t","staticClass","attrs","popperId","on","$event","$emit","_v","_s","closeButton","_e","content","staticRenderFns","props","showPopper","type","required","default","placement","index","data","popper","show","ready","$nextTick","computed","mapGetters","destroy","activeIndex","mounted","watch","val","oldVal","console","destroyed","destroyPopper","methods","mapMutations","setDestroy","initPopper","uuid4","removeOnDestroy","replace","v","toString","component","staticStyle","save","exit","_m","visible","slot","ref","_l","item","key","status","url","nativeOn","handleView","stopPropagation","preventDefault","handleRemove","directives","name","rawName","value","uploadList","length","expression","defaultList","handleSuccess","formHeaders","handleFormatError","handleMaxSize","handleBeforeUpload","uploadUrl","model","callback","$$v","visibleImg","imgName","editId","posterInfo","CompanyName","Logo","BoothCode","SunCode","mapActions","getSharePosterDetail","editSharePoster","init","query","showProgress","initCanvas","Content","map","c","Key","canvas","img","ctx","that","TextAlign","file","splice","fileList","indexOf","res","list","$refs","upload","$Message","warning","check","$router","go","req","Id","SetValues","BackgroundImage","bool","created","components"],"mappings":"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","file":"static/js/chunk-0b65437c.d8d9ad54.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/index.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!./VuePopper.vue?vue&type=style&index=0&lang=scss&\"","module.exports = __webpack_public_path__ + \"static/img/qrCode.2bec7f0a.jpg\";","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t(\"default\"),(_vm.show)?_c('div',{staticClass:\"vue-popper-component\",attrs:{\"id\":'vue-popper-'+_vm.popperId}},[(_vm.closeButton)?_c('button',{staticClass:\"js-popper-close popper-close\",attrs:{\"id\":'vue-popper-'+_vm.popperId+'-close',\"type\":\"button\"},on:{\"click\":function($event){return _vm.$emit('close')}}},[_vm._t(\"close-button\",function(){return [_vm._v(_vm._s(_vm.closeButton))]})],2):_vm._e(),_vm._t(\"content\",function(){return [_vm._v(_vm._s(_vm.content))]}),_c('div',{staticClass:\"popper__arrow\",attrs:{\"x-arrow\":\"\"}})],2):_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n<template>\n  <div>  \n    <slot></slot>\n    <div v-if=\"show\" :id=\"'vue-popper-'+popperId\" class=\"vue-popper-component\">\n      <button\n        v-if=\"closeButton\"\n        @click=\"$emit('close')\"\n        :id=\"'vue-popper-'+popperId+'-close'\"\n        type=\"button\"\n        class=\"js-popper-close popper-close\"\n      >\n        <slot name=\"close-button\">{{ closeButton }}</slot>\n      </button>\n\n      <slot name=\"content\">{{ content }}</slot>\n\n      <div class=\"popper__arrow\" x-arrow></div>\n    </div>\n  </div>\n</template>\n\n<script> \nimport { mapGetters, mapMutations } from \"vuex\";\nimport Popper from 'popper.js';\n\nexport default {\n  props: {\n    showPopper: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    placement: {\n      type: String,\n      required: false,\n      default: \"top\"\n    },\n    content: {\n      type: String,\n      required: false,\n      default: \"\"\n    },\n    closeButton: {\n      type: String,\n      required: false,\n      default: null\n    },\n    index: {\n      type: Number,\n      required: false,\n      default: 0\n    }\n  },\n\n  data() {\n    return {\n      popperId: null,\n      popper: null,\n      show: false,\n    };\n  },\n\n  ready() {\n    this.$nextTick(() => { \n      if (this.showPopper) {\n        this.initPopper();\n      }\n    });\n  },  \n  computed: {\n    ...mapGetters({\n      destroy: \"customComponentModule/getDestroy\",\n      activeIndex: \"customComponentModule/getActiveIndex\"\n    }), \n  },\n  mounted () { \n    if (this.index === 0) { \n      this.show = this.showPopper; \n      if (!!this.showPopper) {\n        this.$nextTick(() => {\n          this.initPopper();\n        });\n      }\n    }\n    if (this.index === this.activeIndex) {\n      this.show = true;  \n        this.$nextTick(() => {\n          this.initPopper();\n        });\n    } \n  },\n\n  watch: {\n    showPopper(val, oldVal) {\n      this.show = this.showPopper; \n      if (!!this.showPopper) {\n        this.$nextTick(() => {\n          this.initPopper();\n        });\n      }\n    }, \n    index(val, oldVal) {\n      console.log(val, oldVal); \n    }\n  },\n\n  destroyed() { \n    this.destroyPopper();\n  },\n\n  methods: {\n    ...mapMutations({\n      setDestroy: \"customComponentModule/setDestroy\",\n    }),\n    initPopper() {\n      this.setDestroy(false);\n      this.popperId = this.uuid4();\n      this.popper = new Popper(\n        this.$el,\n        this.$el.querySelector(\".vue-popper-component\"),\n        {\n          placement: this.placement || \"bottom\",\n          removeOnDestroy: true\n        }\n      );\n    },\n\n    destroyPopper() {\n        this.popper = null;  \n    },\n\n    uuid4() {\n      return \"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx\".replace(/[xy]/g, c => {\n        let r = (Math.random() * 16) | 0,\n          v = c === \"x\" ? r : (r & 0x3) | 0x8;\n        return v.toString(16);\n      });\n    }\n  }\n};\n</script>\n\n\n<style lang=\"scss\">\n$popper-background-color: #fff !default;\n\n.vue-popper-component {\n  background: #fff;\n  color: black;\n  width: 547px;  \n  border-radius: 3px;\n  z-index: 1000; \n\tbox-shadow: 0px 0px 10px 0px \n\t\trgba(0, 0, 0, 0.2);\n\n  .popper-close {\n    position: absolute;\n    top: 2px;\n    right: 4px;\n    color: black;\n    background: transparent;\n    border: none;\n\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .popper__arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: 5px;\n  }\n\n  &[x-placement^=\"top\"] {\n    margin-bottom: 5px;\n\n    .popper__arrow {\n      border-width: 5px 5px 0 5px;\n      border-color: $popper-background-color transparent transparent transparent;\n      bottom: -5px;\n      left: calc(50% - 5px);\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  &[x-placement^=\"bottom\"] {\n    margin-top: 5px;\n\n    .popper__arrow {\n      border-width: 0 5px 5px 5px;\n      border-color: transparent transparent $popper-background-color transparent;\n      top: -5px;\n      left: calc(50% - 5px);\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  &[x-placement^=\"right\"] {\n    margin-left: 55px;\n\n    .popper__arrow {\n      border-width: 5px 5px 5px 0;\n      border-color: transparent $popper-background-color transparent transparent;\n      left: -5px;\n      top: calc(50% - 5px);\n      margin-left: 0;\n      margin-right: 0;\n    }\n  }\n\n  &[x-placement^=\"left\"] {\n    margin-right: 5px;\n\n    .popper__arrow {\n      border-width: 5px 0 5px 5px;\n      border-color: transparent transparent transparent $popper-background-color;\n      right: -5px;\n      top: calc(50% - 5px);\n      margin-left: 0;\n      margin-right: 0;\n    }\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!./VuePopper.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!./VuePopper.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VuePopper.vue?vue&type=template&id=5e456ad0&\"\nimport script from \"./VuePopper.vue?vue&type=script&lang=js&\"\nexport * from \"./VuePopper.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VuePopper.vue?vue&type=style&index=0&lang=scss&\"\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  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../node_modules/css-loader/index.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!./host-common-posterEdit.vue?vue&type=style&index=0&id=61039adf&lang=scss&scoped=true&\"","module.exports = __webpack_public_path__ + \"static/img/empty.31b548ac.png\";","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"common-poster-edit\"},[_c('div',{staticClass:\"header-tool\"},[_c('div',{staticClass:\"header-tool-info\"},[_c('Breadcrumb',[_c('BreadcrumbItem',[_vm._v(\"首页\")]),_c('BreadcrumbItem',[_vm._v(\"通用设置\")]),_c('BreadcrumbItem',[_vm._v(\"海报分享模板\")]),_c('BreadcrumbItem',[_vm._v(\"编辑\")])],1),_c('div',{staticClass:\"header-tool-title\"},[_vm._v(\"编辑\")])],1)]),_c('div',{staticClass:\"header-switch\"},[_c('Button',{staticStyle:{\"margin-right\":\"20px\"},attrs:{\"type\":\"primary\"},on:{\"click\":function($event){return _vm.save()}}},[_vm._v(\"保存\")]),_c('Button',{on:{\"click\":function($event){return _vm.exit()}}},[_vm._v(\"退出\")])],1),_c('div',{staticClass:\"poster-edit-content\"},[_vm._m(0),_c('div',{staticClass:\"popperBox\"},[_c('popper',{attrs:{\"show-popper\":_vm.visible,\"placement\":\"right\"},on:{\"close\":function($event){_vm.visible=false}}},[_c('div',{staticClass:\"ctt1-poptip\",attrs:{\"slot\":\"content\"},slot:\"content\"},[_c('Form',{ref:\"formValidate\",attrs:{\"label-width\":100}},[_c('FormItem',{attrs:{\"label\":\"更换背景图：\"}},[_c('div',{staticClass:\"my-upload\"},[_vm._l((_vm.uploadList),function(item,index){return _c('div',{key:'upload' + index,staticClass:\"my-upload-list\"},[(item.status === 'finished')?[_c('img',{staticStyle:{\"width\":\"100px\",\"height\":\"100px\"},attrs:{\"src\":item.url}}),_c('div',{staticClass:\"my-upload-list-cover\"},[_c('Icon',{attrs:{\"type\":\"ios-eye-outline\"},nativeOn:{\"click\":function($event){return _vm.handleView(item.url)}}}),_c('Icon',{attrs:{\"type\":\"ios-trash-outline\"},nativeOn:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.handleRemove(item)}}})],1)]:[(item.showProgress)?_c('Spin',{staticStyle:{\"width\":\"100px\",\"height\":\"100px\"}},[_c('Icon',{staticClass:\"demo-spin-icon-load\",attrs:{\"type\":\"ios-loading\",\"size\":\"20\"}})],1):_vm._e()]],2)}),_c('Upload',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.uploadList && _vm.uploadList.length < 1),expression:\"uploadList && uploadList.length < 1\"}],ref:\"upload\",staticStyle:{\"display\":\"inline-block\"},attrs:{\"show-upload-list\":false,\"default-file-list\":_vm.defaultList,\"on-success\":_vm.handleSuccess,\"format\":['jpg','jpeg','png'],\"max-size\":2048,\"headers\":_vm.formHeaders,\"on-format-error\":_vm.handleFormatError,\"on-exceeded-size\":_vm.handleMaxSize,\"before-upload\":_vm.handleBeforeUpload,\"multiple\":\"\",\"type\":\"drag\",\"action\":_vm.uploadUrl}},[_c('div',{staticStyle:{\"width\":\"100px\",\"height\":\"100px\",\"padding-top\":\"18px\",\"color\":\"rgb(133, 133, 133)\"}},[_c('div',{staticStyle:{\"font-size\":\"25px\"}},[_vm._v(\"\\n                      +\\n                      \"),_c('p',{staticStyle:{\"font-size\":\"14px\"}},[_vm._v(\"上传图片\")])])])]),_c('iModal',{attrs:{\"title\":\"图片查看\",\"cancel-text\":\"\"},model:{value:(_vm.visibleImg),callback:function ($$v) {_vm.visibleImg=$$v},expression:\"visibleImg\"}},[_c('div',{staticStyle:{\"text-align\":\"center\"}},[(_vm.visibleImg)?_c('img',{staticStyle:{\"max-width\":\"100%\"},attrs:{\"src\":_vm.imgName}}):_vm._e()])])],2),_c('p',{staticClass:\"upload-p\",staticStyle:{\"display\":\"block\",\"font-size\":\"12px\"}},[_vm._v(\"（图片要求：2M以下的jpg或png格式，尺寸：750×1100px）\")])])],1)],1)])],1)]),_c('img',{staticStyle:{\"display\":\"none\"},attrs:{\"id\":\"bgImg\",\"src\":require(\"@/assets/img/empty.png\")}}),_c('img',{staticStyle:{\"display\":\"none\"},attrs:{\"id\":\"bgImg2\",\"src\":require(\"@/assets/img/qrCode.jpg\")}})])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"imgBox\"},[_c('canvas',{staticClass:\"canvas\",attrs:{\"id\":\"sharePoster\"}})])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"common-poster-edit\">\r\n    <div class=\"header-tool\">\r\n      <div class=\"header-tool-info\">\r\n        <Breadcrumb>\r\n          <BreadcrumbItem>首页</BreadcrumbItem>\r\n          <BreadcrumbItem>通用设置</BreadcrumbItem>\r\n          <BreadcrumbItem>海报分享模板</BreadcrumbItem>\r\n          <BreadcrumbItem>编辑</BreadcrumbItem>\r\n        </Breadcrumb>\r\n        <div class=\"header-tool-title\">编辑</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"header-switch\">\r\n      <Button type=\"primary\" style=\"margin-right:20px;\" @click=\"save()\">保存</Button>\r\n      <Button @click=\"exit()\">退出</Button>\r\n    </div>\r\n\r\n    <div class=\"poster-edit-content\">\r\n      <div class=\"imgBox\">\r\n        <!-- <img :src=\"url\"> -->\r\n        <canvas id=\"sharePoster\" class=\"canvas\"></canvas>\r\n      </div>\r\n      <div class=\"popperBox\">\r\n        <popper :show-popper=\"visible\" @close=\"visible=false\" placement=\"right\">\r\n          <div slot=\"content\" class=\"ctt1-poptip\">\r\n            <Form ref=\"formValidate\" :label-width=\"100\">\r\n              <FormItem label=\"更换背景图：\">\r\n                <div class=\"my-upload\">\r\n                  <div\r\n                    class=\"my-upload-list\"\r\n                    v-for=\"(item, index) in uploadList\"\r\n                    :key=\"'upload' + index\"\r\n                  >\r\n                    <template v-if=\"item.status === 'finished'\">\r\n                      <img :src=\"item.url\" style=\"width: 100px;height: 100px;\" />\r\n                      <div class=\"my-upload-list-cover\">\r\n                        <Icon type=\"ios-eye-outline\" @click.native=\"handleView(item.url)\"></Icon>\r\n                        <Icon type=\"ios-trash-outline\" @click.native.stop.prevent=\"handleRemove(item)\"></Icon>\r\n                      </div>\r\n                    </template>\r\n                    <template v-else>\r\n                      <Spin v-if=\"item.showProgress\" style=\"width: 100px;height: 100px;\">\r\n                        <Icon type=\"ios-loading\" size=20 class=\"demo-spin-icon-load\"></Icon>\r\n                      </Spin>\r\n                    </template>\r\n                  </div>\r\n                  <Upload\r\n                    ref=\"upload\"\r\n                    :show-upload-list=\"false\"\r\n                    :default-file-list=\"defaultList\"\r\n                    :on-success=\"handleSuccess\"\r\n                    :format=\"['jpg','jpeg','png']\"\r\n                    :max-size=\"2048\"\r\n                    :headers=\"formHeaders\"\r\n                    :on-format-error=\"handleFormatError\"\r\n                    :on-exceeded-size=\"handleMaxSize\"\r\n                    :before-upload=\"handleBeforeUpload\"\r\n                    multiple\r\n                    type=\"drag\"\r\n                    :action=\"uploadUrl\"\r\n                    style=\"display: inline-block;\"\r\n                    v-show=\"uploadList && uploadList.length < 1\"\r\n                  >\r\n                    <div style=\"width:100px;height:100px;padding-top: 18px;color:rgb(133, 133, 133)\">\r\n                      <div style=\"font-size:25px\">\r\n                        +\r\n                        <p style=\"font-size:14px\">上传图片</p>\r\n                      </div>\r\n                    </div>\r\n                  </Upload>\r\n                  <iModal title=\"图片查看\" cancel-text v-model=\"visibleImg\">\r\n                    <div style=\"text-align: center;\">\r\n                      <img :src=\"imgName\" v-if=\"visibleImg\" style=\"max-width: 100%\" />\r\n                    </div>\r\n                  </iModal>\r\n                </div>\r\n                <p class=\"upload-p\" style=\"display:block;font-size:12px;\">（图片要求：2M以下的jpg或png格式，尺寸：750×1100px）</p>\r\n              </FormItem>\r\n            </Form>\r\n          </div>\r\n        </popper>\r\n      </div>\r\n    </div>\r\n    <img id=\"bgImg\" style=\"display:none;\" src=\"@/assets/img/empty.png\" />\r\n    <img id=\"bgImg2\" style=\"display:none;\" src=\"@/assets/img/qrCode.jpg\" />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapGetters, mapActions } from \"vuex\";\r\nimport popper from \"@components/vue-popper/VuePopper.vue\";\r\n\r\nexport default {\r\n  name: \"host-common-posterEdit\",\r\n  data() {\r\n    return {\r\n      visible: true,\r\n      url: \"\",\r\n      uploadList: [],\r\n      defaultList: [],\r\n      imgName: \"\",\r\n      visibleImg: false,\r\n      editId: \"\",\r\n      posterInfo: {},\r\n      CompanyName: {},\r\n      Logo: {},\r\n      BoothCode: {},\r\n      SunCode: {}\r\n    }\r\n  },\r\n  computed: {\r\n    ...mapGetters({\r\n      formHeaders: \"getFormHeaders\",\r\n      uploadUrl: \"getUploadUrl\",\r\n    }),\r\n  },\r\n  methods: {\r\n    ...mapActions({\r\n      getSharePosterDetail: \"hostCommonModule/getSharePosterDetail\",\r\n      editSharePoster: \"hostCommonModule/editSharePoster\",\r\n    }),\r\n    async init() {\r\n      let query = this.$route.query;\r\n      this.editId = query.id;\r\n      let data = await this.getSharePosterDetail(this.editId);\r\n      if (data && data.posterInfo) {\r\n        data.posterInfo = JSON.parse(data.posterInfo);\r\n      }\r\n      this.posterInfo = data;\r\n      if (this.posterInfo.backgroundImage) {\r\n        this.url = this.posterInfo.backgroundImage;\r\n        this.initCanvas();\r\n        this.uploadList = [{\r\n          status: \"finished\",\r\n          showProgress: false,\r\n          url: this.posterInfo.backgroundImage\r\n        }]\r\n      }\r\n      console.log(\"详情：\",this.posterInfo);\r\n    },\r\n    initCanvas() {\r\n      this.posterInfo.posterInfo.Content.map(c => {\r\n        // if (c.Key === \"CompanyName\") {\r\n        //   this.CompanyName = c;\r\n        // }\r\n        // if (c.Key === \"Logo\") {\r\n        //   this.Logo = c;\r\n        // }\r\n        if (c.Key == \"BoothCode\") {\r\n          this.BoothCode = c;\r\n        }\r\n        if (c.Key == \"SunCode\") {\r\n          this.SunCode = c;\r\n        }\r\n      })\r\n      let canvas = document.getElementById('sharePoster');\r\n      // 画板宽、高\r\n      canvas.width = this.posterInfo.posterInfo.Width;\r\n      canvas.height = this.posterInfo.posterInfo.Height;\r\n      let ctx = canvas.getContext('2d');\r\n      // 背景图\r\n      let img = new Image();\r\n      img.src = this.url;\r\n      // img加载完后绘制背景图，否则会出现刷新后可能不显示的bug\r\n      const that = this;\r\n      img.onload = function() {\r\n        ctx.drawImage(img,0,0,that.posterInfo.posterInfo.Width,that.posterInfo.posterInfo.Height);\r\n        that.posterInfo.posterInfo.Content.map(c => {\r\n          if (c.Key === \"CompanyName\") {\r\n            ctx.font=c.FontStyle + \" \" + c.FontWeight + \" \"  + c.FontSize + 'px ' + c.FontFamily;\r\n            ctx.fillStyle = c.Color;\r\n            ctx.textAlign = c.TextAlign;\r\n            if (c.TextAlign === \"center\") {\r\n              ctx.fillText(\"公司名称\",that.posterInfo.posterInfo.Width/2,c.Y + c.FontSize);\r\n            } else {\r\n              ctx.fillText(\"公司名称\",c.X,c.Y + c.FontSize);\r\n            }\r\n          }\r\n          if (c.Key === \"Logo\") {\r\n            let bgImg = document.getElementById('bgImg');\r\n            ctx.beginPath();\r\n            ctx.arc(c.X+c.Width/2, c.Y+c.Height/2, c.Width/2, 0, 2*Math.PI);\r\n            ctx.clip()\r\n            ctx.drawImage(bgImg,c.X,c.Y,c.Width,c.Height);\r\n          }\r\n          // 展位号\r\n          ctx.font=that.BoothCode.FontStyle + \" \" + that.BoothCode.FontWeight + \" \"  + that.BoothCode.FontSize + 'px ' + that.BoothCode.FontFamily;\r\n          ctx.textAlign = that.BoothCode.TextAlign;\r\n          if (that.BoothCode.TextAlign === \"center\") {\r\n            ctx.fillText(\"展位号\",that.posterInfo.posterInfo.Width/2,that.BoothCode.Y + that.BoothCode.FontSize);\r\n          } else {\r\n            ctx.fillText(\"展位号\",that.BoothCode.X,that.BoothCode.Y + that.BoothCode.FontSize);\r\n          }\r\n          // 二维码\r\n          ctx.save();\r\n          let bgImg2 = document.getElementById('bgImg2');\r\n          // ctx.beginPath();\r\n          // ctx.arc(that.SunCode.X+that.SunCode.Width/2, that.SunCode.Y+that.SunCode.Height/2, that.SunCode.Width/2, 0, 2*Math.PI);\r\n          // ctx.clip();\r\n          ctx.drawImage(bgImg2,that.SunCode.X,that.SunCode.Y,that.SunCode.Width,that.SunCode.Height);\r\n        })\r\n      }\r\n      \r\n      \r\n    },\r\n    // 查看上传图片\r\n    handleView(name) {\r\n      this.imgName = name;\r\n      this.visibleImg = true;\r\n    },\r\n    // 移除上传图片\r\n    handleRemove(file) {\r\n      const fileList = this.uploadList;\r\n      this.uploadList.splice(fileList.indexOf(file), 1);\r\n    },\r\n    handleSuccess(res, file) {\r\n      if (res && res.list.length) {\r\n        file.url = res.list[0];\r\n        this.uploadList = this.$refs.upload.fileList;\r\n        this.url = file.url;\r\n        this.initCanvas();\r\n      }\r\n    },\r\n    handleFormatError(file) {\r\n      this.$Message.warning(`文件格式是不正确的, 请上传jpg或者png格式的图片`);\r\n    },\r\n    handleMaxSize(file) {\r\n      this.$Message.warning(`文件大小超过限制, 请上传小于2M的图片`);\r\n    },\r\n    handleBeforeUpload() {\r\n      const limitNum = 1;\r\n      const check = this.uploadList.length < limitNum;\r\n      if (!check) {\r\n        this.$Message.warning(`最多上传${limitNum}张图片`);\r\n      }\r\n      return check;\r\n    },\r\n    exit() {\r\n      this.$router.go(-1);\r\n    },\r\n    async save() {\r\n      if (this.uploadList.length < 1) {\r\n        this.$Message.warning(`请上传背景图`);\r\n        return;\r\n      }\r\n      let url = this.uploadList[0].url;\r\n      let req = {\r\n        Id: this.editId,\r\n        SetValues: {\r\n          BackgroundImage: url\r\n        }\r\n      }\r\n      let bool = await this.editSharePoster(req);\r\n      if (bool && bool.successed) {\r\n        this.$Message.success(`保存成功`);\r\n        this.$router.push(`/host/index/common/common-poster`);\r\n      } else {\r\n        this.$Message.error(`保存失败，请重试`);\r\n      }\r\n    }\r\n  },\r\n  created() {\r\n    this.init();\r\n  }, \r\n  components: {\r\n    popper\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.common-poster-edit {\r\n  .header-switch {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-end;\r\n    padding: 0 35px 18px 35px;\r\n    background: #fff;\r\n    &-text {\r\n      flex: 1;\r\n      font-size: 14px;\r\n      color: #808080;\r\n    }\r\n    &-box {\r\n      flex: 1;\r\n      text-align: right;\r\n    }\r\n  }\r\n  .poster-edit-content {\r\n    width: 800px;\r\n    margin: 50px auto;\r\n    display: flex;\r\n    .imgBox {\r\n      width: 377px;\r\n      height: 626px;\r\n      img {\r\n        width: 100%;\r\n        height: 100%;\r\n      }\r\n    }\r\n    .popperBox {\r\n      margin: 145px 40px 0 0;\r\n      .ctt1-poptip {\r\n        width: 540px;\r\n        height: 288px;\r\n        padding: 60px;\r\n      }\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!./host-common-posterEdit.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!./host-common-posterEdit.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./host-common-posterEdit.vue?vue&type=template&id=61039adf&scoped=true&\"\nimport script from \"./host-common-posterEdit.vue?vue&type=script&lang=js&\"\nexport * from \"./host-common-posterEdit.vue?vue&type=script&lang=js&\"\nimport style0 from \"./host-common-posterEdit.vue?vue&type=style&index=0&id=61039adf&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  \"61039adf\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}