购物车布局

src/pages/cart/cart.vue

@@ -1,13 +1,113 @@
 <template>
-  <view>cart</view>
+  <view class="cart">
+    <view class="cart_item" v-for="item in cartList" :key="item.goods_id">
+      <!-- 1. 选择按钮 -->
+      <radio class="cart_item_radio" :checked="item.goods_select" color="#e03440" />
+      <!-- 2. 商品组件 -->
+      <goodsItem :item="item" />
+      <!-- 3. 计数器 -->
+      <view class="count">
+        <view class="count_btn iconfont icon-jianshao"></view>
+        <text class="count_text">{{ item.goods_count }}</text>
+        <view class="count_btn iconfont icon-zengjia"></view>
+      </view>
+    </view>
+
+    <!-- 底部结算栏 -->
+    <view class="bottom">
+      <radio :checked="true" color="#E03440" class="select_btn" />
+      <text class="select_text">全选</text>
+      <text class="total_text">合计：</text>
+      <text class="price">3999</text>
+      <view class="bottom_btn">去结算(12)</view>
+    </view>
+  </view>
 </template>
 
 <script>
 export default {
-
+  data(){
+    return {
+      cartList: []
+    } 
+  },
+  onShow() {
+    const cartList = uni.getStorageSync("cartList") || [];
+    this.cartList = cartList
+  }
 }
 </script>
 
-<style>
+<style lang="scss">
+.cart {
+  padding-bottom: 83rpx;
+}
 
+.cart_item {
+  display: flex;
+  align-items: center;
+  padding: 0 20rpx;
+  position: relative;
+  .cart_item_radio {
+     margin: 0 20rpx;
+  }
+  .count {
+    position: absolute;
+    right: 0rpx;
+    bottom: 0rpx;
+    display: flex;
+    padding: 20rpx;
+    align-items: center;
+    .iconfont {
+      font-size: 40rpx;
+    }
+    .icon-jianshao {
+      font-size: 44rpx;
+    }
+    .count_text {
+      // 建议使用最小宽
+      min-width: 80rpx;
+      text-align: center;
+    }
+  }
+}
+
+.bottom {
+  height: 83rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  border-top: 1rpx solid #ddd;
+  display: flex;
+  align-items: center;
+  padding: 0 20rpx;
+  .select_text {
+    margin: 0 20rpx;
+    color: #888;
+    font-size: 22rpx;
+  }
+
+  .total_text {
+    font-size: 26rpx;
+  }
+
+  .price {
+    font-size: 28rpx;
+    flex: 1;
+  }
+
+  .bottom_btn {
+    font-size: 22rpx;
+    width: 150rpx;
+    height: 52rpx;
+    border-radius: 26rpx;
+    color: #fff;
+    background-color: #ea4350;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
 </style>