zizhong.wang
/
fission-weChat


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/weui.min.css"/>
    <link rel="stylesheet" href="css/weuix.min.css"/>
    <script src="js/md5.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/zepto.min.js"></script>
    <script src="js/zepto.weui.min.js"></script>
    <script src="js/php.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/weChatSdk.js"></script>
</head>
<body>


   <div id="myApp" class="bg-box">


       <img alt="" class="headImg-box" :src=headSrc>

       <div class="content-box">
           <img  alt=""  :src=contentSrc />
       </div>


       <div class="num-box">
           已有 <span style="color: #A4404E">{{num}}</span> 人领取成功
       </div>


       <!--<img class="get-btn-box" src="image/get-free.gif" alt="" onclick="isfollowqr('http://open.weixin.qq.com/qr/code?username=hszuqiu')" />-->

       <div class="download-box">
           <img class="get-btn-box" src="image/get-free.gif" alt="free" @click="goWeChat" v-if="startCount > 1"/>
           <div class="download-content" v-else>
               <div>
                   <span>第一步.</span>
                   <span>复制提取码</span>
                   <span>qaki</span>
                   <button>复制</button>
               </div>
               <div>
                   <span>第二步.</span>
                   <span>下载地址:</span>
                   <span>qaki</span>
               </div>
               <div>
                   【温馨提示】不建议购买网盘会员，由于文件过大，请保存后在电脑上打开网盘，先下载到本地电脑，再解压!
               </div>
           </div>
       </div>

       <div class="modal-share" v-show="isShareFlag">
           <img src="./image/share-arrow.png" alt="">
           <div class="share-content">
               <p>为了帮助更多的家庭</p>
               <p>点击菜单<span class="share-font">“发送给朋友”</span></p>
               <p>分享到<span class="share-font" style="text-decoration: underline;">{{this.startCount}}个</span>家长群或特教群</p>
               <p class="share-font">分享成功后即可学习!</p>
           </div>
           <footer class="share-footer" @click="closeShareModal">知道了</footer>
       </div>
   </div>


</body>

<script>
   const apiUrl = 'http://fission.xazhima.com/api/api.php';
    new Vue({
        el:'#myApp',
        data:{
            num:52255,
            headSrc:'image/headImg.png',
            contentSrc:"image/content-bg.png",
            weChatCode:'',
            isFollow:'0',
            openId:'',
            shareCount:0,
            startCount:3,
            isShareFlag:false
        },
        methods:{
            goWeChat(){
                if(this.isFollow === '0'){
                    location.href = 'http://mp.weixin.qq.com/mp/getmasssendmsg?__biz=MzUzOTcwMjM0OQ==#wechat_webview_type=1&wechat_redirect'
                }
                else {
                    console.log('show share modal');
                    this.isShareFlag = true;
                    wx.ready(function () {
                        wx.onMenuShareAppMessage({
                            title: '语言训练认知图片大全',				// 分享标题
                            desc: '已有239218领取成功',				// 分享描述
                            link: '',				// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: this.headSrc,				// 分享图标
                            //    type: 'link',				// 分享类型：music | video | link，默认为：link
                            //     dataUrl: '',			// 如果type为：music | video，则要提供数据，默认为：空
                            success: function(){
                                alert('share success')
                                this.startCount--;
                                if(this.startCount === 0){
                                    this.isShareFlag = false;
                                }
                            },
                            cancel: function(){
                                console.log('share cancel')
                            },
                        })
                    })

                }
            },
            subStrUrlCode: function () {
                let weChatCodeUrl = location.search; //获取url中"?"符后的字符串
                let theRequest = {};
                if (weChatCodeUrl.indexOf("?") !== -1) {
                    let str = weChatCodeUrl.substr(1);
                    let strS = str.split("&");
                    for(let i = 0; i < strS.length; i ++) {
                        theRequest[strS[i].split("=")[0]]=(strS[i].split("=")[1]);
                    }
                }
                console.log(theRequest);
                return theRequest.code;
            },
            closeShareModal(){
                this.isShareFlag = false;
            },
            judgeLogin(){
                axios({
                    method: 'post', //请求方式 有常用的有get post等
                    url: apiUrl, //请求地址
                    data: {
                        method: 'login',
                        timestamp: 11111111,
                        sign:md5('login'+'11111111')
                    }, //代表传过去的参数对象,
                    transformRequest: [function(data) {
                        let ret = '';
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' +
                                encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }], //将传参修改为formData格式 注释则为JSON格式
                }).then(function(rs) {
                    if(rs.data.code === 200) {
                        window.location.href = rs.data.msg;
                        console.log(rs.data)
                    }else {
                        alert(rs.data.msg)
                    }
                }).catch(function(e) {
                    console.log(e);
                });
            },
            setWxConfig(param){
                wx.config({
                    debug: false,
                    appId: param.appId,
                    timestamp: param.timestamp ,
                    nonceStr : param.nonceStr,
                    signature: param.signature,
                    jsApiList: [
                        'onMenuShareAppMessage'
                    ]
                });
            },
            sendCodeRequest(){
                let that = this , jsUrl = location.href.split('#')[0];
                axios({
                    method: 'post', //请求方式 有常用的有get post等
                    url: apiUrl, //请求地址
                    data: {
                        method: 'wxinfo',
                        timestamp: 11111111,
                        code:that.weChatCode,
                        jsUrl:jsUrl,
                        sign:md5('wxinfo'+'11111111')
                    }, //代表传过去的参数对象,
                    transformRequest: [function(data) {
                        let ret = '';
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' +
                                encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }], //将传参修改为formData格式 注释则为JSON格式
                }).then(function(rs) {
                    if(rs.data.code === 200) {
                       that.setWxConfig(rs.data.msg.js_sign);
                       that.headSrc = rs.data.msg.headimgurl;
                       that.isFollow = rs.data.msg.subscribe;
                       that.openId = rs.data.msg.openid;
                    }else {
                        alert(rs.data.msg)
                    }
                }).catch(function(e) {
                    console.log(e);
                });
            },
            addCountRequest(){
                axios({
                    method: 'post', //请求方式 有常用的有get post等
                    url: apiUrl, //请求地址
                    data: {
                        method: 'addcount',
                        timestamp: 11111111,
                        openid:this.openId,
                        sign:md5('addcount'+'11111111')
                    }, //代表传过去的参数对象,
                    transformRequest: [function(data) {
                        let ret = '';
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' +
                                encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }], //将传参修改为formData格式 注释则为JSON格式
                }).then(function(rs) {
                    if(rs.data.code === 200) {
                        this.shareCount = Number(rs.data.msg.count)
                    }else {
                        alert(rs.data.msg)
                    }
                }).catch(function(e) {
                    console.log(e);
                });
            },
        },
        mounted(){
           this.weChatCode = this.subStrUrlCode();
           this.weChatCode ? this.sendCodeRequest() : this.judgeLogin()
        }
    })


</script>


<style>
    .bg-box{

        width: 100%;
        height: 100%;
        background-image: url(./image/bg.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .content-box {
        width: 90%;
        height: 60%;
        background-color: #ffffff;
        border-radius: 10px;
        z-index: 99;
        margin-top: 15%;
        position: relative;
    }

    .content-box img {
        margin-top: 10%;
        width: 100%;
    }


    .headImg-box {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        position: absolute;
        top: 15px;
        z-index: 100;
    }
    .num-box {
        font-size: 1rem;
        font-family: fantasy
    }

    .get-btn-box {
        width: 65%;
        border-radius: 3%;
    }
    .download-box {
        display: flex;
        justify-content: center;
    }


    .modal-share {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.8);
        z-index: 108;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: absolute;
    }
    .modal-share img {
        position: absolute;
        top: 15px;
        right: 0;
    }
    .share-content {
        text-align: center;
        color: #F3F3F3;
        border: 1px dashed;
        padding: 25px;
        border-radius: 25px;
        margin-top: 30px;
        letter-spacing: 2px;
        font-family: fantasy;
    }

    .share-footer {
        border: 1px dotted #f1f1f1;
        color: #F3F3F3;
        width: 120px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        border-radius: 5px;
    }

    .share-font {
        color: rgba(166,44,53,1);
    }

</style>
</html>