购物车为空

src/pages/cart/cart.vue

@@ -1,26 +1,33 @@
 <template>
   <view class="cart">
-    <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" />
-      <!-- 2. 商品组件 -->
-      <goodsItem :item="item" />
-      <!-- 3. 计数器 -->
-      <view class="count">
-        <view @tap="itemChangeCount(index, -1)" class="count_btn iconfont icon-jianshao"></view>
-        <text class="count_text">{{ item.goods_count }}</text>
-        <view @tap="itemChangeCount(index, 1)" class="count_btn iconfont icon-zengjia"></view>
-      </view>
-    </view>
+      <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" />
+            <!-- 2. 商品组件 -->
+            <goodsItem :item="item" />
+            <!-- 3. 计数器 -->
+            <view class="count">
+                <view @tap="itemChangeCount(index, -1)" class="count_btn iconfont icon-jianshao"></view>
+                <text class="count_text">{{ item.goods_count }}</text>
+                <view @tap="itemChangeCount(index, 1)" class="count_btn iconfont icon-zengjia"></view>
+            </view>
+            </view>
 
-    <!-- 底部结算栏 -->
-    <view class="bottom">
-      <radio @tap="selectAllChange" :checked="selectAll" color="#E03440" class="select_btn" />
-      <text class="select_text">全选</text>
-      <text class="total_text">合计：</text>
-      <text class="price">{{totalPrice}}</text>
-      <view @tap="goToPay" class="bottom_btn" :class="{disable: totalCount === 0}">去结算({{totalCount}})</view>
-    </view>
+            <!-- 底部结算栏 -->
+            <view class="bottom">
+            <radio @tap="selectAllChange" :checked="selectAll" color="#E03440" class="select_btn" />
+            <text class="select_text">全选</text>
+            <text class="total_text">合计：</text>
+            <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>