管理端增加下载图片

src/school/orchestra/compontent/photo-detail.module.less

@@ -105,3 +105,22 @@
 .photos {
   padding: 0 16px 16px;
 }
+.downBtn {
+  position: fixed;
+  right: 20px;
+  bottom: 40px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 1);
+  padding: 8px;
+  box-shadow: 0 2px 8px 0px rgba(0, 0, 0, .2);
+  &:active{
+    opacity: .8;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}

src/school/orchestra/compontent/photo-detail.tsx

@@ -9,15 +9,18 @@ import {
   closeToast,
   Icon,
   Image,
+  ImagePreview,
   List,
   Popup,
   showDialog,
+  showFailToast,
   showImagePreview,
   showLoadingToast,
+  showSuccessToast,
   showToast,
   Uploader
 } from 'vant'
-import { defineComponent, onMounted, reactive } from 'vue'
+import { computed, defineComponent, onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './photo-detail.module.less'
 import iconDelete from '../images/icon-delete.png'
@@ -25,6 +28,9 @@ import umiRequest from 'umi-request'
 import { getOssUploadUrl } from '@/state'
 import checkboxCheck from '../images/icon-checkbox-active.png'
 import checkboxDefault from '@/common/images/icon-checkbox-default.png'
+import iconDown from '../images/icon-down.png'
+import html2canvas from 'html2canvas'
+import { promisefiyPostMessage } from '@/helpers/native-message'
 
 export default defineComponent({
   name: 'photo-detail',
@@ -209,17 +215,71 @@ export default defineComponent({
       }
     }
 
-    // 预览图片
-    const onShowImage = (index: number) => {
-      const files = state.list.map((file: any) => {
+    const viewImage = reactive({
+      show: false,
+      startPosition: 0,
+      downIndex: 0,
+      downLoading: false
+    })
+    // 图片列表
+    const images = computed(() => {
+      return state.list.map((file: any) => {
         return file.fileUrl
       })
+    })
+    const saveImg = async () => {
+      if (viewImage.downLoading) return
+      const container: HTMLElement = document.querySelector(
+        `img[src='${images.value[viewImage.downIndex]}']`
+      )!
+      if (container) {
+        const t = showLoadingToast({
+          message: '保存中',
+          duration: 0
+        })
+        viewImage.downLoading = true
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async (canvas) => {
+            const url = canvas.toDataURL('image/png')
+            const res = await promisefiyPostMessage({
+              api: 'savePicture',
+              content: {
+                base64: url
+              }
+            })
+            t.close()
+            if (res?.content?.status === 'success') {
+              showSuccessToast('保存成功')
+            } else {
+              showFailToast('保存失败')
+            }
+          })
+          .catch(() => {
+            showFailToast('保存失败')
+            t.close()
+          })
+          .finally(() => {
+            viewImage.downLoading = false
+          })
+      }
+    }
+    // 预览图片
+    const onShowImage = (index: number) => {
+      viewImage.downIndex = viewImage.startPosition = index
+      viewImage.show = true
+      // const files = state.list.map((file: any) => {
+      //   return file.fileUrl
+      // })
 
-      showImagePreview({
-        images: files,
-        startPosition: index,
-        closeable: true
-      })
+      // showImagePreview({
+      //   images: files,
+      //   startPosition: index,
+      //   closeable: true
+      // })
     }
 
     // 选择照片
@@ -399,6 +459,21 @@ export default defineComponent({
             </div>
           </div>
         </Popup>
+
+        <ImagePreview
+          v-model:show={viewImage.show}
+          startPosition={viewImage.startPosition}
+          images={images.value}
+          onChange={(index: number) => (viewImage.downIndex = index)}
+        >
+          {{
+            cover: () => (
+              <div class={styles.downBtn} onClick={() => saveImg()}>
+                <img src={iconDown} />
+              </div>
+            )
+          }}
+        </ImagePreview>
       </div>
     )
   }