uni-app登錄與支付功能實現(xiàn)三秒后自動跳轉(zhuǎn)

更新時間：2023年03月23日 10:40:46 作者：知不足，而學習

這篇文章主要介紹了uni-app:登錄與支付-- 三秒后自動跳轉(zhuǎn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

三秒后自動跳轉(zhuǎn)

三秒后自動跳轉(zhuǎn)到登錄頁面

需求描述：在購物車頁面，當用戶點擊 “結(jié)算” 按鈕時，如果用戶沒有登錄，則 3 秒后自動跳轉(zhuǎn)到登錄頁面

在 my-settle 組件的 methods 節(jié)點中，聲明一個叫做 showTips 的方法，專門用來展示倒計時的提示消息：

data() {
  return {
    // 倒計時的秒數(shù)
    seconds: 3
  }
}

 // 展示倒計時的相關(guān)信息
      showTips(n){
        uni.showToast({
          icon:'none',
          title:'請登錄后再結(jié)算！'+n+'秒之后自動跳轉(zhuǎn)到登錄界面',
    //點擊穿透，防止用戶點擊后面的值
          mask:true,
          duration:1500
        })
      }

改造 結(jié)算 按鈕的 click 事件處理函數(shù)，如果用戶沒有登錄，則預調(diào)用一個叫做 delayNavigate 的方法，進行倒計時的導航跳轉(zhuǎn)：

// 點擊了結(jié)算按鈕
settlement() {
  // 1. 先判斷是否勾選了要結(jié)算的商品
  if (!this.checkedCount) return uni.$showMsg('請選擇要結(jié)算的商品！')
 
  // 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ù)

上述代碼的問題：定時器不會自動停止，此時秒數(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ù)卿洺晒χ螅A調(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)
      }
    })
  }
}