购物车为空

src/pages/cart/cart.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="cart">
+      <block v-if="cartList.length !== 0">
         <view class="cart_item" v-for="(item, index) in cartList" :key="item.goods_id">
             <!-- 1. 选择按钮 -->
             <radio class="cart_item_radio" @tap="itemSelectChangeHandle(item.goods_id)" :checked="item.goods_select" color="#e03440" />
@@ -21,6 +22,12 @@
             <text class="price">{{totalPrice}}</text>
             <view @tap="goToPay" class="bottom_btn" :class="{disable: totalCount === 0}">去结算({{totalCount}})</view>
         </view>
+      </block>
+      <!-- 如果购物车为空 -->
+      <view v-else class="cart_empty">
+          <image class="cart_empty_image" mode="widthFix" src="/static/cart_empty_image.gif" />
+          <navigator class="cart_empty_button" url="/pages/index/index" open-type="switchTab">去首页看看</navigator>
+      </view>
   </view>
 </template>
 
@@ -198,4 +205,28 @@ export default {
     }
   }
 }
+
+.cart_empty {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  .cart_empty_image {
+    width: 400rpx;
+  }
+
+  .cart_empty_button {
+    margin-top: 20rpx;
+    width: 400rpx;
+    height: 60rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ea4350;
+    color: #fff;
+    border-radius: 30rpx;
+  }
+}
 </style>