mui开发APP教程之仿天猫支付弹出自定义框

来源：互联网发布：手机在线网页聊天源码编辑：程序博客网时间：2024/05/29 03:32

由于，创建webview需要调用到HTML5+，所以要在mui.plus()函数里面调用plus.webview.create()，而在浏览器上调试无法调用plus，所以这里只展示一个原始页面，弹出框就不展示了；

原始页面：

这里写图片描述

确认订单页面html代码：

<header class="mui-bar mui-bar-nav">        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>        <span class="mui-pull-left" style="line-height: 45px;">确认订单</span>    </header>    <nav class="mui-bar mui-bar-tab">        <p class="totalPrice">            共<span class="orderAllCountNum">2</span>件            总金额&yen;<span id="totalPrice">1158</span>        </p>        <p class="buyNow">            <button id="submitOrderBtn" class="submitOrderBtn">提交订单</button>        </p>    </nav>    <div class="mui-content">        <div class="userInfo">            <p>收货人：<span>123456</span></p>            <p>电话：<span>11111111111</span></p>            <p>收货地址：<span>xxx xxx xxx xxx</span></p>        </div>        <div id="userInfo">        </div>        <div class="orderGoodsList">            <div class="orderGoodsListItem">                <img class="orderGoodsListImg" src="../administrator/goodsImg/HSimg/hs0102.jpg" />                <p class="orderGoodsName">                    欧式2017一字肩新娘结婚婚纱深V蕾丝复古大牌礼服                </p>                <div class="orderGoodsInfo">                    <p class="orderGoodsPrice"> &yen;589 </p>                    <p class="orderGoodsCount">x1</p>                </div>                <p class="orderUserMsg">                    卖家留言：                <input type="text" class="mui-input-clear orderUserMsgIpt" placeholder="选填"  />                </p>                <p class='orderGoodsSmallCount'>                    共<span class="smallCountGoodNum">1</span>件商品                               小计：&yen;<span class="smallCountGoodPrice">589</span>                </p>            </div>            <div class="orderGoodsListItem">                <img class="orderGoodsListImg" src="../administrator/goodsImg/ZSimg/zs0101.jpg" />                <p class="orderGoodsName">                    欧式2017一字肩新娘结婚婚纱深V蕾丝复古大牌礼服                </p>                <div class="orderGoodsInfo">                    <p class="orderGoodsPrice"> &yen;569 </p>                    <p class="orderGoodsCount">x1</p>                </div>                <p class="orderUserMsg">                    卖家留言：                <input type="text" class="mui-input-clear orderUserMsgIpt" placeholder="选填"  />                </p>                <p class='orderGoodsSmallCount'>                    共<span class="smallCountGoodNum">1</span>件商品                               小计：&yen;<span class="smallCountGoodPrice">569</span>                </p>            </div>        </div>    </div>

js代码：

mui.plusReady(function(){    //确认订单    //关闭splash页面    plus.navigator.closeSplashscreen();    var payfor;  //支付页面    var self=null;//当前页面    //支付页面           点击提交订单则创建支付webview    document.getElementById("submitOrderBtn").addEventListener('tap',function(){        //获取当前webview        self=plus.webview.currentWebview();        if(payfor){//如果已经存在该窗口，则返回，避免快速点击创建多个窗口            return        }        //不存在则创建支付窗口        //支付页面距离顶端距离            自定义，需要多高则设置多高        var top=plus.display.resolutionHeight-235;        var href='payfor.html'        //创建的webview显示payfor.html的内容        payfor=plus.webview.create(href,'payfor.html',{            width:'100%',            height:'235px',            top:top,            scrollIndicator:'none',            scalable:false,            popGesture:'none'        },{//传送到创建的webview页面的数据            payforInfo:{                'url':'test',                'title':'测试',                'content':'测试',                'pageSourceId':self.id            }        });        //显示支付窗口   并且显示遮罩层        payfor.addEventListener('loaded',function(){            payfor.show('slide-in-bottom',300);        },false);        self.setStyle({            mask:'rgba(0,0,0,0.5)'        });        //遮罩层点击事件        self.addEventListener('maskClick',function(){            //关闭遮罩层            self.setStyle({                mask:'none'            });            //避免出现特殊情况，确保支付页面子在初始化时关闭            if(!payfor){                payfor=plus.webview.getWebviewById('share.html');            }            //关闭支付页面   并设为空，如果不为空就不会创建，直接return在一开始时候有判断            if(payfor){                payfor.close();                payfor=null;            }        },false);    },false);});

0 0