登录页自定义头部

app.wxss

@@ -5,12 +5,12 @@
   height: 100%;
 }
 .custom{
-  position: fixed;
+  position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   height: 45px;
-  background: #fff;
+  background: transparent;
   z-index: 999;
 }
 .custom text{

assets/js/project.config.js

@@ -7,5 +7,5 @@ export const appName = 'zoey来款测试demo'// fcc
 export let baseUrl = 'https://bxxt.hzwlsoft.com' // 外网环境
 // export let baseUrl = 'http://10.10.10.46:8055/' // 测试环境
 // export const baseUrl = 'http://10.0.1.9:8080' // 本地环境
-export const URL_CONFIG = '/jero-boot/'
 
+export const URL_CONFIG = '/jero-boot/'

pages/login/login.js

@@ -5,6 +5,7 @@ import { wxBind } from '../../assets/js/common'
 var countdown = 60; // 倒计时秒数
 Page({
   data: {
+    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
     phone: '',
     captcha: '',
     openId: '',
@@ -87,6 +88,9 @@ Page({
       url: '../phonePassword/phonePassword',
     })
   },
+  goBack(){
+    wx.navigateBack()
+  },
   // 微信登录
   wxLogin(){
     const that = this

pages/login/login.wxml

@@ -1,7 +1,13 @@
 <view class="container-box">
   <view class="home-bg">
-    <!-- 顶部背景图 mode="scaleToFill" 按照宽高填充，忽略图片原比例-->
+    <!-- 自定义头部start -->
-    <image mode="scaleToFill" src="../../assets/images/login-bg.png"></image>
+    <view class="custom flex_center back-none" style="padding-top:{{statusBarHeight}}px;">
+      <image class="go-back" src="../../assets/images/back-white.png" bindtap="goBack"></image>
+      <text>登录</text>
+    </view>
+    <view class="empty_custom back-none" style="padding-top:{{statusBarHeight}}px"></view><!-- 空view用来填充自定义头部的padding-top -->
+    <!-- 自定义头部end -->
+    <image class="bg-image" mode="scaleToFill" src="../../assets/images/login-bg.png"></image>
     <view class="bg-text">
       <text>您好，欢迎使用</text>
       <text>标准所协同工作平台</text>

pages/login/login.wxss

@@ -11,14 +11,29 @@ page {
   transform: translateY(-50px) !important;
 }
 .home-bg{
+  position: relative;
   height: 200pt;
 }
+.home-bg .bg-image{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.back-none{
+  background-color: none !important;
+}
+.back-none text{
+  color: #fff !important;
+}
 .bg-text{
-  position: relative;
+  bottom: 50pt;
-  top: -100pt;
+  position: absolute;
   left: 34pt;
   color: #fff;
 }
+.go-back{
+  z-index: 9;
+}
 .bg-text text:nth-child(1){
   display: block;
   font-size: 15px;

pages/mine/mine.js

@@ -136,7 +136,7 @@ Page({
             wx.removeStorage({
               key: 'avatarUrl'
             })
-            wx.redirectTo({
+            wx.navigateTo({
               url: '../login/login',
             })
           })
@@ -176,6 +176,11 @@ Page({
         name: userInfo.name,
         phone: userInfo.phone.substr(0, 3) + '-' + userInfo.phone.substr(3, 4) + '-' + userInfo.phone.substr(7, 4)
       })
+    }else{
+      this.setData({
+        name: '',
+        phone: '未知手机号'
+      })
     }
     if (avatarUrl) {
       this.setData({

pages/phonePassword/phonePassword.js

@@ -9,6 +9,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
     show: true, // 默认显示的是闭眼睛
     form: {
       currdatetime: '',
@@ -25,10 +26,8 @@ Page({
       show: !this.data.show
     })
   },
-  back(){
+  goBack(){
-    wx.navigateBack({
+    wx.navigateBack()
-      delta: 1
-    })
   },
   // 改变验证码
   handleChangeCheckCode() {

pages/phonePassword/phonePassword.wxml

@@ -1,8 +1,14 @@
 <!--pages/meeting/meeting.wxml-->
 <view class="container-box">
   <view class="home-bg">
-    <!-- 顶部背景图 mode="scaleToFill" 按照宽高填充，忽略图片原比例-->
+    <!-- 自定义头部start -->
-    <image mode="scaleToFill" src="../../assets/images/login-bg.png"></image>
+    <view class="custom flex_center back-none" style="padding-top:{{statusBarHeight}}px;">
+      <image src="../../assets/images/back-white.png" bindtap="goBack"></image>
+      <text>登录</text>
+    </view>
+    <view class="empty_custom back-none" style="padding-top:{{statusBarHeight}}px"></view><!-- 空view用来填充自定义头部的padding-top -->
+    <!-- 自定义头部end -->
+    <image class="bg-image" mode="scaleToFill" src="../../assets/images/login-bg.png"></image>
     <view class="bg-text">
       <text>您好，欢迎使用</text>
       <text>标准所协同工作平台</text>
@@ -39,7 +45,7 @@
       <button type="primary" formType="submit">登录</button>
     </view>
     <view bindtap="forget" class="forget">
-      <text bindtap="back">手机验证码登录</text>
+      <text bindtap="goBack">手机验证码登录</text>
     </view>
   </form>
 </view>

pages/phonePassword/phonePassword.wxss

@@ -10,11 +10,23 @@ page {
   transform: translateY(-50px) !important;
 }
 .home-bg{
+  position: relative;
   height: 200pt;
 }
+.home-bg .bg-image{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.back-none{
+  background-color: none !important;
+}
+.back-none text{
+  color: #fff !important;
+}
 .bg-text{
-  position: relative;
+  bottom: 50pt;
-  top: -100pt;
+  position: absolute;
   left: 34pt;
   color: #fff;
 }