anonymous
78 lines
2.1 KiB
Vue
78 lines
2.1 KiB
Vue
<route lang="json5">
|
|
{
|
|
style: {
|
|
navigationBarTitleText: '邀请好友',
|
|
navigationBarBackgroundColor: '#fff',
|
|
navigationStyle: 'custom',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<script setup lang="ts">
|
|
import NavBar from '@/components/NavBar.vue'
|
|
import VueQrcode from '@chenfengyuan/vue-qrcode'
|
|
import { useUserStore } from '@/store'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const qrcodeValue =
|
|
location.origin + '/#/pages/register/index?invite=' + userStore.userInfo?.invitecode
|
|
|
|
const onCopy = (code: string) => {
|
|
uni.setClipboardData({
|
|
data: code,
|
|
})
|
|
}
|
|
const onLottery = () => {
|
|
uni.navigateTo({
|
|
url: '/pages-sub/lottery/index',
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="pb-100 min-h-screen invite-page">
|
|
<NavBar />
|
|
<view class="flex justify-center mt-80">
|
|
<view class="text-white btn-gradient rounded-full px-30 py-10 text-14">邀请好友</view>
|
|
<!-- <view class="ml-15 bg-white rounded-full px-30 py-10 text-14" @click="onLottery">
|
|
<text class="text-gradient">幸运大转盘</text>
|
|
</view> -->
|
|
</view>
|
|
<view class="flex flex-col items-center mt-180">
|
|
<view
|
|
class="flex items-center text-16 text-#333 bg-[rgba(255,255,255,0.8)] rounded-full px-15 py-4 text-12 mt-8"
|
|
>
|
|
<view>
|
|
邀请码
|
|
<text class="font-bold">{{ userStore.userInfo?.invitecode }}</text>
|
|
</view>
|
|
<view
|
|
class="btn-gradient text-white rounded-full px-15 py-4 text-12 ml-10"
|
|
@click="onCopy('99999')"
|
|
>
|
|
复制
|
|
</view>
|
|
</view>
|
|
<view class="mt-15 rounded-10 overflow-hidden flex">
|
|
<VueQrcode :value="qrcodeValue" :options="{ size: 200 }" />
|
|
</view>
|
|
<view
|
|
class="btn-gradient text-white rounded-full text-14 px-30 py-8 mt-30"
|
|
@click="onCopy(qrcodeValue)"
|
|
>
|
|
复制邀请链接
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.invite-page {
|
|
background-image: url('@/static/images/page-sub/invite-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-position: top;
|
|
background-size: 100%;
|
|
}
|
|
</style>
|