feat: 初始化
This commit is contained in:
George
73
pages/partner/components/overview/index.scss
Normal file
73
pages/partner/components/overview/index.scss
Normal file
@ -0,0 +1,73 @@
|
||||
.overviewCard {
|
||||
height: 187px;
|
||||
padding: 20px 28px 15px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.1);
|
||||
.field {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #0f3675;
|
||||
margin-top: 10px;
|
||||
&.currentCommission {
|
||||
margin-top: 0px;
|
||||
font-size: 16px;
|
||||
.valueWrapper {
|
||||
font-size: 14px;
|
||||
.value {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.overviewCardBtns {
|
||||
display: flex;
|
||||
column-gap: 12px;
|
||||
margin-top: 20px;
|
||||
.btn {
|
||||
height: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
margin-top: 10px;
|
||||
.datePreset {
|
||||
margin-bottom: 10px;
|
||||
::v-deep .checklist-group .checklist-box .radio__inner {
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .checklist-group .checklist-box .radio__inner .radio__inner-icon {
|
||||
border-radius: 2px;
|
||||
}
|
||||
::v-deep .checklist-group .checklist-box.is--default.is-checked .radio__inner {
|
||||
border-color: #e5e5e5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.overviewContent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
row-gap: 16px;
|
||||
column-gap: 11px;
|
||||
margin-top: 20px;
|
||||
.overviewItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
height: 84px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.1);
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.value {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
140
pages/partner/components/overview/index.vue
Normal file
140
pages/partner/components/overview/index.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view class="overviewCard">
|
||||
<view class="field currentCommission">
|
||||
<text>{{ $t('partner.currentCommission') }}</text>
|
||||
<view class="valueWrapper">
|
||||
<text class="value">{{ ibFund.amount ?? '-' }}</text>
|
||||
<text>{{ ' USD' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<text>{{ $t('partner.statCommission') }}</text>
|
||||
<text>{{ ibFund.totalAmount ?? '-' }} USD</text>
|
||||
</view>
|
||||
<view class="field">
|
||||
<text>{{ $t('partner.withdrawn') }}</text>
|
||||
<text>{{ ibFund.fundOut ?? '-' }} USD</text>
|
||||
</view>
|
||||
<view class="field">
|
||||
<text>{{ $t('partner.transferred') }}</text>
|
||||
<text>{{ ibFund.fundTransfer ?? '-' }} USD</text>
|
||||
</view>
|
||||
<view class="overviewCardBtns">
|
||||
<view class="btn primaryButton" @click="navigateTo('/pages/capital/ibWithdraw/index')">
|
||||
{{ $t('home.goldout') }}
|
||||
</view>
|
||||
<view class="btn secondaryButton" @click="navigateTo('/pages/capital/ibTransfer/index')">
|
||||
{{ $t('home.transfer') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter">
|
||||
<uni-data-checkbox v-model="daterangePreset" :localdata="daterangePresets" @change="handlePresetChange" selectedColor="#29BBE4" class="datePreset"></uni-data-checkbox>
|
||||
<uni-datetime-picker type="daterange" v-model="timeRange" @change="handleDaterangeChange" />
|
||||
</view>
|
||||
<view class="overviewContent">
|
||||
<view v-for="item in overviewList" :key="item.label" class="overviewItem" @click="() => showChart(item)">
|
||||
<view class="label">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
<view class="value">
|
||||
{{ overviewData[item.dataIndex]?.toFixed(2) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useUserStore } from '@/stores/user';
|
||||
import { getPhaseSummarizing } from '@/services/partner/overview.ts';
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
name: 'Overview',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ibFund: {
|
||||
totalAmount: 123.123,
|
||||
amount: 290.123,
|
||||
fundOut: 123.0,
|
||||
fundTransfer: 0.0
|
||||
},
|
||||
overviewList: [
|
||||
{ label: this.$t('partner.overview.statPL'), dataIndex: 'my_yk', type: 8, clickable: true },
|
||||
{ label: this.$t('partner.overview.statEquity'), dataIndex: 'jz', type: false, clickable: false },
|
||||
{ label: this.$t('partner.overview.IBCommission'), dataIndex: 'yj', type: 2, clickable: true },
|
||||
{ label: this.$t('partner.overview.statDeposit'), dataIndex: 'rj', type: 3, clickable: true },
|
||||
{ label: this.$t('partner.overview.statWithdraw'), dataIndex: 'mt_cj', type: 4, clickable: true },
|
||||
{ label: this.$t('partner.overview.statIBWithdraw'), dataIndex: 'yj_cj', type: 9, clickable: true },
|
||||
{ label: this.$t('partner.overview.newClient'), dataIndex: 'zc', type: 5, clickable: true },
|
||||
{ label: this.$t('partner.overview.volume'), dataIndex: 'my_jyl', type: 6, clickable: true },
|
||||
{ label: this.$t('partner.overview.volume_cent'), dataIndex: 'mf_jyl', type: 7, clickable: true },
|
||||
{ label: this.$t('partner.overview.statPL_cent'), dataIndex: 'mf_yk', type: 1, clickable: true }
|
||||
],
|
||||
overviewData: {},
|
||||
timeRange: undefined,
|
||||
daterangePreset: undefined,
|
||||
daterangePresets: [
|
||||
{ text: this.$t('common.yesterday'), value: 1 },
|
||||
{ text: this.$t('common.threeDays'), value: 2 },
|
||||
{ text: this.$t('common.7Days'), value: 6 },
|
||||
{ text: this.$t('common.30Days'), value: 29 }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async getOverviewData() {
|
||||
let params = {};
|
||||
if (this.timeRange) {
|
||||
params.time_start = this.timeRange[0];
|
||||
params.time_end = this.timeRange[1];
|
||||
}
|
||||
const res = await getPhaseSummarizing(params);
|
||||
if (res && res.code === 0) {
|
||||
this.overviewData = res.data;
|
||||
}
|
||||
},
|
||||
handleDaterangeChange() {
|
||||
this.daterangePreset = undefined;
|
||||
this.getOverviewData();
|
||||
},
|
||||
handlePresetChange(e) {
|
||||
this.daterangePreset = e.detail.value;
|
||||
this.timeRange = [dayjs().subtract(Number(e.detail.value), 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
|
||||
this.getOverviewData();
|
||||
},
|
||||
showChart(overview) {
|
||||
if (!overview.clickable) return;
|
||||
this.navigateTo('/pages/partner/overviewChart/index', {
|
||||
label: overview.label,
|
||||
type: overview.type,
|
||||
time_start: this.timeRange[0],
|
||||
time_end: this.timeRange[1]
|
||||
});
|
||||
},
|
||||
navigateTo(target, params) {
|
||||
if (target) {
|
||||
uni.navigateTo({
|
||||
url: `${target}${params ? `?params=${JSON.stringify(params)}` : ''}`
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const userStore = useUserStore();
|
||||
this.ibFund = userStore.ibFund;
|
||||
this.handlePresetChange({ detail: { value: 6 } });
|
||||
this.getOverviewData();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user