9 | 小程序实战之支付（莫点，卑微的我还没有资格完成）

9 | 小程序实战之支付

9.1 效果

9.2 页面布局与数据显示

9.2.1 思路

页面加载的时候，从缓存中获取购物车数据并把数据渲染到页面中，但是这些数据的checked=true ，可以使用 filter函数

filter函数
对数组中的每个元素都执行一次指定的函数（callback），并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略，同时，新创建的数组也不会包含这些元素。
参考

9.2.2 代码

<!-- 收货地址 -->
<view class="revice_address_row">
  <view class="user_info_row">
    <view class="user_info">
      <view>{{address.userName}}</view>
      <view>{{address.all}}</view>
    </view>
    <view class="user_phone">{{address.telNumber}}</view>
  </view>
</view>
<!-- 购物车内容 -->
<view class="cart_content">
  <view class="cart_title">购物车</view>
  <view class="cart_main">
    <view
     class="cart_item"
     wx:for="{{cart}}"
     wx:key="goods_id"
    >
      <!-- 商品图片 -->
      <navigator class="cart_img_wrap">
        <image mode="widthFix" src="{{item.goods_small_logo}}"></image>
      </navigator>
      <!-- 商品信息 -->
      <view class="cart_info_wrap">
        <view class="goods_name">{{item.goods_name}}</view>
        <view class="goods_price_wrap">
          <view class="goods_price">￥{{item.goods_price}}</view>
          <view class="goods_num">X{{item.num}}</view>
        </view>
      </view>
    </view>
  </view>
</view>
<!-- 底部工具栏 -->
<view class="footer_tool">
  <!-- 总价格 -->
  <view class="total_price_wrap">
    <view class="total_price">
      合计:
      <text class="total_price_text">￥{{totalPrice}}</text>
    </view>
    <view>包含运费</view>
  </view>
  <!-- 结算 -->
  <view class="order_pay_wrap" bindtap="handlePay">
    支付({{totalNum}})
  </view>
</view>

/* pages/pay/index.wxss */
.revice_address_row{
  .user_info_row{
    display: flex;
    padding: 20rpx;
    .user_info{
      flex: 5;
    }
    .user_phone{
      flex: 3;
      text-align: right;
    }
  }
}
.cart_content {
  .cart_title {
    padding: 20rpx;
    font-size: 36rpx;
    color: var(--themeColor);
    border-top: 1rpx solid currentColor;
    border-bottom: 1rpx solid currentColor;
  }
  .cart_main {
    .cart_item {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #ccc;
      .cart_img_wrap {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 80%;
        }
      }
      .cart_info_wrap {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods_name {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp:2;
          color: #666;
        }
        .goods_price_wrap {
          display: flex;
          justify-content: space-between;
          .goods_price {
            color: var(--themeColor);
            font-size: 34rpx;
          }
          .goods_num {
            width: 55rpx;
            height: 55rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        } 
      }
    }
  }
}
.footer_tool {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #ccc;
  .total_price_wrap {
    flex: 5;
    padding-right: 15rpx;
    text-align: right;
    .total_price {
      .total_price_text {
        color: var(--themeColor);
        font-size: 34rpx;
        font-weight: 600;
      }
    }
  }
  .order_pay_wrap {
    flex: 3;
    background-color: var(--themeColor);
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

Page({
  data: {
    address:{},
    cart:[],
    totalPrice: 0,
    totalNum: 0
  },
  /*
    使用onShow周期函数是因为购物车需要频繁被打开和隐藏，
    重新打开可以初始化页面
  */
  onShow(){
    // 1 获取缓存中的收货地址信息
    const address = wx.getStorageSync('address');
    let cart = wx.getStorageSync('cart') || [];
    cart = cart.filter(v=>v.checked);
    this.setData({
      address
    })
    // 计算总价格和总数量
    let totalPrice = 0;
    let totalNum = 0;
    cart.forEach(v=>{
        totalPrice += v.num * v.goods_price;
        totalNum += v.num;
    })
    this.setData({
      cart,
      totalPrice,
      totalNum
    })
  }
})

看完视频后，发现卑微的我这块得要公司的appid，所以等以后在更新了。。。 😭😭😭
如果想了解的兄弟们，看看这个教程