[新增]新增自定义tabbar组件

app.js

@@ -14,9 +14,9 @@ App({
         wx.$qqMap = new QQMapWX({
             key: "3TBBZ-O42LU-HXCVQ-2M66A-NCFTT-LMBHU"
         })
-
         //挂载api方法
         wx.$api = apis
+
     },
     globalData: {
         navAppInfo  : {
@@ -24,6 +24,7 @@ App({
             envVersion  : "trial",
             goodUrl     : "/pages/goods/show?goodsId=",
             cardUrl     : "/pages/card/index?cardid="
-        }
+        },
+        id          : 1
     }
 })

app.json

@@ -1,8 +1,7 @@
 {
     "pages": [
-        "pages/config/config",
-
         "pages/welcome/index",
+        "pages/config/config",
         "pages/company/index",
         "pages/company/search/search",
         "pages/shortVideo/index",
@@ -45,42 +44,14 @@
         "pages/home/projectSuccess/projectSuccess",
         "pages/home/activeSuccess/activeSuccess"
     ],
-    "tabBar": {
-        "list": [{
-                "pagePath": "pages/shortVideo/index",
-                "text": "视频",
-                "iconPath": "/static/tabbar/tabbar_icon_00.png",
-                "selectedIconPath": "/static/tabbar/tabbar_icon_show_00.png"
-            },
-            {
-                "pagePath": "pages/mall/index",
-                "text": "商城",
-                "iconPath": "/static/tabbar/tabbar_icon_01.png",
-                "selectedIconPath": "/static/tabbar/tabbar_icon_show_01.png"
-            },
-            {
-                "pagePath": "pages/ticket/index",
-                "text": "优惠",
-                "iconPath": "/static/tabbar/tabbar_icon_02.png",
-                "selectedIconPath": "/static/tabbar/tabbar_icon_show_02.png"
-            },
-            {
-                "pagePath": "pages/user/index",
-                "text": "我的",
-                "iconPath": "/static/tabbar/tabbar_icon_03.png",
-                "selectedIconPath": "/static/tabbar/tabbar_icon_show_03.png"
-            }
-        ],
-        "selectedColor": "#0b0041",
-        "color": "#4e4f51",
-        "borderStyle": "white",
-        "custom": true
-    },
     "window": {
         "navigationBarBackgroundColor": "#fff",
         "navigationBarTitleText": "",
         "navigationBarTextStyle": "black"
     },
+    "usingComponents": {
+        "storeTabBar": "/components/storeTabBar/storeTabBar"
+    },
     "plugins": {
         "live-player-plugin": {
             "version": "1.2.5",

components/mallIndex_list/mallIndex_list.wxml

@@ -7,7 +7,7 @@
         <view class="recommend-label" wx:for="{{pushList}}" wx:key="pushList" bindtap="push"
             data-id="{{item.goods_id}}">
             <view class="recommend-img">
-                <image src="{{item.cover}}" mode="aspectFill"></image>
+                <image class="recommend-img-src" src="{{item.cover}}" mode="aspectFill"></image>
             </view>
             <view class="recommend-cont">
                 <view class="nowrap recommend-name">

components/mallIndex_list/mallIndex_list.wxss

@@ -34,7 +34,7 @@
     padding-top: 100%;
 }
 
-.recommend-img image {
+.recommend-img-src {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -65,7 +65,6 @@
 .recommend-cost {
     font-size: 24rpx;
     color: #999;
-    /* text-decoration:line-through; */
     margin: 2rpx 0 0 20rpx;
 }
 

components/mallIndex_video/mallIndex_video.wxml

@@ -4,7 +4,7 @@
         <view class="videoTitle-name">
             <view class="videoTitle-name-color">商品直播间专区</view>
             <view class="videoTitle-name-img">
-                <image src="/static/mall_icon/liveIng_bf.png"></image>LIVE
+                <image class="videoTitle-name-img-img" src="/static/mall_icon/liveIng_bf.png"></image>LIVE
             </view>
         </view>
         <navigator hover-class="none" url="/pages/mall_video/mall_video" class="videoTitle-more">
@@ -16,7 +16,7 @@
             <view class="videoList-img">
                 <image class="videoList-cover" src="/static/images/goods_text.png" mode="aspectFill"></image>
                 <view class="videoList-tips">
-                    <image src="/static/mall_icon/liveIng_icon.png"></image>正在直播
+                    <image class="videoList-tips-image" src="/static/mall_icon/liveIng_icon.png"></image>正在直播
                 </view>
             </view>
             <view class="videoList-cont">

components/mallIndex_video/mallIndex_video.wxss

@@ -40,7 +40,7 @@
    margin-top: 5rpx;
 }
 
-.videoTitle-name-img image {
+.videoTitle-name-img-img {
     width: 34rpx;
     height: 34rpx;
     margin: 1rpx 6rpx 0 10rpx;
@@ -73,7 +73,7 @@
     padding-top: 80%;
 }
 
-.videoList-img .videoList-cover {
+.videoList-cover {
     position: absolute;
     top: 0;
     left: 0;
@@ -96,7 +96,7 @@
     box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
 }
 
-.videoList-tips image {
+.videoList-tips-image {
     width: 30rpx;
     height: 30rpx;
     margin: 8rpx 10rpx 6rpx 0;

components/storeTabBar/storeTabBar.js

@@ -0,0 +1,56 @@
+/**
+ *  Web唐明明
+ *  匆匆数载恍如梦，岁月迢迢华发增。
+ *  碌碌无为枉半生，一朝惊醒万事空。
+ */
+
+import { tabBar } from "../../lib/storeConfig"
+
+Component({
+    /**
+     * 组件接收参数
+     */
+    properties: {
+        // 显示组件页面的路径
+        pagesUrl : {
+            type    : String,
+            value   : ""
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        selected        : 0,
+        color           : "#4e4f51",
+        selectedColor   : "#0b0041",
+        list            : []
+    },
+
+    /**
+     * 生命周期函数
+     */
+    pageLifetimes: {
+        show(){
+            let selectedIndex = tabBar.findIndex(val=> val.pagePath == '/' + this.data.pagesUrl)
+            this.setData({
+                list    : tabBar,
+                selected: selectedIndex
+            })
+        }
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        switchTab(e) {
+            const data = e.currentTarget.dataset
+            const url = data.path
+            wx.reLaunch({
+                url
+            })
+        }
+    }
+})

components/storeTabBar/storeTabBar.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/storeTabBar/storeTabBar.wxml

@@ -1,9 +1,8 @@
-
 <cover-view class="tab-bar">
     <cover-view class="tab-bar-border"></cover-view>
     <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}"
         data-index="{{index}}" bindtap="switchTab">
-        <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
+        <cover-image class="tab-bar-item-icon" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
-        <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
+        <cover-view class="tab-bar-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
     </cover-view>
 </cover-view>

components/storeTabBar/storeTabBar.wxss

@@ -5,7 +5,7 @@
  *  碌碌无为枉半生，一朝惊醒万事空。
  */
 
-.tab-bar {
+ .tab-bar {
     position: fixed;
     bottom: 0;
     left: 0;
@@ -34,11 +34,11 @@
     flex-direction: column;
 }
 
-.tab-bar-item cover-image {
+.tab-bar-item-icon{
     width: 24px;
     height: 24px;
 }
 
-.tab-bar-item cover-view {
+.tab-bar-text{
     font-size: 10px;
 }

custom-tab-bar/index.js

@@ -1,52 +0,0 @@
-
-/**
- *  Web唐明明
- *  匆匆数载恍如梦，岁月迢迢华发增。
- *  碌碌无为枉半生，一朝惊醒万事空。
- */
-
-import { tabBar } from "../lib/storeConfig"
-
-Component({
-    /**
-     * 组件的初始数据
-     */
-    data: {
-        selected     : 0,
-        color        : "#4e4f51",
-        selectedColor: "#0b0041",
-        list         : []
-    },
-
-    /**
-     * 生命周期函数
-     */
-    attached(){
-        if(this.data.list.length <= 0 && tabBar.length > 0){
-            this.setData({
-                list: tabBar
-            })
-        }else{
-            wx.showToast({
-                title: "获取店铺模块信息失败",
-                icon : "none"
-            })
-        }
-    },
-
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-        switchTab(e) {
-            const data = e.currentTarget.dataset
-            const url  = data.path
-            wx.switchTab({
-                url
-            })
-            this.setData({
-                selected: data.index
-            })
-        }
-    }
-})

custom-tab-bar/index.json

@@ -1,3 +0,0 @@
-{
-    "component": true
-}

pages/company/index.js

@@ -67,14 +67,17 @@ Page({
         // 存储浏览记录
         wx.setStorageSync('companyRecord', record)
 
+        // 存储点击的企业id
+        wx.setStorageSync('compayId', company.company_id)
+        
         // 存储店铺ID
         wx.setStorage({
             data    : company.store_id,
             key     : "storeId",
             success : res=>{
                 if(res.errMsg == "setStorage:ok"){
-                    wx.navigateTo({
+                    wx.reLaunch({
-                        url: "/pages/shortVideo/index",
+                        url: "/pages/config/config",
                     })
                 }
             }

pages/config/config.js

@@ -18,30 +18,44 @@ Page({
             })
             return
         }
+        wx.getStorage({
+            key     : 'compayId',
+            success : res=>{
                 
-        wx.$api.publics.storeConfig({
+                wx.$api.publics.storeConfig({
-            company_id: e.companyoid
+                    company_id: res.data
-        }).then(res => {
+                }).then(res => {
-            let tabBarVal = res.concat({})
+                    let tabBarVal = res.concat({})
-            tabBarVal.forEach(res => {
+                    tabBarVal.forEach(res => {
-                switch (res.slug) {
+                        switch (res.slug) {
-                    case "video":
+                            case "video":
-                        tabBar.push(video)
+                                tabBar.push(video)
-                        break;
+                                break;
-                    case "mall":
+                            case "mall":
-                        tabBar.push(mall)
+                                tabBar.push(mall)
-                        break;
+                                break;
-                    case "ticket":
+                            case "ticket":
-                        tabBar.push(ticket)
+                                tabBar.push(ticket)
-                        break;
+                                break;
-                    default :
+                            default :
-                        tabBar.push(user)
+                                tabBar.push(user)
-                        break;
+                                break;
-                }
+                        }
-            })
+                    })
-            wx.switchTab({
+
-                url: tabBar[0].pagePath
+                    if(tabBarVal.length == tabBar.length){
-            })
+                        wx.reLaunch({
+                            url: tabBar[0].pagePath,
+                        })
+                    }
+                })
+            }
         })
+    },
+    /**
+     * 生命周期函数
+     */
+    onShow(){
+        wx.hideHomeButton()
     }
 })

pages/mall/index.js

@@ -28,6 +28,13 @@ Page({
         this.pushInfo();
     },
 
+    /**
+     * 生命周期函数
+     */
+    onShow(){
+        wx.hideHomeButton()
+    },
+
     /**
      * 商城首页数据
      */

pages/mall/index.wxml

@@ -39,3 +39,5 @@
         </block>
     </view>
 </view>
+
+<storeTabBar pages-url="pages/mall/index"></storeTabBar>

pages/shortVideo/index.js

@@ -10,10 +10,10 @@ Page({
      * 页面的初始数据
      */
     data: {
-        videoList: [], //获取短视频列表
+        videoList   : [], //获取短视频列表
-        videoIndex: 0, //当前播放视频的下标
+        videoIndex  : 0, //当前播放视频的下标
-        videoId: "", //当前播放的视频id
+        videoId     : "", //当前播放的视频id
-        playState: true, //视频播放状态
+        playState   : true, //视频播放状态
     },
 
     /**

pages/shortVideo/index.wxml

@@ -1,15 +1,13 @@
 
-<view>短视频</view>
+
-<view>短视频</view>
-<view>短视频</view>
-<view>短视频</view>
-<view>短视频</view>
-<view>短视频</view>
-<view>短视频</view>
-<view>短视频</view>
 <navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=4">进入直播间</navigator>
 
-<view class="videos-content">
+
+<view style="margin-top: 10vh">
+    <view bindtap="onId">改变全局id</view>
+</view>
+
+<view class="videos-content" wx:if="{{1 == 2}}">
     <swiperViode
         wx:if="{{videoList.length > 0}}"
         class="swiper-viode"
@@ -52,3 +50,5 @@
         </view>
     </view>
 </view>
+
+<storeTabBar pages-url="pages/shortVideo/index"></storeTabBar>

pages/user/index.wxml

@@ -111,3 +111,5 @@
         </view>
     </view>
 </view>
+
+<storeTabBar pages-url="pages/user/index"></storeTabBar>

pages/welcome/index.js

@@ -25,7 +25,7 @@ Page({
                     key     : "storeId",
                     success : ()=>{
                         wx.reLaunch({
-                            url: "/pages/shortVideo/index",
+                            url: "/pages/config/config",
                         })
                     },
                     fail    : ()=>{

project.config.json

@@ -86,9 +86,9 @@
                     "scene": null
                 },
                 {
-                    "name": "读取企业配置",
+                    "name": "分享进入",
                     "pathName": "pages/config/config",
-                    "query": "companyoid=17",
+                    "query": "",
                     "scene": null
                 }
             ]