cashier_admin_app/pageInvoicing/category-management/warehouse-entry.vue

<template>
	<view class="min-page bg-gray u-p-30 u-font-28 color-333">

		<view class="form color-333 u-font-32">
			<view class="u-flex border">
				<view class="u-flex-1 u-p-l-24">
					<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
						placeholder="请输入货品编码"></uni-easyinput>
				</view>
				<view class="u-p-l-30">
					<image src="/pageInvoicing/static/images/icon-saoma.svg" class="icon-saoma" mode=""></image>
				</view>
			</view>
			<view class="u-flex border u-m-t-32">
				<view class="label">货品名称</view>
				<view class="u-flex-1 u-p-l-32">
					<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
						placeholder="请输入货品编码"></uni-easyinput>
				</view>
			</view>
			<view class="u-flex border u-m-t-32">
				<view class="label">入库数量</view>
				<view class="u-flex-1 u-p-l-32">
					<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
						placeholder="请输入货品编码"></uni-easyinput>
				</view>
				<view class="u-p-r-24 u-p-l-24">单位</view>
			</view>
			<view class="u-flex border u-m-t-32">
				<view class="label">总价值</view>
				<view class="u-flex-1 u-p-l-32">
					<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
						placeholder="请输入货品编码"></uni-easyinput>
				</view>
				<view class="u-p-r-24 u-p-l-24">元</view>
			</view>
			<view class="u-flex border u-m-t-32">
				<view class="label">单价</view>
				<view class="u-flex-1 u-p-l-32 u-p-r-32">
					单价 元/单位
				</view>
			</view>
		</view>
		<view class="bottom ">
			<view class=""><my-button shape="circle"  @tap="submit">
					<view >保存</view>
				</my-button></view>
			<view class="u-m-t-10"><my-button shape="circle" type="cancel" @tap="cancel">
					<view class="color-999">取消</view>
				</my-button></view>
			
		</view>
	</view>

	
</template>

<script setup>
	import {
		onLoad,
		onReady,
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	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: '',
		code: '',
		category: '',
		price: 0,
		inNumber: 0,
		unit: '',
		number: 0,
		inNumber: 0,
		allPrice: 0,
		supplierShopName: '',
		supplierName: '',
		supplierPhone: '',
	})
	// 校验规则
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '菜品名称不能为空'
			}]
		},
		code: {
			rules: [{
				required: true,
			}]
		},
		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);
		})
	}
	const page = reactive({
		type: 'add'
	})

	function cancel() {
		uni.navigateBack()
	}
	onLoad(opt => {})
</script>

<style lang="scss" scoped>
	.form {
		background-color: #fff;
		padding: 32rpx 24rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		overflow: hidden;

		.u-text-left {
			min-width: 160rpx;
		}

		// background-color: transparent;
	}

	::v-deep.uni-forms-item {
		min-height: inherit;
	}

	::v-deep.uni-forms-item .uni-forms-item__label {
		font-size: 32rpx !important;
	}

	::v-deep.uni-easyinput__placeholder-class {
		font-size: 32rpx;
	}

	::v-deep.uni-forms-item__error {
		display: none;
	}

	.bottom {
		padding-top: 84rpx;
		padding-right: 80rpx;
		padding-left: 80rpx;
	}

	.border {
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F9F9F9;
	}

	.icon-saoma {
		width: 28rpx;
		height: 28rpx;
	}

	.label {
		height: 84rpx;
		min-width: 190rpx;
		text-align: left;
		font-size: 32rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		line-height: 84rpx;
		background: #F9F9F9;
	}
</style>