'增加手机登录界面'

app.js

@@ -1,4 +1,5 @@
 //app.js
+let height = 0;
 App({
   onLaunch: function () {
     // 展示本地存储能力
@@ -20,8 +21,9 @@ App({
           wx.getUserInfo({
             success: res => {
               // 可以将 res 发送给后台解码出 unionId
+              console.log("app.js:"+res.userInfo)
               this.globalData.userInfo = res.userInfo
-
+              this.globalData.login = false
               // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
               // 所以此处加入 callback 以防止这种情况
               if (this.userInfoReadyCallback) {
@@ -32,8 +34,17 @@ App({
         }
       }
     })
+    //获取设备信息
+    wx.getSystemInfo({
+      success (res) {
+        console.log(res.windowHeight);
+        height = res.windowHeight;
+      }
+    })
   },
   globalData: {
-    userInfo: null
+    userInfo: null,
+    login:true,
+    phoneHeight:height
   }
 })

app.json

@@ -5,7 +5,8 @@
     "pages/collection/collection",
     "pages/user/user",
     "pages/index/bangdan/bangdan",
-    "pages/details/details"
+    "pages/details/details",
+    "pages/user/phoneLogin/phoneLogin"
   ],
   "window": {
     "navigationBarTitleText": "喜马拉雅",
@@ -20,13 +21,13 @@
       "pagePath": "pages/index/index",
       "text": "首页",
       "iconPath": "image/icon/home-icon.png",
-      "selectedIconPath": "image/icon/home-selectIcon.png"
+      "selectedIconPath": "image/icon/home-selecticon.png"
     },
     {
       "pagePath": "pages/classification/classification",
       "text": "分类",
       "iconPath": "image/icon/fen-icon.png",
-      "selectedIconPath": "image/icon/fen-selectIcon.png"
+      "selectedIconPath": "image/icon/fen-selecticon.png"
     },
     {
       "pagePath": "pages/collection/collection",
@@ -38,7 +39,7 @@
       "pagePath": "pages/user/user",
       "text": "我的",
       "iconPath": "image/icon/user-icon.png",
-      "selectedIconPath": "image/icon/user-selectIcon.png"
+      "selectedIconPath": "image/icon/user-selecticon.png"
     }]
   },
   "debug":true,

pages/classification/classification.js

@@ -190,10 +190,10 @@ Page({
     // 还有缺陷，代改进
     wx.getSystemInfo({
       success (res) {
-        console.log(res.windowHeight);
+        
         // var heightleft = (res.windowHeight*2);
         var height = (res.windowHeight*2);
-        console.log(height);
+       
         that.setData({
           phoneHeight:height,
         })
@@ -204,7 +204,7 @@ Page({
   //随着滚动动态设置左侧边栏的选中态
   showActive:function (e) {
     //方法欠佳，还需改进
-    console.log(parseInt( e.detail.scrollTop/125));
+    
     var index = parseInt( e.detail.scrollTop/125);
     this.setData({
       activeIndex: index
@@ -213,7 +213,7 @@ Page({
   // 侧边栏的点击事件
   change:function (e){
     var that = this;
-    console.log(e)
+    
     that.setData({
       VerticalNavTop: (e.currentTarget.dataset.index - 1) * 50,
       activeIndex: e.currentTarget.dataset.index,

pages/classification/classification.wxml

@@ -8,7 +8,6 @@
 <!-- 分类索引 -->
 <view class="ification">
     <!-- 左边部分 -->
-    <!-- 刻度尺的样式未能实现 -->
     <scroll-view class="scroll-left" scroll-y scroll-with-animation style="height:{{phoneHeight}}rpx" scroll-top="{{VerticalNavTop}}">
         <block wx:for="{{ificationTitle}}" wx:key="index">
             <view class="leftTitle {{index === activeIndex ? 'active':''}}" data-index="{{index}}" data-id="{{index}}" bindtap="change">{{item.title}}</view>
@@ -32,5 +31,4 @@
             </view>
         </view>
     </scroll-view>
-    
 </view>

pages/collection/collection.js

@@ -1,4 +1,10 @@
 // pages/collection/collection.js
+
+const app = getApp()
+
+let userInfo = app.globalData.userInfo;
+let login = app.globalData.login
+
 Page({
 
   /**
@@ -26,20 +32,18 @@ Page({
    */
   onLoad: function (options) {
     var that = this;
-    wx.getSetting({
-      success(res) {
-        if (res.authSetting['scope.userInfo']) {
-          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
-          that.setData({
-            login: false
-          })
-        } else {
-          that.setData({
-            login: true
-          })
-        }
-      }
-    })
+    // console.log(app)
+    // console.log("userInfo" +userInfo)
+    if (app.globalData.userInfo === null){
+      that.setData({
+        login:login
+      })
+    }else{
+      console.log("login:" + app.globalData.login)
+      that.setData({
+        login: app.globalData.login
+      })
+    }
   },
 
   /**
@@ -55,30 +59,18 @@ Page({
   onShareAppMessage: function () {
 
   },
+  
+  // 点击获取头像和昵称
   bindGetUserInfo(e) {
     var that = this;
     wx.getUserInfo({
       success: function (res) {
+        app.globalData.userInfo = e.detail.userInfo;
+        app.globalData.login = false;
         console.log(e.detail.userInfo);
         that.setData({
-          login: false,
+          login: app.globalData.login,
         })
-        // 存缓存
-        wx.setStorage({
-          key: 'avatarUrl',
-          data: e.detail.userInfo.avatarUrl,
-          success: (result) => {
-            console.log('缓存成功');
-          },
-
-        });
-        wx.setStorage({
-          key: 'nickName',
-          data: e.detail.userInfo.nickName,
-          success: (result) => {
-            console.log('缓存成功');
-          },
-        });
       }
     })
   },

pages/collection/collection.wxml

@@ -24,10 +24,8 @@
         <input placeholder="搜索你想听的节目"></input>
     </view>
     <view class="titleBar">
-      <view class="itemTitle" wx:for="{{content}}">
+      <view class="itemTitle" wx:for="{{content}}" wx:key>
           {{item.text}}
-          
       </view>
-      
     </view>
 </block>

pages/user/phoneLogin/phoneLogin.js

@@ -0,0 +1,67 @@
+const app = getApp();
+let height = app.globalData.phoneheight
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    height:height
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+    
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+    
+  }
+})

pages/user/phoneLogin/phoneLogin.json

@@ -0,0 +1,3 @@
+{
+  
+}

pages/user/phoneLogin/phoneLogin.wxml

@@ -0,0 +1,33 @@
+<view class="main bg-white" style="min-height:{{height}}px">
+    <view class="content">
+        <!-- 提示标语 -->
+        <view class="slogn">
+            登录后即可收听你的收藏专辑哦
+        </view>
+        <!-- 表单输入部分 -->
+        <view class="login">
+            <form class="frombox" report-submit="false" bindsubmit="" bindreset="">
+                <!-- 输入手机号 -->
+                <view class="phoneNumber">
+                    <view class="code">+86</view>
+                    <input type="number" placeholder="请输入手机号" placeholder-class="place"></input>
+                </view>      
+                <!-- 验证码 -->
+                <view class="yzm">
+                    <input type="number" placeholder="输入验证码" placeholder-class="place"></input>
+                    <view class="getcode">获取验证码</view>
+                </view>
+                <view class="submit" >
+                    <button><text class="icon-wechat"></text> 立即登录</button>
+                </view>
+            </form>
+        </view>
+
+        <view class="wechat" >
+            <view class="tips" >其他账户登录</view>
+            <view class="wecahtlogin" >
+                <button><text class="icon-wechat"></text> 微信登陆</button>
+            </view>
+        </view>
+    </view>
+</view>

pages/user/phoneLogin/phoneLogin.wxss

@@ -0,0 +1,114 @@
+/*  
+    96D655 
+    CCCCCC
+*/
+.main{
+   width: 100%; 
+}
+
+.content{
+    width: 80%;
+    margin: 0rpx auto;
+    margin-top: 100rpx;
+}
+.slogn{
+    width: 100%;
+    height: auto;
+    font-size: 25rpx;
+    color: #c3c3c3;
+    text-align: center;
+    /* word-spacing: 20rpx; */
+}
+.login{
+    width: 100%;
+    height: auto;
+    margin-top: 50rpx;
+    overflow: hidden;
+}
+.phoneNumber{
+    width: 100%;
+    height: auto;
+    display: flex;
+    padding: 20rpx;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 0.5rpx solid #cccccc;
+}
+.code{
+    width: 60rpx;
+    font-size: 27rpx;
+    line-height: 60rpx;
+    text-align: center;
+    padding-right: 20rpx;
+    border-right: 1rpx solid #cccccc;
+    /* box-sizing: border-box; */
+    margin-right: 20rpx;
+    color: #cccccc;
+}
+.yzm{
+    width: 100%;
+    height: auto;
+    display: flex;
+    padding: 20rpx;
+    justify-content: flex-start;
+    align-items: center;
+    box-sizing: border-box;
+    border-bottom: 0.5rpx solid #cccccc;
+}
+.getcode{
+    width: 200rpx;
+    font-size: 35rpx;
+    line-height: 60rpx;
+    text-align: center;
+    padding-left: 20rpx;
+    border-left: 1rpx solid #cccccc;
+    /* box-sizing: border-box; */
+    /* margin-left: 20rpx; */
+    color: #cccccc;
+}
+.place{
+    font-size: 29rpx;
+}
+.submit{
+    width: 100%;
+    height: 100rpx;
+    margin-top: 50rpx;
+    border-radius: 50rpx;
+    border: 0rpx;
+}
+.submit button{
+    width: 100%;
+    height: 100rpx;
+    /* margin-top: 50rpx; */
+    border-radius: 50rpx;
+    border: 0rpx;
+    color: #ffffff;
+    background: #cccccc;
+    font-size: 38rpx;
+}
+.wechat{
+    width: 100%;
+    height: auto;
+    margin-top: 150rpx;
+    text-align: center;
+}
+.tips{
+    font-size: 32rpx;
+    color: #333333;
+}
+.wecahtlogin{
+    width: 100%;
+    height: 100rpx;
+    margin-top: 100rpx;
+    border-radius: 50rpx;
+    border: 0rpx;
+}
+.wecahtlogin button{
+    width: 100%;
+    height: 100rpx;
+    border-radius: 50rpx;
+    border: 0rpx;
+    background: #96D655;
+    color: #ffffff;
+    font-size: 38rpx;
+}

pages/user/user.js

@@ -1,4 +1,7 @@
 // pages/user/user.js
+const app = getApp()
+let userInfo = app.globalData.userInfo;
+let login = app.globalData.login;
 Page({
 
   /**
@@ -23,39 +26,33 @@ Page({
       }
     })
     // 查看是否授权
-    wx.getSetting({
-      success(res) {
-        if (res.authSetting['scope.userInfo']) {
-          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
-          wx.getUserInfo({
-            success: function (res) {
-              console.log(res.userInfo);
-              that.setData({
-                login:true,
-                avatarUrl:res.userInfo.avatarUrl,
-                nickName:res.userInfo.nickName
-              })
-            }
-          })
-        }
-      }
-    })
+    if (app.globalData.userInfo === null) {
+      that.setData({
+        login: login
+      })
+    } else {
+      that.setData({
+        login: app.globalData.login,
+        avatarUrl: app.globalData.userInfo.avatarUrl,
+        nickName: app.globalData.userInfo.nickName
+      })
+    }
   },
   // 获取用户的头像和昵称信息
   bindGetUserInfo(e) {
     var that = this;
-    
     wx.getUserInfo({
       success: function(res) {
         console.log(e.detail.userInfo);
+        app.globalData.userInfo = e.detail.userInfo;
+        app.globalData.login = false;
         that.setData({
-          login:true,
+          login: app.globalData.login,
           avatarUrl:e.detail.userInfo.avatarUrl,
           nickName:e.detail.userInfo.nickName
         })
       }
     })
-    
   },
   
   /**
@@ -63,5 +60,15 @@ Page({
    */
   onShareAppMessage: function () {
 
+  },
+  phoneLogin:function(){
+    wx.navigateTo({
+      url: './phoneLogin/phoneLogin',
+      success: (result)=>{
+        
+      },
+      fail: ()=>{},
+      complete: ()=>{}
+    });
   }
 })

pages/user/user.wxml

@@ -1,5 +1,5 @@
 <!-- pages/user/user.wxml -->
-<block wx:if="{{!login}}">
+<block wx:if="{{login}}">
     <!-- logo -->
     <view class="logo">
         <image class="logoImg" src="/image/logo.png" mode="widthFix"></image>
@@ -13,7 +13,7 @@
                 微信登录
             </button>
         </view>
-        <view class="phoneLogin">
+        <view class="phoneLogin" bindtap="phoneLogin">
             <button>手机号登录</button>
         </view>
     </view>

pages/user/user.wxss

@@ -1,6 +1,6 @@
 /* pages/user/user.wxss */
 .body{
-    background-color: #ece6e6;
+    background-color: #f3f0f0;
 }
 .topBar{
     width: 100%;

project.config.json

@@ -47,6 +47,10 @@
 			"currentL": -1,
 			"list": []
 		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
 		"miniprogram": {
 			"current": 4,
 			"list": [
@@ -82,6 +86,13 @@
 					"id": -1,
 					"name": "details",
 					"pathName": "pages/details/details",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "phoneLogin",
+					"pathName": "pages/user/phoneLogin/phoneLogin",
 					"scene": null
 				}
 			]