123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- <template>
- <view class="p-content">
- <view class="p-body">
- <uni-forms :model="formData" border ref="form" :rules="rules" label-align="right" err-show-type="toast">
- <uni-forms-item label="条码:" name="code" required>
- <input type="text" v-model="formData.code" placeholder="请输入条码" />
- </uni-forms-item>
- <uni-forms-item label="名称:">
- {{formData.name}}
- </uni-forms-item>
- </uni-forms>
- </view>
- <view class="p-footer">
- <button size="mini" type="warn" @click="submit('form')">删除当前条码</button>
- <button size="mini" type="default" @click="delAll">删除全部商品</button>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- formData:{
- code:'',
- name:''
- },
- rules:{
- code: {
- rules: [{
- required: true,
- errorMessage: '请输入条码',
- },
- {
- minLength: 3,
- maxLength: 50,
- errorMessage: '条码长度在 {minLength} 到 {maxLength} 个字符',
- }
- ]
- }
- }
- };
- },
- methods: {
- // 触发提交表单
- submit() {
- this.$refs.form.validate().then(res=>{
- console.log('表单数据信息:', res);
- }).catch(err =>{
- console.log('表单错误信息:', err);
- })
- },
- delAll(){}
- }
- }
- </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;
- display: flex;
- button{
- width: 40%;
- padding: 10upx 0;
- }
- }
- }
- </style>
|