更新

src/components/col-share/index.module.less

@@ -71,9 +71,25 @@
   }
 
   .qrcode {
-    // background: #ccc;
+    position: relative;
     width: 76px;
     height: 76px;
+
+    .qrcodeCanvas {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .qrcodeLogo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -8px;
+      margin-top: -8px;
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+    }
   }
 }
 
@@ -83,6 +99,6 @@
   justify-content: space-between;
   padding-top: 12px;
   :global(.van-button) {
-    padding: 12px 32px;
+    padding: 8px 32px;
   }
 }

src/components/col-share/index.tsx

@@ -4,6 +4,7 @@ import styles from './index.module.less'
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
 import html2canvas from 'html2canvas'
 import ShareItem from './share-item'
+import request from '@/helpers/request'
 
 export default defineComponent({
   name: 'col-share',
@@ -18,20 +19,34 @@ export default defineComponent({
   },
   data() {
     return {
-      qrCode: '',
-      image: null as any
+      image: null as any,
+      codeUrl: ''
     }
   },
-  mounted() {
-    this.$nextTick(async () => {
-      const container: any = document.getElementById('share-preview-container')
-      html2canvas(container, { allowTaint: true, useCORS: true }).then(
-        canvas => {
-          const url = canvas.toDataURL('image/png')
-          this.image = url
+  async mounted() {
+    try {
+      const shortRes = await request.post('/api-teacher/sysConfig/shortURL', {
+        requestType: 'form',
+        data: {
+          orginURL: this.shareUrl
         }
-      )
-    })
+      })
+      this.codeUrl = shortRes.data
+
+      this.$nextTick(async () => {
+        const container: any = document.getElementById(
+          'share-preview-container'
+        )
+        html2canvas(container, { allowTaint: true, useCORS: true }).then(
+          canvas => {
+            const url = canvas.toDataURL('image/png')
+            this.image = url
+          }
+        )
+      })
+    } catch {
+      //
+    }
   },
   methods: {
     async onSaveImg() {
@@ -76,38 +91,51 @@ export default defineComponent({
   render() {
     return (
       <>
-        <div class={styles.shareContainer}>
-          <Swipe
-            showIndicators={false}
-            loop={false}
-            style={{ borderRadius: '10px', overflow: 'hidden' }}
-          >
-            <SwipeItem>
-              <ShareItem teacherId={this.teacherId} shareUrl={this.shareUrl} />
-            </SwipeItem>
-            <SwipeItem>
-              <ShareItem teacherId={this.teacherId} shareUrl={this.shareUrl} />
-            </SwipeItem>
-            <SwipeItem>
-              <ShareItem teacherId={this.teacherId} shareUrl={this.shareUrl} />
-            </SwipeItem>
-          </Swipe>
-        </div>
+        {this.codeUrl && (
+          <>
+            <div class={styles.shareContainer}>
+              <Swipe
+                showIndicators={false}
+                loop={false}
+                style={{ borderRadius: '10px', overflow: 'hidden' }}
+              >
+                <SwipeItem>
+                  <ShareItem
+                    teacherId={this.teacherId}
+                    shareUrl={this.codeUrl}
+                  />
+                </SwipeItem>
+                <SwipeItem>
+                  <ShareItem
+                    teacherId={this.teacherId}
+                    shareUrl={this.codeUrl}
+                  />
+                </SwipeItem>
+                <SwipeItem>
+                  <ShareItem
+                    teacherId={this.teacherId}
+                    shareUrl={this.codeUrl}
+                  />
+                </SwipeItem>
+              </Swipe>
+            </div>
 
-        <div class={['btnGroup', styles.shareGroupBtn]}>
-          <Button type="primary" round onClick={this.onSaveImg}>
-            保存图片
-          </Button>
-          <Button
-            type="primary"
-            round
-            onClick={() => {
-              this.shareShow()
-            }}
-          >
-            立即分享
-          </Button>
-        </div>
+            <div class={['btnGroup', styles.shareGroupBtn]}>
+              <Button type="primary" round onClick={this.onSaveImg}>
+                保存图片
+              </Button>
+              <Button
+                type="primary"
+                round
+                onClick={() => {
+                  this.shareShow()
+                }}
+              >
+                立即分享
+              </Button>
+            </div>
+          </>
+        )}
       </>
     )
   }

src/components/col-share/share-item.tsx

@@ -2,11 +2,13 @@ import { Cell } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 
-import QrCodeVue from 'qrcode.vue'
+// import QrCodeVue from 'qrcode.vue'
 // import { toPng } from 'html-to-image'
+import QRCode from 'qrcode'
 
 import iconTeacher from '@/common/images/icon_teacher.png'
 import logo from '@/common/images/logo.png'
+import iconLogo from '@/common/images/icon_logo.png'
 import { state } from '@/state'
 
 export default defineComponent({
@@ -20,6 +22,20 @@ export default defineComponent({
       default: ''
     }
   },
+  mounted() {
+    const canvas = document.getElementById('canvas')
+    QRCode.toCanvas(
+      canvas,
+      this.shareUrl,
+      {
+        margin: 1
+      },
+      (error: any) => {
+        if (error) console.log(error)
+        console.log('success')
+      }
+    )
+  },
   render() {
     return (
       <div
@@ -65,10 +81,8 @@ export default defineComponent({
             <p>扫码下载酷乐秀开启教学之旅</p>
           </div>
           <div class={styles.qrcode}>
-            <QrCodeVue
-              value={this.shareUrl}
-              style={{ width: '100%', height: '100%' }}
-            />
+            <canvas id="canvas" class={styles.qrcodeCanvas}></canvas>
+            <img src={iconLogo} class={styles.qrcodeLogo} />
           </div>
         </div>
       </div>

src/teacher/piano-room/model/share/index.module.less

@@ -68,9 +68,25 @@
   }
 
   .qrcode {
-    // background: #ccc;
+    position: relative;
     width: 76px;
     height: 76px;
+
+    .qrcodeCanvas {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .qrcodeLogo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -8px;
+      margin-top: -8px;
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+    }
   }
 }
 

src/teacher/piano-room/model/share/index.tsx

@@ -3,10 +3,12 @@ import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import { postMessage } from '@/helpers/native-message'
 
-import QrCodeVue from 'qrcode.vue'
+// import QrCodeVue from 'qrcode.vue'
+import QRCode from 'qrcode'
 // import { toPng } from 'html-to-image'
 import html2canvas from 'html2canvas'
 
+import iconLogo from '@/common/images/icon_logo.png'
 import iconTeacher from '@/common/images/icon_teacher.png'
 import logo from '../../images/logo.png'
 import { state } from '@/state'
@@ -25,27 +27,35 @@ export default defineComponent({
     }
   },
   mounted() {
-    console.log(state)
     this.qrCode =
       location.origin + '/student/#/inviteTeacher?id=' + this.teacherId
 
+    const canvas = document.getElementById('canvas')
+    QRCode.toCanvas(
+      canvas,
+      this.qrCode,
+      {
+        margin: 1
+      },
+      (error: any) => {
+        if (error) console.log(error)
+        console.log('success')
+      }
+    )
+
     this.$nextTick(async () => {
       const container: any = document.getElementById('share-preview-container')
       html2canvas(container, { allowTaint: true, useCORS: true }).then(
         canvas => {
-          let url = canvas.toDataURL('image/png')
+          const url = canvas.toDataURL('image/png')
           this.image = url
         }
       )
-
-      // let image = await toPng(container)
-      // image = await toPng(container)
-      // this.image = image
     })
   },
   methods: {
     async shareShow() {
-      let image = this.image
+      const image = this.image
       if (image) {
         postMessage(
           {
@@ -121,10 +131,12 @@ export default defineComponent({
               <p>扫码下载酷乐秀开启教学之旅</p>
             </div>
             <div class={styles.qrcode}>
-              <QrCodeVue
+              {/* <QrCodeVue
                 value={this.qrCode}
                 style={{ width: '100%', height: '100%' }}
-              />
+              /> */}
+              <canvas id="canvas" class={styles.qrcodeCanvas}></canvas>
+              <img src={iconLogo} class={styles.qrcodeLogo} />
             </div>
           </div>
         </div>

src/teacher/video-class/video-detail.tsx

@@ -55,13 +55,7 @@ export default defineComponent({
       this.detailList = result.detailList || []
 
       // shareVideo?recomUserId=56&groupId=124
-      const shortRes = await request.post('/api-teacher/sysConfig/shortURL', {
-        requestType: 'form',
-        data: {
-          orginURL: `${location.origin}/teacher/#/shareVideo?recomUserId=${this.userInfo.id}&groupId=${this.params.videoLessonGroupId}`
-        }
-      })
-      this.shareUrl = shortRes.data
+      this.shareUrl = `${location.origin}/teacher/#/shareVideo?recomUserId=${this.userInfo.id}&groupId=${this.params.videoLessonGroupId}`
 
       this.getList()
     } catch (e) {