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

<template>
  <div class="create-order-layout j-container">
    <div class="j-header">
      <router-view
        v-if="pageLayout.header"
        name="header"
        class="create-order-header"
      />
    </div>
    <div class="j-main create-order-content" @scroll="onScroll">
      <router-view name="default" class="create-order-default" />
      <router-view
        v-if="pageLayout.activity"
        name="activity"
        class="create-order-activity"
      />
      <router-view name="form" class="create-order-form" />
      <router-view name="adsense" class="create-order-adsense" />
      <router-view name="desc" class="create-order-desc" />
    </div>
    <div class="j-footer">
      <router-view
        v-if="pageLayout.footerNotice"
        name="footerNotice"
        class="create-order-footer-notice"
      />
      <!-- 使用key避免当前路由页面底部组件不刷新问题 -->
      <!-- 主要解决类似<超级订阅>跳转<省份订阅包>时，store的canNextMap重置而底部已读不重置问题。具体问题#32998 -->
      <router-view
        :key="productId"
        name="footer"
        class="create-order-footer"
      />
    </div>
    <CustomerCorner v-show="showCustomer" :scroll-status="scrollTop < 60" bottom-position="18%" />
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import { openAppOrWxPage } from '@/utils'
import CustomerCorner from '@/components/customer/index'

export default {
  name: 'CreateOrderLayout',
  components: {
    CustomerCorner
  },
  computed: {
    ...mapState('createOrder', ['layout']),
    ...mapGetters('createOrder', ['productId', 'pageLayout', 'loadingStatus']),
    ...mapGetters('user', [
      'isLogin'
    ]),
    showCustomer() {
      return this.$route.path.includes('dataexport') && this.isLogin
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$store.state.direction !== 'forward') {
        vm.checkRedirect()
      }
    })
  },
  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()
          })
        }
      }
    }
  },
  mounted() {
    // 监听路由变化
    this.$router.afterEach((to) => {
      if (to.path.includes('/create/bigmember')) {
        // 滚动高度设置
        const scrollEle = document.querySelector('.create-order-content')
        if (scrollEle) {
          console.log(scrollEle.scrollTop, 'scrollEle.scrollTop')
          scrollEle.scrollTop = this.layout.scrollTop || 0
        }
      }
    })
  },
  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>