增加地块删除功能,优化图片上传\显示

src/api/homestead/index.js

@@ -129,9 +129,25 @@ export function currentLocation(query) {
 
 //修改坐标数据同步
 export function coordinatesUpdateGeo(data) {
-  return request({
-    url: '/geo/geo/coordinatesEdit',
-    method: 'post',
-    data: data
-  })
+    return request({
+        url: '/geo/geo/coordinatesEdit',
+        method: 'post',
+        data: data
+    })
+}
+
+//删除农房信息
+export function houseRemove(id) {
+    return request({
+        url: '/geo/house/remove/' + id,
+        method: 'get',
+    })
 }
+
+//删除农地信息
+export function landRemove(id) {
+    return request({
+        url: '/geo/land/remove/' + id,
+        method: 'get',
+    })
+}

src/views/homestead/index.vue

@@ -231,6 +231,7 @@
             </div>
             <div class="editor">
               <div class="editor_icon" @click="editnfdInfo"></div>
+              <div class="delete_icon" @click="deletefdInfo"></div>
             </div>
           </div>
         </div>
@@ -255,6 +256,7 @@
             </div>
             <div class="editor">
               <div class="editor_icon" @click="editnfdInfo"></div>
+              <div class="delete_icon" @click="deletefdInfo"></div>
             </div>
           </div>
         </div>
@@ -352,7 +354,11 @@
               class="picture"
               v-if="houseInfoLookList.behindHouse == ''"
             ></div>
-            <div class="picture" v-if="houseInfoLookList.behindHouse != ''">
+            <div
+              class="picture"
+              v-if="houseInfoLookList.behindHouse != ''"
+              @click="previewZoomImage(houseInfoLookList.behindHouse)"
+            >
               <img :src="houseInfoLookList.behindHouse" />
             </div>
             <div class="describe">现<br />状<br />图<br />片</div>
@@ -362,7 +368,11 @@
               class="picture"
               v-if="houseInfoLookList.frontHouse == ''"
             ></div>
-            <div class="picture" v-if="houseInfoLookList.frontHouse != ''">
+            <div
+              class="picture"
+              v-if="houseInfoLookList.frontHouse != ''"
+              @click="previewZoomImage(houseInfoLookList.frontHouse)"
+            >
               <img :src="houseInfoLookList.frontHouse" />
             </div>
             <div class="describe">历<br />史<br />图<br />片</div>
@@ -434,15 +444,23 @@
         <div class="uploadPictures_block">
           <div class="statusQuo">
             <div class="picture" v-if="landInfoLookList.behindland == ''"></div>
-            <div class="picture" v-if="landInfoLookList.behindland != ''">
-              <img :src="landInfoLookList.behindland" class="describe"/>
+            <div
+              class="picture"
+              v-if="landInfoLookList.behindland != ''"
+              @click="previewZoomImage(landInfoLookList.behindland)"
+            >
+              <img :src="landInfoLookList.behindland" />
             </div>
             <div class="describe">现<br />状<br />图<br />片</div>
           </div>
           <div class="statusQuo">
             <div class="picture" v-if="landInfoLookList.frontland == ''"></div>
-            <div class="picture" v-if="landInfoLookList.frontland != ''">
-              <img :src="landInfoLookList.frontland" class="describe"/>
+            <div
+              class="picture"
+              v-if="landInfoLookList.frontland != ''"
+              @click="previewZoomImage(landInfoLookList.frontland)"
+            >
+              <img :src="landInfoLookList.frontland" />
             </div>
             <div class="describe">历<br />史<br />图<br />片</div>
           </div>
@@ -726,33 +744,55 @@
           </div>
           <!--2-->
           <div class="uploadPicturesFlex_block">
-            <div class="title_m">上传现状图片</div>
-            <div class="main_m">
-              <van-uploader
-                v-model="nfAddfileListNow"
-                :after-read="nfAddimgonReadNow"
-                :max-count="1"
-                accept="image/gif, image/jpeg, image/png"
-              >
-                <div v-if="houseInfoList.behindHouse !=null">
-                <img :src=houseInfoList.behindHouse alt="等待传图">
-                </div>
-              </van-uploader>
+            <div class="statusQuo">
+              <div class="picture">
+                <van-uploader
+                  v-model="nfAddfileListNow"
+                  :after-read="nfAddimgonReadNow"
+                  :before-delete="nfAddimgonReadNowDelete"
+                  class="uploads_main"
+                  :max-count="1"
+                  accept="image/gif, image/jpeg, image/png"
+                >
+                  <div
+                    v-if="
+                      houseInfoList.behindHouse != null &&
+                      houseInfoList.behindHouse != ''
+                    "
+                  >
+                    <img :src="houseInfoList.behindHouse" alt="等待传图" />
+                  </div>
+                </van-uploader>
+              </div>
+
+              <div class="describe">
+                上<br />传<br />现<br />状<br />图<br />片
+              </div>
             </div>
-          </div>
-          <div class="uploadPicturesFlex_block">
-            <div class="title_m">上传历史图片</div>
-            <div class="main_m">
-              <van-uploader
-                v-model="nfAddfileListHistory"
-                :after-read="nfAddimgonReadHistory"
-                :max-count="1"
-                accept="image/gif, image/jpeg, image/png"
-              >
-                <div v-if="houseInfoList.frontHouse != null">
-              <img :src=houseInfoList.frontHouse alt="等待传图">
-                </div>
-              </van-uploader>
+            <div class="statusQuo">
+              <div class="picture">
+                <van-uploader
+                  v-model="nfAddfileListHistory"
+                  :after-read="nfAddimgonReadHistory"
+                  :before-delete="nfAddimgonReadHistoryDelete"
+                  :max-count="1"
+                  class="uploads_main"
+                  accept="image/gif, image/jpeg, image/png"
+                >
+                  <div
+                    v-if="
+                      houseInfoList.frontHouse != null &&
+                      houseInfoList.frontHouse != ''
+                    "
+                  >
+                    <img :src="houseInfoList.frontHouse" alt="等待传图" />
+                  </div>
+                </van-uploader>
+              </div>
+
+              <div class="describe">
+                上<br />传<br />历<br />史<br />图<br />片
+              </div>
             </div>
           </div>
         </div>
@@ -923,16 +963,69 @@
 
           <!--2-->
           <div class="uploadPicturesFlex_block">
+            <div class="statusQuo">
+              <div class="picture">
+                <van-uploader
+                  v-model="ndAddfileListNow"
+                  :after-read="ndAddimgonReadNow"
+                  :before-delete="ndAddimgonReadNowDelete"
+                  :max-count="1"
+                  class="uploads_main"
+                  accept="image/gif, image/jpeg, image/png"
+                >
+                  <div
+                    v-if="
+                      landInfoList.behindland != null &&
+                      landInfoList.behindland != ''
+                    "
+                  >
+                    <img :src="landInfoList.behindland" alt="等待传图" />
+                  </div>
+                </van-uploader>
+              </div>
+
+              <div class="describe">
+                上<br />传<br />现<br />状<br />图<br />片
+              </div>
+            </div>
+            <div class="statusQuo">
+              <div class="picture">
+                <van-uploader
+                  v-model="ndAddfileListHistory"
+                  class="uploads_main"
+                  :after-read="ndAddimgonReadHistory"
+                  :before-delete="ndAddimgonReadHistoryDelete"
+                  :max-count="1"
+                  accept="image/gif, image/jpeg, image/png"
+                >
+                  <div
+                    v-if="
+                      landInfoList.frontland != null &&
+                      landInfoList.frontland != ''
+                    "
+                  >
+                    <img :src="landInfoList.frontland" alt="等待传图" />
+                  </div>
+                </van-uploader>
+              </div>
+
+              <div class="describe">
+                上<br />传<br />历<br />史<br />图<br />片
+              </div>
+            </div>
+          </div>
+          <!-- <div class="uploadPicturesFlex_block">
             <div class="title_m">上传现状图片</div>
             <div class="main_m">
               <van-uploader
                 v-model="ndAddfileListNow"
                 :after-read="ndAddimgonReadNow"
                 :max-count="1"
+                class="uploads_main"
                 accept="image/gif, image/jpeg, image/png"
               >
-                <div v-if="landInfoList.behindland !=null">
-                <img :src=landInfoList.behindland alt="等待传图">
+                <div v-if="landInfoList.behindland != null">
+                  <img :src="landInfoList.behindland" alt="等待传图" />
                 </div>
               </van-uploader>
             </div>
@@ -942,16 +1035,17 @@
             <div class="main_m">
               <van-uploader
                 v-model="ndAddfileListHistory"
+                class="uploads_main"
                 :after-read="ndAddimgonReadHistory"
                 :max-count="1"
                 accept="image/gif, image/jpeg, image/png"
               >
-                <div v-if="landInfoList.frontland !=null">
-              <img :src=landInfoList.frontland alt="等待传图">
+                <div v-if="landInfoList.frontland != null">
+                  <img :src="landInfoList.frontland" alt="等待传图" />
                 </div>
               </van-uploader>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
       <div class="footer_main">
@@ -973,6 +1067,16 @@
         </div>
       </div>
     </div>
+    <!---查看大图-->
+    <van-overlay
+      :show="previewZoomImageVisbile"
+      @click="previewZoomImageFun"
+      class="previewZoomImage_wrap"
+    >
+      <div class="previewZoomImage_main">
+        <img :src="previewZoomImageValue" class="previewImg" />
+      </div>
+    </van-overlay>
   </div>
 </template>
 
@@ -991,6 +1095,8 @@ import {
   getHouse,
   currentLocation,
   coordinatesUpdateGeo,
+  houseRemove,
+  landRemove,
 } from "@/api/homestead/index";
 import { uploadFileBase } from "../../api/authenticRight";
 import request from "@/utils/request";
@@ -1156,6 +1262,9 @@ export default {
       //农房列表 显影
       homesteadListStatus: false,
       geoJson: "",
+      //放大预览图片弹窗
+      previewZoomImageVisbile: false,
+      previewZoomImageValue: "",
     };
   },
   mounted() {
@@ -1164,6 +1273,82 @@ export default {
     this.windowHeight = windowHeight;
   },
   methods: {
+    previewZoomImageFun() {
+      this.previewZoomImageVisbile = false;
+      this.previewZoomImageValue = "";
+    },
+    //放大预览图片
+    previewZoomImage(imagesUrl) {
+      this.previewZoomImageVisbile = true;
+      this.previewZoomImageValue = imagesUrl;
+      console.log(imagesUrl);
+    },
+    //删除农地信息
+    deletefdInfo() {
+      this.$dialog
+        .confirm({
+          title: "确认执行删除操作？",
+          message: "删除后内容不可恢复",
+        })
+        .then(() => {
+          console.log(this.farmhouseStatus);
+          if (this.farmhouseStatus == 0) {
+            //农房
+            houseRemove(this.houseInfoList.id).then((res) => {
+              if (res.code == 200) {
+                this.hideEditNav();
+                this.tGeoOrganization.orgCode = this.houseInfoList.orgCode;
+                coordinatesUpdateGeo(this.tGeoOrganization).then((res) => {});
+              }
+            });
+          } else {
+            //农地
+            landRemove(this.landInfoList.id).then((res) => {
+              if (res.code == 200) {
+                this.hideEditNav();
+                this.tGeoOrganization.orgCode = this.landInfoList.orgCode;
+                coordinatesUpdateGeo(this.tGeoOrganization).then((res) => {});
+              }
+            });
+          }
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    //隐藏编辑农地状态
+    hideEditNav() {
+      this.hasTable = false;
+
+      if ($(".searchBar_wrap").css("bottom") != "0px") {
+        $(".landHomestead_wrap").css({ bottom: "0" });
+        $(".landHomestead_wrap").animate(
+          {
+            bottom: "-100%",
+          },
+          300
+        );
+
+        $(".searchBar_wrap").css({ bottom: "-100%" });
+        $(".searchBar_wrap").animate(
+          {
+            bottom: "0",
+          },
+          400
+        );
+        let searchBarWrapPadding = $(".searchBar_wrap")
+          .css("paddingTop")
+          .replace("px", "");
+        let searchBarWrapHeight = $(".searchBar_wrap").height();
+
+        $(".rightIcon_wrap").animate(
+          {
+            bottom: searchBarWrapHeight + searchBarWrapPadding * 2 + 10 + "px",
+          },
+          200
+        );
+      }
+    },
     //编辑农地信息
     editnfdInfo(type) {
       this.currentType = 1;
@@ -1263,11 +1448,11 @@ export default {
       //farmhouse农房    land农地
       if (type == "farmhouse") {
         this.farmhouseStatus = 0;
-        this.houseInfoList.behindHouse =null;
-        this.houseInfoList.frontHouse =null;
+        this.houseInfoList.behindHouse = null;
+        this.houseInfoList.frontHouse = null;
       } else if (type == "land") {
-        this.landInfoList.frontland =null;
-        this.landInfoList.behindland =null;
+        this.landInfoList.frontland = null;
+        this.landInfoList.behindland = null;
         this.farmhouseStatus = 1;
       }
     },
@@ -3266,6 +3451,10 @@ export default {
     //     this.houseInfoList.frontHouse = res.url;
     //   });
     // },
+    nfAddimgonReadHistoryDelete() {
+      this.nfAddfileListHistory = [];
+      this.houseInfoList.frontHouse = "";
+    },
     nfAddimgonReadHistory(file) {
       // 创建Canvas对象(画布)
       let canvas = document.createElement("canvas");
@@ -3313,6 +3502,10 @@ export default {
         });
       };
     },
+    nfAddimgonReadNowDelete() {
+      this.nfAddfileListNow = [];
+      this.houseInfoList.behindHouse = "";
+    },
     nfAddimgonReadNow(file) {
       // 创建Canvas对象(画布)
       let canvas = document.createElement("canvas");
@@ -3367,6 +3560,10 @@ export default {
     //     console.log(this.landInfoList.frontland);
     //   });
     // },
+    ndAddimgonReadHistoryDelete() {
+      this.ndAddfileListHistory = [];
+      this.landInfoList.frontland = "";
+    },
     ndAddimgonReadHistory(file) {
       // 创建Canvas对象(画布)
       let canvas = document.createElement("canvas");
@@ -3412,6 +3609,10 @@ export default {
         });
       };
     },
+    ndAddimgonReadNowDelete() {
+      this.ndAddfileListNow = [];
+      this.landInfoList.behindland = "";
+    },
     ndAddimgonReadNow(file) {
       // 创建Canvas对象(画布)
       let canvas = document.createElement("canvas");
@@ -3465,6 +3666,19 @@ export default {
   width: 100vw;
   height: 100vh;
   position: relative;
+  .previewZoomImage_wrap {
+    z-index: 99;
+    .previewZoomImage_main {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      .previewImg {
+        max-width: 90vw;
+        max-height: 90vh;
+      }
+    }
+  }
   .rightIcon_wrap {
     position: absolute;
     right: 16px;
@@ -4063,6 +4277,20 @@ export default {
                 no-repeat;
               background-size: 100% 100%;
               margin-top: 14px;
+              box-shadow: 3px 3px 5px rgba(60, 191, 91, 0.3);
+              border-radius: 50%;
+            }
+            .delete_icon {
+              width: 72px;
+              height: 72px;
+              float: right;
+              background: url("../../assets/images/homestead/delete_icon.png")
+                no-repeat;
+              background-size: 100% 100%;
+              margin-top: 14px;
+              margin-right: 20px;
+              box-shadow: 3px 3px 5px rgba(212, 42, 42, 0.3);
+              border-radius: 50%;
             }
           }
         }
@@ -4121,8 +4349,8 @@ export default {
         }
       }
       .uploadPictures_block {
-        flex: 0 0 160px;
-        max-height: 160px;
+        flex: 0 0 200px;
+        max-height: 200px;
         display: flex;
         max-width: 90%;
         .statusQuo {
@@ -4130,16 +4358,17 @@ export default {
           display: flex;
 
           &:first-child {
-            margin-right: 36px;
+            margin-right: 20px;
           }
           .picture {
             flex: 1;
             background: url("../../assets/images/homestead/no_img.png") center
               center no-repeat;
             background-size: 90% auto;
+            padding-left: 10px;
             img {
-              width: 98%;
-              height: 90%;
+              width: 100%;
+              height: 100%;
             }
           }
           .describe {
@@ -4148,6 +4377,17 @@ export default {
             justify-content: center; /* 相对父元素水平居中 */
             align-items: center; /*  子元素相对父元素垂直居中 */
             margin-left: 6px;
+            padding-left: 10px;
+            .uploads_main {
+              width: 200px;
+              height: 200px;
+              ::v-deep {
+                .van-uploader__input-wrapper {
+                  width: 200px;
+                  height: 200px;
+                }
+              }
+            }
           }
         }
       }
@@ -4295,18 +4535,94 @@ export default {
         }
       }
       .uploadPicturesFlex_block {
-        .title_m {
-          font-size: 28px;
-          flex: 0 0 50px;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          word-break: break-all;
-          align-items: center; /*  子元素相对父元素垂直居中 */
-          margin-bottom: 20px;
-        }
-        .main_m {
+        flex: 0 0 250px;
+        max-height: 280px;
+        display: flex;
+        padding-top: 30px;
+        // max-width: 90%;
+        .statusQuo {
+          flex: 1;
+          display: flex;
+
+          &:first-child {
+            margin-right: 30px;
+          }
+          .picture {
+            flex: 1;
+            display: flex;
+            // background: url("../../assets/images/homestead/no_img.png") center
+            // center no-repeat;
+            // background-size: 90% auto;
+            img {
+              width: 100%;
+              height: 230px;
+            }
+            .uploads_main {
+              width: 100%;
+              display: flex;
+              flex: 1;
+              /deep/ {
+                .van-uploader__wrapper {
+                  flex: 1;
+                  display: flex;
+                  .van-uploader__preview {
+                    flex: 1;
+                    margin: 0;
+                    display: flex;
+                    .van-uploader__preview-image {
+                      flex: 1;
+                      width: initial;
+                      height: initial;
+                      .van-image__img {
+                        height: 230px;
+                      }
+                    }
+                  }
+                }
+                .van-uploader__input-wrapper {
+                  width: 100%;
+                }
+                .van-uploader__upload {
+                  // width: 100%;
+                  // height: 200px;
+                  width: initial;
+                  height: initial;
+                  flex: 1;
+                  margin: 0;
+                }
+              }
+            }
+          }
+          .describe {
+            flex: 0 0 32px;
+            display: flex;
+            justify-content: center; /* 相对父元素水平居中 */
+            align-items: center; /*  子元素相对父元素垂直居中 */
+            margin-left: 15px;
+          }
         }
+        // .title_m {
+        //   font-size: 28px;
+        //   flex: 0 0 50px;
+        //   white-space: nowrap;
+        //   text-overflow: ellipsis;
+        //   overflow: hidden;
+        //   word-break: break-all;
+        //   align-items: center; /*  子元素相对父元素垂直居中 */
+        //   margin-bottom: 20px;
+        // }
+        // .main_m {
+        //   width: 200px;
+        //   height: 200px;
+        //   .uploads_main {
+        //     width: 100%;
+        //     height: 100%;
+        //     img {
+        //       width: 200px;
+        //       height: 200px;
+        //     }
+        //   }
+        // }
       }
     }
     .footer_main {