x-forend/src/pages-sub/team/index.vue

<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的邀请',
    navigationBarBackgroundColor: '#fff',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="team-page">
    <NavBar>
      <template #right>
        <view @click="handleRule" class="text-14 text-#333">邀请奖励规则</view>
      </template>
    </NavBar>
    <view class="px-15 py-30 relative rounded-10 mt-50 w-345 mx-auto main-content">
      <image
        class="w-150 h-150 rounded-10 mt-15 mx-auto block absolute right-15 bottom-30"
        src="@/static/images/page-sub/team/team-main-hero.png"
        mode="aspectFit"
      />
      <view class="flex flex-col">
        <view class="text-14 text-#6784C7">邀请人数</view>
        <view class="text-35 font-bold text-#476FFF mt-10 leading-35">{{ totalCount }}</view>
      </view>
    </view>
    <image
      class="w-201 h-46 rounded-10 mt-30 mx-auto block"
      src="@/static/images/page-sub/team/team-title.png"
      mode="aspectFill"
    />
    <view class="flex overflow-auto mt-25 pr-15 pl-8">
      <view
        class="px-40 ml-8 py-10 flex-shrink-0 rounded-10 bg-white"
        v-for="(item, index) in levelList"
        :key="item.title"
        :class="{
          'btn-gradient': currentLevelIndex === index,
        }"
        @click="() => (currentLevelIndex = index)"
      >
        <image class="w-30 h-30 rounded-10 mx-auto block" :src="item.icon" mode="aspectFill" />
        <view class="text-14 mt-10 text-center">{{ item.title }}</view>
      </view>
    </view>
    <view class="mt-25 bg-white rounded-10 w-345 mx-auto" v-if="list.length">
      <view class="flex p-15 items-center" v-for="item in list" :key="item">
        <Avatar class="w-40 h-40" :src="item.avatar" />
        <view class="flex-1 flex flex-col ml-15">
          <view class="text-14 text-#333">{{ item.nickname }}</view>
          <view class="text-12 mt-10 text-#999">{{ item.username }}</view>
          <view class="text-12 mt-10 text-#999">{{ item.jointime }}</view>
        </view>
        <!-- <view class="bg-#71C78A80 text-white text-12 rounded-10 px-10 py-5">邀请成功</view> -->
        <view class="text-14 font-bold text-#FF5F5F">+{{ item.score }} 股</view>
      </view>
    </view>
    <view class="mt-25 bg-white rounded-10 w-345 mx-auto p-15" v-else>
      <wd-status-tip image="content" tip="暂无内容" />
    </view>
    <wd-action-sheet v-model="showRule" title="邀请奖励规则">
      <view class="text-16 text-#333 p-15">
        <view class="mb-10 text-center">每邀请一人可以获得20股马尔代夫股权</view>
      </view>
    </wd-action-sheet>
  </view>
</template>

<script setup lang="ts">
import Avatar from '@/components/Avatar.vue'
import NavBar from '@/components/NavBar.vue'
import { getMyTeamAPI, getMyTeamApi } from '@/service'
import Level1 from '@/static/images/page-sub/team/level-1.png'
import Level2 from '@/static/images/page-sub/team/level-2.png'
import Level3 from '@/static/images/page-sub/team/level-3.png'

const showRule = ref(false)

const handleRule = () => {
  showRule.value = true
}
const currentLevelIndex = ref(0)

const levelList = ref([
  {
    title: '一级用户',
    icon: Level1,
    level: 1,
  },
  {
    title: '二级用户',
    icon: Level2,
    level: 2,
  },
  {
    title: '三级用户',
    icon: Level3,
    level: 3,
  },
])

const totalCount = ref(0)
const { list, onReload } = useListPageRequest((...rest) => {
  return getMyTeamAPI(...rest).then((res) => {
    totalCount.value = (res.data as any).num
    res.data.data = res.data.list
    return res.data
  })
})

watch(
  () => unref(levelList)[currentLevelIndex.value].level,
  (level) => {
    onReload({
      level,
    })
  },
)
</script>

<style lang="scss" scoped>
.team-page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-image: url('@/static/images/bg.png');
  background-position: top;
  background-size: cover;
}
.main-content {
  background-image: url('@/static/images/page-sub/team/main-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
</style>