146 lines
2.3 KiB
Vue
146 lines
2.3 KiB
Vue
<template>
|
|
<div class="invite">
|
|
<div class="invite-title">
|
|
{{ $t('common.moneyTips', {rate}) }}
|
|
</div>
|
|
<div
|
|
class="invite-qrcode"
|
|
ref="qrRef">
|
|
<qrcode-vue
|
|
:value="inviteLink"
|
|
:size="$base.isMobile() ? 200 : 250"
|
|
level="H" />
|
|
</div>
|
|
<div class="invite-link">
|
|
{{ $t('common.inviteLink') }}:
|
|
{{ inviteLink }}
|
|
</div>
|
|
<div class="invite-btns">
|
|
<mf-button
|
|
type="primary"
|
|
size="large"
|
|
@click="copyLink">
|
|
{{ $t('common.copyLink') }}
|
|
</mf-button>
|
|
<mf-button
|
|
type="primary"
|
|
size="large"
|
|
@click="saveQRCode">
|
|
{{ $t('common.saveQRCode') }}
|
|
</mf-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import QrcodeVue from 'qrcode.vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
inviteLink: '',
|
|
rate: ""
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo'])
|
|
},
|
|
components: {
|
|
QrcodeVue
|
|
},
|
|
mounted() {
|
|
this.inviteLink = `${location.origin}/index?inviteCode=${this.userInfo?.invitationCode}`
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.$axios({
|
|
url: 'api/user/getRebateConfig',
|
|
method: "GET"
|
|
}).then(res=> {
|
|
this.rate = res.result
|
|
})
|
|
},
|
|
copyLink() {
|
|
this.$clipboard(this.inviteLink)
|
|
.then((_) => {
|
|
this.$message.success(this.$t('common.copySuccessfully'))
|
|
})
|
|
.catch((_) => {})
|
|
},
|
|
saveQRCode() {
|
|
const canvas = this.$refs.qrRef.querySelector('canvas')
|
|
if (!canvas) {
|
|
console.error('canvas not found')
|
|
return
|
|
}
|
|
const url = canvas.toDataURL('image/png')
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = 'qrcode.png'
|
|
a.click()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.invite {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 0 20px;
|
|
|
|
&-title {
|
|
color: #fff;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
&-link {
|
|
font-size: 20px;
|
|
color: #fff;
|
|
margin-top: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
&-qrcode {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
&-btns {
|
|
margin-top: 40px;
|
|
.mf-button {
|
|
width: 200px;
|
|
margin: 0 10px;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.invite {
|
|
&-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
&-link {
|
|
font-size: 16px;
|
|
}
|
|
|
|
&-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.mf-button {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|