zkxw/mobile-h5/pages/protocol/index.vue

<template>
  <view class="protocol-page">
    <view class="protocol-nav">
      <view class="protocol-nav__bar">
        <view
          class="protocol-nav__back"
          hover-class="protocol-nav__back--hover"
          @click.stop="goBack"
        >
          <text class="protocol-nav__back-icon">‹</text>
        </view>
        <text class="protocol-nav__title">{{ doc.title }}</text>
        <view class="protocol-nav__placeholder" />
      </view>
    </view>

    <view class="protocol-body">
      <view class="protocol-meta">更新日期：{{ doc.updatedAt }}</view>

      <view
        v-for="(sec, idx) in doc.sections"
        :key="idx"
        class="protocol-section"
      >
        <view class="protocol-section__title">{{ sec.heading }}</view>
        <view
          v-for="(p, pIdx) in sec.paragraphs"
          :key="pIdx"
          class="protocol-section__p"
        >
          {{ p }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getProtocol } from '../../utils/protocol-content.js'

  export default {
    data() {
      return {
        doc: getProtocol('user')
      }
    },
    onLoad(query) {
      const type = query && query.type === 'privacy' ? 'privacy' : 'user'
      this.doc = getProtocol(type)
    },
    methods: {
      goBack() {
        const pages = getCurrentPages()
        if (pages && pages.length > 1) {
          uni.navigateBack({
            delta: 1,
            fail: () => this.fallbackToLogin()
          })
          // H5 上偶发 navigateBack 既不成功也不进 fail，短暂后再确认是否离开
          setTimeout(() => {
            const curPages = getCurrentPages()
            const cur = curPages && curPages[curPages.length - 1]
            const route = (cur && (cur.route || (cur.$page && cur.$page.fullPath))) || ''
            if (String(route).indexOf('protocol') !== -1) {
              this.fallbackToLogin()
            }
          }, 280)
          return
        }
        this.fallbackToLogin()
      },
      fallbackToLogin() {
        uni.reLaunch({ url: '/pages/login/index' })
      }
    }
  }
</script>