162 lines
6.5 KiB
Vue
162 lines
6.5 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"needLogin": true,
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="home-bg">
|
||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||
<view>
|
||
<navbar custom-class='!bg-[transparent]'></navbar>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="" :style="{ paddingTop: navbarHeight + 'px' }">
|
||
<!-- 账号昵称显示 -->
|
||
<view class="ml-60rpx flex items-center">
|
||
<view>
|
||
<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
|
||
</view>
|
||
<view class="flex-1 ml-22rpx flex justify-between items-center">
|
||
<view @click="My.handleToProfile">
|
||
<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">昵称名称</view>
|
||
<view class="flex justify-center items-center vip-bg mt-10rpx">
|
||
<!-- 会员显示图标 -->
|
||
<view class="flex items-center mr-12rpx">
|
||
<wd-img width="36rpx" height="36rpx" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`" round></wd-img>
|
||
</view>
|
||
<view class="text-24rpx text-[#675649] leading-34rpx flex items-center">茶址合伙人</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提醒 -->
|
||
<view class="bg-[#FFF8F8] rounded-6rpx px-30rpx py-12rpx mx-30rpx mt-16rpx flex items-center">
|
||
<view class="flex items-center mr-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tips.png`" mode="aspectFill" round />
|
||
</view>
|
||
|
||
<view class="font-400 text-26rpx leading-36rpx text-#606266">
|
||
分佣提成每月月初提现，3日内到账
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 余额显示 -->
|
||
<view class="mt-20rpx relative">
|
||
<wd-img width="750rpx" height="360rpx" :src="`${OSS}images/parten/parten_image2.png`" mode="aspectFill" />
|
||
|
||
<view class="absolute top-12rpx left-30rpx right-0 w-full">
|
||
<view class="mt-14rpx flex justify-end mr-100rpx mt-18rpx text-#fff font-400 text-32rpx leading-44rpx">
|
||
<navigator url="/bundle/parten/pages/withdraw/withdraw" hover-class="none" open-type="navigate">
|
||
提现
|
||
</navigator>
|
||
</view>
|
||
<view class="flex items-center ml-72rpx">
|
||
<view class="mr-68rpx">我的余额</view>
|
||
<view>
|
||
<price-format color="#251F1F" :first-size="40" :second-size="40" :subscript-size="26" :price="100000"></price-format>
|
||
</view>
|
||
</view>
|
||
<view class="flex items-center justify-between ml-40rpx mr-70rpx mt-40rpx text-#FDD6B7">
|
||
<view class="">
|
||
<view class="font-400 text-26rpx leading-36rpx">本月预计收益（元）</view>
|
||
<view class="font-400 text-36rpx leading-50rpx">5000.00</view>
|
||
</view>
|
||
<view class="w-2rpx h-100rpx border-r border-solid-r border-r-#FFD8B8 text-#FDD6B7 font-400 text-36rpx leading-50rpx"></view>
|
||
<view class="">
|
||
<view class="font-400 text-26rpx leading-36rpx">历史总收益（元）</view>
|
||
<view class="font-400 text-36rpx leading-50rpx">5000.00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能列表 -->
|
||
<view class="mx-30rpx">
|
||
<view class="bg-white rounded-16rpx px-30rpx py-28rpx flex justify-between items-center" @click="My.handleToMyBank">
|
||
<view class="flex items-center">
|
||
<view class="flex items-center mr-28rpx">
|
||
<wd-img width="44rpx" height="44rpx" mode="aspectFill" :src="`${OSS}icon/icon_bank_card.png`"></wd-img>
|
||
</view>
|
||
<view class="font-400 text-28rpx leading-40rpx text-#303133">
|
||
管理我的银行卡
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<wd-icon name='arrow-right' size="22rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-white rounded-16rpx px-30rpx py-28rpx flex justify-between items-center mt-20rpx" @click="My.handleToFundRecord">
|
||
<view class="flex items-center">
|
||
<view class="flex items-center mr-28rpx">
|
||
<wd-img width="44rpx" height="44rpx" mode="aspectFill" :src="`${OSS}icon/icon_wallet.png`"></wd-img>
|
||
</view>
|
||
<view class="font-400 text-28rpx leading-40rpx text-#303133">
|
||
资金记录
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<wd-icon name='arrow-right' size="22rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<tabbar tab="my"></tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Tabbar from '@/bundle/parten/components/Tabbar.vue'
|
||
|
||
const OSS = inject('OSS')
|
||
const navbarHeight = inject('navbarHeight')
|
||
|
||
const My = {
|
||
handleToProfile: () => {
|
||
uni.navigateTo({
|
||
url: '/pages/profile/profile'
|
||
})
|
||
},
|
||
|
||
handleToMyBank: () => {
|
||
uni.navigateTo({
|
||
url: '/bundle/parten/pages/bank-card/list'
|
||
})
|
||
},
|
||
|
||
handleToFundRecord: () => {
|
||
uni.navigateTo({
|
||
url: '/bundle/parten/pages/fund-record/fund-record'
|
||
})
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page, home-bg{
|
||
background: $cz-page-background url(#{$OSS}images/parten/parten_image1.png) 0 0 no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.vip-bg {
|
||
width: 200rpx;
|
||
height: 46rpx;
|
||
background: linear-gradient( 315deg, #F2E6BC 0%, #FFF8E2 100%);
|
||
box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(0,0,0,0.04);
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
|
||
.balance-bg {
|
||
background: $cz-page-background url(#{$OSS}images/parten/parten_image2.png) 0 0 no-repeat;
|
||
background-size: 100% auto;
|
||
}
|
||
</style>
|