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

這個項目是去年做的，開始客戶還在推廣，幾個月后發現服務器已經關掉了。這是一個發圖片猜謎語的應用，用戶猜對了分紅包，所得獎金可以提現。開發的時候對需求都不太看好，覺得用戶粘性太低了。今天就把所有的程序拿了出來放在了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);
                }
            });
        });

提現成功：

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

后端

后端的模塊有好幾個，做了一些統計，模板還是用的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

最后，喜歡讀書的小伙伴可以關注下下面的訂閱號~~