master

分支 (1)

管理

管理

master

mobile-adaptation-h5
/
exchange-prize16530.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
    (function(doc, win) {
        var docEl = doc.documentElement,
            isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
            dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
            dpr = 1,
            scale = 1 / dpr,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        docEl.dataset.dpr = dpr;
        var metaEl = doc.createElement('meta');
        metaEl.name = 'viewport';
        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
        docEl.firstElementChild.appendChild(metaEl);
        var recalc = function() {
            var width = docEl.clientWidth;
            if (width / dpr > 750) {
                width = 750 * dpr;
            }
            docEl.style.fontSize = 100 * (width / 750) + 'px';
        };
        recalc()
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
    })(document, window);
    </script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>吃货友情-邀请好友 兑换奖品</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone = no" />
    <link href="public/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <link rel="stylesheet" type="text/css" href="public/css/wch.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="public/css/exchange-prize16530.css" />
</head>

<body class="body-bg" onload="loaded()">
    <div id="wrapper" class="wrapper wrapper-bg">
        <div id="scroller" class="scroller">
            <ul class="exchange-notice">
                <li class="notice-text"><span class="icon"></span>兑换的奖品不支持退换货，请确认收货信息。</li>
            </ul>
            <ul class="exchange-form">
                <li class="full-line">
                    <div class="goods-img"><img src="public/img/exchange_prize/goods-img.png"></div>
                    <div class="goods-summary">
                        <p class="title">日本 Bourbon布尔本曲奇饼干最畅销的曲奇饼干畅销的曲奇饼干</p>
                        <p class="entry"><span class="heart">38<em></em></span><span class="count">x1</span></p>
                    </div>
                </li>
                <li><span class="require">*</span><span class="input-title">收货人:</span>
                    <input class="input" type="text" value="吕叔" />
                </li>
                <li><span class="require">*</span><span class="input-title">手机号码:</span>
                    <input class="input" type="text" value="13868105042" />
                </li>
                <li><span class="require">*</span><span class="input-title">所在地区:</span>
                    <span id="cityPicker" class="input-city">浙江省杭州市西湖区</span>
                </li>
                <li class="full-address"><span class="require">*</span><span class="input-title">详细地址:</span>
                    <textarea class="textarea">浙江省杭州市西湖区古荡街道古墩路莲花街路口浙商财富中心4号楼607</textarea>
                </li>
                <li><span class="require">*</span><span class="input-title">身份证号:</span>
                    <input class="input" type="text" value="123456789610223664" />
                </li>
            </ul>
            <div class="reminder">
            	<h3 class="title">格格家海外购提醒您填写真实身份信息</h3>
            	<ul class="reminder-ul">
            		<li><span class="order">1. </span>请填写真实的姓名和身份证信息。</li>
            		<li><span class="order">2. </span>海关需对海外购物查验身份信息，错误信息可能导致无法正常通关。</li>
            		<li></li>
            		<li><span class="order">3. </span>身份证信息会加密报关，绝不会外泄。</li>
            	</ul>
            </div>
            <div class="exchange-btn">兑换</div>
        </div>
    </div>
    <script type="text/javascript" src="//libs.cdnjs.net/iScroll/5.1.1/iscroll-min.js"></script>
    <script type="text/javascript" src="public/js/wch.picker.min.js"></script>
    <script type="text/javascript" src="public/js/city.data-3.js"></script>
    <script type="text/javascript">
    (function($, doc) {
        $.ready(function() {
            // 三级选择示例 ...
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerInput3 = doc.getElementById('cityPicker');
            showCityPickerInput3.addEventListener('tap', function(event) {
                document.activeElement.blur();
                setTimeout(function() {
                    cityPicker3.show(function(items) {
                        showCityPickerInput3.innerText = (items[0] || {}).text + "" + (items[1] || {}).text + "" + (items[2] || {}).text;
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, 300)
            }, false);
        });
    })(wch, document);
    var myScroll;

    function loaded() {
        myScroll = new IScroll('#wrapper', {
            preventDefault: false,
            bounceTime: 1500,
            mouseWheel: true,
            scrollbars: 'custom',
            deceleration: 0.001,
            onScrollMove: function() {
                if ((this.y < this.maxScrollY) && (this.pointY < 1)) {
                    this.scrollTo(0, this.maxScrollY, 400);
                    return;
                } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
                    this.scrollTo(0, 0, 400);
                    return;
                }
            }
        });
    }
    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
    }, false);
    </script>
</body>

</html>