艺品商城总结

最近比较忙，所以一直没有总结，其实总结还是很重要的，使你避免在同一个地方跌倒两次。故现在对这个微商城做个总结。

这个商城采用前后端分离的模式，主要的用户状态有三种 游客 普通用户 vip用户 主要的界面是  登录页 商城首页 详情页 支付页 我的订单页 优惠券页

对于游客我这边需要存储他的订单信息，每次创建订单时拼接到本地，删除订单时，同时将本地的订单也删除。其余的状态只要有手机号，就全部采用服务端返回的接口数据。

难点主要是登录页和支付页，登录页采用的是登陆中心的接口文档，这里主要说说支付和优惠券在这里纠结了不少时间

当用户是vip且拥有优惠券且购物商品满足200时，这时候给他一个默认的优惠券，这里主要是理给自己的

1 支付线

支付首先分为两种线上支付和货到付款支付 线上支付减10元 货到付款-0 所以这就有个逻辑

if($(支付方式!=='到付'){
　　totalPrice = 单价*个数-线上减免；
}else{
　　totalPrice = 单价*个数；
}
$totalPrice.html(totalPrice);

然后当用户是vip且总金额大于200时

if($(userType==vip && price*num>200 支付方式!=='到付'){
　　totalPrice = price*goodsNum- 优惠券 -10;
}else{
　　totalPrice = price*goodsNum- 优惠券;
}
$totalPrice.html(totalPrice);

2 优惠券线

因为从支付页面到优惠券页面是跳页面，所以当选择优惠券返回时也是打开新页面。这时如果你当时选择的商品单价不满200，当你加到一定数量超过两百时可以使用优惠券了，但是当你从优惠券页面返回时页面商品数量又变成1了

所以你只能用默认的优惠券，你没有选择优惠券的权利，这个体验就很差了。好吧，我们本来就是强制你用优惠券的。这时候能想到的方法是什么？存本地，所以我就存了当前支付页面的商品id 商品数量 商品单价 商品总价 接着存了这个页面

请求优惠券接口的默认第一个可用优惠券的id value 当用户进入优惠券页面时选择其他的优惠券就覆盖之前存的默认优惠券。然后用户返回支付页 去请求优惠券首先判断有没有优惠券的session，如果有就取出来使用，如果没有则使用默认的。

然后将存储的商品id 商品数量 单价 总价渲染到页面，后来发现这样有个很大的问题，就是当你有session进入支付页你就会渲染你的session值，这时候想到的办法就是判断来源页面，当用户是从优惠券页面进来的时候才渲染页面，可是比较坑的是

优惠页面是window.location.href打开的 返回后判断来源页是undefined，这个不明白是为什么。所以以至于比只要存了session这个session就会影响你的页面，所以这个方法后来被废弃。

接下来采用的方法是支付页第一次加载，存储默认优惠券id和value 的逻辑不变 ，只要离开这个页面就清除用户的优惠券信息  从支付页跳到优惠券页面时，这时候就清除优惠券的session 同时将商品信息通过url传给优惠券页面，在优惠券页面存储这些商品信息的session 当用户点击其他优惠券时这时候就存储了优惠券的信息，这时候使用window.history返回到支付页时  如果用户没有点击优惠券 点击了则取这里的优惠券信息 如果没有则是物理返回  这时候通过商品信息（这里面存了优惠券信息） 渲染支付页面和优惠券信息 （这里就是传到优惠券的默认优惠券信息）

这里需要注意的时，只有从优惠券列表页过来的需要存储商品信息，防止影响到其他商品，从其他页面过来的都要清楚商品信息。

这里贴下结果比较重要的代码

进入优惠券列表页

function gotoYhq(event){
　　event.preventDefault();
　　var goodsId = $('#goodsId').attr('goods_id');
　　var num = $('#goodsId').val();
　　var payPrice = $('#total_price').html();
　　var zffs = $('#zhifumethod').val();
　　var couponsInfo = JSON.parse(sessionFun('get','couponsInfo'));
　　window.location.href = "./yhq.html?goodsId="+goodsId+'&number='+num+'&danjia='+price+'&zongjia='+payPrice+'&zffs='+zffs+'&couponsId='+couponsInfo.id+'&couponsValue='+couponsInfo.value;
}

优惠券页面取数据

var obj = {};
obj.number = getQueryString('number');
obj.danjia = getQueryString('danjia');
obj.zongjia = getQueryString('zongjia');

obj.zffs = getQueryString('zffs');
obj.couponsId = getQueryString('couponsId');
obj.couponsValue = getQueryString('couponsValue');
sessionFun('set','detailInfo',JSON.stringify(obj));

$yhqList.on('click','.quan',function(){
　　if($(this).hasClass('selected')){
　　return;
}else{
　　$(this).addClass("selected");
　　$(this).parents("li").siblings("li").find(".quan").removeClass("selected");
　　couponsId = $(this).attr('data');
　　value = $(this).attr('value');
　　sessionFun('set','couponsInfo',JSON.stringify({id:couponsId,value:value}));
　　window.history.back(-1);
}

/*设置session */
function sessionFun(type,name,value){
　　if(type == "get"){
　　　　return window.sessionStorage.getItem(name);
　　}else if(type== 'set'){
　　　　window.sessionStorage.setItem(name,value);
　　}else{
　　　　window.sessionStorage.removeItem(name);
　　}
}

移除session

if(location.href.indexOf('pay.html') == -1){
　　sessionFun('remove','detailInfo');
}

这里再说下支付

验证函数

function verify(){
　　var userName = $("#username").val(),
　　　  telPhone = $.trim($("#phone").val()),
　　　  dizhi = $("#trigger5").html(),
　　　  xxdz = $("#detail-address").val(),
　　　 regName = /^[\u4e00-\u9fa5_a-zA-Z0-9]{0,16}$/,
　　　 regPhone = /^1[3|4|5|6|7|8][0-9]{9}$/;
　　if(userName == ""){
　　　　$('.pdName').html('请输入您的姓名！');
　　　　toast();
　　　　return false;
　　}
　　if(!regName.test(userName)){
　　　　$('.pdName').html('用户名为不超过16位的中英文字符和数字!');
　　　　toast();
　　　　return false;
　　}else{
　　　　localStorage.setItem('userName',userName);
　　}
　　if(telPhone == ""){
　　　　$('.pdName').html('请输入您的手机号码！');
　　　　toast();
　　　　return false;
　　}
　　if(!regPhone.test(telPhone)){
　　　　$('.pdName').html('您的手机号格式不正确！');
　　　　toast();
　　　　return false;
　　}else{
　　　　localStorage.setItem('phone',telPhone);
　　}
　　if(dizhi == "" || dizhi=="请选择省、市、区县"){
　　　　$('.pdName').html('请选择您的地址！');
　　　　toast();
　　　　return false;
　　}else{
　　　　localStorage.setItem('dizhi',dizhi);
　　}
　　if(xxdz == ""){
　　　　$('.pdName').html('请输入您的详细地址！');
　　　　toast();
　　　　return false;
　　}else{
　　　　localStorage.setItem('xxdz',xxdz);
　　}
}

function pay(){
　　var verifyResult = verify();
　　if (verifyResult == false || $("#toPurse").hasClass('disabled'))
　　{
　　　　return false;
　　}
var goodsId = $("#goodsId").attr('goods_id');
var amount = $("#goodsId").val();
var pay_type = $("#zhifumethod").attr('paytype');
var contact_name = $("#username").val();
var contact_mobile = $("#phone").val();
var address1 = $("#trigger5").text();
var address2 = $("#detail-address").val();
var delivery_address = address1 +address2;
var remark = $('#beizhu').val();
if(sessionFun('get','couponsInfo') !== null){
　　var couponsInfo = JSON.parse(sessionFun('get','couponsInfo'));
　　var couponsId = couponsInfo.id;
}else{
　　var couponsId = '';
}
var localData = localStorage.getItem('localTradeno');
$("#toPurse").addClass('disabled');
$("#toPurse").css("background","#aaa");
countdownTimer;
if (!pay_type)
{
　　return false;
}
var formHtml = '',$payFormDiv = $("#payformDiv");
$.ajax({
　　type: "POST",
　　url: "//ypsc.2345.com/api/order/create",
　　data: {"goodsId": goodsId,"amount":amount,"pay_type":pay_type,"contact_name":contact_name,"contact_mobile":contact_mobile,"delivery_address":delivery_address,"remark":remark,"couponsId":couponsId},
　　dataType: 'JSON',
　　success: function (res) {
　　　　if(res.code == 200) {
　　　　　　if(pay_type!=5){
　　　　　　　　var inputHtml ='',formHtml ='';
　　　　　　　　var data = res.data, charset = data.charset, action = data.action, fields = data.form;
　　　　　　　　for(var i in fields){
　　　　　　　　var value = fields[i];
　　　　　　　　inputHtml += '<input type="hidden" name="' + i + '" value="' + value + '">';
　　　　　　}
　　　　formHtml ='<form id="payForm" name="payForm" accept-charset="' + charset + '" method="post" action="' + action + '">'+inputHtml+'</form>';
　　　　$payFormDiv.html(formHtml);//输出表单
　　　　document.write(formHtml);/输出表单
　　　　document.write("<script>document.forms[\"payForm\"].submit();<\/script>");
　　}else{
　　　　var trade_no = res.data.form.trade_no;
　　　　window.location.href="./codsuccess.html?trade_no="+trade_no;
　　}
　　if(userType==0){
　　　　if (localData != null)
　　　　{
　　　　　localStorage.setItem('localTradeno', localData + ',' +res.data.form.trade_no);
　　　　}
　　　　else
　　　　{
　　　　　　localStorage.setItem('localTradeno', res.data.form.trade_no);
　　　　}
　　}
　　} else {
　　　　window.location.href="./createfail.html";
　　}
　　},
　　error: function (msg) {console.log("status_error")}
　　})
}
var wxBrowser = navigator.userAgent.toLowerCase();
var wxVer = /microMessenger\/([0-9.]+)/i.exec(wxBrowser);
$('.zhifubao, .weixin').hide();
if (detector.device.name == 'pc' || detector.device.name == 'mac')
{
　　/*pc or mac*/
　　$('#alipayPC').show();
　　$('#weixinPC').show().addClass('current').siblings('a').removeClass('current');
　　$("#zhifumethod").attr('paytype','3');
　　$("#zhifumethod").val('weixinFormPC');
}
else
{
　　if (detector.os.name == 'android')
{
/*安卓去除白名单和渠道配置 全是 微信H5和支付宝H5*/
　　$('#alipay').show();
　　$('#weixinH5').show().addClass('current').siblings('a').removeClass('current');
　　$("#zhifumethod").attr('paytype','4');
　　$("#zhifumethod").val('weixinFormH5');
}
　　else(detector.os.name == 'ios')
{
if (detector.browser.name != '2345')
{
　　/*ios 小于 ios11 非2345浏览器*/
　　$('#alipay').show()
　　$('#weixinH5').show().addClass('current').siblings('a').removeClass('current');
　　$("#zhifumethod").attr('paytype','4');
　　$("#zhifumethod").val('weixinFormH5');
}else{
/*显示支付宝H5*/
　　$('#alipay').show().addClass('current').siblings('a').removeClass('current');
　　$("#zhifumethod").attr('paytype','2');
　　$("#zhifumethod").val('alipayForm');
}
}
}

是否显示优惠券封装方法

function showYhqFun(flag){
　　/*flag: true or false*/
　　var $yhq0 = $(".yhq-0"),
　　$yhq1 = $(".yhq-1");
　　if(flag){
　　　　return $.ajax({
　　　　　　type: "POST",
　　　　　　url: "//ypsc.2345.com/api/user/couponList",
　　　　　　dataType: 'JSON',
　　　　　　success: function (data) {
　　　　　　　　if(data) {
　　　　　　　　　　if(data.data.couponList.length>0){
　　　　　　　　　　if(data.data.couponList[0].status==1){
　　　　　　　　　　$yhq1.show();$yhq0.hide();
　　　　　　　　　　var $yhqValue=data.data.couponList[0].value;
　　　　　　　　　　$('#yh-price').html($yhqValue);
　　　　　　　　　　sessionFun('set','couponsInfo',JSON.stringify({id:data.data.couponList[0].id,value:data.data.couponList[0].value}))
　　　　　　　　}else{
　　　　　　　　　　$yhq0.show();$yhq1.hide();
　　　　　　　　}
　　　　}else{
　　　　　　$yhq0.show();$yhq1.hide();
　　　　}
　　} else {
　　　　console.log("error_orderList");
　　}
},
　　error: function (msg) {console.log("error_orderList")}
});
}else{
　　$yhq0.show();$yhq1.hide();
　　sessionFun('remove','couponsInfo');
}
}

好吧 代码整理的比较乱 这里贴上网站地址：http://ypsc.2345.com/m/index.html

这个项目暂时还在测试中，希望不要有什么问题，能顺利上线。

 ajax轮循支付结果

var $trade_no = GetCookie('current_order');
var count = 0;
function countFun(){
　　var interval = window.setInterval("CheckOrder()",2000);
}
countFun();
function CheckOrder()
{
// 长链接监控
var ajaxCheckOrder = $.ajax({
　　url:'http://ypsc.2345.com/api/order/status',
　　type : 'post',
　　data : {"trade_no":$trade_no},
　　dataType: 'json',
　　success:function(data)
　　{
　　　　console.log('success')
　　　　if (data.data.pay_status== 1)
　　　　{
　　　　　　window.location.href = "./success.html?trade_no="+$trade_no;
　　　　}
　　　　count++;
　　　　if(count==45){
　　　　　　window.clearInterval(countFun);
　　　　　　window.location.href = "./fail.html?trade_no="+$trade_no;
　　　　}
　　},
　　error:function(){
　　　　document.write('无此订单号');
　　　　}
　　});
}