123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <ion-header [translucent]="true">
- <ion-toolbar>
- <ion-title>识别</ion-title>
- </ion-toolbar>
- </ion-header>
- <ion-content>
-
- <form [formGroup]="recognitionForm" (ngSubmit)="submitForm()" #form="ngForm">
- <ion-card>
- <ion-list>
- <!-- 文字描述区域 -->
- <ion-item>
- <ion-card-title><ion-label position="stacked">手动输入(描述物品信息)</ion-label></ion-card-title>
- <ion-input type="text" formControlName="itemInfo"></ion-input>
- </ion-item>
-
- <ion-item>
- <ion-label>分类选择</ion-label>
- <ion-select formControlName="itemCategory" interface="popover">
- <ion-select-option value="电子产品">电子产品</ion-select-option>
- <ion-select-option value="日用品">日用品</ion-select-option>
- <ion-select-option value="食品">食品</ion-select-option>
- <ion-select-option value="家具">家具</ion-select-option>
- <ion-select-option value="动植物产品">动植物产品</ion-select-option>
- <!-- 更多分类 -->
- </ion-select>
- </ion-item>
- </ion-list>
- </ion-card>
- <!-- 拍照识别区域 -->
- <ion-card>
- <ion-card-header>
- <ion-card-title>拍照识别</ion-card-title>
- </ion-card-header>
- <ion-card-content>
- <ion-button (click)="takePhoto()" expand="block">
- <ion-icon slot="start" name="camera"></ion-icon>
- 直接拍照
- </ion-button>
- <ion-button (click)="selectFromAlbum()" expand="block">
- <ion-icon slot="start" name="images"></ion-icon>
- 相册选取
- </ion-button>
- <div *ngIf="imageSrc">
- <img [src]="imageSrc" alt="图片预览" />
- </div>
- </ion-card-content>
- </ion-card>
- <ion-card>
- <ion-list>
- <!-- 地址区域 -->
- <ion-item>
- <ion-card-title><ion-label position="stacked">发送地址:</ion-label></ion-card-title>
- <ion-input type="text" formControlName="sendAddress"></ion-input> <!-- 注意这里的formControlName -->
- </ion-item>
- <ion-item>
- <ion-card-title><ion-label position="stacked">收获地址:</ion-label></ion-card-title>
- <ion-input type="text" formControlName="receiveAddress"></ion-input> <!-- 注意这里的formControlName -->
- </ion-item>
- </ion-list>
- </ion-card>
- <ion-button type="submit" expand="block" color="primary">
- <ion-icon name="cloud-upload-outline"></ion-icon>
- 提交
- </ion-button>
- </form>
- <form>
- <ion-card>
- <!-- 在页面的合适位置添加以下代码,例如在form标签下方 -->
- <div *ngIf="submittedData && hasData(submittedData)">
- <h3>提交的数据:</h3>
- <p>物品信息: {{ submittedData.itemInfo }}</p>
- <p>物品分类: {{ submittedData.itemCategory }}</p>
- <p>发送地址: {{ submittedData.sendAddress }}</p>
- <p>收货地址: {{ submittedData.receiveAddress }}</p>
- <!-- 图片预览 -->
- <div *ngIf="imageSrc">
- <img [src]="imageSrc" alt="图片预览" />
- </div>
- </div>
- </ion-card>
- </form>
- </ion-content>
|