拖动图片改变顺序，优化边界检查

src/features/OnlineExam/Examing/UploadPhotos.vue

@@ -1,24 +1,29 @@
 <template>
   <div>
-    <div class="demo-upload-list" v-for="item in uploadList" :key="item">
-      <img :src="item" />
-      <div class="demo-upload-list-cover">
-        <Icon
-          type="ios-eye-outline"
-          size="30"
-          @click.native="handleView(item)"
-        ></Icon>
-        <Icon
-          type="ios-trash-outline"
-          size="30"
-          @click.native="handleRemove(item)"
-        ></Icon>
+    <draggable v-model="uploadList" :move="dragMove" @update="uploadListSort">
+      <div class="demo-upload-list" v-for="item in uploadList" :key="item">
+        <img :src="item" />
+        <div class="demo-upload-list-cover">
+          <Icon
+            type="ios-eye-outline"
+            size="30"
+            @click.native="handleView(item)"
+          ></Icon>
+          <Icon
+            type="ios-trash-outline"
+            size="30"
+            @click.native="handleRemove(item)"
+          ></Icon>
+        </div>
       </div>
-    </div>
-
-    <div v-if="true" class="demo-upload-list plus" @click="prepareUpload">
-      +
-    </div>
+      <div
+        v-if="uploadList.length < 6"
+        class="demo-upload-list plus"
+        @click="prepareUpload"
+      >
+        +
+      </div>
+    </draggable>
 
     <Modal title="查看图片" v-model="visible" footer-hide>
       <img
@@ -40,22 +45,25 @@
     <div>最多上传6张图片</div>
 
     <Modal
-      title="上传"
+      title="上传图片"
       v-model="uploadModalVisible"
       mask
       footer-hide
       :mask-closable="false"
       :closable="false"
+      width="660"
     >
       <div>
-        <!-- TODO: 超过6张，不显示二维码 -->
         <div v-if="qrValue" style="display: flex">
           <qrcode
             :value="qrValue"
             :options="{ width: 200 }"
-            style="margin-left: -10px;"
+            :style="{
+              'margin-left': '-10px',
+              filter: totalList.length >= 6 ? 'blur(10px)' : 'none',
+            }"
           ></qrcode>
-          <div style="margin-top: 10px;">
+          <div style="font-size: 24px; margin-top: 10px;">
             <div>
               请使用<span style="font-weight: 900; color: #1E90FF;">微信</span
               >扫描二维码后，在微信小程序上拍照，并上传文件。
@@ -68,21 +76,23 @@
         </div>
         <div v-else>正在获取二维码...</div>
 
-        <div class="demo-upload-list" v-for="item in totalList" :key="item">
-          <img :src="item" />
-          <div class="demo-upload-list-cover">
-            <Icon
-              type="ios-eye-outline"
-              size="30"
-              @click.native="handleView(item)"
-            ></Icon>
-            <Icon
-              type="ios-trash-outline"
-              size="30"
-              @click.native="handleRemoveTotal(item)"
-            ></Icon>
+        <draggable v-model="totalList" @start="drag = true" @end="drag = false">
+          <div class="demo-upload-list" v-for="item in totalList" :key="item">
+            <img :src="item" />
+            <div class="demo-upload-list-cover">
+              <Icon
+                type="ios-eye-outline"
+                size="30"
+                @click.native="handleView(item)"
+              ></Icon>
+              <Icon
+                type="ios-trash-outline"
+                size="30"
+                @click.native="handleRemoveTotal(item)"
+              ></Icon>
+            </div>
           </div>
-        </div>
+        </draggable>
 
         <div style="display: flex; justify-content: center">
           <Button @click="modalCloseClicked">关闭</Button>
@@ -94,6 +104,7 @@
 
 <script>
 import VueQrcode from "@chenfengyuan/vue-qrcode";
+import draggable from "vuedraggable";
 import { createNamespacedHelpers } from "vuex";
 const { mapState } = createNamespacedHelpers("examingHomeModule");
 
@@ -119,6 +130,7 @@ export default {
       format: ["jpg", "jpeg", "png"],
       qrScanned: false,
       uploaded: false,
+      drag: false,
     };
   },
   methods: {
@@ -146,11 +158,43 @@ export default {
       this.totalList = [...this.uploadList];
     },
     modalCloseClicked() {
+      // 在二维码被扫描，文件没得到之前，提示是否关闭。
+      if (this.qrScanned && !this.uploaded) {
+        this.$Modal.confirm({
+          title: "确认关闭？",
+          content:
+            "检测到二维码被扫描，但是图片未上传。关闭此窗口后，将不再接受小程序图片上传。",
+          okText: "确定关闭",
+          cancelText: "取消关闭",
+          onOk: () => {
+            this.uploadModalVisible = false;
+            this.$emit("on-photos-reseted", this.totalList);
+          },
+          onCancel: () => {
+            return;
+          },
+        });
+      } else if (this.totalList.length > 6) {
+        // 检查是否超过6张
+        this.$Modal.warning({
+          title: "图片数量超出限制",
+          content: "请删除多余的图片，图片总数不应该超过6张",
+        });
+        return;
+      }
       this.uploadModalVisible = false;
       this.$emit("on-photos-reseted", this.totalList);
-
-      // TODO: 在二维码被扫描，文件没得到之前，提示是否关闭。
-      // TODO: 检查是否超过6张
+    },
+    uploadListSort() {
+      this.$emit("on-photos-reseted", this.uploadList);
+    },
+    // dragStart() {
+    //   console.log("drag start");
+    //   return false;
+    // },
+    dragMove(e) {
+      console.log(e);
+      return !e.dragged.className.includes("plus");
     },
   },
   mounted() {
@@ -190,6 +234,7 @@ export default {
   },
   components: {
     qrcode: VueQrcode,
+    draggable,
   },
 };
 </script>
@@ -207,6 +252,8 @@ export default {
   position: relative;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   margin-right: 4px;
+
+  cursor: move;
 }
 .demo-upload-list img {
   width: 100%;