web/apps/mobile/src/views/create-order/CreateOrderLayout.vue

<template>
  <div class="create-order-layout j-container">
    <div class="j-header">
      <router-view
        name="header"
        class="create-order-header"
        v-if="pageLayout.header"
      ></router-view>
    </div>
    <div class="j-main create-order-content" @scroll="onScroll">
      <router-view name="default" class="create-order-default"></router-view>
      <router-view
        name="activity"
        v-if="pageLayout.activity"
        class="create-order-activity"
      ></router-view>
      <router-view name="form" class="create-order-form"></router-view>
      <router-view name="adsense" class="create-order-adsense"></router-view>
      <router-view name="desc" class="create-order-desc"></router-view>
    </div>
    <div class="j-footer">
      <router-view
        v-if="pageLayout.footerNotice"
        name="footerNotice"
        class="create-order-footer-notice"
      ></router-view>
      <!-- 使用key避免当前路由页面底部组件不刷新问题 -->
      <!-- 主要解决类似<超级订阅>跳转<省份订阅包>时，store的canNextMap重置而底部已读不重置问题。具体问题#32998 -->
      <router-view
        name="footer"
        class="create-order-footer"
        :key="productId"
      ></router-view>
    </div>
    <customer-corner v-show="showCustomer" :scroll-status="scrollTop < 60" bottom-position="18%"></customer-corner>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { openAppOrWxPage } from '@/utils'
import CustomerCorner from '@/components/customer/index'
export default {
  name: 'CreateOrderLayout',
  components: {
    CustomerCorner
  },
  computed: {
    ...mapGetters('createOrder', ['productId', 'pageLayout', 'loadingStatus']),
    ...mapGetters('user', [
      'isLogin'
    ]),
    showCustomer () {
      return this.$route.path.indexOf('dataexport') > -1 && this.isLogin
    }
  },
  data() {
    return {
      loading: null,
      scrollTop: 0
    }
  },
  watch: {
    '$route.path': {
      handler() {
        // 页面改变，重置store
        this.resetStore()
      }
    },
    loadingStatus: {
      deep: true,
      handler(n) {
        // 此处修复 order-activity-helper.js 中 showToast 不展示问题
        const { disabledLoading } = this.pageLayout
        if (disabledLoading) return
        const { some } = n
        if (some) {
          this.loading = this.$toast.loading({ duration: 0 })
        } else {
          this.$nextTick(() => {
            this.loading?.clear()
          })
        }
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$store.state.direction !== 'forward') {
        vm.checkRedirect()
      }
    })
  },
  methods: {
    ...mapMutations('createOrder', ['updateProductIndex']),
    ...mapActions('createOrder', ['resetStore']),
    // 检查sessionStorage中是否有值。当页面支付返回时进行路由重定向(重定向到指定url)
    checkRedirect() {
      const options = {
        storage: sessionStorage
      }
      const cacheKey = `${this.$route.path}-redirect`
      const { urls, query } = this.$storage.get(cacheKey, {}, options)
      this.$storage.rm(cacheKey, options)
      if (!urls || !query) return
      openAppOrWxPage(urls, {
        type: 'replace',
        query
      })
    },
    onScroll (e) {
      this.scrollTop = e.target.scrollTop
    }
  }
}
</script>
<style lang="scss" scoped>
.create-order-desc {
  padding: 2.133vw 4.267vw;
  color: #9b9ca3;
  line-height: 5.333vw;
  font-size: 3.2vw;
  text-align: justify;
}
</style>