feat: 今天页面

3 years ago · bb05072e3e
parent 3b7484026c
commit bb05072e3e
3 changed files with 347 additions and 2 deletions
--- a/src/views/operation/recommand/product.vue
+++ b/src/views/operation/recommand/product.vue
@ -0,0 +1,195 @@
 <template>
    <div class="list-container">
        <ul class="time-range">
            <li v-for="(item, index) in opts.timeRange" :key="index">
                <el-button
                    :type="state.condition.orderStatus.includes(item.value) ? 'primary' : 'default'"
                    @click="handleTimeRange(item.value)"
                >
                    <span>
                        {{ item.label }}
                    </span>
                    <span>(</span>
                    <span class="num">{{ summary[index] || 0 }}</span>
                    <span>)</span>
                </el-button>
            </li>
        </ul>
        <TableList
            v-loading="loading"
            :code="code"
            :config="config"
            :data="list"
            :operation="['search', 'create']"
            :reset="handleReset"
            title="活动商品"
            :total="total"
            @create="handleCreate"
            @search="handleSearch"
        >
            <template #search>
                <el-form inline>
                    <el-form-item label="商品名称" prop="name">
                        <el-input v-model="state.condition.name" />
                    </el-form-item>
                    <el-form-item label="商品分类" prop="category">
                        <el-select v-model="state.condition.category" :opts="opts.category" />
                    </el-form-item>
                </el-form>
            </template>
        </TableList>
    </div>
 </template>
 <script setup lang="jsx">
    import ElButton from '@/components/extra/ElButton.vue';
    const store = useStore();
    const loading = ref(false);
    const code = computed(() => store.state.limitProduct.code);
    const list = computed(() => store.state.limitProduct.list);
    const total = computed(() => store.state.limitProduct.total);
    const summary = computed(() => store.state.limitProduct.summary);
    const opts = computed(() => store.state.limitProduct.opts);
    if (!unref(opts).init) {
        store.dispatch('limitProduct/load');
    }
    /* 查询订单 */
    const state = reactive({
        condition: {
            name: null,
            category: null,
        },
    });
    watch(
        () => state.condition,
        (value) => {
            store.commit('limitProduct/setCondition', _.cloneDeep(value));
        },
        { immediate: true, deep: true }
    );
    watch(
        () => state.condition.orderStatus,
        () => {
            handleSearch();
        },
        { deep: true }
    );
    const handleReset = () => {
        state.condition = {
            name: null,
            category: null,
        };
    };
    const handleTimeRange = (status) => {
        let index = state.condition.orderStatus.indexOf(status);
        if (index === -1) {
            if (status === 0) {
                state.condition.orderStatus = [0];
            } else {
                state.condition.orderStatus.push(status);
                state.condition.orderStatus = state.condition.orderStatus.filter((item) => item > 0);
            }
        } else {
            if (status !== 0) {
                state.condition.orderStatus.splice(index, 1);
                if (state.condition.orderStatus.length) {
                    state.condition.orderStatus = state.condition.orderStatus.filter((item) => item > 0);
                } else {
                    state.condition.orderStatus = [0];
                }
            }
        }
    };
    const handleSearch = async () => {
        loading.value = true;
        await store.dispatch('limitProduct/search');
        loading.value = false;
    };
    /* 导出订单 */
    const handleCreate = async () => {
        console.info('create');
    };
    const handleRemove = (row, index) => {
        console.info(row, index);
    };
    const handleSku = (row) => {
        console.info(row);
    };
    /* 列表配置 */
    const config = reactive({
        columns: [
            {
                label: '编号',
                prop: 'orderNo',
                minWidth: 100,
            },
            {
                label: '商品图片',
                width: 100,
                slots: {
                    default: ({ row }) => <ElImage src={row.photo} alt={row.name} height="100px" />,
                },
            },
            {
                label: '商品名称',
                prop: 'payAmount',
                minWidth: 240,
            },
            {
                label: '商品价格',
                prop: 'payTypeDesc',
                width: 120,
            },
            {
                label: '活动已售数量',
                width: 120,
                prop: 'orderSourceDesc',
            },
            {
                label: 'SKU商品配置',
                width: 120,
                slots: {
                    default: ({ row }) => (
                        <ElButton type="text" onClick={() => handleSku(row)}>
                            <ElIcon name="Edit" />
                        </ElButton>
                    ),
                },
            },
            {
                label: '操作',
                fixed: 'right',
                width: 160,
                slots: {
                    default: ({ row, $index }) => (
                        <ElButton type="text" onClick={() => handleRemove(row, $index)}>
                            移除
                        </ElButton>
                    ),
                },
            },
        ],
    });
 </script>
 <style lang="less" scoped>
    .list-container {
        display: flex;
        flex-direction: column;
        .common-list {
            flex-shrink: 1;
        }
        .time-range {
            display: flex;
            margin-bottom: @layout-space;
            li {
                + li {
                    margin-left: @layout-space;
                }
            }
        }
    }
 </style>
--- a/src/views/operation/recommand/time.vue
+++ b/src/views/operation/recommand/time.vue
@ -0,0 +1,150 @@
 <template>
    <div class="list-container">
        <TableList
            v-loading="loading"
            :code="code"
            :config="config"
            :data="list"
            :operation="['create']"
            :reset="handleReset"
            title="时间段"
            :total="total"
            @create="handleCreate"
            @search="handleSearch"
        >
            <template #operation>
                <el-button type="success" @click="handleProduct">下一步，设置秒杀商品</el-button>
            </template>
        </TableList>
    </div>
 </template>
 <script setup lang="jsx">
    import ElButton from '@/components/extra/ElButton.vue';
    import ElSwitch from '@/components/extra/ElSwitch.vue';
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const loading = ref(false);
    const code = computed(() => store.state.limitTime.code);
    const list = computed(() => _.cloneDeep(store.state.limitTime.list));
    const total = computed(() => store.state.limitTime.total);
    const opts = computed(() => store.state.limitTime.opts);
    if (!unref(opts).init) {
        store.dispatch('limitTime/load');
    }
    /* 列表查询 */
    const state = reactive({
        condition: {
            name: null,
            status: null,
        },
    });
    watch(
        () => state.condition,
        (value) => {
            store.commit('limitTime/setCondition', _.cloneDeep(value));
        },
        { immediate: true, deep: true }
    );
    const handleReset = () => {
        state.condition = {
            name: null,
            status: null,
        };
    };
    const handleSearch = async () => {
        loading.value = true;
        await store.dispatch('limitTime/search');
        loading.value = false;
    };
    /* 操作 */
    // 新增
    const handleCreate = () => {
        store.commit('limitTime/setList', [
            ...unref(list),
            { edit: true, name: null, startTime: null, endTime: null, enabled: true },
        ]);
    };
    // 设置商品
    const handleProduct = () => {
        router.push({ name: 'UpdateLimitProduct', params: { id: route.params.id } });
    };
    // 启用
    const handleEnable = (row, value) => {
        row.enabled = value;
    };
    // 编辑
    const handleUpdate = (row) => {
        row.edit = !row.edit;
    };
    // 删除
    const handleRemove = async (rows) => {
        await store.dispatch(
            'limitTime/remove',
            rows.map((item) => item.id)
        );
    };
    /* 列表配置 */
    const config = reactive({
        page: false,
        columns: [
            {
                label: '秒杀时段名称',
                minWidth: 160,
                slots: {
                    default: ({ row }) => (row.edit ? <ElInput v-model={row.name} /> : row.name),
                },
            },
            {
                label: '开始时间',
                width: 160,
                slots: {
                    default: ({ row }) => (row.edit ? <ElTimePicker v-model={row.startTime} /> : row.startTime),
                },
            },
            {
                label: '活动状态',
                width: 160,
                slots: {
                    default: ({ row }) => (row.edit ? <ElTimePicker v-model={row.endTime} /> : row.endTime),
                },
            },
            {
                label: '启用',
                width: 100,
                slots: {
                    default: ({ row }) => (
                        <ElSwitch value={row.enabled} onChange={(enabled) => handleEnable(row, enabled)} />
                    ),
                },
            },
            {
                label: '操作',
                fixed: 'right',
                width: 120,
                slots: {
                    default: ({ row }) => (
                        <div>
                            <ElButton type="text" onClick={() => handleUpdate(row)}>
                                {row.edit ? '保存' : '编辑'}
                            </ElButton>
                            <ElButton type="text" onClick={() => handleRemove([row])}>
                                删除
                            </ElButton>
                        </div>
                    ),
                },
            },
        ],
    });
 </script>
 <style lang="less" scoped>
    :deep(.el-date-editor--time) {
        width: 100%;
    }
 </style>
--- a/vite.config.js
+++ b/vite.config.js
@ -21,8 +21,8 @@ export default (configEnv) => {
            proxy: {
                '/api': {
                    // target: 'http://192.168.10.52:8090/', // 显雨
-                    // target: 'http://192.168.10.252:8090', // 高玉
+                    target: 'http://192.168.10.251:8090', // 高玉
-                    target: 'http://k8s-horse-gateway.mashibing.cn/', // 测试地址
+                    // target: 'http://k8s-horse-gateway.mashibing.cn/', // 测试地址
                    // target: 'https://gateway.mashibing.cn', // 预发地址
                    // target: 'https://gateway.mashibing.com', // 生产环境
                    changeOrigin: true,