crm-app-vue3/pages/person/cards/index.vue

<template>
    <view class="person_cards_wrap">
        <view class="cards_container">
            <view class="tab_container">
                 <u-tabs :list="tabList" :current="currentTab" @change="changeTab" active-color="#2563eb" :is-scroll="false"></u-tabs>
            </view>
            <view class="card_item today">
                <view class="card_item_content">
                    <view class="card_header">
                        <text class="card_title">抖音<br />消耗（元）</text>
                    </view>
                    <view class="card_content">
                        <text class="card_value">{{ formatMoney(cardData.consumeDy) }}</text>
                    </view>
                </view>
                <view class="card_item_content">
                    <view class="card_header">
                        <text class="card_title">广点通<br />消耗（元）</text>
                    </view>
                    <view class="card_content">
                        <text class="card_value">{{ formatMoney(cardData.consumeGdt) }}</text>
                    </view>
                </view>
                <view class="card_item_content">
                    <view class="card_header">
                        <text class="card_title">业绩（元）</text>
                    </view>
                    <view class="card_content">
                        <text class="card_value">{{ formatMoney(cardData.performance) }}</text>
                    </view>
                </view>
            </view>
            <!-- 条数统计 -->
            <view class="card_item card_item_full">
                <view class="card_header count">
                    <image class="count_icon" src="../../../static/icons/statistics.png" alt=""></image>
                    <text class="card_title">条数统计</text>
                </view>
                <view class="card_content">
                    <view class="count_stats">
                        <view class="count_item">
                            <text class="count_value">{{ cardData.countTypeA }}</text>
                            <text class="count_label">A类</text>
                        </view>
                        <view class="count_item">
                            <text class="count_value">{{ cardData.countTypeB }}</text>
                            <text class="count_label">B类</text>
                        </view>
                        <view class="count_item">
                            <text class="count_value">{{ cardData.countTypeC }}</text>
                            <text class="count_label">C类</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 上门 -->
            <view class="card_item card_item_full">
                <view class="card_content">
                    <view class="visit_stats">
                        <view class="visit_item">
                            <text class="visit_label">上门</text>
                            <text class="visit_value visitc_count">{{ cardData.visitCount }}</text>
                        </view>
                        <view class="visit_item">
                            <text class="visit_label">上门率</text>
                            <text class="visit_value">{{ formatPercent(cardData.visitRate) }}</text>
                        </view>
                        <view class="visit_item">
                            <text class="visit_label">成交率</text>
                            <text class="visit_value">{{ formatPercent(cardData.dealRate) }}</text>
                        </view>
                        <view class="visit_item">
                            <text class="visit_label">投产比</text>
                            <text class="visit_value">{{ formatMoney(cardData.roi) }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 当前排名 -->
            <view class="card_item card_item_full">
                <view class="card_content">
                    <view class="ranking_stats">
                        <view class="ranking_info">
                            <view class="ranking_icon">
                                <image class="ranking_icon_img" src="../../../static/icons/trophy.png" alt=""></image>
                            </view>
                            <view class="ranking_info_text">
                                <text class="card_title">当前排名</text>
                                <text class="ranking_text">击败了{{ formatMoney(cardData.beatRate) }}%的同事</text>
                            </view>
                        </view>
                        <view class="ranking_details">
                            <view class="ranking_detail_item">
                                <text class="ranking_detail_value">{{ cardData.level }}</text>
                                <text class="ranking_detail_label">等级</text>
                            </view>
                            <view class="ranking_detail_item">
                                <text class="ranking_detail_value">{{ cardData.score }}</text>
                                <text class="ranking_detail_label">评分</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 折线图 -->
            <view class="card_item" v-if="false">
                <view class="chart_header">
                    <image class="chart_icon" src="../../../static/icons/line.png" alt=""></image>
                    <text class="card_title">近7天排名折线图</text>
                </view>
                <view class="charts_box">
                    <qiun-data-charts type="line" :chartData="chartData" canvasId="uniqueLineChart" :opts="opts"
                        width="700rpx" height="350rpx" backgroundColor="#ffffff" />
                </view>
            </view>
        </view>
        <!-- 最新线索 -->
        <view class="latest_clue" v-if="clueList.length > 0">
            <view class="clue_header">
                <text class="card_title">最新线索</text>
                <view class="more_btn" @click="toPrivateClue">
                    <text>更多</text>
                    <u-icon name="arrow-right" size="16" color="#2563eb"></u-icon>
                </view>
            </view>
            <view class="clue_list">
                <view class="clue_item" v-for="(item, index) in clueList" :key="index">
                    <view class="clue_star">
                        <u-icon name="star-fill" size="20" color="#facc15"></u-icon>
                        <text class="clue_name">{{ item.star }}</text>
                    </view>
                    <text class="clue_name">{{ item.name }}</text>
                    <view class="clue_info">
                        <text class="clue_title">{{ item.prodTitle }}</text>
                        <text class="clue_desc">{{ item.desc }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 卡片数据
            cardData: {
                todayConsume: '-',
                todayConsumeDy: '-',
                todayConsumeGdt: '-',
                performance: '-',
                countTypeA: '-',
                countTypeB: '-',
                countTypeC: '-',
                visitCount: '-',
                visitRate: '-',
                dealRate: '-',
                roi: '-',
                beatRate: '-',
                level: '-',
                score: '-'
            },
            chartData: {},
            opts: {
                color: ["#1890FF"],
                padding: [10, 10, 0, 0],
                dataLabel: false,
                dataPointShape: false,
                enableScroll: false,
                legend: {
                    show: false
                },
                xAxis: {
                    disableGrid: true
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2,
                    axisLabel: {
                        show: false
                    }
                },
                extra: {
                    line: {
                        type: "curve",
                        width: 3,
                        activeType: "hollow",
                        linearType: "custom",
                        onShadow: true,
                        animation: "horizontal"
                    }
                }
            },
            clueList: [],
            currentTab: 0,
            tabList: [{
                name: '当日',
                value: 'today'
            }, {
                name: '当周',
                value: 'week'
            }, {
                name: '当月',
                value: 'month'
            }],
        };
    },

    methods: {
        changeTab(val) {
            this.currentTab = val.index;
            this.getCardData();
        },
        formatMoney(val) {
            if (val === null || val === undefined || val === '' || val === '-') return '-';
            const num = Number(val);
            if (Number.isNaN(num)) return '-';
            return num.toFixed(2);
        },
        // 与 splitSummary 一致：上门率/成交率显示为 xx.xx%
        formatPercent(val) {
            if (val === null || val === undefined || val === '' || val === '-') return '-';
            const num = Number(val);
            if (Number.isNaN(num)) return '-';
            return num.toFixed(2) + '%';
        },
        getCardData() {
            const time = this.tabList[this.currentTab].value;
            uni.$u.api.getPersonCards({
                userId: this.$store.state.user.userInfo.userId,
                time: time
            }).then(res => {
                if (res.code === 200) {
                    this.cardData = res.data;
                }
            });
        },
        getClueList() {
            uni.$u.api.getPersonLatestClue({ userId: this.$store.state.user.userInfo.userId }).then(res => {
                if (res.code === 200) {
                    this.clueList = res.data;
                }
            });
        },
        async getChartData() {
            const res = await uni.$u.api.getPersonRanking({ userId: this.$store.state.user.userInfo.userId });
            if (res.code === 200) {
                let data = {
                    categories: res.data.map(item => item.x),
                    series: [
                        {
                            name: "近7天排名",
                            data: res.data.map(item => item.y),
                            setShadow: [
                                3,
                                8,
                                15,
                                "#1890FF"
                            ],
                        }
                    ]
                }
                this.chartData = JSON.parse(JSON.stringify(data))
            }
        },
        // 跳转私有线索页面
        toPrivateClue() {
            uni.switchTab({ url: '/pages/privateClue/index' });
        },
    },
    mounted() {
        this.getCardData();
        this.getClueList();
        this.$nextTick(() => {
            this.getChartData();
        })
    },

};
</script>

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