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

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

在从购物车页面跳转过来，在购物车界面对购物车商品会进行合法判断，是否有收货人的信息和是否存在商品，而在订单页面基本上是对购物车页面的另一种格式，将其数量进行渲染和把复选框去掉。
也不做过多解释，直接看代码 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 {//判断缓存是否存在tokenconst 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是不能够调取微信支付界面的。代码仅供参考。

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！