improve: 上传组件

2026-10-29 22:10:49 +00:00 · 2023-06-15 15:12:02 +08:00 · 2023-06-15 15:12:02 +08:00 · 2357f5ed50
commit 2357f5ed50
parent 48eeed4a27
9 changed files with 414 additions and 35 deletions
--- a/template/admin/src/api/order.js
+++ b/template/admin/src/api/order.js
@ -534,6 +534,17 @@ export function stopWrongQueue(id) {
  });
 }

+/**
+ * @description 上架寄件快递列表
+ * @param {Object} param data {Object} 传值参数
+ */
+export function kuaidiComsList() {
+  return request({
+    url: `order/kuaidi_coms`,
+    method: 'get',
+  });
+}
+
 /**
 * @description 修改退款订单备注信息
 * @param {Number} param data.id {Number} 订单id
--- a/template/admin/src/api/setting.js
+++ b/template/admin/src/api/setting.js
@ -1123,6 +1123,24 @@ export function codeCrud(data) {
    data,
  });
 }
+/**
+ * @description 扫码上传链接获取
+ */
+export function scanUploadQrcode() {
+  return request({
+    url: `file/scan_upload/qrcode`,
+    method: 'get',
+  });
+}
+/**
+ * @description 扫码上传图片获取
+ */
+export function scanUploadGet(scan_token) {
+  return request({
+    url: `file/scan_upload/image/${scan_token}`,
+    method: 'get',
+  });
+}
 /**
 * @description 图片上传
 */
@ -1137,3 +1155,16 @@ export function fileUpload(data) {
    data,
  });
 }
+/**
+ * @description 扫码图片上传
+ */
+export function scanUpload(data) {
+  return request({
+    url: `image/scan_upload`,
+    method: 'post',
+    headers: {
+      'content-type': 'multipart/form-data;',
+    },
+    data,
+  });
+}
--- a/template/admin/src/api/uploadPictures.js
+++ b/template/admin/src/api/uploadPictures.js
@ -102,3 +102,14 @@ export function fileDelApi(ids) {
    data: ids,
  });
 }
+/**
+ * @description 网络图片上传
+ * @param {String} param ids {String} 图片id拼接成的字符串
+ */
+export function onlineUpload(data) {
+  return request({
+    url: 'file/online_upload',
+    method: 'post',
+    data,
+  });
+}
--- a/template/admin/src/assets/images/success.jpg
+++ b/template/admin/src/assets/images/success.jpg
--- a/template/admin/src/components/uploadImg/index.vue
+++ b/template/admin/src/components/uploadImg/index.vue
@ -6,6 +6,7 @@
      :modal-append-to-body="false"
      :visible.sync="uploadModal"
      width="1024px"
+      @closed="closed"
    >
      <div class="main">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
@ -16,7 +17,7 @@
              <el-radio :label="2">扫码上传</el-radio>
            </el-radio-group>
          </el-form-item>
-          <el-form-item label="上传至分组：" prop="region" v-if="ruleForm.type == 0 || ruleForm.type == 1">
+          <el-form-item label="上传至分组：" prop="region" v-show="ruleForm.type == 0 || ruleForm.type == 1">
            <el-cascader
              class="form-width"
              v-model="ruleForm.region"
@ -44,27 +45,25 @@
                  :before-upload="beforeUpload"
                >
                  <i slot="default" class="el-icon-plus"></i>
-                  <!-- <div
-                  slot="file"
-                  slot-scope="{ file }"
-                  draggable="false"
-                  @dragstart="handleDragStart($event, file)"
-                  @dragover="handleDragOver($event, file)"
-                  @dragenter="handleDragEnter($event, file)"
-                  @dragend="handleDragEnd($event, file)"
-                >
-                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-                  <i class="el-icon-error btndel" @click="handleRemove(file)" />
-
-             
-                </div> -->
+                  <div
+                    slot="file"
+                    slot-scope="{ file }"
+                    draggable="false"
+                    @dragstart="handleDragStart($event, file)"
+                    @dragover="handleDragOver($event, file)"
+                    @dragenter="handleDragEnter($event, file)"
+                    @dragend="handleDragEnd($event, file)"
+                  >
+                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                    <i class="el-icon-error btndel" @click="handleRemove(file)" />
+                  </div>
                </el-upload>
                <div class="tips">建议上传图片最大宽度750px，不超过3MB；仅支持jpeg、png格式</div>
              </div>
            </div>
          </el-form-item>
          <template v-if="ruleForm.type == 1">
-            <div class="img-box">
+            <div class="img-box pl100">
              <div
                v-for="(item, index) in ruleForm.imgList"
                :key="index"
@ -81,9 +80,9 @@
            </div>
          </template>
        </el-form>
-        <div class="code-image" v-if="ruleForm.type == 2">
+        <div class="code-image" v-show="ruleForm.type == 2">
          <div class="left">
-            <div class="code"></div>
+            <div class="code" ref="qrCodeUrl"></div>
            <el-cascader
              class="form-width"
              v-model="ruleForm.region"
@ -94,7 +93,7 @@
            <div>扫描二维码，快速上传手机图片</div>
          </div>
          <div class="right">
-            <el-button size="small">刷新图库</el-button>
+            <el-button size="small" @click="scanUploadGet">刷新图库</el-button>
            <div class="tip">刷新图库按钮，可显示移动端上传成功的图片</div>
            <div class="img-box">
              <div
@ -107,7 +106,7 @@
                @dragenter="handleDragEnter($event, item)"
                @dragend="handleDragEnd($event, item)"
              >
-                <img :src="item.url" />
+                <img :src="item.att_dir" />
                <i class="el-icon-error btndel" @click="handleRemove(index)" />
              </div>
            </div>
@ -124,10 +123,11 @@
 </template>

 <script>
-import { getCategoryListApi } from '@/api/uploadPictures';
+import { getCategoryListApi, moveApi, onlineUpload } from '@/api/uploadPictures';
 import Setting from '@/setting';
 import { getCookies } from '@/libs/util';
-import { fileUpload } from '@/api/setting';
+import { fileUpload, scanUploadQrcode, scanUploadGet } from '@/api/setting';
+import QRCode from 'qrcodejs2';

 export default {
  name: '',
@ -155,28 +155,75 @@ export default {
      },
      rules: { type: [{ required: true, message: '请选择活动资源', trigger: 'change' }] },
      treeId: '',
+      qrcode: '',
+      scanToken: '',
    };
  },
  created() {},
  mounted() {},
  methods: {
+    closed() {
+      this.ruleForm.type = 0;
+      this.ruleForm.imgList = [];
+    },
    radioChange(type) {
      this.ruleForm.type = type;
      this.ruleForm.imgList = [];
+      if (type == 2) {
+        this.scanUploadQrcode();
+      }
    },
+    scanUploadQrcode() {
+      scanUploadQrcode().then((res) => {
+        this.creatQrCode(res.data.url);
+        this.scanToken = res.data.url;
+      });
+    },
+    scanUploadGet() {
+      let token = this.scanToken.split('token=')[1];
+      scanUploadGet(token).then((res) => {
+        this.ruleForm.imgList = res.data;
+        console.log(res);
+      });
+    },
+
    getImg() {
      this.ruleForm.imgList.push({
        url: this.webImgUrl,
      });
    },
    async submitUpload() {
-      this.uploadData = {
-        pid: this.treeId,
-      };
-      console.log(this.uploadData);
-      for (let i = 0; i < this.ruleForm.imgList.length; i++) {
-        const file = this.ruleForm.imgList[i].raw;
-        await this.uploadItem(file);
+      if (this.ruleForm.type == 0) {
+        this.uploadData = {
+          pid: this.treeId,
+        };
+        for (let i = 0; i < this.ruleForm.imgList.length; i++) {
+          const file = this.ruleForm.imgList[i].raw;
+          await this.uploadItem(file);
+          if (i == this.ruleForm.imgList.length - 1) {
+            this.$Message.success('上传成功');
+            this.$emit('uploadSuccess');
+            this.uploadModal = false;
+          }
+        }
+      } else if (this.ruleForm.type == 1) {
+        let urls = this.ruleForm.imgList.map((e) => {
+          return e.url;
+        });
+        onlineUpload({ pid: this.treeId, images: urls }).then((res) => {
+          this.$Message.success('上传成功');
+          this.$emit('uploadSuccess');
+          this.uploadModal = false;
+        });
+      } else if (this.ruleForm.type == 2) {
+        let attId = this.ruleForm.imgList.map((e) => {
+          return e.att_id;
+        });
+        moveApi({ pid: this.treeId, images: attId }).then((res) => {
+          this.$Message.success('上传成功');
+          this.$emit('uploadSuccess');
+          this.uploadModal = false;
+        });
      }
    },
    uploadItem(file) {
@ -211,6 +258,17 @@ export default {
      //   });
      //   return promise;
    },
+    creatQrCode(url) {
+      this.$refs.qrCodeUrl.innerHTML = '';
+      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+        text: url, // 需要转换为二维码的内容
+        width: 160,
+        height: 160,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+    },
    handleRemove(file) {
      console.log(file);
      let index = this.ruleForm.imgList.findIndex((e) => {
@ -309,9 +367,11 @@ export default {
    line-height: 72px;
    overflow inherit
 }
+.pl100{
+    padding-left 100px
+}
 .img-box{
    display flex
-    padding-left 100px
    flex-wrap: wrap
 }
 .tips{
@ -353,6 +413,7 @@ export default {
            font-size: 12px;
            font-weight: 400;
            color: #BBBBBB;
+            margin 10px 0
        }
    }
 }
--- a/template/admin/src/components/uploadPictures/index.vue
+++ b/template/admin/src/components/uploadPictures/index.vue
@ -46,7 +46,7 @@
                :on-success="handleSuccess"
                style="margin-top: 1px; display: inline-block"
              > -->
-              <Button type="primary" @click="uploadModal">上传图片</Button>
+              <Button class="mr10" type="primary" @click="uploadModal">上传图片</Button>
              <!-- </Upload> -->
              <!-- <Upload
                :show-upload-list="false"
@ -146,7 +146,7 @@
        </div>
      </Col>
    </Row>
-    <uploadImg ref="upload"></uploadImg>
+    <uploadImg ref="upload" @uploadSuccess="uploadSuccess"></uploadImg>
  </div>
 </template>

@ -227,6 +227,10 @@ export default {
    this.getFileList();
  },
  methods: {
+    uploadSuccess() {
+      this.fileData.page = 1;
+      this.getFileList();
+    },
    uploadModal() {
      this.$refs.upload.uploadModal = true;
    },
--- a/template/admin/src/pages/app/upload/index.vue
+++ b/template/admin/src/pages/app/upload/index.vue
@ -0,0 +1,210 @@
+<template>
+  <div class="main">
+    <div v-if="uploading">
+      <div class="img-list">
+        <el-upload
+          ref="upload"
+          :action="fileUrl"
+          list-type="picture-card"
+          :on-change="fileChange"
+          :file-list="imgList"
+          :auto-upload="false"
+        >
+          <i slot="default" class="el-icon-plus"></i>
+          <div slot="file" slot-scope="{ file }">
+            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+            <i class="el-icon-error btndel" @click="handleRemove(file)" />
+          </div>
+        </el-upload>
+      </div>
+
+      <div class="footer">
+        <div>共{{ imgList.length }}张，{{ (allSize / 1000000).toFixed(2) }} M</div>
+        <div class="upload-btn">
+          <!-- <div class="btn">选择图片</div> -->
+          <div class="btn upload" @click="submitUpload">确认上传</div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="upload-success">
+      <div class="success">
+        <img class="image" src="@/assets/images/success.jpg" alt="" />
+      </div>
+      <div class="text">图片上传成功</div>
+      <div class="again" @click="again">继续上传</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting';
+import { scanUpload } from '@/api/setting';
+export default {
+  name: 'app_upload_file',
+  data() {
+    return {
+      fileUrl: Setting.apiBaseURL + '/image/scan_upload',
+      imgList: [],
+      allSize: 0,
+      token: '',
+      uploading: true,
+    };
+  },
+  created() {
+    this.token = this.$route.query.token;
+  },
+  mounted() {},
+  methods: {
+    again() {
+      this.uploading = true;
+      this.imgList = [];
+      this.allSize = 0;
+    },
+    async submitUpload() {
+      for (let i = 0; i < this.imgList.length; i++) {
+        const file = this.imgList[i].raw;
+        await this.uploadItem(file);
+        if (i == this.imgList.length - 1) {
+          this.uploading = false;
+        }
+      }
+    },
+    uploadItem(file) {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('uploadToken', this.token);
+        scanUpload(formData).then((res) => {
+          if (res.status == 200) {
+            resolve();
+          } else {
+            this.$message({
+              message: '上传失败',
+              type: 'error',
+              duration: 1000,
+            });
+          }
+        });
+      });
+    },
+    fileChange(file, fileList) {
+      this.imgList = fileList;
+      console.log(this.imgList);
+      this.imgList.map((e) => {
+        this.allSize += e.size;
+      });
+    },
+    loadData(item, callback) {
+      getCategoryListApi({
+        pid: item.value,
+      })
+        .then(async (res) => {
+          const data = res.data.list;
+          callback(data);
+        })
+        .catch((res) => {});
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.upload-btn {
+  display: flex;
+  align-items: center;
+}
+.img-list {
+  padding: 10px;
+}
+/deep/ .el-upload--picture-card,
+/deep/ .el-upload-list--picture-card .el-upload-list__item {
+  width: 113px;
+  height: 113px;
+  line-height: 113px;
+  overflow: inherit;
+}
+.btndel {
+  position: absolute;
+  z-index: 1;
+  font-size: 18px;
+  right: 1px;
+  top: 1px;
+  color: red;
+}
+.img-box {
+  display: flex;
+  padding-left: 100px;
+  flex-wrap: wrap;
+}
+.footer {
+  padding: 0 10px 0 15px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(10px);
+  z-index: 277;
+  border-top: 1px solid #f0f0f0;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .btn {
+    border: 1px solid #cccccc;
+    width: 88px;
+    height: 30px;
+    border-radius: 15px;
+    color: #000;
+    font-size: 14px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .upload {
+    background-color: #e93323;
+    color: #fff;
+    margin-left: 10px;
+  }
+}
+.upload-success {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 80vh;
+  .success {
+    width: 50px;
+    height: 50px;
+    background: #4bbc12;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    .image {
+      width: 60%;
+    }
+  }
+  .text {
+    font-size: 16px;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #282828;
+    margin-bottom: 40px;
+  }
+  .again {
+    width: 150px;
+    height: 43px;
+    border-radius: 21px;
+    text-align: center;
+    line-height: 41px;
+    font-size: 15px;
+    font-weight: 400;
+    color: #333333;
+    border: 1px solid #cccccc;
+  }
+}
+</style>
--- a/template/admin/src/pages/order/orderList/handle/orderSend.vue
+++ b/template/admin/src/pages/order/orderList/handle/orderSend.vue
@ -20,6 +20,7 @@
        <RadioGroup v-model="formItem.express_record_type" @on-change="changeExpress">
          <Radio label="1">手动填写</Radio>
          <Radio label="2">电子面单打印</Radio>
+          <Radio label="3">商家寄件</Radio>
        </RadioGroup>
      </FormItem>
      <div>
@ -31,7 +32,12 @@
            style="width: 80%"
            @on-change="expressChange"
          >
-            <Option v-for="(item, i) in express" :value="item.value" :key="item.value">{{ item.value }}</Option>
+            <Option
+              v-for="item in formItem.express_record_type == 3 ? kuaidiExpress : express"
+              :value="item.value"
+              :key="item.value"
+              >{{ item.value }}</Option
+            >
          </Select>
        </FormItem>
        <FormItem v-if="formItem.express_record_type === '1' && formItem.type == 1" label="快递单号：">
@ -41,7 +47,7 @@
            <p>例如：SF000000000000:3941</p>
          </div>
        </FormItem>
-        <template v-if="formItem.express_record_type === '2' && formItem.type == 1">
+        <template v-if="['2', '3'].includes(formItem.express_record_type) && formItem.type == 1">
          <FormItem label="电子面单：" class="express_temp_id">
            <Select
              v-model="formItem.express_temp_id"
@ -62,6 +68,23 @@
          <FormItem label="寄件人地址：">
            <Input v-model="formItem.to_addr" placeholder="请输入寄件人地址" style="width: 80%"></Input>
          </FormItem>
+          <FormItem label="取件日期：" v-if="formItem.express_record_type == 3">
+            <RadioGroup v-model="formItem.day_type" type="button">
+              <Radio :label="0">今天</Radio>
+              <Radio :label="1">明天</Radio>
+              <Radio :label="2">后台</Radio>
+            </RadioGroup>
+          </FormItem>
+          <FormItem label="取件时间：" v-if="formItem.express_record_type == 3">
+            <TimePicker
+              v-model="formItem.pickup_time"
+              format="HH:mm"
+              type="timerange"
+              placement="bottom-end"
+              placeholder="选择取件时间范围"
+              style="width: 168px"
+            />
+          </FormItem>
        </template>
      </div>
      <div v-show="formItem.type === '2'">
@ -153,6 +176,7 @@ import {
  orderDeliveryList,
  orderSheetInfo,
  splitCartInfo,
+  kuaidiComsList,
 } from '@/api/order';
 import printJS from 'print-js';
 export default {
@ -185,9 +209,11 @@ export default {
        to_addr: '',
        sh_delivery: '',
        fictitious_content: '',
+        day_type: 0,
      },
      modals: false,
      express: [],
+      kuaidiExpress: [],
      expressTemp: [],
      deliveryList: [],
      temp: {},
@ -321,10 +347,21 @@ export default {
          this.formItem.delivery_id = '';
          this.getList(1);
          break;
+        case '3':
+          this.formItem.delivery_name = '';
+          this.formItem.delivery_id = '';
+          this.kuaidiComsList();
+          break;
        default:
          break;
      }
    },
+    kuaidiComsList() {
+      kuaidiComsList().then((res) => {
+        console.log(res);
+        this.kuaidiExpress = res.data;
+      });
+    },
    reset() {
      this.formItem = {
        type: '1',
@ -446,9 +483,10 @@ export default {
    },
    // 电子面单列表
    expressChange(value) {
-      let expressItem = this.express.find((item) => {
+      let expressItem = (this.formItem.express_record_type == '3' ? this.kuaidiExpress : this.express).find((item) => {
        return item.value === value;
      });
+      console.log(value, expressItem);
      if (expressItem === undefined) {
        return;
      }
@ -468,6 +506,9 @@ export default {
          .catch((err) => {
            this.$Message.error(err.msg);
          });
+      } else if (this.formItem.express_record_type == '3') {
+        this.expressTemp = expressItem.list;
+        console.log(this.expressTemp);
      }
    },
    getCartInfo(data, orderid) {
--- a/template/admin/src/router/modules/frameOut.js
+++ b/template/admin/src/router/modules/frameOut.js
@ -167,4 +167,14 @@ export default [
    },
    component: () => import('@/pages/kefu/appChat/mobile/feedback'),
  },
+  {
+    path: '/app/upload',
+    name: `${pre}app-mobile_upload`,
+    meta: {
+      auth: true,
+      title: '手机端扫码上传',
+      kefu: true,
+    },
+    component: () => import('@/pages/app/upload'),
+  },
 ];