【前端】绑定手机号跳转到“下一步”

前言

  小编最近在做项目时遇到一个功能，用户A在下单买东西时，前提条件有两个：必须是登陆状态，必须是有手机号信息（在微信方式等其他方式登陆时，没有手机号信息）。跳转“绑定手机号页面”成功之后，需要跳转到下单的“下一步”。

实现思路的难点

一、如何跳转到下一步

  1.页面上方，添加if判断是否是跳转过来的页面(相当于页面加载执行的$(document).ready)

//判断是否从绑定手机号返回的页面
var isJump = GetQueryString('isJump');//从绑定手机页面传过来的URL中的参数
if(isJump!=undefined && isJump=='yes') {
    var bindPhoneParam = sessionStorage.getItem("bindPhoneParam"); //读取 通过session保存的参数值
    bindPhoneParam =   eval('(' + bindPhoneParam + ')');//json字符串转成json对象
    buyFood(bindPhoneParam);//下单的方法
}

  2.下单的方法，提取出来

// 提取通用的卖品下单方法
function buyFood(newGoodOrder){
    Zepto.ajax({
        type:"post",
        url: URL + '/app/sellGoods/createOrder', //创建卖品订单
        data: newGoodOrder,
        dataType:"json",
        success:function(data){
//						console.log(data);
            if(data.resultCode == '0'){
                var orderId = data.resultData.orderId;
//							window.location = 'firmGoodsOrder.html?orderNo=' + orderId;
                window.location = path+'/page?pagePath=mall/sellOrderConfirm&orderNo=' + orderId+'&companyCode='+sessionStorage.movieCode;
            } else {
                yh.oAlert(data.resultDesc);
            }
        },
        error:function(data){
            console.log("失败"+JSON.stringify(data));
        }
    });
}

  3.执行ajax方法所需的参数放到session对象中，跳转回来时，直接执行下单方法

submitFn: function(){

			newGoodOrder.goodsInfo = JSON.stringify(goodsPara);
            sessionStorage.bindPhoneParam = JSON.stringify(newGoodOrder);//绑定手机跳转页面需要的参数

            //跳转绑定手机号
            var memberPhone=storage.memberPhone;
            if( memberPhone==null || memberPhone == '' || memberPhone=='undefined'){
                yh.oAlert("请先绑定手机号码");
                //将页面参数传入地址
                var pageName="buyFood";
                window.location.href=path + '/page?pagePath=bindPhone/bindPhone&pageName='+pageName;

            } else {
                sessionStorage.removeItem("bindPhoneParam");
                sessionStorage.removeItem("goodsInfo");
                buyFood(newGoodOrder);
            }

二、json对象的获取

  1.在上面存取session时，我们存进去的是json字符串，在读取的时候，无法获取值

sessionStorage.bindPhoneParam = JSON.stringify(newGoodOrder); //存进去的是json字符串

  2.获取json对象里面的值时，我们需要转换。

    var bindPhoneParam = sessionStorage.getItem("bindPhoneParam");
    bindPhoneParam =   eval('(' + bindPhoneParam + ')');

小结

  在实现这个功能的时候，自己写的比较麻烦，多亏了项目组长和同事的帮忙，自己实现了这个功能，虚心向优秀的人学习！ 感谢您的访问！