<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'

const qrcodeValue = '/pages/register/index?invite=888888'

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">9999999</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.jpg');
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
}
</style>
