微信小程序> 微信小程序之分类页面功能-小程序种类-小程序界面开发

微信小程序之分类页面功能-小程序种类-小程序界面开发

浏览量:1916 时间: 来源:SL小飞
catalog.wxmlviewclass"containers"inputclass"search"type"text"value"{{keywrod}}"placeholder"输入搜索关键字"confirm-type"search"bindinput"inputChange"bindfocus"inputFocus"bindconfirm"onKeywordConfirm"/inputviewclass"catalog"wx:if"{{catalog}}"scroll-viewscroll-y"true"class"nav"viewviewclass"item{{indexstr?'active':''}}"wx:for"{{navlist}}"wx:key"{{item.id}}"data-index"{{index}}"bindtap"switchCate"data-floor"b{{index}}"{{item.name}}/view/view/scroll-viewviewclass"tops"scroll-viewscroll-y"true"class"right"scroll-into-view"{{floorNum}}"scroll-with-animation"true"scroll-top"{{scrolltop}}"bindscrolltolower"lower"data-index"{{index}}"viewclass"cate"data-id"{{item.id}}"viewclass"hd"imagesrc"../../static/images/left.png"/imagetextid"b{{index}}"class"txt"{{currentCategory.name}}系列/textimagesrc"../../static/images/right.png"/image/viewviewclass"bd"wx:for"{{currentCategory.subCategoryList}}"wx:key"{item.id}}"imagesrc"{{item.wap_banner_url}}"/imageviewclass"bd-pro"textclass"bd-pro-name"{{item.name}}/texttextclass"bd-pro-weight"{{item.num}}/textviewclass"bd-product"textclass"bd-pro-price"{{item.price}}/texttextclass"bd-product-text"bindtap"cartTap"+/text/view/view/view/view/scroll-view/view/view/viewcatalog.wxsspage{overflow:hidden;}.containers{height:100%;width:100%;background:#FFFFFF;display:flex;flex-direction:column;}.search{width:666rpx;height:70rpx;background:rgba(244,246,248,1);border-radius:17px;margin:20rpx42rpx34rpx42rpx;font-size:26rpx;color:#000;line-height:70rpx;text-align:center;}/*.input{font-size:26rpx;color:#bbb;line-height:70rpx;text-align:center;}*/.catalog{flex:1;width:100%;background:#fff;display:flex;border-top:1pxsolid#fafafa;}.nav{width:194rpx;height:980rpx;border-radius:16rpx;background-color:#f8f8f8;margin-right:30rpx;}.kong{height:20rpx;width:100%;}.nav.item{text-align:center;line-height:90rpx;width:194rpx;height:90rpx;color:#333;font-size:28rpx;margin-top:32rpx;}.nav.item.active{text-align:center;line-height:122rpx;width:208rpx;height:122rpx;border-left:10rpxsolid#fd7564;background:rgba(255,255,255,1);box-shadow:0px3px10px0pxrgba(253,117,100,0.16);border-radius:16rpx;}.tops{padding-top:10rpx;}.right{height:970rpx;}.cate{padding-left:10rpx;padding-right:40rpx;}.hd{margin:20rpx016rpx0;text-align:center;}.hdimage{width:32rpx;height:20rpx;}.hdtext{margin:016rpx;font-size:34rpx;color:#333;font-weight:normal;}.bd{width:472rpx;height:232rpx;border-radius:28rpx;background:rgba(248,248,248,1);display:flex;margin-top:28rpx;}.bdimage{width:228rpx;height:232rpx;border-radius:28rpx;}.bd-product{display:flex;justify-content:space-between;}.bd-pro{width:214rpx;height:232rpx;margin:30rpx;display:flex;flex-direction:column;}.bd-pro-name{color:#333;font-size:34rpx;}.bd-pro-weight{font-size:28rpx;color:#999;margin:24rpx020rpx0;}.bd-pro-price{font-size:24rpx;color:#a70900;}.bd-product-text{bottom:0;float:right;width:48rpx;height:48rpx;color:white;background-color:#fd7564;border-radius:50%;line-height:48rpx;text-align:center;}.fixeds{height:98rpx;border-radius:28rpx28rpx00;}.fixed-cart{width:666rpx;height:98rpx;background-color:#fd7564;left:42rpx;position:absolute;border-radius:28rpx;top:-15rpx;color:white;font-size:28rpx;text-align:center;line-height:98rpx;font-weight:100;font-family:SourceHanSansCN-Regular;}.commodity_screen{width:100%;height:100%;position:fixed;top:0;left:0;background:#000;opacity:0.5;overflow:hidden;z-index:1000;color:#fff;}.commodity_attr_box{width:100%;overflow:hidden;position:fixed;bottom:0;left:0;z-index:2000;height:916rpx;background:#f8f8f8;border-radius:28rpx28rpx00;}.top{height:166rpx;background:white;display:flex;padding:42rpx;}.topimage{width:166rpx;height:166rpx;border-radius:16rpx;}.yixuan{margin:26rpx026rpx34rpx;}.top-yi{color:#a70900;font-size:34rpx;}.text{font-size:46rpx;}.top-xuan{margin-top:14rpx;font-size:28rpx;color:#999;display:flex;}.top-xuantext{margin-right:10rpx;}.bottom{margin:48rpx42rpx30rpx42rpx;display:flex;flex-direction:column;}.kong{font-size:28rpx;color:#333;margin-bottom:34rpx;}.specification{display:flex;flex-direction:column;}.specificationtext{font-size:28rpx;color:#333;margin-bottom:34rpx;}.kong1{display:flex;justify-content:flex-start;flex-wrap:wrap;}.flavors{margin-right:28rpx;margin-bottom:28rpx;width:194rpx;height:84rpx;background:white;text-align:center;color:#333333;font-size:28rpx;line-height:84rpx;}.flavors.active{background:#fd7564;color:white;}.specifications{width:178rpx;height:88rpx;background:white;color:#333333;font-size:28rpx;text-align:center;line-height:88rpx;margin-right:28rpx;margin-bottom:28rpx;}.specifications.active{background:#fd7564;color:white;}catalog.jsvarutilrequire('../../utils/util.js');varapirequire('../../config/api.js');varappgetApp()Page({data:{navlist:[],id:0,str:0,skuNames:[],disableList:[],//标记规格中的不可选元素skuInfo:{},selected:[],catalog:true,categoryList:[],currentCategory:[],//scrollLeft:0,list:0,//scrollTop:0,goodsCount:0,strlist:[],pslist:{},scrolltop:0,flavor:'',heightArray:'900'},onLoad:function(options){//varidthis.data.idthis.getCatalog();//id.forEach((item,index){//console.log(item)//})},getCatalog:function(){letthatthis;varnavlistthis.data.navlistvarcurrentCategorythis.data.currentCategorywx.showLoading({title:'加载中...',});util.request(api.CatalogList).then(function(res){navlistres.data.categoryList,currentCategoryres.data.currentCategorythat.setData({navlist:navlist,currentCategory:currentCategory});console.log(res.data)wx.hideLoading();util.request(api.GoodsCount).then(function(res){that.setData({goodsCount:res.data.goodsCount});})})util.request(api.GoodsDetail,{id:that.data.id}).then(function(res){if(res.errno0){//varpriceArrynewArray;//把sku名称收集res.data.info.skuList.forEach(function(item){that.data.skuNames.push(item.title);priceArry.push(item.skuInfo.price);});varmaxMath.max.apply(Math,priceArry);varminMath.min.apply(Math,priceArry);that.setData({skuNames:that.data.skuNames,priceRange:min+"-"+max})if(res.data.userHasCollect1){that.setData({'collectBackImage':that.data.hasCollectImage});}else{that.setData({'collectBackImage':that.data.noCollectImage});}WxParse.wxParse('goodsDetail','html',res.data.info.goods_desc,that);that.getGoodsRelated();}});},checkedTap(e){vardisablee.currentTarget.dataset.disable;//是否可选if(disable!null!disable)return;varthatthis;vargoodsthat.data.goods;vartitleIdxe.currentTarget.dataset.titleidx;//规格组名称下标vardetialIdxe.currentTarget.dataset.detailidx;//规格明细下标goods.specList[titleIdx].chooseSkudetialIdx;//设置选中的规格明细下标到字段chooseSkuvardetailNamee.currentTarget.dataset.detailname;//选中的规格名称that.data.selected[titleIdx]detailName;//varspec0goods.specList[0];varspec1goods.specList[1];//封装sku的可选控制数组varobj0[];varobj1[];that.data.disableList.length0;//清空不可选元素disableList的集合//判断是否是两个规格以上的if(that.data.goods.specList.length2){spec0.detail.forEach(function(item){varisIncludethat.data.skuNames.some(function(_item){returnitem_item;});obj1.push(isInclude);//清空已选if(!isInclude){if(that.data.selected[0]item){that.data.selected[0]"";that.data.goods.specList[0].chooseSkunull;}}})}else{switch(titleIdx){case0://选中的是第一个规格//计算规格元素的可选spec1.detail.forEach(function(item){vartitleStrdetailName+"_"+item;//判断当前组合是否存在skuNames中varisIncludethat.data.skuNames.some(function(item){returnitemtitleStr;});obj1.push(isInclude);//清空已选if(!isInclude){if(that.data.selected[1]item){that.data.selected[1]"";that.data.goods.specList[1].chooseSkunull;}}});break;case1://选中的是第二个规格spec0.detail.forEach(function(item){vartitleStritem+"_"+detailName;//判断当前组合是否存在skuNames中varisIncludethat.data.skuNames.some(function(item){returnitemtitleStr;})//清空已选if(!isInclude){if(that.data.selected[0]item){that.data.selected[0]"";that.data.goods.specList[0].chooseSkunull;}}obj0.push(isInclude);});break;}}that.data.disableList.push(obj0);that.data.disableList.push(obj1);that.setData({goods:goods,disableList:that.data.disableList,selected:that.data.selected});that.renderSkuInfo();},//渲染页面上sku的价格信息renderSkuInfo:function(){varskuNamethis.data.selected.join("_");varskuInfo{};this.data.goods.skuList.forEach(function(item){if(item.titleskuName){skuInfoitem.skuInfo;}})this.setData({skuInfo:skuInfo});},getCurrentCategory:function(index){letthatthis;varcurrentCategorythis.data.currentCategoryvarid0wx.getStorage({key:'dj',success:function(res){idres.datautil.request(api.CatalogCurrent,{id:id}).then(function(res){currentCategoryres.data.currentCategorythat.setData({currentCategory:currentCategory});});},})},cartTap(e){varthatthis;if(this.data.showModalStatusfalse){this.data.showModalStatustrue}else{this.data.showModalStatusfalse}that.setData({showModalStatus:this.data.showModalStatus})},cartsTap(){varthatthis;varpricethis.data.skuInfo.pricevarskuNamethis.data.selected.join("_");if(price!undefined){util.request(api.CartAdd,{goodsId:this.data.goods.id,number:this.data.number,skuName:skuName},'POST','application/json').then((res){let_resresif(_res.errno0){wx.showToast({title:'添加成功',})}console.log(_res)})this.data.showModalStatusfalsethat.setData({showModalStatus:this.data.showModalStatus})}else{wx.showToast({title:'请选择好规格',})}},lower(e){varthatthis;varidthis.data.idvarstrthis.data.strvarscrolltopthis.data.scrolltopvarnavlistthis.data.navlistvarcurrentCategorythis.data.currentCategoryif(currentCategory.idnavlist[str].id){idnavlist[str+1].idutil.request(api.CatalogCurrent,{id:id}).then(function(res){currentCategoryres.data.currentCategorythat.setData({currentCategory:currentCategory});});}elseif(strnavlist.length){idnavlist[0].idutil.request(api.CatalogCurrent,{id:id}).then(function(res){currentCategoryres.data.currentCategorythat.setData({currentCategory:currentCategory});});}wx.showLoading({title:'加载中....',})scrolltop0that.setData({scrolltop:scrolltop,id:id+1,str:str+1})},hideModal:function(){this.hideView();},hideView(){//隐藏遮罩层varanimationwx.createAnimation({duration:200,timingFunction:"linear",delay:0})this.animationanimationanimation.translateY(300).step()this.setData({animationData:animation.export(),})setTimeout(function(){animation.translateY(0).step()this.setData({animationData:animation.export(),showModalStatus:false})}.bind(this),200)},switchCate:function(e){varthatthis;varscrolltopthis.data.scrolltopvarfloorNume.currentTarget.dataset.floor;varindexe.currentTarget.dataset.index;//varcurrentTargete.currentTargetscrolltop2that.setData({floorNum:floorNum,str:index,scrolltop:scrolltop})console.log(index)wx.setStorage({key:'dj',data:this.data.navlist[index].id,})this.getCurrentCategory(e.currentTarget.dataset.index);//console.log(index)},onReady:function(){//页面渲染完成},onShow:function(){//页面显示},onHide:function(){//页面隐藏},onUnload:function(){//页面关闭},//getList:function(){//varthatthis;//util.request(api.ApiRootUrl+'api/catalog/'+that.data.currentCategory.cat_id)//.then(function(res){//that.setData({//categoryList:res.data,//});//});//},//switchCate:function(event){//varthatthis;//varcurrentTargetevent.currentTarget;//if(this.data.currentCategory.idevent.currentTarget.dataset.id){//returnfalse;//}//this.getCurrentCategory(event.currentTarget.dataset.id);//}})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎