feat: 前端重构
This commit is contained in:
anonymous
+124
-82
@@ -10,97 +10,84 @@
|
||||
<template>
|
||||
<view class="my-page">
|
||||
<NavBar />
|
||||
<view class="flex flex-col items-center justify-center mt-30">
|
||||
<Avatar class="w-80 h-80 mx-auto" :src="getImageUrl(userStore.userInfo.avatar)" />
|
||||
<view class="text-16 mt-10">{{ userStore.userInfo.nickname }}</view>
|
||||
<view class="text-12 mt-8">账号：{{ userStore.userInfo.username }}</view>
|
||||
</view>
|
||||
<view class="flex justify-center text-center mt-15 items-center px-30">
|
||||
<view class="flex-1">
|
||||
<view class="text-30 font-bold">{{ Number(userStore.userInfo.money) }}</view>
|
||||
<view class="text-14 mt-10 text-#3B81F3">我的余额</view>
|
||||
<view class="flex mt-50 text-white px-15 items-center">
|
||||
<Avatar class="w-60 h-60" :src="getImageUrl(userStore.userInfo.avatar)" />
|
||||
<view class="ml-15 flex-1">
|
||||
<view class="text-16">{{ userStore.userInfo.nickname }}</view>
|
||||
<view class="text-12 mt-8">账号：{{ userStore.userInfo.username }}</view>
|
||||
</view>
|
||||
<view class="w-50 h-50 relative">
|
||||
<image
|
||||
class="w-100 h-100 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||||
src="@/static/images/my/translate.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view class="text-30 font-bold">{{ Number(userStore.userInfo.score) }}</view>
|
||||
<view class="text-14 mt-10 text-#3B81F3">我的股数</view>
|
||||
<view
|
||||
class="flex border-#50D0FF border-1 border-solid items-center justify-center h-32 w-100 btn-gradient rounded-full text-center text-14 text-white"
|
||||
@click="handleSignIn"
|
||||
>
|
||||
<image class="w-30 h-26 mt-5" src="@/static/images/my/sign-icon.png" mode="widthFix" />
|
||||
<view class="ml-5">签到</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex px-15 mt-15">
|
||||
<view
|
||||
class="flex py-30 justify-center items-center rounded-tl-10 rounded-br-10 flex-1 bg-[linear-gradient(180deg,#D9EBFF,#9EDAFF)] border-1 border-#5FAEFF80 border-solid"
|
||||
@click="handleWithdrawal"
|
||||
>
|
||||
<image class="w-40 h-40" src="@/static/images/my/withdrawal.png" mode="aspectFit" />
|
||||
<view class="text-white text-14 px-15 py-5 ml-15 rounded-full btn-gradient">提现</view>
|
||||
<view class="grid grid-cols-2 gap-10 px-15 mt-15">
|
||||
<view class="px-15 py-10 rounded-10 bg-#FFFFFF33">
|
||||
<view class="flex text-white text-12">我的余额</view>
|
||||
<view class="text-20 text-gradient font-bold">2361</view>
|
||||
<view
|
||||
class="btn-gradient w-fit rounded-full text-center text-12 text-white py-2 px-15 mt-8"
|
||||
@click="handleWithdrawal"
|
||||
>
|
||||
提现
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="ml-10 flex py-30 justify-center items-center rounded-tl-10 rounded-br-10 flex-1 bg-[linear-gradient(180deg,#D9EBFF,#9EDAFF)] border-1 border-#5FAEFF80 border-solid"
|
||||
@click="handleConvert"
|
||||
>
|
||||
<image class="w-40 h-40" src="@/static/images/my/top-up.png" mode="aspectFit" />
|
||||
<view class="text-white text-14 px-15 py-5 ml-15 rounded-full btn-gradient">转换</view>
|
||||
<view class="px-15 py-10 rounded-10 bg-#FFFFFF33">
|
||||
<view class="flex text-white text-12">养老金余额</view>
|
||||
<view class="text-20 text-gradient font-bold">2361</view>
|
||||
<view
|
||||
class="btn-gradient w-fit rounded-full text-center text-12 text-white py-2 px-15 mt-8"
|
||||
@click="handleConvert(0)"
|
||||
>
|
||||
转至我的余额
|
||||
</view>
|
||||
</view>
|
||||
<view class="px-15 py-10 rounded-10 bg-#FFFFFF33">
|
||||
<view class="flex text-white text-12">救济金余额</view>
|
||||
<view class="text-20 text-gradient font-bold">2361</view>
|
||||
</view>
|
||||
<view class="px-15 py-10 rounded-10 bg-#FFFFFF33">
|
||||
<view class="flex text-white text-12">团队佣金</view>
|
||||
<view class="text-20 text-gradient font-bold">2361</view>
|
||||
<view
|
||||
class="btn-gradient w-fit rounded-full text-center text-12 text-white py-2 px-15 mt-8"
|
||||
@click="handleConvert(1)"
|
||||
>
|
||||
转至养老金
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image
|
||||
class="w-330 h-123 mx-auto mt-15 block"
|
||||
src="@/static/images/my/recommend.png"
|
||||
mode="aspectFill"
|
||||
@click="handleInvite"
|
||||
/>
|
||||
<view class="mt-15 rounded-30 bg-white p-15">
|
||||
<image
|
||||
class="w-345 h-146 mx-auto block"
|
||||
src="@/static/images/my/recommend.jpg"
|
||||
mode="widthFix"
|
||||
@click="handleInvite"
|
||||
/>
|
||||
|
||||
<view class="mt-15 grid grid-cols-2 gap-10 p-15">
|
||||
<view
|
||||
@click="handleTeam"
|
||||
class="flex items-center justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/team.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">我的邀请</view>
|
||||
</view>
|
||||
<view
|
||||
@click="handleAsset"
|
||||
class="flex items-center justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/house.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">我的资产</view>
|
||||
<view class="mt-15 grid grid-cols-2 gap-10">
|
||||
<view
|
||||
@click="item.handle"
|
||||
class="flex items-center justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
v-for="item in commonList"
|
||||
:key="item.title"
|
||||
>
|
||||
<image class="w-24 h-24" :src="item.icon" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
@click="handleRealName"
|
||||
class="flex items-center justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
class="mt-50 mx-auto w-294 btn-gradient rounded-full text-center text-14 text-white py-15 mt-15"
|
||||
@click="handleLogout"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/realname.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">实名认证</view>
|
||||
退出登录
|
||||
</view>
|
||||
<view
|
||||
@click="handleBankCard"
|
||||
class="flex items-center justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/card.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">我的银行卡</view>
|
||||
</view>
|
||||
<view
|
||||
@click="downloadAppAPI"
|
||||
class="flex items-center justify-center rounded-tl-10 rounded-br-10 bg-[linear-gradient(45deg,#EFF7FF,#D1E8FF)] p-15 border border-#BEDCFF border-solid"
|
||||
>
|
||||
<image class="w-24 h-24" src="@/static/images/my/download.png" mode="aspectFit" />
|
||||
<view class="text-14 text-#333 ml-10">下载APP</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="mt-50 mx-auto w-294 btn-gradient rounded-full text-center text-14 text-white py-15 mt-15"
|
||||
@click="handleLogout"
|
||||
>
|
||||
退出登录
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -113,6 +100,16 @@ import { downloadAppAPI } from '@/service'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { getImageUrl } from '@/utils'
|
||||
|
||||
import CommonIcon1 from '@/static/images/my/common-icon-1.png'
|
||||
import CommonIcon2 from '@/static/images/my/common-icon-2.png'
|
||||
import CommonIcon3 from '@/static/images/my/common-icon-3.png'
|
||||
import CommonIcon4 from '@/static/images/my/common-icon-4.png'
|
||||
import CommonIcon5 from '@/static/images/my/common-icon-5.png'
|
||||
import CommonIcon6 from '@/static/images/my/common-icon-6.png'
|
||||
import CommonIcon7 from '@/static/images/my/common-icon-7.png'
|
||||
import CommonIcon8 from '@/static/images/my/common-icon-8.png'
|
||||
import CommonIcon9 from '@/static/images/my/common-icon-9.png'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const handleLogout = () => {
|
||||
@@ -163,19 +160,64 @@ const handleInvite = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const handleConvert = () => {
|
||||
const handleConvert = (type) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/convert/index',
|
||||
url: `/pages-sub/convert/index?type=${type}`,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSignIn = () => {}
|
||||
|
||||
const handleKefu = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/official-community/index',
|
||||
})
|
||||
}
|
||||
|
||||
const commonList = [
|
||||
{
|
||||
title: '投保记录',
|
||||
icon: CommonIcon5,
|
||||
handle: handleTeam,
|
||||
},
|
||||
{
|
||||
title: '资金明细',
|
||||
icon: CommonIcon6,
|
||||
handle: handleAsset,
|
||||
},
|
||||
{
|
||||
title: '申请理赔',
|
||||
icon: CommonIcon7,
|
||||
handle: handleKefu,
|
||||
},
|
||||
{
|
||||
title: '我的社区',
|
||||
icon: CommonIcon4,
|
||||
handle: handleInvite,
|
||||
},
|
||||
{
|
||||
title: '在线客服',
|
||||
icon: CommonIcon9,
|
||||
handle: handleKefu,
|
||||
},
|
||||
{
|
||||
title: 'APP下载',
|
||||
icon: CommonIcon3,
|
||||
handle: downloadAppAPI,
|
||||
},
|
||||
{
|
||||
title: '官方群聊',
|
||||
icon: CommonIcon1,
|
||||
handle: handleKefu,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 100rpx;
|
||||
background-image: url('@/static/images/bg.png');
|
||||
background-position: top;
|
||||
background-image: url('@/static/images/my/my-bg.jpg');
|
||||
background-position: top -40px center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user