Merge branch 'master' of http://git.dayaedu.com/lex/orchestra-app

src/views/mine-orchestra/photo-list/detail.tsx

@@ -2,14 +2,28 @@ import OEmpty from '@/components/o-empty'
 import OHeader from '@/components/o-header'
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Grid, GridItem, Image, List, Loading, showImagePreview } from 'vant'
-import { defineComponent, onMounted, reactive, TransitionGroup } from 'vue'
+import {
+  Grid,
+  GridItem,
+  Image,
+  ImagePreview,
+  List,
+  Loading,
+  showFailToast,
+  showImagePreview,
+  showLoadingToast,
+  showSuccessToast
+} from 'vant'
+import { computed, defineComponent, onMounted, reactive, TransitionGroup } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import iconImage from '../images/icon-photo-default.png'
 import OSticky from '@/components/o-sticky'
 import OFullRefresh from '@/components/o-full-refresh'
 import OImage from '@/components/o-image'
+import iconDown from '../images/icon-down.png'
+import { promisefiyPostMessage } from '@/helpers/native-message'
+import html2canvas from 'html2canvas'
 export default defineComponent({
   name: 'photo-detail',
   props: {
@@ -29,7 +43,9 @@ export default defineComponent({
         page: 1,
         rows: 20
       },
-      list: [] as any[]
+      list: [] as any[],
+      startPosition: 0,
+      imgShow: false
     })
 
     const getList = async () => {
@@ -61,17 +77,51 @@ export default defineComponent({
       data.loading = false
     }
 
-    // 预览图片
-    const onShowImage = (index: number) => {
-      const files = data.list.map((file: any) => {
+    // 图片列表
+    const images = computed(() => {
+      return data.list.map((file: any) => {
         return file.fileUrl
       })
-
-      showImagePreview({
-        images: files,
-        startPosition: index,
-        closeable: true
-      })
+    })
+    // 预览图片
+    const onShowImage = (index: number) => {
+      data.startPosition = index
+      data.imgShow = true
+    }
+    const saveImg = async () => {
+      const container: HTMLElement = document.querySelector(
+        `[data-src='${images.value[data.startPosition]}'] img`
+      )!
+      if (container) {
+        const t = showLoadingToast({
+          message: '保存中',
+          duration: 0
+        })
+        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()
+          })
+      }
     }
 
     onMounted(() => {
@@ -123,6 +173,21 @@ export default defineComponent({
             </List>
           </div>
         </OFullRefresh>
+        <ImagePreview
+          v-model:show={data.imgShow}
+          startPosition={data.startPosition}
+          images={images.value}
+          onChange={(index: number) => (data.startPosition = index)}
+        >
+          {{
+            image: ({ src }) => <Image data-src={src} fit="contain" src={src} />,
+            cover: () => (
+              <div class={styles.downBtn} onClick={() => saveImg()}>
+                <img src={iconDown} />
+              </div>
+            )
+          }}
+        </ImagePreview>
       </div>
     )
   }

src/views/mine-orchestra/photo-list/index.module.less

@@ -73,3 +73,22 @@
     }
   }
 }
+.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;
+  }
+}