tab2.page.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <ion-header [translucent]="true">
  2. <ion-toolbar>
  3. <ion-title>识别</ion-title>
  4. </ion-toolbar>
  5. </ion-header>
  6. <ion-content>
  7. <form [formGroup]="recognitionForm" (ngSubmit)="submitForm()" #form="ngForm">
  8. <ion-card>
  9. <ion-list>
  10. <!-- 文字描述区域 -->
  11. <ion-item>
  12. <ion-card-title><ion-label position="stacked">手动输入(描述物品信息)</ion-label></ion-card-title>
  13. <ion-input type="text" formControlName="itemInfo"></ion-input>
  14. </ion-item>
  15. <ion-item>
  16. <ion-label>分类选择</ion-label>
  17. <ion-select formControlName="itemCategory" interface="popover">
  18. <ion-select-option value="电子产品">电子产品</ion-select-option>
  19. <ion-select-option value="日用品">日用品</ion-select-option>
  20. <ion-select-option value="食品">食品</ion-select-option>
  21. <ion-select-option value="家具">家具</ion-select-option>
  22. <ion-select-option value="动植物产品">动植物产品</ion-select-option>
  23. <!-- 更多分类 -->
  24. </ion-select>
  25. </ion-item>
  26. </ion-list>
  27. </ion-card>
  28. <!-- 拍照识别区域 -->
  29. <ion-card>
  30. <ion-card-header>
  31. <ion-card-title>拍照识别</ion-card-title>
  32. </ion-card-header>
  33. <ion-card-content>
  34. <ion-button (click)="takePhoto()" expand="block">
  35. <ion-icon slot="start" name="camera"></ion-icon>
  36. 直接拍照
  37. </ion-button>
  38. <ion-button (click)="selectFromAlbum()" expand="block">
  39. <ion-icon slot="start" name="images"></ion-icon>
  40. 相册选取
  41. </ion-button>
  42. <div *ngIf="imageSrc">
  43. <img [src]="imageSrc" alt="图片预览" />
  44. </div>
  45. </ion-card-content>
  46. </ion-card>
  47. <ion-card>
  48. <ion-list>
  49. <!-- 地址区域 -->
  50. <ion-item>
  51. <ion-card-title><ion-label position="stacked">发送地址:</ion-label></ion-card-title>
  52. <ion-input type="text" formControlName="sendAddress"></ion-input> <!-- 注意这里的formControlName -->
  53. </ion-item>
  54. <ion-item>
  55. <ion-card-title><ion-label position="stacked">收获地址:</ion-label></ion-card-title>
  56. <ion-input type="text" formControlName="receiveAddress"></ion-input> <!-- 注意这里的formControlName -->
  57. </ion-item>
  58. </ion-list>
  59. </ion-card>
  60. <ion-button type="submit" expand="block" color="primary">
  61. <ion-icon name="cloud-upload-outline"></ion-icon>
  62. 提交
  63. </ion-button>
  64. </form>
  65. <form>
  66. <ion-card>
  67. <!-- 在页面的合适位置添加以下代码,例如在form标签下方 -->
  68. <div *ngIf="submittedData && hasData(submittedData)">
  69. <h3>提交的数据:</h3>
  70. <p>物品信息: {{ submittedData.itemInfo }}</p>
  71. <p>物品分类: {{ submittedData.itemCategory }}</p>
  72. <p>发送地址: {{ submittedData.sendAddress }}</p>
  73. <p>收货地址: {{ submittedData.receiveAddress }}</p>
  74. <!-- 图片预览 -->
  75. <div *ngIf="imageSrc">
  76. <img [src]="imageSrc" alt="图片预览" />
  77. </div>
  78. </div>
  79. </ion-card>
  80. </form>
  81. </ion-content>