更新

front-page/fission-page.html

@@ -34,7 +34,38 @@
 
 
        <!--<img class="get-btn-box" src="image/get-free.gif" alt="" onclick="isfollowqr('http://open.weixin.qq.com/qr/code?username=hszuqiu')" />-->
-       <img class="get-btn-box" src="image/get-free.gif" alt="" @click="goWeChat" />
+
+       <div class="download-box">
+           <img class="get-btn-box" src="image/get-free.gif" alt="" @click="goWeChat" v-if="shareCount < 3" />
+           <div 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">
+                 <div class="share-content">
+                      <p>为了帮助更多的家庭</p>
+                      <p>点击菜单<span>“发送给朋友”</span></p>
+                      <p>分享到<span>{{this.shareCount}}个</span>家长群或特教群</p>
+                      <p>分享成功后即可学习!</p>
+                 </div>
+                 <footer class="share-footer">知道了</footer>
+       </div>
 
    </div>
 
@@ -53,6 +84,8 @@
             weChatCode:'',
             isFollow:'0',
             openId:'',
+            shareCount:0,
+            isShareFlag:false
         },
         methods:{
             goWeChat(){
@@ -61,20 +94,7 @@
                 }
                 else {
                     console.log('show share modal');
-                    wx.onMenuShareAppMessage({
-                        title: '语言训练认知图片大全',				// 分享标题
-                        desc: '已有239218领取成功',				// 分享描述
-                        link: '',				// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-                        imgUrl: this.headSrc,				// 分享图标
-                        type: 'link',				// 分享类型：music | video | link，默认为：link
-                        dataUrl: '',			// 如果type为：music | video，则要提供数据，默认为：空
-                        success: function(){
-                              console.log('share success')
-                        },
-                        cancel: function(){
-                              console.log('share cancel')
-                        },
-                    })
+                    this.isShareFlag = true;
                 }
             },
             subStrUrlCode: function () {
@@ -129,6 +149,20 @@
                         'imagePreview', 'chooseImage', 'uploadImage','onMenuShareAppMessage'
                     ]
                 });
+                wx.onMenuShareAppMessage({
+                    title: '语言训练认知图片大全',				// 分享标题
+                    desc: '已有239218领取成功',				// 分享描述
+                    link: '',				// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+                    imgUrl: this.headSrc,				// 分享图标
+                    type: 'link',				// 分享类型：music | video | link，默认为：link
+                    dataUrl: '',			// 如果type为：music | video，则要提供数据，默认为：空
+                    success: function(){
+                        console.log('share success')
+                    },
+                    cancel: function(){
+                        console.log('share cancel')
+                    },
+                })
             },
             sendCodeRequest(){
                 let that = this , jsUrl = location.href.split('#')[0];
@@ -162,7 +196,35 @@
                 }).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();
@@ -172,4 +234,29 @@
 
 
 </script>
+
+
+<style>
+
+    .modal-share {
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,.6);
+        z-index: 99;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+    }
+
+    .share-content {
+        text-align: center;
+    }
+
+    .share-footer {
+        border: 1px dotted #f1f1f1;
+        color: #F3F3F3;
+    }
+
+</style>
 </html>