底栏

src/pages/pay/pay.vue

@@ -40,6 +40,17 @@
         </view>
       </view>
     </view>
+
+    <!-- 4. 底栏 -->
+    <view class="bottom">
+      <text class="total_text">合计：</text>
+      <text class="price">{{totalPrice}}</text>
+      <view
+        class="bottom_btn"
+        :class="{ disabled: !address.userName }"
+        @tap="payHandle"
+      >去支付({{ totalCount }})</view>
+    </view>
   </view>
 </template>
 
@@ -66,13 +77,44 @@ export default {
           this.address = res
         }
       })
+    },
+    // 去付款
+    payHandle(){
+      if (!this.address.userName) {
+        uni.showToast({ title: "请选择收货地址", icon: "none" });
+      } else {
+        console.log("走支付逻辑");
       }
     },
+  },
   computed: {
     // 拼接收货地址
     addressDetail (){
       const {detailInfo, countyName, cityName, provinceName} = this.address
       return provinceName + cityName + countyName + detailInfo
+    },
+    // 总价格
+    totalPrice(){
+        let totalPrice = 0
+        this.cartList.forEach(item => {
+            if(item.goods_select){
+                totalPrice += item.goods_price * item.goods_count
+            }
+        })
+        return totalPrice
+    },
+    // 总数量
+    totalCount(){
+        let totalCount = 0
+      // 京东规则 
+      //   this.cartList.forEach(item => {
+      //       if(item.goods_select){
+      //           totalCount += item.goods_count
+      //       }
+      //   })
+      // 淘宝规则 
+        totalCount = this.cartList.filter(item=>item.goods_select).length
+        return totalCount
     }
   },
 }
@@ -146,4 +188,37 @@ export default {
       }
     }
   }
+
+.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;
+
+  .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;
+    &.disabled {
+      background-color: #ccc;
+    }
+  }
+}
 </style>