1.店铺设置 - 店铺信息 - 桌位费开启免餐位费不可修改输入框

2.店铺设置 - 店铺信息logo、门店、二维码、小程序码图片添加下载按钮
3.新增pad点单设置
This commit is contained in:
gyq 2024-10-24 11:10:33 +08:00
parent 36d667326e
commit abac233027
8 changed files with 711 additions and 38 deletions

71
src/api/pad.js Normal file
View File

@ -0,0 +1,71 @@
import request from "@/utils/request";
/**
* Pad商品版式布局列表
* @returns
*/
export function layoutlist(params) {
return request({
url: "/api/pad/layout/list",
method: "get",
params
});
}
/**
* 新建
* @returns
*/
export function productGroup(data) {
return request({
url: "/api/pad/productCategory",
method: "post",
data
});
}
/**
* Pad点餐列表
* @returns
*/
export function productGrouppage(params) {
return request({
url: "/api/pad/productCategory/page",
method: "get",
params
});
}
/**
* 获取详情
* @returns
*/
export function productCategoryDetail(id) {
return request({
url: `/api/pad/productCategory/${id}`,
method: "get"
});
}
/**
* 删除
* @returns
*/
export function productCategoryDelete(id) {
return request({
url: `/api/pad/productCategory/${id}`,
method: "DELETE"
});
}
/**
* 修改
* @returns
*/
export function productGroupPut(data) {
return request({
url: "/api/pad/productCategory",
method: "put",
data
});
}

View File

@ -1,5 +1,5 @@
<template>
<el-dialog title="选择商品" :visible.sync="dialogVisible" @open="resetHandle()">
<el-dialog title="选择商品" top="5vh" :visible.sync="dialogVisible">
<el-form :model="searhForm" inline>
<el-form-item>
<el-input v-model="searhForm.name" placeholder="商品名称"></el-input>
@ -16,8 +16,8 @@
</el-form-item>
</el-form>
<div class="head-container">
<el-table ref="table" :data="tableData.list" v-loading="tableData.loading">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
<el-table-column type="selection" width="55" align="center" v-if="!radio"></el-table-column>
<el-table-column label="商品信息">
<template v-slot="scope">
<div class="shop_info">
@ -36,11 +36,11 @@
</template>
</el-table-column> <el-table-column label="">
<template v-slot="scope">
{{ scope.row.isPauseSale == 1?'是':'否' }}
{{ scope.row.isPauseSale == 1 ? '是' : '否' }}
</template>
</el-table-column> <el-table-column label="">
<template v-slot="scope">
{{ scope.row.isDistribute == 1?'是':'否' }}
{{ scope.row.isDistribute == 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="售价">
@ -54,12 +54,17 @@
</template>
</el-table-column>
<el-table-column label="分类名称" prop="categoryName"></el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
@current-change="paginationChange" @size-change="sizeChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
<span slot="footer" class="dialog-footer">
<span slot="footer" class="dialog-footer" v-if="!radio">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="confirmHandle"> </el-button>
</span>
@ -69,6 +74,13 @@
<script>
import { tbShopCategoryGet, tbProduct } from "@/api/shop";
export default {
props: {
//
radio: {
type: Boolean,
default: false
}
},
data() {
return {
dialogVisible: false,
@ -88,6 +100,11 @@ export default {
}
},
methods: {
//
selectHandle(row) {
this.$emit('success', [{ ...row }])
this.close()
},
//
confirmHandle() {
let res = this.$refs.table.selection
@ -154,7 +171,7 @@ export default {
console.log(error)
}
},
show(goods) {
async show(goods, categoryId) {
this.dialogVisible = true
if (goods && goods.length) {
this.goods = goods
@ -162,8 +179,18 @@ export default {
this.goods = []
}
this.resetHandle()
this.tbShopCategoryGet()
this.getTableData()
console.log(categoryId);
if (categoryId) {
this.searhForm.category = categoryId
}
console.log(this.searhForm);
await this.tbShopCategoryGet()
await this.getTableData()
},
close() {
this.dialogVisible = false

View File

@ -45,6 +45,13 @@ export default {
opacity: 0;
}
h1 {
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.sidebar-logo-container {
position: relative;
width: 100%;
@ -82,6 +89,11 @@ export default {
.sidebar-logo {
margin-right: 0px;
}
.sidebar-logo {
width: 24px;
height: 24px;
}
}
}
</style>

View File

@ -233,7 +233,7 @@
<!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
<el-table-column label="商品名称" prop="productName"></el-table-column>
<el-table-column label="数量" prop="salesNum"></el-table-column>
<el-table-column label="金额" prop="salesAmount"></el-table-column>
<!-- <el-table-column label="金额" prop="salesAmount"></el-table-column> -->
</el-table>
<div class="head-container" style="padding-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage + 1"
@ -682,12 +682,12 @@ export default {
barWidth: time.length <= 7 ? "30%" : "20%",
data: data.map(item => item.orderAmount),
},
{
name: '实收金额',
type: "bar",
barWidth: time.length <= 7 ? "30%" : "20%",
data: data.map(item => item.actualAmount),
},
// {
// name: '',
// type: "bar",
// barWidth: time.length <= 7 ? "30%" : "20%",
// data: data.map(item => item.actualAmount),
// },
{
name: '优惠金额',
type: "bar",
@ -753,7 +753,7 @@ export default {
const data = res.total.map(item => {
return {
orderAmount: item.orderAmount,
actualAmount: item.actualAmount,
// actualAmount: item.actualAmount,
discountAmount: item.discountAmount
}
});

View File

@ -0,0 +1,316 @@
<!-- 新增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">
<div class="btn">
<el-button>一键生成菜单</el-button>
</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 { 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: {
//
async submitHandle() {
try {
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
this.$message.success(this.form.id ? '编辑成功' : '添加成功')
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;
}
}
.btn_wrap {
flex: 1;
height: 100%;
.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>

View File

@ -9,29 +9,56 @@
<el-input v-model.trim="form.chainName" placeholder="请输入连锁店扩展店名" style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="门店logo">
<el-image :src="form.logo || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="
showUpload = true;
uploadIndex = 1;
"></el-image>
<div class="img_box">
<el-image :src="form.logo || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="
showUpload = true;
uploadIndex = 1;
"></el-image>
<el-button type="primary" plain v-if="form.logo" @click="downloadImgHandle(form.logo)">下载</el-button>
</div>
</el-form-item>
<el-form-item label="门店照片">
<el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="
showUpload = true;
uploadIndex = 2;
"></el-image>
<div class="img_box">
<el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="
showUpload = true;
uploadIndex = 2;
"></el-image>
<el-button type="primary" plain v-if="form.coverImg"
@click="downloadImgHandle(form.coverImg)">下载</el-button>
</div>
</el-form-item>
<el-form-item label="微信二维码">
<el-image :src="form.shopQrcode || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="
showUpload = true;
uploadIndex = 3;
"></el-image>
<div class="img_box">
<el-image :src="form.shopQrcode || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="
showUpload = true;
uploadIndex = 3;
"></el-image>
<el-button type="primary" plain v-if="form.shopQrcode"
@click="downloadImgHandle(form.shopQrcode)">下载</el-button>
</div>
</el-form-item>
<el-form-item label="店铺小程序码">
<el-image :src="form.smallQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
style="width: 80px;height: 80px;" @click="downloadImgHandle(form.smallQrcode)"></el-image>
<div class="img_box">
<el-image :src="form.smallQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
style="width: 80px;height: 80px;"></el-image>
<el-button type="primary" plain v-if="form.shopQrcode"
@click="downloadImgHandle(form.smallQrcode)">下载</el-button>
</div>
</el-form-item>
<el-form-item label="经营模式「单选」">
<el-radio-group v-model="form.registerType">
<el-radio label="munchies">快餐版先支付后下单</el-radio>
<el-radio label="restaurant">餐饮版先下单后支付</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="就餐模式「多选」">
<el-checkbox-group v-model="form.eatModel">
<el-checkbox label="dine-in">堂食自取</el-checkbox>
<el-checkbox label="take-out">允许打包</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model.trim="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
@ -58,7 +85,8 @@
<div style="color: #999;">准确的定位便于用户导航到店铺</div>
</el-form-item>
<el-form-item label="门店详细地址">
<el-input type="textarea" v-model.trim="form.address" placeholder="请输入门店详细地址" style="width: 500px;"></el-input>
<el-input type="textarea" v-model.trim="form.address" placeholder="请输入门店详细地址"
style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="营业时间">
<el-select v-model="form.businessStartDay" placeholder="周几开始">
@ -78,7 +106,7 @@
</el-time-picker>
</el-form-item>
<el-form-item label="桌位费/位/元">
<el-input-number v-model="form.tableFee" :min="0" />
<el-input-number :disabled="!!form.isTableFee" v-model="form.tableFee" :min="0" />
<!-- <el-checkbox v-model="form.isTableFee" :label="1">免餐位费</el-checkbox> -->
<el-switch v-model.trim="form.isTableFee" :active-value="1" :inactive-value="0" active-text="免餐位费">
</el-switch>
@ -188,7 +216,9 @@ export default {
startTime: "",
endTime: "",
formLoading: false,
form: {},
form: {
eatModel: []
},
rules: {
shopName: [
{
@ -372,6 +402,12 @@ export default {
</script>
<style scoped lang="scss">
.img_box {
display: flex;
align-items: flex-end;
gap: 20px;
}
.map_box {
width: 100%;
position: relative;

View File

@ -0,0 +1,211 @@
<template>
<div class="app-container">
<div class="left_menu">
<div class="search_wrap">
<el-input placeholder="名称/代码" v-model="query.name">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<div class="tree_wrap">
<el-tree :data="treeData" node-key="id" highlight-current :props="{ label: 'name' }" default-expand-all
@node-click="treeItemClick"></el-tree>
</div>
</div>
<div class="table_wrap">
<div class="header_wrap">
<el-button type="primary" @click="addHandle">新建</el-button>
</div>
<div class="table">
<el-table :data="tableData.list" border height="100%" v-loading="tableData.loading">
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column label="菜品名称" prop="productNames"></el-table-column>
<el-table-column label="类型" prop="padLayoutName"></el-table-column>
<el-table-column label="所属小类" prop="productCategoryName"></el-table-column>
<el-table-column label="自定义分类" prop="customName"></el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="text">拖动排序</el-button>
<el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
<el-popconfirm title="确定删除吗?" @confirm="delTableHandle(scope.row.id)">
<el-button type="text" slot="reference">删除</el-button>
</el-popconfirm>
<el-button type="text" @click="editorHandle(scope.row, 2)">预览</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
<el-pagination @size-change="paginationSizeChange" :total="tableData.total"
:current-page="tableData.page" :page-size="tableData.size" @current-change="paginationChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</div>
<AddPadPage ref="AddPadPage" :category="selectCatory.id" @success="addSuccess" />
</div>
</template>
<script>
import AddPadPage from './components/addPadPage.vue'
import { tbShopCategoryGet } from '@/api/shop'
import { productGrouppage, productCategoryDelete } from '@/api/pad.js'
import editor from 'mavon-editor';
export default {
components: {
AddPadPage
},
data() {
return {
query: {
name: ''
},
selectCatory: '',
treeData: [],
tableData: {
loading: false,
page: 1,
size: 10,
total: 0,
list: []
}
}
},
mounted() {
this.tbShopCategoryGet()
},
methods: {
//
async delTableHandle(id) {
try {
await productCategoryDelete(id)
this.$message.success('已删除')
this.getTableData()
} catch (error) {
console.log(error);
}
},
//
editorHandle(row, type) {
this.$refs.AddPadPage.show(row.id, type)
},
//
addSuccess() {
this.tableData.page = 1
this.getTableData()
},
//
addHandle() {
if (this.selectCatory.id) {
this.$refs.AddPadPage.show()
} else {
this.$message.warning('请选择分类')
}
},
//
treeItemClick(data) {
this.selectCatory = data
this.tableData.page = 1
this.getTableData()
},
//
async tbShopCategoryGet() {
this.tableData.loading = true
try {
const res = await tbShopCategoryGet({
page: 0,
size: 100,
sort: 'id,desc',
shopId: localStorage.getItem('shopId')
})
this.treeData = res.content
this.getTableData()
} catch (error) {
console.log(error)
}
},
//
resetHandle() {
this.tableData.page = 1
this.tableData.size = 10
this.tableData.list = []
this.getTableData()
},
//
paginationSizeChange(e) {
this.tableData.size = e
this.tableData.page = 1
this.getTableData()
},
//
paginationChange(e) {
this.tableData.page = e
this.tableData.list = []
this.getTableData()
},
// Pad
async getTableData() {
try {
this.tableData.loading = true
const res = await productGrouppage({
shopId: localStorage.getItem("shopId"),
page: this.tableData.page,
size: this.tableData.size,
customName: '',
productCategoryId: this.selectCatory.id,
padLayoutId: '',
id: ''
})
this.tableData.loading = false
this.tableData.list = res.content
this.tableData.total = res.totalElements
} catch (error) {
console.log(error)
}
}
}
}
</script>
<style scoped lang="scss">
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
background-color: #1890ff;
color: #fff;
}
.app-container {
display: flex;
}
.left_menu {
width: 164px;
height: calc(100vh - 210px);
border: 1px solid #ddd;
.search_wrap {
padding: 14px;
}
.tree_wrap {
width: 100%;
height: calc(100% - 70px);
overflow-y: auto;
}
}
.table_wrap {
flex: 1;
padding-left: 14px;
.header_wrap {
display: flex;
}
.table {
padding-top: 15px;
height: calc(100vh - 310px);
}
}
.head-container {
padding-top: 20px;
}
</style>

View File

@ -2,7 +2,7 @@
<div class="app-container">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="店铺信息" name="1"></el-tab-pane>
<el-tab-pane label="经营模式" name="8"></el-tab-pane>
<!-- <el-tab-pane label="经营模式" name="8"></el-tab-pane> -->
<el-tab-pane label="基础配置" name="2"></el-tab-pane>
<!-- <el-tab-pane label="通知配置" name="3"></el-tab-pane> -->
<el-tab-pane label="安全设置" name="4"></el-tab-pane>