hookehuyr

fix(login): fix back button issue

...@@ -38,6 +38,7 @@ import IconFont from '@/components/icons/IconFont.vue' ...@@ -38,6 +38,7 @@ import IconFont from '@/components/icons/IconFont.vue'
38 * @property {String} [background] - Custom background style (CSS value) 38 * @property {String} [background] - Custom background style (CSS value)
39 * @property {String} [textColor] - Custom text/icon color (default #fff) 39 * @property {String} [textColor] - Custom text/icon color (default #fff)
40 * @property {Boolean} [overlay] - Whether to overlay content (no placeholder) 40 * @property {Boolean} [overlay] - Whether to overlay content (no placeholder)
41 + * @property {Boolean} [preventDefaultBack] - Whether to prevent default navigateBack when @back is emitted
41 */ 42 */
42 const props = defineProps({ 43 const props = defineProps({
43 title: { 44 title: {
...@@ -59,9 +60,15 @@ const props = defineProps({ ...@@ -59,9 +60,15 @@ const props = defineProps({
59 overlay: { 60 overlay: {
60 type: Boolean, 61 type: Boolean,
61 default: false 62 default: false
63 + },
64 + preventDefaultBack: {
65 + type: Boolean,
66 + default: false
62 } 67 }
63 }) 68 })
64 69
70 +const emit = defineEmits(['back'])
71 +
65 const canGoBack = ref(false) 72 const canGoBack = ref(false)
66 73
67 /** 74 /**
...@@ -77,6 +84,14 @@ onMounted(() => { ...@@ -77,6 +84,14 @@ onMounted(() => {
77 }) 84 })
78 85
79 const goBack = () => { 86 const goBack = () => {
87 + // 触发 back 事件
88 + // 父组件可以通过 @back 自定义返回行为
89 + // 例如:登录页可以跳转到首页而非返回上一页
90 + emit('back')
91 +
92 + // 如果没有阻止默认行为,执行默认的 navigateBack
93 + if (!props.preventDefaultBack) {
80 Taro.navigateBack() 94 Taro.navigateBack()
95 + }
81 } 96 }
82 </script> 97 </script>
......
1 <template> 1 <template>
2 <view class="min-h-screen bg-white flex flex-col"> 2 <view class="min-h-screen bg-white flex flex-col">
3 <!-- Header --> 3 <!-- Header -->
4 - <NavHeader title="" :show-back="true" /> 4 + <NavHeader title="" :show-back="true" :prevent-default-back="true" @back="handleBack" />
5 5
6 <view class="flex-1 flex flex-col px-[48rpx] pt-[120rpx]"> 6 <view class="flex-1 flex flex-col px-[48rpx] pt-[120rpx]">
7 <!-- Logo/Title --> 7 <!-- Logo/Title -->
...@@ -80,6 +80,20 @@ const form = reactive({ ...@@ -80,6 +80,20 @@ const form = reactive({
80 }) 80 })
81 81
82 /** 82 /**
83 + * Handle back button click
84 + * - 清空 router store 中保存的路径
85 + * - 跳转到首页(因为导航栈已被 401 清空)
86 + */
87 +const handleBack = () => {
88 + // 清空保存的路径
89 + const store = routerStore()
90 + store.remove()
91 +
92 + // 跳转到首页
93 + Taro.reLaunch({ url: '/pages/index/index' })
94 +}
95 +
96 +/**
83 * Handle login action 97 * Handle login action
84 */ 98 */
85 const handleLogin = async () => { 99 const handleLogin = async () => {
......