小程序支付流程

小程序支付流程

当我们把自己喜欢的商品添加到购物车,想要去支付的时候,我们点击去结账,没有收货地址也是不可以的

这时候我们点去结账的时候,我们判断是否有地址,是否有商品 我们给去结账绑定一个事件去结账
下面是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按钮自带的一些属性获取 然后我们给按钮绑定一个事件 获取授权登录
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)
  }
 
})

这样我们就完成了