有點怪的 bug, mobile 版的 slidesPerGroup 只能設為 1

    var slidesPerGroup = 5;

    if (S3JS.isMobile()) {

        slidesPerGroup = 1; // 很奇怪, Mobile 版時, 若是設定 slidesPerGroup = 5 時, 剛進入時會看到最後一組商品.

    }

    //beauty-coin-exchange-loading

    var swiperPreview = new Swiper('.beauty-coin-exchange-swiper', {

        slidesPerView: 5,

        slidesPerColumn: 1,

        slidesPerGroup: slidesPerGroup,

        spaceBetween: 0,

        loop: true,

        breakpoints: {

            768: {

                slidesPerView: 4.3,

                spaceBetween: 10,

            }

        },

        nextButton: '.beauty-coin-next',

        prevButton: '.beauty-coin-prev',

    });

以下這個可以用在 global.asax 中, 但若是執行到了 aspx 就無效了.
        HttpContext.Current.Response.Headers.Add("Content-Type", "application/json; charset=utf-8");

在 aspx.cs 中, 指定 ContentType 要用以下的方式
        Response.ContentType = "application/json; charset=utf-8";

使用範例如下:

    void getList()

    {

        var Q = TN.Admin.TCatOrderDeliveryRecord.Select().OrderBy("DeliveryCompletion_Date, Id Desc");



        if (U2.WU.IsNonEmptyFromQueryStringOrForm("OD00"))

        {

            Q.And("OD00 = ", U2.WU.GetValue("OD00"));

        }



        if (U2.WU.V.StartDate_IsOK)

        {

            Q.And("DeliveryCompletion_Date >= ", U2.WU.V.StartDate);

        }



        if (U2.WU.V.EndDate_IsOK)

        {

            Q.And("DeliveryCompletion_Date < ", U2.WU.V.EndDate);

        }



        U2.JSON.WriteSuccessData(Q.GetPageDT2(U2.WU.V.CurrentPage, U2.WU.V.PageSize));

    }

相關參考
https://vuejs.org/v2/guide/

1.
加入vue.js

2.
先"包裹"一層 要用到Vue的元素
個人覺得有點想原本習慣的<!--Content-->
但這次只要放入標籤(我是用Id)
像是範例為 vMain   
然後宣告js 物件 我是取名也叫做 vMain 不知道會不會有撞名問題
所以我的el: 就是 #vMain

3.
再來加入變數
{{Creat_Date}}  兩個括號 桃紅色的
如果data 這個物件裡面有一個叫Creat_Date 的資料他就會被放進去

這樣第一個app 就完成了。

其中 Vue 裡面包含幾樣東西 
el >> 標示 這個Vue 的標籤
data >> 裡面存放的資料變數
created >> 生命週期的
methods>>包含各種功能function

這次的列表頁需要用到以前用的 List Item 跟 Pager
對應到vue 會使用到
v-for for 迴圈
v-for" item in dt  ">> dt 為data中的一個array陣列 (此範例中 為PD 中的 DT)
item 則是在這裡的區域變數

有些要顯示有些要隱藏
v-if
v-if" pager.currentPage  > 1" pager 為data 中的一個物件 裡面有包含 currentPage 的變數

還有要傳ajax 回去要資料
所以要在 vue 中的 methods 建立 function
已這次的例子 getList就是目前的function 可以用到一些 data 裡面的資料
回傳成功之後資料也可以回寫在data上面

以及之前會在各種事件的觸發 
@click 觸發點擊事件
在標籤上加上 @click 可以觸發 類似 onclick 的事件 
但是是調用methods裡面function

日期格式
由於之前的套件PD 回傳的日期資料會是 yyyy-MM-ddTHH:mm:ss 這樣的格式
所以使用了 map  將 dt 裡面的日期 轉換成為我要的格式

v.dt.map(function (obj) {
      var rObj = obj;
      rObj["Create_Date"] = $.datepicker.formatDate('yy-mm-dd', new Date(obj["Create_Date"]));
      return rObj;
});

過去都是使用 jquery lazy load js 來實作延遲載圖，
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式，就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;



if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

     entries.forEach(function(entry) {

        if (entry.isIntersecting) {

         let lazyImage = entry.target;

         lazyImage.src = lazyImage.dataset.src;

         lazyImage.srcset = lazyImage.dataset.srcset;

         lazyImage.classList.remove("lazy");

         lazyImageObserver.unobserve(lazyImage);

        }

     });

    });



    lazyImages.forEach(function(lazyImage) {

     lazyImageObserver.observe(lazyImage);

    });

}

//這裡可以加上else處理萬一瀏覽器不支援的狀況

});

網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援，iOS safari 要 12.2 版才支援
應該可以放心使用


 

A下拉霸
 <div class="col-md-6">
                                        <label for="contact:fromlan">Source Language <span class="red">*</span></label>
                                        <div class="bfh-selectbox" data-name="From_Language_Id" id="FromLanItemParent">
                                            <!--FromLanItem S-->
                                            <div data-value="{Id}"><img src="assets/images/_smarty/flags/{Image}" alt="{Abbreviation}"> {LanguageName}</div>
                                            <!--FromLanItem E-->
                                        </div>
                                    </div>

自動生成的下拉霸
1 name 要用 data-name=""來設定
2 完全沒有選擇的時候可能會回傳空值

套件來源
http://bootstrapformhelpers.com/select/

B電話號碼
<label for="contact_department">Your Phone Number </label>
                                        <div>
                                            <input id="phone" name="phone" type="tel">

                                        </div>
                                        <div style="display:none">
                                            <input id="PhoneCountry" name="PhoneCountry" type="">
                                        </div>


                                        <script src="/assets/build/js/intlTelInput.js"></script>
                                        <script>
                                            var input = document.querySelector("#phone");
                                            var iti1 = window.intlTelInput(input, {
                                                // allowDropdown: false,
                                                // autoHideDialCode: false,
                                                // autoPlaceholder: "off",
                                                // dropdownContainer: document.body,
                                                // excludeCountries: ["us"],
                                                // formatOnDisplay: false,
                                                // geoIpLookup: function(callback) {
                                                //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                                                //     var countryCode = (resp && resp.country) ? resp.country : "";
                                                //     callback(countryCode);
                                                //   });
                                                // },
                                                // hiddenInput: "full_number",
                                                // initialCountry: "auto",
                                                // localizedCountries: { 'de': 'Deutschland' },
                                                // nationalMode: false,
                                                // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
                                                placeholderNumberType: "MOBILE",
                                                // preferredCountries: ['cn', 'jp'],
                                                separateDialCode: true,
                                                utilsScript: "/assets/build/js/utils.js",
                                            });
                                            input.addEventListener("countrychange", function () {
                                                $('#PhoneCountry').val(JSON.stringify(iti1.getSelectedCountryData()))
                                                // do something with iti.getSelectedCountryData()
                                            });
                                        </script>

需要用另一個欄位來記錄電話號碼的國家資料 

套件的來源
https://github.com/jackocnr/intl-tel-input
 

這兩天發現的現象。有點不好找錯，所以紀錄一下
因為制式報名頁面使用 ajax form 物件，但 ios 的 safari 一直發生資料有送出，
但是送出後網頁就不跑success後面的 javascript，例如彈跳訊息及導到下個頁面
一開始debug的方向有點猜錯，所以花了點時間找問題
後來才注意到，原來他跑到 ajax error去了，不是 ajax success
直覺可能是 ContentType 的問題，因為預設是 text/html
結果 Response.ContentType 改 application/x-javascript, 就過了  (WTF)
我猜 application/json 應該也沒問題吧
------------------------------
經查證: application/json 比較正確 



 

lock 的 object 和 cachename 最好是相關的.

ex: lock (S3.LockObjs.GetLockerObject(CacheName))

內容後補..

LINE Pay款流程： 
reserve Page(紅科) 發送 reserve API => 取得 payment URL => 轉址到 payment URL => LINE Pay 檢查USER狀態 => 轉回confirm page(紅科), 發送 confirm API => DOWN.

付款需要程式： 
reserve API, confirm API:

send request JSON and read return JSON:
C#: 

using System.Net;

using System.IO;



public partial class TEST : System.Web.UI.Page

{

    DB.OrderMain oOrderObj = null;

    protected void Page_Load(object sender, EventArgs e)

    {

        //Setting request header

        HttpWebRequest httpWebRequest = (HttpWebRequest)WebRequest.Create("__APIRootURL__");

        httpWebRequest.ContentType = "application/json; charset=UTF-8";

        httpWebRequest.Method = "POST";

        httpWebRequest.Headers.Add("X-LINE-ChannelId", DB.SysConfig.LINEPay.ChannelId);

        httpWebRequest.Headers.Add("X-LINE-ChannelSecret", DB.SysConfig.LINEPay.SecretKey);



        //加入參數

        using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))

        {

            string requestJSON = "{\"productName\": \"" + DB.SysConfig.SYSTEM_NAME + "\"," +

                                "\"productImageUrl\": \"" + DB.SysConfig.URL_Shopping + "images/Logo.jpg\"," +

                                "\"amount\": " + oOrderObj.TotalAmount() + "," +

                                "\"currency\": \"TWD\"," +

                                "\"orderId\": \"" + oOrderObj.DisplayOrderId + "\"," +

                                "\"confirmUrl\": \"" + DB.SysConfig.URL_Shopping + "Handler/LinePay/GotoComfirm.aspx?Id=" + oOrderObj.Id + "\"," +

                                "\"cancelUrl\": \"" + DB.SysConfig.URL_Shopping + "Shopping/OrderComplete.aspx?Id=" + oOrderObj.Id + "\"," +

                                "\"capture\": \"true\"," +

                                "\"confirmUrlType\": \"CLIENT\"}";



            streamWriter.Write(requestJSON);

            streamWriter.Flush();

            streamWriter.Close();

        }



        //取得回覆資訊

        var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();

        //解讀回覆資訊

        using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))

        {

            var responseJSON = streamReader.ReadToEnd();

            //將 JSON 轉為物件

            GN.LinePay.reserveRes.ReturnJSON oReturnObj = (GN.LinePay.reserveRes.ReturnJSON)Newtonsoft.Json.JsonConvert.DeserializeObject(responseJSON, typeof(GN.LinePay.reserveRes.ReturnJSON));



            if (oReturnObj.returnCode == "0000")

            {

                //成功

            }

            else

            {

                //失敗

                string ErrMsg = "Error Code: " + oReturnObj.returnCode + "\r\n" + oReturnObj.returnMessage;

            }

        }

    }

}

.vb

Imports System.Net

Imports System.IO



Partial Class TEST

    Inherits System.Web.UI.Page



    Dim oOrderObj As DB.OrderMain

    Private Sub Admin_TEST_Load(sender As Object, e As EventArgs) Handles Me.Load

        'Setting request header

        Dim httpWebRequest As HttpWebRequest = WebRequest.Create("__APIRootURL__")

        httpWebRequest.ContentType = "application/json; charset=UTF-8"

        httpWebRequest.Method = "POST"

        httpWebRequest.Headers.Add("X-LINE-ChannelId", DB.SysConfig.LINEPay.ChannelId)

        httpWebRequest.Headers.Add("X-LINE-ChannelSecret", DB.SysConfig.LINEPay.SecretKey)

        '加入參數

        Using streamWriter As New StreamWriter(httpWebRequest.GetRequestStream())

            Dim requestJSON As String = "{""productName"": """ + DB.SysConfig.SYSTEM_NAME + """," +

                                        """productImageUrl"": """ + DB.SysConfig.URL_Shopping + "images/Logo.jpg""," +

                                        """amount"": " + oOrderObj.TotalAmount() + "," +

                                        """currency"": ""TWD""," +

                                        """orderId"": """ + oOrderObj.DisplayOrderId + """," +

                                        """confirmUrl"": """ + DB.SysConfig.URL_Shopping + "Handler/LinePay/GotoComfirm.aspx?Id=" + oOrderObj.Id + """," +

                                        """cancelUrl"": """ + DB.SysConfig.URL_Shopping + "Shopping/OrderComplete.aspx?Id=" + oOrderObj.Id + """," +

                                        """capture"": ""true""," +

                                        """confirmUrlType"": ""CLIENT""}"



            streamWriter.Write(requestJSON)

            streamWriter.Flush()

            streamWriter.Close()

        End Using

        '取得回覆資訊

        Dim httpResponse As HttpWebResponse = httpWebRequest.GetResponse

        '解讀回覆資訊

        Using streamReader As New StreamReader(httpResponse.GetResponseStream())

            Dim responseJSON As String = streamReader.ReadToEnd()

            '將 JSON 轉為物件

            Dim oReturnObj As GN.LinePay.reserveRes.ReturnJSON = Newtonsoft.Json.JsonConvert.DeserializeObject(responseJSON, GetType(GN.LinePay.reserveRes.ReturnJSON))



            Dim ResMsg As String = ""

            If oReturnObj.returnCode = "0000" Then

                '成功



            Else

                '失敗

            End If

        End Using

    End Sub

End Class

工具網站：
JSON 轉物件 http://json2csharp.com/
C# to VB : http://converter.telerik.com/



#專案： 紅科

jQuery 的參數提示總是 a, b, c 的看不懂 ? 請參考下圖:



上圖是引用 jquery-2.2.4.js 的結果.

下圖是引用 jquery.min.js 的結果.

大家會使用 jquery.min.js 的主要原因是, 主要是檔案大小"大幅縮小" 剩下 25% 左右. 但是....

減少的 75% = 270K, 而且只有第一次載入時會真的下載檔案.

所以要用哪一個呢 ? 這就留給你判斷了...