Browse Source

修复 分享切换时候的play图标显示问题。增加长按二维码跳转

黄琪勇 11 months ago
parent
commit
ca98ee1483

+ 1 - 0
src/views/creation/index-share.tsx

@@ -449,6 +449,7 @@ export default defineComponent({
       if(state._plrl){
       if(state._plrl){
         state._plrl.destroy()
         state._plrl.destroy()
       }
       }
+      plyrState.playIngShow = true
       staffState.staffSrc = ""
       staffState.staffSrc = ""
       staffState.isShow = false
       staffState.isShow = false
       staffState.height = "initial"
       staffState.height = "initial"

+ 4 - 0
src/views/creation/share-model/index.module.less

@@ -118,6 +118,10 @@
     // border-image: linear-gradient(130deg, rgba(37, 156, 254, 1), rgba(68, 201, 255, 1)) 1 1;
     // border-image: linear-gradient(130deg, rgba(37, 156, 254, 1), rgba(68, 201, 255, 1)) 1 1;
     flex-shrink: 0;
     flex-shrink: 0;
     overflow: hidden;
     overflow: hidden;
+    transition: transform 0.3s ease;
+    &.animate{
+      transform: scale(1.1)
+    }
 
 
     .qrcodeCanvas {
     .qrcodeCanvas {
       width: 100% !important;
       width: 100% !important;

+ 25 - 2
src/views/creation/share-model/index.tsx

@@ -194,7 +194,24 @@ export default defineComponent({
         }
         }
       );
       );
     });
     });
-
+    let _time:any
+    const isAnimate = ref(false)
+    function startOpenOutLink(){
+      isAnimate.value = true
+      _time = setTimeout(() => {
+        isAnimate.value = false
+        postMessage({
+          api: 'openOutLink',
+          content : {
+            "url" : state.url
+          }
+        })
+      }, 1000);
+    }
+    function canceOpenOutLink(){
+      isAnimate.value = false
+      clearTimeout(_time)
+    }
     return () => (
     return () => (
       <div class={styles.shareModel}>
       <div class={styles.shareModel}>
         <div class={styles.shareContent} id="shareContent">
         <div class={styles.shareContent} id="shareContent">
@@ -233,7 +250,13 @@ export default defineComponent({
           </div>
           </div>
 
 
           <div class={styles.downloadSection}>
           <div class={styles.downloadSection}>
-            <div class={styles.qrcode}>
+            <div class={[styles.qrcode,isAnimate.value && styles.animate]}
+                onMousedown={startOpenOutLink}
+                onTouchstart={startOpenOutLink}
+                onMouseup={canceOpenOutLink}
+                onMouseleave={canceOpenOutLink}
+                onTouchend={canceOpenOutLink}
+              >
               <canvas ref={canvasRef} class={styles.qrcodeCanvas}></canvas>
               <canvas ref={canvasRef} class={styles.qrcodeCanvas}></canvas>
               <img src={smallLogo} class={styles.qrcodeLogo} />
               <img src={smallLogo} class={styles.qrcodeLogo} />
             </div>
             </div>