登录页面授权

pages/welfareMall/personal/personal.js

@@ -1,10 +1,13 @@
 // pages/welfareMall/personal/personal.js
+import {getMobileCache, getPhoneNumber as getPhoneNumberSync} from '../../../utils/user'
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    isLogin: false,
+    mobileTop: 'TONY WU',
 
   },
 
@@ -12,9 +15,22 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    this.setData({
+      isLogin: getMobileCache() != ''
+  })
 
   },
 
+  // 授权手机号
+  getPhoneNumber(e) {
+    getPhoneNumberSync(e, _ => {
+        this.setData({
+            isLogin: true,
+            mobileTop: getMobileCache(),
+        })
+    })
+},
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/welfareMall/personal/personal.wxml

@@ -4,7 +4,8 @@
   <view class="head flex-column">
     <view class="head-personal flex-row">
       <image class="head-personal-logo" src="/images/welfareMall/head-portrait.png" />
-      <view class="head-personal-login">登录/注册</view>
+      <view class="head-personal-login" wx:if="{{isLogin}}">{{phone.toHide(mobileTop)}}</view>
+      <view class="head-login"><button class="personal-isLogin" wx:if="{{!isLogin}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录/注册</button></view>
     </view>
     <view class="head-card flex-row">
       <view class="head-card-coupon">我的优惠券</view>
@@ -76,5 +77,14 @@
     </view>
   </view>
 </view>
+
+<!-- 使用wxs 手机号码中间四位显示为*号 -->
+<wxs module="phone">
+var toHide = function(array) {
+  var mphone = array.substring(0, 3) + '****' + array.substring(7);
+  return mphone;
+}
+module.exports.toHide = toHide;
+</wxs>
 <!-- 底部导航 -->
 <tab-bar />

pages/welfareMall/personal/personal.wxss

@@ -23,7 +23,7 @@
 
 .head{
   width: 750rpx;
-  height: 550rpx;
+  height: 536rpx;
   background: #FFF2F3;
   border-radius: 0rpx 0rpx 40rpx 40rpx;
   justify-content: space-between;
@@ -83,6 +83,10 @@
   margin-top:  70rpx;
 }
 
+.head-login{
+  margin-left: -50rpx;
+}
+
 .content{
   width: 100%;
   height: auto;
@@ -90,7 +94,7 @@
 
 .content-style{
   width: 670rpx;
-  height: 150rpx;
+  height: 130rpx;
   justify-content: space-between;
 }
 
@@ -119,3 +123,11 @@
   margin-left: 10rpx;
 }
 
+.personal-isLogin{
+  font-size: 38rpx;
+  font-weight: 500;
+  color: #303030;
+  background-color: transparent;
+  border-style: none;
+}
+

utils/user.js

@@ -0,0 +1,31 @@
+function getUserInfo() {
+    return wx.getStorageSync('userInfo') || null;
+}
+
+function getMobileCache() {
+    const userInfo = getUserInfo()
+    if (userInfo != null) {
+        return userInfo.mobile || ''
+    }
+    return ''
+}
+
+function getPhoneNumber(e, func) {
+    var encryptedData = e.detail.encryptedData;
+    console.log(encryptedData);
+    var iv = e.detail.iv;
+    if (!encryptedData || encryptedData.length == 0 || !iv || iv.length == 0) {
+      return;
+    }
+    //获取手机号
+    getApp().doDecodePhone(encryptedData, iv, function () {
+      func(getMobileCache())
+    });
+}
+
+module.exports = {
+    getUserInfo,
+    getMobileCache,
+    getPhoneNumber
+}
+