|
|
@@ -19,7 +19,7 @@
|
|
|
<ion-icon :icon="caretForwardCircleOutline"></ion-icon>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- <div class="btn-invite" @click="showShareModal = true"></div>
|
|
|
+ <div class="btn-invite" @click="drawQr"></div>
|
|
|
</div>
|
|
|
<div class="stat">
|
|
|
<div class="bg">
|
|
|
@@ -62,9 +62,9 @@
|
|
|
</ion-content>
|
|
|
</ion-modal>
|
|
|
<ion-modal class="share-modal dialog" :is-open="showShareModal" @didDismiss="showShareModal = false">
|
|
|
- <img class="share-img" src="@/assets/share_img.png" />
|
|
|
- <div class="btn-save">{{ $t('distribution.saveImg') }}</div>
|
|
|
- <div class="btn-cancel" @click="showShareModal = fales">{{ $t('common.cancel') }}</div>
|
|
|
+ <img class="share-img" :src="posterUrl" />
|
|
|
+ <div class="btn-save" @click="save">{{ $t('distribution.saveImg') }}</div>
|
|
|
+ <div class="btn-cancel" @click="showShareModal = false">{{ $t('common.cancel') }}</div>
|
|
|
</ion-modal>
|
|
|
</ion-content>
|
|
|
</ion-page>
|
|
|
@@ -77,6 +77,12 @@ import CommissionItem from '@/components/CommissionItem.vue'
|
|
|
import VueQrcode from '@chenfengyuan/vue-qrcode'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
import { computed } from 'vue'
|
|
|
+import qrcode from 'qrcode'
|
|
|
+import shareImg from '@/assets/share_img.png'
|
|
|
+import { Capacitor } from '@capacitor/core'
|
|
|
+import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'
|
|
|
+import { Media } from '@capacitor-community/media'
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
CommissionItem,
|
|
|
@@ -93,7 +99,8 @@ export default {
|
|
|
records: [],
|
|
|
superior: null,
|
|
|
showShareModal: false,
|
|
|
- showToolbar: false
|
|
|
+ showToolbar: false,
|
|
|
+ posterUrl: null
|
|
|
}
|
|
|
},
|
|
|
setup() {
|
|
|
@@ -134,6 +141,73 @@ export default {
|
|
|
this.$http.get('/commission/records').then(res => {
|
|
|
this.records = res.content
|
|
|
})
|
|
|
+ },
|
|
|
+ drawQr() {
|
|
|
+ let qrImg = new Image()
|
|
|
+ let bgImg = new Image()
|
|
|
+ let userId = this.user.id
|
|
|
+ function loadQR(text) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ qrcode.toDataURL(
|
|
|
+ `http://35.76.121.189/download.html?invitor=${userId}`,
|
|
|
+ { width: 335, height: 335, margin: 0 },
|
|
|
+ function (err, url) {
|
|
|
+ if (err) {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ qrImg.onload = () => {
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ qrImg.src = url
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function loadBg() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ bgImg.onload = () => {
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ bgImg.src = shareImg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$toast.loading('loading...')
|
|
|
+ Promise.all([loadQR(), loadBg()]).then(() => {
|
|
|
+ this.$toast.dismiss()
|
|
|
+ let canvas = document.createElement('canvas')
|
|
|
+ canvas.width = 1125
|
|
|
+ canvas.height = 1740
|
|
|
+ let ctx = canvas.getContext('2d')
|
|
|
+ ctx.drawImage(bgImg, 0, 0)
|
|
|
+ ctx.drawImage(qrImg, 395, 1095, 335, 335)
|
|
|
+ let dataUrl = canvas.toDataURL('image/png')
|
|
|
+ this.posterUrl = dataUrl
|
|
|
+ this.showShareModal = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async save() {
|
|
|
+ if (Capacitor.isNativePlatform) {
|
|
|
+ //
|
|
|
+ try {
|
|
|
+ const savedFile = await Filesystem.writeFile({
|
|
|
+ path: 'share.png',
|
|
|
+ data: this.posterUrl,
|
|
|
+ directory: Directory.Data
|
|
|
+ })
|
|
|
+ await Media.savePhoto({
|
|
|
+ path: savedFile.uri,
|
|
|
+ album: 'FirstCash'
|
|
|
+ })
|
|
|
+ this.$toast.success('Saved')
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var link = document.createElement('a')
|
|
|
+ link.setAttribute('download', 'Share.png')
|
|
|
+ link.setAttribute('href', this.posterUrl.replace('image/png', 'image/octet-stream'))
|
|
|
+ link.click()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
