HTFX-CRM-APP/pages/partner/components/statReport/index.vue

<template>
	<view class="statDataWrapper">
		<view class="statData">
			<view v-for="item in statDataList" :key="item.dataIndex" class="statDataItem">
				<view class="title">
					<view class="label">{{ item.title }}</view>
					<view class="value">
						{{ statData[item.dataIndex] ?? '-' }}
						<text class="unit">USD</text>
						<image :src="item.bgSrc" mode="aspectFit" class="bgIcon"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	<ReportTable
		:title="reportList[currentReport].title"
		:url="reportList[currentReport].url"
		:defaultDateRangeKey="reportList[currentReport].defaultDateRangeKey ?? 'apply_time'"
		:timeRangeStart="reportList[currentReport].timeRangeStart ?? 'apply_time_start'"
		:timeRangeEnd="reportList[currentReport].timeRangeEnd ?? 'apply_time_end'"
		:visible="visible"
	>
		<template v-slot="{ showSearchDialog }">
			<view class="filterWrapper">
				<uni-data-select
					:localdata="reportOptions"
					@change="handleReportSelectorChange"
					:clear="false"
					v-model="currentReport"
					:placeholder="$t('form.pleaseSelect')"
					:emptyTips="$t('common.empty')"
					class="filterSelector"
				></uni-data-select>
				<view class="filterButton" @click="showSearchDialog">
					<image src="/static/filter.png" alt="" style="width: 12px; height: 13px" />
					<text class="filterText">{{ $t('common.filter') }}</text>
					<uni-icons type="right" size="20" color="#fff"></uni-icons>
				</view>
			</view>
		</template>
	</ReportTable>
</template>

<script>
import { getStatReportInfo } from '@/services/partner/statReport';
import ReportTable from '@/pages/components/reportTable/index.vue';
export default {
	name: 'StatReport',
	props: {
		visible: {
			type: Boolean,
			required: true,
			default: false
		}
	},
	data() {
		return {
			currentReport: 'deposit',
			statData: {},
			statDataList: [
				// { title: this.$t('partner.statReport.statCommission'), dataIndex: 'yj', bgSrc: '/static/partner/statCommission.svg' },
				{ title: this.$t('partner.statReport.statDeposit'), dataIndex: 'rj', bgSrc: '/static/partner/statDeposit.svg' },
				{ title: this.$t('partner.statReport.statWithdrawal'), dataIndex: 'mt_cj', bgSrc: '/static/partner/statWithdrawal.svg' },
				{ title: this.$t('partner.statReport.statTransaction'), dataIndex: 'jyl', bgSrc: '/static/partner/statTransaction.svg' },
				{ title: this.$t('partner.statReport.currentPL'), dataIndex: 'profit', bgSrc: '/static/partner/currentPL.svg' }
			],
			reportList: {
				// 入金报表
				deposit: {
					title: this.$t('report.goldIn'),
					url: '/app/report/getReport16'
				},
				// 出金报表
				withdrawal: {
					title: this.$t('report.goldOut'),
					url: '/app/report/getReport17'
				},
				// 挂单报表
				pendingTrading: {
					title: this.$t('report.pendingOrder'),
					url: '/app/report/getReport14'
				},
				// 交易报表
				trading: {
					title: this.$t('report.trading'),
					url: '/app/report/getReport20'
				},
				// 持仓报表
				openPosition: {
					title: this.$t('report.openPosition'),
					url: '/app/report/getReport22',
					defaultDateRangeKey: 'close_time'
				},
				// 账户综合报表
				consolidatedAccount: {
					title: this.$t('report.consolidatedAccount'),
					url: '/app/report/getReport21',
					defaultDateRangeKey: 'close',
					timeRangeStart: 'close_start',
					timeRangeEnd: 'close_end'
				},
				// 资金报表
				fund: {
					title: this.$t('report.fund'),
					url: '/app/report/getReport24',
					defaultDateRangeKey: 'close_time',
					timeRangeStart: 'close_time_start',
					timeRangeEnd: 'close_time_end'
				},
				// 佣金钱包报表
				rebateWallet: {
					title: this.$t('report.rebateWallet'),
					url: '/app/report/getReport28',
					defaultDateRangeKey: 'create_time',
					timeRangeStart: 'create_time_start',
					timeRangeEnd: 'create_time_end'
				},
				// 待定钱包报表
				pendingWallet: {
					title: this.$t('report.pendingWallet'),
					url: '/app/report/getReport27',
					defaultDateRangeKey: 'create_time',
					timeRangeStart: 'create_time_start',
					timeRangeEnd: 'create_time_end'
				},
				// 交易返佣报表
				tradeRebate: {
					title: this.$t('report.tradeRebate'),
					url: '/app/report/getReport26',
					defaultDateRangeKey: 'close_time'
				},
				// 业绩统计报表
				performanceStatistics: {
					title: this.$t('report.performanceStatistics'),
					url: '/app/report/getReport81',
				},
				// MT账户统计
				mtAccountStatistics: {
					title: this.$t('report.mtAccountStatistics'),
					url: '/app/report/getReport40',
					defaultDateRangeKey: 'regdate'
				}
			}
		};
	},
	computed: {
		reportOptions() {
			return Object.keys(this.reportList).map((key) => ({
				text: this.reportList[key].title,
				value: key
			}));
		}
	},
	methods: {
		handleReportSelectorChange(e) {
			this.currentReport = e;
		},
		async getStatData() {
			const res = await getStatReportInfo();
			if (res && res.code === 0) {
				this.statData = res.data;
			}
		}
	},
	watch: {
		visible(newValue, oldValue) {
			if (newValue) {
				this.getStatData();
			}
		}
	},
	components: {
		ReportTable
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>