1

miniprogram/app.json

@@ -10,6 +10,22 @@
     "pages/download/download",
     "pages/address/index"
   ],
+  "tabBar": {
+    "custom": true,
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/orders/orders",
+        "text": "订单"
+      }
+    ]
+  },
+  "usingComponents": {
+    
+  },
   "window": {
     "navigationBarTextStyle": "black",
     "navigationStyle": "custom"

miniprogram/custom-tab-bar/index.json

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

miniprogram/custom-tab-bar/index.less

@@ -0,0 +1,60 @@
+.bottom-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #FFFFFF;
+  box-shadow: inset 0rpx 2rpx 0rpx 0rpx #F0F0F0;
+  padding: 20rpx 32rpx 58rpx 32rpx;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: space-around;
+
+  .orders {
+    display: flex;
+    align-items: center;
+    margin-right: 40rpx;
+    padding: 8rpx 0 16rpx;
+
+    &.active {
+      text {
+        color: #131415;
+      }
+    }
+
+    image {
+      width: 44rpx;
+      height: 44rpx;
+    }
+
+    text {
+      padding-left: 16rpx;
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #AAAAAA;
+      line-height: 44rpx;
+      text-align: center;
+    }
+  }
+
+  .btnSection {
+    flex: 1 auto;
+
+    button {
+      width: 100%;
+      line-height: 88rpx;
+      background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%);
+      border-radius: 44rpx;
+      font-weight: 500;
+      font-size: 32rpx;
+      color: #FFFFFF;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      &[disabled][type=primary] {
+        opacity: 0.7;
+      }
+    }
+  }
+}

miniprogram/custom-tab-bar/index.ts

@@ -0,0 +1,18 @@
+Component({
+  data: {
+    selected: 0,
+    paths: ['pages/index/index', 'pages/orders/orders']
+  },
+  methods: {
+    switchTab(e: any) {
+      const data = e.currentTarget.dataset
+      // const url = data.path
+      // wx.switchTab({url})
+      // this.setData({
+      //   selected: data.index
+      // })
+      console.log(e, 'data', data, this.data.paths[Number(data.id)])
+      
+    }
+  }
+})

miniprogram/custom-tab-bar/index.wxml

@@ -0,0 +1,12 @@
+<view class="bottom-section">
+  <view class="orders {{ selected === 0 ? 'active' : '' }}" bind:tap="switchTab" data-id="0">
+    <image wx:if="{{ selected === 0 }}" src="./images/icon-home-active.png" />
+    <image wx:else src="./images/icon-home.png" />
+    <text>首页</text>
+  </view>
+  <view class="orders {{ selected === 1 ? 'active' : '' }}" bind:tap="switchTab" data-id="1">
+    <image wx:if="{{ selected === 1 }}" src="./images/icon-order-active.png" />
+    <image wx:else src="./images/icon-order.png" />
+    <text>订单</text>
+  </view>
+</view>

miniprogram/pages/index/index.wxml

@@ -75,7 +75,7 @@
             </view>
           </view>
 
-          <view class="bottom-section">
+          <!-- <view class="bottom-section">
             <view class="orders active">
               <image src="./images/icon-home-active.png" />
               <text>首页</text>
@@ -84,10 +84,7 @@
               <image src="./images/icon-order.png" />
               <text>订单</text>
             </view>
-            <!-- <view class="btnSection">
-              <button bind:tap="onBuyShop" type="primary" disabled="{{ isOverSaled }}">立即购买</button>
-            </view> -->
-          </view>
+          </view> -->
 
 
           <van-popup show="{{ popupShow }}" safe-area-inset-bottom="{{false}}" lock-scroll="{{true}}" bind:close="onClose" position="bottom" round z-index="101">