page-cart;换为ionic组件；增删数据库内容

CraftsMart-angular/src/modules/craftsmart/page-cart/page-cart.component.html

@@ -1,6 +1,7 @@
-<ion-searchbar show-cancel-button="focus" placeholder="欢迎来到手艺之窗购物" cancel-button-text="取消" (ionInput)="handleInput($event)"></ion-searchbar>
+<ion-searchbar show-cancel-button="focus" placeholder="欢迎来到手艺之窗购物" cancel-button-text="取消"
+  (ionInput)="handleInput($event)"></ion-searchbar>
 
-<div class="buttons-row">
+<!-- <div class="buttons-row">
    <div class="button-tag">
      <button (click)="showContent('cart-one')">推荐</button>
    </div>
@@ -10,9 +11,90 @@
    <div  class="button-tag">
     <button (click)="showContent('cart-three')">数字藏品</button>
    </div>
-</div>
+</div> -->
+<ion-grid style="text-align: center; padding-bottom: 0;">
+  <ion-row class="nav-two" >
+    <ion-col (click)="showContent('cart-one')" class="nav-two">推荐</ion-col>
+    <ion-col (click)="showContent('cart-two')">手工艺品</ion-col>
+    <ion-col (click)="showContent('cart-three')">藏品</ion-col>
+  </ion-row>
+</ion-grid>
 
-<div class="content-wrapper">
+<ion-grid class="nav-three">
+  <ion-row >
+    <ion-col>
+      <ion-card *ngFor="let item of items" style="margin: 2px 1px">
+        <div *ngIf="item.choice === 1" >
+          <ion-img [src]="item.imgUrl"></ion-img>
+        <ion-card-header>
+
+          <ion-card-title>
+            {{ item.name }}
+          </ion-card-title>
+
+          <ion-card-subtitle>
+            <ion-grid>
+              <ion-row style="  text-align: center;">
+                <ion-col size="auto">
+                  <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
+                <ng-template #defaultPrice>￥{{ item.price }}</ng-template>
+                </ion-col>
+                <ion-col>
+                  <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
+                <ng-template #defaultPrice>销量{{ item.price }}</ng-template>
+                </ion-col>
+              </ion-row>
+            </ion-grid>
+          </ion-card-subtitle>
+        </ion-card-header>
+
+        <ion-card-content>
+          {{item.description}}
+        </ion-card-content>
+
+        </div>
+      </ion-card>
+
+    </ion-col>
+    
+    <ion-col>
+      <ion-card *ngFor="let item of items" style="margin:1px 1px 4px 1px">
+        <div *ngIf="item.choice === 2" >
+          <ion-img [src]="item.imgUrl"></ion-img>
+        <ion-card-header>
+
+          <ion-card-title>
+            {{ item.name }}
+          </ion-card-title>
+
+          <ion-card-subtitle>
+            <ion-grid>
+              <ion-row style="  text-align: center;">
+                <ion-col size="auto">
+                  <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
+                <ng-template #defaultPrice>￥{{ item.price }}</ng-template>
+                </ion-col>
+                <ion-col>
+                  <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
+                <ng-template #defaultPrice>销量{{ item.price }}</ng-template>
+                </ion-col>
+              </ion-row>
+            </ion-grid>
+          </ion-card-subtitle>
+
+        </ion-card-header>
+
+        <ion-card-content>
+          {{item.description}}
+        </ion-card-content>
+        </div>
+      </ion-card>
+ 
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<!-- <div class="content-wrapper">
   <div class="item-container" >
     <div *ngFor="let item of items" class="image-container">
       <div *ngIf="item.choice === 1" class="left-column" >
@@ -41,4 +123,4 @@
       </div>
     </div>
   </div>
-</div>
+</div> -->

CraftsMart-angular/src/modules/craftsmart/page-cart/page-cart.component.scss

@@ -14,6 +14,35 @@
   
 }
 
+// .nav-two{
+//   border: solid 1px rebeccapurple;
+//   align-items: center;
+// }
+ion-searchbar{
+  padding-top: 5px;
+  padding-bottom: 0;
+}
+
+.nav-three{
+  height: 80vh;
+  overflow-y: auto;
+}
+ion-col {
+  border: solid 1px #fff;
+  padding: 5px 0;
+}
+
+ion-card-title {
+  font-size: 18px; /* 你可以根据需要调整这个值 */
+}
+ion-card-header{
+padding: 5px 20px;
+}
+.placeholder {
+  display: none;
+}
+
+
 .active {
   padding-bottom: 3px;
   color: black;
@@ -38,6 +67,7 @@
       
        .left-column {
          flex: 1;
+         background-color: #787878;
 
          .image-item {
           display: flex;
@@ -80,6 +110,7 @@
 
        
        .right-column {
+        background-color: aqua;
          flex: 1;
          .image-item {
           display: flex;

CraftsMart-angular/src/modules/craftsmart/page-cart/page-cart.component.ts

@@ -10,6 +10,7 @@ interface Item {
   sales: number;
   choice:number;
  detailId: string;
+ description:string;
 }
 
 @Component({
@@ -50,7 +51,8 @@ export class PageCartComponent implements OnInit {
           price: result.get('price'),
           sales: result.get('sales'),
           choice:result.get('choice'),
-         detailId: result.get('detailId')
+         detailId: result.get('detailId'),
+         description:result.get('description')
         }));
         console.log(this.items);
       })