Startseite Erkunden Hilfe
Registrieren Anmelden
Rorschach
/
efunbox-xxt-byuy-web
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

'1'

Rorschach vor 4 Jahren
Ursprung
f7bb87e878
Commit
fa4b3f8416
9 geänderte Dateien mit 199 neuen und 214 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 1 1
      src/about.html
  2. 19 1
      src/about.js
  3. 18 0
      src/helper/utils.js
  4. BIN
      src/img/mobile.png
  5. BIN
      src/img/sign.png
  6. 26 44
      src/index.html
  7. 7 37
      src/index.js
  8. 127 130
      src/index.less
  9. 1 1
      webpack.config.js

+ 1 - 1
src/about.html
Datei anzeigen 

@@ -19,7 +19,7 @@
 
     <div class="buy_btn">
 
         <div class="left">
 
             <span class="top">活动剩余时间</span>
 
-            <span class="bottom">00:00:00</span>
 
+            <span id="timer" class="bottom">00:00:00</span>
 
         </div>
 
         <div class="right" id="buy">立即支付</div>
 
     </div>

+ 19 - 1
src/about.js
Datei anzeigen 

@@ -4,6 +4,18 @@ import Utils from './helper/utils';
 
 const channel = Utils.GetQueryString('channel');
 
 const uid = Utils.GetQueryString('uid');
 
 
+// 
+
 
+
 
+const timer = (endTime) => {
 
+    setTimeout(() => {
 
+        let curTime = new Date().getTime();
 
+        let coutDown = Utils.setTimeAgo(endTime, curTime);
 
+        document.getElementById('timer').innerHTML = coutDown;
 
+        timer(endTime);
 
+    }, 1000)
 
+
 
+}
 
 
 const getProduct = (orderId) => {
 
     // 获取商品还有时间
 
@@ -16,7 +28,13 @@ const getProduct = (orderId) => {
 
         },
 
         type: "GET",
 
         success: function (res) {
 
-            console.log(res)
 
+            let endTime = res.data.endTime;
 
+            let curTime = new Date().getTime();
 
+            if (endTime - curTime < 0) {
 
+                document.getElementById('buy').className += ' none';
 
+            } else {
 
+                timer(endTime);
 
+            }
 
         }
 
     });
 
 }

+ 18 - 0
src/helper/utils.js
Datei anzeigen 

@@ -5,8 +5,26 @@ export default class Utils {
 
         if (r != null) return unescape(r[2]);
 
         return null;
 
     }
 
+
 
+    static addZero(num) {
 
+        return num < 10 ? '0' + num : num;
 
+    }
 
+    static setTimeAgo(time, curTime) {
 
+        const endTime = time / 1000;
 
+        const timeNow = curTime / 1000;
 
+
 
+        let d = endTime - timeNow;
 
+        let d_days = this.addZero(parseInt(d / 86400));
 
+        let d_hours = this.addZero(parseInt(d / 3600 % 24));
 
+        let d_minutes = this.addZero(parseInt(d / 60 % 60));
 
+        let d_seconds = this.addZero(parseInt(d % 60));
 
+
 
+        return d_hours + ':' + d_minutes + ':' + d_seconds;
 
+    }
 
+
 
 }
 
 
+
 
 // a = {
 
 //     "body": "义方快乐学堂12个月VIP会员",
 
 //     "out_trade_no": "497b828ec0cc448fb7ce03650d3930d9",

BIN
src/img/mobile.png
Datei anzeigen


BIN
src/img/sign.png
Datei anzeigen


+ 26 - 44
src/index.html
Datei anzeigen 

@@ -8,52 +8,35 @@
 
 </head>
 
 
 <body>
 
-    <div class="container">
 
-        <div class="product-box">
 
-            <div class="product-title">套餐选择</div>
 
-
 
-            <!-- <div class="product-list">
 
-                <div class="item focus" onclick="choose">
 
-                    <span class="time">12个月</span>
 
-                    <span class="price">￥199元</span>
 
-                    <span class="origin-price">原价: ￥499元</span>
 
-                </div>
 
-                <div class="item" onclick="choose">
 
-                    <span class="time">12个月</span>
 
-                    <span class="price">￥199元</span>
 
-                    <span class="origin-price">原价: ￥499元</span>
 
-                </div>
 
-                <div class="item" onclick="choose">
 
-                    <span class="time">12个月</span>
 
-                    <span class="price">￥199元</span>
 
-                    <span class="origin-price">原价: ￥499元</span>
 
-                </div>
 
-            </div> -->
 
-        </div>
 
-        <div class="pay-way">
 
-            <div class="pay-title">选择支付方式</div>
 
-            <div class="pay-item wx-pay">
 
-                <div class="left-box">
 
-                    <img src='./img/wx_icon.png' class="wx-img">
 
-                    <span class="pay-name">微信支付</span>
 
-                </div>
 
-                <span class="wx-choose pay-choose"></span>
 
+    <div class="container clearfix">
 
+        <div class="input_box">
 
+            <div class="alert">
 
+                <span>特别提示：请输入义方小学堂登录手机号</span>
 
             </div>
 
-            <div class="pay-item zfb-pay">
 
-                <div class="left-box">
 
-                    <!-- <img src='./img/zfb_icon.png' class="zfb-img"> -->
 
-                    <span class="pay-name">支付宝支付</span>
 
-                </div>
 
-                <span class="zfb-choose pay-choose"></span>
 
+            <div class="mobile_input">
 
+                <input type="number"  name="mobile" id="mobile_number" placeholder="输入手机号" />
 
             </div>
 
+            <div class="sign_input">
 
+                <input type="number" name="sign" id="sign_number" placeholder="输入手机验证码" />
 
+            </div>
 
+            <div id="sign_btn">发送验证码</div>
 
         </div>
 
-        <div class="footer">
 
-            <div class="left">
 
-               支付
 
-                <span class="pay-price">199</span>
 
-                
+        <div class="info_box">
 
+            <div class="head">义方教育</div>
 
+            <div class="title_row">
 
+                <span class="title">义方小学堂年包</span>
 
+                <span class="price">￥300.00</span>
 
+            </div>
 
+            <div class="discount_row">
 
+                <span class="title">优惠</span>
 
+                <span class="price">-￥150.00</span>
 
             </div>
 
-            <div class="pay-btn">支付</div>
 
+        </div>
 
+        <div class="info_bottom">
 
+            <span>实付金额： ￥150</span>
 
+        </div>
 
+        <div id="buy_btn">
 
+            <span>立即支付</span>
 
         </div>
 
     </div>
 
     <div class="buy-dialog">
 
@@ -68,5 +51,4 @@
 
     </div>
 
 </body>
 
 
-</html>
 
-
 
+</html>

+ 7 - 37
src/index.js
Datei anzeigen 

@@ -38,41 +38,10 @@ const getStatus = (orderId) => {
 
 }
 
 // 默认微信支付
 
 $('.wx-choose').addClass('choose');
 
-$.ajax({
 
-    url: Api.composeApiPath('order/product'),
 
-    dataType: "json",
 
-    async: true,
 
-    data: {
 
-        "channel": channel
 
-    },
 
-    headers: {
 
-        uid: uid
 
-    },
 
-    type: "GET",
 
-    success: function (res) {
 
-        renderProductList(res.data)
 
-    }
 
-});
 
+
 
 
 // 渲染页面
 
-const renderProductList = (list) => {
 
-    const box = $("<div class='product-list'></div>")
 
-    list.forEach((item, index) => {
 
-        if (index === 0) {
 
-            productId = item.id;
 
-            $('.pay-price').html(`￥${item.price / 100}元`)
 
 
-        }
 
-        box.append(
 
-            $(`<div data-price="${item.price / 100}" data-id="${item.id}" class="item ${index === 0 ? 'focus' : ''}">
 
-            <span class="time">${item.payType === 'YEAR' ? '12个月':item.payType === 'MONTH'?'1个月':'连续包月'}</span>
 
-            <span class="price">￥${item.price / 100}元</span>
 
-            <span class="origin-price">原价: ￥${item.originalPrice / 100}元</span>
 
-        </div>`).on('click', chooseProduct)
 
-        )
 
-    })
 
-    $('.product-box').append(box);
 
-}
 
 // 修改支付方式
 
 const changePayWay = (flag) => {
 
     // if (typeof system !== 'undefined') {
 
@@ -129,16 +98,17 @@ const chooseProduct = (e) => {
 
 
 }
 
 
+const getSign = () => {
 
+    console.log(123)
 
+}
 
 // 绑定事件
 
 $(document).ready(() => {
 
-    if ($.cookie('isPayBack') === '1' && $.cookie('isWx') === '1') {
 
-        $('.buy-dialog').css('display', 'flex')
 
-    }
 
     if (Utils.GetQueryString('payBack') === '1') {
 
         getStatus($.cookie('orderId'))
 
     }
 
-    $('.wx-pay').on('click', () => {
 
-        changePayWay('wx');
 
+    // 获取验证码
 
+    $('#sign_btn').on('click', () => {
 
+        getSign();
 
     });
 
     $('.zfb-pay').on('click', () => {
 
         changePayWay('zfb');

+ 127 - 130
src/index.less
Datei anzeigen 

@@ -3,6 +3,7 @@ body {
 
     margin: 0;
 
     border: none;
 
     padding: 0;
 
+    height: 100%;
 
 }
 
 
 .about_pic {
 
@@ -17,7 +18,7 @@ body {
 
     left: 0;
 
     right: 0;
 
     margin: 0 auto;
 
-    bottom: 1rem;
 
+    bottom: .5rem;
 
     border-radius: 1rem;
 
     overflow: hidden;
 
     display: flex;
 
@@ -38,6 +39,8 @@ body {
 
         }
 
     }
 
 
+
 
+
 
     .right {
 
         width: 3.35rem;
 
         height: 1rem;
 
@@ -47,6 +50,10 @@ body {
 
         font-size: .4rem;
 
         text-align: center;
 
     }
 
+
 
+    .none {
 
+        background: #929292;
 
+    }
 
 }
 
 
 .container {
 
@@ -54,165 +61,155 @@ body {
 
     height: 100%;
 
     background: #eee;
 
 
-    .product-box {
 
-        width: 100%;
 
-        background: #fff;
 
-        margin-bottom: .4rem;
 
-
 
-        .product-title {
 
-            width: 100%;
 
-            height: 1.4rem;
 
-            line-height: 1.4rem;
 
-            color: #a8674d;
 
-            font-size: .4rem;
 
-            text-align: center;
 
+    .input_box {
 
+        width: 6.8rem;
 
+        height: 3rem;
 
+        border-radius: .1rem;
 
+        margin: 0 auto;
 
+        box-sizing: border-box;
 
+        position: relative;
 
+
 
+        .alert {
 
+            font-size: .2rem;
 
+            color: #f65d5d;
 
         }
 
 
-        .product-list {
 
+        .mobile_input {
 
             width: 100%;
 
-            padding-bottom: .5rem;
 
-
 
-            .item {
 
-                width: 6.48rem;
 
-                height: 1.06rem;
 
-                border-radius: .53rem;
 
-                background: #fff;
 
-                border: .02rem solid rgb(168, 103, 77);
 
-                color: #a8674d;
 
-                box-sizing: border-box;
 
-                display: flex;
 
-                flex-direction: row;
 
-                align-items: center;
 
-                justify-content: space-around;
 
-                margin: 0 auto .4rem;
 
-
 
-                &.focus {
 
-                    background: #f5880d;
 
+            height: 0.82rem;
 
+            background: #fff;
 
+            display: flex;
 
+            flex-direction: row;
 
+            align-items: center;
 
+            margin-bottom: .16rem;
 
+
 
+            input {
 
+                width: 100%;
 
+                height: 0.82rem;
 
+                border: none;
 
+                text-indent: .5rem;
 
+                background: url(./img/mobile.png) no-repeat;
 
+                background-size: .23rem .35rem;
 
+                background-position: .15rem .23rem;
 
+
 
+                ::placeholder {
 
+                    color: #b8b8b8;
 
+                    font-size: .28rem;
 
+                }
 
 
+                :focus {
 
+                    outline: none;
 
                     border: none;
 
-                    color: #fff;
 
                 }
 
+            }
 
 
-                .time {
 
-                    font-size: .36rem;
 
-                }
 
 
-                .price {
 
-                    font-size: .4rem;
 
-                }
 
+        }
 
 
-                .origin-price {
 
+        .sign_input {
 
+            width: 3.98rem;
 
+            height: 0.82rem;
 
+            background: #fff;
 
+
 
+            input {
 
+                width: 100%;
 
+                height: 0.82rem;
 
+                border: none;
 
+                text-indent: .5rem;
 
+                background: url(./img/sign.png) no-repeat;
 
+                background-size: .30rem .35rem;
 
+                background-position: .15rem .23rem;
 
+
 
+                ::placeholder {
 
+                    color: #b8b8b8;
 
                     font-size: .28rem;
 
                 }
 
+
 
+                :focus {
 
+                    outline: none;
 
+                    border: none;
 
+                }
 
             }
 
-        }
 
-    }
 
 
-    .pay-way {
 
-        width: 100%;
 
-        background: #fff;
 
 
-        .pay-title {
 
-            width: 6.82rem;
 
-            height: 1.05rem;
 
-            border-bottom: .02rem solid #e4e4e4;
 
+        }
 
+
 
+        #sign_btn {
 
+            width: 2.56rem;
 
+            height: 0.82rem;
 
+            background: #f65d5d;
 
+            font-size: .28rem;
 
+            line-height: .82rem;
 
             text-align: center;
 
-            margin: 0 auto;
 
-            line-height: 1.05rem;
 
-            color: #191919;
 
-            font-size: .32rem;
 
+            border-radius: .1rem;
 
+            position: absolute;
 
+            right: 0;
 
+            top: 1.3rem;
 
+            color: #fff;
 
+        }
 
+    }
 
 
+    .info_box {
 
+        width: 6.8rem;
 
+        height: 2.2rem;
 
+        border-radius: .1rem;
 
+        margin: 0 auto;
 
+        background: #fff;
 
+        padding: .3rem;
 
+        box-sizing: border-box;
 
+        .head {
 
+            font-size: .3rem;
 
+            color: #1a1a1a;
 
+            font-weight: 500;
 
+            margin-bottom: .3rem;
 
         }
 
 
-        .pay-item {
 
-            width: 6.82rem;
 
-            height: 1rem;
 
-            border-bottom: .02rem solid #e4e4e4;
 
-            margin: 0 auto;
 
+        .title_row,
 
+        .discount_row {
 
+            width: 100%;
 
             display: flex;
 
-            align-items: center;
 
             justify-content: space-between;
 
+            margin-bottom: .3rem;
 
 
-            .left-box {
 
-                display: flex;
 
-                align-items: center;
 
-
 
-                .wx-img {
 
-                    width: 0.58rem;
 
-                    height: 0.5rem;
 
-
 
-                }
 
-
 
-                .zfb-img {
 
-                    width: 0.56rem;
 
-                    height: 0.56rem;
 
-
 
-                }
 
-
 
-                .pay-name {
 
-                    color: #191919;
 
-                    margin-left: .34rem;
 
-                    font-size: .28rem;
 
-                }
 
+            .title {
 
+                font-size: .28rem;
 
+                color: #676767;
 
             }
 
 
-            .pay-choose {
 
-                float: right;
 
-                width: 0.48rem;
 
-                height: 0.48rem;
 
-                background: url('./img/grey.png') no-repeat;
 
-                background-size: 100%;
 
-
 
-                &.choose {
 
-                    background: url('./img/choose.png') no-repeat;
 
-                    background-size: 100%;
 
-                }
 
+            .price {
 
+                font-size: .28rem;
 
+                color: #000;
 
+                font-weight: 500;
 
             }
 
-
 
         }
 
     }
 
-
 
-    .footer {
 
-        width: 100%;
 
-        height: 1.2rem;
 
-        position: fixed;
 
-        left: 0;
 
-        bottom: 0;
 
+    .info_bottom{
 
+        width: 6.8rem;
 
+        height: 0.8rem;
 
+        margin: 0 auto;
 
+        background: lightblue;
 
         display: flex;
 
-        flex-direction: row;
 
+        flex-direction: row-reverse;
 
         align-items: center;
 
-        box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.18);
 
-
 
-        .left {
 
-            width: 59%;
 
-            height: 100%;
 
-            font-size: .32rem;
 
-            color: #a8674d;
 
-            text-indent: .5rem;
 
-            display: flex;
 
-            align-items: center;
 
-
 
-            span {
 
-                font-size: .4rem;
 
-                text-indent: 0;
 
-            }
 
-        }
 
-
 
-        .pay-btn {
 
-            width: 41%;
 
-            height: 100%;
 
-            background: #f5880d;
 
-            text-align: center;
 
-            line-height: 100%;
 
-            font-size: .4rem;
 
-            color: #fff;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
+        span{
 
+            font-size: .3rem;
 
+            color: #fd4141;
 
+            margin-right: .3rem;
 
         }
 
     }
 
-
 
-
 
+    #buy_btn{
 
+        font-size: .3rem;
 
+        color: #fff;
 
+        background: #f65d5d;
 
+        text-align: center;
 
+        line-height: .82rem;
 
+        width: 2.38rem;
 
+        height: 0.82rem;
 
+        border-radius: .1rem;
 
+        position: absolute;
 
+        bottom: 1rem;
 
+        right: 0.8rem;
 
+    }
 
 
 }

+ 1 - 1
webpack.config.js
Datei anzeigen 

@@ -70,7 +70,7 @@ module.exports = {
 
         open: true,
 
         host: '127.0.0.1'
 
     },
 
-    mode: 'development', // development production
 
+    mode: 'production', // development production
 
     entry: {
 
         index: './src/index.js',
 
         about: './src/about.js'