bluenote/src/components/popup-link-copyer/index.tsx

import { View, Image } from "@tarojs/components"
import { TSocialMediaItem } from '@/types/index'
import style from './index.module.less'
import Taro from "@tarojs/taro"
import closeIcon from '@/images/icon-close-8.png';
import IconCorrect from '@/images/svgs/website/IconCorrect.svg'

import Popup from "@/components/popup/popup";
interface Props {
  setShow: (show: boolean)=>void
  show: boolean,
  link: string,
  mediaItem: TSocialMediaItem,
}
export default ({show, setShow, link, mediaItem}:Props)=> {
  let iconClassName = `${mediaItem.className}`
  let title = mediaItem.label
  
  const handleCopy = (e: any)=> {
    e.stopPropagation();
    // 手动复制并 toast 提示
    if(link){
      Taro.setClipboardData({
        data: link,
        success(){
          Taro.showToast({
            title: '复制成功',
            icon: 'none'
          })
        },fail(res) {
          console.log(res)
          Taro.showToast({
            title: '复制失败',
            icon: 'none'
          })
        },
      })
    }
  }
  // 默认打开就复制
  if(show){
    Taro.setClipboardData({
      data: link,
      success(){
        Taro.hideToast();
      },
    })
  }
  return <Popup
    show={show}
    setShow={setShow}
    >
      <View className={style.container}>
        <View className={style.content}>
          <View className={style.iconCorrect}>
            <Image src={IconCorrect} className="w-28 h-40"></Image>
          </View>
          <View className="text-center text-black leading-32 font-medium text-24">链接已复制</View>
          <View className={style.copyTips}>复制内容到浏览器或使用对应软件搜索</View>
          <View className={style.linkRow}>
            <View className={`${style.logo} ${iconClassName}`}></View>
            <View className={style.infoRow}>
              <View className={style.title}>{title}</View>
              <View className={style.link}>{link}</View>
            </View>
            <View className={style.copyButton} onClick={handleCopy}>复制链接</View>
          </View>
          
        </View>
      </View>
   </Popup>
}