This commit is contained in:
2025-04-02 10:35:17 +08:00
commit 89db955ec1
701 changed files with 91082 additions and 0 deletions

View File

@@ -0,0 +1,222 @@
<template>
<view class="min-page bg-gray u-p-30">
<view class="u-font-24">
<text class="color-red">*</text>
<text class="color-999">将临时菜添加至购物车不会影响总商品库</text>
</view>
<view class="form">
<uni-forms ref="refform" label-position="top" :model="form" label-align="left" label-width="300"
:rules="rules">
<uni-forms-item required label="" name="name">
<template #label>
<view class="u-text-left">
<text class="color-333">菜品名称</text>
<text class="color-red">*</text>
</view>
</template>
<view class="border-bottom u-p-t-10 u-p-b-10">
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
placeholder="填写菜品名称"></uni-easyinput>
</view>
</uni-forms-item>
<uni-forms-item required label="" name="category">
<template #label>
<view class="u-text-left u-m-t-24">
<text class="color-333">菜品分类</text>
<text class="color-red">*</text>
</view>
</template>
<picker @change="categoryChange" :value="categoryCurrent" range-key="name" :range="category">
<view class="u-m-t-14 u-p-t-10 u-flex u-row-between border-bottom u-p-b-10 u-relative ">
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
<!-- <view>
<text class="" v-if="form.category!==''">{{category[form.category].name}}</text>
<text class="color-999 " v-else>选择分类</text>
</view> -->
<view class="u-flex-1">
<uni-easyinput :inputBorder="false" paddingNone v-model="form.category"
placeholder="选择分类"></uni-easyinput>
</view>
<uni-icons type="right" size="18" color="#999"></uni-icons>
</view>
</picker>
</uni-forms-item>
<uni-forms-item required label="" name="price">
<template #label>
<view class="u-m-t-24 u-text-left">
<text class="color-333">价格()</text>
<text class="color-red">*</text>
</view>
</template>
<view class="border-bottom u-p-t-10 u-p-b-10">
<uni-easyinput :inputBorder="false" paddingNone v-model="form.price" placeholder="输入价格"
type="digit"></uni-easyinput>
</view>
</uni-forms-item>
<uni-forms-item required label="" name="unit">
<template #label>
<view class="u-text-left u-m-t-24">
<text class="color-333">单位</text>
<text class="color-red">*</text>
</view>
</template>
<picker @change="unitChange" :value="units.current" range-key="name" :range="units.list">
<view class="u-m-t-14 u-p-t-10 u-flex u-row-between border-bottom u-p-b-10 u-relative ">
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
<view class="u-flex-1">
<uni-easyinput :inputBorder="false" paddingNone v-model="form.unit"
placeholder="选择单位"></uni-easyinput>
</view>
<uni-icons type="right" size="18" color="#999"></uni-icons>
</view>
</picker>
</uni-forms-item>
<uni-forms-item required label="" name="price">
<template #label>
<view class="u-m-t-24 u-text-left">
<text class="color-333">下单数量</text>
<text class="color-red">*</text>
</view>
</template>
<view class="border-bottom u-p-t-10 u-p-b-10">
<uni-easyinput :inputBorder="false" paddingNone v-model="form.number" placeholder="填写数量"
type="digit"></uni-easyinput>
</view>
</uni-forms-item>
</uni-forms>
</view>
</view>
<view class="fixed-b">
<my-button shape="circle" @tap="submit">加入购物车</my-button>
</view>
</template>
<script setup>
import myButton from '../../components/my-components/my-button';
import {
reactive,
ref
} from 'vue';
const units = reactive({
list: [{
name: '件',
value: 1
},
{
name: '杯',
value: 2
},
{
name: '个',
value: 3
}
],
current:''
})
const category = reactive([{
name: '分类1',
value: 1
},
{
name: '分类2',
value: 2
},
{
name: '分类3',
value: 3
}
])
let categoryCurrent = ref('')
function categoryChange(e) {
console.log(e);
categoryCurrent.value = e.detail.value
form.category = category[e.detail.value].name
}
function unitChange(e){
units.current = e.detail.value
form.unit = units.list[e.detail.value].name
}
const refform = ref(null)
const form = reactive({
name: '',
category: '',
price: 0,
unit:'',
number:0
})
// 校验规则
const rules = {
name: {
rules: [{
required: true,
errorMessage: '菜品名称不能为空'
}]
},
category: {
rules: [{
required: true,
errorMessage: '请选择菜品分类'
}]
},
price: {
rules: [{
required: true,
errorMessage: '请输入价格'
}]
},
unit: {
rules: [{
required: true,
errorMessage: '请选择单位'
}]
},
price: {
rules: [{
required: true,
errorMessage: '请填写下单数量'
}]
},
}
function submit() {
refform.value.validate(res => {
console.log(res)
}).catch(err => {
console.log(err);
})
}
</script>
<style lang="scss" scoped>
.form {
margin-top: 32rpx;
background-color: #fff;
padding: 32rpx 24rpx 32rpx 24rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
// background-color: transparent;
}
::v-deep.uni-forms-item {
align-items: inherit;
}
::v-deep.uni-forms-item__error {
display: none;
}
.fixed-b {
position: fixed;
left: 100rpx;
right: 100rpx;
bottom: 100rpx;
}
</style>