From cb2e462f16915027a613784965f5c2aa5119451d Mon Sep 17 00:00:00 2001 From: yvan.ni <765199919@qq.com> Date: Sat, 29 Aug 2020 16:59:41 +0800 Subject: [PATCH] 1. 底部导航的优化， 以及显示购物车圆圈数量 2. 分类点击跳转返回 3. 组件点击返回不加载更多的动画效果 --- app.js | 205 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------------------------------------------- app.json | 45 +++++++++++++++++++++++++++++++++++++++++++-- components/diy_goodsGroup/diy_goodsGroup.js | 1 + components/goods_list/goods_list.js | 2 ++ custom-tab-bar/index.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ custom-tab-bar/index.json | 3 +++ custom-tab-bar/index.wxml | 22 ++++++++++++++++++++++ custom-tab-bar/index.wxss | 13 +++++++++++++ pages/cart/cart/cart.js | 29 +++++++++++++++++++++-------- pages/cart/cart/cart.wxml | 4 ++-- pages/goods/categoryList/categoryList.js | 38 ++++++++++++++++++++++++++++++++------ pages/goods/categoryList/categoryList.wxml | 12 ++++++------ pages/goods/goodsInfo/goodsInfo.wxml | 2 +- pages/index/index/index.js | 25 ++++++++++++++++++++++--- pages/index/index/index.wxml | 5 ++--- pages/user/index/index.js | 24 +++++++++++++++++++----- pages/user/index/index.wxml | 4 ++-- 17 files changed, 334 insertions(+), 175 deletions(-) create mode 100644 custom-tab-bar/index.js create mode 100644 custom-tab-bar/index.json create mode 100644 custom-tab-bar/index.wxml create mode 100644 custom-tab-bar/index.wxss diff --git a/app.js b/app.js index 604c9fe..971fb91 100644 --- a/app.js +++ b/app.js @@ -5,131 +5,34 @@ var api = require("./api/api.js") //公共方法和变量 App({ - editTabBar: function (taht,stoid,url) { - var that=this; - var th = taht - //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。 - var custum_data=this.globalData.custum_data; - var isIpx=this.globalData.isIpx; - var is_read=this.globalData.is_read; - //var curPageArr = getCurrentPages(); //获取加载的页面 - //var curPage = curPageArr[curPageArr.length - 1]; //获取当前页面的对象 - var curPage=th; - var pagePath = curPage.route; //当前页面url - if (pagePath.indexOf('/') != 0) { - pagePath = '/' + pagePath; - } - if(is_read){ - if(custum_data){ - that.set_custom_nav(custum_data,isIpx,pagePath,url,curPage); - }else{ - var tabBar = { - 'iscustom':2, - 'url':url, - 'active':pagePath, - 'isIpx':isIpx, - cartGoodsNum:this.globalData.cartGoodsNum - } - curPage.setData({ - tabBar:tabBar, - isIpx:isIpx, - cartGoodsNum:this.globalData.cartGoodsNum - }) - } - - }else{ - var isIpx = false; - wx.getSystemInfo({ - success: (res) => { - // console.log(res) - let modelmes = res.model; //手机品牌 - if (modelmes.indexOf('iPhone X') != -1) {　　//XS,XR,XS MAX均可以适配,因为indexOf()会将包含'iPhone X'的字段都查出来 - isIpx = true - } - //缓存住，下次就不调用接口了 - that.globalData.isIpx=isIpx; - getApp().request.promiseGet("/api/weshop/storeFooter/get/"+stoid, { - }).then(res => { - this.globalData.is_read=true; - var e = res; - if(e.data.code != -1){ - that.globalData.custum_data=e.data.data; - - var itemList = that.globalData.custum_data.data; - itemList = JSON.parse(itemList) - - if(!itemList[0].weappurl){ - that.globalData.custum_data=null; - var tabBar = { - 'iscustom':2, - 'url':url, - 'active':pagePath, - 'isIpx':isIpx, - cartGoodsNum:this.globalData.cartGoodsNum - } - curPage.setData({ - tabBar:tabBar, - isIpx:isIpx, - cartGoodsNum:this.globalData.cartGoodsNum - }) - }else{ - that.set_custom_nav(e.data.data,isIpx,pagePath,url,curPage); - } - - }else{ - var tabBar = { - 'iscustom':2, - 'url':url, - 'active':pagePath, - 'isIpx':isIpx, - cartGoodsNum:this.globalData.cartGoodsNum - } - curPage.setData({ - tabBar:tabBar, - isIpx:isIpx, - cartGoodsNum:this.globalData.cartGoodsNum - }) - } - - }) - }, - }) - } - - - }, - set_custom_nav(data,isIpx,pagePath,url,curPage){ - //缓存住，下次就不调用接口了 - var itemList = data.data; - itemList = JSON.parse(itemList) - //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。 - for (var i = 0; i < itemList.length; i++) { - itemList[i].active = false; - if (itemList[i].weappurl == pagePath) { - itemList[i].active = true; //根据页面地址设置当前页面状态 - } - } - - //如果当服务端返回的值有数据就渲染数据到页面 - var tabBar = { - 'iscustom':1, - 'url':url, - 'active':pagePath, - 'list':itemList, - 'backgroundColor': data.bkcolor, - 'selectedColor' : data.fontcolor_sele, - 'color':data.fontcolor, - 'length':itemList.length, - 'isIpx':isIpx, - cartGoodsNum:this.globalData.cartGoodsNum - } - curPage.setData({ - tabBar:tabBar, - isIpx:isIpx, - cartGoodsNum:this.globalData.cartGoodsNum - }) - }, + def_list:[ + { + "weappurl": "pages/index/index/index", + "nav_name": "首页", + "src": t.imghost+"/miniapp/images/bar/index.png", + "src_sele": t.imghost+"/miniapp/images/bar/index_on.png", + }, + { + "weappurl": "pages/goods/categoryList/categoryList", + "nav_name": "分类", + "src": t.imghost+"/miniapp/images/bar/fl.png", + "src_sele": t.imghost+"/miniapp/images/bar/fl_on.png" + }, + { + "weappurl": "pages/cart/cart/cart", + "nav_name": "购物车", + "src": t.imghost+"/miniapp/images/bar/car.png", + "src_sele": t.imghost+"/miniapp/images/bar/car_on.png" + }, + { + "weappurl": "pages/user/index/index", + "nav_name": "我的", + "src": t.imghost+"/miniapp/images/bar/user.png", + "src_sele": t.imghost+"/miniapp/images/bar/user_on.png" + } + ], + globalData: { cartGoodsNum:0, //购物车总数量 isTabBar :false, @@ -142,7 +45,7 @@ App({ config2: null, //门店配置 code: null, heigth:0, - user_id:null,// 3674923,// 4379287,// null,// 5682068, + user_id:6519826,// 3674923,// 4379287,// null,// 5682068, buy_now:null, picklist:null, //门店列表 wuliuprice: null, //物流价格表 @@ -168,6 +71,7 @@ App({ auth: o, request: a, onLaunch: function() { + wx.hideTabBar(); this.initExt(); var t = this.globalData.setting; //console.log(t) @@ -208,7 +112,6 @@ App({ console.log(t); t.appName ? (o.appName = t.appName, o.stoid = t.stoid) : tt=1; - }, //首页的第一次登录 @@ -433,13 +336,9 @@ App({ "/pages/cart/cart/cart","/pages/user/index/index"]; if(arr_tabbar.indexOf(url)!=-1){ if(url.indexOf("categoryList?type=1")!=-1) this.globalData.cat_type=1; - if(url.indexOf("categoryList?type=2")!=-1) this.globalData.cat_type=2; - if (getCurrentPages().length > 9) { - wx.redirectTo({url: url,}) //跳到tabbar页 - }else{ - wx.navigateTo({url: url,}) //跳到tabbar页 - } - + if(url.indexOf("categoryList?type=2")!=-1) this.globalData.cat_type=2; + wx.switchTab({url: url,}) //跳到tabbar页 + }else{ if (getCurrentPages().length > 9) { wx.redirectTo({url: url,}) //跳到非tabbar页 @@ -527,6 +426,7 @@ App({ requestCardNum: function(th) { if(!this.globalData.user_id) return false; this.request.get("/api/weshop/cart/page", { + isShoeLoading:false, data: { store_id: this.globalData.setting.stoid, user_id: this.globalData.user_id, @@ -540,14 +440,13 @@ App({ num += e.data.data.pageData[i].goods_num; } } - - + getApp().globalData.cartGoodsNum=num; /*--- wx.setTabBarBadge({ //tabbar右上角添加文本 index: 2, ////tabbar下标 text: '' + num //显示的内容 });--*/ - th.setData({['tabBar.cartGoodsNum']:num}); + th.getTabBar().setData({cartGoodsNum:num}); } }); }, @@ -606,7 +505,39 @@ App({ str = str.replace(reg, ''); } return str; - } + }, + + getPageIndex:function(curPage){ + + var pagePath = curPage.route; //当前页面url + if (pagePath.indexOf('/') != 0) { + pagePath = '/' + pagePath; + } + + var index=0; + + if(this.globalData.custum_data){ + var itemList = this.globalData.custum_data.data; + itemList = JSON.parse(itemList); + for(var i in itemList){ + var item=itemList[i] + if(pagePath.indexOf(item.weappurl)!=-1){ + index=i;break; + } + } + + }else{ + var itemList=this.def_list; + for(var i in itemList){ + var item=itemList[i] + if(pagePath.indexOf(item.weappurl)!=-1){ + index=i;break; + } + } + } + return index; + + } }); diff --git a/app.json b/app.json index bfcbcdd..5b2ae35 100644 --- a/app.json +++ b/app.json @@ -107,7 +107,6 @@ ] }], - "permission": { "scope.userLocation": { "desc": "获取你的位置信息" @@ -121,6 +120,48 @@ "backgroundColor": "#ffffff", "enablePullDownRefresh": true }, + + "tabBar": { + "custom":true, + "color": "#6e6d6b", + "selectedColor": "#f23030", + "borderStyle": "white", + "backgroundColor": "#ffffff", + "list": [ + { + "pagePath": "pages/index/index/index", + "text": "首页", + "iconPath": "packageA/images/bar/index.png", + "selectedIconPath": "packageA/images/bar/index_on.png" + }, + { + "pagePath": "pages/goods/categoryList/categoryList", + "text": "分类", + "iconPath": "packageA/images/bar/fl.png", + "selectedIconPath": "packageA/images/bar/fl_on.png" + }, + { + "pagePath": "pages/cart/cart/cart", + "text": "购物车", + "iconPath": "packageA/images/bar/car.png", + "selectedIconPath": "packageA/images/bar/car_on.png" + }, + { + "pagePath": "pages/user/index/index", + "text": "我的", + "iconPath": "packageA/images/bar/user.png", + "selectedIconPath": "packageA/images/bar/user_on.png" + } + ] + }, + "debug": false, - "sitemapLocation": "sitemap.json" + "sitemapLocation": "sitemap.json", + "usingComponents": { + "customtabbar":"custom-tab-bar/index" + } + + + + } \ No newline at end of file diff --git a/components/diy_goodsGroup/diy_goodsGroup.js b/components/diy_goodsGroup/diy_goodsGroup.js index b5f9507..eeaede0 100644 --- a/components/diy_goodsGroup/diy_goodsGroup.js +++ b/components/diy_goodsGroup/diy_goodsGroup.js @@ -319,6 +319,7 @@ Component({ card_init: function() { var th = this,os=getApp().globalData.setting; getApp().request.get("/api/weshop/users/get/" + os.stoid + "/" + getApp().globalData.user_id, { + isShowLoading:false, success: function(e) { getApp().globalData.userInfo = e.data.data; getApp().getConfig2(function(e) { diff --git a/components/goods_list/goods_list.js b/components/goods_list/goods_list.js index 90ea97d..fffb4dc 100644 --- a/components/goods_list/goods_list.js +++ b/components/goods_list/goods_list.js @@ -34,6 +34,7 @@ Component({ init: function () { var th = this; getApp().request.get("/api/weshop/users/get/" + os.stoid + "/" + getApp().globalData.user_id, { + isShowLoading:false, success: function (e) { getApp().globalData.userInfo = e.data.data; getApp().getConfig2(function (e) { @@ -93,6 +94,7 @@ Component({ if (that.data.is_no_more == 0) return false; var curPage = that.data.curPage; getApp().request.get('/api/weshop/goods/page?page', { + isShowLoading:false, data: { is_mainshow: 1, isonsale: 1, diff --git a/custom-tab-bar/index.js b/custom-tab-bar/index.js new file mode 100644 index 0000000..fb3c7d6 --- /dev/null +++ b/custom-tab-bar/index.js @@ -0,0 +1,75 @@ +var app = getApp(), os = app.globalData.setting; + +Component({ + data:{ + fontcolor:'#6e6d6b', + fontcolor_sele:'#f23030', + backgroundColor:'#ffffff', + active:-1, + list:app.def_list, + cartGoodsNum:0, + }, + + + lifetimes: { + attached: function() { + + //购物车显示商品金额 + this.setData({cartGoodsNum:getApp().globalData.cartGoodsNum}); + var th=this; + + var is_read=getApp().globalData.is_read; + var custum_data=getApp().globalData.custum_data; + if(is_read){ + if(custum_data){ + this.set_list(custum_data); + } + }else{ + var stoid=os.stoid + getApp().request.promiseGet("/api/weshop/storeFooter/get/"+stoid, { + }).then(res => { + getApp().globalData.is_read=true; + var e = res; + if(e.data.code != -1){ + var itemList = e.data.data.data; + itemList = JSON.parse(itemList) + //如果是有定义自定义导航的小程序链接 + if(itemList[0].weappurl && itemList[0].weappurl!=""){ + getApp().globalData.custum_data=e.data.data; + var custum_data=e.data.data; + th.set_list(custum_data); + } + + } + + }) + } + }, + }, + + + methods: { + //设置自定义页面的列表 + set_list:function(data){ + var itemList = data.data; + itemList = JSON.parse(itemList); + this.setData({ + list:itemList, + backgroundColor: data.bkcolor, + fontcolor_sele: data.fontcolor_sele, + fontcolor:data.fontcolor, + }) + + }, + + nav_goto:function(e){ + var url=e.currentTarget.dataset.url; + if(!url) return false; + if(url[0]!='/') url='/'+url; + wx.switchTab({url:url,}) + } + + } + + +}) \ No newline at end of file diff --git a/custom-tab-bar/index.json b/custom-tab-bar/index.json new file mode 100644 index 0000000..32640e0 --- /dev/null +++ b/custom-tab-bar/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/custom-tab-bar/index.wxml b/custom-tab-bar/index.wxml new file mode 100644 index 0000000..fceecd7 --- /dev/null +++ b/custom-tab-bar/index.wxml @@ -0,0 +1,22 @@ + + + + + {{cartGoodsNum}} + + + + + {{item.nav_name}} + + + + + + + + + + + \ No newline at end of file diff --git a/custom-tab-bar/index.wxss b/custom-tab-bar/index.wxss new file mode 100644 index 0000000..934d857 --- /dev/null +++ b/custom-tab-bar/index.wxss @@ -0,0 +1,13 @@ +.main_bar{ + width:100%; border-top: 1rpx solid #ebebeb; position: fixed; bottom: 0; left: 0; z-index: 10000; +} +.tabbar_item{ + position:relative;height:100%;float:left;text-align:center;padding:5px 0; +} +.tab_img{display: flex; justify-content: center;align-items: center} +.nav_imgage{ + height: 56rpx; width: 56rpx;background-position: center;background-repeat: no-repeat;background-size: auto 85%; +} +.cart_num{ + top:0;background-color: red;color: #fff;font-size: 20rpx;border-radius: 50%;width: 40rpx;line-height:40rpx;height: 40rpx;position: absolute;z-index: 100;right:30rpx; +} \ No newline at end of file diff --git a/pages/cart/cart/cart.js b/pages/cart/cart/cart.js index 6569fa0..1a41adc 100644 --- a/pages/cart/cart/cart.js +++ b/pages/cart/cart/cart.js @@ -54,14 +54,21 @@ Page({ }, onShow: function() { + + if (typeof this.getTabBar === 'function' && this.getTabBar()) { + var index=getApp().getPageIndex(this); + this.getTabBar().setData({ + active: index //数字是当前页面在tabbar的索引 + }) + + getApp().requestCardNum(this); + } + var th = this; //调用底部导航 - t.editTabBar(th,getApp().globalData.setting.stoid,getApp().globalData.url); + //t.editTabBar(th,getApp().globalData.setting.stoid,getApp().globalData.url); this.getCardList(); - //--强行等待，让购物车的数量能够正确的线上 - setTimeout(function () { - if(getApp().globalData.user_id) getApp().requestCardNum(th); - },500) + //--获取是否又秒杀活动-- getApp().request.promiseGet("/api/ms/flash_sale/spikepage", { @@ -1300,7 +1307,13 @@ Page({ var prom_id=e.currentTarget.dataset.prom_id; var url="/pages/goods/goodsList/goodsList?prom_type=3&prom_id="+prom_id; getApp().goto(url); - } - - + }, + + //导航跳转 + nav_goto:function(e){ + var url=e.currentTarget.dataset.url; + if(!url || url=='') return; + if(url[0]!='/') url='/'+url; + getApp().goto(url); + } }); \ No newline at end of file diff --git a/pages/cart/cart/cart.wxml b/pages/cart/cart/cart.wxml index 1a68131..cde5553 100644 --- a/pages/cart/cart/cart.wxml +++ b/pages/cart/cart/cart.wxml @@ -1,6 +1,6 @@ - + diff --git a/pages/goods/categoryList/categoryList.js b/pages/goods/categoryList/categoryList.js index 22a2279..c11299a 100644 --- a/pages/goods/categoryList/categoryList.js +++ b/pages/goods/categoryList/categoryList.js @@ -66,6 +66,8 @@ Page({ is_show_class:false,//是否添加新样式 status_show:0, currentTab: 0, //预设当前项的值 + + load:0, }, @@ -171,15 +173,26 @@ Page({ } }); }, - onShow:function(){ + + if (typeof this.getTabBar === 'function' && this.getTabBar()) { + var index=getApp().getPageIndex(this); + this.getTabBar().setData({ + active: index //数字是当前页面在tabbar的索引 + }); + getApp().requestCardNum(this); + } + + var that=this; //调用底部导航 - t.editTabBar(that,getApp().globalData.setting.stoid,getApp().globalData.url); + //t.editTabBar(that,getApp().globalData.setting.stoid,getApp().globalData.url); //this.requestFirstCategoris(); setTimeout(function () { - if (getApp().globalData.user_id) getApp().requestCardNum(that); + //if (getApp().globalData.user_id) getApp().requestCardNum(that); },500) + + if(this.data.load) return false; getApp().getConfig2(function (e) { @@ -256,6 +269,8 @@ Page({ }else if(that.data.is_show_pp && that.data.select_classify_on == 220){ that.setData({ status_show: 2 }); } + + that.data.load=1; }) }, @@ -531,8 +546,11 @@ Page({ arr.push(item); } } - //进行排序 - arr.sort(compare("zm")); + //进行排序，只有是默认排序的时候，才按首字母排序 + if(parseInt(s.data.is_used_share)==0){ + arr.sort(compare("zm")); + } + for(var i=0;i< arr.length;i++){ for(var j=0;j -