x-forend/src/pages/invite/index.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'
import Avatar from '@/components/Avatar.vue'
import {
  getCommunityInviteFirstAPI,
  getCommunityInviteRewardAPI,
  getCommunityMyInviteAPI,
} from '@/service'
import { showModal } from '@/utils'

const userStore = useUserStore()

const qrcodeValue =
  location.origin + '/#/pages/register/index?invite=' + userStore.userInfo?.invitecode

const onCopy = (code: string) => {
  uni.setClipboardData({
    data: code,
  })
}
const inviteData = ref({
  num: 0,
  performance: 0,
})
const { list } = useListPageRequest((params) => {
  return getCommunityMyInviteAPI(params).then((res) => {
    inviteData.value.num = res.data.num
    inviteData.value.performance = res.data.performance
    res.data.data = res.data.list
    return res.data
  })
})

const inviteInfo = ref<any>(null)
const loadInviteInfo = async () => {
  const { data } = await getCommunityInviteFirstAPI()
  inviteInfo.value = data
  // inviteInfo.value = {
  //   num: 10,
  //   isuserauth: 1,
  //   realrewards: '200',
  //   jianglitiaojian: {
  //     '10': '3000',
  //     '20': '5000',
  //     '30': '15000',
  //     '40': '30000',
  //     '50': '50000',
  //   },
  //   open: 1,
  // }
}

onShow(async () => {
  await loadInviteInfo()
})
const taskList = computed(() => {
  if (!inviteInfo.value) return []

  // const inviteTask = Object.keys(inviteInfo.value.jianglitiaojian)
  // const inviteTaskList = inviteTask.map((key) => ({
  //   title: `邀请${key}人(${inviteInfo.value.num}/${key})`,
  //   desc: `每月额外领取${inviteInfo.value.jianglitiaojian[key]}元社保金`,
  //   level: key,
  //   status: Number(inviteInfo.value.num) >= Number(key),
  //   open: false,
  // }))
  // // 查找最后一个完成的任务，并设置open为true
  // const lastCompletedTask = inviteTaskList.findLast((item) => item.status)
  // if (lastCompletedTask) {
  //   lastCompletedTask.open = inviteInfo.value.open
  // }
  return [
    {
      title: '注册实名',
      desc: `领取${inviteInfo.value.realrewards}元社保金`,
      // status: inviteInfo.value.isuserauth,
      status: false,
      open: false,
    },
    // {
    //   title: '签到有礼',
    //   desc: `每日签到送${inviteInfo.value.qiandaojiang}元社保金`,
    //   status: false,
    //   open: false,
    // },
    {
      title: '邀请有礼',
      desc: `每邀请1人并实名认证获得${inviteInfo.value.yaoqingjiang}元养老金`,
      status: 0,
      open: false,
    },
    // ...inviteTaskList,
  ]
})

async function onGetReward(level) {
  await getCommunityInviteRewardAPI({ level })
  showModal('领取成功')
  await loadInviteInfo()
}
</script>

<template>
  <view class="pb-100 min-h-screen invite-page">
    <NavBar />
    <view class="flex items-center mt-228 mx-auto w-345 bg-#FFFFFFE5 p-15 rounded-20">
      <view class="text-center">
        <view class="mt-15 rounded-10 overflow-hidden flex bg-#FFFFFF50 p-10 shadow">
          <VueQrcode
            class="!w-100 !h-100 rounded-10"
            :value="qrcodeValue"
            :options="{ size: 200 }"
          />
        </view>
        <view class="text-10 text-#333 mt-4">分享二维码给好友</view>
      </view>
      <view class="text-center p-15">
        <view class="text-14 text-#333">邀请码：{{ userStore.userInfo?.invitecode }}</view>
        <view
          class="mt-8 btn-gradient text-white rounded-full px-15 w-160 py-8 text-14 text-center"
          @click="onCopy(userStore.userInfo?.invitecode)"
        >
          复制邀请码
        </view>
        <view
          class="mt-8 btn-gradient text-white rounded-full px-15 w-160 py-8 text-14 text-center"
          @click="onCopy(qrcodeValue)"
        >
          复制推广链接
        </view>
      </view>
    </view>
    <view class="mt-70 w-345 mx-auto">
      <view
        class="bg-#F3F8FF rounded-10 border-#3B81F3 border-2 border-solid p-15 flex items-start"
        v-for="item of taskList"
        :key="item.title"
      >
        <view class="flex-1">
          <view class="text-15 text-#333 font-500">{{ item.title }}</view>
          <view class="text-12 text-#333 mt-8">{{ item.desc }}</view>
        </view>
        <view>
          <view
            class="w-fit ml-auto mr-0 bg-#C4F7C4 rounded-4 px-10 py-4 leading-12 text-#62C162 text-12 mb-8"
            v-if="item.status"
          >
            已完成
          </view>
          <view
            class="w-fit ml-auto mr-0 bg-#F3CB3B33 rounded-4 px-10 py-4 leading-12 text-#FFA600 text-12"
            v-if="item.open"
            @click="onGetReward(item.level)"
          >
            领取社保金
          </view>
        </view>
      </view>
    </view>
    <view class="bg-#FFFFFFE5 rounded-20 mt-30 w-345 mx-auto p-15 flex">
      <view class="flex-1 text-center">
        <view class="text-18 text-#333">团队人数</view>
        <view class="text-gradient text-18 mt-8">{{ inviteData.num }}</view>
        <view class="font-500 text-14 mt-4">直推人数</view>
      </view>
      <view class="flex-1 text-center">
        <!-- <view class="text-18 text-#333">我的佣金</view> -->
        <view class="text-18 text-#333 h-25"></view>
        <view class="text-gradient text-18 mt-8">{{ inviteData.performance }}</view>
        <view class="font-500 text-14 mt-4">直推业绩</view>
      </view>
    </view>
    <view class="mt-15 w-345 mx-auto">
      <view class="ml-15 text-18 text-white">团队成员（{{ inviteData.num }}/人）</view>
      <view class="mt-15 bg-white px-15 pt-15 pb-4 rounded-10" v-for="item of list" :key="item.id">
        <view class="flex items-center">
          <Avatar :src="item.avatar" class="w-50 h-50" mode="aspectFill" />
          <view class="ml-15 flex-1">
            <view class="text-15 text-#333">{{ item.nickname }}</view>
            <view class="text-12 text-#333 mt-10">{{ item.jointime }}</view>
          </view>
        </view>
        <view class="flex mt-16 py-8">
          <view class="flex-1 text-center">
            <view class="text-gradient">{{ item.yiliao }}</view>
            <view class="text-15 text-#333">医疗（份）</view>
          </view>
          <view class="flex-1 text-center">
            <view class="text-gradient">{{ item.yanglao }}</view>
            <view class="text-15 text-#333">养老（份）</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.invite-page {
  background-color: #000139;
  background-image: url('@/static/images/page-sub/invite-bg.jpg');
  background-repeat: no-repeat;
  background-position: top -40px center;
  background-size: 100%;
}
</style>