Update index.tsx

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

@@ -5,7 +5,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 '@common/images/logo.png'
 import shareBg from './images/share-bg.png'
 import audioPan from '../images/audio-pan.png'
@@ -28,7 +28,8 @@ export default defineComponent({
     const canvasRef = ref()
     const state = reactive({
       saveLoading: false,
-      image: null as any
+      image: null as any,
+      url: ''
     })
     const saveImg = async () => {
       Toast.loading({
@@ -52,21 +53,23 @@ export default defineComponent({
     }
 
     const onSaveWe = async (type: string) => {
-      Toast.loading({
-        message: '图片生成中...',
-        forbidClick: true
-      })
+      // Toast.loading({
+      //   message: '图片生成中...',
+      //   forbidClick: true
+      // })
       setTimeout(() => {
         state.saveLoading = false
       }, 100)
       const res = await promisefiyPostMessage({
         api: 'shareTripartite',
         content: {
-          title: '',
-          desc: '',
-          image: state.image,
+          title: '我在酷乐秀发布了演奏作品',
+          desc: props.musicDetail.desc,
+          // image: state.image,
           video: '',
-          type: 'image',
+          type: 'link',
+          url: state.url,
+          thumb: props.musicDetail.img,
           shareType: type
         }
       })
@@ -113,14 +116,60 @@ export default defineComponent({
       }
     }
 
+    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')
+        Toast('复制成功')
+      }
+      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 {
+          //firefox/chrome
+          textbox.setSelectionRange(startIndex, stopIndex)
+          textbox.focus()
+        }
+      }
+    }
+
     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
         },
@@ -206,7 +255,11 @@ export default defineComponent({
               text="朋友圈"
               onClick={() => onSavePath('wechat_circle')}
             ></GridItem>
-            {/* <GridItem icon={iconLink} text="复制链接"></GridItem> */}
+            <GridItem
+              icon={iconLink}
+              text="复制链接"
+              onClick={() => copyText(state.url)}
+            ></GridItem>
           </Grid>
 
           <div