我的页面获取手机号

pages/my/index.js

@@ -12,9 +12,12 @@ Page({
     userInfo: {},
     list: [],
     BASEIMGURL: app.globalData.BASEIMGURL,
-    loading: true
+    BASEIMGURL1: app.globalData.BASEIMGURL1,
+    loading: true,
+    hideGetInfo: true
   },
   onLoad: function () {
+
     this.setData({
       BASEIMGURL: app.globalData.BASEIMGURL
     })
@@ -45,7 +48,11 @@ Page({
     })
   },
   async getList() {
-    if (!app.globalData.userInfo.phone) return;
+    if (!app.globalData.userInfo.phone) {
+      return this.setData({
+        hideGetInfo: false
+      })
+    };
     try {
       let result = await app.globalData.api.activity_list_mine(app.globalData.userInfo.phone);
       const lngArr = [];
@@ -160,4 +167,40 @@ Page({
       })
     }
   },
+  onTabItemTap(e){ 
+    console.log(1,e)
+  },
+  onUnload(){ 
+    this.setData({
+      hideGetInfo: true
+    })
+  },
+  async getPhoneNumber(e) {
+    const that = this;
+    if (e.detail.errMsg == "getPhoneNumber:ok") {
+      let res = await app.globalData.api.bindphone({
+        "openid": app.globalData.userInfo.openid,
+        "encryptedData": e.detail.encryptedData,
+        "iv": e.detail.iv,
+        "invitor": app.globalData.shareOpenId
+      })
+      app.globalData.userInfo.phone = res.data.phone;
+      that.setData({
+        userInfo: {
+          ...this.data.userInfo,
+          'phone': res.data.phone
+        }
+      });
+      that.getList();
+      // wx.showToast({
+      //   title: '参加成功！',
+      //   icon: 'none'
+      // })
+    } else {
+      wx.showToast({
+        title: '请授权您的手机号！',
+        icon: 'none'
+      })
+    }
+  },
 })

pages/my/index.wxml

@@ -1,6 +1,6 @@
 <!--index.wxml-->
-<import src="index.skeleton.wxml"/>
-<template is="skeleton" wx:if="{{loading}}"/>
+<import src="index.skeleton.wxml" />
+<template is="skeleton" wx:if="{{loading}}" />
 <wxs module="filter" src="../../utils/filter.wxs"></wxs>
 <view class="container">
 	<!-- <navBar 
@@ -23,10 +23,10 @@
 						</view> -->
 						<view class="item-img">
 							<image src="{{BASEIMGURL + item.imgList.img[0]}}" mode='aspectFill'></image>
-								<view class="content-title text-overflow">{{item.title}}</view>
+							<view class="content-title text-overflow">{{item.title}}</view>
 						</view>
 						<view class="item-content">
-						
+
 							<view class="content-addr">
 								<view class='addr-icon'>
 									<image src="../../img/location.png"></image>
@@ -54,14 +54,14 @@
 								<text class="fn-d">/人</text>
 							</view>
 							<view class="fn-r" catchtap="touchHandler">
-								
+
 								<view class="go-detail" wx:if="{{userInfo.phone == item.organizer}}" catchtap='goEdit' data-id='{{item.id}}'>
 									编辑
 								</view>
 								<view class="go-detail" wx:else catchtap='goDetail' data-id='{{item.id}}'>
 									已参加
 								</view>
-								
+
 							</view>
 						</view>
 					</view>
@@ -81,4 +81,16 @@
 			</view>
 		</view>
 	</view> -->
+	<view class="get-info-mask" hidden="{{hideGetInfo}}">
+		<view class="in {{!hideGetInfo?'scroll-in':''}}">
+			<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>

pages/my/index.wxss

@@ -294,4 +294,82 @@ 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: 100000;  
+}
+
+.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: 0;
+  }
+}