小程序支付流程

最新推荐文章于 2023-04-20 16:01:29 发布

@一点儿

最新推荐文章于 2023-04-20 16:01:29 发布

阅读量60

点赞数 1

本文链接：https://blog.csdn.net/weixin_54534151/article/details/116903634

版权

该博客详细描述了一个在微信小程序中实现支付的完整流程，包括检查本地token、用户登录、创建订单、调用微信支付接口、处理支付成功与失败的情况，并在支付成功后更新商品缓存和跳转到订单页面。同时，它还展示了如何处理支付过程中的错误情况。

摘要由CSDN通过智能技术生成

首先我们肯定是判断用户有没登录，一般都是判断本地有没有token。
如果没有，让用户取登录。
如果有，

async add() {
    try {
      // 1 判断缓存中有没有token 
      const token = wx.getStorageSync("token");
      // 2 判断
      if (!token) {
        wx.navigateTo({
          url: '/pages/auth/auth'
        });
        return;
      }
      // 3 创建订单
      // 3.1 准备 请求头参数
      // const header = { Authorization: token };
      // 3.2 准备 请求体参数
      const order_price = this.data.maxPrice;  // 支付价格
      const consignee_addr = wx.getStorageSync('pay'); // 收货地址
      const cart = this.data.list;    // 购买清单
      let goods = [];
      cart.forEach(v => goods.push({
        goods_id: v.goods_id,
        goods_number: v.num,
        goods_price: v.goods_price
      })) // 都push 到一个数组中
      const orderParams = { order_price, consignee_addr, goods };
      // 4 准备发送请求 创建订单 获取订单编号
      const { order_number } = await request({ url: "/my/orders/create",
       method: "POST", data: orderParams });
      // 5 发起 预支付接口
      const { pay } = await request({ url: "/my/orders/req_unifiedorder", 
      method: "POST", data: { order_number } });
      
      // 6 发起微信支付 
      await requestPayment(pay);
      // 7 查询后台 订单状态
      const res = await request({ url: "/my/orders/chkOrder", 
      method: "POST", data: { order_number } });
      
      await showToast({ title: "支付成功" });
      // 8 手动删除缓存中 已经支付了的商品
      let newCart = wx.getStorageSync("cart");
      newCart = newCart.filter(v => !v.checked);
      wx.setStorageSync("cart", newCart);

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

    } catch (error) {
      await wx.showToast({ title: "支付失败" }) // 支付失败的提示信息
      console.log(error);
    }
  },