template.helper 方法 优惠券后台选择商品功能
程序员文章站
2022-03-27 14:16:33
...
最近在做一个优惠券的功能，选择可用商品和不可用的商品的时候，用的是同一个弹出层，同一个接口数据，但是要区分可用商品和不可用商品的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)
}
});