增加ipad点餐设置
This commit is contained in:
543
src/views/online-shop/components/addPadPage.vue
Normal file
543
src/views/online-shop/components/addPadPage.vue
Normal file
@@ -0,0 +1,543 @@
|
||||
<!-- 新增pad选菜页 -->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:title="`${preview ? '预览' : form.id ? '编辑' : '添加'}平板菜谱`"
|
||||
top="5vh"
|
||||
width="1000px"
|
||||
v-model="dialogVisible"
|
||||
:show-close="preview"
|
||||
>
|
||||
<div class="content" v-loading="pageLoading">
|
||||
<div class="editor_wrap" :class="[`type${typeListActive}`]">
|
||||
<template v-if="typeListActive != 6">
|
||||
<div
|
||||
class="btn_wrap"
|
||||
:class="[`div${index + 1}`]"
|
||||
v-for="(item, index) in form.list"
|
||||
:key="index"
|
||||
@click="showSelectGoods(index)"
|
||||
>
|
||||
<div class="btn" v-if="!item.id">
|
||||
<el-icon size="40" color="#dddfe6"><Plus /></el-icon>
|
||||
</div>
|
||||
<div class="cover" v-else>
|
||||
<img class="img" :src="item.coverImg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="btn_wrap" v-if="!form.list.length">
|
||||
<div class="btn">
|
||||
<el-button @click="oneClick">一键生成菜单</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods_list" v-else>
|
||||
<div
|
||||
class="btn_wrap"
|
||||
:class="[`div${index + 1}`]"
|
||||
v-for="(item, index) in form.list"
|
||||
:key="index"
|
||||
@click="selectGoods(item)"
|
||||
>
|
||||
<div class="info" :class="{ active: item.active }">
|
||||
<span class="t1">{{ item.name }}</span>
|
||||
<span class="t1">￥{{ item.lowPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab" v-if="!preview">
|
||||
<el-radio-group v-model="typeListActive" @change="tabChange">
|
||||
<el-radio-button :label="item.id" v-for="item in typeList" :key="item.id">
|
||||
{{ item.name }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog_footer" v-if="!preview">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="submitHandle">保 存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<GoodsSelect ref="refSelGoods"></GoodsSelect>
|
||||
<!-- <shopList ref="shopList" disableCategory radio @success="selectConfirmGoods" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { layoutList } from "./layout.js";
|
||||
// import shopList from "@/components/shopList/index.vue";
|
||||
// import { tbProduct } from "@/api/shop.js";
|
||||
// import { layoutlist, productGroup, productCategoryDetail, productGroupPut } from "@/api/pad.js";
|
||||
export default {
|
||||
props: {
|
||||
category: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
pageLoading: false,
|
||||
loading: false,
|
||||
activeItem: 0,
|
||||
form: {
|
||||
id: "",
|
||||
list: [],
|
||||
},
|
||||
typeListActive: 1,
|
||||
typeList: [],
|
||||
preview: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.layoutlist();
|
||||
},
|
||||
methods: {
|
||||
// 选中菜品
|
||||
selectGoods(item) {
|
||||
item.active = !item.active;
|
||||
},
|
||||
// 一键生成菜单
|
||||
async oneClick() {
|
||||
try {
|
||||
const res = await tbProduct({
|
||||
categoryId: this.category,
|
||||
page: 0,
|
||||
size: 20,
|
||||
sort: "id",
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
});
|
||||
this.form.list = res.content.map((item, index) => {
|
||||
if (index == 0 || index == 12) {
|
||||
item.active = true;
|
||||
} else {
|
||||
item.active = false;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 提交
|
||||
async submitHandle() {
|
||||
try {
|
||||
if (this.typeList.find((item) => item.id == this.typeListActive).code == "text-menu") {
|
||||
if (!this.form.list.length) {
|
||||
this.$notify.error({
|
||||
title: "错误",
|
||||
message: "请生成菜单",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
let isEmpty = true;
|
||||
this.form.list.map((item) => {
|
||||
if (!item.id) isEmpty = false;
|
||||
});
|
||||
|
||||
if (!isEmpty) {
|
||||
this.$notify.error({
|
||||
title: "错误",
|
||||
message: "请添加商品",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
let res = null;
|
||||
if (this.form.id) {
|
||||
await productGroupPut({
|
||||
id: this.form.id,
|
||||
padLayoutId: this.typeListActive,
|
||||
customName: "",
|
||||
productCategoryId: this.category || this.form.list[0].categoryId,
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
sort: 1,
|
||||
remark: "",
|
||||
productIdList: this.form.list.map((item) => item.id),
|
||||
});
|
||||
} else {
|
||||
res = await productGroup({
|
||||
padLayoutId: this.typeListActive,
|
||||
customName: "",
|
||||
productCategoryId: this.category,
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
sort: 1,
|
||||
remark: "",
|
||||
productIdList: this.form.list.map((item) => item.id),
|
||||
});
|
||||
}
|
||||
this.loading = false;
|
||||
if (this.form.id) {
|
||||
this.$notify.success({
|
||||
title: "提示",
|
||||
message: "编辑成功",
|
||||
});
|
||||
} else {
|
||||
this.$notify.success({
|
||||
title: "提示",
|
||||
message: "添加成功",
|
||||
});
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
this.$emit("success");
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 获取
|
||||
async layoutlist() {
|
||||
this.typeList = layoutList;
|
||||
return;
|
||||
try {
|
||||
const res = await layoutlist();
|
||||
this.typeList = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 显示选择商品
|
||||
showSelectGoods(index) {
|
||||
this.activeItem = index;
|
||||
this.$refs.refSelGoods.show([], this.category);
|
||||
},
|
||||
// 确认选择商品
|
||||
selectConfirmGoods(res) {
|
||||
// this.form.list = res
|
||||
const flag = this.form.list.filter((item) => item.id == res[0].id);
|
||||
|
||||
if (flag.length) {
|
||||
this.$notify({
|
||||
title: "注意",
|
||||
message: "请勿重复添加",
|
||||
type: "error",
|
||||
});
|
||||
} else {
|
||||
this.$set(this.form.list, this.activeItem, { ...res[0] });
|
||||
}
|
||||
},
|
||||
// 切换tab
|
||||
tabChange() {
|
||||
this.form.list = [];
|
||||
if (this.typeListActive != 6) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
// 初始化
|
||||
init() {
|
||||
let num = this.typeList.find((item) => item.id == this.typeListActive).maximum;
|
||||
for (let i = 0; i < num; i++) {
|
||||
this.form.list.push({});
|
||||
}
|
||||
},
|
||||
// 获取详情
|
||||
async productCategoryDetail(id) {
|
||||
try {
|
||||
this.pageLoading = true;
|
||||
const res = await productCategoryDetail(id);
|
||||
this.pageLoading = false;
|
||||
this.typeListActive = res.padLayoutId;
|
||||
this.form.id = res.id;
|
||||
|
||||
this.form.list = [];
|
||||
this.form.list = res.productList;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.form.id = "";
|
||||
this.form.list = [];
|
||||
},
|
||||
// 显示 type=1 编辑 type=2预览
|
||||
async show(id = "", type = 1) {
|
||||
this.reset();
|
||||
this.typeListActive = 1;
|
||||
this.dialogVisible = true;
|
||||
this.tabChange();
|
||||
if (id) {
|
||||
await this.productCategoryDetail(id);
|
||||
}
|
||||
if (type == 2) {
|
||||
this.preview = true;
|
||||
} else {
|
||||
this.preview = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
.editor_wrap {
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
|
||||
&.type2 {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&.type3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
|
||||
.div1 {
|
||||
grid-area: 1 / 1 / 3 / 2;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.type4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
|
||||
.div1 {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
}
|
||||
|
||||
.div4 {
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.type5 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
|
||||
.div1 {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
grid-area: 1 / 3 / 2 / 4;
|
||||
}
|
||||
|
||||
.div4 {
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
}
|
||||
|
||||
.div5 {
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
|
||||
.div6 {
|
||||
grid-area: 2 / 3 / 3 / 4;
|
||||
}
|
||||
}
|
||||
|
||||
&.type6 {
|
||||
.goods_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 0px;
|
||||
|
||||
.div1 {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
grid-area: 3 / 1 / 4 / 2;
|
||||
}
|
||||
|
||||
.div4 {
|
||||
grid-area: 4 / 1 / 5 / 2;
|
||||
}
|
||||
|
||||
.div5 {
|
||||
grid-area: 5 / 1 / 6 / 2;
|
||||
}
|
||||
|
||||
.div6 {
|
||||
grid-area: 6 / 1 / 7 / 2;
|
||||
}
|
||||
|
||||
.div7 {
|
||||
grid-area: 7 / 1 / 8 / 2;
|
||||
}
|
||||
|
||||
.div8 {
|
||||
grid-area: 8 / 1 / 9 / 2;
|
||||
}
|
||||
|
||||
.div9 {
|
||||
grid-area: 9 / 1 / 10 / 2;
|
||||
}
|
||||
|
||||
.div10 {
|
||||
grid-area: 10 / 1 / 11 / 2;
|
||||
}
|
||||
|
||||
.div11 {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
}
|
||||
|
||||
.div12 {
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
|
||||
.div13 {
|
||||
grid-area: 3 / 2 / 4 / 3;
|
||||
}
|
||||
|
||||
.div14 {
|
||||
grid-area: 4 / 2 / 5 / 3;
|
||||
}
|
||||
|
||||
.div15 {
|
||||
grid-area: 5 / 2 / 6 / 3;
|
||||
}
|
||||
|
||||
.div16 {
|
||||
grid-area: 6 / 2 / 7 / 3;
|
||||
}
|
||||
|
||||
.div17 {
|
||||
grid-area: 7 / 2 / 8 / 3;
|
||||
}
|
||||
|
||||
.div18 {
|
||||
grid-area: 8 / 2 / 9 / 3;
|
||||
}
|
||||
|
||||
.div19 {
|
||||
grid-area: 9 / 2 / 10 / 3;
|
||||
}
|
||||
|
||||
.div20 {
|
||||
grid-area: 10 / 2 / 11 / 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods_list {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn_wrap {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ececec;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
background-color: #bc1414;
|
||||
color: #fff;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
border: 22px solid #fff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 10%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 100%;
|
||||
border: 1px solid #dddfe6;
|
||||
background: #f7f7fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 40px;
|
||||
color: #dddfe6;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
height: 100%;
|
||||
background: #f7f7fa;
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog_footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
52
src/views/online-shop/components/layout.js
Normal file
52
src/views/online-shop/components/layout.js
Normal file
@@ -0,0 +1,52 @@
|
||||
export const layoutList = [
|
||||
{
|
||||
code: "single",
|
||||
createTime: "2024-10-22 15:50:05",
|
||||
delFlag: 0,
|
||||
id: 1,
|
||||
maximum: 1,
|
||||
name: "单图",
|
||||
remark: null,
|
||||
sort: 0,
|
||||
},
|
||||
{
|
||||
code: "double",
|
||||
createTime: "2024-10-22 15:50:34",
|
||||
delFlag: 0,
|
||||
id: 2,
|
||||
maximum: 2,
|
||||
name: "双图",
|
||||
remark: null,
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
code: "L1-R2",
|
||||
createTime: "2024-10-22 15:51:20",
|
||||
delFlag: 0,
|
||||
id: 3,
|
||||
maximum: 3,
|
||||
name: "左一右二",
|
||||
remark: null,
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
code: "4-gird",
|
||||
createTime: "2024-10-22 15:52:22",
|
||||
delFlag: 0,
|
||||
id: 4,
|
||||
maximum: 4,
|
||||
name: "四图",
|
||||
remark: "四宫格",
|
||||
sort: 3,
|
||||
},
|
||||
{
|
||||
code: "6-grid",
|
||||
createTime: "2024-10-22 15:53:21",
|
||||
delFlag: 0,
|
||||
id: 5,
|
||||
maximum: 6,
|
||||
name: "六图",
|
||||
remark: "六宫格",
|
||||
sort: 4,
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user