LL - 我的导航栏问题

9ae9ed54 · 严立 · 99fd9b2d · 9ae9ed54 · 9ae9ed54 · 9ae9ed54
Commit 9ae9ed54 authored Sep 28, 2020 by 严立
Showing with 71 additions and 52 deletions
app.js
component/navigation/navigation.js
pages/mine/home/home.js
pages/mine/home/home.wxml
pages/mine/home/home.wxss
pages/mine/home/image/mine.png
--- a/app.js
+++ b/app.js
@@ -35,14 +35,13 @@ App({
    onLaunch: function () {
        this.setUnitProportion()
        this.login()
+        if (this.globalData.token === '') return
+        this.queryUserStatus()
    },
    onShow: function () {
-        console.log('onShow')
        this.setAppStatus()
-        if (this.globalData.token === '') return
-        this.queryUserStatus()
    },
    setAppStatus: function () {
@@ -55,6 +54,8 @@ App({
            success: (response) => {
                let funcResponse = response.data
                this.globalData.appStatus = Boolean(Number(funcResponse[0].value))
+                // 测试数据
+                this.globalData.appStatus = true
                console.log(this.globalData.appStatus)
            }
        })

--- a/component/navigation/navigation.js
+++ b/component/navigation/navigation.js
@@ -77,6 +77,11 @@ Component({
    // 属性监听
    observers: {
+        'scrollStyle': function (funcValue) {
+            console.log(this.data.scrollStyle)
+            if (JSON.stringify(this.data.scrollStyle) === '{}') return
+            this.setNavigationStyle()
+        },
        'background': function () {
            this.setNavigationStyle()
        },
@@ -138,6 +143,7 @@ Component({
                funcTitleStyle['background'] = this.data.isScrollChange ? this.data.scrollStyle.change.background : this.data.scrollStyle.normal.background
                this.setData({
+                    color: this.data.isScrollChange ? this.data.scrollStyle.change.color : this.data.scrollStyle.normal.color,
                    backIcon: this.data.isScrollChange ? this.data.scrollStyle.change.backIcon : this.data.scrollStyle.normal.backIcon
                })
            }

--- a/pages/mine/home/home.js
+++ b/pages/mine/home/home.js
@@ -6,19 +6,7 @@ Page({
    data: {
        // 导航栏相关属性
-        navigationStyle: {
+        navigationStyle: {},
-            normal: {
-                backIcon: '',
-                color: '#FFFFFF',
-                background: 'rgba(255, 255, 255, 0)'
-            },
-            change: {
-                backIcon: '',
-                color: '#000000',
-                background: 'rgba(255, 255, 255, 1)'
-            },
-            scroll: '400rpx',
-        },
        navigationScroll: 0,
@@ -91,6 +79,7 @@ Page({
    onShow: function () {
        this.setData({ appStatus: App.globalData.appStatus })
        this.setUserInfo()
+        this.setNavigation()
    },
    // 去活动预约列表
@@ -357,6 +346,26 @@ Page({
        }
    },
+    setNavigation: function () {
+        let funcUserInfo = wx.getStorageSync('userInfo')
+        let funcNavigation = {
+            normal: {
+                backIcon: '',
+                color: funcUserInfo.userType === 0 ? '#000000' : '#FFFFFF',
+                background: 'rgba(255, 255, 255, 0)'
+            },
+            change: {
+                backIcon: '',
+                color: '#000000',
+                background: 'rgba(255, 255, 255, 1)'
+            },
+            scroll: '300rpx',
+        }
+        this.setData({
+            navigationStyle: funcNavigation
+        })
+    },
    // 登录注册页
    checkRegister() {
        if (this.data.isRegister) {
@@ -591,8 +600,6 @@ Page({
    },
    onPageScroll: function (event) {
-        console.log(this.scrollLock)
        // 优化滚动事件触发频率
        if (this.scrollLock) return
        this.scrollLock = true
@@ -600,9 +607,7 @@ Page({
        this.setData({
            navigationScroll: event.scrollTop
        })
-        console.log(this.data.navigationScroll)
        // 恢复滚动事件
        this.scrollTimer = setTimeout(() => {
            this.scrollLock = false

--- a/pages/mine/home/home.wxml
+++ b/pages/mine/home/home.wxml
--- a/pages/mine/home/home.wxss
+++ b/pages/mine/home/home.wxss
 .container {
    min-height: 100vh;
-    background: #F3F4F6
+    background: #f3f4f6;
 }
 .navigation {
@@ -17,19 +17,26 @@
 }
 .mine {
-    position: relative;
    width: 750rpx;
    height: 380rpx;
    padding: 220rpx 0 0 48rpx;
 }
+.mine-bgi {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 750rpx;
+    height: 500rpx;
+}
 .user-type {
    width: 126rpx;
    height: 40rpx;
    font-weight: 500;
    font-size: 22rpx;
    color: #fff;
-    background-color: #6783AE;
+    background-color: #6783ae;
    text-align: center;
    line-height: 40rpx;
    border-radius: 4rpx;
@@ -55,14 +62,15 @@
    justify-content: center;
    align-items: center;
    border-radius: 50%;
-    background-color: #F0DABB;
+    background-color: #f0dabb;
 }
-.mine-avatar>image {
+.mine-avatar > image {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
 }
 .mine-info {
    padding-top: 12rpx;
 }
@@ -79,14 +87,14 @@
 }
 /* 积分 */
 .integral {
-    color: #0D0D0E;
+    color: #0d0d0e;
    text-align: right;
 }
 .glod {
-    color: #F0DABB;
+    color: #f0dabb;
 }
 .integral-num {
@@ -131,6 +139,7 @@
 }
 .coupon {
+    z-index: 9;
    width: 670rpx;
    height: 176rpx;
    padding: 41rpx 32rpx;
@@ -146,13 +155,13 @@
 .cpopon-info text:nth-child(1) {
    font-size: 34rpx;
    font-weight: 600;
-    color: #15191F;
+    color: #15191f;
 }
 .cpopon-info text:nth-child(2) {
    margin-top: 12rpx;
    font-size: 26rpx;
-    color: #161A1F;
+    color: #161a1f;
 }
 .coupon image {
@@ -161,6 +170,7 @@
 }
 .status {
+    z-index: 9;
    width: 670rpx;
    height: 130rpx;
    margin-top: 48rpx;
@@ -415,13 +425,13 @@
 .order-activity-title {
    font-size: 34rpx;
-    color: #15191F;
+    color: #15191f;
    font-weight: 600;
 }
 .order-activity-all text {
    font-size: 26rpx;
-    color: #15191F;
+    color: #15191f;
 }
 .order-activity-icon-list {
@@ -437,7 +447,7 @@
    position: relative;
    width: 80rpx;
    height: 80rpx;
-    background-color: #F5F6F8;
+    background-color: #f5f6f8;
    border-radius: 50%;
 }
@@ -456,7 +466,7 @@
    color: #fff;
    text-align: center;
    line-height: 32rpx;
-    background-color: #E66060;
+    background-color: #e66060;
    border-radius: 16rpx;
 }
@@ -467,7 +477,7 @@
 .order-activity-icon-wrapper text {
    margin-top: 16rpx;
    font-size: 22rpx;
-    color: #15191F;
+    color: #15191f;
 }
 .more-wrapper {
@@ -481,7 +491,7 @@
    margin-top: 41rpx;
    padding: 26rpx 32rpx;
    color: #fff;
-    background: linear-gradient(141deg, #F4D5C1 0%, #FA99CE 100%);
+    background: linear-gradient(141deg, #f4d5c1 0%, #fa99ce 100%);
    border-radius: 4rpx;
    opacity: 0.81;
 }
@@ -522,8 +532,6 @@
    height: 50rpx;
 }
 .pass-logo-wrapper text {
    height: 50rpx;
    margin-left: 20rpx;
@@ -556,7 +564,7 @@
    width: 606rpx;
    height: 328rpx;
    padding: 0 32rpx 8rpx;
-    background-color: #F5F6F8;
+    background-color: #f5f6f8;
    border-radius: 4rpx;
 }
@@ -570,7 +578,7 @@
    height: 100rpx;
    margin-left: 20rpx;
    font-size: 26rpx;
-    color: #15191F;
+    color: #15191f;
    line-height: 100rpx;
 }
@@ -588,7 +596,7 @@
 .goods-content text {
    font-size: 30rpx;
-    color: #15191F;
+    color: #15191f;
    font-weight: 600;
    line-height: 42rpx;
 }
@@ -599,7 +607,7 @@
 .goods-footer text {
    font-size: 26rpx;
-    color: #959DA9;
+    color: #959da9;
 }
 .art-logo {
@@ -614,7 +622,7 @@
    height: 248rpx;
    margin-top: 68rpx;
    padding: 72rpx 32rpx 0;
-    background-color: #F5F6F8;
+    background-color: #f5f6f8;
    border-radius: 4rpx;
 }
@@ -645,7 +653,7 @@
 }
 .appointment-activity-title {
-    color: #15191F;
+    color: #15191f;
    font-size: 30rpx;
    font-weight: 600;
    line-height: 42rpx;
@@ -653,7 +661,7 @@
 .appointment-activity-num {
    margin-top: 16rpx;
-    color: #959DA9;
+    color: #959da9;
    font-size: 26rpx;
 }
@@ -665,7 +673,7 @@
 .border-right {
    width: 1rpx;
    height: 75rpx;
-    background-color: #E2E7EF;
+    background-color: #e2e7ef;
 }
 .appointment-subscribe {
@@ -686,7 +694,7 @@
 .more text {
    font-size: 26rpx;
-    color: #15191F;
+    color: #15191f;
 }
 .more image {
@@ -706,7 +714,7 @@
 .service text {
    font-size: 34rpx;
-    color: #15191F;
+    color: #15191f;
    font-weight: 600;
 }
@@ -736,4 +744,4 @@ image {
 .logo-box image {
    max-width: 100% !important;
    max-height: 100% !important;
 }
\ No newline at end of file
--- a/pages/mine/home/image/mine.png
+++ b/pages/mine/home/image/mine.png