feat: 秒杀活动静态页面

feature/task1.0.0__0514__ch
向文可 3 years ago
parent ef6ed57437
commit 13d294e238

@ -7,7 +7,8 @@
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"jsx": "preserve"
},
"exclude": ["node_modules"]
}

@ -72,8 +72,18 @@ export const excel = (fileName, data) => {
* @returns 字典标签
*/
export const dict = (dict, value, opts = {}) => {
value = value || [];
value = value instanceof Array ? value : [value];
opts = { label: 'label', value: 'value', default: '未知', ...opts };
return (dict ? dict.value || dict : []).find((item) => item[opts.value] === value)?.[opts.label] || opts.default;
return (
value
.map(
(v) =>
(dict ? dict.value || dict : []).find((item) => item[opts.value] === v)?.[opts.label] ||
opts.default
)
.join(',') || opts.default
);
};
/**
* 显示姓名

@ -130,6 +130,7 @@ const flatRoutes = (routes, parent = { path: '/', meta: {} }) =>
}
route.path = parent.path + route.path;
}
route.meta = route.meta || {};
route.meta.menu = route.path.replaceAll(/\/:[^?]+\?/g, '');
let activeMenu = route.meta.activeMenu;
if (!activeMenu && route.meta.hidden) {

@ -0,0 +1,45 @@
export default [
{
path: '/operation',
name: 'OperationCenter',
component: () => import('@/layouts/default.vue'),
meta: {
title: '运营中心',
icon: 'computer-fill',
layout: true,
},
children: [
{
path: 'limit',
name: 'LimitActivity',
component: () => import('@/views/operation/limit/index.vue'),
meta: {
title: '秒杀活动',
icon: 'fire-fill',
},
children: [
{
path: 'time/:id',
name: 'UpdateLimitTime',
component: () => import('@/views/operation/limit/time.vue'),
meta: {
title: '设置时段',
icon: 'fire-fill',
hidden: true,
},
},
{
path: 'product/:id',
name: 'UpdateLimitProduct',
component: () => import('@/views/operation/limit/product.vue'),
meta: {
title: '设置商品',
icon: 'fire-fill',
hidden: true,
},
},
],
},
],
},
];

@ -0,0 +1,96 @@
import * as api from '@/api/sales/category.js';
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
const state = () => ({
code: 'LimitActivity',
condition: {},
list: [],
total: 0,
summary: [],
opts: {
init: false,
status: [
{ label: '活动未开始', value: 1 },
{ label: '活动进行中', value: 2 },
{ label: '活动已结束', value: 3 },
],
},
});
const getters = {};
const mutations = {
setCode: (state, data) => (state.code = data),
setCondition: (state, data) => (state.condition = data),
setList: (state, data) => (state.list = data),
setTotal: (state, data) => (state.total = data),
setSummary: (state, data) => (state.summary = data),
setOpts: (state, data) => (state.opts = data),
};
const actions = {
search: async ({ state, commit }) => {
let res = await api.search(state.condition);
commit('setList', res);
if (!res) {
ElMessage.error('查询商品分类列表失败');
}
return res;
},
load: async ({ commit, state }) => {
commit('setOpts', {
...state.opts,
init: true,
});
},
detail: async ({ state, dispatch }, id) => {
if (!state.list.length) {
await dispatch('search');
}
let res = state.list.find((item) => item.id === id);
if (!res) {
ElMessage.error('加载详情失败');
}
return res;
},
save: async ({ dispatch }, data) => {
let save = data.id ? api.update : api.create;
let res = await save(data);
if (res) {
ElMessage.success('保存成功');
dispatch('search');
} else {
ElMessage.error('保存失败');
}
return res;
},
sort: async (context, data) => {
let res = await api.sort(data);
if (res) {
ElMessage.success(`移动前序号:${data.oldSort + 1};移动后序号:${data.currentSort + 1}`);
} else {
ElMessage.error('保存排序失败');
}
return res;
},
remove: async ({ dispatch }, ids) => {
if (!ids.length) {
ElMessage.warning('请选择要删除的数据');
} else {
try {
await ElMessageBox.confirm('数据删除后无法恢复,确定要删除吗?', '危险操作');
let res = await api.remove({ id: ids.join(',') });
if (res) {
ElMessage.success('删除成功');
dispatch('search');
} else {
ElMessage.error('删除失败');
}
} catch (e) {
console.info('取消删除', e);
}
}
},
};
export default {
state,
getters,
mutations,
actions,
};

@ -0,0 +1,93 @@
import * as api from '@/api/sales/category.js';
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
const state = () => ({
code: 'LimitActivity',
condition: {},
list: [],
total: 0,
summary: [],
opts: {
init: false,
timeRange: [],
category: [],
},
});
const getters = {};
const mutations = {
setCode: (state, data) => (state.code = data),
setCondition: (state, data) => (state.condition = data),
setList: (state, data) => (state.list = data),
setTotal: (state, data) => (state.total = data),
setSummary: (state, data) => (state.summary = data),
setOpts: (state, data) => (state.opts = data),
};
const actions = {
search: async ({ state, commit }) => {
let res = await api.search(state.condition);
commit('setList', res);
if (!res) {
ElMessage.error('查询商品分类列表失败');
}
return res;
},
load: async ({ commit, state }) => {
commit('setOpts', {
...state.opts,
init: true,
});
},
detail: async ({ state, dispatch }, id) => {
if (!state.list.length) {
await dispatch('search');
}
let res = state.list.find((item) => item.id === id);
if (!res) {
ElMessage.error('加载详情失败');
}
return res;
},
save: async ({ dispatch }, data) => {
let save = data.id ? api.update : api.create;
let res = await save(data);
if (res) {
ElMessage.success('保存成功');
dispatch('search');
} else {
ElMessage.error('保存失败');
}
return res;
},
sort: async (context, data) => {
let res = await api.sort(data);
if (res) {
ElMessage.success(`移动前序号:${data.oldSort + 1};移动后序号:${data.currentSort + 1}`);
} else {
ElMessage.error('保存排序失败');
}
return res;
},
remove: async ({ dispatch }, ids) => {
if (!ids.length) {
ElMessage.warning('请选择要删除的数据');
} else {
try {
await ElMessageBox.confirm('数据删除后无法恢复,确定要删除吗?', '危险操作');
let res = await api.remove({ id: ids.join(',') });
if (res) {
ElMessage.success('删除成功');
dispatch('search');
} else {
ElMessage.error('删除失败');
}
} catch (e) {
console.info('取消删除', e);
}
}
},
};
export default {
state,
getters,
mutations,
actions,
};

@ -0,0 +1,96 @@
import * as api from '@/api/sales/category.js';
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
const state = () => ({
code: 'LimitTime',
condition: {},
list: [],
total: 0,
summary: [],
opts: {
init: false,
status: [
{ label: '活动未开始', value: 1 },
{ label: '活动进行中', value: 2 },
{ label: '活动已结束', value: 3 },
],
},
});
const getters = {};
const mutations = {
setCode: (state, data) => (state.code = data),
setCondition: (state, data) => (state.condition = data),
setList: (state, data) => (state.list = data),
setTotal: (state, data) => (state.total = data),
setSummary: (state, data) => (state.summary = data),
setOpts: (state, data) => (state.opts = data),
};
const actions = {
search: async ({ state, commit }) => {
let res = await api.search(state.condition);
commit('setList', res);
if (!res) {
ElMessage.error('查询商品分类列表失败');
}
return res;
},
load: async ({ commit, state }) => {
commit('setOpts', {
...state.opts,
init: true,
});
},
detail: async ({ state, dispatch }, id) => {
if (!state.list.length) {
await dispatch('search');
}
let res = state.list.find((item) => item.id === id);
if (!res) {
ElMessage.error('加载详情失败');
}
return res;
},
save: async ({ dispatch }, data) => {
let save = data.id ? api.update : api.create;
let res = await save(data);
if (res) {
ElMessage.success('保存成功');
dispatch('search');
} else {
ElMessage.error('保存失败');
}
return res;
},
sort: async (context, data) => {
let res = await api.sort(data);
if (res) {
ElMessage.success(`移动前序号:${data.oldSort + 1};移动后序号:${data.currentSort + 1}`);
} else {
ElMessage.error('保存排序失败');
}
return res;
},
remove: async ({ dispatch }, ids) => {
if (!ids.length) {
ElMessage.warning('请选择要删除的数据');
} else {
try {
await ElMessageBox.confirm('数据删除后无法恢复,确定要删除吗?', '危险操作');
let res = await api.remove({ id: ids.join(',') });
if (res) {
ElMessage.success('删除成功');
dispatch('search');
} else {
ElMessage.error('删除失败');
}
} catch (e) {
console.info('取消删除', e);
}
}
},
};
export default {
state,
getters,
mutations,
actions,
};

@ -0,0 +1,209 @@
<template>
<div class="list-container">
<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="status">
<el-select v-model="state.condition.status" :opts="opts.status" />
</el-form-item>
</el-form>
</template>
</TableList>
<el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '活动'">
<el-form ref="refsForm" label-width="100px" :model="formState.form" :rules="formState.rules">
<el-form-item label="活动名称" prop="name">
<el-input v-model="formState.form.name" />
</el-form-item>
<el-form-item label="活动名称" prop="time">
<el-date-picker
v-model="formState.form.time"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="formState.formVisible = false">取消</el-button>
<el-button type="primary" @click="handleSave"></el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="jsx">
import ElButton from '@/components/extra/ElButton.vue';
import ElSwitch from '@/components/extra/ElSwitch.vue';
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();
const loading = ref(false);
const code = computed(() => store.state.limitActivity.code);
const list = computed(() => store.state.limitActivity.list);
const total = computed(() => store.state.limitActivity.total);
const opts = computed(() => store.state.limitActivity.opts);
if (!unref(opts).init) {
store.dispatch('limitActivity/load');
}
/* 列表查询 */
const state = reactive({
condition: {
name: null,
status: null,
},
});
watch(
() => state.condition,
(value) => {
store.commit('limitActivity/setCondition', _.cloneDeep(value));
},
{ immediate: true, deep: true }
);
const handleReset = () => {
state.condition = {
name: null,
status: null,
};
};
const handleSearch = async () => {
loading.value = true;
await store.dispatch('limitActivity/search');
loading.value = false;
};
/* 表单 */
const formState = reactive({
formVisible: false,
refsForm: null,
form: {
name: null,
time: [],
},
rules: {
name: [{ required: true, message: '活动名称不能为空' }],
time: [{ required: true, message: '活动时间不能为空' }],
},
});
// /
const handleCreate = (row) => {
Object.assign(
formState.form,
row || {
name: null,
time: [],
}
);
formState.formVisible.value = true;
};
//
const handleSave = async () => {
try {
await unref(formState.refsForm).validate();
formState.formVisible = false;
} catch (e) {
console.info('取消保存', e);
}
};
/* 操作 */
//
const handleUpdateTime = (row) => {
router.push({ name: 'UpdateLimitTime', params: { id: row.id } });
};
//
const handleUpdateProduct = (row) => {
router.push({ name: 'UpdateLimitProduct', params: { id: row.id } });
};
//
const handleEnable = (row, value) => {
row.enabled = value;
};
//
const handleRemove = async (rows) => {
await store.dispatch(
'limitActivity/remove',
rows.map((item) => item.id)
);
};
/* 列表配置 */
const config = reactive({
page: false,
columns: [
{
label: '编号',
prop: 'id',
width: 100,
fixed: 'left',
},
{
label: '活动名称',
prop: 'name',
minWidth: 160,
fixed: 'left',
},
{
label: '活动状态',
width: 160,
slots: {
default: ({ row }) => proxy.$dict(unref(opts).status, row.status),
},
},
{
label: '活动时间',
width: 360,
slots: {
default: ({ row }) => row.startTime + ' - ' + row.endTime,
},
},
{
label: '上线/下线',
width: 120,
slots: {
default: ({ row }) => (
<ElSwitch value={row.isEnable} onChange={(visible) => handleEnable(row, visible)} />
),
},
},
{
label: '操作',
fixed: 'right',
width: 300,
slots: {
default: ({ row }) => (
<div>
<ElButton type="text" onClick={() => handleUpdateTime(row)}>
设置时段
</ElButton>
<ElButton type="text" onClick={() => handleUpdateProduct(row)}>
设置商品
</ElButton>
<ElButton type="text" onClick={() => handleCreate(row)}>
编辑
</ElButton>
<ElButton type="text" onClick={() => handleRemove([row])}>
删除
</ElButton>
</div>
),
},
},
],
});
</script>
<style lang="less" scoped></style>

@ -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>

@ -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>

@ -20,8 +20,9 @@ export default (configEnv) => {
open: false,
proxy: {
'/api': {
target: 'http://192.168.10.52:8090/',
// target: 'https://gateway-test.mashibing.cn', // 测试地址
// target: 'http://192.168.10.52:8090/', // 显雨
// target: 'http://192.168.10.252:8090', // 高玉
target: 'http://k8s-horse-gateway.mashibing.cn/', // 测试地址
// target: 'https://gateway.mashibing.cn', // 预发地址
// target: 'https://gateway.mashibing.com', // 生产环境
changeOrigin: true,

Loading…
Cancel
Save