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>1.长按保存邀请卡片（图片）至手机</van-row>
                <van-row>2.转发图片至朋友圈并截图</van-row>
                <van-row>3.将截图发送至<span style="color: #F4A460"> 深大换换 </span>公众号后台，即可获得本次活动的【匹配资格】和【抽奖机会】</van-row>
            </div>
            <div style="position: relative;">
                <img :src="isWX ? share_http[i] : share[i]" style="max-width: 80%; position: relative;"/>
            </div>
            <a :href="share[i]" download="post">
                <van-button size="large" type="primary" @click="savePic" style="background-color: #00FF00;
                    border-color: #00FF00;
                    margin: 10px 0 10px;
                    width: 55%;"
                >保存</van-button>
            </a>
            <van-button size="large" type="primary" @click="Toindex" style="background-color: #fd6740;
                border-color: #fd6740;
                margin: 10px 0 10px;
                width: 55%;"
            >返回首页</van-button>
        </div>

    </div>
</template>

<script>
    // import wx from 'weixin-js-sdk';
    import {
        Row, Col,
        Button, Toast
    } 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',
            //                 },
            //             },
            //         );
            //     },
            // },
        },
        data() {
            return {
                note: {
                    backgroundImage: "url('http://pjczv6ygf.bkt.clouddn.com/share_background.jpg')",
                },
                transparent: {
                    backgroundColor: "rgba(50,50,50,0.7)",
                },
                active: 0,
                share: [
                    require('../assets/posts/1.png'),
                    require('../assets/posts/2.png'),
                    require('../assets/posts/3.png'),
                    require('../assets/posts/4.png'),
                ],
                share_http: [
                    "http://pjczv6ygf.bkt.clouddn.com/1.png",
                    "http://pjczv6ygf.bkt.clouddn.com/2.png",
                    "http://pjczv6ygf.bkt.clouddn.com/3.png",
                    "http://pjczv6ygf.bkt.clouddn.com/4.png",
                ],
                isWX: false,
                i: 0
            }
        },
        methods: {
            Toindex() {
                this.$router.push('index');
            },
            savePic() {
                if (isWeiXin()) alert('请长按图片，保存至手机');
            }
            // Toshare() {
            //     alert("请点击右上角，即可分享");
            //     Toast({
            //         message: "请点击右上角，即可分享"
            //     })
            // }
        },
        created: function () {
            if (!localStorage.getItem('frontend-userid')) {
                this.$router.push('login');
                return;
            }
            this.i = Math.ceil(Math.random() * 4) - 1;
            // console.log(this.i);
            if (isWeiXin()) this.isWX = true;
            // console.log(this.isWX);

            // 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: "分享失败,您取消了分享!"
            //                 });
            //             }
            //         })
            //     });
            // }, {});
        }
    }

    function isWeiXin() {
        let ua = window.navigator.userAgent.toLowerCase();
        return ua.match(/MicroMessenger/i) == 'micromessenger'; // 必须两个等号
    }
</script>

<style scoped>
    .card {
        margin-bottom: 20px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 15px;
        text-align: left;
    }
    h3{
        font-size: 1.5em;

    }

    .van-row {
        font-size: 1em;
        color: white;
    }
</style>