xiaokuaisong-shangjia/p-BluPrint_1.0.288888/pages/testone/testone.vue

<template>
	<view>
		<view class="item" v-for="(tab, index) in 10" :key="index">
		  zxt
		</view>
		<uni-drawer ref="showLeft" mode="left" :mask-click="true" @change="change($event, 'showLeft')">
			<view class="drawer-content">
				<input class="styled-input" placeholder="请输入菜品名" />
				<input class="styled-input" placeholder="请输入菜品图片" />
				<input class="styled-input" type="number" step="0.01" placeholder="请输入菜品价格" />
				<view class="button-container">
					<button class="styled-button confirm">确认</button>
					<button class="styled-button delete">删除</button>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import { apiImageUrl } from '../../API/api';
export default {
  data() {
    return {
      businessId: '1830063677349658625',
      resultArray: [],
      result: null,
      currentGroupId: '',
      form: {
        dishesName: '',
        dishesImage: '',
        dishesPrice: '',
        dishesGroup: '',
        inventoryStatus: 0,
        packPrice: 0,
        specificationsIds: [],
        status: 0,
      }
    };
  },
  mounted() {
    this.leftGroup();
  },
  methods: {
    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.currentGroupId = tab.id; // 保存当前菜品组的ID
      this.form.dishesGroup = tab.id; // 设置新菜品组ID
      this.$refs[drawer].open();
    },
    closeDrawer() {
      this.$refs.showLeft.close();
    },
    addDishes() {
      const data = {
        businessId: this.businessId,
        dishesGroupId: parseInt(this.form.dishesGroup, 10),
        dishesImage: this.form.dishesImage,
        dishesName: this.form.dishesName,
        dishesPrice: parseFloat(this.form.dishesPrice),
        inventoryStatus: 0,
        packPrice: 0,
        specificationsIds: [],
        status: 0,
      };

      uni.request({
        url:  apiImageUrl+'/api/dishes/add',
        method: 'POST',
        header: {
          'content-type': 'application/json' // 默认值
        },
        data: data,
        success: (res) => {
          console.log('成功返回：', res.data);
          // 在这里处理成功的响应
          this.result = '菜品添加成功！';
          this.closeDrawer();
          uni.showModal({
            title: '提示',
            content: '菜品添加成功！',
            showCancel: false
          });
        },
        fail: (err) => {
          console.error('请求失败：', err);
          // 在这里处理错误
          this.result = '菜品添加失败，请重试。';
          uni.showModal({
            title: '提示',
            content: '菜品添加失败，请重试！',
            showCancel: false
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
	padding: 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);
	}
}

.styled-input {
	width: calc(100% - 20px); /* 确保输入框宽度适应容器 */
	padding: 10px;
	margin: 10px 0; /* 设置上下间距为10px */
	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); /* 确认按钮使用稍微深一点的浅蓝色 */
}

.delete {
	background-color: rgba(255, 99, 71, 0.8); /* 删除按钮使用浅红色 */
}
</style>