caimei-distribution-www/src/components/share-popup.vue

<template>
  <div>
    <van-share-sheet
      class="sheet"
      v-model="showShare"
      :options="options"
      @select="onSelect"
    />
    <poster
      ref="sharePoster"
      @handlerShowPoster="handlerShowPoster"
      :userInfo="userInfo"
      :dataInfo="dataInfo"
    ></poster>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  props: {
    sharePopup: {
      type: Boolean,
      default: () => false
    },
    userInfo: {
      type: Object,
      default: () => ({})
    },
    dataInfo: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    sharePopup (val) {
      this.showShare = val
    },
    showShare (val) {
      if (!val) {
        this.$emit('handlerShow')
      }
    }
  },
  data () {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat', id: 0 },
        {
          name: '分享海报',
          icon: 'https://static.caimei365.com/app/mini-distribution/haibao.png',
          id: 1
        }
      ],
      sharePoster: true
    }
  },
  methods: {
    onSelect ($event) {
      const form = {
        0: () => {
          Toast.success('请点击右上角...分享好友')
          this.showShare = false
        },
        1: () => this.getPoster()
      }
      form[$event.id]()
    },
    getPoster () {
      this.showShare = false
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      this.$refs.sharePoster.show = true
      this.$refs.sharePoster.showPoster = true
    },
    handlerShowPoster () {
      this.sharePoster = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .sheet .van-share-sheet__options {
  justify-content: space-around;
}
</style>