购物车优化

src/components/spces/spces.ts

@@ -70,23 +70,23 @@ export class SpcesComponent {
         this.choose.id = this.goods.id;
         this.choose.model = this.goods.model;
         console.log(this.choose);
-        if(this.goods.specs1List.length > 0 && !this.choose.specs1){
+        if(this.goods.specs1List && this.goods.specs1List.length > 0 && !this.choose.specs1){
             this.commonSer.toast('请选择规格！');
             return false;
         }
-        if(this.goods.specs2List.length > 0 && !this.choose.specs2){
+        if(this.goods.specs2List && this.goods.specs2List.length > 0 && !this.choose.specs2){
             this.commonSer.toast('请选择规格！');
             return false;
         }
-        if(this.goods.specs3List.length > 0 && !this.choose.specs3){
+        if(this.goods.specs3List && this.goods.specs3List.length > 0 && !this.choose.specs3){
             this.commonSer.toast('请选择规格！');
             return false;
         }
-        if(this.goods.specs4List.length > 0 && !this.choose.specs4){
+        if(this.goods.specs4List && this.goods.specs4List.length > 0 && !this.choose.specs4){
             this.commonSer.toast('请选择规格！');
             return false;
         }
-        if(this.goods.specs5List.length > 0 && !this.choose.specs5){
+        if(this.goods.specs5List && this.goods.specs5List.length > 0 && !this.choose.specs5){
             this.commonSer.toast('请选择规格！');
             return false;
         }

src/pages/serve-pages/goods-collect/goods-cart/goods-cart.html

@@ -12,35 +12,43 @@
 
 
 <ion-content>
-    <div class="goodsItem" *ngFor="let goods of cartList">
-        <ion-row class="cart-item">
-            <ion-col col-2 class="center">
-                <ion-checkbox [(ngModel)]="goods.checkbox" color="danger"
-                              (ngModelChange)="changeCheck(goods)"></ion-checkbox>
-            </ion-col>
-            <ion-col col-6>
-                <p class="model">
-                    {{goods.model}}
-                </p>
-                <p>
-                    <span class="amount">数量:{{goods.amount}}</span>
-                    <span class="specs">规格:
+    <div class="cart">
+        <div class="goodsItem" *ngFor="let goods of cartList">
+            <ion-row class="cart-item">
+                <ion-col col-2 class="center">
+                    <ion-checkbox [(ngModel)]="goods.checkbox" color="danger"
+                                  (ngModelChange)="changeCheck(goods)"></ion-checkbox>
+                </ion-col>
+                <ion-col col-6>
+                    <p class="model">
+                        {{goods.model}}
+                    </p>
+                    <p>
+                        <span class="amount">数量:{{goods.amount}}</span>
+                        <span class="specs">规格:
                   <span>{{goods.specs1}}</span>
                   <span>{{goods.specs2}}</span>
                   <span>{{goods.specs3}}</span>
                   <span>{{goods.specs4}}</span>
                   <span>{{goods.specs5}}</span>
                 </span>
-                </p>
-            </ion-col>
-            <ion-col col-2 class="center" (click)="deletI(goods)">
-                <span class="icon iconfont icon-round-delete"></span>
-            </ion-col>
-            <ion-col col-2 class="center" (click)="choose(goods)">
-                <span class="icon iconfont icon-fabu"></span>
-            </ion-col>
-        </ion-row>
+                    </p>
+                </ion-col>
+                <ion-col col-2 class="center" (click)="deletI(goods)">
+                    <span class="icon iconfont icon-round-delete"></span>
+                </ion-col>
+                <ion-col col-2 class="center" (click)="choose(goods)">
+                    <span class="icon iconfont icon-fabu"></span>
+                </ion-col>
+            </ion-row>
+        </div>
     </div>
+    <ion-list text-center style="margin-top: 10rem;color: #666666" *ngIf="!isLoad  && cartList.length == 0">
+        <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
+        <p text-center>
+            购物车空空如也
+        </p>
+    </ion-list>
 </ion-content>
 <div *ngIf="footerView" class="stuff-footer">
     <div class="footer-flex">

src/pages/serve-pages/goods-collect/goods-cart/goods-cart.scss

 page-goods-cart {
+  .cart{
+    margin-bottom: 8rem;
+  }
   .stuff-footer {
     position: fixed;
     bottom: 0;
-    height: 4rem;
+    height: 5rem;
     width: 100%;
     text-align: center;
     border-top: 1px solid #eeeeee;
     z-index: 9;
+    background-color: #fff;
+
+    .item-ios.item-block .item-inner {
+      border: none;
+    }
+
+    .button-small-ios {
+      height: 2.6rem;
+    }
 
     img {
       margin-top: .5rem;
@@ -49,7 +61,8 @@ page-goods-cart {
     border-bottom: 1px solid #ddd;
     margin-bottom: 5px;
     padding: 5px;
-    .model{
+
+    .model {
       padding: 5px 0;
       font-size: 1.4rem;
     }
@@ -69,18 +82,20 @@ page-goods-cart {
       }
     }
 
-    .center{
+    .center {
       display: flex;
       justify-content: center;
       align-items: center;
     }
   }
-  .footer-flex{
+
+  .footer-flex {
     display: flex;
   }
-  .footer-flex > div{
+
+  .footer-flex > div {
     width: 50%;
-    line-height: 3rem;
+    line-height: 4rem;
     padding: 0 20px;
   }
 

src/pages/serve-pages/goods-collect/goods-cart/goods-cart.ts

@@ -16,6 +16,7 @@ export class GoodsCartPage {
     chooseObj = [];
 
     checkAll;
+    isLoad = true;
 
     constructor(public navCtrl: NavController, public navParams: NavParams,
                 private serveSer: ServeService, private modalCtrl: ModalController,
@@ -66,6 +67,7 @@ export class GoodsCartPage {
         this.serveSer.shoppingCar(data).subscribe(
             (res) => {
                 this.cartList = res.list;
+                this.isLoad = false;
                 this.cartList.forEach(e => {
                     e.checkbox = false;
                 })

src/pages/serve-pages/goods-collect/goods-collect.ts

@@ -45,12 +45,12 @@ export class GoodsCollectPage {
         this.getTypeList();
     }
 
-    search(){
+    search() {
         this.pageNumber = 1;
         this.getList();
     }
 
-    filterType(item){
+    filterType(item) {
         this.obj.type = item;
         this.getList();
     }
@@ -82,12 +82,14 @@ export class GoodsCollectPage {
 
     //打开过滤条件
     fliter() {
-        let modal = this.modalCtrl.create(FilterComponent, {list: this.typeList,choose:this.obj.type}, {
+        let modal = this.modalCtrl.create(FilterComponent, {list: this.typeList, choose: this.obj.type}, {
             enterAnimation: 'modal-from-right-enter',
             leaveAnimation: 'modal-from-right-leave'
         });
         modal.onDidDismiss(data => {
-            this.filterType(data.choose);
+            if (data) {
+                this.filterType(data.choose);
+            }
         });
         modal.present();
     }
@@ -142,7 +144,7 @@ export class GoodsCollectPage {
     }
 
     //选择规格 数量
-    choose(item){
+    choose(item) {
         let modal = this.modalCtrl.create(SpcesComponent, {goodsId: item.id});
         modal.onDidDismiss(res => {
             if (res) {
@@ -154,20 +156,20 @@ export class GoodsCollectPage {
     }
 
     //添加到购物车
-    addCart(){
+    addCart() {
         const data = {
-            "status":1,
-            "orderSuppies":[this.chooseObj]
+            "status": 1,
+            "orderSuppies": [this.chooseObj]
         };
         this.serveSer.saveOrder(data).subscribe(
-            (res)=>{
+            (res) => {
                 this.commonSer.toast('添加成功！')
             }
         )
     }
 
     //购物车
-    goCart(){
+    goCart() {
         this.navCtrl.push(GoodsCartPage);
     }