10. 登录与支付
==注意：因接口问题，支付功能无法实现，就不贴出相应接口的信息了，想了解的可以在文章顶部网盘里获取==
10.0 创建 settle 分支
运行如下的命令，基于 master 分支在本地创建 settle 子分支，用来开发登录与支付相关的功能：
git checkout -b settle10.1 点击结算按钮进行条件判断
说明：用户点击了结算按钮之后，需要先后判断 是否勾选了要结算的商品、是否选择了收货地址、是否登录。
在
my-settle组件中，为结算按钮绑定点击事件处理函数：<!-- 结算按钮 --> <view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>在
my-settle组件的methods节点中声明settlement事件处理函数如下：// 点击了结算按钮 settlement() { // 1. 先判断是否勾选了要结算的商品 if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！') // 2. 再判断用户是否选择了收货地址 if (!this.addstr) return uni.$showMsg('请选择收货地址！') // 3. 最后判断用户是否登录了 if (!this.token) return uni.$showMsg('请先登录！') }在
my-settle组件中，使用mapGetters辅助函数，从m_user模块中将addstr映射到当前组件中使用：export default { computed: { ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']), // addstr 是详细的收货地址 ...mapGetters('m_user', ['addstr']), isFullCheck() { return this.total === this.checkedCount }, }, }在
store/user.js模块的state节点中，声明token字符串：export default { // 开启命名空间 namespaced: true, // state 数据 state: () => ({ // 收货地址 address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: '', }), // 省略其它代码 }在
my-settle组件中，使用mapState辅助函数，从m_user模块中将token映射到当前组件中使用：// 按需从 vuex 中导入 mapState 辅助函数 import { mapGetters, mapMutations, mapState } from 'vuex' export default { computed: { ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']), ...mapGetters('m_user', ['addstr']), // token 是用户登录成功之后的 token 字符串 ...mapState('m_user', ['token']), isFullCheck() { return this.total === this.checkedCount }, }, }
10.2 登录
10.2.1 实现登录和用户信息组件的按需展示
- 在
components目录中新建登录组件：
- 在
components目录中新建用户信息组件（my-userinfo）：
在
my.vue页面中，通过mapState辅助函数，导入需要的token字符串：import badgeMix from '@/mixins/tabbar-badge.js' // 1. 从 vuex 中按需导入 mapState 辅助函数 import { mapState } from 'vuex' export default { mixins: [badgeMix], computed: { // 2. 从 m_user 模块中导入需要的 token 字符串 ...mapState('m_user', ['token']), }, data() { return {} }, }在
my.vue页面中，实现登录组件和用户信息组件的按需展示：<template> <view> <!-- 用户未登录时，显示登录组件 --> <my-login v-if="!token"></my-login> <!-- 用户登录后，显示用户信息组件 --> <my-userinfo v-else></my-userinfo> </view> </template>
10.2.2 实现登录组件的基本布局
为
my-login组件定义如下的 UI 结构：<template> <view class="login-container"> <!-- 提示登录的图标 --> <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons> <!-- 登录按钮 --> <button type="primary" class="btn-login">一键登录</button> <!-- 登录提示 --> <view class="tips-text">登录后尽享更多权益</view> </view> </template>美化登录组件的样式：
.login-container { // 登录盒子的样式 height: 750rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f8f8f8; position: relative; overflow: hidden; // 绘制登录盒子底部的半椭圆造型 &::after { content: ' '; display: block; position: absolute; width: 100%; height: 40px; left: 0; bottom: 0; background-color: white; border-radius: 100%; transform: translateY(50%); } // 登录按钮的样式 .btn-login { width: 90%; border-radius: 100px; margin: 15px 0; background-color: #c00000; } // 按钮下方提示消息的样式 .tips-text { font-size: 12px; color: gray; } }
10.2.3 点击登录按钮获取微信用户的基本信息
需求描述：需要获取微信用户的 头像、 昵称等基本信息。
为登录的
button按钮绑定getUserInfo方法，表示点击按钮时，希望获取用户的基本信息：<!-- 登录按钮 --> <!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 --> <button type="primary" class="btn-login" @click="getUserInfo">一键登录</button>在
methods节点中声明getUserInfo事件处理函数如下：methods: { // 获取微信用户的基本信息 getUserInfo() { const [err, res] = await uni.getUserProfile({ desc: '用于会员登录' }).catch(err => err) // 判断是否获取用户信息成功 if (err?.errMsg === 'getUserProfile:fail auth deny') return uni.$showMsg('您取消了登录授权！') // 获取用户信息成功，res.userInfo就是用户的基本信息 console.log(res.userInfo) } }Promise.catch()错误捕获机制- 这里使用[err, res]对返回的信息进行解构，注意err, res解构的顺序问题- getUserProfile的返回信息会被赋值给res，catch捕捉的错误会被赋值给err
- [err, res]结构赋值里err，res的顺序不能变
if (err?.errMsg === 'getUserProfile:fail auth deny')
等价于
if(err&&err.Msg&&err.errMsg === 'getUserProfile:fail auth deny')
10.2.4 将用户的基本信息存储到 vuex
在
store/user.js模块的state节点中，声明userinfo的信息对象如下：// state 数据 state: () => ({ // 收货地址 // address: {} address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: '', // 用户的基本信息 userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}') }),在
store/user.js模块的mutations节点中，声明如下的两个方法：// 方法 mutations: { // 省略其它代码... // 更新用户的基本信息 updateUserInfo(state, userinfo) { state.userinfo = userinfo // 通过 this.commit() 方法，调用 m_user 模块下的 saveUserInfoToStorage 方法，将 userinfo 对象持久化存储到本地 this.commit('m_user/saveUserInfoToStorage') }, // 将 userinfo 持久化存储到本地 saveUserInfoToStorage(state) { uni.setStorageSync('userinfo', JSON.stringify(state.userinfo)) } }使用
mapMutations辅助函数，将需要的方法映射到my-login组件中使用：// 1. 按需导入 mapMutations 辅助函数 import { mapMutations } from 'vuex' export default { data() { return {} }, methods: { // 2. 调用 mapMutations 辅助方法，把 m_user 模块中的 updateUserInfo 映射到当前组件中使用 ...mapMutations('m_user', ['updateUserInfo']), // 获取微信用户的基本信息 getUserInfo() { const [err, res] = await uni.getUserProfile({ desc: '用于会员登录' }).catch(err => err) // 判断是否获取用户信息成功 if (err?.errMsg === 'getUserProfile:fail auth deny') return uni.$showMsg('您取消了登录授权！') // 获取用户信息成功，res.userInfo就是用户的基本信息 //console.log(res.userInfo) // 3. 将用户的基本信息存储到 vuex 中 this.updateUserInfo(res.userInfo) }, }, }
10.2.5 登录获取 Token 字符串
需求说明：当获取到了微信用户的基本信息之后，还需要进一步 调用登录相关的接口，从而 换取登录成功之后的 Token 字符串。
- 在
getUserInfo方法中，预调用this.getToken()方法，同时把获取到的用户信息传递进去：
// 获取微信用户的基本信息
getUserInfo() {
const [err, res] = await uni.getUserProfile({
desc: '用于会员登录'
}).catch(err => err)
if (err?.errMsg === 'getUserProfile:fail auth deny') return uni.$showMsg('您取消了登录授权！')
this.updateUserInfo(res.userInfo)
// 获取登录成功后的 Token 字符串
this.getToken(res)
},在
methods中定义getToken方法，调用登录相关的API，实现登录的功能：// 调用登录接口，换取永久的 token async getToken(info) { // 调用微信登录接口 const [err, res] = await uni.login().catch(err => err) // 判断是否 uni.login() 调用失败 if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！') // 准备参数对象 const query = { code: res.code, encryptedData: info.encryptedData, iv: info.iv, rawData: info.rawData, signature: info.signature } // 换取 token const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query) if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！') uni.$showMsg('登录成功')
10.2.6 将 Token 存储到 vuex
在
store/user.js模块的mutations节点中，声明如下的两个方法：mutations: { // 省略其它代码... // 更新 token 字符串 updateToken(state, token) { state.token = token // 通过 this.commit() 方法，调用 m_user 模块下的 saveTokenToStorage 方法，将 token 字符串持久化存储到本地 this.commit('m_user/saveTokenToStorage') }, // 将 token 字符串持久化存储到本地 saveTokenToStorage(state) { uni.setStorageSync('token', state.token) } }修改
store/user.js模块的 state 节点如下：// state 数据 state: () => ({ // 收货地址 address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: uni.getStorageSync('token') || '', // 用户的基本信息 userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}') }),在
my-login组件中，把vuex中的updateToken方法映射到当前组件中使用：methods: { // 1. 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用 ...mapMutations('m_user', ['updateUserInfo', 'updateToken']) // 省略其它代码... // 调用登录接口，换取永久的 token async getToken(info) { // 调用微信登录接口 const [err, res] = await uni.login().catch(err => err) // 判断是否 uni.login() 调用失败 if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！') // 准备参数对象 const query = { code: res.code, encryptedData: info.encryptedData, iv: info.iv, rawData: info.rawData, signature: info.signature } // 换取 token const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query) if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！') // 2. 更新 vuex 中的 token this.updateToken(loginResult.message.token) } }因为 获取token的接口无法使用了，为了做测试，可以将
this.updateToken(loginResult.message.token)写成this.updateToken('xunitokentokentokentoken')用一个假的虚拟token代替，并把换取token的请求和判断登录失败的两行代码注释掉
10.3 用户信息
10.3.1 实现用户头像昵称区域的基本布局
在
my-userinfo组件中，定义如下的 UI 结构：<template> <view class="my-userinfo-container"> <!-- 头像昵称区域 --> <view class="top-box"> <image src="" class="avatar"></image> <view class="nickname">xxx</view> </view> </view> </template>美化当前组件的样式：
.my-userinfo-container { height: 100%; // 为整个组件的结构添加浅灰色的背景 background-color: #f4f4f4; .top-box { height: 400rpx; background-color: #c00000; display: flex; flex-direction: column; align-items: center; justify-content: center; .avatar { display: block; width: 90px; height: 90px; border-radius: 45px; border: 2px solid white; box-shadow: 0 1px 5px black; } .nickname { color: white; font-weight: bold; font-size: 16px; margin-top: 10px; } } }在
my.vue页面中，为最外层包裹性质的view容器，添加class="my-container"的类名，并美化样式如下：page, .my-container { height: 100%; }
10.3.2 渲染用户的头像和昵称
在
my-userinfo组件中，通过mapState辅助函数，将需要的成员映射到当前组件中使用：// 按需导入 mapState 辅助函数 import { mapState } from 'vuex' export default { computed: { // 将 m_user 模块中的 userinfo 映射到当前页面中使用 ...mapState('m_user', ['userinfo']), }, data() { return {} }, }将用户的头像和昵称渲染到页面中：
<!-- 头像昵称区域 --> <view class="top-box"> <image :src="userinfo.avatarUrl" class="avatar"></image> <view class="nickname">{{userinfo.nickName}}</view> </view>
10.3.3 渲染第一个面板区域
在
my-userinfo组件中，定义如下的UI结构：<!-- 面板的列表区域 --> <view class="panel-list"> <!-- 第一个面板 --> <view class="panel"> <!-- panel 的主体区域 --> <view class="panel-body"> <!-- panel 的 item 项 --> <view class="panel-item"> <text>8</text> <text>收藏的店铺</text> </view> <view class="panel-item"> <text>14</text> <text>收藏的商品</text> </view> <view class="panel-item"> <text>18</text> <text>关注的商品</text> </view> <view class="panel-item"> <text>84</text> <text>足迹</text> </view> </view> </view> <!-- 第二个面板 --> <!-- 第三个面板 --> </view>美化第一个面板的样式：
.panel-list { padding: 0 10px; position: relative; top: -10px; .panel { background-color: white; border-radius: 3px; margin-bottom: 8px; .panel-body { display: flex; justify-content: space-around; .panel-item { display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-size: 13px; padding: 10px 0; } } } }
10.3.4 渲染第二个面板区域
定义第二个面板区域的 UI 结构：
<!-- 第二个面板 --> <view class="panel"> <!-- 面板的标题 --> <view class="panel-title">我的订单</view> <!-- 面板的主体 --> <view class="panel-body"> <!-- 面板主体中的 item 项 --> <view class="panel-item"> <image src="/static/my-icons/icon1.png" class="icon"></image> <text>待付款</text> </view> <view class="panel-item"> <image src="/static/my-icons/icon2.png" class="icon"></image> <text>待收货</text> </view> <view class="panel-item"> <image src="/static/my-icons/icon3.png" class="icon"></image> <text>退款/退货</text> </view> <view class="panel-item"> <image src="/static/my-icons/icon4.png" class="icon"></image> <text>全部订单</text> </view> </view> </view>对之前的
SCSS样式进行改造，从而美化第二个面板的样式：.panel-list { padding: 0 10px; position: relative; top: -10px; .panel { background-color: white; border-radius: 3px; margin-bottom: 8px; .panel-title { line-height: 45px; padding-left: 10px; font-size: 15px; border-bottom: 1px solid #f4f4f4; } .panel-body { display: flex; justify-content: space-around; .panel-item { display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-size: 13px; padding: 10px 0; .icon { width: 35px; height: 35px; } } } } }
10.3.5 渲染第三个面板区域
定义第三个面板区域的 UI 结构：
<!-- 第三个面板 --> <view class="panel"> <view class="panel-list-item"> <text>收货地址</text> <uni-icons type="arrowright" size="15"></uni-icons> </view> <view class="panel-list-item"> <text>联系客服</text> <uni-icons type="arrowright" size="15"></uni-icons> </view> <view class="panel-list-item"> <text>退出登录</text> <uni-icons type="arrowright" size="15"></uni-icons> </view> </view>美化第三个面板区域的样式：
.panel-list-item { height: 45px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; padding: 0 10px; }
10.3.6 实现退出登录的功能
为第三个面板区域中的
退出登录项绑定click点击事件处理函数：<view class="panel-list-item" @click="logout"> <text>退出登录</text> <uni-icons type="arrowright" size="15"></uni-icons> </view>在
my-userinfo组件的methods节点中定义logout事件处理函数：// 退出登录 async logout() { // 询问用户是否退出登录 const [err, succ] = await uni.showModal({ title: '提示', content: '确认退出登录吗？' }).catch(err => err) if (succ && succ.confirm) { // 用户确认了退出登录的操作 // 需要清空 vuex 中的 userinfo、token 和 address this.updateUserInfo({}) this.updateToken('') this.updateAddress({}) } }使用
mapMutations辅助方法，将需要用到的mutations方法映射到当前组件中：// 按需导入辅助函数 import { mapState, mapMutations } from 'vuex' export default { methods: { ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateAddress']), }, }
10.4 三秒后自动跳转
10.4.1 三秒后自动跳转到登录页面
需求描述：在购物车页面，当用户点击 “结算” 按钮时， 如果用户没有登录， 则 3 秒后自动跳转到登录页面
在
my-settle组件的methods节点中，声明一个叫做showTips的方法，专门用来展示倒计时的提示消息：// 展示倒计时的提示消息 showTips(n) { // 调用 uni.showToast() 方法，展示提示消息 uni.showToast({ // 不展示任何图标 icon: 'none', // 提示的消息 title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页', // 为页面添加透明遮罩，防止点击穿透 mask: true, // 1.5 秒后自动消失 duration: 1500 }) }在
data节点中声明倒计时的秒数：data() { return { // 倒计时的秒数 seconds: 3 } }改造
结算按钮的click事件处理函数，如果用户没有登录，则预调用一个叫做delayNavigate的方法，进行倒计时的导航跳转：// 点击了结算按钮 settlement() { // 1. 先判断是否勾选了要结算的商品 if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！') // 2. 再判断用户是否选择了收货地址 if (!this.addstr) return uni.$showMsg('请选择收货地址！') // 3. 最后判断用户是否登录了，如果没有登录，则调用 delayNavigate() 进行倒计时的导航跳转 // if (!this.token) return uni.$showMsg('请先登录！') if (!this.token) return this.delayNavigate() },定义
delayNavigate方法，初步实现倒计时的提示功能：// 延迟导航到 my 页面 delayNavigate() { // 1. 展示提示消息，此时 seconds 的值等于 3 this.showTips(this.seconds) // 2. 创建定时器，每隔 1 秒执行一次 setInterval(() => { // 2.1 先让秒数自减 1 this.seconds-- // 2.2 再根据最新的秒数，进行消息提示 this.showTips(this.seconds) }, 1000) },上述代码的问题： 定时器不会自动停止，此时秒数会出现等于 0 或小于 0 的情况！
在
data节点中声明定时器的 Id 如下：data() { return { // 倒计时的秒数 seconds: 3, // 定时器的 Id timer: null } }改造
delayNavigate方法如下：// 延迟导航到 my 页面 delayNavigate() { this.showTips(this.seconds) // 1. 将定时器的 Id 存储到 timer 中 this.timer = setInterval(() => { this.seconds-- // 2. 判断秒数是否 <= 0 if (this.seconds <= 0) { // 2.1 清除定时器 clearInterval(this.timer) // 2.2 跳转到 my 页面 uni.switchTab({ url: '/pages/my/my' }) // 2.3 终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息） return } this.showTips(this.seconds) }, 1000) },
上述代码的问题： seconds 秒数不会被重置，导致第 2 次，3 次，n 次 的倒计时跳转功能无法正常工作
进一步改造
delayNavigate方法，在执行此方法时，立即将seconds秒数重置为 3 即可：// 延迟导航到 my 页面 delayNavigate() { // 把 data 中的秒数重置成 3 秒 this.seconds = 3 this.showTips(this.seconds) this.timer = setInterval(() => { this.seconds-- if (this.seconds <= 0) { clearInterval(this.timer) uni.switchTab({ url: '/pages/my/my' }) return } this.showTips(this.seconds) }, 1000) }
10.4.2 登录成功之后再返回之前的页面
核心实现思路：在自动跳转到登录页面成功之后，把 返回页面的信息存储到 vuex 中，从而方便登录成功之后，根据返回页面的信息重新跳转回去。返回页面的信息对象，主要包含 { openType, from } 两个属性，其中
openType表示以哪种方式导航回之前的页面；from表示之前页面的 url 地址；
在
store/user.js模块的state节点中，声明一个叫做redirectInfo的对象如下：// state 数据 state: () => ({ // 收货地址 address: JSON.parse(uni.getStorageSync('address') || '{}'), // 登录成功之后的 token 字符串 token: uni.getStorageSync('token') || '', // 用户的基本信息 userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}'), // 重定向的 object 对象 { openType, from } redirectInfo: null }),在
store/user.js模块的mutations节点中，声明一个叫做updateRedirectInfo的方法：mutations: { // 更新重定向的信息对象 updateRedirectInfo(state, info) { state.redirectInfo = info } }在
my-settle组件中，通过mapMutations辅助方法，把m_user模块中的updateRedirectInfo方法映射到当前页面中使用：methods: { // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用 ...mapMutations('m_user', ['updateRedirectInfo']), }改造
my-settle组件methods节点中的delayNavigate方法，当成功跳转到my 页面之后，将重定向的信息对象存储到vuex中：// 延迟导航到 my 页面 delayNavigate() { // 把 data 中的秒数重置成 3 秒 this.seconds = 3 this.showTips(this.seconds) this.timer = setInterval(() => { this.seconds-- if (this.seconds <= 0) { // 清除定时器 clearInterval(this.timer) // 跳转到 my 页面 uni.switchTab({ url: '/pages/my/my', // 页面跳转成功之后的回调函数 success: () => { // 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中 this.updateRedirectInfo({ // 跳转的方式 openType: 'switchTab', // 从哪个页面跳转过去的 from: '/pages/cart/cart' }) } }) return } this.showTips(this.seconds) }, 1000) }在
my-login组件中，通过mapState和mapMutations辅助方法，将vuex中需要的数据和方法，映射到当前页面中使用：// 按需导入辅助函数 import { mapMutations, mapState } from 'vuex' export default { computed: { // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用 ...mapState('m_user', ['redirectInfo']), }, methods: { // 调用 mapMutations 辅助方法，把 m_user 模块中的方法映射到当前组件中使用 ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']), }, }改造
my-login组件中的getToken方法，当登录成功之后，预调用this.navigateBack()方法返回登录之前的页面：// 调用登录接口，换取永久的 token async getToken(info) { // 省略其它代码... // 判断 vuex 中的 redirectInfo 是否为 null // 如果不为 null，则登录成功之后，需要重新导航到对应的页面 this.navigateBack() }在
my-login组件中，声明navigateBack方法如下：// 返回登录之前的页面 navigateBack() { // redirectInfo 不为 null，并且导航方式为 switchTab if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') { // 调用小程序提供的 uni.switchTab() API 进行页面的导航 uni.switchTab({ // 要导航到的页面地址 url: this.redirectInfo.from, // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null complete: () => { this.updateRedirectInfo(null) } }) } }
10.5 微信支付
10.5.1 在请求头中添加 Token 身份认证的字段
- 原因说明：只有在登录之后才允许调用支付相关的接口，所以必须为有权限的接口添加身份认证的请求头字段
打开项目根目录下的
main.js，改造$http.beforeRequest请求拦截器中的代码如下：// 请求开始之前做一些事情 $http.beforeRequest = function(options) { uni.showLoading({ title: '数据加载中...', }) // 判断请求的是否为有权限的 API 接口 if (options.url.indexOf('/my/') !== -1) { // 为请求头添加身份认证字段 options.header = { // 字段的值可以直接从 vuex 中进行获取 Authorization: store.state.m_user.token, } } }
10.5.2 微信支付的流程
- 创建订单
-- 请求创建订单的 API 接口：把（订单金额、收货地址、订单中包含的商品信息）发送到服务器
-- 服务器响应的结果：订单编号
- 订单预支付
-- 请求订单预支付的 API 接口：把（订单编号）发送到服务器
-- 服务器响应的结果：订单预支付的参数对象，里面包含了订单支付相关的必要参数
- 发起微信支付
-- 调用
uni.requestPayment()这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对象” 作为参数传递给uni.requestPayment()方法-- 监听
uni.requestPayment()这个 API 的success，fail，complete回调函数
10.5.3 创建订单
改造
my-settle组件中的settlement方法，当前三个判断条件通过之后，调用实现微信支付的方法：// 点击了结算按钮 settlement() { // 1. 先判断是否勾选了要结算的商品 if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！') // 2. 再判断用户是否选择了收货地址 if (!this.addstr) return uni.$showMsg('请选择收货地址！') // 3. 最后判断用户是否登录了 // if (!this.token) return uni.$showMsg('请先登录！') if (!this.token) return this.delayNavigate() // 4. 实现微信支付功能 this.payOrder() },在
my-settle组件中定义payOrder方法如下，先实现创建订单的功能：// 微信支付 async payOrder() { // 1. 创建订单 // 1.1 组织订单的信息对象 const orderInfo = { // 开发期间，注释掉真实的订单价格， // order_price: this.checkedGoodsAmount, // 写死订单总价为 1 分钱 order_price: 0.01, consignee_addr: this.addstr, goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price })) } // 1.2 发起请求创建订单 const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo) if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！') // 1.3 得到服务器响应的“订单编号” const orderNumber = res.message.order_number // 2. 订单预支付 // 3. 发起微信支付 }
10.5.4 订单预支付
改造
my-settle组件的payOrder方法，实现订单预支付功能：// 微信支付 async payOrder() { // 1. 创建订单 // 1.1 组织订单的信息对象 const orderInfo = { // 开发期间，注释掉真实的订单价格， // order_price: this.checkedGoodsAmount, // 写死订单总价为 1 分钱 order_price: 0.01, consignee_addr: this.addstr, goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price })) } // 1.2 发起请求创建订单 const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo) if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！') // 1.3 得到服务器响应的“订单编号” const orderNumber = res.message.order_number // 2. 订单预支付 // 2.1 发起请求获取订单的支付信息 const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber }) // 2.2 预付订单生成失败 if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！') // 2.3 得到订单支付相关的必要参数 const payInfo = res2.message.pay // 3. 发起微信支付 }
10.5.5 发起微信支付
改造
my-settle组件的payOrder方法，实现微信支付的功能：// 微信支付 async payOrder() { // 1. 创建订单 // 1.1 组织订单的信息对象 const orderInfo = { // 开发期间，注释掉真实的订单价格， // order_price: this.checkedGoodsAmount, // 写死订单总价为 1 分钱 order_price: 0.01, consignee_addr: this.addstr, goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price })) } // 1.2 发起请求创建订单 const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo) if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！') // 1.3 得到服务器响应的“订单编号” const orderNumber = res.message.order_number // 2. 订单预支付 // 2.1 发起请求获取订单的支付信息 const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber }) // 2.2 预付订单生成失败 if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！') // 2.3 得到订单支付相关的必要参数 const payInfo = res2.message.pay // 3. 发起微信支付 // 3.1 调用 uni.requestPayment() 发起微信支付 const [err, succ] = await uni.requestPayment(payInfo) // 3.2 未完成支付 if (err) return uni.$showMsg('订单未支付！') // 3.3 完成了支付，进一步查询支付的结果 const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber }) // 3.4 检测到订单未支付 if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！') // 3.5 检测到订单支付完成 uni.showToast({ title: '支付完成！', icon: 'success' }) }
10.6 分支的合并与提交
将
settle分支进行本地提交：git add . git commit -m "完成了登录和支付功能的开发"将本地的
settle分支推送到码云：git push -u origin settle将本地
settle分支中的代码合并到master分支：git checkout master git merge settle git push删除本地的
settle分支：git branch -d settle
