360 lines
9.0 KiB
Vue
360 lines
9.0 KiB
Vue
<template>
|
|
<view>
|
|
<view class="navbar">
|
|
<view class="search">
|
|
<text class="icon-search">
|
|
<input type="text" placeholder="输入菜品组名称" class="transparent-input" v-model="form.groupName"/>
|
|
</text>
|
|
</view>
|
|
<button class="search-button" @click="addDishesGroup">添加</button>
|
|
|
|
</view>
|
|
<view class="item"
|
|
v-for="(tab, index) in resultArray"
|
|
:key="index"
|
|
@click="showDrawer('showLeft', tab)">
|
|
{{ tab.groupName }}
|
|
</view>
|
|
<uni-drawer ref="showLeft" mode="left" :mask-click="true" @change="change($event,'showLeft')">
|
|
<!-- 组件内部-->
|
|
<view class="edit-dishes-group">
|
|
<view class="drawer-content">
|
|
<input class="styled-input" type="text" v-model="newGroupName" placeholder="请输入新的菜品组名" />
|
|
</view>
|
|
<view class="button-container">
|
|
<button class="styled-button confirm" @click="updateDishesGroup">确认</button>
|
|
<button class="styled-button delete" @click="deleteDishesGroup(currentGroupId)">删除菜品组</button>
|
|
</view>
|
|
</view>
|
|
</uni-drawer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { apiImageUrl } from '../../API/api';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
businessId: '',
|
|
resultArray: [],
|
|
result: null,
|
|
currentGroupName: '',
|
|
currentGroupId: '',
|
|
newGroupName: '',
|
|
id: 0,
|
|
form: {
|
|
groupName: '',
|
|
isTopping: 0
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.loadCurrentBusinessId();
|
|
this.leftGroup();
|
|
},
|
|
methods: {
|
|
loadCurrentBusinessId() {
|
|
const storedBusinessId = uni.getStorageSync('businessId');
|
|
console.log(storedBusinessId);
|
|
if (storedBusinessId) {
|
|
this.businessId = storedBusinessId;
|
|
} else {
|
|
console.error('currentBusinessId not found in storage');
|
|
}
|
|
},
|
|
|
|
leftGroup() {
|
|
const DishesGroupQueryRequest = {
|
|
businessId: this.businessId
|
|
};
|
|
|
|
uni.request({
|
|
url: apiImageUrl + '/api/dishesGroup/list/dishesGroup',
|
|
method: 'POST',
|
|
data: JSON.stringify(DishesGroupQueryRequest),
|
|
header: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
}).then((res) => {
|
|
console.log(res);
|
|
if (res[1] && res[1].data && res[1].data.code === 0) {
|
|
this.resultArray = res[1].data.data.map(item => ({
|
|
id: item.id,
|
|
groupName: item.groupName
|
|
}));
|
|
console.log(this.resultArray);
|
|
} else {
|
|
console.error('Unexpected response structure:', res);
|
|
}
|
|
}).catch((error) => {
|
|
console.error('Error fetching dishes groups:', error);
|
|
});
|
|
},
|
|
|
|
showDrawer(drawer, tab) {
|
|
this.currentGroupName = tab.groupName;
|
|
this.currentGroupId = tab.id;
|
|
this.newGroupName = tab.groupName;
|
|
this.id = tab.id;
|
|
if (this.$refs.showLeft) {
|
|
this.$refs.showLeft.open();
|
|
}
|
|
},
|
|
|
|
closeDrawer() {
|
|
if (this.$refs.showLeft) {
|
|
this.$refs.showLeft.close();
|
|
}
|
|
},
|
|
|
|
change(e, type) {
|
|
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
|
this[type] = e;
|
|
},
|
|
|
|
updateDishesGroup() {
|
|
if (!this.newGroupName || !this.id) return;
|
|
|
|
uni.request({
|
|
url: apiImageUrl + '/api/dishesGroup/update',
|
|
method: 'POST',
|
|
header: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
data: {
|
|
id: this.id,
|
|
groupName: this.newGroupName,
|
|
isTopping: 0,
|
|
},
|
|
}).then((res) => {
|
|
if (res[1] && res[1].data && res[1].data.code === 0) {
|
|
this.closeDrawer();
|
|
this.leftGroup();
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '菜品组更新成功',
|
|
showCancel: false
|
|
});
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '菜品组更新失败',
|
|
showCancel: false
|
|
});
|
|
}
|
|
}).catch((error) => {
|
|
console.error('Error updating dishes group:', error);
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '菜品组更新失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
|
|
removeGroupFromList(id) {
|
|
const index = this.resultArray.findIndex(item => item.id === id);
|
|
if (index > -1) {
|
|
this.resultArray.splice(index, 1);
|
|
}
|
|
},
|
|
|
|
deleteDishesGroup(id) {
|
|
uni.request({
|
|
url: `${apiImageUrl}/api/dishesGroup/delete`,
|
|
method: 'POST',
|
|
data: {
|
|
id: id
|
|
}
|
|
}).then((res) => {
|
|
if (res[1] && res[1].data && res[1].data.code === 0) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '成功删除菜品组',
|
|
showCancel: false
|
|
});
|
|
this.removeGroupFromList(id);
|
|
this.closeDrawer();
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '删除失败，请检查输入或联系管理员',
|
|
showCancel: false
|
|
});
|
|
}
|
|
}).catch((error) => {
|
|
console.error('Error:', error);
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请求失败，请稍后重试',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
|
|
addDishesGroup() {
|
|
if (!this.form.groupName.trim()) {
|
|
uni.showToast({
|
|
title: '请输入菜品组名！',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
uni.request({
|
|
url: `${apiImageUrl}/api/dishesGroup/add`,
|
|
method: 'POST',
|
|
header: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
data: this.form,
|
|
}).then((res) => {
|
|
if (res[1] && res[1].data && res[1].data.code === 0) {
|
|
this.result = '添加成功!';
|
|
this.form.groupName = '';
|
|
|
|
this.leftGroup();
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '成功添加菜品组!',
|
|
showCancel: false
|
|
});
|
|
} else {
|
|
this.result = '添加失败，请检查输入或联系管理员';
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '添加失败，请检查输入或联系管理员！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
}).catch((error) => {
|
|
console.error('Error:', error);
|
|
this.result = '请求失败，请稍后重试';
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请求失败，请稍后重试！',
|
|
showCancel: false
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.item {
|
|
font-size: 13px;
|
|
padding: 10px 20px;
|
|
display: inline-block;
|
|
background-color: rgba(245, 245, 220, 0.8);
|
|
margin: 10px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px #ccc, 0 6px 10px rgba(0,0,0,0.1), inset 0 2px #fff, inset 0 -2px 2px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px #ccc, 0 8px 15px rgba(0,0,0,0.1), inset 0 4px #fff, inset 0 -2px 3px rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
|
|
.navbar {
|
|
background-color: #4095e5;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 10px;
|
|
.search {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10rpx 0 26rpx;
|
|
height: 50rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
border-radius: 32rpx;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
width: 70%;
|
|
margin: 0 auto;
|
|
}
|
|
.icon-search {
|
|
margin-right: 10rpx;
|
|
}
|
|
.search-button {
|
|
margin-left: auto;
|
|
height: 50rpx;
|
|
background-color: #fff;
|
|
color: #4095e5;
|
|
border: none;
|
|
border-radius: 32rpx;
|
|
padding: 0 20rpx;
|
|
line-height: 50rpx;
|
|
font-size: 15px;
|
|
|
|
}
|
|
|
|
|
|
.transparent-input {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #fff;
|
|
outline: none;
|
|
width: 100%;
|
|
padding: 0 10rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.styled-input {
|
|
font-size: 14px;
|
|
width: calc(100% - 20px);
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
display: block;
|
|
background-color: rgba(245, 245, 220, 0.8);
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px #ccc, 0 6px 10px rgba(0,0,0,0.1), inset 0 2px #fff, inset 0 -2px 2px rgba(0,0,0,0.1);
|
|
border: none;
|
|
outline: none;
|
|
transition: box-shadow 0.2s;
|
|
|
|
&:focus {
|
|
box-shadow: 0 6px #ccc, 0 8px 15px rgba(0,0,0,0.1), inset 0 4px #fff, inset 0 -2px 3px rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.styled-button {
|
|
flex: 1;
|
|
margin: 5px;
|
|
padding: 10px;
|
|
background-color: rgba(173, 216, 230, 0.8);
|
|
border: none;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px #ccc, 0 6px 10px rgba(0,0,0,0.1), inset 0 2px #fff, inset 0 -2px 2px rgba(0,0,0,0.1);
|
|
cursor: pointer;
|
|
transition: box-shadow 0.2s, background-color 0.2s;
|
|
|
|
&:hover {
|
|
background-color: rgba(173, 216, 230, 1);
|
|
box-shadow: 0 6px #ccc, 0 8px 15px rgba(0,0,0,0.1), inset 0 4px #fff, inset 0 -2px 3px rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
|
|
.confirm {
|
|
background-color: rgba(135, 206, 235, 0.8);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.delete {
|
|
background-color: rgba(255, 99, 71, 0.8);
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
|
|
|
|
|