shareConfig.vue 3.13 KB
<template>
  <div>
    <mt-popup
      style="background: transparent"
      v-model="shareVisible"
      class="refer-share"
      position="top">
      <img style="width: 80vw" :src="shareUrl">
    </mt-popup>
    <div style="padding: 10px">
    <mt-field label="分享标题" type="textarea"  placeholder="请输入分享标题" rows="4"  v-model="title"></mt-field>
    <mt-field label="分享链接" type="textarea"  placeholder="请输入分享链接" rows="4"  v-model="link"></mt-field>
    <mt-field label="分享描述" type="textarea" placeholder="请输入分享描述" rows="4" v-model="desc"></mt-field>
    <div style="width: calc(100vw - 20px);margin:0">
      <mt-button type="primary" size="large" @click="sharePage()">分享</mt-button>
    </div>
    </div>
  </div>
</template>

<script>
  import {getwechatParam} from "../service/api";
  import shareUrl from '../assets/Bitmap@2x.png'
  import {Popup,Field,Button} from 'mint-ui'
  export default {
    name: "shareConfig",
    components:{
      [Popup.name]:Popup,
      [Field.name]:Field,
      [Button.name]:Button
    },
    data(){
      return {
        desc:'赠你1元领取价值398元课程特权,和我一起快乐启蒙英语吧',
        shareUrl:shareUrl,
        title:'我家宝宝正在【唱唱启蒙英语】挑战童谣,已坚持1天',
        link:window.location.href.split('#')[0],
        shareVisible:false,
      }
    },
    methods:{
      enableShare: function(option) {
        getwechatParam({
          api_list:   'onMenuShareAppMessage,onMenuShareTimeline',
          url:window.location.href.split('#')[0]
        }).then(wechatRes => {
          wx.config({
            debug: false,
            appId: wechatRes.appId,
            timestamp: parseInt(wechatRes.timestamp),
            nonceStr: wechatRes.nonceStr,
            signature: wechatRes.signature,
            jsApiList: wechatRes.jsApiList
          });
          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: option.product_title, // 分享标题
              desc: option.desc,// 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
              },
              cancel: function() {
              }
            });
            wx.onMenuShareAppMessage({
              title: option.product_title, // 分享标题
              desc: option.desc,// 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
              },
              cancel: function() {
              }
            });
          })
        })
      },
      sharePage(){
        this.enableShare({
          product_title:this.title, // 分享标题
          desc: this.desc,//
          shareIcon:'https://cdn.singsingenglish.com/logo/logo.jpg',
          shareUrl:this.link
        });
        this.shareVisible=true
      }
    }
  }
</script>

<style scoped>

</style>