当前订单信息存入 store

src/pages/benefits/index.vue

@@ -55,22 +55,20 @@
 
 <script>
 import { defineComponent } from 'vue'
-import { getOrderInfo } from '@/service/order'
+import { state, getCurrentOrder } from '@/store'
 
 export default defineComponent({
   name: 'OrderDetail',
-  async beforeRouteEnter(to, from, next) {
-    const { results } = await getOrderInfo(to.params.id)
-    next(vm => (vm.info = results))
+  async beforeRouteEnter(to) {
+    return await getCurrentOrder(to.params.id)
   },
   async beforeRouteUpdate(to) {
-    this.info = (await getOrderInfo(to.params.id)).results
+    return await getCurrentOrder(to.params.id)
   },
-  data() {
-    return {
-      /** @type {any} */
-      info: null,
-    }
+  computed: {
+    info() {
+      return state.currentOrder
+    },
   },
   methods: {
     getButtonText(item) {

src/pages/pay-result/index.vue

@@ -64,30 +64,25 @@
 
 <script>
 import { defineComponent } from 'vue'
-import { getOrderInfo } from '@/service/order'
-import { state } from '@/store'
+import { state, getCurrentOrder } from '@/store'
 
 export default defineComponent({
   name: 'PayResult',
   props: ['status'], // 'success' | 'fail'
-  async beforeRouteEnter(to, from, next) {
-    const { results } = await getOrderInfo(to.query.id)
-    next(vm => {
-      vm.info = results
-      state.bgWhite = true
-    })
-  },
-  data() {
-    return {
-      /** @type {any} */
-      info: null,
-    }
+  async beforeRouteEnter(to) {
+    await getCurrentOrder(to.query.id)
   },
   computed: {
+    info() {
+      return state.currentOrder
+    },
     phoneModel() {
       return (this.info.phone_info || '').split(' ').slice(1).join(' ')
     },
   },
+  created() {
+    state.bgWhite = true
+  },
 })
 </script>
 

src/pages/renewal/index.vue

@@ -34,19 +34,18 @@
 
 <script>
 import { defineComponent } from 'vue'
-import { getOrderInfo, unsubscribe } from '@/service/order'
+import { unsubscribe } from '@/service/order'
+import { state, getCurrentOrder } from '@/store'
 
 export default defineComponent({
   name: 'Renewal',
-  async beforeRouteEnter(to, from, next) {
-    const { results } = await getOrderInfo(to.query.id)
-    next(vm => (vm.info = results))
+  async beforeRouteEnter(to) {
+    return await getCurrentOrder(to.query.id)
   },
-  data() {
-    return {
-      /** @type {any} */
-      info: null,
-    }
+  computed: {
+    info() {
+      return state.currentOrder
+    },
   },
   methods: {
     async unsubscribe() {
@@ -59,6 +58,8 @@ export default defineComponent({
       })
       const { message } = await unsubscribe(this.$route.query.id)
       this.$toast(message)
+      state.currentOrder.id = -1
+      this.$router.back()
     },
   },
 })

src/store.ts

@@ -1,11 +1,13 @@
 import { reactive } from 'vue'
 import * as api from '@/service/user'
+import { getOrderInfo } from '@/service/order'
 
 export const state = reactive({
   bgWhite: false,
   userInfo: null as ApiUser.Info.Response | null,
   // 拉新优惠券信息
   coupon: {} as any,
+  currentOrder: null as any,
 })
 
 export async function getUserInfo(reportError?: boolean) {
@@ -28,3 +30,9 @@ export function bootstrap() {
   api.getInviteCoupon().then(({ results }) => (state.coupon = results))
   return getUserInfo(false)
 }
+
+export async function getCurrentOrder(id: string | number) {
+  if (!state.currentOrder || +state.currentOrder.id !== +id) {
+    state.currentOrder = (await getOrderInfo(+id)).results
+  }
+}