日报分享

src/api/index.js

@@ -972,10 +972,10 @@ export function addPhotoToDB(data) {
 }
 
 // 根据日报id查询汇报当天拜访照片base64格式
-export function imgToBase64(query) {
+export function imgToBase64(data) {
   return request({
     url: '/mobile/reportMobile/imgToBase64',
-    method: 'get',
-    params: query,
+    method: 'post',
+    data,
   });
 }

src/components/share.vue

@@ -167,7 +167,7 @@ export default {
     // 二维码
     this.creatQrCode();
     if (this.urlList.length) {
-      getReportImg({ urlList: this.urlList }).then((res) => {
+      imgToBase64({ urlList: this.urlList }).then((res) => {
         if (res.data) {
           this.photosData = res.data;
           this.$nextTick(async () => {

src/views/week/dailyDetails.vue

@@ -663,6 +663,7 @@ export default {
           this.$set(val, 'checked', false);
         });
       });
+      this.reportRemarksIndex = index;
       // 选择分享的图片
       this.shareImgFlag = true;
     },
@@ -672,12 +673,10 @@ export default {
       this.urlList = [];
       this.reportTarget.photos.forEach((item) => {
         item.photos.forEach((val) => {
-          this.$set(val, 'checked', false);
           if (val.checked) this.urlList.push(val.fileUrl);
         });
       });
       this.setShareFlag = true;
-      this.reportRemarksIndex = index;
     },
     pviewFn(val, imgVal) {
       var imgList = [];

src/views/week/dailyHistoricalDetails.vue

@@ -536,7 +536,50 @@
       :reportTarget="reportTarget"
       :reportId="$route.query.reportId"
       @setShareImg="setShareImg"
+      :urlList="urlList"
       :reportRemarksIndex="reportRemarksIndex"></share>
+    <!--分享图片列表 -->
+    <el-dialog
+      title="选择分享的图片"
+      :visible.sync="shareImgFlag"
+      width="90%"
+      :append-to-body="true"
+      :close-on-click-modal="false"
+      @close="wuliaoTableClose"
+      custom-class="shareImgFlag">
+      <div v-if="reportTarget.photos">
+        <div v-for="(item, index) in reportTarget.photos" :key="index">
+          <p style="margin-bottom: 10px; margin-top: 0">{{ item.taskName }}</p>
+          <van-row gutter="10" class="visitIMG1">
+            <van-col
+              span="6"
+              style="padding-bottom: 10px; position: relative"
+              v-for="(itemImg, indexImg) in item.photos"
+              :key="indexImg">
+              <img :src="itemImg.fileUrl" alt="" @click="selectImg(itemImg)" />
+              <van-icon
+                @click.stop
+                name="success"
+                class="activaImg"
+                color="red"
+                size="30"
+                style="
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  margin: -15px 0 0 -15px;
+                  pointer-events: none;
+                "
+                v-if="itemImg.checked" />
+            </van-col>
+          </van-row>
+        </div>
+      </div>
+      <span slot="footer" class="footer-btn">
+        <van-button plain type="primary" @click="dialogVisible = false">取 消</van-button>
+        <van-button type="primary" @click="confirmShare">确 定</van-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -627,6 +670,8 @@ export default {
       setShareFlag: false,
       source: '',
       reportRemarksIndex: -1,
+      shareImgFlag: false,
+      urlList: [],
       //
     };
   },
@@ -661,9 +706,28 @@ export default {
     },
     // 打开分享
     clickShareFlag(index = -1) {
-      this.setShareFlag = true;
+      // 重置分享图片状态
+      this.reportTarget.photos.forEach((item) => {
+        item.photos.forEach((val) => {
+          this.$set(val, 'checked', false);
+        });
+      });
+      // 选择分享的图片
+      this.shareImgFlag = true;
       this.reportRemarksIndex = index;
     },
+    // 确认分享
+    confirmShare() {
+      this.shareImgFlag = false;
+      this.urlList = [];
+      debugger;
+      this.reportTarget.photos.forEach((item) => {
+        item.photos.forEach((val) => {
+          if (val.checked) this.urlList.push(val.fileUrl);
+        });
+      });
+      this.setShareFlag = true;
+    },
     pviewFn(val, imgVal) {
       var imgList = [];
       var photos = this.reportTarget.photos[val].photos;
@@ -898,6 +962,14 @@ export default {
         this.$router.go(-1);
       }
     },
+    wuliaoTableClose() {
+      this.shareImgFlag = false;
+    },
+    // 选中的图片
+    selectImg(item) {
+      this.$set(item, 'checked', !item.checked);
+      console.log(item);
+    },
   },
 };
 </script>
@@ -990,7 +1062,7 @@ export default {
   }
 }
 </style>
-<style>
+<style lang="scss">
 .linep .van-cell__title {
   color: #1e5398;
   font-weight: 500;
@@ -1035,4 +1107,38 @@ export default {
   height: 75px;
   border-radius: 6px;
 }
+.el-dialog__wrapper {
+  z-index: 9999 !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5) !important;
+  .shareImgFlag {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    max-height: 70%;
+    margin-top: 0 !important;
+    .el-dialog__header {
+      height: 40px;
+      display: flex;
+      justify-content: right;
+      .el-dialog__headerbtn {
+        position: static !important;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 20px !important;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .cell {
+      font-size: 12px;
+    }
+    .footer-btn {
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+}
 </style>