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

src/router/routes-common.ts

@@ -236,6 +236,14 @@ export const rootRouter = [
     }
   },
   {
+    path: '/follow-account',
+    name: 'follow-account',
+    component: () => import('@/views/follow-account'),
+    meta: {
+      title: '关注微信公众号'
+    }
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),
     meta: {

src/views/follow-account/index.module.less

@@ -0,0 +1,43 @@
+.followAccount {
+  position: relative;
+  min-height: 100vh;
+  background: url('./images/top_bg.png') no-repeat top center,
+    url('./images/bottom_bg.png') no-repeat bottom center,
+    url('./images/bg.png') repeat center center;
+  background-color: #5cbd75;
+  background-size: 100%;
+  padding: 443px 20px 0;
+  overflow: hidden;
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    width: 50px;
+    height: 47px;
+    background: url('./images/icon_small.png') no-repeat center center;
+    background-size: contain;
+    left: 0;
+    top: 640px;
+    z-index: 1;
+  }
+
+  .content2 {
+    padding: 30px 0;
+  }
+
+  .saveQrcode {
+    background: url('./images/btn.png') no-repeat center center;
+    background-size: contain;
+    width: 300px;
+    height: 50px;
+    margin: 0 auto;
+    margin-bottom: 70px;
+  }
+
+  .followQrcode {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+}

src/views/follow-account/index.tsx

@@ -1,20 +1,79 @@
-import { Image } from 'vant'
-import { defineComponent } from 'vue'
+import { closeToast, Image, showFailToast, showLoadingToast, showSuccessToast } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
-import topBg from './images/top_bg.png'
-import bottomBg from './images/bottom_bg.png'
-import btn from './images/btn.png'
 import content1 from './images/content1.png'
 import content2 from './images/content2.png'
-import iconSmall from './images/iconSmall.png'
+import qrcode from './images/qrcode.jpg'
+import html2canvas from 'html2canvas'
+import { promisefiyPostMessage, postMessage } from '@/helpers/native-message'
 
 export default defineComponent({
   name: 'follow-account',
   setup() {
+    const imgs = reactive({
+      saveLoading: false,
+      image: null as any,
+      shareLoading: false
+    })
+    const onSaveImg = async () => {
+      // 判断是否在保存中...
+      if (imgs.saveLoading) {
+        return
+      }
+      imgs.saveLoading = true
+      // 判断是否已经生成图片
+      if (imgs.image) {
+        saveImg()
+      } else {
+        const container: any = document.getElementById(`preview-container`)
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async (canvas) => {
+            const url = canvas.toDataURL('image/png')
+            imgs.image = url
+            saveImg()
+          })
+          .catch(() => {
+            closeToast()
+            imgs.saveLoading = false
+          })
+      }
+    }
+
+    const saveImg = async () => {
+      showLoadingToast({ message: '图片生成中...', forbidClick: true })
+      setTimeout(() => {
+        imgs.saveLoading = false
+      }, 100)
+      const res = await promisefiyPostMessage({
+        api: 'savePicture',
+        content: {
+          base64: imgs.image
+        }
+      })
+      if (res?.content?.status === 'success') {
+        showSuccessToast('保存成功')
+      } else {
+        showFailToast('保存失败')
+      }
+    }
+
+    onMounted(() => {
+      postMessage({ api: 'setBarStatus', content: { status: 0 } })
+    })
     return () => (
       <div class={styles.followAccount}>
-        <Image src={content1} />
-        <Image src={content2} />
+        <Image src={content1} class={styles.content1} />
+        <Image src={content2} class={styles.content2} />
+
+        <div class={styles.saveQrcode} onClick={onSaveImg}></div>
+
+        <div id="preview-container" class={styles.followQrcode}>
+          <Image src={qrcode} />
+        </div>
       </div>
     )
   }