515 lines
15 KiB
Vue
515 lines
15 KiB
Vue
<!-- 新增pad选菜页 -->
|
|
<template>
|
|
<div>
|
|
<el-dialog :title="`${preview ? '预览' : form.id ? '编辑' : '添加'}平板菜谱`" top="5vh" width="1000px"
|
|
:visible.sync="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">
|
|
<i class="icon el-icon-plus"></i>
|
|
</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>
|
|
<shopList ref="shopList" radio @success="selectConfirmGoods" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import shopList from '@/components/shopList/index.vue'
|
|
import { tbProduct } from '@/api/shop.js'
|
|
import { layoutlist, productGroup, productCategoryDetail, productGroupPut } from '@/api/pad.js'
|
|
export default {
|
|
components: { shopList },
|
|
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() {
|
|
try {
|
|
const res = await layoutlist()
|
|
this.typeList = res
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
// 显示选择商品
|
|
showSelectGoods(index) {
|
|
this.activeItem = index
|
|
this.$refs.shopList.show([], this.category)
|
|
},
|
|
// 确认选择商品
|
|
selectConfirmGoods(res) {
|
|
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: .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> |