Nick930826
2 years ago
22 changed files with 1681 additions and 4804 deletions
-
46package.json
-
227src/App.vue
-
216src/components/DialogAddCategory.vue
-
220src/components/DialogAddGood.vue
-
223src/components/DialogAddSwiper.vue
-
5src/components/Footer.vue
-
113src/components/Header.vue
-
66src/components/Table.vue
-
137src/main.js
-
7src/views/Account.vue
-
334src/views/AddGood.vue
-
86src/views/Category.vue
-
26src/views/Good.vue
-
210src/views/Guest.vue
-
2src/views/Index.vue
-
35src/views/IndexConfig.vue
-
17src/views/Login.vue
-
48src/views/Order.vue
-
46src/views/OrderDetail.vue
-
207src/views/Swiper.vue
-
35vite.config.js
-
4179yarn.lock
@ -1,145 +1,123 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="type == 'add' ? '添加分类' : '修改分类'" |
|||
v-model="visible" |
|||
:title="state.type == 'add' ? '添加分类' : '修改分类'" |
|||
v-model="state.visible" |
|||
width="400px" |
|||
@close="handleClose" |
|||
> |
|||
<el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" class="good-form"> |
|||
<el-form-item label="分类名称" prop="name"> |
|||
<el-input type="text" v-model="ruleForm.name"></el-input> |
|||
<el-form :model="state.ruleForm" :rules="state.rules" ref="formRef" label-width="100px" class="good-form"> |
|||
<el-form-item label="商品名称" prop="name"> |
|||
<el-input type="text" v-model="state.ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="排序值" prop="rank"> |
|||
<el-input type="number" max='200' v-model="ruleForm.rank"></el-input> |
|||
<el-input type="number" v-model="state.ruleForm.rank"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="visible = false">取 消</el-button> |
|||
<el-button @click="state.visible = false">取 消</el-button> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref, toRefs } from 'vue' |
|||
<script setup> |
|||
import { reactive, ref } from 'vue' |
|||
import { useRoute } from 'vue-router' |
|||
import axios from '@/utils/axios' |
|||
import { hasEmoji } from '@/utils/index' |
|||
import { ElMessage } from 'element-plus' |
|||
export default { |
|||
name: 'DialogAddCategory', |
|||
props: { |
|||
type: String, |
|||
reload: Function |
|||
|
|||
const props = defineProps({ |
|||
type: String, // 用于判断是添加还是编辑 |
|||
reload: Function // 添加或修改完后，刷新列表页 |
|||
}) |
|||
|
|||
const formRef = ref(null) |
|||
const route = useRoute() |
|||
const state = reactive({ |
|||
visible: false, |
|||
categoryLevel: 1, |
|||
parentId: 0, |
|||
ruleForm: { |
|||
name: '', |
|||
rank: '' |
|||
}, |
|||
setup(props) { |
|||
const formRef = ref(null) |
|||
const route = useRoute() |
|||
const state = reactive({ |
|||
visible: false, |
|||
categoryLevel: 1, |
|||
parentId: 0, |
|||
ruleForm: { |
|||
name: '', |
|||
rank: '' |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: 'true', message: '名称不能为空', trigger: ['change'] } |
|||
], |
|||
rank: [ |
|||
{ required: 'true', message: '排序值不能为空', trigger: ['change'] } |
|||
] |
|||
}, |
|||
id: '' |
|||
}) |
|||
// 获取详情 |
|||
const getDetail = (id) => { |
|||
axios.get(`/categories/${id}`).then(res => { |
|||
state.ruleForm = { |
|||
name: res.categoryName, |
|||
rank: res.categoryRank |
|||
} |
|||
state.parentId = res.parentId |
|||
state.categoryLevel = res.categoryLevel |
|||
}) |
|||
rules: { |
|||
name: [ |
|||
{ required: 'true', message: '名称不能为空', trigger: ['change'] } |
|||
], |
|||
rank: [ |
|||
{ required: 'true', message: '编号不能为空', trigger: ['change'] } |
|||
] |
|||
}, |
|||
id: '' |
|||
}) |
|||
// 获取详情 |
|||
const getDetail = (id) => { |
|||
axios.get(`/categories/${id}`).then(res => { |
|||
state.ruleForm = { |
|||
name: res.categoryName, |
|||
rank: res.categoryRank |
|||
} |
|||
// 开启弹窗 |
|||
const open = (id) => { |
|||
state.visible = true |
|||
if (id) { |
|||
state.id = id |
|||
getDetail(id) |
|||
state.parentId = res.parentId |
|||
state.categoryLevel = res.categoryLevel |
|||
}) |
|||
} |
|||
// 开启弹窗 |
|||
const open = (id) => { |
|||
state.visible = true |
|||
if (id) { |
|||
state.id = id |
|||
// 如果是有 id 传入，证明是修改模式 |
|||
getDetail(id) |
|||
} else { |
|||
// 否则为新增模式 |
|||
// 新增类目，从路由获取分类 level 级别和父分类 id |
|||
const { level = 1, parent_id = 0 } = route.query |
|||
state.ruleForm = { |
|||
name: '', |
|||
rank: '' |
|||
} |
|||
state.parentId = parent_id |
|||
state.categoryLevel = level |
|||
} |
|||
} |
|||
// 关闭弹窗 |
|||
const close = () => { |
|||
state.visible = false |
|||
} |
|||
const submitForm = () => { |
|||
formRef.value.validate((valid) => { |
|||
if (valid) { |
|||
if (props.type == 'add') { |
|||
// 添加方法 |
|||
axios.post('/categories', { |
|||
categoryLevel: state.categoryLevel, |
|||
parentId: state.parentId, |
|||
categoryName: state.ruleForm.name, |
|||
categoryRank: state.ruleForm.rank |
|||
}).then(() => { |
|||
ElMessage.success('添加成功') |
|||
state.visible = false |
|||
// 接口回调之后，运行重新获取列表方法 reload |
|||
if (props.reload) props.reload() |
|||
}) |
|||
} else { |
|||
// 新增类目，从路由获取父分类id 和 分类级别 |
|||
const { level = 1, parent_id = 0 } = route.query |
|||
state.ruleForm = { |
|||
name: '', |
|||
rank: '' |
|||
} |
|||
state.parentId = parent_id |
|||
state.categoryLevel = level |
|||
// 修改方法 |
|||
axios.put('/categories', { |
|||
categoryId: state.id, |
|||
categoryLevel: state.categoryLevel, |
|||
parentId: state.categoryLevel, |
|||
categoryName: state.ruleForm.name, |
|||
categoryRank: state.ruleForm.rank |
|||
}).then(() => { |
|||
ElMessage.success('修改成功') |
|||
state.visible = false |
|||
// 接口回调之后，运行重新获取列表方法 reload |
|||
if (props.reload) props.reload() |
|||
}) |
|||
} |
|||
} |
|||
// 关闭弹窗 |
|||
const close = () => { |
|||
state.visible = false |
|||
} |
|||
const handleClose = () => { |
|||
formRef.value.resetFields() |
|||
} |
|||
const submitForm = () => { |
|||
formRef.value.validate((valid) => { |
|||
if (valid) { |
|||
if (hasEmoji(state.ruleForm.name)) { |
|||
ElMessage.error('不要输入表情包，再输入就打死你个龟孙儿~') |
|||
return |
|||
} |
|||
if (state.ruleForm.name.length > 16) { |
|||
ElMessage.error('名称不能超过16个字符') |
|||
return |
|||
} |
|||
if (state.ruleForm.rank > 200) { |
|||
ElMessage.error('排序不能超过200') |
|||
return |
|||
} |
|||
if (props.type == 'add') { |
|||
axios.post('/categories', { |
|||
categoryLevel: state.categoryLevel, |
|||
parentId: state.parentId, |
|||
categoryName: state.ruleForm.name, |
|||
categoryRank: state.ruleForm.rank |
|||
}).then(() => { |
|||
ElMessage.success('添加成功') |
|||
state.visible = false |
|||
if (props.reload) props.reload() |
|||
}) |
|||
} else { |
|||
axios.put('/categories', { |
|||
categoryId: state.id, |
|||
categoryLevel: state.categoryLevel, |
|||
parentId: state.parentId, |
|||
categoryName: state.ruleForm.name, |
|||
categoryRank: state.ruleForm.rank |
|||
}).then(() => { |
|||
ElMessage.success('修改成功') |
|||
state.visible = false |
|||
if (props.reload) props.reload() |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
return { |
|||
...toRefs(state), |
|||
open, |
|||
close, |
|||
formRef, |
|||
submitForm, |
|||
handleClose |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
</script> |
|||
@ -1,155 +1,131 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="type == 'add' ? '添加商品' : '修改商品'" |
|||
v-model="visible" |
|||
v-model="state.visible" |
|||
width="400px" |
|||
@close="handleClose" |
|||
> |
|||
<el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" class="good-form"> |
|||
<el-form :model="state.ruleForm" :rules="state.rules" ref="formRef" label-width="100px" class="good-form"> |
|||
<el-form-item label="商品名称" prop="name"> |
|||
<el-input type="text" v-model="ruleForm.name"></el-input> |
|||
<el-input type="text" v-model="state.ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="跳转链接" prop="link"> |
|||
<el-input type="text" v-model="ruleForm.link"></el-input> |
|||
<el-input type="text" v-model="state.ruleForm.link"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="商品编号" prop="id"> |
|||
<el-input type="number" min="0" v-model="ruleForm.id"></el-input> |
|||
<el-input type="number" min="0" v-model="state.ruleForm.id"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="排序值" prop="sort"> |
|||
<el-input type="number" v-model="ruleForm.sort"></el-input> |
|||
<el-input type="number" v-model="state.ruleForm.sort"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="visible = false">取 消</el-button> |
|||
<el-button @click="state.visible = false">取 消</el-button> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref, toRefs } from 'vue' |
|||
<script setup> |
|||
import { reactive, ref } from 'vue' |
|||
import axios from '@/utils/axios' |
|||
import { hasEmoji } from '@/utils/index' |
|||
import { ElMessage } from 'element-plus' |
|||
export default { |
|||
name: 'DialogAddHotGood', |
|||
props: { |
|||
type: String, |
|||
configType: Number, |
|||
reload: Function |
|||
|
|||
const props = defineProps({ |
|||
type: String, |
|||
configType: Number, |
|||
reload: Function |
|||
}) |
|||
const formRef = ref(null) |
|||
const state = reactive({ |
|||
visible: false, |
|||
ruleForm: { |
|||
name: '', |
|||
link: '', |
|||
id: '', |
|||
sort: '' |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: 'true', message: '名称不能为空', trigger: ['change'] } |
|||
], |
|||
id: [ |
|||
{ required: 'true', message: '编号不能为空', trigger: ['change'] } |
|||
], |
|||
sort: [ |
|||
{ required: 'true', message: '排序不能为空', trigger: ['change'] } |
|||
] |
|||
}, |
|||
setup(props) { |
|||
const formRef = ref(null) |
|||
const state = reactive({ |
|||
visible: false, |
|||
ruleForm: { |
|||
name: '', |
|||
link: '', |
|||
id: '', |
|||
sort: '' |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: 'true', message: '名称不能为空', trigger: ['change'] } |
|||
], |
|||
id: [ |
|||
{ required: 'true', message: '编号不能为空', trigger: ['change'] } |
|||
], |
|||
sort: [ |
|||
{ required: 'true', message: '排序不能为空', trigger: ['change'] } |
|||
] |
|||
}, |
|||
id: '' |
|||
}) |
|||
// 获取详情 |
|||
const getDetail = (id) => { |
|||
axios.get(`/indexConfigs/${id}`).then(res => { |
|||
state.ruleForm = { |
|||
name: res.configName, |
|||
id: res.goodsId, |
|||
link: res.redirectUrl, |
|||
sort: res.configRank |
|||
} |
|||
}) |
|||
id: '' |
|||
}) |
|||
// 获取详情 |
|||
const getDetail = (id) => { |
|||
axios.get(`/indexConfigs/${id}`).then(res => { |
|||
state.ruleForm = { |
|||
name: res.configName, |
|||
id: res.goodsId, |
|||
link: res.redirectUrl, |
|||
sort: res.configRank |
|||
} |
|||
}) |
|||
} |
|||
// 开启弹窗 |
|||
const open = (id) => { |
|||
state.visible = true |
|||
if (id) { |
|||
state.id = id |
|||
getDetail(id) |
|||
} else { |
|||
state.ruleForm = { |
|||
name: '', |
|||
id: '', |
|||
link: '', |
|||
sort: '' |
|||
} |
|||
// 开启弹窗 |
|||
const open = (id) => { |
|||
state.visible = true |
|||
if (id) { |
|||
state.id = id |
|||
getDetail(id) |
|||
} |
|||
} |
|||
// 关闭弹窗 |
|||
const close = () => { |
|||
state.visible = false |
|||
} |
|||
const submitForm = () => { |
|||
formRef.value.validate((valid) => { |
|||
if (valid) { |
|||
if (state.ruleForm.id < 0 || state.ruleForm.id > 200) { |
|||
ElMessage.error('商品编号不能小于 0 或大于 200') |
|||
return |
|||
} |
|||
if (props.type == 'add') { |
|||
axios.post('/indexConfigs', { |
|||
configType: props.configType || 3, |
|||
configName: state.ruleForm.name, |
|||
redirectUrl: state.ruleForm.link, |
|||
goodsId: state.ruleForm.id, |
|||
configRank: state.ruleForm.sort |
|||
}).then(() => { |
|||
ElMessage.success('添加成功') |
|||
state.visible = false |
|||
if (props.reload) props.reload() |
|||
}) |
|||
} else { |
|||
state.ruleForm = { |
|||
name: '', |
|||
id: '', |
|||
link: '', |
|||
sort: '' |
|||
} |
|||
axios.put('/indexConfigs', { |
|||
configId: state.id, |
|||
configType: props.configType || 3, |
|||
configName: state.ruleForm.name, |
|||
redirectUrl: state.ruleForm.link, |
|||
goodsId: state.ruleForm.id, |
|||
configRank: state.ruleForm.sort |
|||
}).then(() => { |
|||
ElMessage.success('修改成功') |
|||
state.visible = false |
|||
if (props.reload) props.reload() |
|||
}) |
|||
} |
|||
} |
|||
// 关闭弹窗 |
|||
const close = () => { |
|||
state.visible = false |
|||
} |
|||
const handleClose = () => { |
|||
formRef.value.resetFields() |
|||
} |
|||
const submitForm = () => { |
|||
formRef.value.validate((valid) => { |
|||
if (valid) { |
|||
if (hasEmoji(state.ruleForm.name) || hasEmoji(state.ruleForm.link)) { |
|||
ElMessage.error('不要输入表情包，再输入就打死你个龟孙儿~') |
|||
return |
|||
} |
|||
if (state.ruleForm.name.length > 128) { |
|||
ElMessage.error('商品名称不能超过128个字符') |
|||
return |
|||
} |
|||
if (state.ruleForm.sort < 0 || state.ruleForm.sort > 200) { |
|||
ElMessage.error('排序值不能小于 0 或大于 200') |
|||
return |
|||
} |
|||
if (props.type == 'add') { |
|||
axios.post('/indexConfigs', { |
|||
configType: props.configType || 3, |
|||
configName: state.ruleForm.name, |
|||
redirectUrl: state.ruleForm.link, |
|||
goodsId: state.ruleForm.id, |
|||
configRank: state.ruleForm.sort |
|||
}).then(() => { |
|||
ElMessage.success('添加成功') |
|||
state.visible = false |
|||
if (props.reload) props.reload() |
|||
}) |
|||
} else { |
|||
axios.put('/indexConfigs', { |
|||
configId: state.id, |
|||
configType: props.configType || 3, |
|||
configName: state.ruleForm.name, |
|||
redirectUrl: state.ruleForm.link, |
|||
goodsId: state.ruleForm.id, |
|||
configRank: state.ruleForm.sort |
|||
}).then(() => { |
|||
ElMessage.success('修改成功') |
|||
state.visible = false |
|||
if (props.reload) props.reload() |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
return { |
|||
...toRefs(state), |
|||
open, |
|||
close, |
|||
formRef, |
|||
submitForm, |
|||
handleClose |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
defineExpose({ open, close }) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<el-table |
|||
:load="state.loading" |
|||
:data="state.tableData" |
|||
tooltip-effect="dark" |
|||
style="width: 100%" |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<slot name='column'></slot> |
|||
</el-table> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next" |
|||
:total="state.total" |
|||
:page-size="state.pageSize" |
|||
:current-page="state.currentPage" |
|||
@current-change="changePage" |
|||
/> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { onMounted, reactive, getCurrentInstance } from 'vue' |
|||
import axios from '@/utils/axios' |
|||
|
|||
const props = defineProps({ |
|||
action: String |
|||
}) |
|||
const app = getCurrentInstance() |
|||
const { goTop } = app.appContext.config.globalProperties |
|||
const state = reactive({ |
|||
loading: false, |
|||
tableData: [], // 数据列表 |
|||
total: 0, // 总条数 |
|||
currentPage: 1, // 当前页 |
|||
pageSize: 10, // 分页大小 |
|||
multipleSelection: [] |
|||
}) |
|||
onMounted(() => { |
|||
getList() |
|||
}) |
|||
|
|||
const getList = () => { |
|||
state.loading = true |
|||
axios.get(props.action, { |
|||
params: { |
|||
pageNumber: state.currentPage, |
|||
pageSize: state.pageSize |
|||
} |
|||
}).then(res => { |
|||
state.tableData = res.list |
|||
state.total = res.totalCount |
|||
state.currentPage = res.currPage |
|||
state.loading = false |
|||
goTop && goTop() // 回到顶部 |
|||
}) |
|||
} |
|||
|
|||
const handleSelectionChange = (val) => { |
|||
state.multipleSelection = val |
|||
} |
|||
|
|||
const changePage = (val) => { |
|||
state.currentPage = val |
|||
getList() |
|||
} |
|||
</script> |
|||
4179
yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue