Update index.tsx

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,21 +64,23 @@ export default defineComponent({
     }
 
     const onSaveWe = async (type: string) => {
-      showLoadingToast({
-        message: '图片生成中...',
-        forbidClick: true
-      })
+      // showLoadingToast({
+      //   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
         }
       })
@@ -126,9 +129,10 @@ export default defineComponent({
 
     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
         },
@@ -139,6 +143,50 @@ 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')
+        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 {
+          //firefox/chrome
+          textbox.setSelectionRange(startIndex, stopIndex)
+          textbox.focus()
+        }
+      }
+    }
+
     return () => (
       <div class={styles.shareModel}>
         <div class={styles.shareContent} id="shareContent">
@@ -196,7 +244,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 class={[styles.btn, 'van-hairline--top']} onClick={() => emit('close')}>