微信小程序开发一个小型商城（七、支付页面）

上一篇：微信小程序开发一个小型商城（六、购物车页面）
在这里，基本上是与购物车页面相似的：

在从购物车页面跳转过来，在购物车界面对购物车商品会进行合法判断，是否有收货人的信息和是否存在商品，而在订单页面基本上是对购物车页面的另一种格式，将其数量进行渲染和把复选框去掉。
也不做过多解释，直接看代码 wxml

<view class="user_info_row">
  <view class="user_info">
    <view>{{address.userName}}</view>
    <view>{{address.provinceName}}{{address.cityName}}{{address.countyName}}{{address.countyName}}{{address.detailInfo}}</view>
  </view>
  <view class="user_phone">{{address.telNumber}}</view>

</view>

<!--购物车的内容-->
<view class="cart_content">
  <view class="cart_title">购物车</view>
  <view class="cart_main">
    <!--当cart数组不为0显示 -->

    <view class="cart_item" wx:for="{{cart}}" wx:key="goods_id">

      <!--商品图片-->
      <navigator class="cart_img_wrap">
        <image 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>

less

page {
  padding-bottom: 90rpx;
}

.cart_content {
  .cart_title {
    padding: 20rpx;
    color: var(--themeColor);
    font-size: 36rpx;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }

  .cart_main {
    .cart_item {
      display: flex;
      padding: 10rpx;
      border-bottom: 1px 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;
          }

          .cart_num_tool {
            display: flex;

            .goods_num {
              width: 50rpx;
              height: 50rpx;
              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: 1px solid #ccc;

  .total_price_wrap {
    flex: 4;
    padding-left: 15rpx;
    .total_price {
      .total_price_text {
        color: var(--themeColor);
        font-size: 34rpx;
        font-weight: 600;
      }
    }
  }

  .order_pay_wrap {
    flex: 3;
    background-color: var(--themeColor);
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

Js文件：当中先定义一个单击事件（支付按钮）handleOrderPay ：判断缓存是否存在token，不存在token值，使用navigateTo跳转到授权页面进行授权，存在token值后：创建订单， 获取请求头参数header，其中的参数是组合体参数。发送请求获取订单编号，当获取完订单编号之后，再次发送请求，发送预支付接口，在实现微信支付之后，手动删除已经购买了的商品数据，使用过滤对数据进行过滤filter，过滤后的数据再一次的填充给变量，表示支付成功后跳转回去，反之支付失败，使用try catch异常处理，

// pages/cart/index.js
import { request } from "../../request/index.js";
import regeneratorRuntime from "../../lib/runtime/runtime";
import {
  getSetting,
  chooseAddress,
  openSetting,
  requestPayment,
} from "../../util/ansycWx.js";
Page({
  data: {
    address: {}, //地址信息
    cart: [], //购物车数组
    totalPrice: 0, //总价
    totalNum: 0, //总数量
  },
  onLoad: function (options) {},
  onShow: function (options) {
    //获取缓存中地址信息
    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,
      address,
    });
  },
  //授权购买支付
  async handleOrderPay(e) {
    console.log("点击支付");
    try {
      //判断缓存是否存在token
      const token = wx.getStorageSync("token");
      //不存在token时
      if (!token) {
        //不存在token值
        wx.navigateTo({
          url: "/pages/auth/index",
        });
        return;
      }
      //存在token后：创建订单，
      //请求头参数
      //const header = { Authorization: token };
      //组合体参数
      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 };
      //获取订单编号
      const { orderNum } = await request({
        url: "/my/orders/create",
        data: orderParams,
        method: "post",
      });
      console.log(orderNum);
      //发起预支付接口
      const { pay } = await request({
        url: "/my/orders/req_unifiedorder",
        method: "post",
        data: orderParams,
      });
      //发起微信支付
      await requestPayment(pay);
      //console.log(res)
      //查询后台订单
      const res = await request({
        url: "/my/orders/chkOrder",
        method: "post",
        data: { orderNum },
      });
      //console.log(res)
      wx.showToast({ title: "支付成功" });
      //手动删除已经删除了的商品数据
      let newCart = wx.getStorageSync("cart");
      //对数据进行过滤
      newCart = newCart.filter((v) => !v.checked);
      //再次填充回去
      wx.setStorageSync("cart", newCart);
      //页面跳转
      wx.navigateTo({ url: "/pages/order/index" });
    } catch (error) {
      wx.showToast({ title: "支付失败" });
      console.log(error);
    }
  },
});

点击支付按钮后，跳转到授权按钮页面。代码如下
wxml

<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" >
    获取授权
  </button>

less

button{
    margin-top: 40rpx;
    width: 70%;
}

js

// pages/auth/index.js
import { request } from "../../request/index.js";
import regeneratorRuntime from "../../lib/runtime/runtime";
import { login } from "../../util/ansycWx.js";
Page({
  data: {},
  onLoad: function (options) {},
  onShow: function () {},
  async handleGetUserInfo(e) {
    try {
      console.log(e);
      //获取用户信息
      const { encryptedData, rawData, iv, signature } = e.detail;
      //获取code值
      const { code } = await login();
      console.log(code);
      //把数据封装成一个对象进行传递
      const loginParams = { encryptedData, rawData, iv, signature, code };
      //console.log(loginParams)
      //发送请求，获取数据 该 appid无法获取到接口当中的token，没有权限
      const { token } = await request({
        url: "/users/wxlogin",
        data: loginParams,
        method: "post",
      });
      wx.setStorageSync("token", token);
      wx.navigateBack({
        delta: 1,
        //1表示跳回到上一层 ，2表示跳回前俩层
      });
    } catch (error) {
      console.log(error);
    }
  },
});

在这里因为不是企业级开发的appid是不能够调取微信支付界面的。代码仅供参考。

下一篇文章 ：微信小程序开发一个小型商城（八、个人页面）单击前往
感谢你的预览，持续更新中,