{"remainingRequest":"D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\thread-loader\\dist\\cjs.js!D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\babel-loader\\lib\\index.js!D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\wnmp\\www\\vue\\seaBlueAdmin\\src\\views\\ShoppingMall\\AppDesign\\PageFormCom\\MagicForm.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\wnmp\\www\\vue\\seaBlueAdmin\\src\\views\\ShoppingMall\\AppDesign\\PageFormCom\\MagicForm.vue","mtime":1678954023585},{"path":"D:\\wnmp\\www\\vue\\seaBlueAdmin\\babel.config.js","mtime":1681371897685},{"path":"D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1681371913603},{"path":"D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\thread-loader\\dist\\cjs.js","mtime":1681371925422},{"path":"D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\babel-loader\\lib\\index.js","mtime":1681371912860},{"path":"D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1681371913603},{"path":"D:\\wnmp\\www\\vue\\seaBlueAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1681371925849}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KaW1wb3J0IFVwbG9hZFFpbml1IGZyb20gIkAvY29tcG9uZW50L2NvbW1vbi9VcGxvYWRRaW5pdSI7CmltcG9ydCBMaW5rU2VsIGZyb20gIi4uL2NvbXBvbmVudHMvTGlua1NlbC52dWUiOwpleHBvcnQgZGVmYXVsdCB7CiAgbmFtZTogIk1hZ2ljRm9ybSIsCiAgY29tcG9uZW50czogewogICAgVXBsb2FkUWluaXUsCiAgICBMaW5rU2VsCiAgfSwKICBwcm9wczogewogICAgdGVtRm9ybTogewogICAgICB0eXBlOiBPYmplY3QsCiAgICAgIGRlZmF1bHQ6ICgpID0+IHsKICAgICAgICByZXR1cm4ge307CiAgICAgIH0KICAgIH0KICB9LAoKICBkYXRhKCkgewogICAgcmV0dXJuIHsKICAgICAgbGlua19zaG93OiBmYWxzZSwKICAgICAgaW1nX2luZGV4OiAwLAogICAgICBmb3JtOiB7fQogICAgfTsKICB9LAoKICB3YXRjaDogewogICAgdGVtRm9ybSh2YWwpIHsKICAgICAgdGhpcy5mb3JtID0gdmFsOwogICAgfQoKICB9LAoKICBjcmVhdGVkKCkgewogICAgdGhpcy5mb3JtID0gdGhpcy50ZW1Gb3JtOwogIH0sCgogIG1ldGhvZHM6IHsKICAgIHN0eWxlQ2hhbmdlKHZhbCkgewogICAgICBpZiAodmFsID09PSA1ICYmIHRoaXMuZm9ybS5pbWFnZXNMaXN0Lmxlbmd0aCA+IDQpIHsKICAgICAgICB0aGlzLmZvcm0uaW1hZ2VzTGlzdC5zcGxpY2UoNCk7CiAgICAgIH0KCiAgICAgIHRoaXMuY29uZmlybSgpOwogICAgfSwKCiAgICBjb25maXJtKCkgewogICAgICB0aGlzLiRlbWl0KCJjb25maXJtIiwgdGhpcy5mb3JtKTsKICAgIH0sCgogICAgZGVsSW1nKGluZGV4KSB7CiAgICAgIHRoaXMuZm9ybS5pbWFnZXNMaXN0LnNwbGljZShpbmRleCwgMSk7CiAgICAgIHRoaXMuY29uZmlybSgpOwogICAgfSwKCiAgICB1cGxvYWRTdWNjZXNzKHZhbCwgcmVzLCBmaWxlLCBmaWxlTGlzdCkgewogICAgICB0aGlzLmZvcm0uaW1hZ2VzTGlzdFt0aGlzLmltZ19pbmRleF0uaW1hZ2UgPSB7CiAgICAgICAgbmFtZTogZmlsZS5uYW1lLAogICAgICAgIHVybDogdmFsCiAgICAgIH07CiAgICAgIHRoaXMuY29uZmlybSgpOwogICAgfSwKCiAgICBiZWZvcmVVcGxvYWQoaW5kZXgpIHsKICAgICAgdGhpcy5pbWdfaW5kZXggPSBpbmRleDsKICAgIH0sCgogICAgbGlua0NvbmZpcm0ob2JqKSB7CiAgICAgIHRoaXMuZm9ybS5pbWFnZXNMaXN0W3RoaXMuaW1nX2luZGV4XS51cmwgPSBvYmoubGlua3M7CiAgICAgIHRoaXMuZm9ybS5pbWFnZXNMaXN0W3RoaXMuaW1nX2luZGV4XS5zd2l0Y2hUYWIgPSBvYmouc3dpdGNoVGFiID8gInN3aXRjaFRhYiIgOiAiIjsKICAgICAgdGhpcy5jb25maXJtKCk7CiAgICB9LAoKICAgIGFkZEltZygpIHsKICAgICAgdGhpcy5mb3JtLmltYWdlc0xpc3QucHVzaCh7CiAgICAgICAgaW1hZ2U6ICIiLAogICAgICAgIHVybDogIiIsCiAgICAgICAgc3dpdGNoVGFiOiAiIgogICAgICB9KTsKICAgICAgdGhpcy5jb25maXJtKCk7CiAgICB9LAoKICAgIG9wZW5VcmwoaW5kZXgpIHsKICAgICAgdGhpcy5pbWdfaW5kZXggPSBpbmRleDsKICAgICAgdGhpcy5saW5rX3Nob3cgPSB0cnVlOwogICAgfQoKICB9Cn07"},{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+IA;AACA;AAEA;EACAA,iBADA;EAEAC;IACAC,WADA;IAEAC;EAFA,CAFA;EAMAC;IACAC;MACAC,YADA;MAEAC;QACA;MACA;IAJA;EADA,CANA;;EAcAC;IACA;MACAC,gBADA;MAEAC,YAFA;MAGAC;IAHA;EAKA,CApBA;;EAqBAC;IACAP;MACA;IACA;;EAHA,CArBA;;EA0BAQ;IACA;EACA,CA5BA;;EA6BAC;IACAC;MACA;QACA;MACA;;MACA;IACA,CANA;;IAOAC;MACA;IACA,CATA;;IAUAC;MACA;MACA;IACA,CAbA;;IAcAC;MACA;QACAlB,eADA;QAEAmB;MAFA;MAIA;IACA,CApBA;;IAqBAC;MACA;IACA,CAvBA;;IAwBAC;MACA;MACA,iEACA,WADA,GAEA,EAFA;MAGA;IACA,CA9BA;;IA+BAC;MACA;QACAC,SADA;QAEAJ,OAFA;QAGAK;MAHA;MAKA;IACA,CAtCA;;IAuCAC;MACA;MACA;IACA;;EA1CA;AA7BA","names":["name","components","UploadQiniu","LinkSel","props","temForm","type","default","data","link_show","img_index","form","watch","created","methods","styleChange","confirm","delImg","uploadSuccess","url","beforeUpload","linkConfirm","addImg","image","switchTab","openUrl"],"sourceRoot":"src/views/ShoppingMall/AppDesign/PageFormCom","sources":["MagicForm.vue"],"sourcesContent":["<template>\n  <div class=\"tem-box\">\n    <div class=\"tem-tit clearfix\">\n      <span class=\"tem-tit-span float_left\">图片魔方</span>\n      <!--<el-button\n        class=\"float_right\"\n        type=\"primary\"\n        size=\"mini\"\n        @click=\"confirm\"\n      >\n        完成\n      </el-button>-->\n    </div>\n    <div class=\"tem-main\">\n      <el-form ref=\"form\" :model=\"form\" size=\"small\" label-position=\"top\">\n        <el-form-item label=\"布局风格\" class=\"PD-form-item\">\n          <el-radio-group v-model=\"form.imgStyle\" @change=\"styleChange\">\n            <el-radio :label=\"1\" style=\"padding-bottom: 10px\">单列</el-radio>\n            <el-radio :label=\"2\">两列</el-radio>\n            <el-radio :label=\"3\">三列</el-radio>\n            <el-radio :label=\"4\">四列</el-radio>\n            <el-radio :label=\"5\">魔方</el-radio>\n          </el-radio-group>\n        </el-form-item>\n        <el-form-item label=\"左右间距\" class=\"PD-form-item\">\n          <el-slider\n            v-model=\"form.paddingLR\"\n            :max=\"30\"\n            @change=\"confirm\"\n          ></el-slider>\n        </el-form-item>\n        <el-form-item label=\"上下间距\" class=\"PD-form-item\">\n          <el-slider\n            v-model=\"form.paddingTB\"\n            :max=\"30\"\n            @change=\"confirm\"\n          ></el-slider>\n        </el-form-item>\n        <el-form-item label=\"图片\" class=\"PD-form-item\">\n          <p v-if=\"form.imgStyle === 1\" class=\"input-tip\">\n            建议图片尺寸\n            <span class=\"px-span\">宽度720，高度200px-950px</span>\n          </p>\n          <p v-else-if=\"form.imgStyle === 2\" class=\"input-tip\">\n            建议图片尺寸\n            <span class=\"px-span\">348px*172px</span>\n            ，图片高度须完全一致\n          </p>\n          <p v-else-if=\"form.imgStyle === 3\" class=\"input-tip\">\n            建议图片尺寸\n            <span class=\"px-span\">238px*172px</span>\n            ，图片高度须完全一致\n          </p>\n          <p v-else-if=\"form.imgStyle === 4\" class=\"input-tip\">\n            建议图片尺寸\n            <span class=\"px-span\">178px*172px</span>\n            ，图片高度须完全一致\n          </p>\n          <div v-else-if=\"form.imgStyle === 5\">\n            <p v-if=\"form.imagesList.length === 1\" class=\"input-tip\">\n              建议图片尺寸\n              <span class=\"px-span\">宽度720，高度200px-950px</span>\n            </p>\n            <img\n              v-if=\"form.imagesList.length === 2\"\n              class=\"cube-img\"\n              :src=\"require('@/assets/img/cube_two.png')\"\n            />\n            <img\n              v-if=\"form.imagesList.length === 3\"\n              class=\"cube-img\"\n              :src=\"require('@/assets/img/cube_three.png')\"\n            />\n            <img\n              v-if=\"form.imagesList.length === 4\"\n              class=\"cube-img\"\n              :src=\"require('@/assets/img/cube_four.png')\"\n            />\n          </div>\n\n          <ul class=\"up-img-ul\">\n            <li\n              v-for=\"(item, index) in form.imagesList\"\n              :key=\"index\"\n              class=\"clearfix up-img-li\"\n            >\n              <div>\n                <UploadQiniu\n                  :width=\"50\"\n                  is-btn=\"picture\"\n                  :file-list=\"item.image.url ? [item.image] : []\"\n                  @uploadSuccess=\"uploadSuccess\"\n                  @beforeUpload=\"beforeUpload(index)\"\n                >\n                  <div slot=\"upbtn\">\n                    <el-button size=\"small\" type=\"text\">点击上传</el-button>\n                    <!--                                  <i class=\"el-icon-plus\"></i>-->\n                  </div>\n                </UploadQiniu>\n              </div>\n              <div class=\"up-url\" @click=\"openUrl(index)\">\n                <i class=\"el-icon-link\"></i>\n                <span>{{ item.url || \"请选择链接\" }}</span>\n              </div>\n              <div\n                v-if=\"form.imagesList.length > 1\"\n                class=\"img-del-icon\"\n                @click=\"delImg(index)\"\n              >\n                <i class=\"el-icon-close\"></i>\n              </div>\n            </li>\n          </ul>\n          <div style=\"padding-top: 10px\">\n            <el-button\n              style=\"width: 100%; border: 1px dashed #999\"\n              size=\"small\"\n              icon=\"el-icon-plus\"\n              :disabled=\"\n                form.imagesList.length === (form.imgStyle === 5 ? 4 : 12)\n              \"\n              @click=\"addImg\"\n            >\n              {{ form.imagesList.length }}/{{\n                form.imgStyle === 5 ? \"4\" : \"12\"\n              }}\n              添加一个\n            </el-button>\n          </div>\n        </el-form-item>\n        <!--        <el-form-item label=\"图片间隙：\"></el-form-item>-->\n      </el-form>\n    </div>\n    <LinkSel\n      v-if=\"link_show\"\n      :is-show=\"link_show\"\n      @confirm=\"linkConfirm\"\n      @cancel=\"link_show = false\"\n    />\n  </div>\n</template>\n\n<script>\n  import UploadQiniu from \"@/component/common/UploadQiniu\";\n  import LinkSel from \"../components/LinkSel.vue\";\n\n  export default {\n    name: \"MagicForm\",\n    components: {\n      UploadQiniu,\n      LinkSel,\n    },\n    props: {\n      temForm: {\n        type: Object,\n        default: () => {\n          return {};\n        },\n      },\n    },\n    data() {\n      return {\n        link_show: false,\n        img_index: 0,\n        form: {},\n      };\n    },\n    watch: {\n      temForm(val) {\n        this.form = val;\n      },\n    },\n    created() {\n      this.form = this.temForm;\n    },\n    methods: {\n      styleChange(val) {\n        if (val === 5 && this.form.imagesList.length > 4) {\n          this.form.imagesList.splice(4);\n        }\n        this.confirm();\n      },\n      confirm() {\n        this.$emit(\"confirm\", this.form);\n      },\n      delImg(index) {\n        this.form.imagesList.splice(index, 1);\n        this.confirm();\n      },\n      uploadSuccess(val, res, file, fileList) {\n        this.form.imagesList[this.img_index].image = {\n          name: file.name,\n          url: val,\n        };\n        this.confirm();\n      },\n      beforeUpload(index) {\n        this.img_index = index;\n      },\n      linkConfirm(obj) {\n        this.form.imagesList[this.img_index].url = obj.links;\n        this.form.imagesList[this.img_index].switchTab = obj.switchTab\n          ? \"switchTab\"\n          : \"\";\n        this.confirm();\n      },\n      addImg() {\n        this.form.imagesList.push({\n          image: \"\",\n          url: \"\",\n          switchTab: \"\",\n        });\n        this.confirm();\n      },\n      openUrl(index) {\n        this.img_index = index;\n        this.link_show = true;\n      },\n    },\n  };\n</script>\n\n<style scoped>\n  .cube-img {\n    width: 250px;\n    margin: 0 auto;\n    display: block;\n  }\n  .px-span {\n    color: #fb6638;\n  }\n</style>\n"]}]}