藝品商城總結

最近比較忙，因此一直沒有總結，其實總結仍是很重要的，使你避免在同一個地方跌倒兩次。故如今對這個微商城作個總結。

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