h5-colexiu/src/components/col-share/index.tsx

import { Button, Cell, Swipe, SwipeItem, Toast } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
import html2canvas from 'html2canvas'
import ShareItem from './share-item'
import request from '@/helpers/request'

export default defineComponent({
  name: 'col-share',
  props: {
    teacherId: {
      type: Number
    },
    shareUrl: {
      type: String,
      default: ''
    },
    shareType: {
      // 分享类型
      type: String as PropType<'' | 'video' | 'music' | 'live'>,
      default: ''
    }
  },
  data() {
    return {
      image: null as any,
      codeUrl: ''
    }
  },
  async mounted() {
    try {
      // const shortRes = await request.post('/api-teacher/sysConfig/shortURL', {
      //   requestType: 'form',
      //   data: {
      //     orginURL: this.shareUrl
      //   }
      // })
      // this.codeUrl = shortRes.data
      this.codeUrl = this.shareUrl
    } catch {
      //
    }
  },
  methods: {
    async onSaveImg() {
      const container: any = document.getElementById('share-preview-container')
      html2canvas(container, { allowTaint: true, useCORS: true }).then(
        async canvas => {
          const url = canvas.toDataURL('image/png')
          this.image = url

          const res = await promisefiyPostMessage({
            api: 'savePicture',
            content: {
              base64: this.image
            }
          })
          if (res?.content?.status === 'success') {
            Toast.success('保存成功')
          } else {
            Toast.fail('保存失败')
          }
        }
      )
    },
    async shareShow() {
      const container: any = document.getElementById('share-preview-container')
      html2canvas(container, { allowTaint: true, useCORS: true }).then(
        async canvas => {
          const url = canvas.toDataURL('image/png')
          this.image = url

          const image = this.image
          if (image) {
            postMessage(
              {
                api: 'shareAchievements',
                content: {
                  title: '我在酷乐秀使用小酷Ai练习乐器',
                  desc: '酷乐秀小酷Ai帮助我自主练习乐器，真的太好用啦！每天都要坚持练习哦~',
                  image,
                  video: '',
                  type: 'image'
                }
              },
              (res: any) => {
                if (res && res.content) {
                  Toast(
                    res.content.message ||
                      (res.content.status ? '分享成功' : '分享失败')
                  )
                }
              }
            )
          }
        }
      )
    }
  },
  render() {
    return (
      <>
        {this.codeUrl && (
          <>
            <div class={styles.shareContainer} id="share-preview-container">
              <Swipe showIndicators={false} loop={false}>
                <SwipeItem>
                  <ShareItem teacherId={this.teacherId} shareUrl={this.codeUrl}>
                    {this.$slots.default && this.$slots.default()}
                  </ShareItem>
                </SwipeItem>
                <SwipeItem>
                  <ShareItem
                    teacherId={this.teacherId}
                    shareUrl={this.codeUrl}
                    showType="yellow"
                  >
                    {this.$slots.default && this.$slots.default()}
                  </ShareItem>
                </SwipeItem>
                <SwipeItem>
                  <ShareItem
                    teacherId={this.teacherId}
                    shareUrl={this.codeUrl}
                    showType="pink"
                  >
                    {this.$slots.default && this.$slots.default()}
                  </ShareItem>
                </SwipeItem>
              </Swipe>
            </div>

            <div class={['btnGroup', styles.shareGroupBtn]}>
              <Button type="primary" plain round onClick={this.onSaveImg}>
                保存图片
              </Button>
              <Button
                type="primary"
                round
                onClick={() => {
                  this.shareShow()
                }}
              >
                立即分享
              </Button>
            </div>
          </>
        )}
      </>
    )
  }
})