日报分享

src/api/index.js

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

src/components/share.vue

@@ -122,7 +122,7 @@
 <script>
 import html2canvas from 'html2canvas';
 import QRCode from 'qrcodejs2';
-import { getReportImg } from '@/api/index';
+import { imgToBase64 } from '@/api/index';
 export default {
   name: 'share',
   props: {
@@ -142,6 +142,13 @@ export default {
       type: Number,
       default: -1,
     },
+    // 图片转换列表
+    urlList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {
@@ -159,14 +166,20 @@ export default {
     this.toastLoading(0, '生成中...', true);
     // 二维码
     this.creatQrCode();
-    getReportImg({ reportId: this.reportId }).then((res) => {
-      if (res.data) {
-        this.photosData = res.data;
-        this.$nextTick(async () => {
-          await this.htmlToCanvas();
-        });
-      }
-    });
+    if (this.urlList.length) {
+      getReportImg({ urlList: this.urlList }).then((res) => {
+        if (res.data) {
+          this.photosData = res.data;
+          this.$nextTick(async () => {
+            await this.htmlToCanvas();
+          });
+        }
+      });
+    } else {
+      this.$nextTick(async () => {
+        await this.htmlToCanvas();
+      });
+    }
   },
   methods: {
     //异步执行

src/views/week/dailyDetails.vue

@@ -498,7 +498,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>
 
@@ -583,6 +626,7 @@ export default {
       source: '',
       reportRemarksIndex: -1,
       shareImgFlag: false,
+      urlList: [],
       //
     };
   },
@@ -613,10 +657,27 @@ export default {
     },
     // 打开分享
     clickShareFlag(index = -1) {
+      // 重置分享图片状态
+      this.reportTarget.photos.forEach((item) => {
+        item.photos.forEach((val) => {
+          this.$set(val, 'checked', false);
+        });
+      });
       // 选择分享的图片
       this.shareImgFlag = true;
-      // this.setShareFlag = true;
-      // this.reportRemarksIndex = index;
+    },
+    // 确认分享
+    confirmShare() {
+      this.shareImgFlag = false;
+      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 = [];
@@ -700,6 +761,14 @@ export default {
     onClickLeft() {
       this.$router.go(-1);
     },
+    wuliaoTableClose() {
+      this.shareImgFlag = false;
+    },
+    // 选中的图片
+    selectImg(item) {
+      this.$set(item, 'checked', !item.checked);
+      console.log(item);
+    },
   },
 };
 </script>
@@ -833,4 +902,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>