improve: 上传组件

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

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,
+  });
+}

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,
+  });
+}

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
         }
     }
 }

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;
     },

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>

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) {

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'),
+  },
 ];