VUE全局金币toast提示组件封装

vue组件封装部分：GoldToast.vue

<!-- 金币提示 -->
<template>
  <transition name="fade">
    <div v-if="goldToastShow"
         class="goldToast">
      <div class="goldToast_left">
        <div class="goldToast_left-title">完成“{{ taskTitle }}”</div>
        <div class="goldToast_left-award">
          <i></i>
          <span>{{ goldCountText }}</span>
        </div>
      </div>

      <div class="goldToast_btn"
           @click="btnClick(forwardInfo)">
        {{ btnText }}
      </div>
    </div>
  </transition>
</template>

<script>
import { invoke } from '@/bridge/invoke'

export default {
  name: 'GoldToast',

  data () {
    return {}
  },

  computed: {
    goldCountText () {
      if (this.forwardInfo && this.forwardInfo.targetUrl) {
        let url = this.forwardInfo.targetUrl
        let goldTreeTaskAward = this.taskAward.replace(/^\+/g, '')

        return url.indexOf('goldTree') !== -1 ? `${goldTreeTaskAward}待收取` : this.taskAward
      } else {
        return this.taskAward
      }
    },

    btnText () {
      if (this.forwardInfo && this.forwardInfo.targetUrl) {
        let url = this.forwardInfo.targetUrl
        return url.indexOf('goldTree') !== -1 ? '回摇金树' : '去赚更多'
      } else {
        return '去赚更多'
      }
    }
  },

  mounted () {
  },

  // 方法集合
  methods: {
    // 点击按钮
    btnClick (forwardInfo) {
      if (forwardInfo && forwardInfo.targetUrl) {
        let _this = this
        let url = forwardInfo.targetUrl
        if (url.indexOf('goldTree') !== -1) {
          invoke({
            method: 'navigateToTag',
            service: 'route',
            params: JSON.stringify({
              tag: 'goldTreeHome',
              url: `${process.env.VUE_APP_ROOT_URl}/ailicai-vue/app.html#/goldTree/goldTreeHome`,
              refresh: 1
            }),
            callback (err, ret) {
              if (err) {
                throw err
              } else if (!ret) {
                return
              }
              const { result } = JSON.parse(ret)
              if (result === '0') {
                _this.$bridgeCompat.navigate(forwardInfo)
              }
            }
          })
        } else {
          this.$bridgeCompat.navigate(forwardInfo)
        }
      } else {
        // 跳转
        this.$thfund.thNavToH5(
          `${process.env.VUE_APP_ROOT_URl}/mail/app/client/coin_sign_shop/index.html`,
          () => {
            import('@/router/wx').then((router) => {
              router.default.push({
                path: '/goldStore/goldStoreHome'
              })
            })
          },
          'false',
          'false'
        )
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.goldToast {
  line-height: 1;
  font-size: 0.12rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.17rem 0.15rem;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 0.04rem;

  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100000000;

  @at-root &_left {
    flex: 1;

    &-title {
      width: 2.3rem;
      font-size: 0.16rem;
      color: #ffffff;
      padding: 0.05rem 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-award {
      display: flex;
      align-items: center;

      i {
        display: block;
        height: 0.16rem;
        width: 0.16rem;
        background: url('../assets/images/coupon_coin.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 0.05rem;
      }

      span {
        font-size: 0.14rem;
        color: #ffcd00;
      }
    }
  }

  @at-root &_btn {
    flex-shrink: 0;
    width: 0.8rem;
    height: 0.3rem;
    line-height: 0.3rem;
    background-color: #e51217;
    font-size: 0.14rem;
    color: #ffffff;
    text-align: center;
    border-radius: 0.3rem;
  }
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.25s;
}
</style>

js封装部分：goldToast-plugin.js

/**
 *金币任务提示插件
 * author: lijianxin
 */

import vue from 'vue'

// 这里就是我们刚刚创建的那个静态组件
import GoldToast from '@/components/GoldToast'

// 返回一个 扩展实例构造器, 关于 vue.extend 有不懂的同学,可以去查看以下官方文档 https://cn.vuejs.org/v2/api/#Vue-extend
const ToastConstructor = vue.extend(GoldToast)

// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
function showToast (taskTitle, taskAward, forwardInfo, duration = 3000) {
  // 实例化一个 toast.vue
  const toastDom = new ToastConstructor({
    el: document.createElement('div'),
    data () {
      return {
        goldToastShow: true,
        taskTitle: taskTitle,
        taskAward: taskAward,
        forwardInfo: forwardInfo
      }
    }
  })

  // 把 实例化的 toast.vue 添加到 body 里
  document.body.appendChild(toastDom.$el)

  // 过了 duration 时间后隐藏整个组件
  setTimeout(() => { toastDom.goldToastShow = false }, duration)
}

// 注册为全局组件的函数
export function registryToast () {
  // 将组件注册到 vue 的 原型链里去,
  // 这样就可以在所有 vue 的实例里面使用 this.$toast()
  vue.prototype.$goldToast = showToast
}

export default showToast

添加自定义组件：main.js

/* 添加自定义goldToast插件 */
import { registryToast } from '@/plugins/goldToast-plugin'
Vue.use(registryToast)

二次封装：coinTask.js

import { processGoldCoinsTask } from '@/api/authentic'
import { bridgeCompat } from '@/bridge/bridgeCompat'

export async function coinsTask (vm, data) {
  // 判断是否登录
  bridgeCompat.getUserId().then(async (userId) => {
    if (userId) {
      const { retCode, payload = {} } = await processGoldCoinsTask(data)
      if (retCode === 0) {
        const { title, btnText, goldCount, processForwardInfo } = payload
        if (title) {
          let btnText1 = process.env.VUE_APP_THENV === 'mini' || !btnText ? '去赚更多' : btnText
          vm.$goldToast(title, goldCount, btnText1, processForwardInfo)
        }

        // 告知原生，刷新数据
        window.thJs.jsfreshNativeView({
          businessCode: 1108
        })
      }
    }
  })
}

调用coinTask方法

VUE页面
import { coinsTask } from '@/utils/coinTask'
调用
// 金币任务-点赞
if (!this.liked) {
  console.log('点赞的时候调金币任务')
  coinsTask(this, {
  taskBizId: 'fm_active',
  params: 'activeType=1'
  })
}