zzak/x-forend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 前端重构

Browse Source
This commit is contained in:
anonymous
2025-01-07 18:04:40 +08:00
parent dbb57f07c3
commit 21d8f75f6a
43 changed files with 705 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/edit-password/index.vue
+1 -1
View File
@@ -112,7 +112,7 @@ onLoad(() => {
})
</script>
<style lang="scss">
<style lang="scss" scoped>
.login-container {
box-sizing: border-box;
min-height: 100vh;
src/pages/index/index.vue
+90 -68
View File
@@ -10,47 +10,45 @@
<template>
<view class="home-page">
<NavBar />
<image
class="mx-auto block w-345 h-170 mt-15 rounded-10 overflow-hidden"
src="@/static/images/home/main-bg.png"
mode="aspectFill"
/>
<view class="flex bg-#F5F9FF py-15 rounded-10 m-15 border-2 border-white border-solid">
<view class="flex-1 flex flex-col items-center" @click="handleIntroduction">
<image class="w-30 h-30" src="@/static/images/home/nav-1.png" mode="aspectFill" />
<text class="mt-8 text-14 text-#333">简介</text>
</view>
<!-- <view class="flex-1 flex flex-col items-center" @click="handleInvite">
<image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
<text class="mt-8 text-14 text-#333">抽奖转盘</text>
</view> -->
<view class="flex-1 flex flex-col items-center" @click="handleReward">
<image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
<text class="mt-8 text-14 text-#333">奖励制度</text>
</view>
<view class="flex-1 flex flex-col items-center" @click="handleDownload">
<image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
<text class="mt-8 text-14 text-#333">下载APP</text>
</view>
<view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
<image class="w-30 h-30" src="@/static/images/home/nav-3.png" mode="aspectFill" />
<text class="mt-8 text-14 text-#333">官方社群</text>
</view>
<view class="main-container w-345 h-185 mx-auto rounded-14 px-20 pt-70 text-12">
<view>姓名：***</view>
<view class="mt-15">社会xx号码：***</view>
<view class="mt-15">中国工商银行卡号：**************</view>
</view>
<view
class="mt-15 btn-gradient w-345 h-45 leading-45 mx-auto text-white rounded-full text-center"
@click="handleOpenAccount"
>
开通个人养老账号
</view>
<view class="flex bg-white py-8 px-15 rounded-10 m-15 items-center">
<view class="text-14 text-#333">系统公告</view>
<view class="flex-1">
<wd-notice-bar
color="#999999"
background-color="transparent"
:text="announcementList.map((item) => item.name)"
/>
<view class="bg-white pt-15 px-15 rounded-10 m-15">
<view class="flex justify-between items-center">
<view class="text-14 text-#333">最新时讯</view>
<!-- <view class="text-12 text-#999" @click="handleNews">查看全部</view> -->
</view>
<swiper
indicator-active-color="#3B81F3"
indicator-color="rgba(0,0,0,0.1)"
indicator-dots
autoplay
circular
class="h-240 mt-10"
>
<swiper-item v-for="item in newsList" :key="item.id" @click="handleNewsDetail(item.id)">
<image class="w-full h-160" :src="item.image" mode="aspectFill" />
<view class="mt-10 flex-1 flex flex-col justify-between">
<view text-14>{{ item.name }}</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="bg-white py-15 px-15 rounded-10 m-15">
<view class="text-14 text-#333">热点新闻</view>
<view class="flex justify-between items-center">
<view class="text-14 text-#333">热点新闻</view>
<view class="text-12 text-#999" @click="handleHotNews">查看全部</view>
</view>
<view
class="flex mt-15"
v-for="item in newsList"
@@ -64,14 +62,28 @@
</view>
</view>
</view>
<wd-popup v-model="showRealName" custom-style="border-radius:32rpx;">
<view class="p-15 w-345">
<text class="custom-txt">实名立即送5000股马尔代夫股权</text>
<wd-popup :lockScroll="false" v-model="showNotice" custom-style="border-radius:40rpx;">
<view class="px-30 py-30 w-330 h-457 notice-container rounded-20 flex flex-col">
<view class="text-18 font-bold py-15 text-center">系统公告</view>
<view class="py-15 flex-1">
<view
v-for="(item, index) in announcementList"
:key="item.id"
class="flex border-b-1 border-b-gray-300 border-b-solid py-15"
>
<text class="whitespace-nowrap text-14 font-bold text-gradient">
公告{{ ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][index] }}：
</text>
<text class="text-14 text-#333 flex-1">
{{ item.content }}
</text>
</view>
</view>
<view
@click="handleRealName"
class="mt-15 btn-gradient rounded-full text-center text-14 text-white py-15 mt-15"
@click="showNotice = false"
class="btn-gradient rounded-full text-center text-14 text-white py-8 mt-15"
>
去认证
确定
</view>
</view>
</wd-popup>
@@ -91,11 +103,6 @@ const { list: newsList } = useListPageRequest((params) =>
getIntroductionAPI({ type: 1, ...params }),
)
// 系统公告
const { list: announcementList } = useListPageRequest((params) =>
getIntroductionAPI({ type: 2, ...params }),
)
const handleIntroduction = () => {
uni.navigateTo({
url: '/pages-sub/introduction/index',
@@ -124,38 +131,53 @@ const handleDownload = () => {
downloadAppAPI()
}
const handleReward = () => {
showModal(
`1.注册立即送5000股马尔代夫股权；\n
2.每股马尔代夫股权价值500元；\n
3.每邀请一人可以获得20股马尔代夫股权`,
{
title: '奖励制度',
confirmText: '我知道了',
},
)
}
const showNotice = ref(false)
const showRealName = ref(false)
const handleRealName = () => {
const handleNews = () => {
uni.navigateTo({
url: '/pages-sub/realname/index',
url: '/pages-sub/news/index',
})
}
onLoad(async () => {
const res = await getRealNameAuthAPI()
if (!res.data) {
showRealName.value = true
}
})
const handleHotNews = () => {
uni.navigateTo({
url: '/pages-sub/hot-news/index',
})
}
// 系统公告
const { list: announcementList } = useListPageRequest((params) =>
getIntroductionAPI({ type: 2, ...params }),
)
watch(
() => announcementList.value.length,
(newVal) => {
if (newVal > 0) {
showNotice.value = true
}
},
)
const handleOpenAccount = () => {
showModal('开通个人养老账户时，需邀请一名用户')
}
</script>
<style>
<style scoped>
.home-page {
min-height: 100vh;
padding-bottom: 100rpx;
background-image: url('@/static/images/bg.png');
background-image: url('@/static/images/home/bg.jpg');
background-position: top;
background-size: cover;
}
.main-container {
background-image: url('@/static/images/home/main-bg.jpg');
background-position: top;
background-size: cover;
}
.notice-container {
background-image: url('@/static/images/home/notice-bg.jpg');
background-position: top;
background-size: cover;
}
src/pages/invest/index.vue
+74 -46
View File
@@ -3,51 +3,96 @@
{
style: {
navigationStyle: 'custom',
navigationBarTitleText: '投资理财',
navigationBarTitleText: '理财',
},
}
</route>
<template>
<view class="invest-page">
<NavBar>
<template #right>
<view @click="onGoInvestDetail" class="text-14 text-#486CCF">投资明细</view>
</template>
</NavBar>
<view class="flex mt-30 flex-col mx-15 rounded-10 px-40 py-32 main-content">
<view class="text-14 text-#6784C7">我的投资金</view>
<view class="text-35 leading-35 mt-10 text-#BE7143 font-bold">
{{ userStore.userInfo?.money }}
<NavBar titleColor="#333" />
<view class="py-20 flex flex-col mx-15 rounded-20 main-content text-white">
<view class="text-14 pl-15">保险概览</view>
<view class="flex mt-30">
<view class="flex-1 text-center">
<view class="text-14">全部</view>
<view class="text-16 font-bold mt-15">2份</view>
</view>
<view class="flex-1 text-center">
<view class="text-14">养老</view>
<view class="text-16 font-bold mt-15">1份</view>
</view>
<view class="flex-1 text-center">
<view class="text-14">医疗</view>
<view class="text-16 font-bold mt-15">未保障</view>
</view>
</view>
</view>
<view class="mt-100">
<view class="flex p-15 mt-15">
<view class="px-24 py-4 rounded-full btn-gradient text-white text-14">养老</view>
<view class="ml-15 px-24 py-4 rounded-full bg-#DEEBFF text-#3B81F3 text-14">医疗</view>
</view>
<view>
<view
v-for="item in investmentList"
:key="item.id"
class="invest-item relative flex flex-col items-center pt-15"
class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
>
<view class="text-15 text-#3F88F6">{{ item.name }}</view>
<view class="flex w-full mt-15">
<view class="flex-1 text-center">
<view class="text-22 text-#333 font-bold">{{ item.money }}</view>
<view class="text-12 mt-4 text-blue-red">投资金额</view>
<view class="flex">
<image
class="rounded-10 w-100 h-100"
mode="aspectFill"
src="https://picsum.photos/100/100"
/>
<view class="flex-1 ml-15">
<view class="text-15 text-#333 font-bold">{{ item.name }}</view>
<view class="flex items-center mt-10">
<view class="px-14 py-2 text-12 text-#D6A165 rounded-2 bg-#FFEBD4">商业型</view>
<view class="ml-8 px-14 py-2 text-12 text-#3B81F3 rounded-2 bg-#D4E8FF">低风险</view>
</view>
<view class="text-12 mt-15 text-#999">
此处是产品简介，此处是产品简介，此处是产品简介，此处是产
</view>
</view>
</view>
<view class="flex items-center mt-15">
<view class="flex-1 text-center">
<view class="text-22 text-#FF3B30 font-bold">{{ item.dividend }}</view>
<view class="text-12 mt-4 text-blue-red">每日分红</view>
<view class="text-15 text-#FF3B30">1.99(%)</view>
<view class="text-14 text-#999">日收益</view>
</view>
<view class="text-#D9D9D9">|</view>
<view class="flex-1 text-center">
<view class="text-15 text-#FF3B30">365(天)</view>
<view class="text-14 text-#999">周期</view>
</view>
</view>
<view class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15">
购买
</view>
</view>
<view class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15">
<view class="flex">
<image
class="rounded-10 w-100 h-100"
mode="aspectFill"
src="https://picsum.photos/100/100"
/>
<view class="flex-1 ml-15">
<view class="text-15 text-#333 font-bold">好医保·长期医保(旗舰版)</view>
<view class="text-12 mt-15 text-#999">
此处是产品简介，此处是产品简介，此处是产品简介，此处是产
</view>
</view>
</view>
<view
class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-blue-red"
@click="onInvest(item)"
class="text-center text-15 text-white rounded-full py-8 border-#3B81F3 border-1 border-solid mt-15"
>
立即投资
<text class="text-gradient">查看权益</text>
</view>
<view
class="text-center px-16 absolute bottom-13 right-33 text-12 text-#fff rounded-br-10 rounded-tl-10 py-4 bg-blue-red"
>
{{ item.label }}
<view class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15">
我要投保
</view>
</view>
</view>
@@ -112,31 +157,14 @@ const onInvest = mergeStep(async (item: any) => {
})
</script>
<style>
<style scoped>
.invest-page {
min-height: 100vh;
padding-bottom: 100px;
background-color: #ebbf92;
background-image: url('@/static/images/invest/bg.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top -80rpx center;
background-size: 100%;
}
.invest-item {
width: 690rpx;
height: 352rpx;
margin: 0 auto 30rpx;
background-image: url('@/static/images/invest/item-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background: linear-gradient(180deg, #f4fbff 0%, #f7f7f7 100%);
}
.main-content {
background-image: url('@/static/images/invest/main-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background: linear-gradient(90deg, #71a4f8 0%, #3b81f3 103.83%);
}
.bg-blue-red {
background-image: linear-gradient(90.02deg, #8bb9ff 0.02%, #be4343 100.27%);
src/pages/invite/index.vue
+119 -24
View File
@@ -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>
src/pages/login/index.vue
+17 -5
View File
@@ -16,25 +16,37 @@
<view class="pt-45">
<view class="mx-15 px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
<view class="flex items-center py-15">
<image class="w-24 h-24" src="@/static/images/login/phone.png" mode="aspectFit" />
<view class="text-gradient">手机号</view>
<input
type="text"
v-model="formData.account"
placeholder-class="text-#889BC6"
class="text-right flex-1 text-14"
placeholder="请输入用户名"
placeholder="请输入手机号"
/>
</view>
<view class="flex items-center py-15">
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
<view class="text-gradient">密码</view>
<input
placeholder-class="text-#889BC6"
type="password"
v-model="formData.password"
class="text-right flex-1 text-14"
placeholder="请输入登录密码"
placeholder="请输入密码"
/>
</view>
<view class="flex items-center py-15">
<view class="text-gradient">验证码</view>
<input
v-model="formData.invitecode"
placeholder-class="text-#889BC6"
type="text"
class="text-right flex-1 text-14"
placeholder="请输入验证码"
/>
<image class="w-60 h-24 ml-15 bg-gray-400" mode="aspectFit" />
</view>
</view>
<!-- <view class="ml-auto mr-0 w-fit text-gradient text-14 p-15" @click="handleEditPassword">
忘记密码
@@ -110,7 +122,7 @@ onLoad(() => {
})
</script>
<style lang="scss">
<style lang="scss" scoped>
.login-container {
box-sizing: border-box;
min-height: 100vh;
src/pages/my/index.vue
+124 -82
View File
@@ -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>
src/pages/register/index.vue
+9 -28
View File
@@ -101,7 +101,7 @@ onLoad(async (options) => {
<view class="pt-45">
<view class="mx-15 px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
<view class="flex items-center py-15">
<image class="w-24 h-24" src="@/static/images/login/phone.png" mode="aspectFit" />
<view class="text-gradient">手机号</view>
<input
v-model="form.username"
type="text"
@@ -111,7 +111,7 @@ onLoad(async (options) => {
/>
</view>
<view class="flex items-center py-15">
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
<view class="text-gradient">登录密码</view>
<input
v-model="form.password"
placeholder-class="text-#889BC6"
@@ -121,37 +121,18 @@ onLoad(async (options) => {
/>
</view>
<view class="flex items-center py-15">
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
<view class="text-gradient">验证码</view>
<input
v-model="form.retpassword"
v-model="form.invitecode"
placeholder-class="text-#889BC6"
type="password"
type="text"
class="text-right flex-1 text-14"
placeholder="请再次输入登录密码"
placeholder="请输入验证码"
/>
<image class="w-60 h-24 ml-15 bg-gray-400" mode="aspectFit" />
</view>
<view class="flex items-center py-15">
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
<input
v-model="form.tpassword"
placeholder-class="text-#889BC6"
type="password"
class="text-right flex-1 text-14"
placeholder="请输入支付密码"
/>
</view>
<view class="flex items-center py-15">
<image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
<input
v-model="form.rettpassword"
placeholder-class="text-#889BC6"
type="password"
class="text-right flex-1 text-14"
placeholder="请再次输入支付密码"
/>
</view>
<view class="flex items-center py-15">
<image class="w-24 h-24" src="@/static/images/login/invite.png" mode="aspectFit" />
<view class="text-gradient">邀请码</view>
<input
v-model="form.invitecode"
placeholder-class="text-#889BC6"
@@ -171,7 +152,7 @@ onLoad(async (options) => {
</view>
</template>
<style lang="scss">
<style lang="scss" scoped>
.login-container {
box-sizing: border-box;
min-height: 100vh;