开发顶部切换年级组件

app.js

@@ -21,12 +21,10 @@ App({
   login(shareUid) {
     this.storeBindings = createStoreBindings(this, {
       store,
-      fields: ['numA', ],
-      actions: ['updateNumA']
+      actions: ['setUser']
     })
     wx.login({
       success: async (res) => {
-        this.updateNumA(res)
         if (res.code) {
           // 获取openid
           let data = {
@@ -34,7 +32,7 @@ App({
             shareUid
           }
           let userRes = await userLogin(data)
-          console.log(userRes);
+          this.setUser(userRes.data)
           wx.setStorageSync('uid', userRes.data.uid)
           wx.setStorageSync('user', userRes.data)
           this.globalData.userInfo = userRes.data
@@ -57,7 +55,6 @@ App({
   getNavbarInfo() {
     // 获取系统信息
     const systemInfo = wx.getSystemInfoSync();
-    console.log(systemInfo);
     // 胶囊按钮位置信息
     const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
     // 导航栏高度 = 状态栏高度 + 44

components/navigationBar/index.js

@@ -2,7 +2,27 @@ const app = getApp()
 import {
   setUserInfo
 } from '~/api/user'
+import {
+  storeBindingsBehavior
+} from 'mobx-miniprogram-bindings'
+import {
+  store
+} from '~/store/index'
 Component({
+  // 自动绑定
+  behaviors: [storeBindingsBehavior],
+  storeBindings: {
+    store,
+    fields: {
+      userInfo: 'userInfo'
+      // numA: () => store.numA, // 绑定字段第一种方式
+      // numB: (store) => store.numB, // 绑定字段第二种方式
+      // sum: 'sum' // 绑定字段第三种方式
+    },
+    actions: {
+      setUser: 'setUser'
+    }
+  },
   properties: {
     title: {
       type: String,
@@ -14,8 +34,8 @@ Component({
     menuRight: app.globalData.menuRight,
     menuTop: app.globalData.menuTop,
     menuHeight: app.globalData.menuHeight,
-    grade: null,
-    isGradeShow: false
+    isGradeShow: false,
+    temporaryGrade: null
   },
   attached: function () {
     // console.log(wx.getStorage(user));
@@ -30,12 +50,18 @@ Component({
         return
       }
       this.setData({
-        grade: code
+        temporaryGrade: code
+      })
+    },
+    showGrade() {
+      this.setData({
+        isGradeShow: true,
+        temporaryGrade: this.data.userInfo.grade
       })
     },
     // 修改年级
     async changeGrade(e) {
-      const grade = this.data.grade
+      const grade = this.data.temporaryGrade
       if (!grade) {
         return wx.showToast({
           title: '请选择年级',
@@ -46,9 +72,10 @@ Component({
       this.setData({
         isGradeShow: false,
       })
-      await setUserInfo({
+      let res = await setUserInfo({
         grade
       }, 'put')
+      this.setUser(res)
     },
   }
 })

components/navigationBar/index.less

@@ -47,7 +47,7 @@
   z-index: 9999;
 
   .gradeBox {
-    width: 530rpx;
+    width: 520rpx;
     padding: 33rpx 40rpx 50rpx;
     border-radius: 20rpx;
     background-color: white;
@@ -59,19 +59,24 @@
     }
 
     .content {
-      margin-top: 65rpx;
+      margin-top: 55rpx;
       display: flex;
       justify-content: space-between;
       align-items: center;
 
       .grade {
-        padding: 14rpx 64rpx;
+        padding: 12rpx 64rpx;
         border-radius: 50rpx;
         font-size: 36rpx;
         color: #333;
         background-color: #E4E4E4;
       }
 
+      .oneRow {
+        width: 100%;
+        text-align: center;
+      }
+
       .check {
         color: white;
         background-color: #1CCC69;
@@ -82,10 +87,11 @@
       text-align: center;
 
       .submit {
+        width: 360rpx;
         margin-top: 60rpx;
-        padding: 16rpx 118rpx;
+        padding: 14rpx 0px;
         display: inline-block;
-        background-color: #F7991B;
+        background-color: #45B7FF;
         color: white;
         font-size: 42rpx;
         border-radius: 50rpx;

components/navigationBar/index.wxml

@@ -1,7 +1,7 @@
 <!-- 自定义顶部栏 -->
 <view class="nav-bar" style="height:{{navBarHeight}}px;">
   <view class="view" style="height:{{menuHeight}}px;top:{{menuTop}}px;">
-    <view class="selectGrade">一年级</view>
+    <view class="selectGrade" bindtap="showGrade">{{userInfo.gradeName}}</view>
     <view class="title">{{title}}</view>
   </view>
 </view>
@@ -12,26 +12,32 @@
 -->
 <view class="content" style="margin-top:{{navBarHeight}}px;"></view>
 
-<view class="gradeContainer" catchtouchmove='true' style="margin-top:{{navBarHeight}}px;">
+<view wx:if="{{isGradeShow}}" class="gradeContainer" catchtouchmove='true' style="margin-top:{{navBarHeight}}px;">
   <view class="gradeBox" bindtap="selectGrade">
-    <view class="title">年级选择</view>
+    <view class="title">请选择年级</view>
     <view class="content">
-      <view class="grade {{temporaryGrade=='PRESCHOOL'?'check':''}}" data-code="PRESCHOOL">学前班</view>
-      <view class="grade {{temporaryGrade=='PRIMARY_FIRST_GRADE'?'check':''}}" data-code="PRIMARY_FIRST_GRADE">一年级
-      </view>
+      <view class="grade oneRow {{temporaryGrade=='PRESCHOOL'?'check':''}}" data-code="PRESCHOOL">学前班</view>
     </view>
     <view class="content">
+      <view class="grade {{temporaryGrade=='PRIMARY_FIRST_GRADE'?'check':''}}" data-code="PRIMARY_FIRST_GRADE">一年级
+      </view>
       <view class="grade {{temporaryGrade=='PRIMARY_SECOND_GRADE'?'check':''}}" data-code="PRIMARY_SECOND_GRADE">二年级
       </view>
+    </view>
+    <view class="content">
       <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">三年级
       </view>
+      <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">四年级
+      </view>
     </view>
     <view class="content">
-      <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">四年级
+      <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">五年级
+      </view>
+      <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">六年级
       </view>
     </view>
     <view class="submitBox">
-      <button class="resetBtn submit" bindtap="changeGrade">登录</button>
+      <button class="resetBtn submit" bindtap="changeGrade">确定</button>
     </view>
   </view>
 </view>

components/navigationBar/index.wxss

@@ -43,7 +43,7 @@
   z-index: 9999;
 }
 .gradeContainer .gradeBox {
-  width: 530rpx;
+  width: 520rpx;
   padding: 33rpx 40rpx 50rpx;
   border-radius: 20rpx;
   background-color: white;
@@ -54,18 +54,22 @@
   font-weight: bold;
 }
 .gradeContainer .gradeBox .content {
-  margin-top: 65rpx;
+  margin-top: 55rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .gradeContainer .gradeBox .content .grade {
-  padding: 14rpx 64rpx;
+  padding: 12rpx 64rpx;
   border-radius: 50rpx;
   font-size: 36rpx;
   color: #333;
   background-color: #E4E4E4;
 }
+.gradeContainer .gradeBox .content .oneRow {
+  width: 100%;
+  text-align: center;
+}
 .gradeContainer .gradeBox .content .check {
   color: white;
   background-color: #1CCC69;
@@ -74,10 +78,11 @@
   text-align: center;
 }
 .gradeContainer .gradeBox .submitBox .submit {
+  width: 360rpx;
   margin-top: 60rpx;
-  padding: 16rpx 118rpx;
+  padding: 14rpx 0px;
   display: inline-block;
-  background-color: #F7991B;
+  background-color: #45B7FF;
   color: white;
   font-size: 42rpx;
   border-radius: 50rpx;

pages/my/index.js

@@ -35,7 +35,6 @@ Page({
   // 设置用户信息及vip状态和任务完成情况
   async setUserInfo() {
     let userInfo = await getUserInfo()
-    console.log(userInfo, '4222');
     let vipTime = await getVipInfo()
     this.getTasks()
     this.setData({
@@ -51,7 +50,6 @@ Page({
   },
   async getProducts() {
     let products = await getProducts()
-    console.log(products);
     let productVip = products.find(item => {
       return item.type == 1
     })

store/index.js

@@ -6,15 +6,23 @@ import {
 
 export const store = observable({
   // 数据字段
-  numA: 1,
-  numB: 2,
+  userInfo: {},
   // 计算属性
   get sum() {
     return this.numA + this.numB
   },
   // actions
-  updateNumA: action(function (step) {
+  setUser: action(function (step) {
     console.log(step, '触发');
-    this.numA += step
+    let grade = step.grade
+    var gradeObj = {
+      "PRIMARY_FIRST_GRADE": "一年级",
+      "PRIMARY_SECOND_GRADE": "二年级",
+      "PRIMARY_THREE_GRADE": "三年级",
+      "PRIMARY_SENIOR_GRADE": "四年级",
+      "PRESCHOOL": "学前班",
+    }
+    step.gradeName = grade ? gradeObj[grade] : '请选择'
+    this.userInfo = step
   })
 })