352 lines
7.9 KiB
Vue
352 lines
7.9 KiB
Vue
<!-- 分销账户：展示基本统计信息 -->
|
||
<template>
|
||
<view class="new-main">
|
||
<view class="account-card">
|
||
<view class="new-ljsy">
|
||
<view class="l dd">
|
||
<!-- <view class="l-img">
|
||
<image src="https://zysc.fjptzykj.com:3000/shangcheng/7624fd0e447748a5f8f4532d89a416cf7f962644e588c99d7e8c8baeab7ee91f.png" class="img"></image>
|
||
</view> -->
|
||
<view class="l-text">
|
||
|
||
<view class="l-text-b">
|
||
累计收益（元）
|
||
</view>
|
||
<view class="l-text-t">
|
||
{{
|
||
fen2yuan(state.summary2.withdrawPrice || 0)
|
||
}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="l r" @click="sheep.$router.go('/pages/commission/team')">
|
||
<!-- <view class="l-img">
|
||
<image src="https://zysc.fjptzykj.com:3000/shangcheng/6575e409f7656efb2821b2159ca0a26916f83f037fc533f9f19aa141c412ee2c.png" class="img"></image>
|
||
</view> -->
|
||
<view class="l-text">
|
||
|
||
<view class="l-text-b">
|
||
我的团队
|
||
</view>
|
||
<view class="l-text-t">
|
||
{{
|
||
state.arr2.firstBrokerageUserCount + state.arr2.secondBrokerageUserCount ||
|
||
0
|
||
}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="account-card-box">
|
||
<!--<view class="ss-flex ss-row-between card-box-header">
|
||
<view class="ss-flex">
|
||
<button class="ss-reset-button look-btn ss-flex" @tap="state.showMoney = !state.showMoney">
|
||
<uni-icons :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'" color="#A57A55"
|
||
size="20" />
|
||
</button>
|
||
</view>
|
||
<view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')">
|
||
<view class="header-title ss-m-r-4">提现记录</view>
|
||
<text class="cicon-play-arrow" />
|
||
</view>
|
||
</view> -->
|
||
<!-- 提现金额 -->
|
||
<view class="new-cont">
|
||
<view class="ss-flex-1 ss-flex-col ">
|
||
<view class="item-title">可提现(元)</view>
|
||
<view class="item-detail">
|
||
{{ state.showMoney ? fen2yuan(state.brokerageInfo.brokeragePrice) : '***' }}
|
||
</view>
|
||
</view>
|
||
<!-- <view class="ss-flex-1 ss-flex-col ss-col-center new-btn"
|
||
@tap="sheep.$router.go('/pages/commission/withdraw')"
|
||
>
|
||
立即提现
|
||
</view> -->
|
||
<view class="sss" @tap="sheep.$router.go('/pages/commission/wallet')">
|
||
<view class="header-title ss-m-r-4">提现记录</view>
|
||
<image class="menu-icon-you" src="@/static/images/dayu.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 收益 -->
|
||
<view class="card-content ss-flex">
|
||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||
<view class="item-title">当前收益(元)</view>
|
||
<view class="item-detail">
|
||
{{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '***' }}
|
||
</view>
|
||
</view>
|
||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||
<view class="item-title">昨天收益(元)</view>
|
||
<view class="item-detail">
|
||
{{ state.showMoney ? fen2yuan(state.summary.yesterdayPrice || 0) : '***' }}
|
||
</view>
|
||
</view>
|
||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||
<view class="item-title">累计已提(元)</view>
|
||
<view class="item-detail">
|
||
{{ state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '***' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ss-flex-1 ss-flex-col ss-col-center new-btn"
|
||
@tap="sheep.$router.go('/pages/commission/withdraw')">
|
||
立即提现
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
</view>
|
||
<!-- 菜单栏 -->
|
||
<commission-menu />
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import commissionMenu from './commission-menu.vue';
|
||
import sheep from '@/sheep';
|
||
import {
|
||
computed,
|
||
reactive,
|
||
onMounted,
|
||
onBeforeMount
|
||
} from 'vue';
|
||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||
import {
|
||
fen2yuan
|
||
} from '@/sheep/hooks/useGoods';
|
||
|
||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||
|
||
const state = reactive({
|
||
showMoney: true,
|
||
summary: {},
|
||
brokerageInfo: {}, // 分销信息
|
||
arr: {},
|
||
summary2: {},
|
||
arr2: {}
|
||
});
|
||
|
||
async function getAgentInfo() {
|
||
const {
|
||
code,
|
||
data
|
||
} = await BrokerageApi.getBrokerageUserSummary();
|
||
if (code !== 0) {
|
||
return;
|
||
}
|
||
state.summary2 = data;
|
||
}
|
||
onBeforeMount(async () => {
|
||
getAgentInfo();
|
||
// 概要数据
|
||
let {
|
||
data
|
||
} = await BrokerageApi.getBrokerageUserSummary();
|
||
state.arr2 = data;
|
||
});
|
||
|
||
// 获得分销信息
|
||
async function getBrokerageUser() {
|
||
const {
|
||
data,
|
||
code
|
||
} = await BrokerageApi.getBrokerageUser();
|
||
if (code === 0) {
|
||
state.brokerageInfo = data;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
onMounted(async () => {
|
||
let {
|
||
code,
|
||
data
|
||
} = await BrokerageApi.getBrokerageUserSummary();
|
||
if (code === 0) {
|
||
state.summary = data || {};
|
||
}
|
||
});
|
||
onBeforeMount(() => {
|
||
getBrokerageUser();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.menu-icon-you {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
|
||
.new-btn {
|
||
width: 85%;
|
||
margin: 0 auto;
|
||
background: rgba(235, 70, 39);
|
||
padding: 12px 0;
|
||
border-radius: 20px;
|
||
color: white;
|
||
font-weight:700;
|
||
}
|
||
|
||
.new-ljsy {
|
||
// width: 100%;
|
||
// background:white;
|
||
padding: 8px 13px;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.l {
|
||
// background: rgba(254,244,237);
|
||
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/8e878e15d22f68e0187a953aeba31b80423b7e3fafa8e4aa9f237477ac0fd519.png') rgba(254,244,237,1);
|
||
width: 43%;
|
||
height: 85px;
|
||
border-radius: 12px;
|
||
background-size: cover;
|
||
// position:relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: left;
|
||
|
||
&.dd {
|
||
margin-right: 5%;
|
||
}
|
||
|
||
.l-text {
|
||
|
||
// position:absolute;
|
||
// top:50%;
|
||
// transform: translateY(-50%);
|
||
// left:70px;
|
||
.l-text-t {
|
||
font-size: 27px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.l-text-b {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.l-img {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-right: 10px;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.r {
|
||
|
||
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/b18f31e528ad0ab1026441faba07cb9e64723ffa511d103324fcd65fcaaf1557.png') rgba(254,244,237,1);
|
||
// background-size: cover;
|
||
.l-text {
|
||
// left:80px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.new-main {
|
||
width: 100%;
|
||
margin: 15px auto !important;
|
||
}
|
||
|
||
.account-card {
|
||
// width: 694rpx;
|
||
margin: 0 15px;
|
||
padding: 2rpx;
|
||
// background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
|
||
// border-radius: 12rpx 12rpx 0 0;
|
||
z-index: 3;
|
||
position: relative;
|
||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/cbbe23772e68ed5fc5c18d193f9f674d6e87ccddd422e0df6af6cab5dfea6c27.png') no-repeat;
|
||
background-size: 100%;
|
||
padding-bottom: 25px;
|
||
border-radius: 18px;
|
||
|
||
.account-card-box {
|
||
|
||
// background: #ffefd6;
|
||
.new-cont {
|
||
padding: 0 45rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 13px;
|
||
.sss{
|
||
display:flex;
|
||
height:20px;
|
||
align-items:center;
|
||
.header-title{
|
||
color:rgba(194,194,194);
|
||
}
|
||
}
|
||
.new-btn {
|
||
background: rgba(178, 102, 67);
|
||
border-radius: 22px;
|
||
padding: 8px 0;
|
||
font-size: 16px;
|
||
color: white;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.item-title {
|
||
color: rgba(142, 144, 145, 1);
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.item-detail {
|
||
color: rgba(231, 91, 79, 1);
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
.card-box-header {
|
||
padding: 0 45rpx;
|
||
height: 72rpx;
|
||
// box-shadow: 0px 2px 6px #f2debe;
|
||
|
||
.header-title {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #a17545;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.cicon-play-arrow {
|
||
color: #a17545;
|
||
font-size: 24rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.card-content {
|
||
height: 190rpx;
|
||
// background: #fdfae9;
|
||
|
||
.item-title {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: rgba(142, 144, 145, 1);
|
||
line-height: 30rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.item-detail {
|
||
font-size: 20px;
|
||
font-family: OPPOSANS;
|
||
font-weight: bold;
|
||
color: rgba(80, 80, 80, 1);
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |