最近比較忙，所以一直沒有總結，其實總結還是很重要的，使你避免在同一個地方跌倒兩次。故現在對這個微商城做個總結。

這個商城采用前后端分離的模式，主要的用戶狀態有三種 游客 普通用戶 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('無此訂單號');
　　　　}
　　});
}

轉載于:https://www.cnblogs.com/xuniannian/p/9394962.html

總結

以上是生活随笔為你收集整理的艺品商城总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。