预约事项添加封面

src/views/modules/communityService/dqfwzx/cpts/edit.vue

@@ -173,6 +173,7 @@
               :key="'staff' + index"
               v-for="(item, index) in dataForm.matterList"
             >
+              <div class="item-info">
                 <el-input
                   class="item_width_1"
                   maxlength="50"
@@ -223,17 +224,44 @@
                   :disabled="item.matterId != undefined"
                 >
                 </el-time-select>
+              </div>
+              <div class="item-pic">
+                <el-upload
+                  :disabled="item.matterId != undefined"
+                  class="avatar-uploader"
+                  :action="uploadUlr"
+                  :data="{ customerId: customerId }"
+                  :show-file-list="false"
+                  :on-success="
+                    (response, file, fileList) =>
+                      handleImgSuccess(index, response, file, fileList)
+                  "
+                  :before-upload="beforeImgUpload"
+                >
+                  <img
+                    v-if="item.matterImg"
+                    :src="item.matterImg"
+                    style="width: 50px; height: 50px"
+                    class="function-icon"
+                  />
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+
+                <div class="hint">（事项封面，图片小于1M）</div>
 
                 <el-button
-                style="margin-left: 10px"
+                  style="margin-left: auto"
                   size="small"
                   @click="handleDelStaff(index)"
                   >删除</el-button
                 >
               </div>
+            </div>
 
             <div class="item-add">
-              <el-button size="small" @click="handleAddStaff">添加</el-button>
+              <el-button size="small" type="warning" @click="handleAddStaff"
+                >添加</el-button
+              >
             </div>
           </div>
         </el-form-item>
@@ -266,6 +294,9 @@ let loading; // 加载动画
 export default {
   data() {
     return {
+      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
+      customerId: "",
+
       formType: "add", //表单操作类型 add新增，edit编辑，detail详情
 
       btnDisable: false,
@@ -342,14 +373,39 @@ export default {
   watch: {},
 
   async mounted() {
+    this.customerId = localStorage.getItem("customerId");
     this.initMap();
   },
 
   methods: {
+    handleImgSuccess(index, res, file) {
+      if (res.code === 0 && res.msg === "success") {
+        console.log("res.data.url", res.data.url);
+        this.dataForm.matterList[index].matterImg = res.data.url;
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+
+    beforeImgUpload(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1;
+
+      if (!isLt1M) {
+        this.$message.error("上传图片大小不能超过 1MB!");
+      }
+      return isLt1M;
+    },
+
     handleAddStaff() {
       this.dataForm.matterList = [
         ...this.dataForm.matterList,
-        { matterName: "", appointmentType: "", startTime: "", endTime: "" },
+        {
+          matterName: "",
+          appointmentType: "",
+          matterImg: "",
+          startTime: "",
+          endTime: "",
+        },
       ];
     },
     handleDelStaff(index) {
@@ -482,9 +538,28 @@ export default {
         this.dataForm.partyServiceCenterId = this.partyServiceCenterId;
       }
 
+      const matterList = this.dataForm.matterList.filter(
+        (item) => !item.matterId
+      );
+      if (
+        matterList.some(
+          (item) =>
+            !item.matterImg ||
+            !item.matterName ||
+            !item.appointmentType ||
+            !item.startTime ||
+            !item.endTime
+        )
+      ) {
+        return this.$message({
+          type: "warning",
+          message: "请补充完整可预约事项信息",
+        });
+      }
+
       const { data, code, msg } = await requestPost(url, {
         ...this.dataForm,
-        matterList: this.dataForm.matterList.filter((item) => !item.matterId),
+        matterList,
       });
 
       if (code === 0) {
@@ -580,10 +655,49 @@ export default {
   width: 650px;
 
   .item {
+    .item-info {
       display: flex;
       justify-content: space-around;
       margin-bottom: 7px;
     }
+    .item-pic {
+      display: flex;
+      align-items: center;
+      .hint {
+        font-size: 14px;
+        color: #999999;
+        margin-left: 10px;
+      }
+      .avatar-uploader {
+        ::v-deep .el-upload {
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+        }
+        img {
+          object-fit: cover;
+        }
+        .el-upload:hover {
+          border-color: #409eff;
+        }
+        .avatar {
+          width: 50px;
+          height: 50px;
+          display: block;
+        }
+        .avatar-uploader-icon {
+          border: 1px dashed #d9d9d9;
+          border-radius: 6px;
+          font-size: 28px;
+          color: #8c939d;
+          width: 50px;
+          height: 50px;
+          line-height: 50px;
+          text-align: center;
+        }
+      }
+    }
+  }
   .item-add {
   }
 }