添加自定义tabbar，添加授权手机号弹窗

app.json

@@ -12,11 +12,8 @@
     "navigationBarTitleText": "Coffee Talk",
     "navigationBarTextStyle": "black"
   },
-  "usingComponents": {
-    "navBar": "/components/navBar/navBar"
-  },
   "tabBar": {
-    "backgroundColor": "#fff",
+    "custom": true,
     "list": [{
       "pagePath": "pages/index/index",
       "text": "",

custom-tab-bar/index.js

@@ -0,0 +1,40 @@
+const app = getApp();
+Component({
+  data: {
+    selected: 0,
+    list: [{
+      pagePath: "/pages/index/index",
+      "iconPath": "/img/home2.png",
+      "selectedIconPath": "/img/home.png",
+      text: ""
+    }, {
+      pagePath: "/pages/my/index",
+      "iconPath": "/img/user2.png",
+      "selectedIconPath": "/img/user.png",
+      text: ""
+    }]
+  },
+  attached() {
+  },
+  methods: {
+    switchTab(e) {
+      const data = e.currentTarget.dataset
+      const url = data.path;
+
+      if(url === '/pages/my/index' && !app.globalData.userInfo.phone){
+        console.log(1111);
+        const pages = getCurrentPages();
+        const prevPage = pages[pages.length - 1]     //获取当前页面信息
+        prevPage.setData({
+          hideGetInfo:false
+        })
+        return 
+      }
+
+      wx.switchTab({url})
+      this.setData({
+        selected: data.index
+      })
+    }
+  }
+})

custom-tab-bar/index.json

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

custom-tab-bar/index.wxml

@@ -0,0 +1,8 @@
+<!--miniprogram/custom-tab-bar/index.wxml-->
+<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-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
+  </cover-view>
+</cover-view>

custom-tab-bar/index.wxss

@@ -0,0 +1,39 @@
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: white;
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: 30000000;
+}
+
+.tab-bar-border {
+  background: #F0F2F6;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+
+.tab-bar-item {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tab-bar-item cover-image {
+  width: 27px;
+  height: 27px;
+}
+
+.tab-bar-item cover-view {
+  font-size: 10px;
+}

pages/index/index.js

@@ -12,7 +12,9 @@ Page({
     userInfo: {},
     list: [], //活动列表
     BASEIMGURL: app.globalData.BASEIMGURL,
-    loading: true
+    BASEIMGURL1: app.globalData.BASEIMGURL1,
+    loading: true,
+    hideGetInfo: true
     // hasUserInfo: false,
     // canIUse: wx.canIUse('button.open-type.getUserInfo')
   },
@@ -40,7 +42,7 @@ Page({
     this.setData({
       BASEIMGURL: app.globalData.BASEIMGURL,
     });
-    
+
   },
   userInfoHandler(e) {
     console.log(e)
@@ -86,10 +88,10 @@ Page({
   add(e) {
     let actid = e.currentTarget.dataset.actid;
     //判断是否过期
-    let currentAct = this.data.list.filter(v=>{
+    let currentAct = this.data.list.filter(v => {
       return v.id == actid;
     })
-    if(currentAct[0].isoverdue){
+    if (currentAct[0].isoverdue) {
       return wx.showToast({
         title: '活动时间已截止，您可以参加其它活动哦～',
         icon: 'none'
@@ -123,15 +125,14 @@ Page({
       that.setData({
         userInfo: {
           ...this.data.userInfo,
-          'phone': res.data.phone
-        }
+          'phone': res.data.phone,
+        },
+        hideGetInfo: true
       });
-      //参加活动
-      that.add(e);
-      // wx.showToast({
-      //   title: '参加成功！',
-      //   icon: 'none'
-      // })
+      //跳转到我的页面
+      wx.switchTab({
+        url: '/pages/my/index',
+      })
     } else {
       wx.showToast({
         title: '请授权您的手机号！',
@@ -151,25 +152,25 @@ Page({
       let myDate = new Date();
       let now = myDate.valueOf();
       let time = new Date(v.endtime).valueOf();
-      if(app.globalData.systemInfo.platform == 'ios'){ 
+      if (app.globalData.systemInfo.platform == 'ios') {
         let _date = v.endtime.replace(/\.|\-/g, '/');
         time = new Date(_date).valueOf();
       }
-      
+
       if (now > time) {
         v.isoverdue = true;
       } else {
         v.isoverdue = false;
       }
 
-      v.starttime = v.starttime.substr(0,16);
+      v.starttime = v.starttime.substr(0, 16);
       v.shareMember = 0;
       if (v.images) {
         try {
-          
+
           v.imgList = JSON.parse(v.images)
         } catch (error) {
-          
+
         }
       }
       if (v.members) {
@@ -203,7 +204,7 @@ Page({
       success: function (res) { //成功后的回调
         let newList = that.data.list;
         res.result.elements.map(v => {
-          newList.map(j => {      
+          newList.map(j => {
             if (v.to.lat == j.latitude && v.to.lng == j.longitude) {
               j.distance = v.distance;
             }
@@ -242,9 +243,23 @@ Page({
     })
   },
   onShow() {
-
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 0
+      });
+    }
   },
   onShareAppMessage() {
     return app.onShareAppMessage();
   },
+  closeTap() {
+    this.setData({
+      hideGetInfo: true
+    })
+  },
+  onUnload() {
+    this.setData({
+      hideGetInfo: true
+    })
+  },
 })

pages/index/index.wxml

@@ -74,19 +74,22 @@
 				</view>
 
 			</block>
+				<view class="black-128"></view>
 		</scroll-view>
 	</view>
 	<view wx:if="{{userInfo.role == 'organizer'}}" class="add" bindtap="goAdd">
 		<text>+</text>
 	</view>
-	<!-- <view class="get-info" wx:if='{{!loading && !userInfo.nickname}}'>
-		<view class="in">
-			<view class="get-info-head">提示</view>
-			<view class="get-info-content">请授权您的个人信息！</view>
-			<view class="get-info-footer">
-				<text>确定</text>
-				<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"></button>
+	<view class="get-info-mask" hidden="{{hideGetInfo}}" catchtap="closeTap">
+		<view class="in {{!hideGetInfo?'scroll-in':''}}" catchtap="bindreturn">
+			<view class="avatar">
+				<image src="{{ BASEIMGURL1 + 'coffeetalk_small.jpg'}}"></image>
+			</view>
+			<view class="name">Coffee Talk</view>
+			<view class="des">申请获得你微信绑定的手机号</view>
+			<view class="btn">
+				<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
 			</view>
 		</view>
-	</view> -->
+	</view>
 </view>

pages/index/index.wxss

@@ -35,6 +35,13 @@ page {
   font-size: 0;
 }
 
+.black-128 {
+  height: 100rpx;
+  clear: both;
+  overflow: hidden;
+  font-size: 0;
+}
+
 .list .item {
   position: relative;
   width: 100%;
@@ -45,13 +52,13 @@ page {
 
 .list .item .mask{
   position: absolute;
-  z-index: 100000;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-color: rgba(255, 255, 255, .4);
   border-radius: 24rpx;
+  z-index: 2;
 }
 
 .item .me-active{
@@ -297,4 +304,81 @@ page {
   background: none;
 }
 
-@import "index.skeleton.wxss";
+@import "index.skeleton.wxss";
+.get-info-mask{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, .3);
+  z-index: 3;  
+}
+
+.get-info-mask .in{
+  position: absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  height: 600rpx;
+  background-color: #fff;
+  border-top-left-radius: 50rpx;
+  border-top-right-radius: 50rpx;
+}
+.get-info-mask .avatar{
+  width: 130rpx;
+  height: 130rpx;
+  border-radius: 50%;
+  background-color: #ccc;
+  margin: 80rpx auto 0;
+  overflow: hidden;
+}
+.get-info-mask .avatar image{
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.get-info-mask .name{
+  text-align: center;
+  padding: 20rpx 0 10rpx;
+  font-size: 38rpx;
+  font-weight: bold;
+  color:#333;
+}
+.get-info-mask .des{
+  text-align: center;
+  font-size: 28rpx;
+  color:#666;
+}
+.get-info-mask .btn{
+  width:700rpx;
+  height: 100rpx;
+  background-color: blue;
+  margin: 100rpx auto 0;
+  border-radius: 10rpx;
+}
+.get-info-mask button:not([size='mini']) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  width: 100%;
+  height: 100%;
+  margin:0;
+  padding:0;
+  color: #fff;
+  background-color: rgba(143, 103, 232, 1);
+}
+.get-info-mask .scroll-in{
+  bottom:0;
+  animation: myScroll .4s forwards;
+}
+
+@keyframes myScroll {
+  0% {  
+    bottom: -600rpx;
+  }
+  100% {
+    bottom: 48px;
+  }
+}

pages/my/index.js

@@ -14,7 +14,7 @@ Page({
     BASEIMGURL: app.globalData.BASEIMGURL,
     BASEIMGURL1: app.globalData.BASEIMGURL1,
     loading: true,
-    hideGetInfo: true
+    // hideGetInfo: true
   },
   onLoad: function () {
 
@@ -49,9 +49,7 @@ Page({
   },
   async getList() {
     if (!app.globalData.userInfo.phone) {
-      return this.setData({
-        hideGetInfo: false
-      })
+      return
     };
     try {
       let result = await app.globalData.api.activity_list_mine(app.globalData.userInfo.phone);
@@ -171,9 +169,9 @@ Page({
     console.log(1,e)
   },
   onUnload(){ 
-    this.setData({
-      hideGetInfo: true
-    })
+    // this.setData({
+    //   hideGetInfo: true
+    // })
   },
   async getPhoneNumber(e) {
     const that = this;
@@ -203,4 +201,12 @@ Page({
       })
     }
   },
+  onShow(){ 
+    if (typeof this.getTabBar === 'function' &&
+        this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 1
+        })
+      }
+  }
 })

pages/my/index.wxml

@@ -69,6 +69,7 @@
 				</view>
 
 			</block>
+			<view class="black-128"></view>
 		</scroll-view>
 	</view>
 	<!-- <view class="get-info" wx:if='{{!loading && !userInfo.nickname}}'>
@@ -81,7 +82,7 @@
 			</view>
 		</view>
 	</view> -->
-	<view class="get-info-mask" hidden="{{hideGetInfo}}">
+	<!-- <view class="get-info-mask" hidden="{{hideGetInfo}}">
 		<view class="in {{!hideGetInfo?'scroll-in':''}}">
 			<view class="avatar">
 				<image src="{{ BASEIMGURL1 + 'coffeetalk_small.jpg'}}"></image>
@@ -92,5 +93,5 @@
 				<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
 			</view>
 		</view>
-	</view>
+	</view> -->
 </view>

pages/my/index.wxss

@@ -373,3 +373,9 @@ page {
     bottom: 0;
   }
 }
+.black-128 {
+  height: 100rpx;
+  clear: both;
+  overflow: hidden;
+  font-size: 0;
+}