微信小程序–支付页面(核心)
包含功能点:
- 微信扫码支付
结构: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": "商品支付"
}