uk_front/pages/news/_newsName.vue

<template>
  <div class="com-main com-width-1400 com-margin-auto">
    <div
      class="content"
      v-html="articleDetails"></div>
    <div
      id="formTag"
      v-show="showMargin"></div>
    <iframe
      v-show="$route.params.newsName === 'indent-ideas'"
      frameborder="0"
      ref="iframe"
      id="formFrame"
      src=""
      style="height: 1100px; width: 100%; border: none"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMargin: true,
      articleDetails: '',
      routerParams: {},
      profileform: {},
      defaultURL:
        'https://forms.zohopublic.com/promocollectionau/form/PCIndentSourcingForm/formperma/I8RpkeF104QfGCw2oK_PUZtj5lCwdwZEY5QJJpvllVI',
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo || {}
    },
    computedURL() {
      if (this.userInfo.email) {
        const config = {
          name: this.userInfo.contacts,
          phone: this.userInfo.phone,
          email: this.userInfo.email,
          company: this.userInfo.company,
        }
        let query = ''
        for (const key in config) {
          if (config[key]) {
            query += `&${key}=${encodeURIComponent(config[key])}`
          }
        }
        query = query.slice(1)
        return this.defaultURL + '?' + query
      } else {
        return this.defaultURL
      }
    },
  },
  watch: {
    userInfo() {
      if (this.$route.params.newsName === 'indent-ideas') {
        setTimeout(() => {
          const target = document.getElementById('formFrame')
          target.src = this.computedURL
        }, 1000)
      }
    },
  },
  async created() {
    const paramsData = this.$cookies.get('can-use-cookie') ? this.$cookies.get('paramsData') : ''
    if (paramsData) {
      this.routerParams = paramsData
    } else {
      this.routerParams = this.$route.params
      if (this.$cookies.get('can-use-cookie')) this.$cookies.set('paramsData', this.$route.params)
    }
    await this.getArticleDetails()
    this.showMargin = true
  },
  mounted() {
    if (this.$route.params.newsName === 'indent-ideas') {
      setTimeout(() => {
        const target = document.getElementById('formFrame')
        target.src = this.computedURL
      }, 1000)
    }
    setTimeout(() => {
      this.showMargin = false
    }, 2000)
  },
  // 这个路由在设计的时候就不对劲, 结构层级只有1层, 但是跳转和传参传了两个params, 导致只有一个参数体现在了url上, 改动页面刷新的时候就会丢失参数id.
  beforeDestroy() {
    this.$cookies.remove('paramsData')
  },
  methods: {
    getArticleDetails() {
      let title = this.$route.params.newsName || ''
      title = decodeURIComponent(title)
      this.$axios
        .post('/uk-api/home/articleDetail', {
          title: title.replaceAll('-', ' '),
          // state: 'au',
        })
        .then(res => {
          if (res.code === 1) {
            this.articleDetails = res.result.content.replace(/&nbsp;/gi, '')
          }
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
:deep(.content) {
  margin: 10px auto;
  font-size: 18px;
  font-family: Proxima Nova;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
  p {
    text-align: center !important;
    word-wrap: break-word;
    margin: 10px;
  }
  div {
    text-align: center !important;
  }
}
#formTag {
  height: 120px;
}
</style>