shuhi-ui/src/views/marketing/quantityDiscount/components/QuantityDiscountDataDialog.vue

<template>
    <ele-modal v-model="visible" title="活动详情" width="1000px" :footer="null"
        custom-class="quantity-discount-data-dialog">
        <div class="">
            <!-- Header Info -->
            <div class="bg-gray-50 p-4 rounded mb-4 text-sm text-gray-600 flex justify-between items-center">
                <div class="space-x-8">
                    <span>满元/满件</span>
                    <el-tag size="small">进行中</el-tag>
                    <span>活动ID：6903135127</span>
                    <span>活动范围：全店</span>
                    <span>优惠方式：满元（减钱）</span>
                    <span>有效时间：2024-10-01 00:00:00 至 2024-11-20 00:00:00</span>
                </div>
                <div>数据更新时间：2024-10-05</div>
            </div>

            <!-- Stats Grid -->
            <div class="mb-4">
                <h3 class="text-base font-medium mb-3">活动累计效果</h3>
                <div class="grid grid-cols-4 gap-4 text-center">
                    <div class="flex flex-col">
                        <span class="text-gray-500 text-xs mb-1">累计支付订单数</span>
                        <span class="text-lg font-bold">658</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-gray-500 text-xs mb-1">累计支付金额</span>
                        <span class="text-lg font-bold">658</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-gray-500 text-xs mb-1">累计支付件数</span>
                        <span class="text-lg font-bold">658</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-gray-500 text-xs mb-1">累计优惠金额</span>
                        <span class="text-lg font-bold">658</span>
                    </div>
                </div>
            </div>

            <!-- Chart Section -->
            <div class="border-t pt-4">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center space-x-2">
                        <el-radio-group v-model="dateRangeType" size="small">
                            <el-radio-button label="day">日</el-radio-button>
                            <el-radio-button label="7days">7日</el-radio-button>
                            <el-radio-button label="30days">30日</el-radio-button>
                        </el-radio-group>
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 240px" />
                        <el-button type="primary" size="small" plain>查询</el-button>
                        <el-button size="small">重置</el-button>
                    </div>
                    <div class="text-xs text-gray-500">统计时间：2024-06-28</div>
                </div>

                <!-- Metric Tabs -->
                <div class="grid grid-cols-6 gap-0 border mb-4">
                    <div v-for="(metric, index) in metrics" :key="index"
                        class="p-3 border-r last:border-r-0 cursor-pointer hover:bg-gray-50 transition-colors"
                        :class="{ 'bg-blue-50 border-b-2 border-b-blue-500': activeMetric === metric.key }"
                        @click="activeMetric = metric.key">
                        <div class="text-xs text-gray-500 mb-1">{{ metric.label }}</div>
                        <div class="text-lg font-bold mb-1">{{ metric.value }}</div>
                        <div class="text-xs flex items-center">
                            <span class="text-gray-400 mr-1">较前1日</span>
                            <span :class="metric.trend > 0 ? 'text-green-500' : 'text-red-500'">
                                {{ metric.trend > 0 ? '↑' : '↓' }} {{ Math.abs(metric.trend) }}%
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Chart -->
                <div class="h-[300px]">
                    <BaseChart :option="chartOption" />
                </div>
            </div>
        </div>
    </ele-modal>
</template>

<script setup>
import { ref, computed } from 'vue';
import BaseChart from '@/components/Chart/BaseChart.vue';

const props = defineProps({
    modelValue: Boolean
});

const emit = defineEmits(['update:modelValue']);

const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
});

const dateRangeType = ref('day');
const dateRange = ref([]);
const activeMetric = ref('orders');

const metrics = ref([
    { key: 'orders', label: '支付订单数', value: '658', trend: -48.65 },
    { key: 'buyers', label: '支付买家数', value: '658', trend: -48.65 },
    { key: 'amount', label: '支付金额', value: '658.68', trend: -48.65 },
    { key: 'avgItems', label: '人均支付件数', value: '658', trend: 48.65 },
    { key: 'discount', label: '优惠金额', value: '658', trend: 48.65 },
    { key: 'price', label: '客单价', value: '658', trend: 48.65 },
]);

const chartOption = computed(() => {
    return {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: metrics.value.find(m => m.key === activeMetric.value)?.label,
                type: 'line',
                smooth: true,
                itemStyle: { color: '#5b8ff9' },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(91, 143, 249, 0.5)'
                        }, {
                            offset: 1, color: 'rgba(91, 143, 249, 0)'
                        }],
                    }
                },
                data: [100, 140, 220, 100, 130] // Mock data
            }
        ]
    };
});
</script>

<style scoped>
:deep(.quantity-discount-data-dialog .el-dialog__header) {
    display: none;
}
</style>