anonymous
125 lines
3.9 KiB
Vue
125 lines
3.9 KiB
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="p-15 relative bg-white rounded-10 mt-50 w-345 mx-auto">
|
||
<image
|
||
class="w-186 h-122 rounded-10 mt-15 mx-auto block absolute right-0 bottom-0"
|
||
src="@/static/images/page-sub/team/team-main-hero.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<view class="flex flex-col">
|
||
<view class="text-14 text-gradient">看看人数</view>
|
||
<view class="text-35 font-bold text-gradient mt-10 leading-35">1234</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-42 h-52 rounded-10 mx-auto block" :src="item.icon" mode="aspectFill" />
|
||
<view class="text-14 text-center">{{ item.title }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-25 bg-white rounded-10 w-345 mx-auto">
|
||
<view class="flex p-15 items-center" v-for="item in 10" :key="item">
|
||
<Avatar class="w-40 h-40" />
|
||
<view class="flex-1 flex flex-col ml-15">
|
||
<view class="text-14 text-#333">用户名</view>
|
||
<view class="text-12 mt-10 text-#999">1234567890</view>
|
||
<view class="text-12 mt-10 text-#999">2024-12-27 12:00:00</view>
|
||
</view>
|
||
<view class="bg-#71C78A80 text-white text-12 rounded-10 px-10 py-5">邀请成功</view>
|
||
</view>
|
||
</view>
|
||
<wd-action-sheet v-model="showRule" title="邀请奖励规则">
|
||
<view class="text-16 text-#333 p-15">
|
||
<view class="mb-10">1.每邀请一人可以获得1万投资金，2000数字人民币 1点认购点</view>
|
||
<view class="mb-10">2.邀请满5人可以额外获得5万投资金。1万数字人民币 5点认购点</view>
|
||
<view class="mb-10">3.邀请满10人可以额外获得10万投资金。2万数字人民币 10点认购点</view>
|
||
<view class="mb-10">4.邀请满20人可以额外获得20万投资金。5万数字人民币 20点认购点</view>
|
||
<view class="mb-10">5.邀请满50人可以额外获得50万投资金。10万数字人民币 50点认购点</view>
|
||
</view>
|
||
</wd-action-sheet>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Avatar from '@/components/Avatar.vue'
|
||
import NavBar from '@/components/NavBar.vue'
|
||
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'
|
||
import Level4 from '@/static/images/page-sub/team/level-4.png'
|
||
import Level5 from '@/static/images/page-sub/team/level-5.png'
|
||
import Level6 from '@/static/images/page-sub/team/level-6.png'
|
||
|
||
const showRule = ref(false)
|
||
|
||
const handleRule = () => {
|
||
showRule.value = true
|
||
}
|
||
const currentLevelIndex = ref(0)
|
||
|
||
const levelList = ref([
|
||
{
|
||
title: '一级用户',
|
||
icon: Level1,
|
||
},
|
||
{
|
||
title: '二级用户',
|
||
icon: Level2,
|
||
},
|
||
{
|
||
title: '三级用户',
|
||
icon: Level3,
|
||
},
|
||
{
|
||
title: '四级用户',
|
||
icon: Level4,
|
||
},
|
||
{
|
||
title: '五级用户',
|
||
icon: Level5,
|
||
},
|
||
{
|
||
title: '六级用户',
|
||
icon: Level6,
|
||
},
|
||
])
|
||
</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;
|
||
}
|
||
</style>
|