feat: 完成页面开发

2024-12-27 19:01:54 +08:00
parent b642a7d5e7
commit 6d62cc0567
52 changed files with 1463 additions and 31 deletions
@@ -0,0 +1,124 @@
+<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>