mayou/htmldev/cps/src/views/shareMiddle/index.vue

<template>
  <div>
    <van-popup
      v-model="showFlag"
      :lock-scroll="false"
      position="bottom"
      :close-on-click-overlay="false"
      @click-overlay="showFlag = false"
      style="height: 40%;">
      <wx-open-launch-weapp
        ref="launchBtn"
        :username="accountId"
        :path="appPath"
        style="position: absolute;left:0;top:0;width: 100%;height: 100%;"
        @error="errorHandle">
        <script type="text/wxtag-template">
          <style>
            .jump-btn {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              line-height: 100%;
              text-align: center;
              font-size: 12px;
            }
          </style>
          <div class="jump-btn">打开小程序</div>
        </script>
      </wx-open-launch-weapp>
    </van-popup>
  </div>
</template>

<script>
import { Toast, Popup, Dialog } from 'vant'
import { getJumpConfig } from '../marketing/save/api'
import { platform } from '../../utils/platform'

export default {
  name: 'index',
  components: {
    'van-popup': Popup
  },
  data () {
    return {
      showFlag: false,
      accountId: 'gh_72a4eb2d4324',
      appPath: '',
      toast: null
    }
  },
  created () {
    this.toast = Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    const { redirectUrl } = this.$route.query
    if (redirectUrl && /http/.test(decodeURIComponent(redirectUrl))) {
      this.handleJump({
        link_url: decodeURIComponent(redirectUrl)
      })
    }
  },
  methods: {
    async handleJump (shop) {
      const linkUrl = shop.link_url && shop.link_url.split('api/transfer/')
      if (!Array.isArray(linkUrl) && linkUrl.length > 1) {
        top.location.href = shop.link_url
        return
      }
      try {
        const { status, data, msg } = await getJumpConfig(linkUrl[1])
        if (status) {
          // type 类型：1-h5 2-小程序
          const { type, url } = data
          console.log(type, url)
          if (type === 2 && this.isSupportJumpWXmini()) {
            this.toast.clear()
            this.showFlag = true
          } else {
            this.toast.clear()
            this.showFlag = true
            // top.location.href = url
          }
          if (platform.isWeixin) {
            this.$nextTick(() => {
              this.$refs.launchBtn.click()
            })
          }
        } else {
          Toast(msg)
        }
      } catch (e) {}
    },
    errorHandle (err) {
      Dialog.alert({
        message: JSON.stringify(err)
      }).then(() => {
        // on close
      })
    },
    // 判断微信是否支持：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
    isSupportJumpWXmini () {
      const wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)
      let result = false
      if (wechat) {
        const judgewechat = wechat[1].split('.')

        if (judgewechat[0] >= 7) {
          if (judgewechat[1] >= 0) {
            if (judgewechat[2] >= 12) {
              result = true
            }
          }
        }
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>

</style>