微信扫码支付

微信小程序–支付页面（核心）

包含功能点：

• 微信扫码支付

结构：pay.wxml

<!-- 收货地址 -->
<view class="receive_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 class="" src="{{item.goods_small_logo}}" mode="widthFix" />
      </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="cart_num_tool">
            <view class="goods_num">x{{item.num}}</view>
          </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="handleOrderPay">支付({{totalNum}})</view>
</view>

样式：pay.less

page {
  padding-bottom: 90rpx;
}

// 收货地址
.receive_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 {
    text-align: center;

    .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;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #666;
        }

        .goods_price_wrap {
          display: flex;
          justify-content: space-between;

          .goods_price {
            color: var(--themeColor);
            font-size: 34rpx;
          }

          .cart_num_tool {
            display: flex;

            .goods_num {
              width: 55rpx;
              height: 55rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
}

// 底部工具栏
.footer_tool {
  position: fixed;
  left: 0;
  bottom: 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 {
      text.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;
  }
}

逻辑：pay.js文件

// pages/cart/cart.js
import { getSetting, chooseAddress, openSetting, showModal, showToast, requestPayment } from "../../utils/asyncWx.js"
import { request } from "../../request/index.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    address: {},
    cart: [],
    totalPrice: 0,
    totalNum: 0
  },
  /**
   * 点击  支付
   * 1. 判断缓存中有没有token
   *    没有  跳转到授权页面  进行获取token
   *    有token...
   */
  handleOrderPay() {
    try {
      
      // 支付功能：个人没办法开发
      showToast({ title: "待开发" })
      return;

      // 1.判断缓存中有没有token
      const token = wx.getStorageSync("token");

      // 2.判断
      if (!token) {
        wx.navigateTo({
          url: '/pages/auth/auth'
        });
        return
      }

      // 3.创建订单
      // 3.1 如果除token以外，还需要请求头其他参数  const header = {  }; 然后发送请求的时候添加参数 header 就可以了。
      // 3.2 准备  请求体参数
      const order_price = this.data.totalPrice;
      const consignee_addr = this.data.address.all;
      const cart = this.data.cart;

      // 订单数组
      let goods = []
      cart.forEach(v => goods.push({
        goods_id: v.goods_id,
        goods_number: v.num,
        goods_price: v.goods_price
      }))

      // 请求参数
      const orderParams = { order_price, consignee_addr, goods };

      // 4. 准备发送请求  创建订单   获取订单编号
      request({ url: "/my/orders/create", method: "post", data: orderParams }).then(res => {
        console.log(res)
        let order_number = res

        // 5.发起  预支付接口
        request({ url: "/my/orders/req_unifiedorder", method: "post", data: { order_number } }).then(res=>{
          const pay = res;
          // 6.发起微信支付
          requestPayment(pay);
        });

        // 7.查询后台 订单状态
        request({ url: "/my/orders/chkOrder", method: "post", data: { order_number } });

        showToast({ title: "支付成功" })

        // 8.手动删除缓存中  已经支付了的商品
        let newCart = wx.getStorageSync("cart");
        // 留下没有选中的商品（不需要支付）
        newCart = newCart.filter(v => !v.checked);
        wx.setStorageSync("cart", newCart);

        // 8.支付成功了  跳转到订单页面
        wx.navigateTo({
          url: '/pages/order/order'
        });
      });

    } catch (error) {
      showToast({ title: "支付失败" })
    }

  },
  /**
   * 生命周期函数--监听页面显示
   * 页面加载的时候：需要做什么事？
   * 1. 从缓存中获取购物车数据，渲染到页面中
   *    这些数据  checked = true
   */
  onShow: function () {

    // 1. 获取缓存中的收货地址信息
    const address = wx.getStorageSync("address");

    // 2. 获取缓存中的购物车数据
    let cart = wx.getStorageSync("cart") || [];

    // 3 过滤后的购物车数组
    cart = cart.filter(v => v.checked);

    // 为data赋值
    // this.setData({ address });

    // 总价格和总数量
    let totalPrice = 0;
    let totalNum = 0;
    cart.forEach(v => {
      totalPrice += v.num * v.goods_price;
      totalNum += v.num;
    })

    // 2.给data赋值
    this.setData({
      cart,
      totalPrice,
      totalNum,
      address
    })
  }
})

页面配置文件：pay.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "商品支付"
}