支付确认订单页面实现

类似购物车页面，但是这里商品显示的是购物车选中的商品，所以cart要加下checked过滤；

<!-- 收货地址 开始 -->
<view class="revice_address_row">

    <view class="user_info">
      <view class="user_info_item">{{address.provinceName+address.cityName+address.countyName}}</view>
      <view class="user_info_item user_info_detail">{{address.detailInfo}}</view>
      <text class="user_info_item" decode="{{true}}">{{address.userName}}&nbsp;&nbsp;{{address.telNumber}}</text>
    </view>

</view>
<!-- 收货地址 结束 -->

<!-- 购物车清单 开始 -->
<view class="cart_content">
<view class="cart_main">
 
    <view class="cart_item"
      wx:for="{{cart}}"
      wx:key="id"
    >
    
      <!-- 商品图片 开始 -->
      <navigator class="cart_img_warp" url="/pages/product_detail/index?id={{item.id}}">
        <image mode="widthFix" src="{{baseUrl+'/image/product/'+item.proPic}}"></image>
      </navigator>
      <!-- 商品图片 结束 -->

      <!-- 商品信息 开始 -->
      <view class="cart_info_warp">
        <navigator url="/pages/product_detail/index?id={{item.id}}">
          <view class="goods_name">{{item.name}}</view>
        </navigator> 
        <view class="goods_price_warp">
          <view class="goods_price">¥ {{item.price}}</view>
          <view class="cart_num_tool">
            
            <view class="goods_num">×{{item.num}}</view>
          
          </view>
        </view>
      </view>
      <!-- 商品信息 结束 -->
    </view>
 
</view>
</view>
<!-- 购物车清单 结束 -->

<!-- 底部工具类 开始 -->
<view class="footer_tool">


<!-- 总价格 开始 -->
<view class="total_price_wrap">
  <view class="total_price">
    共{{totalNum}}件，合计<text class="total_price_text" decode="{{true}}">&nbsp;¥ {{totalPrice}}</text>
  </view>
</view>
<!-- 总价格 结束 -->

<!-- 结算 开始 -->
<view class="order_pay_wrap" bindtap="handlePay">
  去付款
</view>
<!-- 结算 结束 -->
</view>
<!-- 底部工具类 结束 -->

在这里插入图片描述

page{
    padding-bottom: 70rpx;
  }
  
  .revice_address_row{
    border-bottom: 1rpx dotted gray;
    padding: 20rpx;
   .user_info{
     .user_info_item{
      margin-top: 10rpx;
     }
     .user_info_detail{
      font-size: 20px;
      font-weight: bolder;
      margin-bottom: 10rpx;
     }
   }
  }
  
  .cart_content{
    background-color: #F5F5F5;
    .cart_main{
      padding: 2rpx 10rpx 10rpx 10rpx;
      .cart_item{
        display: flex;
        background-color: white;
        border-radius: 10px;
        margin: 20rpx;
        padding-right: 20rpx;
      
        .cart_img_warp{
          flex:2;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 20rpx;
          border-radius: 10px;
          background-color: #F5F5F5;
          image{
            width: 80%;
          }
        }
        .cart_info_warp{
          flex:4;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          navigator{
            .goods_name{
              font-weight: bolder;
              display: -webkit-box;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }
          .goods_price_warp{
            display: flex;
            justify-content: space-between;
            .goods_price{
              color:var(--themeColor);
              font-size:34rpx;
            }
            .cart_num_tool{
              display: flex;
          
              .goods_num{
                display: flex;
                justify-content: center;
                align-items: center;
            
              }
            }
          }
        }
      }
    }
  }
  
  
  .footer_tool{
    display: flex;
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-left: 30rpx;
    .total_price_wrap{
      flex:5;
      display: flex;
     
      align-items: center;
      .total_price{
        .total_price_text{
          color:var(--themeColor);
          font-size: 34rpx;
          font-weight: bold;
        }
      }
    }
    .order_pay_wrap{
      flex:3;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(90deg,#FF740B,#FE6227);
      margin: 10rpx;
      color:#fff;
      font-weight: 600;
      font-size: 32rpx;
      border-radius: 20px;
    }
  }

// 导入request请求工具类
import {
    getBaseUrl,
    requestUtil
  } from '../../utils/requestUtil.js';
  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
      baseUrl: '',
      cart:[],
      address:{},
      totalPrice:0,
      totalNum:0
    },
  
  
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      const baseUrl=getBaseUrl();
      this.setData({
        baseUrl
      })
    },
  
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
      console.log("show")
      const address=wx.getStorageSync('address');
      let cart=wx.getStorageSync('cart')||[];
      // 选中的商品显示
      cart=cart.filter(v=>v.checked);
      let totalPrice=0;
      let totalNum=0;
      cart.forEach(v=>{
          totalPrice+=v.num*v.price;
          totalNum+=v.num;
      })
     
      this.setData({
        cart,
        address,
        totalNum,
        totalPrice
      })
    }
  
  })