Merge branch 'msb_prod' into fix-0609-xwk

src/api/file.js

@@ -23,7 +23,9 @@ export function sign(serviceName, configId) {
 export async function upload(serviceName, configId, file, cancelToken) {
     let oss = await sign(serviceName, configId);
     let data = new FormData();
-    data.append('name', file.name);
+    let arr = file.name.split('/');
+    arr[arr.length - 1] = encodeURIComponent(arr[arr.length - 1]);
+    data.append('name', arr.join('/'));
     data.append('key', `${oss.dir}${'${filename}'}`);
     data.append('policy', oss.policy);
     data.append('OSSAccessKeyId', oss.accessId);

src/api/home/index.js

@@ -47,7 +47,7 @@ export const orderSummary = (params) => {
 // 获取今日订单统计数据
 export const orderToday = () => {
     return request({
-        url: '/mall/base/frontPage/listOrderStatistics',
+        url: '/mall/base/frontPage/listTodayOrderStatistics',
         method: 'get',
     });
 };

src/components/extra/ElInput.vue

@@ -13,6 +13,10 @@
             type: Boolean,
             default: true,
         },
+        maxlength: {
+            type: [Number, String],
+            default: 255,
+        },
         placeholder: {
             type: String,
             default: '请输入',
@@ -44,6 +48,7 @@
     });
     const attrs = useAttrs();
     const slots = useSlots();
-    const render = () => <ElInput {...props} {...attrs} v-slots={slots}></ElInput>;
+    const showWordLimit = props.showWordLimit === true && props.maxlength !== 255;
+    const render = () => <ElInput {...{ ...props, showWordLimit }} {...attrs} v-slots={slots}></ElInput>;
 </script>
 <style lang="less" scoped></style>

src/layouts/default.vue

@@ -28,6 +28,7 @@
     .layout-container {
         width: 100vw;
         height: 100vh;
+        min-width: 1200px;
         background-color: @color-white-dark;
     }
     .layout-default {

src/router/index.js

@@ -59,13 +59,19 @@ router.onError((error, to) => {
 router.beforeEach(async (to, from, next) => {
     if (store.state.local.token) {
         if (!store.state.auth.permission.length) {
-            await store.dispatch('auth/getUserInfo');
+            let res1 = true,
+                res2 = true;
+            res1 = await store.dispatch('auth/getUserInfo');
             if (config.useLocalRouter) {
                 store.commit('auth/setPermission', routes);
             } else {
-                await store.dispatch('auth/getPermission');
+                res2 = await store.dispatch('auth/getPermission');
+            }
+            if (res1 && res2) {
+                next({ ...to, replace: true });
+            } else {
+                next(false);
             }
-            next({ ...to, replace: true });
         } else {
             console.info(`[router] from ${from.name} to ${to.name}`);
             const deep = (route) => {

src/store/modules/home/home.js

@@ -1,78 +1,87 @@
 import * as api from '@/api/home/index.js';
+import customer from '~/home/customer.png';
+import iconAdvertise from '~/home/icon-advertise.png';
+import iconLimit from '~/home/icon-limit.png';
+import iconNotify from '~/home/icon-notify.png';
+import iconOrder from '~/home/icon-order.png';
+import iconProduct from '~/home/icon-product.png';
+import order from '~/home/order.png';
+import sales from '~/home/sales.png';
+import sales2 from '~/home/sales2.png';
 const state = () => ({
     opts: {
         summary: [
             {
                 label: '今日访客数',
-                value: 1526,
+                value: '-',
-                icon: 'bar-chart',
+                icon: customer,
             },
             {
                 label: '今日订单数',
-                value: 200,
+                value: '-',
-                icon: 'file-list',
+                icon: order,
             },
             {
                 label: '今日销售额',
-                value: 5000,
+                value: '-',
-                icon: 'money-cny-box',
+                icon: sales,
                 type: 'money',
             },
             {
                 label: '近7天销售总额',
-                value: 50000,
+                value: '-',
-                icon: 'line-chart',
+                icon: sales2,
                 type: 'money',
             },
         ],
         order: [
             {
                 label: '待付款订单',
-                value: '10',
+                value: '-',
                 route: {
                     name: 'OrderManagement',
-                    params: {
+                    query: {
                         status: 1,
                     },
                 },
             },
             {
-                label: '待处理退款申请',
+                label: '待发货订单',
-                value: '10',
+                value: '-',
                 route: {
-                    name: 'ServiceManagement',
+                    name: 'OrderManagement',
-                    params: {
+                    query: {
-                        status: 1,
+                        status: 3,
                     },
                 },
             },
             {
-                label: '待发货订单',
+                label: '已发货订单',
-                value: '10',
+                value: '-',
                 route: {
                     name: 'OrderManagement',
-                    params: {
+                    query: {
-                        status: 1,
+                        status: 4,
                     },
                 },
             },
             {
-                label: '待确认退货订单',
+                label: '待处理退款申请',
-                value: '10',
+                value: '-',
                 route: {
-                    name: 'ServiceManagement',
+                    name: 'ServiceApplication',
-                    params: {
+                    query: {
                         status: 1,
                     },
                 },
             },
             {
-                label: '已发货订单',
+                label: '待确认退货订单',
-                value: '10',
+                value: '-',
                 route: {
-                    name: 'OrderManagement',
+                    name: 'ServiceApplication',
-                    params: {
+                    query: {
-                        status: 1,
+                        status: 4,
                     },
                 },
             },
@@ -80,35 +89,38 @@ const state = () => ({
         teleport: [
             {
                 label: '添加商品',
-                value: 'product-hunt',
+                value: iconProduct,
                 route: {
                     name: 'CreateProduct',
                 },
             },
             {
                 label: '订单列表',
-                value: 'money-cny-circle',
+                value: iconOrder,
                 route: {
                     name: 'OrderManagement',
+                    query: {
+                        status: 0,
+                    },
                 },
             },
             {
                 label: '秒杀管理',
-                value: 'auction',
+                value: iconLimit,
                 route: {
                     name: 'LimitActivity',
                 },
             },
             {
                 label: '消息通知',
-                value: 'notification-3',
+                value: iconNotify,
                 route: {
                     name: 'NotifyManagement',
                 },
             },
             {
                 label: '广告管理',
-                value: 'advertisement',
+                value: iconAdvertise,
                 route: {
                     name: 'AdvertiseManagement',
                 },
@@ -117,69 +129,66 @@ const state = () => ({
         product: [
             {
                 label: '已上架',
-                value: 100,
+                value: '-',
             },
             {
                 label: '未上架',
-                value: 400,
+                value: '-',
             },
             {
                 label: '库存紧张',
-                value: 50,
+                value: '-',
             },
             {
                 label: '全部商品',
-                value: 500,
+                value: '-',
             },
         ],
         customer: [
             {
                 label: '今日新增',
-                value: 100,
+                value: '-',
             },
             {
-                label: '昨日新添',
+                label: '昨日新增',
-                value: 200,
+                value: '-',
             },
             {
                 label: '本月新增',
-                value: 1000,
+                value: '-',
             },
             {
                 label: '用户总数',
-                value: 5000,
+                value: '-',
             },
         ],
         chart: [
             {
-                info: {},
+                info: {
-                data: [
+                    monthUpsOrDownsScale: '-',
-                    { label: '1月', value: 152 },
+                    monthVisitor: '-',
-                    { label: '2月', value: 215 },
+                    weekUpsOrDownsScale: '-',
-                    { label: '3月', value: 198 },
+                    weekVisitor: '-',
-                    { label: '4月', value: 348 },
+                },
-                    { label: '5月', value: 111 },
+                data: [],
-                ],
             },
             {
-                info: {},
+                info: {
-                data: [
+                    monthUpsOrDownsScale: '-',
-                    { label: '1月', value: 152 },
+                    monthOrder: '-',
-                    { label: '2月', value: 215 },
+                    weekUpsOrDownsScale: '-',
-                    { label: '3月', value: 198 },
+                    weekOrder: '-',
-                    { label: '4月', value: 348 },
+                },
-                    { label: '5月', value: 111 },
+                data: [],
-                ],
             },
             {
-                info: {},
+                info: {
-                data: [
+                    monthUpsOrDownsScale: '-',
-                    { label: '1月', value: 152 },
+                    monthSales: '-',
-                    { label: '2月', value: 215 },
+                    weekUpsOrDownsScale: '-',
-                    { label: '3月', value: 198 },
+                    weekSales: '-',
-                    { label: '4月', value: 348 },
+                },
-                    { label: '5月', value: 111 },
+                data: [],
-                ],
             },
         ],
     },
@@ -194,10 +203,10 @@ const mutations = {
     },
     setOrder: (state, data) => {
         state.opts.order[0].value = data.waitPayCount || 0;
-        state.opts.order[1].value = data.waitRefundCount || 0;
+        state.opts.order[1].value = data.waitShipCount || 0;
-        state.opts.order[2].value = data.waitShipCount || 0;
+        state.opts.order[2].value = data.shippedCount || 0;
-        state.opts.order[3].value = data.waitReturnGoodsCount || 0;
+        state.opts.order[3].value = data.waitRefundCount || 0;
-        state.opts.order[4].value = data.shippedCount || 0;
+        state.opts.order[4].value = data.waitReturnGoodsCount || 0;
     },
     setProduct: (state, data) => {
         state.opts.product[0].value = data.onTheShelfCount || 0;
@@ -211,9 +220,27 @@ const mutations = {
         state.opts.customer[2].value = data.monthIncreaseCount || 0;
         state.opts.customer[3].value = data.allCount || 0;
     },
-    setChartInfo1: (state, data) => (state.opts.chart[0].info = data),
+    setChartInfo1: (state, data) =>
-    setChartInfo2: (state, data) => (state.opts.chart[1].info = data),
+        (state.opts.chart[0].info = data || {
-    setChartInfo3: (state, data) => (state.opts.chart[2].info = data),
+            monthUpsOrDownsScale: 0,
+            monthVisitor: 0,
+            weekUpsOrDownsScale: 0,
+            weekVisitor: 0,
+        }),
+    setChartInfo2: (state, data) =>
+        (state.opts.chart[1].info = data || {
+            monthUpsOrDownsScale: 0,
+            monthOrder: 0,
+            weekUpsOrDownsScale: 0,
+            weekOrder: 0,
+        }),
+    setChartInfo3: (state, data) =>
+        (state.opts.chart[2].info = data || {
+            monthUpsOrDownsScale: 0,
+            monthSales: 0,
+            weekUpsOrDownsScale: 0,
+            weekSales: 0,
+        }),
     setChartData1: (state, data) => (state.opts.chart[0].data = data),
     setChartData2: (state, data) => (state.opts.chart[1].data = data),
     setChartData3: (state, data) => (state.opts.chart[2].data = data),
@@ -221,22 +248,22 @@ const mutations = {
 const actions = {
     loadSummary: async ({ commit }) => {
         let res = await api.summary();
-        commit('setSummary', res);
+        commit('setSummary', res || {});
         return res;
     },
     loadOrder: async ({ commit }) => {
         let res = await api.order();
-        commit('setOrder', res);
+        commit('setOrder', res || {});
         return res;
     },
     loadProduct: async ({ commit }) => {
         let res = await api.product();
-        commit('setProduct', res);
+        commit('setProduct', res || {});
         return res;
     },
     loadCustomer: async ({ commit }) => {
         let res = await api.customer();
-        commit('setCustomer', res);
+        commit('setCustomer', res || {});
         return res;
     },
     loadChartInfo1: async ({ commit }) => {
@@ -255,24 +282,63 @@ const actions = {
         return res;
     },
     loadChartData1: async ({ commit }, data) => {
-        let today =
+        let res = await api.customerSummary(data);
-            data.beginDateTime === data.endDateTime && data.endDateTime === dayjs(new Date()).format('YYYY-MM-DD');
+        commit(
-        let res = await (today ? api.customerToday : api.customerSummary)(data);
+            'setChartData1',
-        commit('setChartData1', res || []);
+            (res || []).map((item) => {
+                return { label: item.recordDate, value: item.count };
+            })
+        );
+        return res;
+    },
+    loadChartData11: async ({ commit }) => {
+        let res = await api.customerToday();
+        commit(
+            'setChartData1',
+            (res || []).map((item) => {
+                return { label: item.recordDate, value: item.count };
+            })
+        );
         return res;
     },
     loadChartData2: async ({ commit }, data) => {
-        let today =
+        let res = await api.orderSummary(data);
-            data.beginDateTime === data.endDateTime && data.endDateTime === dayjs(new Date()).format('YYYY-MM-DD');
+        commit(
-        let res = await (today ? api.orderToday : api.orderSummary)(data);
+            'setChartData2',
-        commit('setChartData2', res || []);
+            (res || []).map((item) => {
+                return { label: item.recordDate, value: item.count };
+            })
+        );
+        return res;
+    },
+    loadChartData22: async ({ commit }) => {
+        let res = await api.orderToday();
+        commit(
+            'setChartData2',
+            (res || []).map((item) => {
+                return { label: item.recordDate, value: item.count };
+            })
+        );
         return res;
     },
     loadChartData3: async ({ commit }, data) => {
-        let today =
+        let res = await api.moneySummary(data);
-            data.beginDateTime === data.endDateTime && data.endDateTime === dayjs(new Date()).format('YYYY-MM-DD');
+        commit(
-        let res = await (today ? api.orderToday : api.orderSummary)(data);
+            'setChartData3',
-        commit('setChartData3', res || []);
+            (res || []).map((item) => {
+                return { label: item.recordDate, value: item.sales };
+            })
+        );
+        return res;
+    },
+    loadChartData33: async ({ commit }) => {
+        let res = await api.moneyToday();
+        commit(
+            'setChartData3',
+            (res || []).map((item) => {
+                return { label: item.recordDate, value: item.sales };
+            })
+        );
         return res;
     },
     load: async ({ dispatch }) => {

src/store/modules/sales/product.js

@@ -113,11 +113,9 @@ const actions = {
             delete data.singleBuyLimit;
         }
         data.virtualProductModifyDTOList = data.fileList.map((item) => {
-            let arr = item.split('/');
-            arr[arr.length - 1] = encodeURIComponent(arr[arr.length - 1]);
             return {
                 shipType: 1,
-                shipContent: arr.join('/'),
+                shipContent: item,
             };
         });
         if (data.autoSend) {

src/utils/request.js

@@ -12,10 +12,13 @@ const handleResponse = async ({ config: requestConfig, data, status }) => {
     if (requestConfig.headers.download === true) {
         return data;
     }
-    let code = data.code || status;
+    let code = data?.code || status;
-    console.info('[api]', code, requestConfig.method, requestConfig.url, data.data);
+    console.info('[api]', code, requestConfig.method, requestConfig.url, data?.data);
     if (code !== 'SUCCESS') {
-        ElMessage.error(data.message || '服务器异常');
+        ElMessage.error(data?.message || '服务器异常');
+        if (data) {
+            data.data = null;
+        }
         switch (code) {
             case 'SYSTEM_ERROR': //系统异常
             case 'INTERFACE_SYSTEM_ERROR': // 外部接口调用异常

src/views/home/dateRange.vue

@@ -1,16 +1,18 @@
 <template>
     <div class="date-range">
-        <el-button
+        <template v-for="(item, index) in opts" :key="index">
-            v-for="(item, index) in opts"
+            <el-button
-            :key="index"
+                v-if="item.value !== 'today' || !props.hiddenToday"
-            :plain="active === item.value"
+                :class="{ active: active === item.value }"
-            :type="active === item.value ? 'primary' : 'text'"
+                type="text"
-            @click="handleRange(item.value)"
+                @click="handleRange(item.value)"
-        >
+            >
-            {{ item.label }}
+                {{ item.label }}
-        </el-button>
+            </el-button>
+        </template>
         <el-date-picker
             v-model="value"
+            :clearable="false"
             :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
             type="daterange"
             value-format="YYYY-MM-DD HH:mm:ss"
@@ -19,6 +21,13 @@
 </template>
 
 <script setup>
+    import dayjs from 'dayjs';
+    const props = defineProps({
+        hiddenToday: {
+            type: Boolean,
+            default: false,
+        },
+    });
     const opts = ref([
         {
             label: '今天',
@@ -35,8 +44,10 @@
     ]);
     const active = ref('week');
     const value = ref([]);
-    const emits = defineEmits(['update:modelValue']);
+    const today = ref(false);
+    const emits = defineEmits(['update:modelValue', 'update:today']);
     watch(value, (value) => {
+        emits('update:today', unref(today));
         emits('update:modelValue', value);
         if (unref(click)) {
             click.value = false;
@@ -48,8 +59,11 @@
     const handleRange = (range) => {
         click.value = true;
         active.value = range;
+        today.value = false;
+        let weekStart = new Date(new Date().getTime() - ((new Date().getDay() || 7) - 1) * 1000 * 60 * 60 * 24);
         switch (range) {
             case 'today':
+                today.value = true;
                 value.value = [
                     dayjs(new Date()).format('YYYY-MM-DD 00:00:00'),
                     dayjs(new Date()).format('YYYY-MM-DD 23:59:59'),
@@ -57,10 +71,8 @@
                 break;
             case 'week':
                 value.value = [
-                    dayjs(
+                    dayjs(weekStart).format('YYYY-MM-DD 00:00:00'),
-                        new Date(new Date().getTime() - ((new Date().getDay() || 7) - 1) * 1000 * 60 * 60 * 24)
+                    dayjs(new Date(weekStart.getTime() + 6 * 1000 * 60 * 60 * 24)).format('YYYY-MM-DD 23:59:59'),
-                    ).format('YYYY-MM-DD 00:00:00'),
-                    dayjs(new Date()).format('YYYY-MM-DD 23:59:59'),
                 ];
                 break;
             case 'month':
@@ -80,8 +92,17 @@
     .date-range {
         display: flex;
         align-items: center;
+        .el-button {
+            color: #666;
+            &.active {
+                color: #4481ff;
+            }
+            & + .el-button {
+                margin-left: 44px;
+            }
+        }
         :deep(.el-date-editor) {
-            margin-left: @layout-space;
+            margin-left: 44px;
         }
     }
 </style>

src/views/home/index copy.vue

@@ -1,419 +0,0 @@
-<template>
-    <div class="container">
-        <div class="flex row row-1">
-            <el-card v-for="(item, index) in opts.summary" :key="index">
-                <div class="flex">
-                    <div class="text">
-                        <p class="label">{{ item.label }}</p>
-                        <p class="value">{{ handleValue(item) }}</p>
-                    </div>
-                    <el-icon :name="item.icon" :size="54" />
-                </div>
-            </el-card>
-        </div>
-        <el-card class="row row-2" header="待处理事务">
-            <ul>
-                <li v-for="(item, index) in opts.order" :key="index" @click="handleRoute(item.route)">
-                    <span class="label">
-                        {{ item.label }}
-                    </span>
-                    <span class="value">
-                        (
-                        <span class="red">
-                            {{ item.value }}
-                        </span>
-                        )
-                    </span>
-                </li>
-            </ul>
-        </el-card>
-        <el-card class="row row-3" header="运营快捷入口">
-            <ul>
-                <li v-for="(item, index) in opts.teleport" :key="index" @click="handleRoute(item.route)">
-                    <p class="value">
-                        <el-icon :name="item.value" :size="54" />
-                    </p>
-                    <p class="label">
-                        {{ item.label }}
-                    </p>
-                </li>
-            </ul>
-        </el-card>
-        <div class="flex row row-4">
-            <el-card header="商品总览">
-                <ul>
-                    <li v-for="(item, index) in opts.product" :key="index">
-                        <p class="value red">
-                            {{ item.value }}
-                        </p>
-                        <p class="label">
-                            {{ item.label }}
-                        </p>
-                    </li>
-                </ul>
-            </el-card>
-            <el-card header="用户总览">
-                <ul>
-                    <li v-for="(item, index) in opts.customer" :key="index">
-                        <p class="value red">
-                            {{ item.value }}
-                        </p>
-                        <p class="label">
-                            {{ item.label }}
-                        </p>
-                    </li>
-                </ul>
-            </el-card>
-        </div>
-        <el-card class="row row-5" header="访客统计">
-            <div class="flex">
-                <div class="left">
-                    <div class="text">
-                        <p class="label">本周访客数量</p>
-                        <p class="value">1000</p>
-                        <p class="rate">
-                            <span class="down">10%</span>
-                            <span class="desc">同比上周</span>
-                        </p>
-                    </div>
-                    <div class="text">
-                        <p class="label">本月访客数量</p>
-                        <p class="value">10000</p>
-                        <p class="rate">
-                            <span class="up">10%</span>
-                            <span class="desc">同比上月</span>
-                        </p>
-                    </div>
-                </div>
-                <div class="right">
-                    <div class="header flex">
-                        <p class="title">近一周访客统计</p>
-                        <date-range v-model="condition1" />
-                    </div>
-                    <div class="chart"></div>
-                </div>
-            </div>
-        </el-card>
-        <el-card class="row row-6" header="订单统计">
-            <div class="flex">
-                <div class="left">
-                    <div class="text">
-                        <p class="label">本周订单数量</p>
-                        <p class="value">1000</p>
-                        <p class="rate">
-                            <span class="down">10%</span>
-                            <span class="desc">同比上周</span>
-                        </p>
-                    </div>
-                    <div class="text">
-                        <p class="label">本月订单总数</p>
-                        <p class="value">10000</p>
-                        <p class="rate">
-                            <span class="up">10%</span>
-                            <span class="desc">同比上月</span>
-                        </p>
-                    </div>
-                </div>
-                <div class="right">
-                    <div class="header flex">
-                        <p class="title">近一周订单统计</p>
-                        <date-range v-model="condition2" />
-                    </div>
-                    <div class="chart"></div>
-                </div>
-            </div>
-        </el-card>
-        <el-card class="row row-7" header="销售统计">
-            <div class="flex">
-                <div class="left">
-                    <div class="text">
-                        <p class="label">本周销售总额</p>
-                        <p class="value">1000</p>
-                        <p class="rate">
-                            <span class="down">10%</span>
-                            <span class="desc">同比上周</span>
-                        </p>
-                    </div>
-                    <div class="text">
-                        <p class="label">本月销售总额</p>
-                        <p class="value">10000</p>
-                        <p class="rate">
-                            <span class="up">10%</span>
-                            <span class="desc">同比上月</span>
-                        </p>
-                    </div>
-                </div>
-                <div class="right">
-                    <div class="header flex">
-                        <p class="title">近一周销售统计</p>
-                        <date-range v-model="condition3" />
-                    </div>
-                    <div class="chart"></div>
-                </div>
-            </div>
-        </el-card>
-    </div>
-</template>
-
-<script setup>
-    import * as echarts from 'echarts';
-    import DateRange from './dateRange.vue';
-    const router = useRouter();
-    const store = useStore();
-    const opts = computed(() => store.state.home.opts);
-    const condition1 = ref([]);
-    watch(condition1, (value) => {
-        store.dispatch('home/loadChartData1', {
-            beginDate: value[0].split(' ')[0],
-            endDate: value[1].split(' ')[0],
-        });
-    });
-    const condition2 = ref([]);
-    watch(condition2, (value) => {
-        store.dispatch('home/loadChartData2', {
-            beginDate: value[0].split(' ')[0],
-            endDate: value[1].split(' ')[0],
-        });
-    });
-    const condition3 = ref([]);
-    watch(condition3, (value) => {
-        store.dispatch('home/loadChartData3', {
-            beginDate: value[0].split(' ')[0],
-            endDate: value[1].split(' ')[0],
-        });
-    });
-    const handleValue = (item) => {
-        let res = new Number(item.value).toLocaleString();
-        if (item.type === 'money') {
-            res = '￥' + res;
-        }
-        return res;
-    };
-
-    const handleRoute = (route) => router.push(route);
-    const handleChart = (selector, color, name, data) => {
-        const chart = echarts.init(document.querySelector(selector));
-        const option = {
-            color: color,
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow',
-                },
-            },
-            grid: {
-                left: '3%',
-                right: '4%',
-                bottom: '3%',
-                containLabel: true,
-            },
-            xAxis: [
-                {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: data.map((item) => item.label),
-                },
-            ],
-            yAxis: [
-                {
-                    type: 'value',
-                },
-            ],
-            series: [
-                {
-                    name,
-                    type: 'line',
-                    stack: 'Total',
-                    smooth: true,
-                    lineStyle: {
-                        width: 0,
-                    },
-                    showSymbol: false,
-                    areaStyle: {
-                        opacity: 0.8,
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                                offset: 0,
-                                color: 'rgb(128, 255, 165)',
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgb(1, 191, 236)',
-                            },
-                        ]),
-                    },
-                    emphasis: {
-                        focus: 'series',
-                    },
-                    data: data.map((item) => item.value),
-                },
-            ],
-        };
-        chart.setOption(option);
-    };
-    onActivated(async () => {
-        await store.dispatch('home/load');
-        handleChart('.row-5 .chart', '#80FFA5', '访客数量', unref(opts).chart[0].data);
-        handleChart('.row-6 .chart', '#00DDFF', '订单数量', unref(opts).chart[1].data);
-        handleChart('.row-7 .chart', '#37A2FF', '销售额', unref(opts).chart[2].data);
-    });
-</script>
-
-<style lang="less" scoped>
-    @big-font: 30px;
-    .container {
-        height: auto !important;
-        .flex {
-            display: flex;
-        }
-        .red {
-            color: var(--el-color-danger);
-        }
-        .el-card {
-            flex: 1;
-            :deep(.el-card__header) {
-                padding: @layout-space;
-                font-weight: bolder;
-            }
-            :deep(.el-card__body) {
-                padding: @layout-space;
-            }
-        }
-        .row {
-            & + .row {
-                margin-top: @layout-space;
-            }
-            .el-card {
-                & + .el-card {
-                    margin-left: @layout-space;
-                }
-            }
-            &-1 {
-                .flex {
-                    justify-content: space-around;
-                    align-items: center;
-                }
-                .value {
-                    font-size: calc(@big-font * 0.8);
-                }
-                .x-icon {
-                    color: var(--el-color-success);
-                }
-            }
-            &-2 {
-                ul {
-                    display: flex;
-                    flex-wrap: wrap;
-                    li {
-                        width: 45%;
-                        padding: @layout-space 3%;
-                        margin: 0 2%;
-                        border-bottom: 1px solid #eee;
-                        cursor: pointer;
-                        display: flex;
-                        justify-content: space-between;
-                        &:hover {
-                            background: #eee;
-                            color: var(--el-color-primary);
-                        }
-                    }
-                }
-            }
-            &-3 {
-                ul {
-                    display: flex;
-                    li {
-                        flex: 1;
-                        padding: @layout-space 3%;
-                        margin: 0 2%;
-                        cursor: pointer;
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        &:hover {
-                            background: #eee;
-                            color: var(--el-color-primary);
-                        }
-                        .red {
-                            color: var(--el-color-danger);
-                        }
-                    }
-                }
-            }
-            &-4 {
-                ul {
-                    display: flex;
-                    justify-content: space-evenly;
-                    li {
-                        flex: 1;
-                        padding: @layout-space 3%;
-                        margin: 0 2%;
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                    }
-                }
-                .value {
-                    font-size: @big-font;
-                }
-            }
-            &-5,
-            &-6,
-            &-7 {
-                .left {
-                    border-right: 1px solid #eee;
-                    margin-right: @layout-space-super;
-                    padding-right: @layout-space-super;
-                    .text {
-                        & + .text {
-                            margin-top: @layout-space-super;
-                        }
-                        .label {
-                            font-size: 14px;
-                            color: @color-white3;
-                        }
-                        .desc {
-                            font-size: 12px;
-                            color: @color-white2;
-                            margin-left: @layout-space;
-                        }
-                        .value {
-                            font-size: @big-font;
-                        }
-                        .down {
-                            color: var(--el-color-success);
-                            &::before {
-                                content: '▼';
-                                font-size: 12px;
-                                position: relative;
-                                top: -4px;
-                            }
-                        }
-                        .up {
-                            color: var(--el-color-danger);
-                            &::before {
-                                content: '▲';
-                                font-size: 12px;
-                                position: relative;
-                                top: -4px;
-                            }
-                        }
-                    }
-                }
-                .right {
-                    flex: 1;
-                    .header {
-                        margin-bottom: @layout-space;
-                        justify-content: space-between;
-                        align-items: center;
-                    }
-                    .chart {
-                        width: 100%;
-                        height: 300px;
-                        background: #eee;
-                    }
-                }
-            }
-        }
-    }
-</style>

src/views/home/index.vue

@@ -1,7 +1,514 @@
 <template>
-    <div class="container">马士兵严选管理后台</div>
+    <div class="container">
+        <div class="flex row row-1">
+            <el-card v-for="(item, index) in opts.summary" :key="index">
+                <div class="flex">
+                    <div class="text">
+                        <p class="label">{{ item.label }}</p>
+                        <p class="value">{{ handleValue(item) }}</p>
+                    </div>
+                    <img :src="item.icon" />
+                </div>
+            </el-card>
+        </div>
+        <el-card class="row row-2" header="待处理事务">
+            <ul>
+                <li v-for="(item, index) in opts.order" :key="index" @click="handleRoute(item.route)">
+                    <span class="label">
+                        {{ item.label }}
+                    </span>
+                    <span class="value">
+                        (
+                        {{ item.value }}
+                        )
+                    </span>
+                </li>
+            </ul>
+        </el-card>
+        <el-card class="row row-3" header="运营快捷入口">
+            <ul>
+                <li v-for="(item, index) in opts.teleport" :key="index" @click="handleRoute(item.route)">
+                    <p class="value">
+                        <img :src="item.value" />
+                    </p>
+                    <p class="label">
+                        {{ item.label }}
+                    </p>
+                </li>
+            </ul>
+        </el-card>
+        <div class="flex row row-4">
+            <el-card header="商品总览">
+                <ul>
+                    <li v-for="(item, index) in opts.product" :key="index">
+                        <p class="value red">
+                            {{ item.value }}
+                        </p>
+                        <p class="label">
+                            {{ item.label }}
+                        </p>
+                    </li>
+                </ul>
+            </el-card>
+            <el-card header="用户总览">
+                <ul>
+                    <li v-for="(item, index) in opts.customer" :key="index">
+                        <p class="value red">
+                            {{ item.value }}
+                        </p>
+                        <p class="label">
+                            {{ item.label }}
+                        </p>
+                    </li>
+                </ul>
+            </el-card>
+        </div>
+        <el-card class="row row-5" header="访客统计">
+            <div class="flex">
+                <div class="left">
+                    <div class="text">
+                        <p class="label">本周访客数量</p>
+                        <p class="value">{{ opts.chart[0].info.weekVisitor }}</p>
+                        <p class="rate" :class="opts.chart[0].info.weekUpsOrDownsScale < 0 ? 'down' : 'up'">
+                            <img class="down" src="@/assets/home/down.png" />
+                            <img class="up" src="@/assets/home/up.png" />
+                            <span class="num">{{ handleRate(opts.chart[0].info.weekUpsOrDownsScale) }}</span>
+                            <span class="desc">同比上周</span>
+                        </p>
+                    </div>
+                    <div class="text">
+                        <p class="label">本月访客数量</p>
+                        <p class="value">{{ opts.chart[0].info.monthVisitor }}</p>
+                        <p class="rate" :class="opts.chart[0].info.monthUpsOrDownsScale < 0 ? 'down' : 'up'">
+                            <img class="down" src="@/assets/home/down.png" />
+                            <img class="up" src="@/assets/home/up.png" />
+                            <span class="num">{{ handleRate(opts.chart[0].info.monthUpsOrDownsScale) }}</span>
+                            <span class="desc">同比上月</span>
+                        </p>
+                    </div>
+                </div>
+                <div class="right">
+                    <div class="header flex">
+                        <date-range v-model="condition1" v-model:today="today1" hidden-today />
+                    </div>
+                    <div class="chart"></div>
+                </div>
+            </div>
+        </el-card>
+        <el-card class="row row-6" header="订单统计">
+            <div class="flex">
+                <div class="left">
+                    <div class="text">
+                        <p class="label">本周订单数量</p>
+                        <p class="value">{{ opts.chart[1].info.weekOrder }}</p>
+                        <p class="rate" :class="opts.chart[1].info.weekUpsOrDownsScale < 0 ? 'down' : 'up'">
+                            <img class="down" src="@/assets/home/down.png" />
+                            <img class="up" src="@/assets/home/up.png" />
+                            <span class="num">{{ handleRate(opts.chart[1].info.weekUpsOrDownsScale) }}</span>
+                            <span class="desc">同比上周</span>
+                        </p>
+                    </div>
+                    <div class="text">
+                        <p class="label">本月订单总数</p>
+                        <p class="value">{{ opts.chart[1].info.monthOrder }}</p>
+                        <p class="rate" :class="opts.chart[1].info.monthUpsOrDownsScale < 0 ? 'down' : 'up'">
+                            <img class="down" src="@/assets/home/down.png" />
+                            <img class="up" src="@/assets/home/up.png" />
+                            <span class="num">{{ handleRate(opts.chart[1].info.monthUpsOrDownsScale) }}</span>
+                            <span class="desc">同比上月</span>
+                        </p>
+                    </div>
+                </div>
+                <div class="right">
+                    <div class="header flex">
+                        <date-range v-model="condition2" v-model:today="today2" />
+                    </div>
+                    <div class="chart"></div>
+                </div>
+            </div>
+        </el-card>
+        <el-card class="row row-7" header="销售统计">
+            <div class="flex">
+                <div class="left">
+                    <div class="text">
+                        <p class="label">本周销售总额</p>
+                        <p class="value">{{ opts.chart[2].info.weekSales }}</p>
+                        <p class="rate" :class="opts.chart[2].info.weekUpsOrDownsScale < 0 ? 'down' : 'up'">
+                            <img class="down" src="@/assets/home/down.png" />
+                            <img class="up" src="@/assets/home/up.png" />
+                            <span class="num">{{ handleRate(opts.chart[2].info.weekUpsOrDownsScale) }}</span>
+                            <span class="desc">同比上周</span>
+                        </p>
+                    </div>
+                    <div class="text">
+                        <p class="label">本月销售总额</p>
+                        <p class="value">{{ opts.chart[2].info.monthSales }}</p>
+                        <p class="rate" :class="opts.chart[2].info.monthUpsOrDownsScale < 0 ? 'down' : 'up'">
+                            <img class="down" src="@/assets/home/down.png" />
+                            <img class="up" src="@/assets/home/up.png" />
+                            <span class="num">{{ handleRate(opts.chart[2].info.monthUpsOrDownsScale) }}</span>
+                            <span class="desc">同比上月</span>
+                        </p>
+                    </div>
+                </div>
+                <div class="right">
+                    <div class="header flex">
+                        <date-range v-model="condition3" v-model:today="today3" />
+                    </div>
+                    <div class="chart"></div>
+                </div>
+            </div>
+        </el-card>
+    </div>
 </template>
 
-<script setup></script>
+<script setup>
+    import * as echarts from 'echarts';
+    import DateRange from './dateRange.vue';
+    const router = useRouter();
+    const store = useStore();
+    const opts = computed(() => store.state.home.opts);
+    const condition1 = ref([]);
+    const today1 = ref(false);
+    watch(condition1, async (value) => {
+        if (unref(today1)) {
+            await store.dispatch('home/loadChartData11');
+            handleChart(
+                '.row-5 .chart',
+                '访客数量',
+                unref(opts).chart[0].data,
+                (params) =>
+                    `${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
+            );
+        } else {
+            await store.dispatch('home/loadChartData1', {
+                beginDate: value[0].split(' ')[0],
+                endDate: value[1].split(' ')[0],
+            });
+            handleChart('.row-5 .chart', '访客数量', unref(opts).chart[0].data);
+        }
+    });
+    const condition2 = ref([]);
+    const today2 = ref(false);
+    watch(condition2, async (value) => {
+        if (unref(today2)) {
+            await store.dispatch('home/loadChartData22');
+            handleChart(
+                '.row-6 .chart',
+                '订单数量',
+                unref(opts).chart[1].data,
+                (params) =>
+                    `${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
+            );
+        } else {
+            await store.dispatch('home/loadChartData2', {
+                beginDate: value[0].split(' ')[0],
+                endDate: value[1].split(' ')[0],
+            });
+            handleChart('.row-6 .chart', '订单数量', unref(opts).chart[1].data);
+        }
+    });
+    const condition3 = ref([]);
+    const today3 = ref(false);
+    watch(condition3, async (value) => {
+        if (unref(today3)) {
+            await store.dispatch('home/loadChartData33');
+            handleChart(
+                '.row-7 .chart',
+                '销售额',
+                unref(opts).chart[2].data,
+                (params) =>
+                    `${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
+            );
+        } else {
+            await store.dispatch('home/loadChartData3', {
+                beginDate: value[0].split(' ')[0],
+                endDate: value[1].split(' ')[0],
+            });
+            handleChart('.row-7 .chart', '销售额', unref(opts).chart[2].data);
+        }
+    });
+    const handleValue = (item) => {
+        let res = item.value;
+        if (res !== '-') {
+            res = new Number(item.value).toLocaleString();
+            if (item.type === 'money') {
+                res = '￥' + res;
+            }
+        }
+        return res;
+    };
+    const handleRate = (num) => (num === '--' ? num : new Number(Math.abs(num || 0)).toFixed(2) + '%');
 
-<style lang="less" scoped></style>
+    const handleRoute = (route) => router.push(route);
+    const charts = ref({});
+    window.addEventListener('resize', () =>
+        setTimeout(() => {
+            Object.entries(unref(charts)).forEach((entry) => {
+                entry[1].resize();
+            });
+        }, 100)
+    );
+    const handleChart = (
+        selector,
+        name,
+        data,
+        formatter = (params) =>
+            `${params[0].axisValue}<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName}<b style="margin-left:10px;">${params[0].value}</b>`
+    ) => {
+        let chart = charts.value[selector];
+        chart?.dispose();
+        chart = charts.value[selector] = echarts.init(document.querySelector(selector));
+        const option = {
+            gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'],
+            visualMap: [
+                {
+                    show: false,
+                    type: 'continuous',
+                    dimension: 0,
+                    min: 0,
+                    max: data.length - 1,
+                },
+            ],
+            tooltip: {
+                trigger: 'axis',
+                formatter,
+            },
+            grid: {
+                left: '0',
+                right: '0',
+                bottom: '30px',
+                top: '60px',
+                containLabel: true,
+            },
+            xAxis: {
+                data: data.map((item) => item.label),
+            },
+            yAxis: {
+                minInterval: 1,
+            },
+            series: {
+                type: 'line',
+                name,
+                showSymbol: false,
+                smooth: true,
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(29, 231, 255, 0.3)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(29, 231, 255, 0)',
+                        },
+                    ]),
+                },
+                data: data.map((item) => item.value),
+            },
+        };
+        chart.setOption(option);
+    };
+    onActivated(() => {
+        store.dispatch('home/load');
+    });
+</script>
+
+<style lang="less" scoped>
+    @big-font: 24px;
+    @super-font: 32px;
+    .container {
+        height: auto !important;
+        background: #f6f7fb;
+        color: #1d2129;
+        .flex {
+            display: flex;
+        }
+        .red {
+            color: var(--el-color-danger);
+        }
+        .el-card {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            border-radius: 4px;
+            box-shadow: none;
+            border: none;
+            :deep(.el-card__header) {
+                padding: 20px 30px 0;
+                font-weight: bolder;
+                border: none;
+                font-size: 16px;
+                color: #333;
+            }
+            :deep(.el-card__body) {
+                padding: 20px 30px;
+                flex: 1;
+            }
+        }
+        .row {
+            & + .row {
+                margin-top: 30px;
+            }
+            .el-card {
+                & + .el-card {
+                    margin-left: 30px;
+                }
+            }
+            &-1 {
+                .el-card {
+                    height: 140px;
+                    & + .el-card {
+                        margin-left: 40px;
+                    }
+                }
+                .flex {
+                    justify-content: space-around;
+                    align-items: center;
+                    height: 100%;
+                }
+                .label {
+                    font-size: 16px;
+                    margin-bottom: 16px;
+                }
+                .value {
+                    font-size: @big-font;
+                    font-weight: bolder;
+                }
+                img {
+                    width: 74px;
+                    height: 74px;
+                }
+            }
+            &-2 {
+                ul {
+                    display: flex;
+                    flex-wrap: wrap;
+                    li {
+                        width: 29%;
+                        height: 40px;
+                        padding: @layout-space 3%;
+                        margin: 0 2%;
+                        border-bottom: 1px solid #eee;
+                        cursor: pointer;
+                        display: flex;
+                        justify-content: space-between;
+                        &:nth-of-type(4),
+                        &:nth-of-type(5) {
+                            margin-top: 10px;
+                        }
+                        &:hover {
+                            color: var(--el-color-primary);
+                        }
+                    }
+                }
+            }
+            &-3 {
+                ul {
+                    display: flex;
+                    li {
+                        padding: @layout-space 53px;
+                        cursor: pointer;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        img {
+                            width: 50px;
+                            height: 50px;
+                            margin-bottom: 10px;
+                        }
+                        &:hover {
+                            color: var(--el-color-primary);
+                        }
+                    }
+                }
+            }
+            &-4 {
+                ul {
+                    display: flex;
+                    justify-content: space-evenly;
+                    li {
+                        flex: 1;
+                        padding: @layout-space 3%;
+                        margin: 0 2%;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        .value {
+                            font-size: @big-font;
+                            margin-bottom: 10px;
+                        }
+                    }
+                }
+            }
+            &-5,
+            &-6,
+            &-7 {
+                .left {
+                    flex-shrink: 0;
+                    border-right: 1px solid #eee;
+                    margin-right: 50px;
+                    padding: 0 96px;
+                    .text {
+                        & + .text {
+                            margin-top: 34px;
+                        }
+                        .label {
+                            font-size: 16px;
+                            color: #666;
+                        }
+                        .desc {
+                            font-size: 12px;
+                            color: #999;
+                            margin-left: 7px;
+                        }
+                        .value {
+                            font-size: @super-font;
+                            margin: 9px 0 6px;
+                        }
+                        .rate {
+                            font-size: 14px;
+                            img {
+                                width: 10px;
+                                height: 12px;
+                                margin-right: 4px;
+                            }
+                            &.down {
+                                .up {
+                                    display: none;
+                                }
+                                .num {
+                                    color: var(--el-color-success);
+                                }
+                            }
+                            &.up {
+                                .down {
+                                    display: none;
+                                }
+                                .num {
+                                    color: var(--el-color-danger);
+                                }
+                            }
+                        }
+                    }
+                }
+                .right {
+                    flex: 1;
+                    position: relative;
+                    .header {
+                        margin-bottom: @layout-space;
+                        justify-content: flex-end;
+                        align-items: center;
+                        position: absolute;
+                        top: -20px;
+                        right: 0;
+                    }
+                    .chart {
+                        width: 100%;
+                        height: 300px;
+                    }
+                }
+            }
+        }
+    }
+</style>

src/views/sales/order/index.vue

@@ -91,7 +91,7 @@
         },
     });
     watch(
-        () => route.params.id,
+        () => route.query.id,
         (value) => {
             state.condition.userId = value;
         },
@@ -99,11 +99,8 @@
     );
     watch(
         () => state.condition,
-        (value, old) => {
+        (value) => {
             store.commit('order/setCondition', _.cloneDeep(value));
-            if (value.userId !== old?.userId) {
-                handleSearch();
-            }
         },
         { immediate: true, deep: true }
     );
@@ -114,6 +111,12 @@
         },
         { deep: true }
     );
+    watch(
+        () => state.condition.userId,
+        () => {
+            handleSearch();
+        }
+    );
     const handleReset = () => {
         state.condition = {
             userId: null,
@@ -151,7 +154,13 @@
         await store.dispatch('order/search');
         loading.value = false;
     };
-    onActivated(handleSearch);
+    onActivated(() => {
+        if (route.query.status) {
+            state.condition.orderStatus = route.query.status.split(',').map((item) => +item);
+        } else {
+            handleSearch();
+        }
+    });
 
     /* 导出订单 */
     const handleExport = async () => {

src/views/sales/product/form/step1.vue

@@ -132,9 +132,10 @@
                 if (id && id !== state.form.id) {
                     let res = await store.dispatch('product/detail', id);
                     res.pictureList = res.pictureList || [res.mainPicture];
-                    res.fileList = res.virtualProductVOList
+                    res.fileList =
-                        ?.filter((item) => item.shipType === 1)
+                        res.virtualProductVOList
-                        .map((item) => item.shipContent);
+                            ?.filter((item) => item.shipType === 1)
+                            .map((item) => item.shipContent) || [];
                     res.autoSend = res.virtualProductVOList?.find((item) => item.shipType === 2)?.shipContent;
                     Object.assign(state.form, res);
                 }

src/views/sales/service/index.vue

@@ -58,6 +58,7 @@
 <script setup lang="jsx">
     import ElButton from '@/components/extra/ElButton.vue';
     const router = useRouter();
+    const route = useRoute();
     const store = useStore();
     const loading = ref(false);
     const code = computed(() => store.state.service.code);
@@ -131,7 +132,13 @@
         await store.dispatch('service/search');
         loading.value = false;
     };
-    onActivated(handleSearch);
+    onActivated(() => {
+        if (route.query.status) {
+            state.condition.refundStatus = route.query.status.split(',').map((item) => +item);
+        } else {
+            handleSearch();
+        }
+    });
 
     /* 导出订单 */
     const handleExport = async () => {