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

import { Button, Cell, Swipe, SwipeItem, Toast } from 'vant'
import { defineComponent } 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: ''
    }
  },
  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.$nextTick(async () => {
        const container: any = document.getElementById(
          'share-preview-container'
        )
        html2canvas(container, { allowTaint: true, useCORS: true }).then(
          canvas => {
            const url = canvas.toDataURL('image/png')
            this.image = url
          }
        )
      })
    } catch {
      //
    }
  },
  methods: {
    async onSaveImg() {
      const res = await promisefiyPostMessage({
        api: 'savePicture',
        content: {
          base64: this.image
        }
      })
      if (res?.content?.status === 'success') {
        Toast.success('保存成功')
      } else {
        Toast.fail('保存失败')
      }
    },
    async shareShow() {
      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}>
              <Swipe
                showIndicators={false}
                loop={false}
                style={{ borderRadius: '10px', overflow: 'hidden' }}
              >
                <SwipeItem>
                  <ShareItem
                    teacherId={this.teacherId}
                    shareUrl={this.codeUrl}
                  />
                </SwipeItem>
                <SwipeItem>
                  <ShareItem
                    teacherId={this.teacherId}
                    shareUrl={this.codeUrl}
                  />
                </SwipeItem>
                <SwipeItem>
                  <ShareItem
                    teacherId={this.teacherId}
                    shareUrl={this.codeUrl}
                  />
                </SwipeItem>
              </Swipe>
            </div>

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