小程序支付流程
当我们把自己喜欢的商品添加到购物车,想要去支付的时候,我们点击去结账,没有收货地址也是不可以的
这时候我们点去结账的时候,我们判断是否有地址,是否有商品 我们给去结账绑定一个事件<view class="jz" bindtap="js">去结账</view>
下面是js代码,逻辑代码
data() {
address: {}
// 数量
totalNum: 0
},
// 结算
js(e) {
// 判断收货地址
const {
address,
totalNum
} = this.data
if (!address.userName) {
wx.showToast({
title: '你还没填写收货地址'
})
return
}
if (totalNum === 0) {
wx.showToast({
title: '你还没选择商品'
})
return
}
// 跳转到支付页面
wx.navigateTo({
url: '/pages/pay/pay'
})
}
当我们把这些信息都填写完成了,点击去结账的时候,这时候我们跳转支付页面
我们需要先把地址信息数据和商品信息数据信息传递到支付页面
js
data{
address: {},
}
<!-- 收货地址 -->
<view class="wjs">
<view class="wjs_xq">
<view>{{address.userName}}</view>
<view>{{address.all}}</view>
</view>
<view class="wjs_dh">
{{address.telNumber}}
</view>
</view>
传递过来的地址信息
下面是购物车传递过来的信息
js
data{
cart: [],
totalPrice: 0,
totalNum: 0
}
onShow() {
// 获取缓存中 的数据 wx.getStorageSync
const address = wx.getStorageSync('address')
//获取缓存中的购物车数组
let cart = wx.getStorageSync('cart') || []
//过滤后的checked 购物车
cart = cart.filter(v => v.checked)
console.log(cart)
this.setData({
address
})
// 总价格 总数量
let totalPrice = 0
let totalNum = 0
cart.forEach(v => {
totalPrice = v.num * v.goods_price
totalNum = v.num
})
this.setData({
address,
cart,
totalPrice,
totalNum
})
},
html
<!-- 购物车 -->
<view class="box">
<view class="gwc">购物车</view>
<view class="box_xq">
<view class="title" wx:for="{{cart}}" wx:key='index'>
<navigator class="zp">
<image src="{{item.goods_small_logo}}"></image>
</navigator>
<view class="username">
<view>{{item.goods_name}}</view>
<view class="jg">
<view class="qian'">
¥{{item.goods_price}}
</view>
<view class="shu">
X{{item.num}}
</view>
</view>
</view>
</view>
</view>
</view>
这是我们最后要的效果图
下面我们点击支付,跳转授权页面
我们利用button按钮自带的一些属性获取 然后我们给按钮绑定一个事件 <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">获取授权登录</button>
js逻辑代码
我们先在之前创建安好的utils文件夹中找到asyncWx.js封装一个方法
export const login=()=>{
return new Promise((resolve,reject)=>{
wx.login({
timeout:10000,
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
});
})
}
export const showToast=({title})=>{
return new Promise((resolve,reject)=>{
wx.showToast({
title: title,
icon: 'none',
success :(res) =>{
resolve(res);
},
fail:(err)=>{
reject(err);
}
})
})
}
然后我们在去js中编写逻辑代码,先用引入 import { showToast, login} from 'asyncWx.js的路径'
Page({
/**
* 页面的初始数据
*/
// 获取用户信息
async handleGetUserInfo(e) {
console.log(e)
// 获取用户信息
// encryptedData, rawData, iv, signature 控制台打印出来
const {
encryptedData,
rawData,
iv,
signature
} = e.detail;
// 只要小城登录后才有的 获取小程序登录后的code
const {
code
} = await login()
console.log(code)
// 3发送请求 获取用户的token
const loginwjs = {
encryptedData,
rawData,
iv,
signature,
code
}
console.log(loginwjs)
const res = await request({
url: '/users/wxlogin',
data: loginwjs,
method: 'post'
})
console.log(res)
}
})
这样我们就完成了