web/apps/mobile/src/views/article/components/FreeUserAdvancedMask.vue

<template>
  <section class="free-user-advanced-mask mask-container bg-white">
    <MaskCard
      :desc="maskConf.desc"
      :exampleImage="maskConf.exampleImage"
      :footerButtonText="maskConf.buttonText"
      @footerBtnClick="onFooterBtnClick"
    >
      <template #header>
        <div class="header flex flex-justify-center flex-align-center">
          <div class="title">{{ maskConf.title }}</div>
        </div>
      </template>
    </MaskCard>
  </section>
</template>
<script>
import { Icon } from 'vant'
import { LINKS } from '@/data'
import { openAppOrWxPage } from '@/utils/'
import MaskCard from '@/views/article/ui/MaskCard.vue'

export default {
  name: 'FreeUserAdvancedMask',
  components: {
    MaskCard,
    [Icon.name]: Icon
  },
  props: {
    type: {
      type: String,
      default: 'nijian',
      validator(value) {
        return ['nijian', 'caigouyixiang'].includes(value)
      }
    },
    beforeLeavePage: Function
  },
  data() {
    return {
      map: {
        nijian: {
          title: '超前项目抢先知，中标更容易',
          desc: '提前3-12个月获取审批中的新项目，超前项目抢先介入，商机提前掌控。',
          buttonText: '点击体验',
          source: 'article_proposed_project',
          exampleImage: 'mask/example/nj-detail-example.png'
        },
        caigouyixiang: {
          title: '项目提前介入，中标更轻松',
          desc: '提前1-3个月获取项目信息，<br />及早介入准备更充分',
          buttonText: '点击体验',
          source: 'article_purchase_intention',
          exampleImage: 'mask/example/cg-detail-example.png'
        }
      }
    }
  },
  computed: {
    maskConf() {
      return this.map[this.type] || this.map.nijian
    }
  },
  methods: {
    onFooterBtnClick() {
      this.leaveInfo()
    },
    async leaveInfo() {
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.留资, {
        query: {
          source: this.maskConf.source
        }
      })
    },
    async concatKf() {
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.客服)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  font-size: 16px;
}
::v-deep {
  .mask-content-desc-text {
    text-align: center;
  }
  .mask-content-example-image {
    img {
      transform: scale(1.12);
    }
  }
}
</style>