【微信支付】分享一個失敗的案例

這個項目是去年作的，開始客戶還在推廣，幾個月後發現服務器已經關掉了。這是一個發圖片猜謎語的應用，用戶猜對了分成包，所得獎金能夠提現。開發的時候對需求都不太看好，以爲用戶粘性過低了。今天就把全部的程序拿了出來放在了github上。供有興趣的夥伴玩耍。

產品邏輯

用戶從公衆號直接進來，能夠作兩件事，一個是發佈懸賞謎題，一個是去答題。答題得到賞金能夠提現。以前還有聊天和好友功能，以爲太冗餘，又拿掉了。用戶的懸賞金額來自微信支付或者錢包的餘額。客戶怎麼賺錢呢，有幾個點，第一個點是專門去找企業用戶，謎題就是廣告，答案就是讓商品的名字，用戶輸入一遍答案獲得賞金以達到作廣告和得到用戶的效果，二個是提現有手續費，三個是提現有必定的門檻，好比滿了十元才能夠提現。四個就是在答對題的頁面插廣告。謎題是倒計時的，倒時以後剩餘賞金會退回到用戶的錢包，用戶還能夠選擇重發別人的謎題或者已通過期的謎題。大體就是這樣的一個形態。

技術棧

網站基於Asp.net MVC4，至關因而我以前Portal.MVC的一個手機版，不一樣的是集成了微信支付、微信登陸、微信分享和微信的體現與轉帳。前端用的是zepto+SUI。微信這方面我以前的博客都有介紹過，此次恰好放在一塊兒。界面大家可能不喜歡，這個就另當別論了，我只負責全部代碼的實現~ ，下面看下界面吧。

註冊

發佈的時候確實沒有註冊和登陸兩個按鍵的，爲了方便你們在電腦上玩我就放了出來。在公衆號裏面點擊那個微信圖標就能登陸。客戶讓我記住狀態，省得每次都要登陸。我就將用戶的openid放到了localstorage裏面。而後註冊這裏用到了阿里大魚的短信服務，如今應該還有條數，有興趣的能夠玩玩。

出題

本來用的本身的h5插件上傳的，但仍是有的安卓不支持，最後用了微信提供的上傳圖片的方法。詳情見：http://www.cnblogs.com/stoneniqiu/p/6910326.html，微信的上傳仍是太麻煩，涉及到上傳到微信服務器還要再下載下來，應該用plupload相似的插件去作這樣的事情。

懸賞

圖片上傳後會保存原圖和縮略圖，而後會讓用戶確認支付，支付的時候回判斷用戶錢包的錢是否足夠支付此次的懸賞，零錢足夠就用零錢，不夠就會彈出微信支付。微信支付的js所有在client.js裏面。出題完成以後，當別的用戶進入謎題就能看到下面的頁面。固然在網頁端時候這個地方微信支付是不可能成功，須要要在微信環境裏面測試。詳情能夠參考：公衆號支付。若是你想在電腦上玩這個，怎麼充值呢，答案很簡單，那就是去改數據庫~~。 數據庫中有一個wallets的表.

因此自動動手，豐衣足食。這裏的lockMoney就是出題被鎖定的金額，當謎題到期了懸賞沒有被領取完就會退會到用戶的帳號。這裏是由後臺的一個定時服務執行的。具體能夠參考下Portal.MVC.Models.Job下的JobCheckQuestionTimeJob這個對象。

 

提示當前的懸賞，以鼓勵用戶去答題。謎題有三種模式，平均賞金，遞減和一人獲獎。

得到賞金

用戶若是答對了，就會得到賞金。這個頁面下面就是加入了個廣告。一樣也鼓勵用戶再去出題。

錢包

用戶答對以後就能夠得到賞金，這個頁面的功能都在UserCenter這個Controller中。設計到支付和提現的都在PaymentController中，提現的順序是先檢查用戶提現的金額是否對。現有金額>=提現金額+手續費。而後建立訂單，再從數據庫划走金額，最後/Checkout/CashTransfers 纔是將企業帳戶的錢轉到用戶的微信零錢中。

  //提現
        $(document).on("click", ".cashbt", function () {
            //驗證餘額
            var money = $("#cashmoney").val();
            $.post("/Payment/CheckWalletAndFee", { money: money }, function (res) {
                if (res.IsSuccess === true) {
                    //建立訂單
                    $.showIndicator();
                    $.post("/Payment/CreateToCashOrder", { money: money }, function (order) {
                        $.ajax({
                            url: "/Checkout/CashTransfers",
                            data: { orderNumber: order.OrderId },
                            type: "post",
                            success: function (result) {
                                if (result.IsSuccess === true) {
                                    //處理訂單狀態並扣除手續費
                                    $.post("/Payment/DealCashFee", { orderNumber: order.OrderId }, function (last) {
                                        //提示提現成功!
                                        if (last.IsSuccess === true) {
                                            $.alert("提現成功，請在查看您的微信零錢!", function () {
                                                location.href = "/UserCenter/Index";
                                            });
                                        } else {
                                            $.alert(last.Message);
                                        }
                                        $.hideIndicator();

                                    });

                                } else {
                                    $.hideIndicator();
                                    $.alert(result.Message);
                                }
                            },
                            error: function (err) {
                                $.hideIndicator();
                                alert(JSON.stringify(err));
                            }
                        });

                    });



                } else {
                    $.alert(res.Message);
                }
            });
        });

View Code

提現成功：

具體請參考：企業轉帳到用戶

後端

後端的模塊有好幾個，作了一些統計，模板仍是用的Matrix Admin。

數據庫的表以下，MenuStatistics是用來統計訪問的頁面的。其實也沒啥用。其餘的是評論，分享，答案，謎題，權限，用戶這些表一看也就明白，無需贅述了。

初始化：

因爲是codefirst模式，在webconfig中配置好mssql的數據庫地址後，能夠直接運行。網站起來後，先運行/Install。

  public ActionResult Install()
        {
            InstallQuestionStrategies();
            InstallSystemWallet();
            InstallPermission();
            InstallAdmin();
            return Content("success");
        }

這個方法會初始化一些數據。包括策略，系統錢包，權限和管理員。後端管理員Admin，密碼admin。你也能夠改爲你本身喜歡的。若是想要更多測試帳號。能夠調用InsertTestUsers方法，會建立五個測試用戶。若是想要部署到你本身的公衆號，除了註冊公衆號、商戶、設置支付地址外，而後就是修改WxPayApi/lib下的Config中的參數了。

小結：雖然是個失敗的項目，整理出來供你們玩耍，有問題有想法能夠留言。老鐵喜歡就扶我一把。

github：https://github.com/stoneniqiu/Protal.MVC.WeiXinPay

最後，喜歡讀書的小夥伴能夠關注下下面的訂閱號~~