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

更新時(shí)間：2023年03月23日 10:40:46 作者：知不足，而學(xué)習(xí)

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

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

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

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

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

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

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

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

// 點(diǎn)擊了結(jié)算按鈕
settlement() {
  // 1. 先判斷是否勾選了要結(jié)算的商品
  if (!this.checkedCount) return uni.$showMsg('請(qǐng)選擇要結(jié)算的商品！')
 
  // 2. 再判斷用戶是否選擇了收貨地址
  if (!this.addstr) return uni.$showMsg('請(qǐng)選擇收貨地址！')
 
  // 3. 最后判斷用戶是否登錄了，如果沒有登錄，則調(diào)用 delayNavigate() 進(jìn)行倒計(jì)時(shí)的導(dǎo)航跳轉(zhuǎn)
  // if (!this.token) return uni.$showMsg('請(qǐng)先登錄！')
  if (!this.token) return this.delayNavigate()
},

定義 delayNavigate 方法，初步實(shí)現(xiàn)倒計(jì)時(shí)的提示功能：

 // 延遲導(dǎo)航到 my 頁面
delayNavigate() {
  // 1. 展示提示消息，此時(shí) seconds 的值等于 3
  this.showTips(this.seconds)
 
  // 2. 創(chuàng)建定時(shí)器，每隔 1 秒執(zhí)行一次
  setInterval(() => {
    // 2.1 先讓秒數(shù)自減 1
    this.seconds--
    // 2.2 再根據(jù)最新的秒數(shù)，進(jìn)行消息提示
    this.showTips(this.seconds)
  }, 1000)
},

但是秒的邊界并沒有設(shè)置，因此值會(huì)變成負(fù)數(shù)

上述代碼的問題：定時(shí)器不會(huì)自動(dòng)停止，此時(shí)秒數(shù)會(huì)出現(xiàn)等于 0 或小于 0 的情況！

在 data 節(jié)點(diǎn)中聲明定時(shí)器的 Id 如下：

data() {
  return {
    // 倒計(jì)時(shí)的秒數(shù)
    seconds: 3,
    // 定時(shí)器的 Id
    timer: null
  }
}

改造 delayNavigate 方法如下：

// 延遲導(dǎo)航到 my 頁面
delayNavigate() {
  this.showTips(this.seconds)
 
  // 1. 將定時(shí)器的 Id 存儲(chǔ)到 timer 中
  this.timer = setInterval(() => {
    this.seconds--
 
    // 2. 判斷秒數(shù)是否 <= 0
    if (this.seconds <= 0) {
      // 2.1 清除定時(shí)器
      clearInterval(this.timer)
 
      // 2.2 跳轉(zhuǎn)到 my 頁面
      uni.switchTab({
        url: '/pages/my/my'
      })
 
      // 2.3 終止后續(xù)代碼的運(yùn)行（當(dāng)秒數(shù)為 0 時(shí)，不再展示 toast 提示消息）
      return
    }
 
    this.showTips(this.seconds)
  }, 1000)
},

上述代碼的問題：seconds 秒數(shù)不會(huì)被重置，導(dǎo)致第 2 次，3 次，n 次的倒計(jì)時(shí)跳轉(zhuǎn)功能無法正常工作

這個(gè)秒數(shù)是有問題的，并沒有被重置

進(jìn)一步改造 delayNavigate 方法，在執(zhí)行此方法時(shí)，立即將 seconds 秒數(shù)重置為 3 即可：

// 延遲導(dǎo)航到 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)用這個(gè)方法時(shí)，把這個(gè)seconds重置為3

登錄成功之后再返回之前的頁面

核心實(shí)現(xiàn)思路：在自動(dòng)跳轉(zhuǎn)到登錄頁面成功之后，把返回頁面的信息存儲(chǔ)到 vuex 中，從而方便登錄成功之后，根據(jù)返回頁面的信息重新跳轉(zhuǎn)回去。

返回頁面的信息對(duì)象，主要包含 { openType, from } 兩個(gè)屬性，其中 openType 表示以哪種方式導(dǎo)航回之前的頁面；from 表示之前頁面的 url 地址；

在 store/user.js 模塊的 state 節(jié)點(diǎn)中，聲明一個(gè)叫做 redirectInfo 的對(duì)象如下：

// state 數(shù)據(jù)
state: () => ({
  // 收貨地址
  address: JSON.parse(uni.getStorageSync('address') || '{}'),
  // 登錄成功之后的 token 字符串
  token: uni.getStorageSync('token') || '',
  // 用戶的基本信息
  userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}'),
  // 重定向的 object 對(duì)象 { openType, from }
  redirectInfo: null
}),

在 store/user.js 模塊的 mutations 節(jié)點(diǎn)中，聲明一個(gè)叫做 updateRedirectInfo 的方法：

mutations: {
  // 更新重定向的信息對(duì)象
  updateRedirectInfo(state, info) {
    state.redirectInfo = info
  }
}

在 my-settle 組件中，通過 mapMutations 輔助方法，把 m_user 模塊中的 updateRedirectInfo 方法映射到當(dāng)前頁面中使用：

methods: {
  // 把 m_user 模塊中的 updateRedirectInfo 方法映射到當(dāng)前頁面中使用
  ...mapMutations('m_user', ['updateRedirectInfo']),
}

改造 my-settle 組件 methods 節(jié)點(diǎn)中的 delayNavigate 方法，當(dāng)成功跳轉(zhuǎn)到 my 頁面 之后，將重定向的信息對(duì)象存儲(chǔ)到 vuex 中：

// 延遲導(dǎo)航到 my 頁面
delayNavigate() {
  // 把 data 中的秒數(shù)重置成 3 秒
  this.seconds = 3
  this.showTips(this.seconds)
 
  this.timer = setInterval(() => {
    this.seconds--
 
    if (this.seconds <= 0) {
      // 清除定時(shí)器
      clearInterval(this.timer)
      // 跳轉(zhuǎn)到 my 頁面
      uni.switchTab({
        url: '/pages/my/my',
        // 頁面跳轉(zhuǎn)成功之后的回調(diào)函數(shù)
        success: () => {
          // 調(diào)用 vuex 的 updateRedirectInfo 方法，把跳轉(zhuǎn)信息存儲(chǔ)到 Store 中
          this.updateRedirectInfo({
            // 跳轉(zhuǎn)的方式
            openType: 'switchTab',
            // 從哪個(gè)頁面跳轉(zhuǎn)過去的
            from: '/pages/cart/cart'
          })
        }
      })
 
      return
    }
 
    this.showTips(this.seconds)
  }, 1000)
}

在 my-login 組件中，通過 mapState 和 mapMutations 輔助方法，將 vuex 中需要的數(shù)據(jù)和方法，映射到當(dāng)前頁面中使用：

// 按需導(dǎo)入輔助函數(shù)
import { mapMutations, mapState } from 'vuex'
 
export default {
  computed: {
    // 調(diào)用 mapState 輔助方法，把 m_user 模塊中的數(shù)據(jù)映射到當(dāng)前用組件中使用
    ...mapState('m_user', ['redirectInfo']),
  },
  methods: {
    // 調(diào)用 mapMutations 輔助方法，把 m_user 模塊中的方法映射到當(dāng)前組件中使用
    ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
  },
}

改造 my-login 組件中的 getToken 方法，當(dāng)?shù)卿洺晒χ?，預(yù)調(diào)用 this.navigateBack() 方法返回登錄之前的頁面：

// 調(diào)用登錄接口，換取永久的 token
async getToken(info) {
  // 省略其它代碼...
 
  // 判斷 vuex 中的 redirectInfo 是否為 null
  // 如果不為 null，則登錄成功之后，需要重新導(dǎo)航到對(duì)應(yīng)的頁面
  this.navigateBack()
}

在 my-login 組件中，聲明 navigateBack 方法如下：

// 返回登錄之前的頁面
navigateBack() {
  // redirectInfo 不為 null，并且導(dǎo)航方式為 switchTab
  if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
    // 調(diào)用小程序提供的 uni.switchTab() API 進(jìn)行頁面的導(dǎo)航
    uni.switchTab({
      // 要導(dǎo)航到的頁面地址
      url: this.redirectInfo.from,
      // 導(dǎo)航成功之后，把 vuex 中的 redirectInfo 對(duì)象重置為 null
      complete: () => {
        this.updateRedirectInfo(null)
      }
    })
  }
}

登錄成功跳轉(zhuǎn)到之前的頁面完成

到此這篇關(guān)于uni-app登錄與支付三秒后自動(dòng)跳轉(zhuǎn)功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uni-app登錄與支付內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: