From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/statistics/member/components/MemberFunnelCard.vue | 121 ++++++++++++++++++++++++++++++++++++++++
1 files changed, 121 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/statistics/member/components/MemberFunnelCard.vue b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
new file mode 100644
index 0000000..609c679
--- /dev/null
+++ b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
@@ -0,0 +1,121 @@
+<template>
+ <el-card shadow="never">
+ <template #header>
+ <div class="my--1.5 flex flex-row items-center justify-between">
+ <CardTitle title="浼氬憳姒傝" />
+ <!-- 鏌ヨ鏉′欢 -->
+ <ShortcutDateRangePicker @change="handleTimeRangeChange" />
+ </div>
+ </template>
+ <div class="min-w-225 py-1.75" v-loading="loading">
+ <div class="relative h-24 flex">
+ <div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
+ <div class="ml-15 h-full flex flex-col justify-center">
+ <div class="font-bold">
+ 娉ㄥ唽鐢ㄦ埛鏁伴噺锛歿{ analyseData?.comparison?.value?.registerUserCount || 0 }}
+ </div>
+ <div class="mt-2 text-3.5">
+ 鐜瘮澧為暱鐜囷細{{
+ calculateRelativeRate(
+ analyseData?.comparison?.value?.registerUserCount,
+ analyseData?.comparison?.reference?.registerUserCount
+ )
+ }}%
+ </div>
+ </div>
+ </div>
+ <div
+ class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
+ >
+ <span class="text-6 font-bold">{{ analyseData?.visitUserCount || 0 }}</span>
+ <span>璁垮</span>
+ </div>
+ </div>
+ <div class="relative h-24 flex">
+ <div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
+ <div class="ml-15 h-full flex flex-col justify-center">
+ <div class="font-bold">
+ 娲昏穬鐢ㄦ埛鏁伴噺锛歿{ analyseData?.comparison?.value?.visitUserCount || 0 }}
+ </div>
+ <div class="mt-2 text-3.5">
+ 鐜瘮澧為暱鐜囷細{{
+ calculateRelativeRate(
+ analyseData?.comparison?.value?.visitUserCount,
+ analyseData?.comparison?.reference?.visitUserCount
+ )
+ }}%
+ </div>
+ </div>
+ </div>
+ <div
+ class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
+ >
+ <span class="text-6 font-bold">{{ analyseData?.orderUserCount || 0 }}</span>
+ <span>涓嬪崟</span>
+ </div>
+ </div>
+ <div class="relative h-24 flex">
+ <div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
+ <div class="ml-15 h-full flex flex-row gap-x-16">
+ <div class="flex flex-col justify-center">
+ <div class="font-bold">
+ 鍏呭�肩敤鎴锋暟閲忥細{{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
+ </div>
+ <div class="mt-2 text-3.5">
+ 鐜瘮澧為暱鐜囷細{{
+ calculateRelativeRate(
+ analyseData?.comparison?.value?.rechargeUserCount,
+ analyseData?.comparison?.reference?.rechargeUserCount
+ )
+ }}%
+ </div>
+ </div>
+ <div class="flex flex-col justify-center">
+ <div class="font-bold">瀹㈠崟浠凤細{{ fenToYuan(analyseData?.atv || 0) }}</div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
+ >
+ <span class="text-6 font-bold">{{ analyseData?.payUserCount || 0 }}</span>
+ <span>鎴愪氦鐢ㄦ埛</span>
+ </div>
+ </div>
+ </div>
+ </el-card>
+</template>
+<script lang="ts" setup>
+import * as MemberStatisticsApi from '@/api/mall/statistics/member'
+import dayjs from 'dayjs'
+import { calculateRelativeRate, fenToYuan } from '@/utils'
+import { MemberAnalyseRespVO } from '@/api/mall/statistics/member'
+import { CardTitle } from '@/components/Card'
+
+/** 浼氬憳姒傝鍗＄墖 */
+defineOptions({ name: 'MemberFunnelCard' })
+
+const loading = ref(true) // 鍔犺浇涓�
+const analyseData = ref<MemberAnalyseRespVO>() // 浼氬憳鍒嗘瀽鏁版嵁
+
+/** 鏌ヨ浼氬憳姒傝鏁版嵁鍒楄〃 */
+const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]) => {
+ loading.value = true
+ // 鏌ヨ鏁版嵁
+ analyseData.value = await MemberStatisticsApi.getMemberAnalyse({ times })
+ loading.value = false
+}
+</script>
+<style lang="scss" scoped>
+.trapezoid1 {
+ transform: perspective(5em) rotateX(-11deg);
+}
+
+.trapezoid2 {
+ transform: perspective(7em) rotateX(-20deg);
+}
+
+.trapezoid3 {
+ transform: perspective(3em) rotateX(-13deg);
+}
+</style>
--
Gitblit v1.8.0