detail.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <view class="p-content">
  3. <view class="p-body">
  4. <uni-forms :model="formData" border ref="form" label-align="right">
  5. <uni-forms-item label="条码:">
  6. <text class="input">{{formData.code}}</text>
  7. </uni-forms-item>
  8. <uni-forms-item label="名称:">
  9. <text class="input">{{formData.name}}</text>
  10. </uni-forms-item>
  11. <uni-forms-item label="单位:">
  12. <text class="input">{{formData.unit}}</text>
  13. </uni-forms-item>
  14. <uni-forms-item label="库存:">
  15. <text class="input">{{formData.qty}}</text>
  16. </uni-forms-item>
  17. <uni-forms-item label="进价:">
  18. <text class="input">{{formData.cost}}</text>
  19. </uni-forms-item>
  20. <uni-forms-item label="销售价:">
  21. <text class="input">{{formData.price}}</text>
  22. </uni-forms-item>
  23. <uni-forms-item label="批发价:">
  24. <text class="input">{{formData.uprice}}</text>
  25. </uni-forms-item>
  26. </uni-forms>
  27. </view>
  28. <view class="p-footer">
  29. <button size="mini" type="primary" @click="submit('form')">录入商品信息</button>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. data() {
  36. return {
  37. formData:{
  38. code:'1111',
  39. name:'啊手动阀打发',
  40. unit:'个',
  41. qty:'13',
  42. cost:'53.65',
  43. price:'55.5',
  44. uprice:'80.65'
  45. },
  46. };
  47. },
  48. methods: {
  49. // 触发提交表单
  50. submit() {
  51. this.$refs.form.validate().then(res=>{
  52. console.log('表单数据信息:', res);
  53. }).catch(err =>{
  54. console.log('表单错误信息:', err);
  55. })
  56. }
  57. }
  58. }
  59. </script>
  60. <style lang="scss">
  61. .p-content{
  62. .p-body{
  63. flex-grow: 1;
  64. height: 50%;
  65. overflow: auto;
  66. .input{
  67. font-size: 30upx;
  68. height: 36px;
  69. line-height: 36px;
  70. }
  71. .uni-forms-item{
  72. margin-bottom: 0;
  73. padding: 10upx 0;
  74. }
  75. }
  76. .p-footer{
  77. padding: 20upx;
  78. text-align: center;
  79. button{
  80. width: 60%;
  81. padding: 10upx 0;
  82. }
  83. }
  84. }
  85. </style>