AngularJS實現二維碼資訊的整合思路

需求

      實現生成的二維碼包含訂單詳情資訊。

思路

獲取的內容資料如下:

      現在可以獲取到第一級資料，第二級資料data獲取不到。利用第一級資料的獲取方法獲取不到第二級資料。

for(i in data){
alert(i);           //獲得屬性 
if(typeof(data[i]) == "object"){
var tmp = data[i];
for(j in tmp){
alert(tmp[j]);
}
}else{
alert(data[i]);  //獲得屬性值
}
}
 

      經過層層解析，獲取到的資料結構如下所示:

      經過進一步的優化改進，獲取到的資料詳情如下所示:

      接下來面臨的問題就是:如何實現兩個html頁面間傳值？通過搜尋,不同頁面之間的傳值方法有:1.地址傳值(get)  2.cookie  3.localstorage  4.sessionStorage  5.flash  6.依賴後端伺服器。根據不同場景和需求選擇不同方案。

      經過自己的多次嘗試，終於在localstorage這條路上走通了。

      但是在二維碼顯示的環節上遇到了問題，太大(見下圖左)的話影響佈局，太小(見下圖右)的話二維碼無法解析。

      自己必須找到一個折中的辦法，看來得重新佈局一下了，原始佈局如下所示:

      改善的頁面佈局如下：

核心程式碼

js

var tmp;
var medInfo = "{";
for(i in data){
//alert(i);           // 獲得屬性 
var trans;
//  對獲取資訊進行篩選
if(typeof(i) != "undefined" && i != "stat" && i != "merch_uid" && i != "result" && i != "errtext") {
switch (i) {
    case "tx_time":
    	trans = "交易時間";
        break;
    case "buy_uid":
    	trans = "購藥者帳號";
        break;
    case "buy_addr":
    	trans = "收貨地址";
        break;
    case "receiver":
    	trans = "收貨人";
        break;
    case "receiver_tel":
    	trans = "收貨人電話";
        break;
    case "old_amt":
    	trans = "藥品總價";
        break;
    case "amt":
    	trans = "支付金額";
        break;
    case "merch_name":
    	trans = "配送藥店";
        break;
    case "msg":
    	trans = "客戶留言";
        break;
    case "cnt":
    	trans = "藥品種類";
        break;
    case "data":
    	trans = "藥品列表";
        break;
    default:
}
medInfo += "\"" + trans + "\":";
if(typeof(data[i]) == "object"){
tmp = data[i];
//alert("這是一個object物件");
}else{
//alert(data[i]);  // 獲得屬性值
medInfo += "\"" + data[i] + "\",\n";
}
}
}
//alert(tmp.length);
tag = 1;
// 獲取二級資料(購物車內容)
for(k = 0; k < tmp.length; k++){
zqy = tmp[k];
for(j in zqy){
//alert(j);
var trans;
//  對獲取資訊進行篩選
switch (j) {
  case "medcnt":
  	trans = "藥品數量";
     break;
  case "medamt":
  	trans = "金額總計";
    break;
  case "medname":
   	trans = "藥品名稱";
    break;
  case "medprice":
   	trans = "藥品價格";
    break;
   case "medid":
   	trans = "藥品ID";
    break;
   default:
       
}
if(tag == 1){
medInfo += "\n[\"" + trans + "\":";
tag = 2;
}else{
medInfo += "\"" + trans + "\":";
}
//alert(zqy[j]);
medInfo += "\"" + zqy[j] + "\",\n";
}
if(k == tmp.length-1){
medInfo += "]";
}else{
medInfo += "],[";
}
}
medInfo += "}";
//alert(medInfo);// 最終的訂單詳情
document.getElementById("sunny").innerHTML = medInfo;
//alert(document.getElementById("sunny").innerHTML);
localStorage.setItem('billInfo', medInfo);
 

Html js

<script>
 // 當頁面載入的時候可以呼叫某些函式
    window.onload = function(){
//     alert(localStorage.getItem('billInfo'));
console.log(localStorage.getItem('billInfo'));
    	var a = parent.document.getElementById("sunny");
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 96,	// 設定二維碼寬高96
            height : 96
        });
        qrcode.makeCode(localStorage.getItem('billInfo'));	// 預設二維碼內容
//    qrcode.makeCode("http://192.168.1.105:8088/lmapp/billInformation.html");
    };
</script>

有圖有真相

參考文獻

美文美圖