底栏

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
     }
   },
 }
@@ -125,24 +167,57 @@ export default {
   }
 
   .goods {
-  background-color: #fff;
+    background-color: #fff;
-  border-radius: 5rpx;
+    border-radius: 5rpx;
-  margin: 20rpx;
+    margin: 20rpx;
-  padding: 20rpx;
+    padding: 20rpx;
-  .goods_title {
+    .goods_title {
-    line-height: 60rpx;
+      line-height: 60rpx;
-    font-size: 30rpx;
+      font-size: 30rpx;
-    font-weight: bold;
+      font-weight: bold;
+    }
+
+    .goods_list {
+      .goods_item {
+        position: relative;
+        .goods_count {
+          position: absolute;
+          right: 20rpx;
+          bottom: 20rpx;
+        }
+      }
+    }
   }
 
-  .goods_list {
+.bottom {
-    .goods_item {
+  height: 83rpx;
-      position: relative;
+  position: fixed;
-      .goods_count {
+  bottom: 0;
-        position: absolute;
+  left: 0;
-        right: 20rpx;
+  right: 0;
-        bottom: 20rpx;
+  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;
     }
   }
 }