feat: 前端重构
This commit is contained in:
anonymous
+119
-24
@@ -1,7 +1,7 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '邀请好友',
|
||||
navigationBarTitleText: '社区',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
@@ -12,6 +12,7 @@
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
import VueQrcode from '@chenfengyuan/vue-qrcode'
|
||||
import { useUserStore } from '@/store'
|
||||
import Avatar from '@/components/Avatar.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
@@ -33,35 +34,128 @@ const onLottery = () => {
|
||||
<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">{{ userStore.userInfo?.invitecode }}</text>
|
||||
<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="btn-gradient text-white rounded-full px-15 py-4 text-12 ml-10"
|
||||
@click="onCopy('99999')"
|
||||
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 class="mt-15 rounded-10 overflow-hidden flex">
|
||||
<VueQrcode :value="qrcodeValue" :options="{ size: 200 }" />
|
||||
</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"
|
||||
>
|
||||
<view class="flex-1">
|
||||
<view class="text-15 text-#333 font-500">注册实名</view>
|
||||
<view class="text-12 text-#333 mt-8">领取20000元救济金</view>
|
||||
</view>
|
||||
<view class="bg-#C4F7C4 rounded-4 px-10 py-4 leading-12 text-#62C162 text-12">已完成</view>
|
||||
</view>
|
||||
<view
|
||||
class="btn-gradient text-white rounded-full text-14 px-30 py-8 mt-30"
|
||||
@click="onCopy(qrcodeValue)"
|
||||
class="mt-2 bg-#F3F8FF rounded-10 border-#3B81F3 border-2 border-solid p-15 flex items-start"
|
||||
>
|
||||
复制邀请链接
|
||||
<view class="flex-1">
|
||||
<view class="text-15 text-#333 font-500">
|
||||
邀请10人
|
||||
<text class="text-#50D0FF">(10</text>
|
||||
<text class="text-#50D0FF">/10)</text>
|
||||
</view>
|
||||
<view class="text-12 text-#333 mt-8">每月额外领取3000元数济金</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"
|
||||
>
|
||||
已完成
|
||||
</view>
|
||||
<view
|
||||
class="w-fit ml-auto mr-0 bg-#F3CB3B33 rounded-4 px-10 py-4 leading-12 text-#FFA600 text-12"
|
||||
>
|
||||
领取救济金
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="mt-2 bg-#F3F8FF rounded-10 border-#3B81F3 border-2 border-solid p-15 flex items-start"
|
||||
>
|
||||
<view class="flex-1">
|
||||
<view class="text-15 text-#333 font-500">
|
||||
邀请10人
|
||||
<text class="text-#50D0FF">(10</text>
|
||||
<text class="text-#">/20)</text>
|
||||
</view>
|
||||
<view class="text-12 text-#333 mt-8">每月额外领取3000元数济金</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"
|
||||
>
|
||||
已完成
|
||||
</view>
|
||||
<view
|
||||
class="w-fit ml-auto mr-0 bg-#F3CB3B33 rounded-4 px-10 py-4 leading-12 text-#FFA600 text-12"
|
||||
>
|
||||
领取救济金
|
||||
</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">3000</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-gradient text-18 mt-8">3000</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">团队成员（3/人）</view>
|
||||
<view
|
||||
class="mt-15 bg-white px-15 pt-15 pb-4 rounded-10"
|
||||
v-for="(item, index) of 3"
|
||||
:key="index"
|
||||
>
|
||||
<view class="flex items-center">
|
||||
<Avatar class="w-50 h-50" />
|
||||
<view class="ml-15 flex-1">
|
||||
<view class="text-15 text-#333">Aaron</view>
|
||||
<view class="text-12 text-#333 mt-10">2024-03-08</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex mt-16 py-8">
|
||||
<view class="flex-1 text-center">
|
||||
<view class="text-gradient">2</view>
|
||||
<view class="text-15 text-#333">医疗（份）</view>
|
||||
</view>
|
||||
<view class="flex-1 text-center">
|
||||
<view class="text-gradient">2</view>
|
||||
<view class="text-15 text-#333">养老（份）</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -69,9 +163,10 @@ const onLottery = () => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.invite-page {
|
||||
background-image: url('@/static/images/page-sub/invite-bg.png');
|
||||
background-color: #000139;
|
||||
background-image: url('@/static/images/page-sub/invite-bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-position: top -40px center;
|
||||
background-size: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user