cashier-ipad/pagesCreateOrder/add-temp-cuisine/add-temp-cuisine.vue

<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>