<template>
	<view class="p-content">
		<view class="p-body">
			<uni-forms :model="formData" border ref="form" label-align="right">
				<uni-forms-item label="条码:">
					<text class="input">{{formData.code}}</text>
				</uni-forms-item>
				<uni-forms-item label="名称:">
					<text class="input">{{formData.name}}</text>
				</uni-forms-item>
				<uni-forms-item label="单位:">
					<text class="input">{{formData.unit}}</text>
				</uni-forms-item>
				<uni-forms-item label="库存:">
					<text class="input">{{formData.qty}}</text>
				</uni-forms-item>
				<uni-forms-item label="进价:">
					<text class="input">{{formData.cost}}</text>
				</uni-forms-item>
				<uni-forms-item label="销售价:">
					<text class="input">{{formData.price}}</text>
				</uni-forms-item>
				<uni-forms-item label="批发价:">
					<text class="input">{{formData.uprice}}</text>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="p-footer">
			<button size="mini" type="primary" @click="submit('form')">录入商品信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					code:'1111',
					name:'啊手动阀打发',
					unit:'个',
					qty:'13',
					cost:'53.65',
					price:'55.5',
					uprice:'80.65'
				},
			};
		},
		methods: {
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss">
.p-content{
	.p-body{
		flex-grow: 1;
		height: 50%;
		overflow: auto;
		.input{
			font-size: 30upx;
			height: 36px;
			line-height: 36px;
		}
		.uni-forms-item{
			margin-bottom: 0;
			padding: 10upx 0;
		}
	}
	.p-footer{
		padding: 20upx;
		text-align: center;
		button{
			width: 60%;
			padding: 10upx 0;
		}
	}
}
</style>
