szugift-fe/sourcecode/h5app/vue/src/views/share.vue

<template>
    <div class="note" :style="note">
        <div class="transparent" :style="transparent">
            <!--分享页面-->
            <div class="card">
                <h3 style="color: white"><strong>提交成功！最后一步</strong></h3>
                <van-row>保存邀请卡片（图片）至手机</van-row>
                <van-row>转发图片至朋友圈并截图</van-row>
                <van-row>将截图发送至<span style="color: #F4A460"> 深大欢欢 </span>公众号后台，才可获得本次活动的【匹配资格】和【抽奖机会】</van-row>
            </div>
            <div style="position: relative;">
                <img :src="share" style="max-width: 80%; position: relative;"/>
            </div>
            <van-button size="large" type="primary" @click="Toshare">分享</van-button>
            <van-button size="large" type="primary" @click="Toindex">返回首页</van-button>
        </div>

    </div>
</template>

<script>
    //  import wx from 'weixin-js-sdk';
    import {
        Row, Col,
        Button
    } from 'vant';
    import 'whatwg-fetch';
    import { BasicFunction } from '../connector/basic-service';

    export default {
        name: "share",
        components: {
            [Button.name]: Button,
            [Row.name]: Row, [Col.name]: Col,
            'wx': {
                render(createElement) {
                    return createElement(
                        'script',
                        {
                            attrs: {
                                type: 'text/javascript',
                                src: 'http://res2.wx.qq.com/open/js/jweixin-1.4.0.js',
                            },
                        },
                    );
                },
            },
        },
        mounted: {},
        data() {
            return {
                note: {
                    backgroundImage: "url(" + require("../assets/prize_background.jpg") + ")",
                },
                transparent: {
                    backgroundColor: "rgba(50,50,50,0.7)",
                },
                active: 0,
                share: require('../assets/post.png'),
            }
        },
        methods: {
            Toindex() {
                this.$router.push('index');
            },
            Toshare() {
                alert("请点击右上角，即可分享");
                Toast({
                    message: "请点击右上角，即可分享"
                })
            }
        },
        created: function () {
            if (!localStorage.getItem('frontend-userid')) {
                this.$router.push('login');
                return;
            }

            BasicFunction.getSigned(['onMenuShareTimeline', 'onMenuShareAppMessage',], function () {
                wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
                    wx.onMenuShareTimeline({
                        title: '用一份礼物，邂逅一段故事', // 分享标题
                        link: 'https://gift.fogice.com/?res=timeline', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'http://gift.fogice.com/attachment/upload/2018-12-13_22-45-35_dbad3cb10afe017f8ef5158f96c9a7c6c622aa04db557384883f97fe38cae380.png', // 分享图标
                        success: function () {
                            // 设置成功
                            Toast({
                                message: "成功分享到朋友圈"
                            });
                            this.$router.push('index');
                        },
                        cancel: function () {
                            Toast({
                                message: "分享失败,您取消了分享!"
                            });

                        }
                    });
                    wx.onMenuShareAppMessage({
                        title: '用一份礼物，邂逅一段故事', // 分享标题
                        desc: '嘿~我送出了一份圣诞礼物  要和我来交换吗', // 分享描述
                        link: 'https://gift.fogice.com/?res=appmessage', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'http://gift.fogice.com/attachment/upload/2018-12-13_22-45-35_dbad3cb10afe017f8ef5158f96c9a7c6c622aa04db557384883f97fe38cae380.png', // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () {
// 用户点击了分享后执行的回调函数
                            Toast({
                                message: "成功分享给朋友"
                            });
                            this.$router.push('index');
                        },
                        cancel: function () {
                            Toast({
                                message: "分享失败,您取消了分享!"
                            });

                        }
                    })
                });


                /*  wx.config({
                      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                      appId: '', // 必填，公众号的唯一标识
                      timestamp:, // 必填，生成签名的时间戳
                      nonceStr: '', // 必填，生成签名的随机串
                      signature: '',// 必填，签名
                      jsApiList: [] // 必填，需要使用的JS接口列表
                  });*/

            },{});
        }
    };
</script>

<style scoped>
    .van-button {
        background-color: #fd6740;
        border-color: #fd6740;
        margin: 10px 0 10px;
        width: 55%;
    }

    .card {
        margin-bottom: 20px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 15px;
        text-align: left;
    }

    .van-row {

        font-size: 0.3em;
        color: white;
    }
</style>