|
@@ -17,6 +17,7 @@ import {
|
|
|
showFailToast,
|
|
|
showLoadingToast,
|
|
|
showSuccessToast,
|
|
|
+ showToast,
|
|
|
Tag
|
|
|
} from 'vant'
|
|
|
import { defineComponent, onMounted, reactive } from 'vue'
|
|
@@ -163,7 +164,8 @@ export default defineComponent({
|
|
|
|
|
|
const imgs = reactive({
|
|
|
saveLoading: false,
|
|
|
- image: null as any
|
|
|
+ image: null as any,
|
|
|
+ shareLoading: false
|
|
|
})
|
|
|
const onSaveImg = async () => {
|
|
|
// 判断是否在保存中...
|
|
@@ -192,6 +194,59 @@ export default defineComponent({
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
+ const onShare = () => {
|
|
|
+ if (imgs.shareLoading) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ imgs.shareLoading = true
|
|
|
+ if (imgs.image) {
|
|
|
+ openShare()
|
|
|
+ } else {
|
|
|
+ const container: any = document.getElementById(`share-preview-container`)
|
|
|
+ html2canvas(container, {
|
|
|
+ allowTaint: true,
|
|
|
+ useCORS: true,
|
|
|
+ backgroundColor: null
|
|
|
+ })
|
|
|
+ .then(async (canvas) => {
|
|
|
+ const url = canvas.toDataURL('image/png')
|
|
|
+ imgs.image = url
|
|
|
+
|
|
|
+ openShare()
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ closeToast()
|
|
|
+ imgs.shareLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const openShare = () => {
|
|
|
+ const image = imgs.image
|
|
|
+ setTimeout(() => {
|
|
|
+ imgs.shareLoading = false
|
|
|
+ }, 100)
|
|
|
+ if (image) {
|
|
|
+ postMessage(
|
|
|
+ {
|
|
|
+ api: 'shareTripartite',
|
|
|
+ content: {
|
|
|
+ title: '',
|
|
|
+ desc: '',
|
|
|
+ image,
|
|
|
+ video: '',
|
|
|
+ type: 'image',
|
|
|
+ // button: ['copy']
|
|
|
+ shareType: 'wechat'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (res: any) => {
|
|
|
+ if (res && res.content) {
|
|
|
+ showToast(res.content.message || (res.content.status ? '分享成功' : '分享失败'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
const saveImg = async () => {
|
|
|
showLoadingToast({ message: '图片生成中...', forbidClick: true })
|
|
|
setTimeout(() => {
|
|
@@ -360,7 +415,7 @@ export default defineComponent({
|
|
|
text: () => <div class={styles.shareText}>保存图片</div>
|
|
|
}}
|
|
|
</GridItem>
|
|
|
- <GridItem>
|
|
|
+ <GridItem onClick={onShare}>
|
|
|
{{
|
|
|
icon: () => <Image class={styles.shareImg} src={iconWechat} />,
|
|
|
text: () => <div class={styles.shareText}>微信</div>
|