Merge pull request 'feature/ladingpage_chenge_1206' (#607) from feature/ladingpage_chenge_1206 into master

Reviewed-on: http://8.136.139.249:3000/wmtx/platform/pulls/607

Application/Home/Controller/HomeController.class.php

@@ -328,7 +328,8 @@ class HomeController extends Controller
         if(in_array($game['id'], [219, 220])) {
             $game['relation_game_name'] = '麻雀飞青天';
         }
-
+        // dd($game);
+        
         $this->assign("serviceQQ", $serviceQQ);
         $this->assign('isNewIos', $isNewIos);
         $this->assign('downloadUrl', $downloadUrl);

Application/Home/View/default/Home/landingPage.html

@@ -13,6 +13,7 @@
   <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
   <script type="text/javascript" src="__JS__/getRem.js"></script>
   <script type="text/javascript" src="__JS__/swiper.min.js"></script>
+  <script type="text/javascript" src="__JS__/ladingpage.js"></script>
   <link rel="stylesheet" type="text/css" href="__CSS__/swiper.min.css">
   <link rel="stylesheet" type="text/css" href="__CSS__/reset.css">
   <link rel="stylesheet" type="text/css" href="__CSS__/index2.css">
@@ -38,6 +39,7 @@
 <input type="hidden" name="isNewIos" value="<?php if($isNewIos):?>1<?php else:?>0<?php endif;?>">
 <input type="hidden" name="betaUrl" value="{$game['beta_url']}">
 <input type="hidden" name="force" value="{$force}">
+<input type="hidden" id="gameInfo" data-downloadWays="{$game['download_ways']}">
 
 <?php if ($isWechat):?>
 <?php if ($isAndroid):?>
@@ -49,8 +51,6 @@
 
 
 <div class="home">
-
-
   <!--有落地页视频-->
   <?php if (!empty($game['flooring_page_video'])):?>
   <!--落地页视频置顶-->
@@ -140,7 +140,7 @@
       <div class="grade">网络游戏</div>
     </div>
     <div class="evaluate-box">
-      <span>16+</span>
+      <span>18+</span>
       <div class="grade">年龄</div>
     </div>
   </div>
@@ -305,33 +305,92 @@
   </div>
 </div>
 
-<div class="second" style="display: none;">
-  <div class="second-box">
-      <div class="carousel">
-          <div class="swiper-container">
-              <div class="swiper-wrapper">
-                  <div class="swiper-slide">
+<if condition="$game['download_ways'] eq 2"> 
+  <div class="second" style="display: none;">
+    <div class="second-box" style="height: 6.2rem;">
+        <div class="carousel">
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                        <div class="swiper-slide-box">
+                            <div class="slide-img">
+                                <img src="__IMG__/ladingpage/tf1.png" alt="" style=" height: 4.34rem;">
+                            </div>
+                            <div>一、点击跳转至“App Store”下载“TestFlight平台”</div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="swiper-slide-box">
+                            <div class="slide-img">
+                                <img src="__IMG__/ladingpage/tf2.png" alt="" style=" height: 4.34rem;">
+                            </div>
+                            <div>二、下载安装“TestFlight平台”并打开</div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
                       <div class="swiper-slide-box">
                           <div class="slide-img">
-                              <img src="__IMG__/20191225/1.png" alt="" style=" height: 4.34rem;">
+                              <img src="__IMG__/ladingpage/tf3.png" alt="" style=" height: 4.34rem;">
                           </div>
-                          <div>一、请先安装并打开testflight平台</div>
+                          <div>三、返回浏览器并点击去“TestFlight平台”下载游戏</div>
                       </div>
                   </div>
                   <div class="swiper-slide">
+                    <div class="swiper-slide-box">
+                        <div class="slide-img">
+                            <img src="__IMG__/ladingpage/tf4.png" alt="" style=" height: 4.34rem;">
+                        </div>
+                        <div>四、在“TestFlight平台”找到对应游戏，接受并安装。</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="swiper-pagination"></div>
+            </div>
+        </div>
+    </div>
+  </div>
+  <else /> 
+  <div class="second" style="display: none;">
+    <div class="second-box">
+        <div class="carousel">
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                        <div class="swiper-slide-box">
+                            <div class="slide-img">
+                                <img src="__IMG__/ladingpage/pd1.png" alt="" style=" height: 4.6rem;">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="swiper-slide-box">
+                            <div class="slide-img">
+                              <img src="__IMG__/ladingpage/pd2.png" alt="" style=" height:  4.6rem;">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
                       <div class="swiper-slide-box">
                           <div class="slide-img">
-                              <img src="__IMG__/20191225/2.png" alt="" style=" height: 4.34rem;">
+                            <img src="__IMG__/ladingpage/pd3.png" alt="" style=" height:  4.6rem;">
                           </div>
-                          <div>二、安装步骤窗口点击按钮，下载游戏</div>
                       </div>
-                  </div>
-              </div>
-              <div class="swiper-pagination"></div>
-          </div>
-      </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="swiper-slide-box">
+                            <div class="slide-img">
+                              <img src="__IMG__/ladingpage/pd4.png" alt="" style=" height:  4.6rem;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-pagination"></div>
+            </div>
+        </div>
+    </div>
   </div>
-</div>
+</if>
+
 
 <?php
 
@@ -340,9 +399,9 @@
 <input type="hidden" id="cur_url" name="cur_url" value="{$cur_url}">
 <input type="hidden" id="is_new_sdk" name="is_new_sdk" value="{$is_new_sdk}">
 <div class="safari" style="display: none;z-index: 1000">
-  <div class="safari-heard">
-    <div>请选择在“Safari”中打开</div>
-    <img src="__IMG__/arror.png" alt="">
+  <div class="safari-heard" style="display: block;position: relative;font-size: 0.32rem;">
+    <div style="line-height: 1.8;">请选择在IOS默认浏览器“Safari”中打开， <br/> 或复制链接至“Safari浏览器”。</div>
+    <img src="__IMG__/arror.png" alt="" style="position: absolute;top: -0.36rem;right: 0;">
   </div>
   <div class="safari-info">
     <img src="__IMG__/safari.png" alt="">
@@ -475,11 +534,11 @@
           
           <div class="register-forget" style="width: 4.6rem;">
               <div class="forgetbtn">
-                  <img src="img/forget.png" alt="">
+                  <img src="__IMG__/forget.png" alt="">
                   <span>忘记密码</span>
               </div>
               <div>
-                  <img src="img/kefu.png" alt="">
+                  <img src="__IMG__/kefu.png" alt="">
                   <span class="service_qq">联系客服</span>
               </div>
           </div>
@@ -515,7 +574,7 @@
         <div>
           <div>
             <div><span>*</span>未绑定手机用户请联系客服：</div>
-            <div style="margin-left: 0.1rem;">在线客服：3007567814</div>
+            <div style="margin-left: 0.1rem;">在线客服：{$serviceQQ}</div>
           </div>
         </div>
         <div>
@@ -610,25 +669,40 @@ justify-content: center;
 background:rgba(0,0,0,0.6); z-index: 999;display: none;"></div>
 
 <div class="mounting" style="display: none;">
-  <div class="mounting-box">
+  <div class="mounting-box" style="height: auto;padding-bottom: .5rem;">
     <div class="carousel">
       <div class="swiper-container">
         <div class="swiper-wrapper">
           <div class="swiper-slide">
             <div class="swiper-slide-box">
-              <div class="slide-img">
-                <img src="__IMG__/20191225/1.png" alt="" style=" height: 3.64rem;">
-              </div>
-              <div style="text-align: left;margin-left: 10px;">一、请先安装并打开testflight平台</div>
-              <div  onclick='$(".mounting").hide();$(".installPop").show();' style="font-size: xx-small;margin-left: 10px;">提示：<a id='install-btn' style="color: cornflowerblue;text-decoration: underline;">由于苹果进行区域限制问题，目前需要用户手动设置dns为114.114.114.114或8.8.8.8</a><img src="__IMG__/next_bg.png" style="width: 25px;margin-left: 8px;"></div>
+                    <div class="slide-img">
+                        <img src="__IMG__/ladingpage/tf1.png" alt="" style=" height: 4.34rem;">
+                    </div>
+                    <div>一、点击跳转至“App Store”下载“TestFlight平台”</div>
+                </div>
             </div>
+            <div class="swiper-slide">
+                <div class="swiper-slide-box">
+                    <div class="slide-img">
+                        <img src="__IMG__/ladingpage/tf2.png" alt="" style=" height: 4.34rem;">
+                    </div>
+                    <div>二、下载安装“TestFlight平台”并打开</div>
+                </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="swiper-slide-box">
+                  <div class="slide-img">
+                      <img src="__IMG__/ladingpage/tf3.png" alt="" style=" height: 4.34rem;">
+                  </div>
+                  <div>三、返回浏览器并点击去“TestFlight平台”下载游戏</div>
+              </div>
           </div>
           <div class="swiper-slide">
             <div class="swiper-slide-box">
-              <div class="slide-img">
-                <img src="__IMG__/20191225/2.png" alt="" style=" height: 4.34rem;">
-              </div>
-              <div style="text-align: left;margin-left: 10px;">二、安装步骤窗口点击按钮，下载游戏</div>
+                <div class="slide-img">
+                    <img src="__IMG__/ladingpage/tf4.png" alt="" style=" height: 4.34rem;">
+                </div>
+                <div>四、在“TestFlight平台”找到对应游戏，接受并安装。</div>
             </div>
           </div>
         </div>
@@ -643,7 +717,7 @@ background:rgba(0,0,0,0.6); z-index: 999;display: none;"></div>
 </div>
 
 <!-- TestFlight安装提示 -->
-<div class="register installPop" style="display: none;">
+<!-- <div class="register installPop" style="display: none;">
   <div class="register-box" style="height: auto;">
       <div class="register-heard">
           TestFlight安装提示
@@ -660,7 +734,9 @@ background:rgba(0,0,0,0.6); z-index: 999;display: none;"></div>
       </div>
      
   </div>
-</div>
+</div> -->
+
+
 
 </body>
 </html>
@@ -824,6 +900,7 @@ function getCurUserId() {
       $(".mode").hide();
       $(".giftSecond").hide()
       $(".giftStep").hide()
+      document.body.style.overflow = 'auto';
     })
     $(".commonCut").click(function(){
       $(".commonWindow").hide();
@@ -1235,6 +1312,9 @@ function getCurUserId() {
   }
 
   $(function(){
+    var isSafari = !is_tip_safari();
+    LADING.init({qq:'{$serviceQQ}',canTips:isSafari})
+    
     $('#go_confirm').click(function () {
       var isTipSafari = is_tip_safari();
       if (isTipSafari) {
@@ -1267,10 +1347,12 @@ function getCurUserId() {
       //   $('.bn-rule').css('z-index','12')
       //   return
       // }
+
       if ($('input[name=isNewIos]').val() == 0 && $('input[name=isIOS13]').val() == 1) {
         var iosDownUrl = "{:U('iosDown',array('gid'=>$apply['game_id'],'pid'=>$apply['promote_id'],'status'=>1))}";
         if (parseInt("{:I('get.status', 0)}") > 0) {
           location.href = iosDownUrl;
+          alert(2)
           return
         } else {
           layer.confirm('请先到官网注册', {title: '提示'}, function () {
@@ -1281,6 +1363,13 @@ function getCurUserId() {
           return
         }
       }
+      // var downWays = $("#gameInfo").data("downloadways");
+      // console.log(downWays)
+      // if(downWays == 1){
+        $(".second").show();
+        $('.mode').show();
+        swiperGet()
+      // }
 
       location.href = downLink
     });
@@ -1416,10 +1505,11 @@ function getCurUserId() {
         $('.safari').show(); 
         return;
       }
+      
       $(".second").show();
       $('.mode').show();
       swiperGet()
-      document.body.style.overflow = 'hidden';
+      // document.body.style.overflow = 'hidden';
     })
 
 

Application/Home/View/default/Home/landingPage2.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="background-color: #0a0a0a !important;">
 <head>
   <meta itemprop="name" content="{$game['relation_game_name']}"/>
   <meta itemprop="image" content="{$game['icon']}"/>
@@ -9,6 +9,7 @@
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
   <script type="text/javascript" src="__JS__/jquery-1.11.1.min.js"></script>
   <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
+  <script type="text/javascript" src="__JS__/getRem.js"></script>
   <link href="{:get_cover(C('CH_SET_ICO'),'path')}" type="image/x-icon" rel="shortcut icon">
   <title>{$game['relation_game_name']}</title>
   <link rel="stylesheet" href="__CSS__/20180207/promition.css">
@@ -18,13 +19,14 @@
   <script src="__STATIC__/vide7.4.1/js/video.min.js"></script>
   <link href="__STATIC__/vide7.4.1/css/video-js.min.css" rel="stylesheet">
   <script src="__STATIC__/bg4_4.js"></script>
+  <script type="text/javascript" src="__JS__/ladingpage.js"></script>
 </head>
-<body class="main_bg" style="background-color: #0a0a0a;height: auto;">
+<body class="main_bg" style="height: auto;max-width: 580px;margin: auto;background-color: #0a0a0a;">
 <style>
   .home-video {
     position: absolute;
     text-align: center;
-    top: 23.28%;
+    top:2rem;
     width: 100%;
   }
   .home-video .video-js {
@@ -37,6 +39,41 @@
       max-width:580px;
     }
   }
+  #img2{
+    position: relative;
+  }
+  .act img {
+      width: 100%;
+      transform-origin: center;
+      -webkit-transform-origin: center;
+      -webkit-animation-name: shack;
+      -webkit-animation-duration: 1000ms;
+      -webkit-animation-iteration-count: infinite;
+      /*无限循环*/
+      -webkit-animation-timing-function: linear;
+  }
+  @-webkit-keyframes shack {
+      0% {
+          transform: rotate(0deg);
+          -webkit-transform: rotate(0deg)
+      }
+      25% {
+          transform: rotate(20deg);
+          -webkit-transform: rotate(20deg)
+      }
+      50% {
+          transform: rotate(0deg);
+          -webkit-transform: rotate(0deg)
+      }
+      75% {
+          transform: rotate(-20deg);
+          -webkit-transform: rotate(-20deg)
+      }
+      100% {
+          transform: rotate(0deg);
+          -webkit-transform: rotate(0deg)
+      }
+  }
 </style>
 <input type="hidden" name="title" value="{$game['relation_game_name']}">
 <input type="hidden" name="icon" value="{$game['icon']}">
@@ -54,32 +91,79 @@
 
 <div class="h_wrap">
   <div id="data-2" style="position: relative;">
-    <?php if (!empty($game['flooring_page_video'])):?>
-    <div class="home-video">
-      <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264" poster="{$game['flooring_page_video_cover']}" data-setup='{}'>
-        <source src="{$game['flooring_page_video']}" type='video/mp4' />
-      </video>
-    </div>
-    <?php endif;?>
     <volist name="game['flooring_page_imgs']" id="item" key="k">
-      <div>
-        <?php if ($downloadUrl == 'https://'.$_SERVER['HTTP_HOST']) :?>
-        <a href="#" class="no-package"><img src="{$item}" style="width: 100%;"/></a>
-        <?php else :?>
-        <a href="javascript:;" class="down-link" down-link="{$downloadUrl}"><img src="{$item}" style="width: 100%;"/></a>
-        <?php endif ;?>
+      <?php if ($downloadUrl == 'https://'.$_SERVER['HTTP_HOST']) :?>
+      <div class="no-package" id="img{$k}">
+      <?php else :?>
+      <div class="down-link" id="img{$k}">
+      <?php endif ;?>
+        <img src="{$item}" style="width: 100%;"/>
+
+        <if condition="($k eq 2 ) AND (!empty($game['flooring_page_video']))">
+          <div class="home-video">
+            <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none"  poster="{$game['flooring_page_video_cover']}" data-setup='{}'>
+              <source src="{$game['flooring_page_video']}" type='video/mp4' />
+            </video>
+          </div>
+        </if>
+
       </div>
     </volist>
+
+    <a href="#img2" class="act" style="position: absolute;right: .2rem;top:9rem;width: 2rem;">
+      <img src="__IMG__/ladingpage/jump.png" alt="" style="width: 100%;">
+    </a>
   </div>
+
+  <div class="footBox down-link" style="height: 1.4rem;background: rgba(0,0,0,.7);position: fixed;bottom: 0;z-index: 99;display: flex;padding:.14rem 0;width: 100%;align-items: center;max-width: 580px;">
+    <div style="height: 1.2rem;width: 1.2rem;margin-left: .23rem;">
+      <img src="{$game['icon']}" alt="" style="width: 100%;">
+    </div>
+    <div style="color:#fff;margin:0 .17rem;flex-grow: 1;">
+      <div style="font-size: .32rem;font-weight: 600;line-height: 2;margin-top: -.16rem;">{$game['relation_game_name']}</div>
+      <div style="font-size: .26rem;line-height: 1;width: 3.3rem;white-space: nowrap;;overflow: hidden;text-overflow:ellipsis;">{$game['features']}</div>
+      <div style="font-size: .18rem;">已有315935次下载</div>
+    </div>
+
+    <div style="height: 0.88rem;width: 2.16rem;margin-right: .23rem;border-radius: .24rem;background-color: #E2C065;background: linear-gradient(184deg, #FDF1C7,#E2C065);text-align: center;line-height: 0.88rem;font-size: .4rem;font-weight: 500;">
+      立即下载
+    </div>
+  </div>
+
+  <div id="downTips" down-link="{$downloadUrl}" style="height: 4.8rem;background: #fff;position: fixed;bottom: 0;z-index: 10009;max-width: 580px;border-radius: 0.24rem 0.24rem 0px 0px;width: 100%;display: none;">
+    <div style="padding: .48rem;">
+      <div style="font-size: .4rem;font-weight: 600;line-height: 2;"> 
+        安装指引
+      </div>
+      <div style="font-size: .32rem;line-height:1.8;margin-top: .25rem;">
+        亲爱的用户，在安装游戏时，请选择 <br/>
+        <span style="color: red;font-weight: 600;">“继续安装”</span>即可
+      </div>
+      <div style="width: 100%;background-color: #4DEEAB;border-radius:.48rem;height: 1rem;margin-top: .56rem;font-size: .4rem;text-align: center;line-height: 1rem;color: #fff;font-weight: 400;">
+        我知道了
+      </div>
+    </div>
+  </div>
+
+
 </div>
 
 <script src="__STATIC__/layer/layer.js"></script>
 <script src="__STATIC__/ios9/js/layer/layer.js?VerNo=20190923" type="text/javascript"></script>
 <script type="text/javascript">
+  $(function(){
+    LADING.init({qq:'{$serviceQQ}'})
+  })
+
   var videoWidth = $('.video-js').width();
   $('.video-js').height(videoWidth * 0.562295082);
 
   $('.down-link').on('click', function () {
+    $('#downTips').show();
+  })
+
+  $('#downTips').on('click', function () {
+
     var dow_status = parseInt($('#dow_status').val());
     if (dow_status == 0) {
       layer.msg('该游戏已关闭下载');
@@ -103,6 +187,7 @@
       }
     }
     var downLink = $(this).attr('down-link')
+    $(this).hide();
     location.href = downLink
   });
 

Public/Home/js/ladingpage.js

@@ -0,0 +1,58 @@
+(function () {
+    var self  = LADING = {
+        config:{
+            imgpath:"/Public/Home/images/ladingpage/",
+            qq:'',
+            canTips:true
+        },
+        init : function(config){
+            self.config = Object.assign(self.config,config)
+            self.leftTipsShow();
+            if(self.config.canTips){
+                self.leftTipsEvent();
+            }
+        },
+        leftTipsShow:function(){
+            var leftTipsTmp = ''+
+            '<div style="position: fixed;bottom: 20%;margin-left: .1rem;line-height: 0;z-index: 99;">'+
+                '<div class="agewind" style="width: 1rem;height: auto;">'+
+                    '<img src="'+self.config.imgpath+'18.png" alt="" style="width:100%;">'+
+                '</div>'+
+                '<div class="servewind" style="width: 1rem;height: auto;">'+
+                    '<img src="'+self.config.imgpath+'serve.png" alt="" style="width:100%;">'+
+                '</div>'+
+            '</div>';
+            var ageTipsTmp= '<div class="ageTipsMb" style="display:none;">'+
+                '<div style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background:rgba(0,0,0,0.6); z-index: 999;">'+
+                    '<div style="width: 5.24rem;height: auto;padding: .2rem;"> '+
+                        '<div style="width: 100%;height: .72rem;background-color: #2687FF;border-radius: .16rem .16rem 0 0;display: flex;justify-content:flex-end;align-items: center;">'+
+                            '<img class="colseAgeTip" src="'+self.config.imgpath+'close.png" style="width: .26rem;margin-right:.2rem">'+
+                        '</div>'+
+                        '<div style="height: auto;padding: .1rem .23rem .33rem;background-color: #fff;border-radius:0 0 .16rem .16rem;">'+
+                            '<div style="font-size: .28rem;color: #343434;">本平台网络游戏适合18周岁以上用户使用，本平台网络游戏用户实名认证系统符合国家防沉迷实名认证要求，规则说明如下:</div>'+
+                            '<div style="font-size: .22rem;color: #343434;margin-top: .23rem;">1、新用户注册必须强制实名认证且满18周岁；<br/>2、未经实名注册的用户，将无法进入游戏；<br/>3、已实名认证且满18周岁的用户可正常游戏。</div>'+
+                        '</div>'+
+                    '</div>'+
+                '</div>'+
+                '</div>';
+
+            $("body").append(leftTipsTmp);
+            $("body").append(ageTipsTmp);
+        },
+        leftTipsEvent:function(){
+            $(".servewind").on("click",function(){
+                window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin='+self.config.qq+'&version=1&src_type=web&web_src=oicqzone.com';
+            })
+            $(".agewind").on("click",function(){
+                $(".ageTipsMb").show();
+            })
+            $(".ageTipsMb").on("click",function(){
+                $(".ageTipsMb").hide();
+            })
+            $(".colseAgeTip").on("click",function(){
+                $(".ageTipsMb").hide();
+            })
+        }
+    };
+    window.LADING = LADING || {};
+})()