del.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <view class="p-content">
  3. <view class="p-body">
  4. <uni-forms :model="formData" border ref="form" :rules="rules" label-align="right" err-show-type="toast">
  5. <uni-forms-item label="条码:" name="code" required>
  6. <input type="text" v-model="formData.code" placeholder="请输入条码" />
  7. </uni-forms-item>
  8. <uni-forms-item label="名称:">
  9. {{formData.name}}
  10. </uni-forms-item>
  11. </uni-forms>
  12. </view>
  13. <view class="p-footer">
  14. <button size="mini" type="warn" @click="submit('form')">删除当前条码</button>
  15. <button size="mini" type="default" @click="delAll">删除全部商品</button>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. formData:{
  24. code:'',
  25. name:''
  26. },
  27. rules:{
  28. code: {
  29. rules: [{
  30. required: true,
  31. errorMessage: '请输入条码',
  32. },
  33. {
  34. minLength: 3,
  35. maxLength: 50,
  36. errorMessage: '条码长度在 {minLength} 到 {maxLength} 个字符',
  37. }
  38. ]
  39. }
  40. }
  41. };
  42. },
  43. methods: {
  44. // 触发提交表单
  45. submit() {
  46. this.$refs.form.validate().then(res=>{
  47. console.log('表单数据信息:', res);
  48. }).catch(err =>{
  49. console.log('表单错误信息:', err);
  50. })
  51. },
  52. delAll(){}
  53. }
  54. }
  55. </script>
  56. <style lang="scss">
  57. .p-content{
  58. .p-body{
  59. flex-grow: 1;
  60. height: 50%;
  61. overflow: auto;
  62. input{
  63. font-size: 30upx;
  64. height: 36px;
  65. line-height: 36px;
  66. }
  67. .uni-forms-item{
  68. margin-bottom: 0;
  69. padding: 10upx 0;
  70. }
  71. }
  72. .p-footer{
  73. padding: 20upx;
  74. text-align: center;
  75. display: flex;
  76. button{
  77. width: 40%;
  78. padding: 10upx 0;
  79. }
  80. }
  81. }
  82. </style>