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

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

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

// 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是不能够调取微信支付界面的。代码仅供参考。

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

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

微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
微信小程序开发一个小型商城（五、商品详情）
上一篇文章:微信小程序开发一个小型商城(四.商品列表) 在从上一个界面跳转过来,会看到商品详情这个界面goods_detail :如下图所示: 页面分析:从上到下:一个轮播图+一个view标签存储商品 ...
微信小程序开发一个小型商城（一、准备工作）
文章根据b站视频零基础玩转微信小程序教程(黑马) 最开始我们需要在app.json文件当中声明所有使用到的界面.代码如下所示: "pages": ["pages/in ...
视频教程-微信小程序开发教程（第一阶段、页面设计）（维吾尔语）-HTML5/CSS
微信小程序开发教程(第一阶段.页面设计)(维吾尔语) 毕业于北京邮电大学计算机专业.拥有将近10年的开发经验.精通java.php.python.c/c++.微信开发等等技术! 艾孜麦提阿布都热合曼 ...
微信小程序开发：按Pages编译显示页面
最近刚开始接触微信小程序开发,在慢慢学习,开始点击编译总是进入一个界面运行所以比较苦恼,于是找到以下解决方案. 解决方案一:选择"普通编译模式",会进入app.json文件下pag ...
微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html] vie ...
微信小程序开发入门教程（七）
背景前两篇文章我们学习了WXML的相关内容,了解了WXML的数据绑定.条件渲染.列表渲染.模版和事件,这些已经基本涵盖理WXML所能提供的全部能力.然而WXML与我们直接交互的微信小程序页面还有一定 ...
微信小程序开发一个多少钱
小程序开发是当前比较流行的一项技术服务,能够为企业和个人带来巨大的商业价值和社会价值,但是小程序开发费用也是潜在的成本之一.在选择小程序开发服务时,了解开发费用如何计算.影响价格的因素以及如何降低成本 ...

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

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

最新文章

热门文章