template.helper 方法 优惠券后台选择商品功能

 

最近在做一个优惠券的功能，选择可用商品和不可用的商品的时候，用的是同一个弹出层，同一个接口数据，但是要区分可用商品和不可用商品的input的选中状态

 第一步 ：当你点击可用或者不可用的商品时，弹出可用或者不可用的商品列表

 //选择商品
        $(document).on("click",".select_use_goods",function () {
            $("#GoodsModal").modal("show"); //弹出层
            page = 1; //滚动加载恢复到第一页
            goodsObj = {}; //清空商品数据
            $(".goods_box").html('');//清空盒子
            availableGoods();//请求接口获取数据
        });

        var page = 1;
        var page_size = 20;
        var loading = false;
        var activeLoading = false;
        var availableGoods = function(){
            loading = true;
            $(".loading").css("display","block");
            //可选商品
            $.Ajax({
                url:api.availableGoods,
                is_login:true,
                data:{
                    page: page
                    , page_size:page_size  //找多少条
                },
                success:function (res) {
                    var goods_box = "goods_box";
                    var tem_goods_box = template(goods_box,res.result);
                    $(".goods_box").append(tem_goods_box); //渲染模板
                    res.result.data.map(function (item,index) {
                       var key = item.id+"_";
                        goodsObj[key] = item; //拿到接口返回的数据存到goodsObj 对象中
                     ;
                    });
                    disposeImageUrl()；//图片处理方法
                    if (res.result.data.length == 0){
                        if (page == 1){
                            $(".loading").css("display","none");
                            $(".no_data").css("display","block");
                        } else {
                            $(".loading").css("display","none");
                            $(".no_data").css("display","none");
                        }
                        loading = true
                    } else {
                        loading = false
                        if (res.result.data.length < page_size){
                            $(".loading").css("display","none");
                            $(".no_data").css("display","none");
                            loading = true
                        }
                        $(".loading").css("display","none");
                        $(".no_data").css("display","none");


                    }
                    page++;

                }
            })
        };
//滚动加载
        $(".goods_box").scroll(function () {
            if (loading) return
            var scrollTop = $(this).scrollTop();
            var scrollHeight =$(this).get(0).scrollHeight;
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight >= scrollHeight) {
                availableGoods();
            }
        });

 第二步，当你选中完成后，点击保存的时候

<script type="text/html" id="goods_box">
    {{each data}}
    <div class="active_all_list">
        <div class="active_item" style="flex: 1">
            {{#$value.id | isChecked}} //input 按钮     调用isChecked 这个模板方法 $value.id相当于 回调里的value
            <div style="margin-left: 5px;width: 100%" >
                <div class="goods-container">
                    <div class="goods-image">
                        <img style="width:60px;display: inline-block; vertical-align: middle;" class="goodsImage" data-state="0" data-value="{{$value.image}}" src="../img/baocun.png"/>
                    </div>
                    <div class="goods-info">
                        <div class="goods-info_title">{{$value.name}}</div>
                        <div class="goods-info_brief"></div>
                        <div class="goods-info_sub">价格：¥{{$value.price}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="active_item" style="width: 100px">
            {{$value.category_name}}
        </div>
        <div class="active_item" style="width: 100px">
            {{$value.stock}}
        </div>
        <div class="active_item" style="width: 100px">
            {{$value.sku_code}}
        </div>
        <div class="active_item" style="width: 100px">
            {{$value.sales_count}}
        </div>
        <div class="active_item" style="width: 100px">
            {{if $value.goods_status == 10}}
             <span>上架</span>
            {{else if $value.goods_status == 20}}
            <span>下架</span>
            {{else if $value.goods_status == 30}}
            <span>仓库中</span>
            {{/if}}
        </div>
    </div>
    {{/each}}
</script>

<script>
//isChecked  相当于方法名称 event 
    template.helper('isChecked',function(value){
        console.log(availableGoodsData);//缓存选中可用商品的数据
        console.log(availableNotGoodsData);//缓存选中不可用的商品数据
        console.log(value);
        var type = $("input[name=zen_goods_radio][type=radio]:checked").attr("data-type");
        console.log(type);
        var key = value + '_';
        if(type == 2){ //可用商品
            if(availableGoodsData[key]!=undefined){
                return '<input class="zen_scene_radio" name="zen_all_goods_radio" data-id="'+value+'" checked  type="checkbox">';
            }else {
                return '<input class="zen_scene_radio" name="zen_all_goods_radio" data-id="'+value+'"   type="checkbox">';
            }
        }else { //不可用商品
            if(availableNotGoodsData[key]!=undefined){
                return '<input class="zen_scene_radio" name="zen_all_goods_radio" checked data-id="'+value+'"  type="checkbox">';
            }else {
                return '<input class="zen_scene_radio" name="zen_all_goods_radio" data-id="'+value+'"   type="checkbox">';
            }
        }
    }) ;
    //    隐藏的数量部分，原放在title下面
    //    {{#$value.count | parseIntFun}}
</script>

 第三步，点击保存的时候，判断是可用还是不用商品

  //保存商品
        $(document).on("click","#sure",function () {
            // var type = $(this).data("type");//2 可用 3 不可用
            var type = $("input[name=zen_goods_radio][type=radio]:checked").attr("data-type");
            console.log(type)
            if (type == 2){//如果是可用商品 将选中的商品id存到availableGoodsData对象中
                console.log("type="+2)
                var obj = [] ;
                $("input[name=zen_all_goods_radio][type=checkbox]").map(function (item,index) {
                    if ($(this).is(":checked")){
                        var key = $(this).data("id")+"_";

                        availableGoodsData[key] = goodsObj[key];
                        obj.push(goodsObj[key]);
                    }
                });
                if (obj.length == 0 ){
                    $(".show_goods_active").html(" ");
                    $("#GoodsModal").modal("hide");
                }else {
                    var show_goods_active = "show_goods_active";
                    var tem_show_goods_active = template(show_goods_active,obj);
                    $(".show_goods_active").html(tem_show_goods_active);
                    disposeImageUrl();
                    $("#GoodsModal").modal("hide");
                }
                console.log(availableGoodsData)
            } else { //如果是不可用商品 将选中的商品存到availableNotGoodsData 对象中
                console.log("type="+3)
                var obj = [] ;
                $("input[name=zen_all_goods_radio][type=checkbox]").map(function (item,index) {
                    if ($(this).is(":checked")){
                        var key = $(this).data("id")+"_";
                        availableNotGoodsData[key] = goodsObj[key];
                        obj.push(goodsObj[key]);
                    }
                });
                if (obj.length == 0 ){
                    $(".not_goods").html(" ");
                    $("#GoodsModal").modal("hide");
                }else {
                    var not_goods = "not_goods";
                    var tem_not_goods = template(not_goods,obj);
                    $(".not_goods").html(tem_not_goods);
                    disposeImageUrl();
                    $("#GoodsModal").modal("hide");
                }
                console.log(availableNotGoodsData)
            }


        });