添加分享模式

src/views/creation/share-model/index.tsx

@@ -16,7 +16,7 @@ import iconDownload from './images/icon-download.png';
 import iconFirend from './images/icon-friend.png';
 import iconWeChat from './images/icon-wechat.png';
 import iconFriendRing from './images/icon-friend-ring.png';
-// import iconLink from './images/icon-link.png';
+import iconLink from './images/icon-link.png';
 import iconLogo from './images/icon-logo.png';
 import shareBg from './images/share-bg.png';
 import audioPan from '../images/audio-pan.png';
@@ -39,7 +39,8 @@ export default defineComponent({
     const canvasRef = ref();
     const state = reactive({
       saveLoading: false,
-      image: null as any
+      image: null as any,
+      url: ''
     });
     const saveImg = async () => {
       showLoadingToast({
@@ -63,10 +64,10 @@ export default defineComponent({
     };
 
     const onSaveWe = async (type: string) => {
-      showLoadingToast({
-        message: '图片生成中...',
-        forbidClick: true
-      });
+      // showLoadingToast({
+      //   message: '图片生成中...',
+      //   forbidClick: true
+      // });
       setTimeout(() => {
         state.saveLoading = false;
       }, 100);
@@ -75,11 +76,14 @@ export default defineComponent({
         content: {
           title: '',
           desc: '',
-          image: state.image,
+          // image: state.image,
           video: '',
-          type: 'image',
+          type: 'link',
+          url: state.url,
+          thumb: props.musicDetail.img,
           shareType: type
         }
+        // 作品的封面图
       });
       if (res?.content?.status) {
         showSuccessToast('分享成功');
@@ -95,43 +99,90 @@ export default defineComponent({
       }
       state.saveLoading = true;
       // 判断是否已经生成图片
-      if (state.image) {
-        if (type) {
-          onSaveWe(type);
+      onSaveWe(type);
+      // if (state.image) {
+      //   if (type) {
+      //     onSaveWe(type);
+      //   } else {
+      //     saveImg();
+      //   }
+      // } else {
+      //   const container: any = document.getElementById('shareContent');
+      //   html2canvas(container, {
+      //     allowTaint: true,
+      //     useCORS: true,
+      //     backgroundColor: null
+      //   })
+      //     .then(async canvas => {
+      //       const url = canvas.toDataURL('image/png');
+      //       state.image = url;
+      //       if (type) {
+      //         onSaveWe(type);
+      //       } else {
+      //         saveImg();
+      //       }
+      //     })
+      //     .catch(() => {
+      //       closeToast();
+      //       state.saveLoading = false;
+      //     });
+      // }
+    };
+
+    const copyText = (text: string) => {
+      // 数字没有 .length 不能执行selectText 需要转化成字符串
+      const textString = text.toString();
+      let input = document.querySelector('#copy-input') as HTMLInputElement;
+      if (!input) {
+        input = document.createElement('input');
+        input.id = 'copy-input';
+        input.readOnly = true; // 防止ios聚焦触发键盘事件
+        input.style.position = 'fixed';
+        input.style.left = '-1000px';
+        input.style.zIndex = '-1000';
+        // 为了处理，页面滑动到底部的问题
+        document.body.appendChild(input);
+        // document.querySelector('#input-copy-container')?.appendChild(input)
+      }
+
+      input.value = textString;
+      // ios必须先选中文字且不支持 input.select();
+      selectText(input, 0, textString.length);
+      console.log(document.execCommand('copy'), 'execCommand');
+      if (document.execCommand('copy')) {
+        document.execCommand('copy');
+        showToast('复制成功');
+      }
+      input.blur();
+
+      // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
+      // 选择文本。createTextRange(setSelectionRange)是input方法
+      function selectText(textbox: any, startIndex: any, stopIndex: any) {
+        if (textbox.createTextRange) {
+          //ie
+          const range = textbox.createTextRange();
+          range.collapse(true);
+          range.moveStart('character', startIndex); //起始光标
+          range.moveEnd('character', stopIndex - startIndex); //结束光标
+          range.select(); //不兼容苹果
         } else {
-          saveImg();
+          //firefox/chrome
+          textbox.setSelectionRange(startIndex, stopIndex);
+          textbox.focus();
         }
-      } else {
-        const container: any = document.getElementById('shareContent');
-        html2canvas(container, {
-          allowTaint: true,
-          useCORS: true,
-          backgroundColor: null
-        })
-          .then(async canvas => {
-            const url = canvas.toDataURL('image/png');
-            state.image = url;
-            if (type) {
-              onSaveWe(type);
-            } else {
-              saveImg();
-            }
-          })
-          .catch(() => {
-            closeToast();
-            state.saveLoading = false;
-          });
       }
     };
 
     onMounted(() => {
       const canvas = canvasRef.value;
+      state.url =
+        location.origin +
+        location.pathname +
+        '#/shareCreation?id=' +
+        props.musicDetail.id;
       QRCode.toCanvas(
         canvas,
-        location.origin +
-          location.pathname +
-          '#/shareCreation?id=' +
-          props.musicDetail.id,
+        state.url,
         {
           margin: 1
         },
@@ -214,7 +265,10 @@ export default defineComponent({
               icon={iconFriendRing}
               text="朋友圈"
               onClick={() => onSavePath('wechat_circle')}></GridItem>
-            {/* <GridItem icon={iconLink} text="复制链接"></GridItem> */}
+            <GridItem
+              icon={iconLink}
+              text="复制链接"
+              onClick={() => copyText(state.url)}></GridItem>
           </Grid>
 
           <div