sadjv3_user/pages/my/applyDistributor/myDistributor.vue

317 lines
6.9 KiB
Vue
Raw Normal View History

2024-08-03 16:29:50 +08:00
<template>
<view class="content">
<view class="content-top">
<view class="bgimg">
<view class="bgimg-top">
<view class="bgimg-top-tou">
<u-avatar :src="avatar" size="120" style=" border: 2px solid #F2F2F2;"></u-avatar>
</view>
<view class="bgimg-top-view">
<view class="bgimg-top-money">
<span></span>
<span>平台</span>
<span style="color: #fff;">当前身份一级分销员</span>
</view>
</view>
</view>
<view class="mian">
<view class="mian-title" style="position: relative;">
<view class="mian-title-top">
<span class="money">0.00</span>
<span class="list-title">可提现()</span>
</view>
<view class="mian-title-top">
<span class="money">0.00</span>
<span class="list-title">未入账()</span>
</view>
<image class="bangzhu" src="../../../static/bangzhu.png" mode=""></image>
</view>
<view class="mian-list">
<view class="list-view">
<view class="money">0.00</view>
<view class="list-title">累计佣金()不含手续费</view>
</view>
<view class="list-view">
<view class="money">0.00</view>
<view class="list-title">已提现()</view>
</view>
<view class="list-view">
<view class="money">0.00</view>
2024-08-03 17:10:20 +08:00
<view class="list-title">总成交金额()</view>
2024-08-03 16:29:50 +08:00
</view>
</view>
<view class="detail-btn" @click="cashMoney">
2024-08-03 17:10:20 +08:00
我要提现</view>
2024-08-03 16:29:50 +08:00
</view>
</view>
<view class="mian-bottom">
<view class="mian-bottom-list">
<image class="mian-bottom-img" src="../../../static/navigate.png" mode=""></image>
2024-08-03 17:10:20 +08:00
<span>我的收益</span>
2024-08-03 16:29:50 +08:00
</view>
<view class="mian-bottom-list">
<image class="mian-bottom-img" src="../../../static/navigate.png" mode=""></image>
2024-08-03 17:10:20 +08:00
<span>我的邀请</span>
2024-08-03 16:29:50 +08:00
</view>
<view class="mian-bottom-list">
<image class="mian-bottom-img" src="../../../static/navigate.png" mode=""></image>
<span>提现记录</span>
</view>
</view>
<view class="mian-foot">
<view class="mian-foot-top">
<view class="mian-foot-top-list">
<span class="list-title">今日成交订单</span>
<span class="money">0</span>
</view>
<view class="mian-foot-top-list">
<span class="list-title">累计成交订单</span>
<span class="money">0</span>
</view>
</view>
<view class="mian-foot-top" style="margin-top: 10px;">
<view class="mian-foot-top-list">
2024-08-03 17:10:20 +08:00
<span class="list-title">今日邀请粉丝</span>
2024-08-03 16:29:50 +08:00
<span class="money">0</span>
</view>
<view class="mian-foot-top-list">
2024-08-03 17:10:20 +08:00
<span class="list-title">累计邀请粉丝</span>
2024-08-03 16:29:50 +08:00
<span class="money">0</span>
</view>
</view>
</view>
<view class="foot-img">
2024-08-03 17:10:20 +08:00
<image src="../../../static/fenxiaoyuan.png" mode=""></image>
2024-08-03 16:29:50 +08:00
</view>
2024-08-03 17:10:20 +08:00
2024-08-03 16:29:50 +08:00
</view>
</view>
</template>
<script>
export default {
data() {
return {
avatar: '',
}
},
onLoad() {
this.avatar = uni.getStorageSync('avatar')
},
}
</script>
<style scoped>
.mian-foot-top-list span:nth-child(1){
margin-bottom: 5px;
}
.mian-foot-top-list{
display: flex;
flex-direction: column;
}
.mian-foot-top{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.mian-foot{
width: 93%;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.bangzhu{
width: 15px;
height: 15px;
position: absolute;
right: 0;
margin-right: -20px;
top: 0;
margin-top: -10px;
}
.mian-title-top{
display: flex;
flex-direction: column;
align-items: center;
}
.foot-img image{
width:100%;
height: 100%;
}
.foot-img{
width: 93%;
height: 70px;
margin: 0 auto;
margin-top: 30px;
}
.mian-bottom-list span{
color: #333;
font-size: 14px;
font-weight: bold;
margin-top: 5px;
}
.mian-bottom-list{
width:30%;
display: flex;
flex-direction: column;
align-items: center;
}
.mian-bottom-img{
height: 40px;
width: 40px;
flex: 0 0 40px;
background-color: transparent;
border-radius: 500px;
}
.mian-bottom{
width: 93%;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 185px;
}
.mian-top-title{
color: #333;
font-size: 16px;
font-weight: bold;
}
.money{
color: #333;
font-size: 15px;
font-weight: bold;
}
.list-title{
margin-top: 5px;
font-size: 12px;
color: #B8B8B8;
font-weight: 400;
}
.list-view{
width:30%;
display: flex;
flex-direction: column;
align-items: center;
}
.mian-list{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
}
.mian-title{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
margin-bottom: 15px;
}
.mian{
width: 100%;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
padding: 15px 26px;
display: flex;
flex-direction: column;
margin-top: 15px;
}
.detail-btn{
display: inline-block;
width: 92%;
text-align: center;
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
height: 40px;
border-radius: 28px;
color: #ffffff;
line-height: 40px;
margin: 0 auto;
margin-top: 4px;
font-size: 34rpx;
}
.content-top{
width: 100%;
height: 100%;
}
.content{
width: 100%;
height: 100vh;
padding-bottom: 10rpx;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f7f7f7), url('../../../static/background-img.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
page {
background-color: #F7F7F7;
}
.bgimg-top-money span:nth-child(1){
font-weight: bold;
font-size: 43rpx;
color: #FFFFFF;
}
.bgimg-top-money span:nth-child(2){
font-weight: 400;
font-size: 25rpx;
color: #FFFFFF;
margin-top:4px;
}
.bgimg-top-money{
display: flex;
flex-direction: column;
margin-left: 10px;
}
.bgimg-top-view{
width: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bgimg-top{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 15rpx;
}
.bgimg {
background: url(../../../static/wallet/reduce.png);
background-size: cover;
width: 100%;
height: 150px;
position: relative;
margin: 0px auto 10px auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 15px;
}
.mingxi{
width: 140rpx;
height: 42rpx;
line-height: 42rpx;
text-align: center;
background: #F5F7FB;
border-radius: 21rpx;
font-weight: bold;
font-size: 22rpx;
color: #333333;
}
</style>