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

這個商城采用前后端分離的模式，主要的用戶狀態(tài)有三種 游客 普通用戶 vip用戶 主要的界面是 ?登錄頁 商城首頁 詳情頁 支付頁 我的訂單頁 優(yōu)惠券頁

對于游客我這邊需要存儲他的訂單信息，每次創(chuàng)建訂單時拼接到本地，刪除訂單時，同時將本地的訂單也刪除。其余的狀態(tài)只要有手機(jī)號，就全部采用服務(wù)端返回的接口數(shù)據(jù)。

難點(diǎn)主要是登錄頁和支付頁，登錄頁采用的是登陸中心的接口文檔，這里主要說說支付和優(yōu)惠券在這里糾結(jié)了不少時間

當(dāng)用戶是vip且擁有優(yōu)惠券且購物商品滿足200時，這時候給他一個默認(rèn)的優(yōu)惠券，這里主要是理給自己的

1 支付線

支付首先分為兩種線上支付和貨到付款支付 線上支付減10元 貨到付款-0 所以這就有個邏輯

if($(支付方式!=='到付'){
　　totalPrice = 單價(jià)*個數(shù)-線上減免；
}else{
　　totalPrice =?單價(jià)*個數(shù)；
}
$totalPrice.html(totalPrice);

然后當(dāng)用戶是vip且總金額大于200時

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

2 優(yōu)惠券線

因?yàn)閺闹Ц俄撁娴絻?yōu)惠券頁面是跳頁面，所以當(dāng)選擇優(yōu)惠券返回時也是打開新頁面。這時如果你當(dāng)時選擇的商品單價(jià)不滿200，當(dāng)你加到一定數(shù)量超過兩百時可以使用優(yōu)惠券了，但是當(dāng)你從優(yōu)惠券頁面返回時頁面商品數(shù)量又變成1了

所以你只能用默認(rèn)的優(yōu)惠券，你沒有選擇優(yōu)惠券的權(quán)利，這個體驗(yàn)就很差了。好吧，我們本來就是強(qiáng)制你用優(yōu)惠券的。這時候能想到的方法是什么？存本地，所以我就存了當(dāng)前支付頁面的商品id 商品數(shù)量 商品單價(jià) 商品總價(jià) 接著存了這個頁面

請求優(yōu)惠券接口的默認(rèn)第一個可用優(yōu)惠券的id value 當(dāng)用戶進(jìn)入優(yōu)惠券頁面時選擇其他的優(yōu)惠券就覆蓋之前存的默認(rèn)優(yōu)惠券。然后用戶返回支付頁 去請求優(yōu)惠券首先判斷有沒有優(yōu)惠券的session，如果有就取出來使用，如果沒有則使用默認(rèn)的。

然后將存儲的商品id 商品數(shù)量 單價(jià) 總價(jià)渲染到頁面，后來發(fā)現(xiàn)這樣有個很大的問題，就是當(dāng)你有session進(jìn)入支付頁你就會渲染你的session值，這時候想到的辦法就是判斷來源頁面，當(dāng)用戶是從優(yōu)惠券頁面進(jìn)來的時候才渲染頁面，可是比較坑的是

優(yōu)惠頁面是window.location.href打開的 返回后判斷來源頁是undefined，這個不明白是為什么。所以以至于比只要存了session這個session就會影響你的頁面，所以這個方法后來被廢棄。

接下來采用的方法是支付頁第一次加載，存儲默認(rèn)優(yōu)惠券id和value 的邏輯不變 ，只要離開這個頁面就清除用戶的優(yōu)惠券信息 ?從支付頁跳到優(yōu)惠券頁面時，這時候就清除優(yōu)惠券的session 同時將商品信息通過url傳給優(yōu)惠券頁面，在優(yōu)惠券頁面存儲這些商品信息的session 當(dāng)用戶點(diǎn)擊其他優(yōu)惠券時這時候就存儲了優(yōu)惠券的信息，這時候使用window.history返回到支付頁時 ?如果用戶沒有點(diǎn)擊優(yōu)惠券 點(diǎn)擊了則取這里的優(yōu)惠券信息 如果沒有則是物理返回 ?這時候通過商品信息（這里面存了優(yōu)惠券信息） 渲染支付頁面和優(yōu)惠券信息 （這里就是傳到優(yōu)惠券的默認(rèn)優(yōu)惠券信息）

這里需要注意的時，只有從優(yōu)惠券列表頁過來的需要存儲商品信息，防止影響到其他商品，從其他頁面過來的都要清楚商品信息。

這里貼下結(jié)果比較重要的代碼

進(jìn)入優(yōu)惠券列表頁

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;
}

優(yōu)惠券頁面取數(shù)據(jù)

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);
}

/*設(shè)置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');
}

這里再說下支付

驗(yàn)證函數(shù)

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位的中英文字符和數(shù)字!');
　　　　toast();
　　　　return false;
　　}else{
　　　　localStorage.setItem('userName',userName);
　　}
　　if(telPhone == ""){
　　　　$('.pdName').html('請輸入您的手機(jī)號碼！');
　　　　toast();
　　　　return false;
　　}
　　if(!regPhone.test(telPhone)){
　　　　$('.pdName').html('您的手機(jī)號格式不正確！');
　　　　toast();
　　　　return false;
　　}else{
　　　　localStorage.setItem('phone',telPhone);
　　}
　　if(dizhi == "" || dizhi=="請選擇省、市、區(qū)縣"){
　　　　$('.pdName').html('請選擇您的地址！');
　　　　toast();
　　　　return false;
　　}else{
　　　　localStorage.setItem('dizhi',dizhi);
　　}
　　if(xxdz == ""){
　　　　$('.pdName').html('請輸入您的詳細(xì)地址！');
　　　　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');
}
}
}

是否顯示優(yōu)惠券封裝方法

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');
}
}

好吧 代碼整理的比較亂 這里貼上網(wǎng)站地址：http://ypsc.2345.com/m/index.html

這個項(xiàng)目暫時還在測試中，希望不要有什么問題，能順利上線。

?ajax輪循支付結(jié)果

var $trade_no = GetCookie('current_order');
var count = 0;
function countFun(){
　　var interval = window.setInterval("CheckOrder()",2000);
}
countFun();
function CheckOrder()
{
// 長鏈接監(jiān)控
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('無此訂單號');
　　　　}
　　});
}

轉(zhuǎn)載于:https://www.cnblogs.com/xuniannian/p/9394962.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。