uniapp-登录成功之后返回对应的页面

我们有这样一个需求,就是初次进入页面我们不需要登录,但是如果进入到某个详情页,需要下单,或者填写收发货地址等,我们需要返回到登录页去登录,登录成功之后,再次返回对应的下单页面或者收发货地址页面
比如我们有这样四个页面,一个是首页,一个是首页详情页,一个订单页,一个是登录页(注意登录页是一个页面不是组件)
(1): 使用getCurrentPages获取,getCurrentPages函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

1: index.vue

 <template>
	<view class="container">
		<view >首页</view>
                <view @click="toDetail">列表页</view>
	</view>
</template>
methods: {
      toDetail() {
        uni.navigateTo({
          url: '/pages/index-detail/index-detail'
        })
      }
}

2:index-detail详情页

<template>
  <view>
    <view>详情页</view>
    <view @click="toPay" v-if="!token">支付</view>
  </view>
</template>

  onShow() {
      if(!this.token) {
        this.token = uni.getStorageSync("token")
      }
    },
  methods: {
      toPay() {
        console.log("token",this.token)
        if(this.token) {
          return console.log("可以支付")
          uni.navigateTo({
              url: '/pages/order/order'
          })
        }
        uni.navigateTo({ // 去到登录页面
          url:'/pages/login/login'
        })
      }
    }

3: login.vue 登录页

<template>
  <view>
    <view @click="loginHandler">登录页</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    onLoad() {
      // this.getPageNum()
    },
    methods: {
      getPageNum() {
        var pages = getCurrentPages() //获取加载的页面
        var currentPage = pages[pages.length -2];  // index-detail页面
        var url = currentPage.route //当前页面url
        uni.navigateBack({ url})
      },
      loginHandler() {
        let token = "jasj qdq dqhad";
        uni.setStorageSync("token",token)
        setTimeout(()=>{
          uni.showToast({
            icon:none,
            title:"登录成功"
          })
        },2000)
        this.getPageNum()
      }
    }
  }
</script>


(2): 封装一个公共的函数

1: main.js中

 const toBack = (url) => {
  let token = uni.getStorageSync("token");
  if(!token) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return uni.navigateTo({
      url:"/pages/login/login"
    })
  }
  uni.navigateTo({url})
}
Vue.prototype.$toBack = toBack;

2:index.vue

 <template>
	<view class="container">
		<view >首页</view>
    <view @click="toDetail">列表页</view>
	</view>
</template>
methods: {
      toDetail() {
        uni.navigateTo({
          url: '/pages/index-detail/index-detail'
        })
      }
		}

3: index-detail.vue

 <template>
  <view>
    <view>详情页</view>
    <view @click="toPay">支付</view>
  </view>
</template>
  onShow() {
      if(!this.token) {
        this.token = uni.getStorageSync("token")
      }
    },
    methods: {
      toPay() {
        console.log("token",this.token)
        this.$toBack("/pages/order/order")
      }
    }

4: login.vue

 <template>
  <view>
    <view @click="loginHandler">登录页</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    onLoad() {
      // this.getPageNum()
    },
    methods: {
      loginHandler() {
        let token = "jasj qdq dqhad";
        uni.setStorageSync("token",token)
        setTimeout(()=>{
          uni.showToast({
            icon:none,
            title:"登录成功"
          })
        },2000)
        uni.navigateBack({delta: 1})
      }
    }
  }
</script>


  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lxslxskxs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值