msb-mca
/
shop-admin
mirror of http://internel-git.mashibing.cn/yanxuan-frontend/shop-admin.git
2.1k
2
Code Issues Projects Releases Wiki Activity

feat: 推荐商品静态页面

Browse Source
feature/task1.0.0__0514__ch
向文可 3 years ago
parent 13d294e238
commit 0607c6dbaa
5 changed files with 472 additions and 0 deletions
Show Stats Download Patch File Download Diff File

9
src/router/modules/operation.js
Unescape View File

@ -40,6 +40,15 @@ export default [
},
],
},
{
path: 'recommand',
name: 'RecommandActivity',
component: () => import('@/views/operation/recommand/index.vue'),
meta: {
title: '商品推荐',
icon: 'Checked',
},
},
],
},
];

95
src/store/modules/operation/recommand/recommandActivity.js
Unescape View File

@ -0,0 +1,95 @@
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 },
],
},
});
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,
};

95
src/store/modules/sales/productPicker.js
Unescape View File

@ -0,0 +1,95 @@
import * as api from '@/api/sales/category.js';
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
const state = () => ({
code: 'ProductPicker',
condition: {
orderIs: [],
},
list: [],
total: 0,
summary: [],
opts: {
init: false,
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 ({ state, commit }) => {
commit('setOpts', {
...state.opts,
init: true,
category: await api.search(),
});
},
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,
};

141
src/views/operation/recommand/index.vue
Unescape View File

@ -0,0 +1,141 @@
<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>
<ProductPicker ref="refsPicker" @pick="handlePick" />
</div>
</template>
<script setup lang="jsx">
import ElButton from '@/components/extra/ElButton.vue';
import ElSwitch from '@/components/extra/ElSwitch.vue';
import ProductPicker from '@/views/sales/product/picker.vue';
const store = useStore();
const loading = ref(false);
const code = computed(() => store.state.recommandActivity.code);
const list = computed(() => store.state.recommandActivity.list);
const total = computed(() => store.state.recommandActivity.total);
const opts = computed(() => store.state.recommandActivity.opts);
if (!unref(opts).init) {
store.dispatch('recommandActivity/load');
}
/* 列表查询 */
const state = reactive({
condition: {
name: null,
status: null,
},
});
watch(
() => state.condition,
(value) => {
store.commit('recommandActivity/setCondition', _.cloneDeep(value));
},
{ immediate: true, deep: true }
);
const handleReset = () => {
state.condition = {
name: null,
status: null,
};
};
const handleSearch = async () => {
loading.value = true;
await store.dispatch('recommandActivity/search');
loading.value = false;
};
const refsPicker = ref(null);
// 添加/编辑
const handleCreate = () => {
unref(refsPicker).show();
};
// 保存
const handlePick = async (rows) => {
console.info(rows);
};
/* 操作 */
// 上下架
const handleEnable = (row, value) => {
row.enabled = value;
};
// 删除
const handleRemove = async (rows) => {
await store.dispatch(
'recommandActivity/remove',
rows.map((item) => item.id)
);
};
/* 列表配置 */
const config = reactive({
page: false,
columns: [
{
label: '编号',
prop: 'id',
width: 100,
},
{
label: '商品图片',
minWidth: 100,
slots: {
default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="100px" />,
},
},
{
label: '商品名称',
prop: 'name',
minWidth: 160,
},
{
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={() => handleRemove([row])}>
移除
</ElButton>
</div>
),
},
},
],
});
</script>
<style lang="less" scoped></style>

132
src/views/sales/product/picker.vue
Unescape View File

@ -0,0 +1,132 @@
<template>
<el-dialog v-model="visible" title="选择商品">
<TableList
ref="refsTable"
v-loading="loading"
:code="code"
:config="config"
:data="list"
:operation="['search']"
:reset="handleReset"
:total="total"
@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"
:config="{ label: 'name', value: 'id' }"
:opts="opts.category"
/>
</el-form-item>
</el-form>
</template>
</TableList>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handlePick">确认选择</el-button>
</template>
</el-dialog>
</template>
<script setup lang="jsx">
const emits = defineEmits(['pick']);
const store = useStore();
const loading = ref(false);
const visible = ref(false);
const refsTable = ref(null);
const code = computed(() => store.state.productPicker.code);
const list = computed(() => store.state.productPicker.list);
const total = computed(() => store.state.productPicker.total);
const opts = computed(() => store.state.productPicker.opts);
if (!unref(opts).init) {
store.dispatch('productPicker/load');
}
/* 列表查询 */
const state = reactive({
condition: {
name: null,
category: null,
},
});
watch(
() => state.condition,
(value) => {
store.commit('productPicker/setCondition', _.cloneDeep(value));
},
{ immediate: true, deep: true }
);
const handleReset = () => {
state.condition = {
name: null,
category: null,
};
};
const handleSearch = async () => {
loading.value = true;
await store.dispatch('productPicker/search');
loading.value = false;
};
/* 操作 */
// 显示
const handleShow = () => {
visible.value = true;
};
// 取消
const handleClose = () => {
visible.value = false;
};
// 确定
const handlePick = async () => {
emits('pick', [...unref(refsTable).selection]);
};
defineExpose({
show: handleShow,
close: handleClose,
});
/* 列表配置 */
const config = reactive({
page: false,
columns: [
{
type: 'selection',
width: 60,
},
{
label: '编号',
prop: 'id',
width: 100,
},
{
label: '商品图片',
minWidth: 100,
slots: {
default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="100px" />,
},
},
{
label: '商品名称',
prop: 'name',
minWidth: 160,
},
{
label: '商品价格',
prop: 'price',
minWidth: 160,
},
],
});
</script>
<style lang="less" scoped>
.common-list {
height: 500px;
}
</style>
Write Preview
Loading…
Cancel
Save