原生js實現列表渲染及列表單選

css部分：

.picker_header{ display: flex;}
    /*卡列表綁定*/
    .option-picker .option-picker-cell.option:after {content: " ";position: absolute;bottom: 0;left: 1rem; right: 1rem;border-bottom: 1px solid #eee;}
    .goodinfo{padding-left: 0 !important;text-align: center;}
    .card1{
        background: #23ab02a1 !important;
    }
    #picker_card{
        display: none;
    }
    .card_i{padding: 0 !important;}
    .fui-list-angle{width: 20px;height: 20px;}
    .fui-list-angle img{width: 100%;height: 100%;}
    /*綁卡彈框*/
    .fui-dialog {
        background: #fff;
        text-align: center;
        border-radius: 0.35rem;
        padding-top: 0.3rem;
        overflow: hidden;
    }
    .fui-dialog-title {
        padding: .2rem .5rem;
        font-weight: 400;
        font-size: 0.8rem;
    }
    .fui-dialog-text {
        text-align: left;
    }

    .fui-dialog-text {
        padding: .4rem .8rem;
        font-size: 0.75rem;
        color: #888;
    }
    .fui-dialog-btns {
        position: relative;
        line-height: 2rem;
        margin-top: .3rem;
        font-size: 0.8rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .fui-dialog-btns a {
        position: relative;
    }
    .fui-dialog-btns a {
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        color: #666;
        text-decoration: none;
    }
    .fui-modal.dialog-modal.in {
        opacity: 1;
        -moz-transition-duration: 300ms;
        -webkit-transition-duration: 300ms;
        /* transition-duration: 300ms; */
        /* -webkit-transform: translate3d(0, 0, 0) scale(1); */
        transform: translate3d(0, 0, 0) scale(1);
    }

    .fui-modal.dialog-modal {
        position: absolute;
        z-index: 1001;
        left: 50%;
        margin-left: -6.75rem;
        margin-top: 0;
        top: 50%;
        width: 13.5rem;
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0) scale(1.2);
        transform: translate3d(0, 0, 0) scale(1.2);
        -webkit-transition-property: -webkit-transform, opacity;
        transition-property: transform, opacity;
        height: auto;
    }
    .fui-modal {
        position: absolute;
        width: 100%;
        z-index: 1001;
    }
    .shadow {
        position: fixed;
        background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
        width: 100%;
        height: 100%;
        left: 0;
        opacity: 1;
        top: 0;
        z-index: 1000;
        -moz-transition-duration: 400ms;
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
    }
    #shadow{
        display: block;
    }

 

HTML部分：

<!--銀行卡彈框-->
<div class="fui-modal picker-modal in" id="picker_card"><div class="option-picker " style="height: 583.6px;">
        <div class="option-picker-inner">
            <div class="option-picker-cell goodinfo picker_header">
                <div class="closebtn" onclick="selectHidePicker1()"><i class="icon icon-guanbi1"></i></div>
                <div class="info info-total" style=" margin-left: 0.15rem; flex: 1;">請選擇銀行卡</div>
            </div>
            <div class="option-picker-options" style="height: 482.6px;">
                <div class="option-picker-cell option spec">
                    <div class="select" id="select111">

                    </div>
                </div>
            </div>
            <div style="z-index: 2; background: #fb9a09;" class="fui-navbar " >
                <a href="javascript:;" class="nav-item btn confirmbtn" style="background: #fb9a09;"  onclick="selectHidePicker()">肯定</a>
            </div>
        </div>
     </div>
</div>

<!--    判斷雲卡綁定彈框-->
    <div class="shadow" id="shadow">
        <div class="fui-modal  dialog-modal in">
            <div class="fui-dialog  fui-dialog-confirm" style="margin-top: -67px;">
                <div class="fui-dialog-title">提示</div>
                <div class="fui-dialog-text">請先開戶再綁定銀行卡！</div>
                <div class="fui-dialog-btns">
                    <a class="" href="javascript:;" onclick="selectHidePicker1()">取消</a>
                    <a class="" href="index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=chan" onclick="selectHidePicker1()">去開戶</a>
                </div>
            </div>
        </div>
    </div>

 

JS部分：

<script>
    var obj = [
        {
            name: '中國建設銀行',
            card_id: '621700713001741220',
            id: 1,
        },
        {
            name: '中國工商銀行',
            card_id: '2317007130001741222',
            id: 3,
        }, {
            name: '中國浦發銀行',
            card_id: '3267007130001741125',
            id: 2,
        }, {
            name: '貴陽銀行',
            card_id: '456007130001741234',
            id: 5,
        },
    ];
    var card_id;//定義被選中卡的id
    function selectHidePicker1(){//關閉彈框
        $("#picker_card")[0].style.display = 'none';
        $("#shadow")[0].style.display = 'none';
    };
    function selectObj(id) {
        card_id = id;
        let objImage = "card_image"+id;
        let imgObj = $('#select111').find("img");//查找#select111下全部img標籤
        $.each(imgObj,function(k,v){
            let imgid = imgObj[k].id;
            if(imgid == objImage){
                $("#"+imgid).attr('src','../addons/ewei_shopv2/static/images/manager/z-choose.png');
            }else {
                $("#"+imgid).attr('src','../addons/ewei_shopv2/static/images/manager/q-choose.png');
            }
        })
        console.log('card_id',card_id)
    };
    function  openCard() {
        $("#picker_card")[0].style.display = 'block'
          //向後臺請求數據並作出邏輯判斷
        $.ajax({
            method:'POST',
            url:'',
            datatype:'json',
            data:'',
            success:function (res){
                console.log(res)
            }
        })

         rendering(obj);
    };


    function selectHidePicker(){//肯定提交
          if(card_id){
              //    向後臺請求支付的銀行卡
              console.log(card_id)
              /*$.ajax({
                  method:'POST',
                  url:'',
                  datatype:'json',
                  data:'',
                  success:function (res){
                      console.log(res)
                      browserRedirect()
                  }
              })*/
              browserRedirect()
          }else {
              FoxUI.toast.show('您尚未選擇銀行卡!');
          }


    }
//    解析列表並渲染
    function rendering(dataList) {
        let arrayLists = '' ;
        for (let item=0;item<dataList.length;item++){
            arrayLists +=
                `
                <div class='fui-list card_i' data-type='credit' onclick="selectObj(${dataList[item].id})">
                        <div class='fui-list-media'>
                            <i class='icon icon-card012 credit card1' style="color:#fb9a09"></i>
                        </div>
                        <div class='fui-list-inner'>
                            <div class="title">${dataList[item].name}</div>
                            <div class="subtitle c999 f24"><span class='text-danger'>${dataList[item].card_id}</span>
                            </div>
                        </div>
                        <div class='fui-list-angle'>
                            <img id="card_image${dataList[item].id}" src="../addons/ewei_shopv2/static/images/manager/q-choose.png" alt="">
                        </div>
                    </div>
                `
        };
        $("#select111")[0].innerHTML = arrayLists
    };
    //路由跳轉判斷移動端仍是pc端
    function browserRedirect() {
        var sUserAgent= navigator.userAgent.toLowerCase();
        var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp= sUserAgent.match(/midp/i) == "midp";
        var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid= sUserAgent.match(/android/i) == "android";
        var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            window.location.href= 'index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.success&id=39&result=true';//手機端跳轉頁面URL
        } else {
            window.location= 'index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.success&id=39&result=true';//PC端跳轉頁面URL
        }
    }
</script>

文中用到的圖片：