{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\app\\upload\\index.vue?vue&type=style&index=0&id=3ffc8814&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\app\\upload\\index.vue","mtime":1761614939006},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudXBsb2FkLWJ0biB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQp9DQouaW1nLWxpc3Qgew0KICBwYWRkaW5nOiAxMHB4Ow0KICBvdmVyZmxvdzogc2Nyb2xsOw0KICBoZWlnaHQ6IGNhbGMoMTAwdmggLSA1MHB4KTsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCn0NCg0KOjp2LWRlZXAgLmVsLXVwbG9hZC1saXN0LS1waWN0dXJlLWNhcmQgLmVsLXVwbG9hZC1saXN0X19pdGVtIHsNCiAgLy8gd2lkdGg6IDExM3B4Ow0KICAvLyBoZWlnaHQ6IDExM3B4Ow0KICAvLyBsaW5lLWhlaWdodDogMTEzcHg7DQogIC8vIG92ZXJmbG93OiBpbmhlcml0Ow0KICBtYXJnaW46IDElIDElIDBweCAxJTsNCiAgd2lkdGg6IDMxLjMlOw0KICBoZWlnaHQ6IDMxLjMlOw0KICBwYWRkaW5nLXRvcDogMzEuMyU7DQogIGFzcGVjdC1yYXRpbzogMSAvIDE7DQp9DQo6OnYtZGVlcCAuZWwtdXBsb2FkLWxpc3QtLXBpY3R1cmUtY2FyZCAuZWwtdXBsb2FkLWxpc3RfX2l0ZW0gPiBkaXYgew0KICAvLyBwb3NpdGlvbjogcmVsYXRpdmU7DQogIHdpZHRoOiAxMDAlOw0KICBoZWlnaHQ6IDEwMCU7DQp9DQo6OnYtZGVlcCAuZWwtdXBsb2FkLS1waWN0dXJlLWNhcmQgew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KICBkaXNwbGF5OiBmbGV4Ow0KICBoZWlnaHQ6IDE0NnB4Ow0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgYmFja2dyb3VuZDogI2Y5ZjlmOTsNCn0NCjo6di1kZWVwIC5lbC11cGxvYWQtbGlzdC0tcGljdHVyZS1jYXJkIC5lbC11cGxvYWQtbGlzdF9faXRlbSBpbWcgew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KICBib3JkZXItcmFkaXVzOiA2cHg7DQogIG9iamVjdC1maXQ6IGNvdmVyOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGxlZnQ6IDA7DQogIHRvcDogMDsNCn0NCi5idG5kZWwgew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIHotaW5kZXg6IDE7DQogIGZvbnQtc2l6ZTogMThweDsNCiAgcmlnaHQ6IC0xcHg7DQogIHRvcDogLTFweDsNCiAgY29sb3I6ICMyODI4Mjg7DQogIG9wYWNpdHk6IDAuNTsNCn0NCjo6di1kZWVwIC5lbC11cGxvYWQtLXBpY3R1cmUtY2FyZDpob3ZlciwNCi5lbC11cGxvYWQ6Zm9jdXMgew0KICBib3JkZXItY29sb3I6ICNjMGNjZGE7DQp9DQouaW1nLWJveCB7DQogIGRpc3BsYXk6IGZsZXg7DQogIHBhZGRpbmctbGVmdDogMTAwcHg7DQogIGZsZXgtd3JhcDogd3JhcDsNCn0NCi5ub25lLWNhcmQgOjp2LWRlZXAgLmVsLXVwbG9hZC0tcGljdHVyZS1jYXJkIHsNCiAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Ow0KfQ0KLmZvb3RlciB7DQogIHBhZGRpbmc6IDAgMTBweCAwIDE1cHg7DQogIHBvc2l0aW9uOiBmaXhlZDsNCiAgYm90dG9tOiAwOw0KICB3aWR0aDogMTAwJTsNCiAgYm94LXNpemluZzogYm9yZGVyLWJveDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjg1KTsNCiAgYmFja2Ryb3AtZmlsdGVyOiBibHVyKDEwcHgpOw0KICB6LWluZGV4OiAyNzc7DQogIGJvcmRlci10b3A6IDFweCBzb2xpZCAjZjBmMGYwOw0KICBoZWlnaHQ6IDUwcHg7DQogIGRpc3BsYXk6IGZsZXg7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsNCiAgLmJ0biB7DQogICAgYm9yZGVyOiAxcHggc29saWQgI2NjY2NjYzsNCiAgICB3aWR0aDogODhweDsNCiAgICBoZWlnaHQ6IDMwcHg7DQogICAgYm9yZGVyLXJhZGl1czogMTVweDsNCiAgICBjb2xvcjogIzAwMDsNCiAgICBmb250LXNpemU6IDE0cHg7DQogICAgZm9udC1mYW1pbHk6IFBpbmdGYW5nIFNDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDOw0KICAgIGZvbnQtd2VpZ2h0OiA0MDA7DQogICAgY29sb3I6ICM2NjY2NjY7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICB9DQogIC51cGxvYWQgew0KICAgIGJhY2tncm91bmQtY29sb3I6ICNlOTMzMjM7DQogICAgY29sb3I6ICNmZmY7DQogICAgbWFyZ2luLWxlZnQ6IDEwcHg7DQogIH0NCiAgLnVwbG9hZC5uby1waWMgew0KICAgIGJhY2tncm91bmQ6ICNlOTMzMjM7DQogICAgb3BhY2l0eTogMC4zOw0KICB9DQp9DQoudXBsb2FkLWNhcmQgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOw0KICBsaW5lLWhlaWdodDogMTZweDsNCiAgLmVsLWljb24tcGx1cyB7DQogICAgZm9udC1zaXplOiAyOHB4Ow0KICAgIGZvbnQtd2VpZ2h0OiBib2xkOw0KICAgIGNvbG9yOiAjYmJiYmJiOw0KICB9DQogIC50ZXh0IHsNCiAgICBmb250LXNpemU6IDEzcHg7DQogICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICBjb2xvcjogIzk5OTk5OTsNCiAgICBtYXJnaW4tdG9wOiAxOHB4Ow0KICB9DQp9DQoudXBsb2FkLXN1Y2Nlc3Mgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsNCiAgaGVpZ2h0OiA4MHZoOw0KICAuc3VjY2VzcyB7DQogICAgd2lkdGg6IDUwcHg7DQogICAgaGVpZ2h0OiA1MHB4Ow0KICAgIGJhY2tncm91bmQ6ICM0YmJjMTI7DQogICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgICBtYXJnaW4tYm90dG9tOiAyMHB4Ow0KICAgIC5pbWFnZSB7DQogICAgICB3aWR0aDogNjAlOw0KICAgIH0NCiAgfQ0KICAudGV4dCB7DQogICAgZm9udC1zaXplOiAxNnB4Ow0KICAgIGZvbnQtZmFtaWx5OiBQaW5nRmFuZyBTQy1NZWRpdW0sIFBpbmdGYW5nIFNDOw0KICAgIGZvbnQtd2VpZ2h0OiA1MDA7DQogICAgY29sb3I6ICMyODI4Mjg7DQogICAgbWFyZ2luLWJvdHRvbTogNDBweDsNCiAgfQ0KICAuYWdhaW4gew0KICAgIHdpZHRoOiAxNTBweDsNCiAgICBoZWlnaHQ6IDQzcHg7DQogICAgYm9yZGVyLXJhZGl1czogMjFweDsNCiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgbGluZS1oZWlnaHQ6IDQxcHg7DQogICAgZm9udC1zaXplOiAxNXB4Ow0KICAgIGZvbnQtd2VpZ2h0OiA0MDA7DQogICAgY29sb3I6ICMzMzMzMzM7DQogICAgYm9yZGVyOiAxcHggc29saWQgI2NjY2NjYzsNCiAgfQ0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAkMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/app/upload","sourcesContent":["<template>\r\n  <div class=\"main\" v-loading=\"loading\">\r\n    <div v-if=\"uploading\">\r\n      <div class=\"img-list\" :class=\"{ 'none-card': imgList.length }\">\r\n        <el-upload\r\n          ref=\"upload\"\r\n          :action=\"fileUrl\"\r\n          list-type=\"picture-card\"\r\n          :on-change=\"fileChange\"\r\n          :on-error=\"fileError\"\r\n          :before-upload=\"beforeUpload\"\r\n          :file-list=\"imgList\"\r\n          :auto-upload=\"false\"\r\n          :multiple=\"true\"\r\n          :limit=\"limit\"\r\n          accept=\"image/*\"\r\n        >\r\n          <div slot=\"default\" class=\"upload-card\" v-if=\"!imgList.length\">\r\n            <i class=\"el-icon-plus\"></i>\r\n            <p class=\"text\">点击选择图片</p>\r\n          </div>\r\n          <div slot=\"file\" slot-scope=\"{ file }\">\r\n            <img class=\"el-upload-list__item-thumbnail\" :src=\"file.url\" alt=\"\" />\r\n            <i class=\"el-icon-error btndel\" v-db-click @click=\"handleRemove(file)\" />\r\n          </div>\r\n        </el-upload>\r\n      </div>\r\n\r\n      <div class=\"footer\">\r\n        <div v-if=\"imgList.length\">共{{ imgList.length }}/{{ limit }}张，{{ (allSize / 1000000).toFixed(2) }} M</div>\r\n        <div v-else></div>\r\n        <div class=\"upload-btn\">\r\n          <div v-if=\"imgList.length < limit\" class=\"btn\" v-db-click @click=\"selectImgs\">\r\n            {{ imgList.length ? '继续选择' : '选择图片' }}\r\n          </div>\r\n          <div class=\"btn upload\" :class=\"{ 'no-pic': !imgList.length }\" v-db-click @click=\"submitUpload\">确认上传</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div v-else class=\"upload-success\">\r\n      <div class=\"success\">\r\n        <img class=\"image\" src=\"@/assets/images/success.jpg\" alt=\"\" />\r\n      </div>\r\n      <div class=\"text\">图片上传成功</div>\r\n      <div class=\"again\" v-db-click @click=\"again\">继续上传</div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Setting from '@/setting';\r\nimport { scanUpload } from '@/api/setting';\r\nimport compressImg from '@/utils/compressImg.js';\r\nimport { isPicUpload } from '@/utils';\r\n\r\nexport default {\r\n  name: 'app_upload_file',\r\n  data() {\r\n    return {\r\n      fileUrl: Setting.apiBaseURL + '/image/scan_upload',\r\n      imgList: [],\r\n      allSize: 0,\r\n      token: '',\r\n      uploading: true,\r\n      limit: 20,\r\n      loading: false,\r\n      pid: 0,\r\n    };\r\n  },\r\n  created() {\r\n    this.token = this.$route.query.token;\r\n    this.pid = this.$route.query.pid;\r\n    document.title = '手机端扫码上传';\r\n  },\r\n  methods: {\r\n    selectImgs() {\r\n      if (this.loading) return;\r\n      this.$refs['upload'].$refs['upload-inner'].handleClick();\r\n    },\r\n    again() {\r\n      this.uploading = true;\r\n      this.imgList = [];\r\n      this.allSize = 0;\r\n    },\r\n    async submitUpload() {\r\n      if (this.imgList.length) {\r\n        if (this.loading) return;\r\n        this.loading = true;\r\n        for (let i = 0; i < this.imgList.length; i++) {\r\n          const file = this.imgList[i].raw;\r\n          await this.uploadItem(file);\r\n          if (i == this.imgList.length - 1) {\r\n            this.uploading = false;\r\n            this.loading = false;\r\n          }\r\n        }\r\n      } else {\r\n        this.$message.warning('请先选择图片');\r\n      }\r\n    },\r\n    handleRemove(file) {\r\n      let index = this.imgList.findIndex((e) => {\r\n        return e.url == file.url;\r\n      });\r\n      this.imgList.splice(index, 1);\r\n      this.$nextTick((e) => {\r\n        let s = 0;\r\n        if (this.imgList.length) {\r\n          this.imgList.map((e) => {\r\n            s += e.raw.size;\r\n          });\r\n          this.allSize = s;\r\n        } else {\r\n          this.allSize = 0;\r\n        }\r\n      });\r\n    },\r\n\r\n    uploadItem(file) {\r\n      return new Promise((resolve, reject) => {\r\n        const formData = new FormData();\r\n        formData.append('file', file);\r\n        formData.append('uploadToken', this.token);\r\n        formData.append('pid', this.pid);\r\n        scanUpload(formData)\r\n          .then((res) => {\r\n            if (res.status == 200) {\r\n              resolve();\r\n            } else {\r\n              this.loading = false;\r\n              this.$message({\r\n                message: '上传失败',\r\n                type: 'error',\r\n                duration: 1000,\r\n              });\r\n            }\r\n          })\r\n          .catch((err) => {\r\n            this.loading = false;\r\n            this.$message.error(err.msg);\r\n          });\r\n      });\r\n    },\r\n    fileError(err, file, fileList) {\r\n      console.log(err, file, fileList);\r\n    },\r\n    beforeUpload(file) {\r\n      return isPicUpload(file);\r\n    },\r\n    async fileChange(file, fileList) {\r\n      if (file.size >= 2097152) {\r\n        await this.comImg(file.raw).then((res) => {\r\n          fileList.map((e) => {\r\n            if (e.uid === file.uid) {\r\n              this.allSize += res.size;\r\n              e.raw = res;\r\n            }\r\n          });\r\n          this.imgList = fileList;\r\n        });\r\n      } else {\r\n        this.imgList = fileList;\r\n        let s = 0;\r\n        if (this.imgList.length) {\r\n          this.imgList.map((e) => {\r\n            s += e.raw.size;\r\n          });\r\n          this.allSize = s;\r\n        } else {\r\n          this.allSize = 0;\r\n        }\r\n      }\r\n    },\r\n    comImg(file) {\r\n      return new Promise((resolve, reject) => {\r\n        compressImg(file).then((res) => {\r\n          resolve(res);\r\n        });\r\n      });\r\n    },\r\n    loadData(item, callback) {\r\n      getCategoryListApi({\r\n        pid: item.value,\r\n      })\r\n        .then(async (res) => {\r\n          const data = res.data.list;\r\n          callback(data);\r\n        })\r\n        .catch((res) => {});\r\n    },\r\n  },\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.upload-btn {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.img-list {\r\n  padding: 10px;\r\n  overflow: scroll;\r\n  height: calc(100vh - 50px);\r\n  background-color: #fff;\r\n}\r\n\r\n::v-deep .el-upload-list--picture-card .el-upload-list__item {\r\n  // width: 113px;\r\n  // height: 113px;\r\n  // line-height: 113px;\r\n  // overflow: inherit;\r\n  margin: 1% 1% 0px 1%;\r\n  width: 31.3%;\r\n  height: 31.3%;\r\n  padding-top: 31.3%;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n::v-deep .el-upload-list--picture-card .el-upload-list__item > div {\r\n  // position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n::v-deep .el-upload--picture-card {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  height: 146px;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background: #f9f9f9;\r\n}\r\n::v-deep .el-upload-list--picture-card .el-upload-list__item img {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 6px;\r\n  object-fit: cover;\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n}\r\n.btndel {\r\n  position: absolute;\r\n  z-index: 1;\r\n  font-size: 18px;\r\n  right: -1px;\r\n  top: -1px;\r\n  color: #282828;\r\n  opacity: 0.5;\r\n}\r\n::v-deep .el-upload--picture-card:hover,\r\n.el-upload:focus {\r\n  border-color: #c0ccda;\r\n}\r\n.img-box {\r\n  display: flex;\r\n  padding-left: 100px;\r\n  flex-wrap: wrap;\r\n}\r\n.none-card ::v-deep .el-upload--picture-card {\r\n  display: none !important;\r\n}\r\n.footer {\r\n  padding: 0 10px 0 15px;\r\n  position: fixed;\r\n  bottom: 0;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  background-color: rgba(255, 255, 255, 0.85);\r\n  backdrop-filter: blur(10px);\r\n  z-index: 277;\r\n  border-top: 1px solid #f0f0f0;\r\n  height: 50px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  .btn {\r\n    border: 1px solid #cccccc;\r\n    width: 88px;\r\n    height: 30px;\r\n    border-radius: 15px;\r\n    color: #000;\r\n    font-size: 14px;\r\n    font-family: PingFang SC-Regular, PingFang SC;\r\n    font-weight: 400;\r\n    color: #666666;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .upload {\r\n    background-color: #e93323;\r\n    color: #fff;\r\n    margin-left: 10px;\r\n  }\r\n  .upload.no-pic {\r\n    background: #e93323;\r\n    opacity: 0.3;\r\n  }\r\n}\r\n.upload-card {\r\n  display: flex;\r\n  flex-direction: column;\r\n  line-height: 16px;\r\n  .el-icon-plus {\r\n    font-size: 28px;\r\n    font-weight: bold;\r\n    color: #bbbbbb;\r\n  }\r\n  .text {\r\n    font-size: 13px;\r\n    font-weight: 400;\r\n    color: #999999;\r\n    margin-top: 18px;\r\n  }\r\n}\r\n.upload-success {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n  height: 80vh;\r\n  .success {\r\n    width: 50px;\r\n    height: 50px;\r\n    background: #4bbc12;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n    .image {\r\n      width: 60%;\r\n    }\r\n  }\r\n  .text {\r\n    font-size: 16px;\r\n    font-family: PingFang SC-Medium, PingFang SC;\r\n    font-weight: 500;\r\n    color: #282828;\r\n    margin-bottom: 40px;\r\n  }\r\n  .again {\r\n    width: 150px;\r\n    height: 43px;\r\n    border-radius: 21px;\r\n    text-align: center;\r\n    line-height: 41px;\r\n    font-size: 15px;\r\n    font-weight: 400;\r\n    color: #333333;\r\n    border: 1px solid #cccccc;\r\n  }\r\n}\r\n</style>\r\n"]}]}