Halaman utama Jelajahi Bantuan
Masuk
qmx
/
jy
14
0
Fork 0
Berkas Masalah 2 Permintaan Tarik 0 Wiki
Jelajahi Sumber

feat: 移动端新增人脉落地页

cuiyalong 9 bulan lalu
induk
28acd8f611
melakukan
16382a9146
12 mengubah file dengan 365 tambahan dan 5 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 101 0
      src/jfw/modules/app/src/web/templates/frontRouter/declaration/free/relationship.html
  2. 108 0
      src/web/staticres/common-module/bidedoc/css/relationship.css
  3. TEMPAT SAMPAH
      src/web/staticres/common-module/bidedoc/image/relationship/banner-1@2x.png
  4. TEMPAT SAMPAH
      src/web/staticres/common-module/bidedoc/image/relationship/banner-2@2x.png
  5. TEMPAT SAMPAH
      src/web/staticres/common-module/bidedoc/image/relationship/banner-3@2x.png
  6. TEMPAT SAMPAH
      src/web/staticres/common-module/bidedoc/image/relationship/banner-4@2x.png
  7. TEMPAT SAMPAH
      src/web/staticres/common-module/bidedoc/image/relationship/banner-5@2x.png
  8. TEMPAT SAMPAH
      src/web/staticres/common-module/bidedoc/image/relationship/bottom-banner-mask@2x.png
  9. 60 0
      src/web/staticres/common-module/bidedoc/js/relationship.js
  10. 18 4
      src/web/staticres/common-module/perfect-info/js/perfect-info.js
  11. 7 1
      src/web/templates/frontRouter/pc/declaration/free/relationship.html
  12. 71 0
      src/web/templates/frontRouter/wx/declaration/free/relationship.html

+ 101 - 0
src/jfw/modules/app/src/web/templates/frontRouter/declaration/free/relationship.html
Tampilan Berkas 

@@ -0,0 +1,101 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" style="font-size: 50px;">
 
+
 
+<head>
 
+    <title>人脉管理</title>
 
+    {{include "/big-member/meta.html"}}
 
+
 
+    <!--S-当前页面的css资源-->
 
+    <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css />
 
+    <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css />
 
+    <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/icon/local.css />
 
+    <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/assets/iconfont/mobile/22.7.2/iconfont.css />
 
+    <link rel="stylesheet" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/bidedoc/css/relationship.css?v={{Msg "seo" "version"}}' />
 
+    <!--E-当前页面的css资源-->
 
+    <style>
 
+        .j-container.app > .j-main {
 
+            margin-top: -10.6vw;
 
+        }
 
+        @font-face {
 
+            font-family:"YouSheBiaoTiHei";
 
+            font-display: swap;
 
+            src:url('/jyapp/fonts/YouSheBiaoTiHei-2.ttf');
 
+        }
 
+        .jy-app-header .header-right {
 
+            font-size: .46rem;
 
+        }
 
+        .fixed-top {
 
+            top: 1.72rem;
 
+        }
 
+    </style>
 
+    <script>
 
+        try {
 
+            window.JyObj.hiddenBottom('0')
 
+        } catch (e) {
 
+            console.log('error: app not function')
 
+        }
 
+    </script>
 
+</head>
 
+
 
+<body>
 
+    <div class="j-container app">
 
+        {{include "/big-member/header.html"}}
 
+        <div class="j-main" id="main-app" v-cloak>
 
+            <div class="content-banner">
 
+                <img class="img-content" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/bidedoc/image/relationship/banner-1@2x.png" alt="">
 
+            </div>
 
+            <div class="content-banner">
 
+                <img class="img-content" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/bidedoc/image/relationship/banner-2@2x.png" alt="">
 
+            </div>
 
+            <div class="content-banner">
 
+                <img class="img-content" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/bidedoc/image/relationship/banner-3@2x.png" alt="">
 
+            </div>
 
+            <div class="content-banner">
 
+                <img class="img-content" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/bidedoc/image/relationship/banner-4@2x.png" alt="">
 
+            </div>
 
+            <div class="content-banner compare-section">
 
+                <img class="img-content" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/bidedoc/image/relationship/banner-5@2x.png" alt="">
 
+            </div>
 
+            <section class="ent-list-section" v-if="swipeList.length > 0">
 
+                <van-swipe style="height: 5.46rem;" vertical loop lazy-render :autoplay="4000" :show-indicators="false">
 
+                    <van-swipe-item v-for="(row, index) in swipeList" :key="index" class="ent-list-per-container">
 
+                        <div class="ent-list-item" v-for="(item, iindex) in row" :key="iindex">
 
+                            <span class="highlight-text ellipsis">${ item }</span>
 
+                            已经尝试使用
 
+                        </div>
 
+                    </van-swipe-item>
 
+                </van-swipe>
 
+            </section>
 
+            <div class="placeholder-bottom"></div>
 
+            <div class="fixed-bottom intro-leave-banner">
 
+                <div class="text-container">
 
+                    <p class="intro-text">剑鱼可帮助您快速达成业绩倍增</p>
 
+                    <button class="intro-button button-blink" @click="applyToTrial">申请免费试用</button>
 
+                </div>
 
+                <div class="img-container">
 
+                    <img src="{{Msg "seo" "cdn"}}/common-module/bidedoc/image/relationship/bottom-banner-mask@2x.png?v={{Msg "seo" "version"}}" alt="" class="img-content">
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js> </script>
 
+    <script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js> </script>
 
+    <script src=//cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js> </script>
 
+    <script src=//cdn-common.jianyu360.com/cdn/lib/lodash/4.17.21/lodash.min.js></script>
 
+    {{include "/big-member/commonjs.html"}}
 
+    <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/common.js?v={{Msg "seo" "version"}}'></script>
 
+    <script>
 
+        $(function () {
 
+            var header = $('.j-header.jy-app-header')
 
+            header.addClass('transparent-header')
 
+                .find('.header-right')
 
+                .addClass('iconfont')
 
+                .addClass('icon-mine_share')
 
+        })
 
+    </script>
 
+    <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/bidedoc/js/relationship.js?v={{Msg "seo" "version"}}'></script>
 
+    {{include "/common/baiducc.html"}}
 
+</body>
 
+
 
+</html>

+ 108 - 0
src/web/staticres/common-module/bidedoc/css/relationship.css
Tampilan Berkas 

@@ -0,0 +1,108 @@
 
+#main-app {
 
+    background-color: #fff;
 
+}
 
+
 
+.button-blink {
 
+    position: relative;
 
+    overflow: hidden;
 
+    cursor: pointer;
 
+}
 
+.button-blink::after {
 
+    content: '';
 
+    display: block;
 
+    position: absolute;
 
+    top: -120px;
 
+    left: -80px;
 
+    width: 36px;
 
+    height: 360px;
 
+    background: #fff;
 
+    opacity: 0.16;
 
+    transform: rotate(-45deg);
 
+    transition: all 800ms ease-out;
 
+}
 
+.button-blink:hover::after {
 
+    left: 200%;
 
+}
 
+
 
+.img-content {
 
+    display: block;
 
+    width: 100%;
 
+    user-select: none;
 
+    -webkit-user-drag: none
 
+}
 
+.compare-section {
 
+    padding: 0.56rem .22rem;
 
+}
 
+.ent-list-section {
 
+    padding: .44rem .3rem;
 
+    padding-bottom: .72rem;
 
+    background: linear-gradient(180deg, #F5F7F8 0%, #FFFFFF 100%);
 
+}
 
+
 
+.ent-list-item {
 
+    display: inline-flex;
 
+    align-items: center;
 
+    margin: .14rem 0;
 
+    height: .62rem;
 
+    padding: .16rem .28rem;
 
+    font-size: .28rem;
 
+    line-height: .3rem;
 
+    border-radius: .3rem;
 
+    background: linear-gradient(90deg, #FFFFFF 0%, #E5F8FF 100%);
 
+    border: 1px solid #2ABED1;
 
+}
 
+.ent-list-per-container {
 
+    text-align: center;
 
+}
 
+.ent-list-item .ellipsis {
 
+    display: inline-block;
 
+    max-width: 3.3rem;
 
+}
 
+.placeholder-bottom {
 
+    height: 1.32rem;
 
+    background-color: #fff;
 
+    flex-shrink: 0;
 
+}
 
+
 
+
 
+
 
+.fixed-bottom {
 
+    position: fixed;
 
+    bottom: 0;
 
+    left: 0;
 
+}
 
+.intro-leave-banner {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    width: 100%;
 
+    height: 1.32rem;
 
+    background: #E5F3FF;
 
+
 
+}
 
+.intro-leave-banner .img-container {
 
+    position: absolute;
 
+    bottom: 0;
 
+    right: 0;
 
+    width: 3rem;
 
+    height: 1.56rem;
 
+}
 
+
 
+.intro-leave-banner .text-container {
 
+    margin-left: .64rem;
 
+}
 
+.intro-leave-banner .intro-text {
 
+    font-size: .28rem;
 
+    line-height: .36rem;
 
+    color: #0063E5;
 
+}
 
+.intro-leave-banner .intro-button {
 
+    margin-top: 0.06rem;
 
+    padding: .08rem .3rem;
 
+    font-size: .3rem;
 
+    line-height: .42rem;
 
+    color: #fff;
 
+    border-radius: 6px;
 
+    background: linear-gradient(270deg, #1FD2EA 0%, #0355D1 100%);
 
+
 
+}

TEMPAT SAMPAH
src/web/staticres/common-module/bidedoc/image/relationship/banner-1@2x.png
Tampilan Berkas


TEMPAT SAMPAH
src/web/staticres/common-module/bidedoc/image/relationship/banner-2@2x.png
Tampilan Berkas


TEMPAT SAMPAH
src/web/staticres/common-module/bidedoc/image/relationship/banner-3@2x.png
Tampilan Berkas


TEMPAT SAMPAH
src/web/staticres/common-module/bidedoc/image/relationship/banner-4@2x.png
Tampilan Berkas


TEMPAT SAMPAH
src/web/staticres/common-module/bidedoc/image/relationship/banner-5@2x.png
Tampilan Berkas


TEMPAT SAMPAH
src/web/staticres/common-module/bidedoc/image/relationship/bottom-banner-mask@2x.png
Tampilan Berkas


+ 60 - 0
src/web/staticres/common-module/bidedoc/js/relationship.js
Tampilan Berkas 

@@ -0,0 +1,60 @@
 
+var page = new Vue({
 
+  el: '#main-app',
 
+  delimiters: ['${', '}'],
 
+  data: {
 
+    platform: utils.$env.platform,
 
+    swipeList: [], // 二维数组
 
+  },
 
+  computed: {},
 
+  created: function () {
 
+    this.getEntList()
 
+  },
 
+  mounted: function () {
 
+    this.headerTransparent()
 
+  },
 
+  methods: {
 
+    getEntList: function () {
 
+      var _this = this
 
+      $.ajax({
 
+        type:'GET',
 
+        url:'/jyapi/networkManage/getEntNameList',
 
+        success:function(res) {
 
+            if (res && Array.isArray(res.data) && res.data.length > 0) {
 
+              _this.renderEntList(res.data)
 
+            }
 
+        },
 
+      })
 
+    },
 
+    renderEntList: function(list) {
 
+      // 先将数组6个为一组分割
 
+      var chunkedArr = _.chunk(list, 6)
 
+      this.swipeList = chunkedArr
 
+    },
 
+    headerTransparent: function () {
 
+      if (utils.isWeiXinBrowser) return
 
+      $('#main-app').on('scroll', function () {
 
+        var headerDOM = $('.j-header.jy-app-header')
 
+        var scrollTop = this.scrollTop
 
+
 
+        // 是否有header-transparent这个类名
 
+        var hasClassT = headerDOM.hasClass('transparent-header')
 
+
 
+        if (scrollTop >= 75) {
 
+          if (!hasClassT) return
 
+          headerDOM.removeClass('transparent-header')
 
+        }else {
 
+          if (hasClassT) return
 
+          headerDOM.addClass('transparent-header')
 
+        }
 
+      })
 
+    },
 
+    applyToTrial: function () {
 
+      var source = this.platform + '_connections_landingpage'
 
+      if (utils.isWeiXinBrowser) {
 
+        location.href = '/weixin/frontPage/bigmember/free/perfect_info?source=' + source
 
+      } else {
 
+        location.href = '/jyapp/frontPage/bigmember/free/perfect_info?source=' + source
 
+      }
 
+    },
 
+  }
 
+})

+ 18 - 4
src/web/staticres/common-module/perfect-info/js/perfect-info.js
Tampilan Berkas 

@@ -185,8 +185,12 @@ var titleMap = {
 
   // 会员服务列表

   wx_ServiceList_experience:'申请免费体验剑鱼产品',

   app_ServiceList_experience:'申请免费体验剑鱼产品',

-  h5_ServiceList_experience:'申请免费体验剑鱼产品'

-  

+  h5_ServiceList_experience:'申请免费体验剑鱼产品',

+

+  // 人脉落地页

+  wx_connections_landingpage: '业绩倍增体验',

+  app_connections_landingpage: '业绩倍增体验',

+  h5_connections_landingpage: '业绩倍增体验',

 }

 

 // tip

@@ -414,7 +418,12 @@ var tipMap = {
 
       // 会员服务列表

   wx_ServiceList_experience:'请留下您的信息，我们将为您推荐最符合您业务需求的产品和服务！',

   app_ServiceList_experience:'请留下您的信息，我们将为您推荐最符合您业务需求的产品和服务！',

-  h5_ServiceList_experience:'请留下您的信息，我们将为您推荐最符合您业务需求的产品和服务！'

+  h5_ServiceList_experience:'请留下您的信息，我们将为您推荐最符合您业务需求的产品和服务！',

+

+  // 人脉落地页

+  wx_connections_landingpage: '请留下您的体验企业信息，我们会尽快协调人员给您做体验对接！',

+  app_connections_landingpage: '请留下您的体验企业信息，我们会尽快协调人员给您做体验对接！',

+  h5_connections_landingpage: '请留下您的体验企业信息，我们会尽快协调人员给您做体验对接！',

 }

 

 // 留资来源（数据库新增字段，记录留资对应的来源，之前未记录的不考虑，新增的source要记录）

@@ -547,7 +556,12 @@ var sourceDescMap = {
 
     // 会员服务列表

   wx_ServiceList_experience:'服务列表-申请免费体验',

   app_ServiceList_experience:'服务列表-申请免费体验',

-  h5_ServiceList_experience:'服务列表-申请免费体验'

+  h5_ServiceList_experience:'服务列表-申请免费体验',

+

+  // 人脉落地页

+  wx_connections_landingpage: '人脉落地页',

+  app_connections_landingpage: '人脉落地页',

+  h5_connections_landingpage: '人脉落地页',

 }

 

 var vNode = {

+ 7 - 1
src/web/templates/frontRouter/pc/declaration/free/relationship.html
Tampilan Berkas 

@@ -123,17 +123,23 @@ var __pageActions = {
 
         $('#inset-swiper-content').html(html)
 
         this.initSwiper()
 
     },
 
+    hideSwiper: function() {
 
+        $('.swiper-section').hide()
 
+    },
 
     getEntList: function() {
 
         var _this = this
 
         $.ajax({
 
             type:'GET',
 
             url:'/jyapi/networkManage/getEntNameList',
 
             success:function(res) {
 
-                if (res && Array.isArray(res.data)) {
 
+                if (res && Array.isArray(res.data) && res.data.length > 0) {
 
                     _this.renderEntList(res.data)
 
+                } else {
 
+                    _this.hideSwiper()
 
                 }
 
             },
 
             error:function(err) {
 
+                _this.hideSwiper()
 
             }
 
         })
 
     },

+ 71 - 0
src/web/templates/frontRouter/wx/declaration/free/relationship.html
Tampilan Berkas 

@@ -0,0 +1,71 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <title>人脉管理</title>
 
+
 
+    {{include "/big-member/wx/meta.html"}}
 
+
 
+    <!--S-当前页面的css资源-->
 
+    <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css />
 
+    <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css />
 
+    <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/icon/local.css />
 
+    <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/common-module/bidedoc/css/relationship.css?v={{Msg "seo" "version"}}' />
 
+    <script src='{{Msg "seo" "cdn"}}/big-member/js/rem.js?v={{Msg "seo" "version"}}'></script>
 
+    <style>
 
+        .header-banner {
 
+            /* margin-top: -0.6rem; */
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="j-container wx">
 
+        <div class="j-main" id="main-app" v-cloak>
 
+            <div class="content-banner">
 
+                <img class="img-content" src="{{Msg "seo" "cdn"}}/common-module/bidedoc/image/relationship/banner-1@2x.png" alt="">
 
+            </div>
 
+            <div class="content-banner">
 
+                <img class="img-content" src="{{Msg "seo" "cdn"}}/common-module/bidedoc/image/relationship/banner-2@2x.png" alt="">
 
+            </div>
 
+            <div class="content-banner">
 
+                <img class="img-content" src="{{Msg "seo" "cdn"}}/common-module/bidedoc/image/relationship/banner-3@2x.png" alt="">
 
+            </div>
 
+            <div class="content-banner">
 
+                <img class="img-content" src="{{Msg "seo" "cdn"}}/common-module/bidedoc/image/relationship/banner-4@2x.png" alt="">
 
+            </div>
 
+            <div class="content-banner compare-section">
 
+                <img class="img-content" src="{{Msg "seo" "cdn"}}/common-module/bidedoc/image/relationship/banner-5@2x.png" alt="">
 
+            </div>
 
+            <section class="ent-list-section" v-if="swipeList.length > 0">
 
+                <van-swipe style="height: 5.46rem;" vertical loop lazy-render :autoplay="4000" :show-indicators="false">
 
+                    <van-swipe-item v-for="(row, index) in swipeList" :key="index" class="ent-list-per-container">
 
+                        <div class="ent-list-item" v-for="(item, iindex) in row" :key="iindex">
 
+                            <span class="highlight-text ellipsis">${ item }</span>
 
+                            已经尝试使用
 
+                        </div>
 
+                    </van-swipe-item>
 
+                </van-swipe>
 
+            </section>
 
+            <div class="placeholder-bottom"></div>
 
+            <div class="fixed-bottom intro-leave-banner">
 
+                <div class="text-container">
 
+                    <p class="intro-text">剑鱼可帮助您快速达成业绩倍增</p>
 
+                    <button class="intro-button button-blink" @click="applyToTrial">申请免费试用</button>
 
+                </div>
 
+                <div class="img-container">
 
+                    <img src="{{Msg "seo" "cdn"}}/common-module/bidedoc/image/relationship/bottom-banner-mask@2x.png?v={{Msg "seo" "version"}}" alt="" class="img-content">
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js> </script>
 
+    <script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js> </script>
 
+    <script src=//cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js> </script>
 
+    <script src=//cdn-common.jianyu360.com/cdn/lib/lodash/4.17.21/lodash.min.js></script>
 
+    {{include "/big-member/wx/commonjs.html"}}
 
+    <script src='{{Msg "seo" "cdn"}}/common-module/bidedoc/js/relationship.js?v={{Msg "seo" "version"}}'></script>
 
+</body>
 
+
 
+</html>