fix:调整

src/views/co-ai/index.module.less

@@ -50,7 +50,7 @@
     height: 100%;
     background: linear-gradient(48deg, #43B2FF 0%, #159AF7 100%);
     border: 2Px solid #fff;
-    border-radius: 18px;
+    border-radius: 18px 9px 0 18px;
     z-index: 1;
 }
 
@@ -177,14 +177,14 @@
     padding: 5px;
     transition: all .3s;
 
-    &::after {
-        content: '';
-        position: absolute;
-        right: -24px;
-        border: 10px solid transparent;
-        border-right-color: #fff;
-        opacity: 0;
-    }
+    // &::after {
+    //     content: '';
+    //     position: absolute;
+    //     right: -24px;
+    //     border: 10px solid transparent;
+    //     border-right-color: #fff;
+    //     opacity: 0;
+    // }
 
     &.disableNotic {
         :global {
@@ -201,10 +201,10 @@
         transform: scale(1.05);
         box-shadow: 0px 2px 4px 0px rgba(73, 159, 228, 1);
 
-        &::after {
-            animation: displayIcon 0.1s forwards;
-            animation-delay: .2s;
-        }
+        // &::after {
+        //     animation: displayIcon 0.1s forwards;
+        //     animation-delay: .2s;
+        // }
     }
 
     .musicAvtor {
@@ -307,7 +307,7 @@
         transition: .3s;
 
         &:active {
-            transform: scale(0.8);
+            transform: scale(0.6);
         }
     }
 

src/views/co-ai/index.tsx

@@ -2,7 +2,7 @@ import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import MSearch from '@/components/m-search';
 import icon_play from '@/common/images/icon_play.svg';
-import { NoticeBar } from 'vant';
+import { NoticeBar, showToast } from 'vant';
 import icon_back from './image/icon_back.svg';
 import icon_down from '@/common/images/icon_down.svg';
 import icon_jianpu from '@/common/images/icon_jianpu.svg';
@@ -15,7 +15,7 @@ import png_1 from './image/1.png';
 import png_2 from './image/2.png';
 import png_3 from './image/3.png';
 import png_4 from './image/4.png';
-import { postMessage } from '@/helpers/native-message';
+import { postMessage, promisefiyPostMessage } from '@/helpers/native-message';
 export default defineComponent({
   name: 'co-ai',
   setup() {
@@ -96,6 +96,40 @@ export default defineComponent({
         }
       });
     };
+    /** 保存图片 */
+    const handleSave = async () => {
+      var canvas = document.createElement('canvas'); //创建canvas DOM元素
+      var ctx = canvas.getContext('2d');
+      const src = data.isShowJianpu
+        ? data.musicIndex % 2 === 0
+          ? 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687673062603-1.png'
+          : 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1675232855321-1.png'
+        : data.musicIndex % 2 === 0
+        ? 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1687673062488-1.png'
+        : 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1675232854483-2.png';
+      const bimg = new Image();
+      bimg.crossOrigin = 'anonymous';
+      bimg.src = src + '?v=' + Date.now();
+      bimg.onload = async () => {
+        canvas.height = bimg.height;
+        canvas.width = bimg.width;
+        ctx?.drawImage(bimg, 0, 0, bimg.width, bimg.height);
+        var dataURL = canvas.toDataURL('image/png', 1); //可选取多种模式
+        // console.log("🚀 ~ dataURL:", dataURL);
+        (canvas as any) = null;
+        setTimeout(() => {
+          showToast('保存成功');
+        }, 500)
+        const res = await promisefiyPostMessage({
+          api: 'savePicture',
+          content: {
+            base64: dataURL
+          }
+        });
+        console.log("🚀 ~ res:", res)
+        
+      };
+    };
     return () => (
       <div class={styles.container}>
         <div class={styles.back} onClick={goback}>
@@ -115,7 +149,7 @@ export default defineComponent({
                       data.typeIndex === index && styles.typeActive
                     ]}
                     onClick={() => (data.typeIndex = index)}>
-                    <div class={styles.typeIndex}></div>
+                    {/* <div class={styles.typeIndex}></div> */}
                     <div class={styles.typeImg}>
                       <img class={styles.typeIcon} src={icon} />
                     </div>
@@ -157,7 +191,7 @@ export default defineComponent({
                           </div>
                         </div>
                       </div>
-                      <img class={[styles.musicIcon]} src={icon_play} />
+                      {/* <img class={[styles.musicIcon]} src={icon_play} /> */}
                     </div>
                   );
                 })}
@@ -205,7 +239,7 @@ export default defineComponent({
                 src={data.isShowJianpu ? icon_jianpuActive : icon_jianpu}
                 onClick={() => (data.isShowJianpu = !data.isShowJianpu)}
               />
-              <img src={icon_down} />
+              <img src={icon_down} onClick={handleSave} />
               <img src={icon_start} onClick={() => handleGoto()} />
             </div>
           </div>