完善充值引导弹窗

view/peko/modules/pay/css/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @import url("../../../common/css/flex.scss");
 body {
   width: 100%;
@@ -810,17 +811,19 @@ body {
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   z-index: 9;
+  display: none;
 }
 
 .selectAddress .selectAddress_in {
   width: 8.50667rem;
-  height: 6.50667rem;
+  height: 5.33333rem;
   background: #fff;
   border-radius: 0.53333rem;
   position: relative;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  /*清除iIE的默认选择框样式*/
 }
 
 .selectAddress .selectAddress_in .title {
@@ -833,3 +836,121 @@ body {
   font-size: 0.42667rem;
   font-weight: 600;
 }
+
+.selectAddress .selectAddress_in .selectAddressList {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  width: 7.01333rem;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  background: #F5F6FA;
+  border-radius: 1.33333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.97333rem;
+  border: none;
+  box-sizing: border-box;
+  color: #1F1B4F;
+  font-size: 0.42667rem;
+  font-weight: 400;
+  padding: 0 0.64rem;
+}
+
+.selectAddress .selectAddress_in .selectAddressList img {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0.53333rem;
+  width: 0.4rem;
+  height: 0.26667rem;
+}
+
+.selectAddress .selectAddress_in .selectAddressList option::-ms-expand {
+  display: none;
+}
+
+.selectAddress .selectAddress_in .selectAddressList option {
+  padding: 0;
+  margin: 0;
+  float: left;
+  /*当时解决输入框光标顶满input框的问题是这么解决的 如果设置了行高就会顶满没有行高的话光标高度=文字的font-size */
+  border: none;
+  outline: none;
+  padding-left: 20px;
+  color: #6d6d6d;
+  -webkit-appearance: none;
+  /*去除系统默认的样式*/
+  -webkit-tap-highlight-color: transparent;
+  /* 点击去除高亮的颜色*/
+  /*当input框禁止输入的时候会有一个灰色的底色 项目需要我设置了 白色底 跟页面背景一个颜色。*/
+}
+
+.selectAddress .selectAddress_in select::-ms-expand {
+  display: none;
+}
+
+.selectAddress .selectAddress_in .but {
+  width: 5.94667rem;
+  height: 1.12rem;
+  line-height: 1.12rem;
+  border-radius: 1.14667rem;
+  position: absolute;
+  top: 3.84rem;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.42667rem;
+  background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
+}
+
+.selectAddress .selectAddress_in .list_in {
+  width: 7.01333rem;
+  height: 0;
+  box-sizing: border-box;
+  padding: 0rem;
+  background: #F5F6FA;
+  border-radius: 0.42667rem;
+  position: absolute;
+  top: 3.52rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  overflow-y: scroll;
+  transition: all .3s;
+}
+
+.selectAddress .selectAddress_in .list_in::-webkit-scrollbar {
+  display: none;
+}
+
+.selectAddress .selectAddress_in .list_in p {
+  width: 100%;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  border-bottom: 0.01333rem dashed #cbbbbb;
+  color: #1F1B4F;
+  font-size: 0.37333rem;
+  box-sizing: border-box;
+}
+
+.guidd {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9;
+  display: none;
+}
+
+.guidd img {
+  position: absolute;
+  top: 0.13333rem;
+  right: 0.26667rem;
+  width: 6.34667rem;
+  height: 3.92rem;
+}

view/peko/modules/pay/css/index.scss

@@ -823,10 +823,11 @@ body {
     bottom: 0;
     background: rgba(0, 0, 0, .6);
     z-index: 9;
+    display: none;
 
     .selectAddress_in {
         width: px2rem(638);
-        height: px2rem(488);
+        height: px2rem(400);
         background: #fff;
         border-radius: px2rem(40);
         position: relative;
@@ -844,5 +845,129 @@ body {
             font-size: px2rem(32);
             font-weight: 600;
         }
+
+        .selectAddressList {
+            appearance: none;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+            position: absolute;
+            width: px2rem(526);
+            height: px2rem(100);
+            line-height: px2rem(100);
+            background: #F5F6FA;
+            border-radius: px2rem(100);
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(148);
+            border: none;
+            box-sizing: border-box;
+            color: #1F1B4F;
+            font-size: px2rem(32);
+            font-weight: 400;
+            padding: 0 px2rem(48);
+
+            img {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: px2rem(40);
+                width: px2rem(30);
+                height: px2rem(20);
+            }
+
+            option::-ms-expand {
+                display: none;
+            }
+
+            option {
+                padding: 0;
+                margin: 0;
+                float: left;
+                /*当时解决输入框光标顶满input框的问题是这么解决的 如果设置了行高就会顶满没有行高的话光标高度=文字的font-size */
+                border: none;
+                outline: none;
+                padding-left: 20px;
+                color: #6d6d6d;
+                -webkit-appearance: none;
+                /*去除系统默认的样式*/
+                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+                /* 点击去除高亮的颜色*/
+                /*当input框禁止输入的时候会有一个灰色的底色 项目需要我设置了 白色底 跟页面背景一个颜色。*/
+            }
+
+        }
+
+        /*清除iIE的默认选择框样式*/
+        select::-ms-expand {
+            display: none;
+        }
+
+        .but {
+            width: px2rem(446);
+            height: px2rem(84);
+            line-height: px2rem(84);
+            border-radius: px2rem(86);
+            position: absolute;
+            top: px2rem(288);
+            left: 50%;
+            transform: translateX(-50%);
+            text-align: center;
+            color: #FFFFFF;
+            font-size: px2rem(32);
+            background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%);
+        }
+
+        .list_in {
+            width: px2rem(526);
+            height: 0;
+            // height: auto;
+            box-sizing: border-box;
+            padding: px2rem(0);
+            // padding: 0.2rem 0.53333rem;
+            background: #F5F6FA;
+            border-radius: px2rem(32);
+            position: absolute;
+            top: px2rem(264);
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 1;
+            overflow-y: scroll;
+            transition: all .3s;
+            // display: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            p {
+                width: 100%;
+                height: px2rem(100);
+                line-height: px2rem(100);
+                border-bottom: px2rem(1) dashed #cbbbbb;
+                color: #1F1B4F;
+                font-size: px2rem(28);
+                box-sizing: border-box;
+            }
+        }
+    }
+
+}
+
+.guidd {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .6);
+    z-index: 9;
+    display: none;
+
+    img {
+        position: absolute;
+        top: px2rem(10);
+        right: px2rem(20);
+        width: px2rem(476);
+        height: px2rem(294);
     }
 }

view/peko/modules/pay/index.html

@@ -144,12 +144,22 @@
     <div class="selectAddress">
         <div class="selectAddress_in">
             <div class="title">請確認儲值地區</div>
-            <select  class="selectAddressList">
-                <option value="TW">台湾</option>
-                <option value="XJP">新加坡</option>
-            </select>
+            <div class="selectAddressList">
+                <img src="./images/more_icon.png" alt="">
+            </div>
+            <div class="list_in">
+                <p>台湾</p>
+                <p>台湾</p>
+                <p>台湾</p>
+                <p>台湾</p>
+            </div>
+            <div class="but">確認</div>
         </div>
     </div>
+    <!-- 引导图 -->
+    <div class="guidd">
+        <img src="./images/guide.png" alt="">
+    </div>
 </body>
 
 </html>

view/peko/modules/pay/js/index.js

@@ -57,6 +57,7 @@ $(function () {
 // 请求地区列表
 function getArea () {
     $('.area .area_in p').remove();
+    $('.selectAddress .selectAddress_in .list_in p').remove();
     showLoading();
     networkRequest({
         type: 'GET',
@@ -72,7 +73,9 @@ function getArea () {
                     isRecommendArr[i] = res.isRecommend;
                 });
                 $('.area .area_in').append(str);
+                $('.selectAddress .selectAddress_in .list_in').append(str);
                 $('.header .box .right i').text(res.data[0].areaName);
+                $('.selectAddress .selectAddress_in .selectAddressList').html(`${res.data[0].areaName}<img src="./images/more_icon.png" alt="">`);
                 if (countryCode == '') {
                     countryCode = res.data[0].areaCode;
                 }
@@ -82,6 +85,13 @@ function getArea () {
                     $('.tabs i').hide();
                 }
                 getChargePageInfoForH5();
+
+                if (window.localStorage.getItem('first')) {
+                    $('.selectAddress').hide();
+                } else {
+                    $('.selectAddress').show();
+                    bodyScroolFun(true);
+                }
             } else {
                 hideLoading(layerIndex);
                 toastMsg(res.message);
@@ -93,6 +103,39 @@ function getArea () {
         }
     });
 }
+// 调起选择下拉
+$('.selectAddress .selectAddress_in .selectAddressList').click(function () {
+    $('.selectAddress .selectAddress_in .list_in').css({ height: '6rem', 'padding': '0.2rem 0.53333rem' });
+    return false
+})
+// 首次切换地区
+$('.selectAddress .selectAddress_in .list_in').on('click', 'p', function () {
+    countryCode = $(this).attr('areacode');
+    var texts = $(this).text();
+    $('.header .box .right i').text(texts);
+    $('.selectAddress .selectAddress_in .selectAddressList').html(`${texts}<img src="./images/more_icon.png" alt="">`);
+    $('.selectAddress .selectAddress_in .list_in').css({ height: '0', 'padding': '0' });
+    return false;
+})
+// 关闭切换地区
+$('.selectAddress').click(function () {
+    window.localStorage.setItem('first', 1);
+    $('.selectAddress').hide();
+    $('.selectAddress .selectAddress_in .list_in').css({ height: '0', 'padding': '0' });
+    $('.guidd').show();
+})
+// 首次确认地区
+$('.selectAddress .selectAddress_in .but').click(function () {
+    window.localStorage.setItem('first', 1);
+    getChargePageInfoForH5();
+    $('.selectAddress').hide();
+    $('.guidd').show();
+})
+// 关闭引导图
+$('.guidd').click(function () {
+    $('.guidd').hide();
+    bodyScroolFun(false);
+})
 // 渲染档位列表
 function getChargePageInfoForH5 () {
     showLoading();
@@ -335,7 +378,6 @@ $('.userNull .userNull_in .but').click(function () {
     bodyScroolFun(false);
     $('.userNull').hide();
 })
-
 // 代充列表接口
 function rechargeUserList (regionCode) {
     showLoading();