uni-app登錄與支付功能實現(xiàn)三秒后自動跳轉(zhuǎn)
三秒后自動跳轉(zhuǎn)
三秒后自動跳轉(zhuǎn)到登錄頁面
需求描述：在購物車頁面，當用戶點擊 “結算” 按鈕時，如果用戶沒有登錄，則 3 秒后自動跳轉(zhuǎn)到登錄頁面
在 my-settle 組件的 methods 節(jié)點中，聲明一個叫做 showTips 的方法，專門用來展示倒計時的提示消息：
data() {
return {
// 倒計時的秒數(shù)
seconds: 3
}
} // 展示倒計時的相關信息
showTips(n){
uni.showToast({
icon:'none',
title:'請登錄后再結算！'+n+'秒之后自動跳轉(zhuǎn)到登錄界面',
//點擊穿透，防止用戶點擊后面的值
mask:true,
duration:1500
})
}改造 結算 按鈕的 click 事件處理函數(shù)，如果用戶沒有登錄，則預調(diào)用一個叫做 delayNavigate 的方法，進行倒計時的導航跳轉(zhuǎn)：
// 點擊了結算按鈕
settlement() {
// 1. 先判斷是否勾選了要結算的商品
if (!this.checkedCount) return uni.$showMsg('請選擇要結算的商品！')
// 2. 再判斷用戶是否選擇了收貨地址
if (!this.addstr) return uni.$showMsg('請選擇收貨地址！')
// 3. 最后判斷用戶是否登錄了，如果沒有登錄，則調(diào)用 delayNavigate() 進行倒計時的導航跳轉(zhuǎn)
// if (!this.token) return uni.$showMsg('請先登錄！')
if (!this.token) return this.delayNavigate()
},
定義 delayNavigate 方法，初步實現(xiàn)倒計時的提示功能：
// 延遲導航到 my 頁面
delayNavigate() {
// 1. 展示提示消息，此時 seconds 的值等于 3
this.showTips(this.seconds)
// 2. 創(chuàng)建定時器，每隔 1 秒執(zhí)行一次
setInterval(() => {
// 2.1 先讓秒數(shù)自減 1
this.seconds--
// 2.2 再根據(jù)最新的秒數(shù)，進行消息提示
this.showTips(this.seconds)
}, 1000)
},但是秒的邊界并沒有設置，因此值會變成負數(shù)
上述代碼的問題：定時器不會自動停止，此時秒數(shù)會出現(xiàn)等于 0 或小于 0 的情況！
在 data 節(jié)點中聲明定時器的 Id 如下：
data() {
return {
// 倒計時的秒數(shù)
seconds: 3,
// 定時器的 Id
timer: null
}
}
改造 delayNavigate 方法如下：
// 延遲導航到 my 頁面
delayNavigate() {
this.showTips(this.seconds)
// 1. 將定時器的 Id 存儲到 timer 中
this.timer = setInterval(() => {
this.seconds--
// 2. 判斷秒數(shù)是否 <= 0
if (this.seconds <= 0) {
// 2.1 清除定時器
clearInterval(this.timer)
// 2.2 跳轉(zhuǎn)到 my 頁面
uni.switchTab({
url: '/pages/my/my'
})
// 2.3 終止后續(xù)代碼的運行（當秒數(shù)為 0 時，不再展示 toast 提示消息）
return
}
this.showTips(this.seconds)
}, 1000)
},
上述代碼的問題：seconds 秒數(shù)不會被重置，導致第 2 次，3 次，n 次 的倒計時跳轉(zhuǎn)功能無法正常工作
這個秒數(shù)是有問題的，并沒有被重置
進一步改造 delayNavigate 方法，在執(zhí)行此方法時，立即將 seconds 秒數(shù)重置為 3 即可：
// 延遲導航到 my 頁面
delayNavigate() {
// 把 data 中的秒數(shù)重置成 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)
}
就是在每次調(diào)用這個方法時，把這個seconds重置為3
登錄成功之后再返回之前的頁面
核心實現(xiàn)思路：在自動跳轉(zhuǎn)到登錄頁面成功之后，把返回頁面的信息存儲到 vuex 中，從而方便登錄成功之后，根據(jù)返回頁面的信息重新跳轉(zhuǎn)回去。
返回頁面的信息對象，主要包含 { openType, from } 兩個屬性，其中 openType 表示以哪種方式導航回之前的頁面；from 表示之前頁面的 url 地址；
在 store/user.js 模塊的 state 節(jié)點中，聲明一個叫做 redirectInfo 的對象如下：
// state 數(shù)據(jù)
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 節(jié)點中，聲明一個叫做 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 節(jié)點中的 delayNavigate 方法，當成功跳轉(zhuǎn)到 my 頁面 之后，將重定向的信息對象存儲到 vuex 中：
// 延遲導航到 my 頁面
delayNavigate() {
// 把 data 中的秒數(shù)重置成 3 秒
this.seconds = 3
this.showTips(this.seconds)
this.timer = setInterval(() => {
this.seconds--
if (this.seconds <= 0) {
// 清除定時器
clearInterval(this.timer)
// 跳轉(zhuǎn)到 my 頁面
uni.switchTab({
url: '/pages/my/my',
// 頁面跳轉(zhuǎn)成功之后的回調(diào)函數(shù)
success: () => {
// 調(diào)用 vuex 的 updateRedirectInfo 方法，把跳轉(zhuǎn)信息存儲到 Store 中
this.updateRedirectInfo({
// 跳轉(zhuǎn)的方式
openType: 'switchTab',
// 從哪個頁面跳轉(zhuǎn)過去的
from: '/pages/cart/cart'
})
}
})
return
}
this.showTips(this.seconds)
}, 1000)
}
在 my-login 組件中，通過 mapState 和 mapMutations 輔助方法，將 vuex 中需要的數(shù)據(jù)和方法，映射到當前頁面中使用：
// 按需導入輔助函數(shù)
import { mapMutations, mapState } from 'vuex'
export default {
computed: {
// 調(diào)用 mapState 輔助方法，把 m_user 模塊中的數(shù)據(jù)映射到當前用組件中使用
...mapState('m_user', ['redirectInfo']),
},
methods: {
// 調(diào)用 mapMutations 輔助方法，把 m_user 模塊中的方法映射到當前組件中使用
...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
},
}改造 my-login 組件中的 getToken 方法，當?shù)卿洺晒χ?，預調(diào)用 this.navigateBack() 方法返回登錄之前的頁面：
// 調(diào)用登錄接口，換取永久的 token
async getToken(info) {
// 省略其它代碼...
// 判斷 vuex 中的 redirectInfo 是否為 null
// 如果不為 null，則登錄成功之后，需要重新導航到對應的頁面
this.navigateBack()
}在 my-login 組件中，聲明 navigateBack 方法如下：
// 返回登錄之前的頁面
navigateBack() {
// redirectInfo 不為 null，并且導航方式為 switchTab
if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
// 調(diào)用小程序提供的 uni.switchTab() API 進行頁面的導航
uni.switchTab({
// 要導航到的頁面地址
url: this.redirectInfo.from,
// 導航成功之后，把 vuex 中的 redirectInfo 對象重置為 null
complete: () => {
this.updateRedirectInfo(null)
}
})
}
}
登錄成功跳轉(zhuǎn)到之前的頁面完成
到此這篇關于uni-app登錄與支付三秒后自動跳轉(zhuǎn)功能實現(xiàn)的文章就介紹到這了,更多相關uni-app登錄與支付內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)瀑布流動態(tài)加載列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了javascript禁用Tab鍵的腳本實例，很實用，大家參考使用吧2013-11-11
偶爾聽人說javascript閉包，讓我聯(lián)想起以前學編譯原理和數(shù)字邏輯里講的閉包，以前上課講的閉包很難懂，而且含有遞歸的意思在里面，現(xiàn)在不想再查看里面的閉包概念。2010-06-06
JS大坑之19位數(shù)的Number型精度丟失問題詳解
這篇文章主要介紹了JS大坑之19位數(shù)的Number型精度丟失問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
js日期相關函數(shù)dateAdd,dateDiff,dateFormat等介紹
這篇文章主要介紹了js日期相關函數(shù)dateAdd,dateDiff,dateFormat等介紹,需要的朋友可以參考下2016-09-09
這篇文章主要給大家介紹了關于前端強大的圖片預覽組件Viewer.js使用方法的相關資料,Viewer.js是一款強大的圖片查看器,雖然簡單且易上手,但是卻并不影響其在圖片查看方面的強大功能,同時這款優(yōu)秀的插件配置操作起來也非常的方便,需要的朋友可以參考下2024-01-01
在使用three.js開發(fā)的過程中,我們常常使用canvas來作為紋理貼圖,下面這篇文章主要介紹了如何基于Three.js在三維場景中使用Canvas更新紋理,通過實現(xiàn)思路和代碼樣例,幫助讀者掌握這一技能,需要的朋友可以參考下2024-12-12
這篇文章介紹了GUID的幾種生成算法，有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家介紹了HTTP?HEAD請求的使用場合實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了JavaScript中html畫布的使用與頁面存儲技術,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08